style: 文案和样式修改

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().customerId,
-	!!useGenerateStore().visitRecordId,
+    !!useGenerateStore().visitRecordId,
-	!!useGenerateStore().styleId,
+    !!useGenerateStore().styleId,
-	// !!useGenerateStore().modelPhotoId,
+    // !!useGenerateStore().modelPhotoId,
-	true,
+    true,
-	!!useGenerateStore().originalTryOnId,
+    !!useGenerateStore().originalTryOnId
-  ];
+  ]
-  return ids.splice(0, num).every(id => id) ? true : "/stylist/customer";
+  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',
+      path: '/reset',
-      name:'ResetPage',
+      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',
+      path: '/customer',
-		name: 'customer',
+      name: 'customer',
-		component: () => import('@/views/login/customer.vue'),
+      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',
+          path: '/workshop/home',
-			name: 'Home',
+          name: 'Home',
-			component: () => import('@/views/Workshop/home.vue')
+          component: () => import('@/views/Workshop/home.vue')
-		},
+        },
-		{
+        {
-			path: '/workshop/homeNav',
+          path: '/workshop/homeNav',
-			name: 'HomeNav',
+          name: 'HomeNav',
-			component: () => import('@/views/Workshop/homeNav.vue')
+          component: () => import('@/views/Workshop/homeNav.vue')
-		},
+        },
-		{
+        {
-			path: '/workshop/stylist',
+          path: '/workshop/stylist',
-			name: 'StylistPage',
+          name: 'StylistPage',
-			redirect: '/workshop/stylist/index',
+          redirect: '/workshop/stylist/index',
-			component: () => import('@/views/stylist/container.vue'),
+          component: () => import('@/views/stylist/container.vue'),
-			children: [
+          children: [
-			  {
+            {
-				path: 'index',
+              path: 'index',
-				name: 'index',
+              name: 'index',
-				component: () => import('@/views/stylist/index.vue'),
+              component: () => import('@/views/stylist/index.vue'),
-				meta: { verify: ()=> VerifyIDs(2) }
+              meta: { verify: () => VerifyIDs(2) }
-			  },
+            },
-			  {
+            {
-				path: 'sex',
+              path: 'sex',
-				name: 'sex',
+              name: 'sex',
-				component: () => import('@/views/stylist/sex.vue'),
+              component: () => import('@/views/stylist/sex.vue'),
-				meta: { verify: ()=> VerifyIDs(2) }
+              meta: { verify: () => VerifyIDs(2) }
-			  },
+            },
-			  {
+            {
-				path: 'dressfor',
+              path: 'dressfor',
-				name: 'dressfor',
+              name: 'dressfor',
-				component: () => import('@/views/stylist/dressfor.vue'),
+              component: () => import('@/views/stylist/dressfor.vue'),
-				meta: { verify: ()=> VerifyIDs(2) }
+              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/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;
+  overflow: hidden;
-  padding: 1.4rem;
+  // border: 0.2rem solid #000;
+  // padding: 1.4rem;
 
   img {
-    width: 4.9rem;
+    width: 100%;
-    height: 4.9rem;
+    // height: 100%;
-    border-radius: 50%;
+    // border-radius: 50%;
     // object-fit: cover;
   }
 }

src/views/asistant/index.vue

@@ -14,7 +14,7 @@
     <div class="footer">
       <InputArea @send-message="handleSendMessage" />
       <div class="continue flex">
-        <div class="btn flex flex-center" @click="handleContinue">Continue</div>
+        <div class="btn flex flex-center" @click="handleContinue">Generate</div>
       </div>
     </div>
   </div>
@@ -272,7 +272,7 @@ const handleContinue = () => {
 </script>
 <style lang="less" scoped>
 .asistant-container {
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 }
 

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>
+        <div class="title">Staff Login.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
+        <p class="subtitle">
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+          <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(
+    background: radial-gradient(100% 100% at 0% 0%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
-      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>
+        <div class="title">Staff Login.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
+        <p class="subtitle">
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+          <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>
+        <div class="title">Staff Sign up.</div>
-        <p class="subtitle">Redefine the styling experience with AI.</p>
+        <p class="subtitle">Start my personalised styling journey with Lane Crawford.</p>
-        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</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 />
+        Styling <br />
-        ASSISTANT
+        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';
+    font-family: 'satoshiMedium';
-    line-height: 93%;
+    line-height: 120%;
-    letter-spacing: -0.02em;
+    // 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>Unlock personalized styling insights.</p>
-            <p>Use Styling Angel to speed up your fashion journey.</p>
+            <p>Enter a client profile to begin curating their next look with Styling Angel.</p>
           </div>
         </div>
 
@@ -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 =
+  const selected = stylists.value.find((item) => item.id === currentChoosed.value)
-    stylists.value.find((item) => item.id === currentChoosed.value)?.value || ''
+  generateParams.stylist = selected?.value
+  generateParams.stylistImage = selected?.thumb
+
   userInfoStore.setGenerateParams(generateParams)
 
   router.push('/workshop/stylist/sex')
 }
 
 // 监听showVideo变化，关闭时暂停视频
-watch(showVideo, (newValue) => {
+// watch(showVideo, (newValue) => {
-  if (!newValue && videoRef.value) {
+//   if (!newValue && videoRef.value) {
-    videoRef.value.pause()
+//     videoRef.value.pause()
-    videoRef.value.reset()
+//     videoRef.value.reset()
-  }
+//   }
-})
+// })
 </script>
 
 <style scoped lang="less">