更新用户指引

src/assets/style/style.css

@@ -159,15 +159,44 @@ li {
 .el-cascader__collapse-tag .el-cascader__collapse-tag .el-tag--light {
   display: flex !important;
 }
-.hideEvents* {
+.hideEvents {
+  pointer-events: none !important;
+}
+.hideEvents * {
   pointer-events: none !important;
 }
 .Guide_ {
   pointer-events: auto !important;
+  overflow-y: initial !important;
 }
 .Guide_.showEvents * {
   pointer-events: auto !important;
 }
+.Guide_.showEvents .hideEvents {
+  pointer-events: none !important;
+}
+.Guide_.showEvents .hideEvents * {
+  pointer-events: none !important;
+}
+.Guide_ .Guide_active {
+  box-shadow: 0px 0px 13px #ff5f5f;
+  animation: identifier 1s infinite linear;
+  display: block !important;
+}
+@keyframes identifier {
+  0% {
+    box-shadow: none;
+  }
+  50% {
+    box-shadow: 0px 0px 13px #ff5f5f;
+  }
+  100% {
+    box-shadow: none;
+  }
+}
+:not(body):has(>.driver-active-element) {
+  overflow: initial !important;
+}
 .delete_like_file_block {
   display: none;
   width: 2.5rem;
@@ -311,6 +340,17 @@ li {
   top: auto;
   margin: 0 9rem;
 }
+.ant-modal-confirm-confirm .ant-modal-content {
+  border-radius: 1rem;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-btns {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-btns .ant-btn-primary {
+  margin-left: 10rem;
+}
 .modal_component.ant-modal {
   top: 0;
 }

src/assets/style/style.less

@@ -174,14 +174,15 @@ ul,li{
 	}
 }
 .hideEvents{
-	&*{
+	pointer-events:none !important;
+	*{
 		pointer-events:none !important;
 	}
-	
 }
 
 .Guide_{
 	pointer-events:auto !important;
+	overflow-y: initial !important;
 	&.showEvents{
 		*{
 			pointer-events:auto !important;
@@ -189,9 +190,34 @@ ul,li{
 		// .select_img_type{
 		// 	overflow: initial !important;
 		// }
+		.hideEvents{
+			pointer-events:none !important;
+			*{
+				pointer-events:none !important;
+			}
+		}
+	}
+	
+	.Guide_active{
+		box-shadow: 0px 0px 13px rgb(255, 95, 95);
+		animation: identifier 1s infinite linear;
+		display: block !important;
+		@keyframes identifier {
+			0% {
+				box-shadow: none;
+			}
+			50% {
+				box-shadow: 0px 0px 13px rgb(255, 95, 95);
+			}
+			100% {
+				box-shadow: none;
+			}
+		}
 	}
 }
-
+:not(body):has(>.driver-active-element){
+	overflow: initial !important;
+}
 //爱心
 .delete_like_file_block{
 	display: none;
@@ -366,6 +392,21 @@ ul,li{
 		}
 	}
 }
+.ant-modal-confirm-confirm{
+	.ant-modal-content{
+		border-radius: 1rem;
+		.ant-modal-body{
+			.ant-modal-confirm-btns{
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				.ant-btn-primary{
+					margin-left: 10rem;
+				}
+			}
+		}
+	}
+}
 .modal_component{
    
   &.ant-modal{

src/component/Detail/DesignDetail.vue

@@ -362,7 +362,7 @@ export default defineComponent({
 					if(this.driver__.driver){
 						nextTick().then(()=>{ 
 							// driverObj__.moveNext();
-							driverObj__.moveTo(21);
+							driverObj__.moveTo(41);
 						})
 					}
                 }

src/component/Detail/habit.vue

@@ -5,7 +5,7 @@
 			{{ $t('Habit.Workspace') }}
             <i class="fi fi-bs-angle-down"></i>
         </div>
-        <div class="habit_content" v-fade="openType.habit">
+        <div class="habit_content Guide_1_28" :class="[driver__.driver?'showEvents':'']" v-fade="openType.habit">
             <div class="habit_title">
                 <h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
                 <div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
@@ -35,7 +35,7 @@
 					</ul>
 				</div>
             </div>
-			<div class="habit_Overal_Single">
+			<div class="habit_Overal_Single" :class="[driver__.driver?'Guide_active':'']">
 				<a-dropdown @click.stop="setOpenType('sex')">
                     <a-button>
                         <UserOutlined />
@@ -95,7 +95,7 @@
                     <div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
                 </div>
             </div>
-			<div class="habit_model Guide_1_28">
+			<div class="habit_model" :class="[driver__.driver?'Guide_active':'']">
                 <a-dropdown placement="bottomRight"
 					trigger="['click']"
 					@click.stop="setOpenType('model')"
@@ -183,7 +183,7 @@ export default defineComponent({
 		})
 		let mannequins:any = ref([{},{}])
 		let systemSeleves= ref(false);
-		let openType = ref({
+		let openType:any = ref({
 			workspace:false,
 			singleton:false,
 			habit:false,
@@ -235,6 +235,14 @@ export default defineComponent({
 				}
 			}
 		},
+		
+		driver__:{
+			handler(newVal:any,oldVal:any){
+				if(newVal.index>=4){
+					this.openType.habit = false
+				}
+			}
+		},
 		'workspaceItem.id_':{
 			handler(newVal:any,oldVal:any){
 				this.workspace.workspaceList.forEach((v:any)=>{
@@ -270,12 +278,22 @@ export default defineComponent({
 				// })
 			}
 		},
-		'workspaceItem.sex':{
+		'workspaceItem.overallSingle':{
 			handler(newVal:any,oldVal:any){
-				// console.log(this.workspaceItem);
+				if(this.driver__.driver){
-				
+					driverObj__.refresh();
+				}
 			}
 		},
+		// 'openType.model':{
+		// 	handler(newVal:any,oldVal:any){
+		// 		if(this.driver__.driver){
+		// 			console.log(213);
+					
+		// 			driverObj__.refresh();
+		// 		}
+		// 	}
+		// },
 		workspaceItem:{
 			handler(newVal:any,oldVal:any){
 				this.store.commit("setWorkspace", this.workspaceItem);
@@ -565,14 +583,17 @@ export default defineComponent({
 				this.workspaceItem.mannequinMaleType  = str
 				this.workspaceItem.mannequinMaleId = item.id
 			}
-			if(id != item.id){
+			// if(id != item.id){
-				if(this.driver__.driver){
+			if(this.driver__.driver){
-					this.openType.habit = false
+				// this.openType.habit = false
-					nextTick().then(()=>{
+				nextTick().then(()=>{
-						driverObj__.moveNext();
+					driverObj__.moveTo(2);
-					})
+					this.openType.model = false
-				}
+
+					// driverObj__.moveNext();
+				})
 			}
+			// }
 			this.workspaceItem.mannequinUrl = item.presignedUrl
 			this.workspaceItem.mannequinType = str
 			this.workspaceItem.mannequinId = item.id
@@ -594,8 +615,8 @@ export default defineComponent({
 				this.openType.habit = !this.openType.habit
 				if(this.driver__.driver){
 					nextTick().then(()=>{
-						// driverObj__.moveNext();
+						driverObj__.moveNext();
-						driverObj__.moveTo(29);
+						// driverObj__.moveTo(29);
 
 					})
 				}
@@ -612,9 +633,10 @@ export default defineComponent({
 				this.openType.sex = false
 				this.openType.model = !this.openType.model
 				this.getMannequins()
-				if(this.driver__.driver){
+				if(this.driver__.driver && this.openType.model){
 					nextTick().then(()=>{
-						driverObj__.moveNext();
+						driverObj__.moveTo(3);
+						// driverObj__.moveNext();
 					})
 				}
 			}else if(v == 'singleton'){

src/component/HomePage/Cropper.vue

@@ -1,6 +1,5 @@
 <template>
-      <a-modal class="modal_component cut_pricture_modal Guide_1_2_2" 
+      <a-modal class="modal_component cut_pricture_modal"
-		:class="[driver__.driver?'showEvents':'']"
         v-model:visible="cutPicuterModal" 
         :footer="null" 
         width="65%"

src/component/HomePage/Generate.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="generate">
-        <div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'"  class="generate_checkbox">
+        <div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'"  class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
             <div>
                 <label>
                     <input
@@ -12,7 +12,9 @@
                 </label>
             </div>
             <div>
-                <label>
+                <label
+				:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
+				>
                     <input
                         type="checkbox"
                         v-model="checkbox[1].type"
@@ -22,7 +24,7 @@
                 </label>
             </div>
             <div>
-                <label>
+                <label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
                     <input
                         type="checkbox"
                         v-model="checkbox[2].type"
@@ -32,8 +34,8 @@
                 </label>
             </div>
 			<div v-if="type_.type2 == 'Printboard'" class="printModel">
-				<div @click.stop="PrintModel">{{ printModel.name }}</div>
+				<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
-				<ul v-show="printModel.optype">
+				<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
 					<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
 					<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
 					<li v-show="printBoards.length >= 1" class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Generate') }}</li>
@@ -51,16 +53,15 @@
             />
             <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
 			<span>{{ $t('Generate.maximumLength') }}</span>
-
         </div>
         <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
             <div class="upload_item">
                 <div
-                    class="upload_file_item"
+                    class="upload_file_item Guide_1_2_7"
                     v-for="(file, index) in sketchboardList"
                     :key="file"
 					@click.stop="setSketchboardItem(file)"
-					:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'']"
+					:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
                 >
                     <div
                         class="upload_file_item_content"
@@ -122,8 +123,8 @@
                     </div>
                 </div>
                 <div
-                    class="upload_file_item upload_component"
+                    class="upload_file_item upload_component Guide_1_2_6"
-                    v-show="sketchboardList.length != 8"
+					:class="[driver__.driver?'showEvents':'']"
                 >
                     <a-upload
                         :action="uploadUrl + '/api/element/upload'"
@@ -136,13 +137,11 @@
                         v-model:file-list="sketchboardList"
                         :before-upload="beforeUpload"
                         multiple
-                        :maxCount="8 - sketchboardList.length"
                         accept=".jpg,.png,.jpeg,.bmp"
                         @change="(file) => fileUploadChange(file)"
                     >
                         <div
                             class="upload_tip_block"
-                            v-show="sketchboardList.length != 8"
                         >
                             <i class="fi fi-br-upload"></i>
                             <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
@@ -157,24 +156,23 @@
                 v-for="(item, index) in fileList"
                 :key="item.imgUrl"
                 @click="generageAdd(item)"
-                :class="[item?.checked?'active':'',driver__.driver?'hideEvents':'']"
+                :class="[item?.checked?'active':'']"
             >
                 <img v-lazy="item.imgUrl" alt="" />
-
 				<div
 					class="delete_like_file_block"
+					:class="[driver__.driver?'hideEvents':'']"
 				>
 					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
 					<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
 				</div>
-				<div class="delete_like_file_block left">
+				<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage()"></i>
 				</div>
 
             </div>
         </div>
-	<scaleImage ref="scaleImage"></scaleImage>
+		<scaleImage ref="scaleImage"></scaleImage>
-
 		<div class="mark_loading" v-show="loadingShow">
 			<a-spin size="large" />
 		</div>
@@ -203,11 +201,11 @@ export default defineComponent({
         let checkbox = ref([
             {
                 name: "image",
-                type: false,
+                type: true,
             },
             {
                 name: "text",
-                type: true,
+                type: false,
             },
             {
                 name: "text-image",
@@ -317,6 +315,21 @@ export default defineComponent({
         this.uploadUrl = getUploadUrl();
 		this.workspace = this.store.state.Workspace.workspace
     },
+	watch:{
+		driver__:{
+			handler(newVal,oldVal){
+				if(this.type_.type2 == 'Printboard'){
+					if(newVal.index >= 13 && newVal.index < 15){
+						this.setKeyword(newVal.index-13)
+					}else{
+					}
+				}else if(this.type_.type2 == 'Sketchboard'){
+					
+				}
+				
+			}
+		}
+	},
     computed: {
         getSketchLabel(value: any) {
             return (value: any) => {
@@ -374,12 +387,22 @@ export default defineComponent({
 					})
 				}
 			})
+			if(num == 2 || num == 1){
+				if(this.driver__.driver){
+					driverObj__.moveNext()
+				}
+			}
         },
 		PrintModel(){
 			if(!this.printModel.optype){
 				document.addEventListener('click',this.removePrintModel)
 			}
 			this.printModel.optype = !this.printModel.optype
+			nextTick().then(()=>{
+				if(this.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
 		},
 		removePrintModel(){
 			this.printModel.optype = false
@@ -399,7 +422,11 @@ export default defineComponent({
 					name:this.t('Generate.Model')+num
 				}
 			}
-			
+			nextTick().then(()=>{
+				if(this.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
 		},
 		getgenerate(){
 			if(this.isTest){//试用用户禁止使用
@@ -456,7 +483,7 @@ export default defineComponent({
 						})
 						nextTick().then(()=>{
 							if(this.driver__.driver){
-								driverObj__.moveTo(3)
+								driverObj__.moveTo(9)
 							}
 						})
 						// if(){
@@ -503,6 +530,11 @@ export default defineComponent({
                 } else {
 					this.sketchboardList = fileList
                 }
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
             } else if (file.status === "error") {
                 let index = -1;
                 this.sketchboardList.forEach((ele: any, index1: any) => {
@@ -548,6 +580,9 @@ export default defineComponent({
 			}
 			this.collectionElementid = item.id
 			this.level2Type = item.category
+			if(this.driver__.driver){
+				driverObj__.moveNext()
+			}
 		},
         deleteFile(item: any) {
             if (item.type_ == "generate" || item.type_ == "material") {

src/component/HomePage/MoodboardUpload.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="collection_modal_item">
-        <div class="modal_left">
+        <div class="modal_left Guide_1_1_2" :class="[driver__.driver?'showEvents':'']">
-            <div class="switch_type_list">
+            <div class="switch_type_list" :class="[driver__.driver?'hideEvents':'']">
                 <div
                     @click.stop="open(1)"
                     class="switch_type_item"
@@ -68,7 +68,7 @@
                                 :headers="{ Authorization: token }"
                                 :before-upload="beforeUpload"
                                 v-model:file-list="fileList"
-                                multiple
+								:multiple="!driver__.driver"
 								:maxCount="8 - moodboarList.length+fileList.length"
                                 accept=".jpg,.png,.jpeg,.bmp"
                                 @change="(file) => fileUploadChange(file)"
@@ -252,28 +252,14 @@ export default defineComponent({
         this.uploadUrl = getUploadUrl();
     },
 	watch:{
-		fileList:{
+		driver__:{
-			handler(newVal:any,oldVal:any){
+			handler(newVal,oldVal){
-				// console.log(111);
+				if(newVal.index >= 5 && newVal.index <= 7){
-				
+					this.open(newVal.index-4)
-				// if(this.uploading.length<newVal.length){
+				}else{
-				// 	for (let index = 1; this.uploading.length < newVal.length; index++) {
+				}
-				// 		this.uploading.push(false)
-				// 	}
-				// }else{
-				// 	if(newVal[newVal.length-1].status == 'dome')
-				// 	this.uploading[this.uploading-1] = true
-				// }
 			}
-		},
+		}
-		// driver__:{
-		// 	handler(newVal,oldVal){
-		// 		if(newVal.index >= 1 && newVal.index <= 2){
-		// 			this.open(newVal.index)
-		// 		}else{
-		// 		}
-		// 	}
-		// }
 	},
 	directives:{
 		modelImg:{
@@ -307,10 +293,11 @@ export default defineComponent({
 				material.init('Moodboard')
 			}else if (num == 3){
 				// let driver = this.store.state.Guide.guide.driver
-				if(this.driver__.driver){
+				// if(this.driver__.driver){
-					driverObj__.moveNext()
+				// 	driverObj__.moveNext()
-				}
+				// }
 				let Generate:any = this.$refs.Generate
+				
 				if(this.driver__.driver){
 					Generate.searchPictureName = 'Exit sign, door, sunset, ocean, surreal'
 				}else{

src/component/HomePage/PrintboardUpload.vue

@@ -21,8 +21,8 @@
 						</div>
 						<div
 							@click.stop="open(3)"
-							class="switch_type_item"
+							class="switch_type_item Guide_1_2_1"
-							:class="[openClick == 3 ? 'select_swtich' : '']"
+							:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
 						>
 							<span>{{ $t('PrintboardUpload.Generate') }}</span>
 						</div>
@@ -51,7 +51,7 @@
                             </div>
                             
                         </div>
-                        <div class="upload_file_item upload_component Guide_1_2_1" :class="[driver__.driver?'showEvents':'']" v-show="printboardList.length < 8">
+                        <div class="upload_file_item upload_component" v-show="printboardList.length < 8">
                             <a-upload
                                 :action="uploadUrl + '/api/element/upload'"
                                 list-type="picture-card"
@@ -102,16 +102,17 @@
 				</div>
 			</div>
 			<div v-show="openClick == 3" class="modal_accomplish">
-				<div class="input_box" :class="{active:inputShow}">
+				<div class="input_box Guide_1_2_8" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
 					<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
 					<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
 					<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
 				</div>
 				<div class="modal_img">
-					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
+					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_2_9" :class="[item?.checked?'active':'',driver__.driver?'showEvents':'']" >
 						<img :src="item.imgUrl" @click.stop="generageAdd(item)">
 						<div
 							class="delete_like_file_block"
+							:class="[driver__.driver?'hideEvents':'']"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
 							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
@@ -239,6 +240,11 @@ export default defineComponent({
 		let isTest:any = getCookie('isTest')
         this.isTest =JSON.parse(isTest)|| ''
         this.uploadUrl = getUploadUrl()
+		if(this.driver__.driver){
+			this.captionGeneration = 'Exit sign, door, sunset, ocean, surreal'
+		}else{
+			this.captionGeneration = ''
+		}
     },
      methods:{
 		open(num: Number) {
@@ -247,6 +253,13 @@ export default defineComponent({
 			if(num == 2){
 				material.init('Printboard')
 			}
+			if(num == 3){
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+			}
         },
         fileUploadChange(data:any){
             let file = data.file
@@ -603,6 +616,9 @@ export default defineComponent({
 						this.generateList.push(arr)
 						this.loadingShow = false
 						})
+						if(this.driver__.driver){
+							driverObj__.moveNext()
+						}
 					}
                 }
             ).catch(res=>{

src/component/HomePage/RobotAssist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="robot" @mousemove="robotmax">
+	<div class="robot Guide_1_1_1" :class="[driver__.driver?'showEvents':'']" @mousemove="robotmax">
 		<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">
@@ -7,6 +7,17 @@
 						{{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="robot_img" :class="[item.img ?'img':'']">
 						<div class="robot_img_item" v-for="imgItem,imgIndex in item.img">
 							<img :src="imgItem.presignedUrl" alt="">					
@@ -49,6 +60,7 @@ import { Https } from "@/tool/https";
 import { getCookie } from "@/tool/cookie";
 import { useStore } from "vuex";
 import { message } from "ant-design-vue";
+import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from "vue-i18n";
 export default defineComponent({
     components: {
@@ -72,6 +84,10 @@ export default defineComponent({
 		let isTest = ref()
 		let store = useStore()
 		let workspace:any = ref({})
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		})
+		let driver__Time:any = ref()
 		return {
 		robotTop,
 		robotInput,
@@ -86,13 +102,41 @@ export default defineComponent({
 		t,
 		isTest,
 		store,
-		workspace
+		workspace,
+		driver__,
+		driver__Time
 		};
 	},
     data() {
         return {
         };
     },
+	watch:{
+		driver__:{
+			handler: function(newval) {
+				console.log(this.driver__);
+				if(this.driver__.driver && this.driver__.index == 0){
+					this.robotTop = true
+					this.robotInput = true
+					driverObj__.refresh();
+					this.record.push({
+						state:1,
+						str:'123123123',
+						driver:true,
+					})
+					this.driver__Time = setInterval(() => {
+						this.$nextTick().then(()=>{
+							driverObj__.refresh();
+						})
+						this.createTimer()
+					}, 3000);
+
+				}else{
+					clearTimeout(this.driver__Time)
+				}
+			}
+		}
+	},
     mounted() {
 		this.textScroll()
 		let userInfo:any = getCookie("userInfo")
@@ -108,7 +152,8 @@ export default defineComponent({
 		this.workspace = computed(()=>{
 			return  this.store?.state?.Workspace?.workspace
 		})
-
+		
+		
 	},
 	directives:{
 		fade:{
@@ -247,6 +292,20 @@ export default defineComponent({
             });
 			this.chatCentent = ""
 		},
+		setDriver(){
+			if(this.driver__.driver){
+				driverObj__.moveNext();
+				this.robotTop = false
+				this.robotInput = false
+			}
+		},
+		removeDriver(){
+			if(this.driver__.driver){
+				driverObj__.destroy();
+				this.robotTop = false
+				this.robotInput = false
+			}
+		},
 		likeFile(item:any,imgIndex:number,index:number){
 			let data = {
 				...item,
@@ -280,7 +339,6 @@ export default defineComponent({
         },
         //清除定时器
         clearTimer() {
-			
 			clearInterval(this.timeTop);
 			clearInterval(this.timeInput);
         },
@@ -347,6 +405,19 @@ 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;
+					}
+				}
+			}
 		}
 		.text_left,.text_right{
 			margin: 2rem 0;

src/component/HomePage/SketchboardUpload.vue

@@ -18,8 +18,8 @@
                 </div>
                 <div
                     @click.stop="open(3)"
-                    class="switch_type_item"
+                    class="switch_type_item Guide_1_9"
-                    :class="[openClick == 3 ? 'select_swtich' : '']"
+                    :class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
                 >
                     <span>{{ $t('SketchboardUpload.Generate') }}</span>
                 </div>
@@ -46,7 +46,7 @@
                                 v-show="file?.status === 'done'"
                             >
                                 <img :src="file?.imgUrl" class="upload_img" />
-                                <div class="operate_file_block Guide_1_13" :class="[driver__.driver?'showEvents':'']">
+                                <div class="operate_file_block">
                                     <div class="select_img_type">
                                         <div
                                             class="select_category"
@@ -65,8 +65,7 @@
                                             ></div>
                                         </div>
                                         <div
-                                            class="category_list Guide_1_13_1"
+                                            class="category_list"
-											:class="[driver__.driver?'showEvents':'']"
                                             v-show="file.categoryShow"
                                         >
                                             <div
@@ -111,8 +110,7 @@
                             </div>
                         </div>
                         <div
-                            class="upload_file_item upload_component Guide_1_9"
+                            class="upload_file_item upload_component"
-							:class="[driver__.driver?'showEvents':'']"
                             v-show="sketchboardList.length < 8"
                         >
                             <a-upload
@@ -177,18 +175,18 @@
 				</div>
 			</div>
 			<div v-show="openClick == 3" class="modal_accomplish">
-				<div class="input_box" :class="{active:inputShow}">
+				<div class="input_box Guide_1_9_2" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
 					<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate()" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('SketchboardUpload.inputContent1')" v-model="captionGeneration">
 					<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
 					<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
 				</div>
 				<div class="modal_img">
-					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
+					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[driver__.driver?'showEvents':'',item?.checked?'active':'']">
 						<img :src="item.imgUrl" @click="generageAdd(item)">
 						<div class="operate_file_block">
 							<div class="select_img_type">
 								<div
-									class="select_category"
+									class="select_category Guide_1_13"
 									@click.stop="showFileCategory(item)"
 								>
 									{{ item.categoryValue }}
@@ -205,7 +203,8 @@
 									
 								</div>
 								<div
-									class="category_list"
+									class="category_list Guide_1_13_1"
+									:class="[driver__.driver?'showEvents':'']"
 									v-show="item.categoryShow"
 								>
 									<div
@@ -350,7 +349,7 @@ export default defineComponent({
 			handler(newVal:any,oldVal:any){
 				if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
 					if(this.driver__.driver){
-						driverObj__.moveTo(17)
+						// driverObj__.moveTo(22)
 					}
 				}
 			}
@@ -374,6 +373,11 @@ export default defineComponent({
 		this.workspaceCom = computed(()=>{
 			return  this.store?.state?.Workspace?.workspace
 		})
+		if(this.driver__.driver){
+			this.captionGeneration = 'Exit sign, door, sunset, ocean, surreal'
+		}else{
+			this.captionGeneration = ''
+		}
     },
     methods: {
         open(num: Number) {
@@ -384,6 +388,11 @@ export default defineComponent({
             } else if (num == 3) {
                 // let Generate:any = this.$refs.Generate
                 // Generate.init('generate')
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
             }
         },
 		getPosition(){
@@ -423,11 +432,6 @@ export default defineComponent({
                     (v: any) => v.status === "done"
                 );
                 this.store.commit("setSketchboardFile", fileList);
-				nextTick().then(()=>{
-					if(this.driver__.driver){
-						driverObj__.moveTo(15)
-					}
-				})
 				
             } else if (file.status === "error") {
                 let index = -1;
@@ -464,7 +468,7 @@ export default defineComponent({
             file.categoryShow = true;
 			nextTick().then(()=>{
 				if(this.driver__.driver){
-					driverObj__.moveTo(16)
+					driverObj__.moveNext()
 				}
 			})
 			
@@ -478,6 +482,9 @@ export default defineComponent({
 				}
 				file.categoryValue = cate.value;
 				file.category = cate.name;
+				if(this.driver__.driver){
+					driverObj__.moveNext()
+				}
 				// this.store.commit("sketchGenerateFiles", this.fileList);
 			}else{
 				for (let item of this.fileList) {
@@ -682,6 +689,11 @@ export default defineComponent({
 						this.generateList.push(arr)
 						this.loadingShow = false
 						})
+						nextTick().then(()=>{
+							if(this.driver__.driver){
+								driverObj__.moveNext()
+							}
+						})
 					}
                 }
             ).catch(res=>{
@@ -696,6 +708,11 @@ export default defineComponent({
 			item.resData = JSON.parse(JSON.stringify(item))
 			item.jsContent1 = this.t('uploadFile.jsContent1')
             this.store.commit("addGenerateMaterialFils", item);
+			nextTick().then(()=>{
+				if(this.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
 		}
     },
 });

src/tool/guide.js

@@ -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_1_1', popover: { title: 'Title', description: 'Description' } },
-		// { element: '.Guide_1_2', popover: { 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_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_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>' } },
 	  ],
 	  // 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')
+		// 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);
 		driverIndex__ = driverObj__.getState().activeIndex
 		data = {
 			index : driverIndex__,
 			driver : true,
 		}
 		store?.commit("setGuide", data);
-		element = options.state.activeElement
+		if(options.state.activeIndex ==  0){
-		element.classList.add('Guide_')
+			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) =>{
+	onNextClick:(element, step, options) =>{
-	// 	console.log(element,step,options);
+		console.log(element,step,options);
-	// 	driverObj__.moveNext()
+		if(options.state.activeIndex == 2){
-	// 	// element.style.posiiton = 'relative'
+			driverObj__.moveTo(4)
-	// 	// const mask = document.createElement('div');
+		}else{
-	// 	// mask.style.position = 'absolute';
+			driverObj__.moveNext()
-	// 	// 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);
-	// }
 });
 function addDiv(element){
 	element.style.posiiton = 'relative'

src/views/HomeView.vue

@@ -73,20 +73,22 @@
 									<div class="right_content_img_item">
 										<!-- <draggable 
 											group="people" > -->
-											<div class="content_img_block" :class="[driver__.driver?'hideEvents':'']" v-for="(
+											<div class="content_img_block" v-for="(
 												design, index
-											) in designCollectionList" :key="design?.designItemId" @click="
+											) in designCollectionList" :key="design?.designItemId">
-												designDetail(
+												<div class="content_img_flex" 
-													design,
+												:class="[driver__.driver?driver__.index == 37?'hideEvents':'':'']"
-													index,
+													@click="
-													designCollectionList,
+													designDetail(
-													'dislike'
+														design,
-												)
+														index,
-											">
+														designCollectionList,
-												<div class="content_img_flex">
+														'dislike'
+													)
+												">
 													<img class="content_img" :src="design.designOutfitUrl" />
 												</div>
-												<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
+												<div class="icon iconfont icon-jushoucang icon_like" :class="[index == 0?driver__.index == 37?'Guide_active showEvents':'':'']" @click.stop="
 													likeDesignCollection(
 														design,
 														index
@@ -744,6 +746,9 @@ export default defineComponent({
 						}
 					}
 					this.likeLoading = false;
+					if(this.driver__.driver){
+						driverObj__.moveNext();
+					}
 				})
 				.catch((rv) => {
 					this.likeLoading = false;
@@ -1380,7 +1385,6 @@ export default defineComponent({
 									.icon-jushoucang {
 										color: #000;
 									}
-
 									.icon-jushoucanggift {
 										color: rgba(52, 53, 121, 1);
 									}