Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/lanecarford_front

src/router/index.ts

@@ -1,16 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useGenerateStore } from '@/stores/modules/generate'
 const VerifyIDs = (num: number) => {
-	return true
+  return true
   const ids = [
-	!!useGenerateStore().customerId,
-	!!useGenerateStore().visitRecordId,
-	!!useGenerateStore().styleId,
-	// !!useGenerateStore().modelPhotoId,
-	true,
-	!!useGenerateStore().originalTryOnId,
-  ];
-  return ids.splice(0, num).every(id => id) ? true : "/stylist/customer";
+    !!useGenerateStore().customerId,
+    !!useGenerateStore().visitRecordId,
+    !!useGenerateStore().styleId,
+    // !!useGenerateStore().modelPhotoId,
+    true,
+    !!useGenerateStore().originalTryOnId
+  ]
+  return ids.splice(0, num).every((id) => id) ? true : '/stylist/customer'
 }
 
 /**
@@ -18,7 +18,7 @@ const VerifyIDs = (num: number) => {
  * 1. 设置路由的meta属性为{ cache: true }，表示需要缓存
  * 2. App.vue中使用RouteCache组件，通过路由的name来进行匹配
  * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
- * 
+ *
  * 自定义验证规则：
  * meta：{ verify: （）=> boolean || string }
  * 1. boolean true 跳转 false 不跳转
@@ -48,8 +48,8 @@ const router = createRouter({
       component: () => import('@/views/login/LoginPage.vue')
     },
     {
-      path:'/reset',
-      name:'ResetPage',
+      path: '/reset',
+      name: 'ResetPage',
       component: () => import('@/views/login/ResetPage.vue')
     },
     {
@@ -62,16 +62,16 @@ const router = createRouter({
       name: 'WelcomePage',
       component: () => import('@/views/login/WelcomePage.vue')
     },
-	{
-		path: '/customer',
-		name: 'customer',
-		component: () => import('@/views/login/customer.vue'),
-	},
+    {
+      path: '/customer',
+      name: 'customer',
+      component: () => import('@/views/login/customer.vue')
+    },
     {
       path: '/asistant',
       name: 'asistant',
       component: () => import('../views/asistant/index.vue'),
-      meta: { cache: true, verify: ()=> VerifyIDs(2) }
+      meta: { cache: true, verify: () => VerifyIDs(2) }
     },
     {
       path: '/workshop',
@@ -82,115 +82,114 @@ const router = createRouter({
         //   path: '/workshop',
         //   redirect: '/workshop/selectStyle'
         // },
-		{
-			path: '/workshop/home',
-			name: 'Home',
-			component: () => import('@/views/Workshop/home.vue')
-		},
-		{
-			path: '/workshop/homeNav',
-			name: 'HomeNav',
-			component: () => import('@/views/Workshop/homeNav.vue')
-		},
-		{
-			path: '/workshop/stylist',
-			name: 'StylistPage',
-			redirect: '/workshop/stylist/index',
-			component: () => import('@/views/stylist/container.vue'),
-			children: [
-			  {
-				path: 'index',
-				name: 'index',
-				component: () => import('@/views/stylist/index.vue'),
-				meta: { verify: ()=> VerifyIDs(2) }
-			  },
-			  {
-				path: 'sex',
-				name: 'sex',
-				component: () => import('@/views/stylist/sex.vue'),
-				meta: { verify: ()=> VerifyIDs(2) }
-			  },
-			  {
-				path: 'dressfor',
-				name: 'dressfor',
-				component: () => import('@/views/stylist/dressfor.vue'),
-				meta: { verify: ()=> VerifyIDs(2) }
-			  },
-			  
-			]
-		  },
+        {
+          path: '/workshop/home',
+          name: 'Home',
+          component: () => import('@/views/Workshop/home.vue')
+        },
+        {
+          path: '/workshop/homeNav',
+          name: 'HomeNav',
+          component: () => import('@/views/Workshop/homeNav.vue')
+        },
+        {
+          path: '/workshop/stylist',
+          name: 'StylistPage',
+          redirect: '/workshop/stylist/index',
+          component: () => import('@/views/stylist/container.vue'),
+          children: [
+            {
+              path: 'index',
+              name: 'index',
+              component: () => import('@/views/stylist/index.vue'),
+              meta: { verify: () => VerifyIDs(2) }
+            },
+            {
+              path: 'sex',
+              name: 'sex',
+              component: () => import('@/views/stylist/sex.vue'),
+              meta: { verify: () => VerifyIDs(2) }
+            },
+            {
+              path: 'dressfor',
+              name: 'dressfor',
+              component: () => import('@/views/stylist/dressfor.vue'),
+              meta: { verify: () => VerifyIDs(2) }
+            }
+          ]
+        },
         {
           path: '/workshop/selectStyle',
           name: 'selectStyle',
           component: () => import('../views/Workshop/selectStyle.vue'),
-		  meta: { verify: ()=> VerifyIDs(2) }
+          meta: { verify: () => VerifyIDs(2) }
         },
         {
           path: '/workshop/selectModel',
           name: 'SelectModel',
           component: () => import('../views/Workshop/selectModel.vue'),
-		  meta: { verify: ()=> VerifyIDs(3) }
+          meta: { verify: () => VerifyIDs(3) }
         },
         {
           path: '/workshop/product',
           name: 'product',
           component: () => import('../views/Workshop/product.vue'),
-		  meta: { verify: ()=> VerifyIDs(4) }
+          meta: { verify: () => VerifyIDs(4) }
         },
         {
           // 推荐try on
           path: '/workshop/recommended',
           name: 'recommended',
           component: () => import('../views/Workshop/recommended.vue'),
-		  meta: { verify: ()=> VerifyIDs(5) }
+          meta: { verify: () => VerifyIDs(5) }
         },
         {
           // 上传照片1
           path: '/workshop/uploadFace',
           name: 'uploadFace',
           component: () => import('../views/Workshop/uploadFace1.vue'),
-		  meta: { verify: ()=> VerifyIDs(5) }
+          meta: { verify: () => VerifyIDs(5) }
         },
         {
           // 上传照片2
           path: '/workshop/uploadFace2',
           name: 'uploadFace2',
           component: () => import('../views/Workshop/uploadFace2.vue'),
-		  meta: { verify: ()=> VerifyIDs(5) }
+          meta: { verify: () => VerifyIDs(5) }
         },
         {
           // 自定义创作
           path: '/workshop/customize',
           name: 'customize',
           component: () => import('../views/Workshop/customize.vue'),
-		  meta: { verify: ()=> VerifyIDs(5) }
+          meta: { verify: () => VerifyIDs(5) }
         },
         {
           // library
           path: '/workshop/library',
           name: 'library',
           component: () => import('../views/Workshop/library.vue'),
-		  meta: { verify: ()=> VerifyIDs(2) }
+          meta: { verify: () => VerifyIDs(2) }
         },
         {
           path: '/workshop/profile',
           name: 'profile',
           component: () => import('../views/Workshop/profile.vue'),
-		  meta: { verify: ()=> VerifyIDs(1) }
+          meta: { verify: () => VerifyIDs(1) }
         },
         {
           // creation
           path: '/workshop/creation',
           name: 'creation',
           component: () => import('../views/Workshop/creation/index.vue'),
-		  meta: { verify: ()=> VerifyIDs(2) }
+          meta: { verify: () => VerifyIDs(2) }
         },
         {
           // 完成创建
           path: '/workshop/end',
           name: 'end',
           component: () => import('../views/Workshop/end.vue'),
-		  meta: { verify: ()=> VerifyIDs(2) }
+          meta: { verify: () => VerifyIDs(2) }
         }
       ]
     }

src/stores/modules/userInfo.ts

@@ -9,7 +9,8 @@ export const useUserInfoStore = defineStore('userInfo', () => {
     token: '',
     generateParams: {
       stylist: '',
-      sex: ''
+      sex: '',
+      stylistImage: ''
     }
   })
 
@@ -37,7 +38,8 @@ export const useUserInfoStore = defineStore('userInfo', () => {
   const resetGenerateParams = () => {
     state.value.generateParams = {
       stylist: '',
-      sex: ''
+      sex: '',
+      stylistImage: ''
     }
   }
 

src/views/Workshop/creation/creation-list.vue

@@ -26,6 +26,8 @@
 		emit('view-type', 1)
 	})
 	const list = reactive([])
+	const size = ref(10)
+	const page = computed(() => Math.ceil(list.length / size.value) + 1)
 	const loading = ref(false)
 	const finish = ref(false)
 	const selectCount = computed(() => list.filter((v) => v.selected).length)
@@ -44,20 +46,25 @@
 	navLst.forEach((v) => {
 		if (v.flowType === query.value.active) navActive.value = v.value
 	})
-	
+
 	const clickNav = (v) => {
 		if (v.value === navActive.value || loading.value) return
 		navActive.value = v.value
-		onLoad()
+		onBackChooseSave()
+		onLoad('reload')
 	}
-	const onLoad = () => {
+	const onLoad = (type?: 'reload') => {
+		if (type === 'reload') {
+			finish.value = false
+			list.splice(0, list.length)
+		}
 		loading.value = true
-		finish.value = false
-		list.splice(0, list.length)
 		const params = {
 			customerId: generateStore.customerId,
 			type: navActive.value,
-			isLibrary: false
+			isLibrary: false,
+			pageNum: page.value,
+			pageSize: size.value
 		}
 		if (props.isChooseOne) {
 			params['visitRecordId'] = ''
@@ -68,8 +75,8 @@
 			params['visitRecordId'] = generateStore.visitRecordId
 		}
 		getGenerateHistoricals(params)
-			.then((data) => {
-				data?.forEach((v) => {
+			.then((data: any) => {
+				data.records?.forEach((v) => {
 					const obj = {
 						// tryOnId: v.tryOnId,
 						tryOnUrl: v.tryOnUrl,
@@ -86,7 +93,7 @@
 					list.push(obj)
 				})
 				loading.value = false
-				finish.value = true
+				finish.value = !data.hasNext
 			})
 			.catch((err) => {
 				console.error(err)
@@ -229,11 +236,11 @@
 				hGenerateStore.originalTryOn.id = selectedItem.id
 				hGenerateStore.originalTryOn.tryOnUrl = selectedItem.tryOnUrl
 				hGenerateStore.originalTryOn.isLike = selectedItem.isFavorite
-				hGenerateStore.style.id = '';
+				hGenerateStore.style.id = ''
 				hGenerateStore.style.url = selectedItem.styleUrl
 			} else {
 				// style
-				hGenerateStore.style.id = selectedItem.id;
+				hGenerateStore.style.id = selectedItem.id
 				hGenerateStore.style.url = selectedItem.url
 				// selectedItem.isFavorite
 			}
@@ -262,7 +269,14 @@
 		</div>
 		<div class="list">
 			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
-				<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)" :type="navActive">
+				<div
+					class="item"
+					v-for="(v, i) in list"
+					:key="i"
+					@click="onItem(v)"
+					:type="navActive"
+					:class="{ active: (isChooseSave || isChooseOne) && v.selected }"
+				>
 					<img v-lazy="v.tryOnUrl || v.url" />
 					<!-- <div class="corner">
 						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
@@ -360,12 +374,14 @@
 				.item {
 					width: 47%;
 					height: 62.2rem;
-					// overflow: hidden;
 					border-radius: var(--border-radius);
 					background-color: #fff;
 					margin-bottom: 4rem;
-					border: 0.1rem solid #000;
+					// overflow: hidden;
 					position: relative;
+					&.active {
+						border: 0.3rem solid #d9d9d9;
+					}
 					&[type='Outfit'] {
 						height: 50rem;
 						> img {
@@ -456,7 +472,7 @@
 			}
 		}
 		> .btns {
-			margin: 9rem 0;
+			margin: 5.4rem 0 6.4rem 0;
 			display: flex;
 			justify-content: center;
 

src/views/Workshop/home.vue

@@ -8,7 +8,7 @@ import { FlowType } from '@/types/enum'
 //const props = defineProps({
 //})
 const emit = defineEmits([
-	'view-type'
+	'viewType'
 ])
 
 // const data = reactive({
@@ -23,7 +23,7 @@ const historicalReview = ()=>{
 }
 
 onMounted(()=>{
-	emit('view-type', 1)
+	emit('viewType', 1)
 })
 onUnmounted(()=>{
 })

src/views/Workshop/profile.vue

@@ -4,9 +4,13 @@ import router from '@/router'
 import { showConfirmDialog } from 'vant'
 import { useUserInfoStore, useOverallStore } from '@/stores'
 import { LogOut } from '@/api/login'
-import { getCustomerList, type CustomerListParams } from '@/api/workshop'
+import { getCustomerList, type CustomerListParams,customerCheckin } from '@/api/workshop'
 import MyEvent from '@/utils/myEvent'
 
+const props = defineProps<{
+  isCustomer?: boolean
+}>()
+
 const userInfoStore = useUserInfoStore()
 const overallStore = useOverallStore()
 const emit = defineEmits(['view-type', 'selected-customer'])
@@ -148,6 +152,14 @@ const handleSelectCustomer = () => {
   if (selectedCustomer) {
     emit('selected-customer', selectedCustomer)
   }
+  if(!props.isCustomer){
+    // show.value = true
+    customerCheckin({ nickname: selectedCustomer.name }).then((res) => {
+      useUserInfoStore().resetGenerateParams()
+      MyEvent.emit('clear-generate-state')
+      useUserInfoStore().setCustomerInfo(res)
+    })
+  }
   showSwitchCustomerPopup.value = false
 }
 

src/views/asistant/components/NoticeItem.vue

@@ -2,7 +2,7 @@
   <div class="chat-message" :class="{ 'user-message': isMyself, 'ai-message': !isMyself }">
     <!-- AI消息显示头像 -->
     <div v-if="!isMyself" class="chat-avatar">
-      <img src="@/assets/images/asistant.png" alt="AI Avatar" />
+      <img class="avatar" :src="thumb" alt="AI Avatar" />
     </div>
 
     <!-- 消息内容 -->
@@ -27,9 +27,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownIt from 'markdown-it'
+import { useUserInfoStore } from '@/stores'
 
 const md = new MarkdownIt()
 
+const userInfoStore = useUserInfoStore()
+const thumb = computed(() => {
+  return userInfoStore.state.generateParams.stylistImage
+})
+
 // 定义消息类型
 interface ChatMessage {
   sessionId: string | number
@@ -133,16 +139,17 @@ const actionList: ActionItem[] = [
 
 .chat-avatar {
   width: 7.8rem;
-  height: 7.4rem;
+  height: 7.8rem;
   border-radius: 50%;
   margin-right: 1.88rem;
-  border: .2rem solid #000;
-  padding: 1.4rem;
+  overflow: hidden;
+  // border: 0.2rem solid #000;
+  // padding: 1.4rem;
 
   img {
-    width: 4.9rem;
-    height: 4.9rem;
-    border-radius: 50%;
+    width: 100%;
+    // height: 100%;
+    // border-radius: 50%;
     // object-fit: cover;
   }
 }

src/views/asistant/index.vue

@@ -3,22 +3,20 @@
     <div class="header">
       <HeaderTitle hasSetting styleType="3" />
     </div>
-    <template>
-      <div class="content flex-1">
-        <NoticeList
-          ref="noticeListRef"
-          :list="messageList"
-          :is-streaming="isStreaming"
-          :streaming-message="currentStreamingMessage"
-        />
+    <div class="content flex-1">
+      <NoticeList
+        ref="noticeListRef"
+        :list="messageList"
+        :is-streaming="isStreaming"
+        :streaming-message="currentStreamingMessage"
+      />
+    </div>
+    <div class="footer">
+      <InputArea @send-message="handleSendMessage" />
+      <div class="continue flex">
+        <div class="btn flex flex-center" @click="handleContinue">Generate</div>
       </div>
-      <div class="footer">
-        <InputArea @send-message="handleSendMessage" />
-        <div class="continue flex">
-          <div class="btn flex flex-center" @click="handleContinue">Continue</div>
-        </div>
-      </div>
-    </template>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -274,7 +272,7 @@ const handleContinue = () => {
 </script>
 <style lang="less" scoped>
 .asistant-container {
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -306,5 +304,4 @@ const handleContinue = () => {
     }
   }
 }
-
 </style>

src/views/login/LoginPage.vue

@@ -2,13 +2,16 @@
   <div class="login-page">
     <div class="content">
       <div class="back-button" @click="goBack">
-         <SvgIcon name="left" size="50" color="#fff" />
+        <SvgIcon name="left" size="50" color="#fff" />
       </div>
 
       <div class="header">
-        <div class="title">Log in.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+        <div class="title">Staff Login.</div>
+        <p class="subtitle">
+          <span>Experience our personalised styling journey with</span>
+          <br />
+          <span>Lane Crawford.</span>
+        </p>
       </div>
 
       <div class="login-container">
@@ -32,7 +35,11 @@
             <img :src="google" class="google-icon" />
             Sign in with Google
           </div> -->
-          <GoogleLogin @googelLogin="handleGoogleLogin" ref="googleLoginRef" @click="clickGooleLogin"></GoogleLogin>
+          <GoogleLogin
+            @googelLogin="handleGoogleLogin"
+            ref="googleLoginRef"
+            @click="clickGooleLogin"
+          ></GoogleLogin>
           <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
         </div>
       </div>
@@ -183,7 +190,7 @@ const handleSignup = () => {
   cursor: pointer;
   z-index: 3;
   font-size: 3.4rem;
-  .c-svg{
+  .c-svg {
     width: initial;
     height: initial;
   }
@@ -191,12 +198,14 @@ const handleSignup = () => {
 
 .header {
   margin-top: 1.42rem;
-  padding-left: 15.5rem;
+  padding-left: 14.5rem;
+  padding-right: 14.3rem;
   color: white;
   font-family: 'satoshiRegular';
   .title {
     font-size: 11rem;
     font-weight: bold;
+    font-weight: 700;
     margin-bottom: 0.8rem;
     color: white;
     font-family: 'satoshiBold';
@@ -226,11 +235,7 @@ const handleSignup = () => {
     position: relative;
     width: calc(100% - 28.4rem);
     height: 107.8rem;
-    background: radial-gradient(
-      100% 100% at 0% 0%,
-      rgba(0, 0, 0, 0.4) 0%,
-      rgba(0, 0, 0, 0.2) 100%
-    );
+    background: radial-gradient(100% 100% at 0% 0%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     -moz-backdrop-filter: blur(35px);

src/views/login/ResetPage.vue

@@ -9,9 +9,12 @@
 
       <!-- 标题区域 -->
       <div class="header">
-        <div class="title">Log in.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+        <div class="title">Staff Login.</div>
+        <p class="subtitle">
+          <span>Experience our personalised styling journey with</span>
+          <br />
+          <span>Lane Crawford.</span>
+        </p>
       </div>
 
       <div class="login-container">

src/views/login/SignupPage.vue

@@ -6,9 +6,8 @@
       </div>
 
       <div class="header">
-        <div class="title">Sign up.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+        <div class="title">Staff Sign up.</div>
+        <p class="subtitle">Start my personalised styling journey with Lane Crawford.</p>
       </div>
 
       <div class="login-container">
@@ -30,7 +29,12 @@
 
           <button type="button" class="login-button" @click="handleConfirm">Sign Up</button>
 
-          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" ref="googleSignupRef" @click="clickGooleLogin" />
+          <GoogleLogin
+            text="Sign up with Google"
+            @googelLogin="handleGoogleSignup"
+            ref="googleSignupRef"
+            @click="clickGooleLogin"
+          />
         </div>
       </div>
     </div>
@@ -191,7 +195,8 @@ const handleGoogleSignup = async (accessToken: string) => {
 
 .header {
   margin-top: 1.42rem;
-  padding-left: 15.5rem;
+  padding-left: 14.5rem;
+  padding-right: 14.3rem;
   color: white;
   font-family: 'satoshiRegular';
   .title {
@@ -281,7 +286,6 @@ const handleGoogleSignup = async (accessToken: string) => {
   }
 }
 
-
 .footer {
   position: relative;
   text-align: center;

src/views/login/WelcomePage.vue

@@ -2,10 +2,14 @@
   <div class="welcome-page safe-area-top safe-area-bottom">
     <div class="content">
       <div class="title">
-        AI STYLING <br />
-        ASSISTANT
+        Styling <br />
+        Assistant
       </div>
-      <p class="subtitle">Redefine the styling experience with AI.</p>
+      <p class="subtitle">
+        <span>Experience our personalised styling journey with</span>
+        <br>
+        <span> Lane Crawford.</span>
+      </p>
       <div class="btn-container flex">
         <div class="log btn" @click="goToLogin">Log in</div>
         <div class="sign btn" @click="goToSignup">Sign up</div>
@@ -49,15 +53,16 @@ const goToLogin = () => {
   font-weight: 400;
   margin-bottom: 31.5rem;
   .title {
-    font-family: 'boskaRegular';
-    line-height: 93%;
-    letter-spacing: -0.02em;
+    font-family: 'satoshiMedium';
+    line-height: 120%;
+    // letter-spacing: -0.02em;
   }
   .subtitle {
     font-size: 3.2rem;
     font-family: 'satoshiRegular';
     margin: 3.2rem 0 6rem;
-    list-style: 124%;
+    font-weight: 400;
+    line-height: 124%;
     letter-spacing: 0.08em;
   }
   .btn-container {

src/views/login/customer.vue

@@ -25,8 +25,8 @@
         <div class="text">
           <div class="form-title">{{ formTitle }}</div>
           <div class="description">
-            <p>Redefine the styling experience with AI.</p>
-            <p>Use Styling Angel to speed up your fashion journey.</p>
+            <p>Unlock personalized styling insights.</p>
+            <p>Enter a client profile to begin curating their next look with Styling Angel.</p>
           </div>
         </div>
 
@@ -58,7 +58,7 @@
       </div>
     </template>
 
-    <Profile ref="profileRef" @selected-customer="handleSelectCustomer" />
+    <Profile ref="profileRef" @selected-customer="handleSelectCustomer" is-customer />
   </div>
 </template>
 <script setup lang="ts">
@@ -70,7 +70,6 @@ import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/ap
 import Profile from '../Workshop/profile.vue'
 import MyEvent from '@/utils/myEvent'
 
-
 const profileRef = ref<typeof Profile>(null)
 const handleOpenProfile = () => {
   profileRef.value.open()
@@ -107,6 +106,7 @@ const handleConfirm = async () => {
     customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
       useUserInfoStore().resetGenerateParams()
       generateStore.setCustomerInfo(res)
+      MyEvent.emit('clear-generate-state')
       router.push('/workshop/home')
     })
   } else {

src/views/stylist/index.vue

@@ -35,7 +35,7 @@
 
     <!-- Continue按钮 -->
     <div class="continue-button" @click="handleContinue" v-if="!$route.query?.demo">Continue</div>
-    <van-dialog
+    <!-- <van-dialog
       class="video-dialog"
       :show-confirm-button="false"
       :show-cancel-button="false"
@@ -47,7 +47,7 @@
         <van-icon name="cross" class="close-icon" />
       </div>
       <Video ref="videoRef" />
-    </van-dialog>
+    </van-dialog> -->
   </div>
 </template>
 
@@ -57,7 +57,9 @@ import { useRouter } from 'vue-router'
 import Video from './components/Video.vue'
 import { useUserInfoStore } from '@/stores'
 import male from '@/assets/images/male.png'
+import maleThumb from '@/assets/images/male_thumb.png'
 import female from '@/assets/images/female.png'
+import femaleThumb from '@/assets/images/female_thumb.png'
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
 
@@ -70,28 +72,32 @@ const stylists = ref<any[]>([
     value: 'crystal',
     name: 'Vera Lo',
     description: 'Contemporary, Classic, Simple Silhouettes, Statement Pieces',
-    image: female
+    image: female,
+    thumb: femaleThumb
   },
   {
     id: 2,
     value: 'mini',
     name: 'Sarah Chen',
     description: 'Modern, Edgy, Bold Colors, Street Style',
-    image: male
+    image: male,
+    thumb: maleThumb
   },
   {
     id: 3,
     value: 'crystal',
     name: 'Emma Wilson',
     description: 'Elegant, Feminine, Vintage Inspired, Soft Tones',
-    image: female
+    image: female,
+    thumb: femaleThumb
   },
   {
     id: 4,
     value: 'mini',
     name: 'Alex Johnson',
     description: 'Minimalist, Professional, Neutral Palette, Clean Lines',
-    image: male
+    image: male,
+    thumb: maleThumb
   }
 ])
 const currentChoosed = ref(1)
@@ -119,20 +125,22 @@ const handleClickStylist = (item: any) => {
 
 const handleContinue = () => {
   const generateParams = userInfoStore.getGenerateParams()
-  generateParams.stylist =
-    stylists.value.find((item) => item.id === currentChoosed.value)?.value || ''
+  const selected = stylists.value.find((item) => item.id === currentChoosed.value)
+  generateParams.stylist = selected?.value
+  generateParams.stylistImage = selected?.thumb
+
   userInfoStore.setGenerateParams(generateParams)
 
   router.push('/workshop/stylist/sex')
 }
 
 // 监听showVideo变化，关闭时暂停视频
-watch(showVideo, (newValue) => {
-  if (!newValue && videoRef.value) {
-    videoRef.value.pause()
-    videoRef.value.reset()
-  }
-})
+// watch(showVideo, (newValue) => {
+//   if (!newValue && videoRef.value) {
+//     videoRef.value.pause()
+//     videoRef.value.reset()
+//   }
+// })
 </script>
 
 <style scoped lang="less">