aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2023-12-12 14:34:57 +08:00
parent c70abb9867
commit d2dfcd4c45
6 changed files with 92 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/tool/guide.js
View File

@@ -15,18 +15,18 @@ const driverObj__ = driver({
steps: [
{ element: '.Guide_1_1_1', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_27', popover: { title: '', description: "You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations." } },
{ element: '.Guide_1_28', popover: { title: '', description: "Select the apparel type you'd like to work on.", side: "right",align: 'center' } },
{ element: '.Guide_1_28', popover: { title: '', description: "Select the apparel type you'd like to work on.", side: "right", } },
{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.', side: "right",align: 'end' } },
{ element: '.Guide_1_29', popover: { title: '', description: 'You can currently select a mannequin from our system library. Later, you can also choose from the user library after registering your own mannequin.' } },
{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here. ' } },
{ element: '.Guide_1_1_2', popover: { title: '', description: 'For the Moodboard, Printboard, or Sketchboard, we provide three different sourcing methods to add images. The first option, as displayed on this page, is to upload directly from your local device. ' } },
{ element: '.Guide_1_1_2', popover: { title: '', description: "The second method is to select from your library. <br> You might notice that your library page is currently empty; there's no need to worry. All the images you upload will be automatically added to your library. In the future, you won't have to upload each time—you can simply choose from your library instead." } },
{ element: '.Guide_1_1_2', popover: { title: '', description: 'For the Moodboard, Printboard, or Sketchboard, we provide three different sourcing methods to add images. The first option is Upload, allowing you to <stront>upload</stront> directly from your local device.', side: "left",align: 'start' } },
{ element: '.Guide_1_1_2', popover: { title: '', description: "The second method is to select from your <strong>Library</strong>. <br> You might notice that your library page is currently empty; there's no need to worry. All the images you upload will be automatically added to your library. In the future, you won't have to upload each time—you can simply choose from your library instead." } },
// { 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: 'The third method is to generate images using the latest Image Generation technology.' } },
{ element: '.Guide_1_4', popover: { title: '', description: 'The third method is to <strong>Generate</strong> images using the latest Image Generation technology.' } },
{ element: '.Guide_1_5', popover: { title: '', description: "Enter keywords that capture the mood you wish to express and then click the 'Generate' button." } },
{ element: '.Guide_1_6', popover: { title: '', description: 'Select two images for your moodboard.' } },
{ element: '.Guide_1_7', popover: { title: '', description: 'Click here to layout your moodboard.' } },
@@ -60,9 +60,9 @@ const driverObj__ = driver({
//开始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_17', popover: { title: '', description: 'Click the little red heart to save your favorite design.' } },
// { 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_30', popover: { title: '', description: "Click '<strong>Redesign</strong>' to generate eight new outfits for your collection to choose from." } },
{ 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.' } },
@@ -72,7 +72,6 @@ const driverObj__ = driver({
{ element: '.Guide_1_23', popover: { title: '', description: 'Click here to layout the selected print' } },
// { 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_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,//控制总页数和当前页数是否显示
@@ -88,7 +87,7 @@ const driverObj__ = driver({
// prevBtnText: '‹—',
doneBtnText: '✕',
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
// console.log(popover,options,element);
console.log(popover,options,element);
popover.previousButton.style.display = 'none'
// let driver = document.querySelector('body')
driverIndex__ = driverObj__.getState().activeIndex
@@ -102,7 +101,15 @@ const driverObj__ = driver({
}else{
popover.wrapper.style.display = 'block'
}
console.log(options.state.activeIndex);
if(options.state.activeIndex == 2){
popover.wrapper.style.transform = 'translateY(11rem)'
// options.config.stagePadding = 10
}else if(options.state.activeIndex == 6 || options.state.activeIndex == 7){
popover.wrapper.style.transform = 'translateY(4rem)'
}else{
popover.wrapper.style.transform = 'initial'
}
//判断是不是generate 如果是就吧边距设为0
// if(options.state.activeIndex >= 2 && options.state.activeIndex < 3){
// options.config.stagePadding = 0