更新用户指引
This commit is contained in:
X1627315083
@@ -1,3 +1,4 @@
|
||||
import { nextTick} from "vue";
|
||||
import { driver } from "driver.js";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import "driver.js/dist/driver.css";
|
||||
@@ -12,8 +13,17 @@ let data = {
|
||||
}
|
||||
const driverObj__ = driver({
|
||||
steps: [
|
||||
{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here.' } },
|
||||
// { element: '.Guide_1_2', popover: { title: '', description: 'Description' } },
|
||||
{ element: '.Guide_1_1_1', popover: { title: 'Title', description: 'Description' } },
|
||||
{ element: '.Guide_1_27', popover: { title: '', description: 'You can change the mannequin and other settings in Workspace.' } },
|
||||
{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.' } },
|
||||
{ element: '.Guide_1_29', popover: { title: '', description: 'Select a mannequin of your choice from our system library.' } },
|
||||
|
||||
|
||||
{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here. ' } },
|
||||
{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
|
||||
{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
|
||||
// { element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
|
||||
// { element: '.Guide_1_3', popover: { title: '', description: 'Description' } },
|
||||
// { element: '.Guide_1_2', popover: { title: '', description: 'Description' } },
|
||||
{ element: '.Guide_1_4', popover: { title: '', description: 'Click here to try the latest image generation technology to create your mood board.' } },
|
||||
{ element: '.Guide_1_5', popover: { title: '', description: "Enter keywords that capture the mood you wish to express and then click the 'Generate' button." } },
|
||||
@@ -23,6 +33,14 @@ const driverObj__ = driver({
|
||||
//以上moodboard
|
||||
{ element: '.Guide_1_2_1', popover: { title: '', description: 'Upload two print images here' } },
|
||||
{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_3', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_4', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_5', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_6', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_7', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_8', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_2_9', popover: { title: '', description: 'Crop the uploaded image here.' } },
|
||||
{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
|
||||
{ element: '.Guide_1_10', popover: { title: '', description: 'Click here to extract primary colors from image.' } },
|
||||
{ element: '.Guide_1_11', popover: { title: '', description: 'Select the color you want from these color blocks as the first color.' } },
|
||||
@@ -32,15 +50,21 @@ const driverObj__ = driver({
|
||||
|
||||
{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
|
||||
{ element: '.Guide_1_9', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
|
||||
{ element: '.Guide_1_9_1', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
|
||||
{ element: '.Guide_1_9_2', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
|
||||
|
||||
{ element: '.Guide_1_13', popover: { title: '', description: 'Click here to choose a category for the uploaded sketch.' } },
|
||||
{ element: '.Guide_1_13_1', popover: { title: '', description: 'Choose correct category for the sketch.' } },
|
||||
{ element: '.Guide_1_13_2', popover: { title: '', description: 'Choose correct category for the sketch.' } },
|
||||
{ element: '.Guide_1_14', popover: { title: '', description: 'After you have confirmed categories of sketches are correct, click here to complete the uploading process.' } },
|
||||
//开始design
|
||||
{ element: '.Guide_1_15', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
|
||||
{ element: '.Guide_1_16', popover: { title: '', description: 'Please wait a few seconds.' } },
|
||||
{ element: '.Guide_1_17', popover: { title: '', description: 'Click on any design image you are interested in to modify the details.' } },
|
||||
// { element: '.Guide_1_18', popover: { title: '', description: 'Description' } },
|
||||
{ element: '.Guide_1_30', popover: { title: '', description: 'Click the ‘Redesign’ button to generate new results using the selected mannequin.' } },
|
||||
{ element: '.Guide_1_16', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
|
||||
{ element: '.Guide_1_17', popover: { title: '', description: 'Click on any design image you are interested in to modify the details.' } },
|
||||
{ element: '.Guide_1_19', popover: { title: '', description: 'Click on the clothes to modify its details.' } },
|
||||
{ element: '.Guide_1_20', popover: { title: '', description: 'Click here to add or change the print.' } },
|
||||
{ element: '.Guide_1_21', popover: { title: '', description: 'You can find the print you uploaded earlier in your Library.' } },
|
||||
@@ -49,11 +73,7 @@ const driverObj__ = driver({
|
||||
// { element: '.Guide_1_24', popover: { title: '', description: 'Description' } },
|
||||
{ element: '.Guide_1_25', popover: { title: '', description: 'Preview printed design here.' ,side: "right",align: 'end' } },
|
||||
{ element: '.Guide_1_26', popover: { title: '', description: 'Click here to finalize your modification.' } },
|
||||
{ element: '.Guide_1_27', popover: { title: '', description: 'You can change the mannequin and other settings in Workspace.' } },
|
||||
{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.' } },
|
||||
{ element: '.Guide_1_29', popover: { title: '', description: 'Select a mannequin of your choice from our system library.' } },
|
||||
{ element: '.Guide_1_30', popover: { title: '', description: 'Click the ‘Redesign’ button to generate new results using the selected mannequin.' } },
|
||||
{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: 'Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a :href="https://code-create.com.hk/aida/" target="_blank"></a>' } },
|
||||
{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: 'Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a href="https://code-create.com.hk/aida/" style="pointer-events: auto;" target="_blank">https://code-create.com.hk/aida/</a>' } },
|
||||
],
|
||||
// showProgress: true,//控制总页数和当前页数是否显示
|
||||
allowClose:false,
|
||||
@@ -69,41 +89,55 @@ const driverObj__ = driver({
|
||||
doneBtnText: '✕',
|
||||
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
|
||||
// console.log(popover,options,element);
|
||||
if(element){
|
||||
element.classList.remove('Guide_')
|
||||
}
|
||||
popover.previousButton.style.display = 'none'
|
||||
let driver = document.querySelector('body')
|
||||
if(options.state.activeIndex >= 2 && options.state.activeIndex < 3){
|
||||
options.config.stagePadding = 0
|
||||
}else{
|
||||
options.config.stagePadding = 10
|
||||
}
|
||||
if(
|
||||
// options.state.activeIndex >= 1 && options.state.activeIndex <= 2 ||
|
||||
// options.state.activeIndex >= 18 && options.state.activeIndex < 19 ||
|
||||
// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
|
||||
driverObj__.isLastStep()
|
||||
){
|
||||
popover.footer.style.display = 'block'
|
||||
popover.footerButtons.style.pointerEvents = 'auto';
|
||||
// driver.classList.add('showEvents')
|
||||
addDiv(options.state.activeElement)
|
||||
}else{
|
||||
popover.footer.style.display = 'none'
|
||||
removeDiv(options.state.activeElement)
|
||||
popover.footerButtons.style.pointerEvents = 'none';
|
||||
// driver.classList.remove('showEvents')
|
||||
}
|
||||
// console.log(options.state.activeIndex);
|
||||
// let driver = document.querySelector('body')
|
||||
driverIndex__ = driverObj__.getState().activeIndex
|
||||
data = {
|
||||
index : driverIndex__,
|
||||
driver : true,
|
||||
}
|
||||
store?.commit("setGuide", data);
|
||||
element = options.state.activeElement
|
||||
element.classList.add('Guide_')
|
||||
if(options.state.activeIndex == 0){
|
||||
popover.wrapper.style.display = 'none'
|
||||
}else{
|
||||
popover.wrapper.style.display = 'block'
|
||||
}
|
||||
|
||||
//判断是不是generate 如果是就吧边距设为0
|
||||
// if(options.state.activeIndex >= 2 && options.state.activeIndex < 3){
|
||||
// options.config.stagePadding = 0
|
||||
// }else{
|
||||
// options.config.stagePadding = 10
|
||||
// }
|
||||
if(
|
||||
options.state.activeIndex >= 2 && options.state.activeIndex < 3 ||
|
||||
options.state.activeIndex >= 5 && options.state.activeIndex < 8 ||
|
||||
options.state.activeIndex >= 13 && options.state.activeIndex < 15 ||
|
||||
// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
|
||||
driverObj__.isLastStep()
|
||||
){
|
||||
popover.footer.style.display = 'block'
|
||||
// popover.previousButton.style.display = 'block'
|
||||
popover.footerButtons.style.pointerEvents = 'auto';
|
||||
// driver.classList.add('showEvents')
|
||||
// addDiv(options.state.activeElement)
|
||||
}else{
|
||||
popover.footer.style.display = 'none'
|
||||
// popover.previousButton.style.display = 'none'
|
||||
// removeDiv(options.state.activeElement)
|
||||
popover.footerButtons.style.pointerEvents = 'none';
|
||||
// driver.classList.remove('showEvents')
|
||||
}
|
||||
nextTick().then(()=>{
|
||||
if(element){
|
||||
element.classList.remove('Guide_')
|
||||
}
|
||||
element = options.state.activeElement
|
||||
element.classList.add('Guide_')
|
||||
console.log(element);
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
//销毁前
|
||||
onDestroyStarted:()=>{
|
||||
@@ -121,20 +155,14 @@ const driverObj__ = driver({
|
||||
|
||||
|
||||
|
||||
// onNextClick:(element, step, options) =>{
|
||||
// console.log(element,step,options);
|
||||
// driverObj__.moveNext()
|
||||
// // element.style.posiiton = 'relative'
|
||||
// // const mask = document.createElement('div');
|
||||
// // mask.style.position = 'absolute';
|
||||
// // mask.style.top = '0';
|
||||
// // mask.style.left = '0';
|
||||
// // mask.style.width = '100%';
|
||||
// // mask.style.height = '100%';
|
||||
// // mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
||||
// // mask.style.zIndex = '9999';
|
||||
// // element.appendChild(mask);
|
||||
// }
|
||||
onNextClick:(element, step, options) =>{
|
||||
console.log(element,step,options);
|
||||
if(options.state.activeIndex == 2){
|
||||
driverObj__.moveTo(4)
|
||||
}else{
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
}
|
||||
});
|
||||
function addDiv(element){
|
||||
element.style.posiiton = 'relative'
|
||||
|
||||
Reference in New Issue
Block a user