feat: 修改请求时机

src/hooks/useStreamChat.ts

@@ -0,0 +1,112 @@
+import { ref } from 'vue'
+import { showToast } from 'vant'
+import { streamChatAddress } from '@/api/workshop'
+import { useUserInfoStore } from '@/stores'
+
+/**
+ * 流式对话 Hook
+ * @param onSuccess - 成功时的回调（流式响应时调用）
+ * @returns { fetchMessage, isGenerating }
+ */
+export function useStreamChat(onSuccess?: () => void) {
+  const userInfoStore = useUserInfoStore()
+  const isGenerating = ref(false)
+
+  const fetchMessage = (message: string, sessionId: string): Promise<void> => {
+    isGenerating.value = true
+
+    const params = {
+      message,
+      sessionId,
+      gender: userInfoStore.state.generateParams.sex
+    }
+
+    // 直接使用 fetch 进行流式请求
+    const token = userInfoStore.state.token
+    const baseURL = import.meta.env.MODE === 'development' ? '' : import.meta.env.VITE_APP_URL
+
+    // 构建查询参数
+    const queryParams = new URLSearchParams()
+    Object.entries(params).forEach(([key, value]) => {
+      queryParams.append(key, String(value))
+    })
+
+    const url = `${baseURL}${streamChatAddress}?${queryParams.toString()}`
+
+    return fetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: token,
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include'
+    })
+      .then(async (response) => {
+        // 检查响应内容类型，判断是否为流式响应
+        const contentType = response.headers.get('content-type') || ''
+        const isStreamResponse =
+          contentType.includes('text/event-stream') || contentType.includes('stream')
+
+        if (!response.ok) {
+          // 非流式错误响应，使用 text() 读取错误信息
+          const errorText = await response.text()
+          console.error('请求错误:', errorText)
+          showToast({
+            message: `failed to fetch: ${response.status}`,
+            position: 'top',
+            icon: 'none'
+          })
+          throw new Error(`发起对话错误--- ${response.status}: ${errorText}`)
+        }
+
+        // 不是流式响应，使用 text()读取错误信息
+        if (!isStreamResponse) {
+          const text = await response.text()
+
+          try {
+            const errorData = JSON.parse(text)
+            if (errorData.message || errorData.error) {
+              showToast({
+                message: errorData.message || errorData.error || 'network error',
+                position: 'top',
+                icon: 'none'
+              })
+            }
+          } catch (e) {
+            // 如果不是 JSON，直接显示文本内容
+            showToast({
+              message: text || 'network error',
+              position: 'top',
+              icon: 'none'
+            })
+            throw new Error(text || 'network error')
+          }
+
+          return
+        }
+
+        // 流式响应处理
+        const reader = response.body?.getReader()
+        if (!reader) throw new Error('无法获取流读取器')
+
+        const decoder = new TextDecoder()
+        // 流式响应时调用成功回调
+        onSuccess?.()
+      })
+      .catch((error) => {
+        console.error('fetch请求失败:', error)
+        showToast({
+          message: error.message || 'network error'
+        })
+        throw error
+      })
+      .finally(() => {
+        isGenerating.value = false
+      })
+  }
+
+  return {
+    fetchMessage,
+    isGenerating
+  }
+}

src/stores/modules/h_generate.ts

@@ -52,6 +52,12 @@ export const useHGenerateStore = defineStore({
       this.customizeInfo.styleUrl = ''
       this.customizeInfo.isRegenerated = ''
       this.customizeInfo.isFavorite = false
+    },
+	/** 上传服装 */
+    uploadStyle(data: object) {
+      for (const key in data) {
+        this.style[key] = data[key]
+      }
     },
     uploadCustomizeInfo(data: object) {
       for (const key in data) {

src/views/Workshop/product.vue

@@ -354,6 +354,7 @@ const { isLoading } = toRefs(data);
 				font-weight: 700;
 				line-height: 2rem;
 				margin-bottom: 1.8rem;
+				color: #000;
 			}
 			> .info{
 				font-size: 3.2rem;

src/views/Workshop/profile.vue

@@ -172,10 +172,11 @@ const onScroll = (e: Event) => {
 // 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
 let isCustomerOnly = false
 const handleShowPopup = (flag: boolean, customer: boolean) => {
+  console.log(flag,customer)
 	// customer: 是否是顾客页面只展示customer选择弹窗
 	isCustomerOnly = customer
   showSwitchCustomerPopup.value = flag
-  if (isCustomerOnly) return
+  if (props.isCustomer) return
   show.value = !flag
   if (flag) {
     loadCustomers(true)
@@ -310,7 +311,7 @@ defineExpose({ open, close, handleShowPopup })
   >
     <div class="popup-title flex">
       <div class="title-txt">Saved Customer ID</div>
-      <SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false)" />
+      <SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false,false)" />
     </div>
     <div ref="customerListEl" class="cusomter-list" @scroll="onScroll">
       <div

src/views/Workshop/selectStyle/index.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, toRefs, computed, ref } from "vue";
+import { onMounted, onUnmounted, reactive, toRefs, computed, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useGenerateStore, useUserInfoStore, useHGenerateStore } from '@/stores'
-import { showToast } from 'vant';
+import { showToast } from 'vant'
 import { shareImageToWhatsapp } from '@/utils/tools'
-import { generateRequestOutfit, getRequestOutfit, setStyleFavorite, cancelStyleFavorite, retrieveAndRegenerate } from '@/api/workshop'
+import {
+  generateRequestOutfit,
+  getRequestOutfit,
+  setStyleFavorite,
+  cancelStyleFavorite,
+  retrieveAndRegenerate
+} from '@/api/workshop'
 import { FlowType, IsHistoryFlow } from '@/types/enum'
 import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
 import gradientButton from '@/components/gradientButton.vue'
 import StyleListDom from '@/views/Workshop/selectStyle/styleList.vue'
+import { useStreamChat } from '@/hooks/useStreamChat'
 const router = useRouter()
 const route = useRoute()
 //const props = defineProps({
@@ -21,170 +28,212 @@ const query = computed(() => route.query)
 const isHistoryFlow = computed(() => IsHistoryFlow(query.value.flowType))
 const isLoading = ref(false)
 // const loadingTitle= ref('Analyzing the Outfit...')
-const loadingTitle = computed(()=>{
+const loadingTitle = computed(() => {
-	let str = ''
+  let str = 'Analyzing the Outfit...'
-	if(!select.value.status)str = 'Analyzing the Outfit...'
+  if (!select.value.status) str = 'Analyzing the Outfit...'
-	if(select.value.status == 'RUNNING')str = 'Generating Results...'
+  if (select.value.status == 'RUNNING') str = 'Generating Results...'
-	if(select.value.status == 'PENDING')str = 'Almost there...'
+  if (select.value.status == 'PENDING' || select.value.status == 'ALMOST_DONE')
+    str = 'Almost there...'
   return str
 })
 
 let data = reactive({
-	select:computed(()=>generateStore.style),
+  select: computed(() => generateStore.style),
-	styleList:computed(()=>generateStore.styleList),
+  styleList: computed(() => generateStore.styleList)
 })
 let dataDom = reactive({
-	styleListVue:null,
+  styleListVue: null
 })
 
 let getGenerateTime = null as any
 
-const updateStyle = ()=>{
+const updateStyle = () => {
   // generateStore.updateStyle(item)
   // data.styleList[index] = {}
-	requestOutfit({num:4})
+  requestOutfit({ num: 4 })
 }
-const setLikeStyle = (likeStyle)=>{
+const setLikeStyle = (likeStyle) => {
-	if(!select.value.id)return
+  if (!select.value.id) return
-	if(likeStyle){
+  if (likeStyle) {
-		cancelStyleFavorite(select.value.id).then(()=>{
+    cancelStyleFavorite(select.value.id).then(() => {
       select.value.isLike = false
     })
-	}else{
+  } else {
-		setStyleFavorite(select.value.id).then(()=>{
+    setStyleFavorite(select.value.id).then(() => {
       select.value.isLike = true
     })
   }
 }
 
-const setDownload = ()=>{
+const setDownload = () => {
-	if(select.value.path)shareImageToWhatsapp(select.value.path)
+  if (select.value.path) shareImageToWhatsapp(select.value.path)
 }
 
-const toProduct = ()=>{
+const toProduct = () => {
   // if(generateStore.style.id){
   // 	generateStore.setIsGenerate(true)
   // }
-	if(!isHistoryFlow.value){
+  router.push({ path: 'product', query: { ...query.value } })
-		router.push({ path: 'product', query: {...query.value} })
+  // if(!isHistoryFlow.value){
-	}else{
+  // 	router.push({ path: 'product', query: {...query.value} })
-		router.push({ path: 'creation', query: {...query.value, active: FlowType.H_OUTFIT} })
+  // }else{
-	}
+  // 	router.push({ path: 'creation', query: {...query.value, active: FlowType.H_OUTFIT} })
+  // }
 }
 
-const requestOutfit = async ({num})=>{
+const requestOutfit = async ({ num }) => {
-	let rv:any = await new Promise<void>((resolve, reject) => {
-		if(isHistoryFlow.value){
-			retrieveAndRegenerate({tryOnEffectsId:hGenerateStore.originalTryOn.id,checkInId:generateStore.visitRecordId}).then((rv:any)=>{
-				resolve(rv)
-			})
-		}else{
-			let value = {
-				"customerId": generateStore.customerId,
-				"checkInId": generateStore.visitRecordId,
-				"stylist": userInfoStore.state.generateParams.stylist,
-				"gender": userInfoStore.state.generateParams.sex,
-				"sessionId": generateStore.sessionId,
-				num,
-			}
-			generateRequestOutfit(value).then((rv:any)=>{
-				resolve(rv)
-			})
-		}
-	})
 	isLoading.value = true
+  let rv: any = await new Promise<void>((resolve, reject) => {
+    if (isHistoryFlow.value) {
+      retrieveAndRegenerate({
+        tryOnEffectsId: hGenerateStore.originalTryOn.id,
+        checkInId: generateStore.visitRecordId
+      }).then((rv: any) => {
+        resolve(rv)
+      })
+    } else {
+      let value = {
+        customerId: generateStore.customerId,
+        checkInId: generateStore.visitRecordId,
+        stylist: userInfoStore.state.generateParams.stylist,
+        gender: userInfoStore.state.generateParams.sex,
+        sessionId: generateStore.sessionId,
+        num
+      }
+      generateRequestOutfit(value).then((rv: any) => {
+        resolve(rv)
+      })
+    }
+  })
+  
   generateStore.clearProductData()
   data.select.taskId = rv[0]
-	rv.forEach((item,index)=>data.styleList[index].taskId = item)
+  rv.forEach((item, index) => (data.styleList[index].taskId = item))
   getRequestOutfitList(rv)
 }
 
-const getRequestOutfitList = (generateList)=>{
+const getRequestOutfitList = (generateList) => {
-	let value = {requestIDs:generateList.join(',')}
+  let value = { requestIDs: generateList.join(',') }
-	getRequestOutfit(value).then((rv:any)=>{
+  getRequestOutfit(value).then((rv: any) => {
-		let selectIndex = rv.findIndex((item)=>item.requestId == data.select.taskId)
+    let selectIndex = rv.findIndex((item) => item.requestId == data.select.taskId)
-		if(selectIndex != -1){
+    console.log(selectIndex)
+    if (selectIndex != -1) {
       data.select.id = rv[selectIndex].id
       data.select.path = rv[selectIndex].path
       data.select.status = rv[selectIndex].status
     }
-		rv.forEach((item)=>{
+    rv.forEach((item) => {
-			let index = data.styleList.findIndex((styleListItem)=>styleListItem?.taskId == item.requestId)
+      let index = data.styleList.findIndex(
+        (styleListItem) => styleListItem?.taskId == item.requestId
+      )
       data.styleList[index] = {
         id: item.id,
         taskId: item.requestId,
         status: item.status,
-				path: item.path,
+        path: item.path
       }
     })
 
-		if(['SUCCEEDED'].includes(data.select.status))isLoading.value = false
+    if (['SUCCEEDED'].includes(data.select.status)) {
+      isLoading.value = false
+      if (isHistoryFlow.value) {
+        hGenerateStore.uploadStyle({
+          id: data.select.id,
+          path: data.select.path
+        })
+      }
+    }
+    if (data.styleList.filter((item) => item?.status == 'FAILED').length > 0) {
+      showToast({
+        message: 'One of the outfits failed to generate. Please try generating again.',
+        duration: 2000
+      })
+      isLoading.value = false
+    }
     const taskIdList = data.styleList
-		.filter(item => item?.taskId && item?.status !== 'SUCCEEDED')
+      .filter((item) => item?.taskId && item?.status !== 'SUCCEEDED' && item?.status !== 'FAILED')
-		.map(item => item.taskId);
+      .map((item) => item.taskId)
-		if(taskIdList.length > 0){
+    if (taskIdList.length > 0) {
-			getGenerateTime = setTimeout(()=>{
+      getGenerateTime = setTimeout(() => {
         getRequestOutfitList(taskIdList)
-			},3000)
+      }, 3000)
     }
   })
 }
 
-const styleListInit = ()=>{
+const styleListInit = () => {
   dataDom.styleListVue.init(data.select)
 }
 
-onMounted(()=>{
+// 使用 useStreamChat，在流式请求成功后执行原本的逻辑
+const { fetchMessage, isGenerating } = useStreamChat()
+
+onMounted(() => {
   // generateStore.clearProductData()
   // if(!data.styleList[0]?.id)getRequestOutfitList(0)
-	if(getGenerateTime)clearTimeout(getGenerateTime)
+  if (getGenerateTime) clearTimeout(getGenerateTime)
+
+  // 检查是否有从 dressfor 传递过来的消息
+  const message = query.value.message as string
+  const sessionId = query.value.sessionId as string
+
+  if (message && sessionId) {
+    // 有消息，说明是从 dressfor 跳转过来的，先发起流式请求
+    generateStore.setSessionId(sessionId)
+    fetchMessage(message, sessionId)
+      .then(() => {
+        console.log('对话请求完成')
+        // 清除 URL 参数避免返回时再次触发
+        router.replace({ path: '/workshop/selectStyle' })
+        // 开始生成outfit
+        requestOutfit({ num: 4 })
+      })
+      .catch(() => {
+        // 错误处理
+      })
+  }
+  // 原本的逻辑
   const taskIdList = data.styleList
-	.filter(item => item?.taskId && item?.status !== 'SUCCEEDED')
+    .filter((item) => item?.taskId && item?.status !== 'SUCCEEDED')
-	.map(item => item.taskId);
+    .map((item) => item.taskId)
-	if(data.select.status == 'SUCCEEDED' && taskIdList.length == 0){
+  if (data.select.status == 'SUCCEEDED' && taskIdList.length == 0) {
     return
-	}else if(!data.select?.taskId){
+  } else if (!data.select?.taskId) {
-		requestOutfit({num:4})
+    requestOutfit({ num: 4 })
-	}else if(data.select.status != 'SUCCEEDED' || taskIdList.length > 0){
+  } else if (data.select.status != 'SUCCEEDED' || taskIdList.length > 0) {
-		if(data.select.status != 'SUCCEEDED')isLoading.value = true
+    if (data.select.status != 'SUCCEEDED') isLoading.value = true
     getRequestOutfitList(taskIdList)
   }
 })
-onUnmounted(()=>{
+onUnmounted(() => {
-	if(getGenerateTime)clearTimeout(getGenerateTime)
+  if (getGenerateTime) clearTimeout(getGenerateTime)
 })
 defineExpose({})
-const { select } = toRefs(data);
+const { select } = toRefs(data)
-const { styleListVue } = toRefs(dataDom);
+const { styleListVue } = toRefs(dataDom)
 </script>
 <template>
   <div class="selectStyle">
     <div class="text">
-			<div class="title">
+      <div class="title">Outfit Result</div>
-				Outfit Result
+      <div class="info">Refine your Look</div>
-			</div>
-			<div class="info">
-				Refine your Look
-			</div>
     </div>
     <div class="selectContent">
       <!-- {{ select }} -->
       <div class="imgBox">
-				<img :src="select.path" alt="">
+        <img :src="select.path" alt="" />
       </div>
       <div v-if="!isHistoryFlow" class="chooseMore" @click.stop="styleListInit">
         <gradientButton>
           <template #content>
-						<div class="text">
+            <div class="text">Choose More</div>
-							Choose More
-						</div>
           </template>
         </gradientButton>
         <div></div>
       </div>
       <div class="btn" v-else>
         <div class="like" @click.stop="setLikeStyle(select.isLike)">
-					<SvgIcon :name="`love_${select.isLike?1:0}`" size="35" />
+          <SvgIcon :name="`love_${select.isLike ? 1 : 0}`" size="35" />
         </div>
         <div class="down" @click.stop="setDownload()">
           <SvgIcon name="download" size="35" />
@@ -204,20 +253,20 @@ const { styleListVue } = toRefs(dataDom);
           </template>
         </gradientButton>
       </div>
-			<div class="btnItem style2" @click.stop="toProduct">{{ isHistoryFlow?'Finish':'Continue' }}</div>
+      <div class="btnItem style2" @click.stop="toProduct">Continue</div>
     </div>
   </div>
   <!-- <div class="footer placeholder"></div> -->
-	<div class="loading-container" v-if="isLoading">
+  <div class="loading-container" v-if="isGenerating || isLoading">
-      <GenerateLoading :title="loadingTitle"/>
+    <GenerateLoading :title="loadingTitle" />
   </div>
   <StyleListDom ref="styleListVue"></StyleListDom>
 </template>
 <style lang="less" scoped>
-	.header-title {
+.header-title {
   // --header-title-background: #f6f6f6;
-	}
+}
-	.loading-container{
+.loading-container {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -229,8 +278,8 @@ const { styleListVue } = toRefs(dataDom);
   display: flex;
   align-items: center;
   justify-content: center;
-	}
+}
-	.selectStyle{
+.selectStyle {
   width: 100%;
   flex: 1;
   // height: 100%;
@@ -239,19 +288,19 @@ const { styleListVue } = toRefs(dataDom);
   flex-direction: column;
   background-color: #f6f6f6;
   overflow: hidden;
-		> .text{
+  > .text {
     text-align: center;
     width: 100%;
     margin-top: 8.5rem;
     margin-bottom: 8.5rem;
-			> .title{
+    > .title {
       font-family: satoshiBold;
       font-weight: 700;
       font-size: 8.6rem;
       line-height: 124%;
       color: #000;
     }
-			> .info{
+    > .info {
       font-size: 4rem;
       font-weight: 400;
       line-height: 124%;
@@ -259,69 +308,69 @@ const { styleListVue } = toRefs(dataDom);
       color: rgba(0, 0, 0, 0.6);
     }
   }
-		.selectContent{
+  .selectContent {
     // padding: 0 4rem;
     margin: 0 auto;
     width: 73.7rem;
     margin-bottom: 19rem;
-			> .imgBox{
+    > .imgBox {
       height: 73.7rem;
       width: 100%;
       margin-bottom: 5.6rem;
-				> img{
+      > img {
         width: 100%;
         height: 100%;
       }
     }
-			> .chooseMore{
+    > .chooseMore {
       --borderRadius: 5.4rem;
       --borderWidth: 2px;
       width: 24.8rem;
       margin: 0 auto;
       height: 7.6rem;
-				.text{
+      .text {
         font-size: 3.1rem;
         color: #000;
         font-family: satoshiMedium;
       }
     }
-			> .btn{
+    > .btn {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 2rem;
-				> div{
+      > div {
         color: #000;
         border-radius: 50%;
         width: 7rem;
         height: 7rem;
         padding: 1rem;
         background-color: #fff;
-					&:hover{
+        &:hover {
           color: #000;
         }
       }
     }
   }
-		> .btn{
+  > .btn {
     display: flex;
     gap: 6.6rem;
     justify-content: center;
     > div {
-				border-radius: .96rem;
+      border-radius: 0.96rem;
       width: 33.7rem;
       font-size: 4.8rem;
       font-family: satoshiMedium;
       line-height: 9.2rem;
       display: flex;
       justify-content: center;
-				&.style1{
+      &.style1 {
-					--borderRadius: .96rem;
+        --borderRadius: 0.96rem;
         --borderWidth: 2px;
-					.text{
+        .text {
           width: 100%;
           text-align: center;
-						> .icon{
+          > .icon {
             left: 4rem;
             top: 50%;
             transform: translateY(-50%);
@@ -329,14 +378,14 @@ const { styleListVue } = toRefs(dataDom);
           }
         }
       }
-				&.style2{
+      &.style2 {
         color: #fff;
         background-color: #000;
       }
     }
-			.btnItem .text{
+    .btnItem .text {
       color: #000;
     }
   }
-	}
+}
 </style>

src/views/Workshop/selectStyle/styleList.vue

@@ -33,6 +33,7 @@ const confirm = ()=>{
 		data.selectStyle.taskId = data.oldSelectStyle.taskId
 		data.selectStyle.isLike = false
 	}
+	generateStore.clearTryOn()
 	close();
 }
 

src/views/asistant/components/NoticeItem.vue

@@ -136,6 +136,10 @@ const actionList: ActionItem[] = [
         color: #000;
         border-radius: 0 2rem 2rem 2rem;
         word-break: break-word;
+		:deep(strong){
+			font-family: 'satoshiBold';
+			font-size: 4.5rem;
+		}
       }
     }
   }

src/views/asistant/index.vue

@@ -81,6 +81,8 @@ const sendPrefilledMessage = () => {
 }
 
 onMounted(() => {
+  console.log('1111111111111');
+  
   sessionId.value = Math.floor(Date.now() / 1000).toString()
   generateStore.setSessionId(sessionId.value)
 })

src/views/stylist/dressfor.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="dressfor-container flex">
     <div class="content flex-1 flex flex-column">
-      <div class="loading-container flex flex-center">
+      <!-- 移除始终显示的 loading，改为按需显示 -->
+      <!-- <div class="loading-container flex flex-center">
         <Icon class="icon-element" title="" />
-      </div>
+      </div> -->
       <!-- <div class="text">
         What are you <br />
         dressing for?
@@ -12,7 +13,7 @@
         <img class="text" src="@/assets/images/dressfor.png" alt="" />
       </div>
       <!-- <div class="start-btn" @click="handleStart">Start</div> -->
-      <div class="chatbox flex flex-center">
+      <!-- <div class="chatbox flex flex-center">
         <div class="input-box flex">
           <div class="input-wrapper flex-1 flex">
             <input
@@ -37,9 +38,9 @@
         <div class="send flex flex-center" @click="handleSendMessage">
           <SvgIcon class="send-icon" name="send_bold" size="26" color="#6d6868" />
         </div>
-      </div>
+      </div> -->
       <div class="tag-container flex flex-column flex-center">
-        <div class="tag-list short flex flex-justify-center">
+        <div class="tag-list short flex">
           <div
             class="tag-item"
             :class="{ active: item === inputValue }"
@@ -50,7 +51,7 @@
             {{ item }}
           </div>
         </div>
-        <div class="tag-list long flex flex-justify-center">
+        <!-- <div class="tag-list long flex flex-justify-center">
           <div
             class="tag-item"
             v-for="item in tagListLong"
@@ -60,24 +61,43 @@
           >
             {{ item }}
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onUnmounted, nextTick, watch } from 'vue'
+import { useUserInfoStore, useGenerateStore } from '@/stores'
 import { showToast, closeToast } from 'vant'
+import { useRouter } from 'vue-router'
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
-import { useRouter } from 'vue-router'
 import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
 import Icon from '../asistant/components/GenerateLoading.vue'
 
 const router = useRouter()
+const userInfoStore = useUserInfoStore()
+const generateStore = useGenerateStore()
+const tagListShort = [
+  'Casual',
+  'Formal',
+  'Activewear',
+  'Resort',
+  'Business casual',
+  'Evening',
+  'Outdoor',
+  'Business',
+  'Cocktail',
 
-const tagListShort = ['Silk Slip Dress', 'Business Casual', 'Suggest Shoe Styles']
+  'Bridal',
-const tagListLong = ['Linen Suit For Summer  Gaka', 'Recomment Evening Bags']
+  'Festival',
+  'Travel',
+  'Athleisure',
+  'Beach',
+  'Ski'
+]
+// const tagListLong = ['Linen Suit For Summer  Gaka', 'Recomment Evening Bags']
 
 const inputValue = ref('')
 const isRecording = ref(false)
@@ -106,11 +126,6 @@ const handleSendMessage = () => {
     showToast('Please enter a message')
     return
   }
-
-  router.push({
-    path: '/asistant',
-    query: message ? { message } : undefined
-  })
 }
 
 const handleClickAudio = () => {
@@ -200,6 +215,16 @@ const stopRecording = () => {
 
 const handleClickTag = (tag: string) => {
   inputValue.value = tag
+  const sessionId = Math.floor(Date.now() / 1000).toString()
+  generateStore.setSessionId(sessionId.value)
+  // 直接跳转到 selectStyle 页面，传递消息和 sessionId
+  router.push({
+    path: '/workshop/selectStyle',
+    query: {
+      message: tag,
+      sessionId
+    }
+  })
 }
 
 onUnmounted(() => {
@@ -224,6 +249,20 @@ onUnmounted(() => {
   background-position: center;
   background-repeat: no-repeat;
   padding: 15.9rem 0 0 0;
+  .loading-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #000;
+  }
   .content {
     .loading-container {
       :deep(.loading-image) {
@@ -246,70 +285,74 @@ onUnmounted(() => {
       padding-bottom: 7.7rem;
       width: 60rem;
     }
-    .chatbox {
+    // .chatbox {
-      height: 9.3rem;
+    //   height: 9.3rem;
-      // background-color: #fff;
+    //   // background-color: #fff;
-      column-gap: 2.29rem;
+    //   column-gap: 2.29rem;
-      .input-box {
+    //   .input-box {
-        width: 59.8rem;
+    //     width: 59.8rem;
-        height: 100%;
+    //     height: 100%;
-        background-color: #efefef;
+    //     background-color: #efefef;
-        // border: 2px solid #5f5f5f;
+    //     // border: 2px solid #5f5f5f;
-        border-radius: 1rem;
+    //     border-radius: 1rem;
-        color: #222222;
+    //     color: #222222;
-        font-size: 3.2rem;
+    //     font-size: 3.2rem;
-        font-family: 'satoshiRegular';
+    //     font-family: 'satoshiRegular';
-        padding: 0 2.6rem;
+    //     padding: 0 2.6rem;
-        column-gap: 2.6rem;
+    //     column-gap: 2.6rem;
-        overflow: hidden;
+    //     overflow: hidden;
-        .input-wrapper {
+    //     .input-wrapper {
-          overflow: hidden;
+    //       overflow: hidden;
-        }
+    //     }
-        .recording-visualizer {
+    //     .recording-visualizer {
-          display: flex;
+    //       display: flex;
-          align-items: center;
+    //       align-items: center;
-          height: 100%;
+    //       height: 100%;
-          :deep(.audio-visualizer) {
+    //       :deep(.audio-visualizer) {
-            width: 100%;
-            padding: 0;
-          }
-          :deep(.visualizer-container) {
-            height: 100%;
-          }
-        }
-        .input-item {
     //         width: 100%;
-          height: 100%;
+    //         padding: 0;
-          outline: none;
+    //       }
-          border: none;
+    //       :deep(.visualizer-container) {
-          background-color: #efefef;
+    //         height: 100%;
-        }
+    //       }
-        .audio-icon {
+    //     }
-          width: initial;
+    //     .input-item {
-        }
+    //       // width: 100%;
-      }
+    //       height: 100%;
-      .send {
+    //       outline: none;
-        width: 7.6rem;
+    //       border: none;
-        height: 7.6rem;
+    //       background-color: #efefef;
-        background-color: #efefef;
+    //     }
-        border-radius: 1rem;
+    //     .audio-icon {
-      }
+    //       width: initial;
-    }
+    //     }
+    //   }
+    //   .send {
+    //     width: 7.6rem;
+    //     height: 7.6rem;
+    //     background-color: #efefef;
+    //     border-radius: 1rem;
+    //   }
+    // }
     .tag-container {
-      row-gap: 3.1rem;
+      // padding: 5.7rem 0;
-      padding-top: 5.7rem;
+      margin: 0 auto;
+      width: 65.8rem;
       .tag-list {
         color: #000;
         flex-wrap: wrap;
-        &.short {
+        justify-content: space-between;
-          column-gap: 1.91rem;
+        align-content: flex-start;
-        }
+        gap: 3rem;
-        &.long {
+        &::after {
-          column-gap: 3.1rem;
+          content: '';
-          padding-left: 2.1rem;
+          flex-grow: 1;
+          height: 0;
         }
+
         .tag-item {
           height: 6.8rem;
+          min-width: 12rem;
           line-height: 6.8rem;
           box-sizing: border-box;
           font-family: 'satoshiRegular';

src/views/stylist/index.vue

@@ -69,6 +69,10 @@ 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'
+import mini from '@/assets/images/mini.jpg'
+import miniThumb from '@/assets/images/mini_thumb.jpg'
+import Crystal from '@/assets/images/Crystal.jpg'
+import CrystalThumb from '@/assets/images/Crystal_thumb.jpg'
 
 const router = useRouter()
 const userInfoStore = useUserInfoStore()
@@ -77,31 +81,31 @@ const stylists = ref<any[]>([
   {
     id: 1,
     value: 'crystal',
-    name: 'Vera Lo',
+    name: 'Crystal',
     description: 'Contemporary, Classic, Simple Silhouettes, Statement Pieces',
-    image: female,
+    image: Crystal,
-    thumb: femaleThumb
+    thumb: CrystalThumb
   },
   {
     id: 2,
     value: 'mini',
-    name: 'Sarah Chen',
+    name: 'Mini',
     description: 'Modern, Edgy, Bold Colors, Street Style',
-    image: male,
+    image: mini,
-    thumb: maleThumb
+    thumb: miniThumb
   },
   {
     id: 3,
-    value: 'crystal',
+    value: 'vera',
-    name: 'Emma Wilson',
+    name: 'Vera',
     description: 'Elegant, Feminine, Vintage Inspired, Soft Tones',
     image: female,
     thumb: femaleThumb
   },
   {
     id: 4,
-    value: 'mini',
+    value: 'edi',
-    name: 'Alex Johnson',
+    name: 'Edi',
     description: 'Minimalist, Professional, Neutral Palette, Clean Lines',
     image: male,
     thumb: maleThumb

vite.config.ts

@@ -56,7 +56,7 @@ export default defineConfig(({ mode }) => {
 		},
 		server: {
 			host: '0.0.0.0', // 允许局域网内的IP访问
-			port: 8060, // 根据环境设置端口
+			port: 8066, // 根据环境设置端口
 			open: false, // 自动打开浏览器
 			strictPort: true, // 如果端口已被占用，则尝试下一个可用端口
 			hmr: {