fix

2023-12-12 15:17:54 +08:00
parent d2dfcd4c45
commit e6c8fe3866
3 changed files with 66 additions and 39 deletions
--- a/src/component/HomePage/RobotAssist.vue
+++ b/src/component/HomePage/RobotAssist.vue
@@ -3,21 +3,21 @@
 		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
 			<div :class="[item.state == 1?'text_right':'text_left',item.img?'white':'']" v-for="item,index in record" ref="robotChildDom">
 				<div class="robot_text">
-					<span>
+					<span v-if="!driver__.driver">
 						{{item.str}}
 						<a v-if="item.src" :href="item.src" target="_blank"><i class="fi fi-br-link-alt"></i></a>
 					</span>
 					<span class="driver__" v-if="driver__.driver">
 						{{item.str}}
-						<div class="driver__btn" v-if="item.driver">
-							<span @click="setDriver">
-								Yes
-							</span>
-							<span @click="removeDriver">
-								No
-							</span>
-						</div>
 					</span>
+					<div class="driver__btn" v-if="item.driver">
+						<span @click="setDriver">
+							Yes
+						</span>
+						<span @click="removeDriver">
+							No
+						</span>
+					</div>
 					<div class="robot_img" :class="[item.img ?'img':'']">
 						<div class="robot_img_item" v-for="imgItem,imgIndex in item.img">
 							<img :src="imgItem.presignedUrl" alt="">					
@@ -57,7 +57,7 @@
 import { defineComponent, createVNode,computed, ref,Ref} from "vue";
 import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
-import { getCookie } from "@/tool/cookie";
+import { getCookie,setCookie } from "@/tool/cookie";
 import { useStore } from "vuex";
 import { message } from "ant-design-vue";
 import { openGuide,driverObj__ } from "@/tool/guide";
@@ -124,6 +124,8 @@ export default defineComponent({
 						str:"Welcome to AiDA. I am your friendly fashion design assistant. If you have any questions or need assistance, please don't hesitate to ask. ",
 						driver:false,
 					})
+					console.log(this.record);
+					
 					this.textScroll()
 					setTimeout(() => {
 						this.record.push({
@@ -289,21 +291,34 @@ export default defineComponent({
 			// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
                (rv) => {
 					if(rv){
-						if(rv.chatRobotLibraryList != null){
+						if(rv.isTutorial){
 							this.record.push({
 								state:1,
-								img:rv.chatRobotLibraryList
+								str:"We need to refresh the page before starting the tutorial,Would you like to start the tutorial now?",
+								driver:true,
 							})
 						}else{
-							this.record.push({
-								state:1,
-								str:rv.output,
-							})
+							if(rv.chatRobotLibraryList != null){
+								this.record.push({
+									state:1,
+									img:rv.chatRobotLibraryList
+								})
+							}else{
+								this.record.push({
+									state:1,
+									str:rv.output,
+								})
+							}
 						}
+						
 						sessionStorage.setItem('record', JSON.stringify(this.record));  
 						this.createTimer()
 						this.textScroll()
 						this.getBloodBars()
+						// if(rv.isTutorial){
+						// 	window.location.reload()
+						// 	setCookie("isBeginner", true);
+						// }
 					}
                }
            ).catch(res=>{
@@ -315,6 +330,10 @@ export default defineComponent({
 				driverObj__.moveNext();
 				this.robotTop = false
 				this.robotInput = false
+			}else{
+				window.location.reload()
+				setCookie("isBeginner", true);
+				setCookie("isBeginnerNum", 1);
 			}
 		},
 		removeDriver(){
@@ -429,17 +448,18 @@ export default defineComponent({
 					// margin-right: 5%;
 				}
 			}
-			.driver__{
-				.driver__btn{
-					width: 100%;
-					margin-top: 1rem;
-					display: flex;
-					justify-content: space-around;
-					span{
-						font-size: 1.4em;
-						color: #9efff4;
-						cursor: pointer;
-					}
+			// .driver__{
+				
+			// }
+			.driver__btn{
+				width: 100%;
+				margin-top: 1rem;
+				display: flex;
+				justify-content: space-around;
+				span{
+					font-size: 1.4em;
+					color: #9efff4;
+					cursor: pointer;
 				}
 			}
 		}
--- a/src/tool/guide.js
+++ b/src/tool/guide.js
@@ -21,7 +21,7 @@ const driverObj__ = driver({


 		{ 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 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: 'For the Moodboard, Printboard, or Sketchboard, we provide three different sourcing methods to add images. The first option is <strong>Upload</strong>, 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' } },
@@ -63,7 +63,7 @@ const driverObj__ = driver({
 		{ 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 '<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_16_1', 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.' } },
@@ -72,7 +72,8 @@ 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_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>' } },
+		{ 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><br>You can restart the tutorial at any time by simply telling the robot that you want to.' } },
 	  ],
 	  // showProgress: true,//控制总页数和当前页数是否显示
 	allowClose:false,
@@ -96,12 +97,13 @@ const driverObj__ = driver({
 			driver : true,
 		}
 		store?.commit("setGuide", data);
-		if(options.state.activeIndex ==  0){
+		if(options.state.activeIndex ==  0 ||
+			options.state.activeIndex ==  39
+		){
 			popover.wrapper.style.display = 'none'
 		}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
@@ -196,10 +198,15 @@ function removeDiv(element){

 const openGuide = () =>{
 	let isBeginner = JSON.parse(getCookie('isBeginner'))
+	let isBeginnerNum = JSON.parse(getCookie('isBeginnerNum'))
 	let data
 	// console.log(isBeginner);
 	if(isBeginner){
-		driverObj__.drive();
+		if(isBeginnerNum){
+			driverObj__.drive(isBeginnerNum);
+		}else{
+			driverObj__.drive();
+		}
 		data = {
 			index:driverIndex__,
 			driver:true,
@@ -212,12 +219,12 @@ const openGuide = () =>{
 		}
 	}
 	// driverObj__.destroy();
-	driverObj__.drive();
+	// driverObj__.drive();

-	data = {
-		index:driverIndex__,
-		driver:true,
-	}
+	// data = {
+	// 	index:driverIndex__,
+	// 	driver:true,
+	// }
 	store = useStore()
 	// driverObj__.moveTo(18);
 	store?.commit("setGuide", data);
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="home_page">
+	<div class="home_page Guide_1_16_1">
 		<HeaderComponent></HeaderComponent>
 		<div class="page_content">
 			<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->