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/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,339 +28,364 @@ 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' || select.value.status == 'ALMOST_DONE')str = 'Almost there...'
+  if (select.value.status == 'PENDING' || select.value.status == 'ALMOST_DONE')
-	return str
+    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)
+  // generateStore.updateStyle(item)
-	// data.styleList[index] = {}
+  // 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
+      select.value.isLike = false
-		})
+    })
-	}else{
+  } else {
-		setStyleFavorite(select.value.id).then(()=>{
+    setStyleFavorite(select.value.id).then(() => {
-			select.value.isLike = true
+      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){
+  // if(generateStore.style.id){
-	// 	generateStore.setIsGenerate(true)
+  // 	generateStore.setIsGenerate(true)
-	// }
+  // }
-	router.push({ path: 'product', query: {...query.value} })
+  router.push({ path: 'product', query: { ...query.value } })
-	// if(!isHistoryFlow.value){
+  // if(!isHistoryFlow.value){
-	// 	router.push({ path: 'product', query: {...query.value} })
+  // 	router.push({ path: 'product', query: {...query.value} })
-	// }else{
+  // }else{
-	// 	router.push({ path: 'creation', query: {...query.value, active: FlowType.H_OUTFIT} })
+  // 	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
-	generateStore.clearProductData()
+  let rv: any = await new Promise<void>((resolve, reject) => {
-	data.select.taskId = rv[0]
+    if (isHistoryFlow.value) {
-	rv.forEach((item,index)=>data.styleList[index].taskId = item)
+      retrieveAndRegenerate({
-	getRequestOutfitList(rv)
+        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))
+  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)
-		console.log(selectIndex)
+    console.log(selectIndex)
-		if(selectIndex != -1){
+    if (selectIndex != -1) {
-			data.select.id = rv[selectIndex].id
+      data.select.id = rv[selectIndex].id
-			data.select.path = rv[selectIndex].path
+      data.select.path = rv[selectIndex].path
-			data.select.status = rv[selectIndex].status
+      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(
-			data.styleList[index] = {
+        (styleListItem) => styleListItem?.taskId == item.requestId
-				id: item.id,
+      )
-				taskId: item.requestId,
+      data.styleList[index] = {
-				status: item.status,
+        id: item.id,
-				path: item.path,
+        taskId: item.requestId,
-			}
+        status: item.status,
-		})
+        path: item.path
+      }
+    })
 
-		if(['SUCCEEDED'].includes(data.select.status)){
+    if (['SUCCEEDED'].includes(data.select.status)) {
-			isLoading.value = false
+      isLoading.value = false
-			if(isHistoryFlow.value){
+      if (isHistoryFlow.value) {
-				hGenerateStore.uploadStyle({
+        hGenerateStore.uploadStyle({
-					id: data.select.id,
+          id: data.select.id,
-					path: data.select.path,
+          path: data.select.path
-				})
+        })
-			}
+      }
-		}
+    }
-		if(data.styleList.filter((item)=>item?.status == 'FAILED').length > 0){
+    if (data.styleList.filter((item) => item?.status == 'FAILED').length > 0) {
-			showToast({
+      showToast({
-				message: 'One of the outfits failed to generate. Please try generating again.',
+        message: 'One of the outfits failed to generate. Please try generating again.',
-				duration: 2000,
+        duration: 2000
-			})
+      })
-			isLoading.value = false
+      isLoading.value = false
-		}
+    }
-		const taskIdList = data.styleList
+    const taskIdList = data.styleList
-		.filter(item => item?.taskId && (item?.status !== 'SUCCEEDED' && item?.status !== 'FAILED'))
+      .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)
+        getRequestOutfitList(taskIdList)
-			},3000)
+      }, 3000)
-		}
+    }
-	})
+  })
 }
 
-const styleListInit = ()=>{
+const styleListInit = () => {
-	dataDom.styleListVue.init(data.select)
+  dataDom.styleListVue.init(data.select)
 }
 
-onMounted(()=>{
+// 使用 useStreamChat，在流式请求成功后执行原本的逻辑
-	// generateStore.clearProductData()
+const { fetchMessage, isGenerating } = useStreamChat()
-	// if(!data.styleList[0]?.id)getRequestOutfitList(0)
+
-	if(getGenerateTime)clearTimeout(getGenerateTime)
+onMounted(() => {
-	const taskIdList = data.styleList
+  // generateStore.clearProductData()
-	.filter(item => item?.taskId && item?.status !== 'SUCCEEDED')
+  // if(!data.styleList[0]?.id)getRequestOutfitList(0)
-	.map(item => item.taskId);
+  if (getGenerateTime) clearTimeout(getGenerateTime)
-	if(data.select.status == 'SUCCEEDED' && taskIdList.length == 0){
+
-		return
+  // 检查是否有从 dressfor 传递过来的消息
-	}else if(!data.select?.taskId){
+  const message = query.value.message as string
-		requestOutfit({num:4})
+  const sessionId = query.value.sessionId as string
-	}else if(data.select.status != 'SUCCEEDED' || taskIdList.length > 0){
+
-		if(data.select.status != 'SUCCEEDED')isLoading.value = true
+  if (message && sessionId) {
-		getRequestOutfitList(taskIdList)
+    // 有消息，说明是从 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')
+    .map((item) => item.taskId)
+  if (data.select.status == 'SUCCEEDED' && taskIdList.length == 0) {
+    return
+  } else if (!data.select?.taskId) {
+    requestOutfit({ num: 4 })
+  } else if (data.select.status != 'SUCCEEDED' || taskIdList.length > 0) {
+    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="selectStyle">
-		<div class="text">
+    <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="">
-			</div>
-			<div v-if="!isHistoryFlow" class="chooseMore" @click.stop="styleListInit">
-				<gradientButton>
-					<template #content>
-						<div class="text">
-							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" />
-				</div>
-				<div class="down" @click.stop="setDownload()">
-					<SvgIcon name="download" size="35" />
-				</div>
-			</div>
-		</div>
-		<div class="btn">
-			<div class="btnItem style1" @click.stop="updateStyle()">
-				<gradientButton>
-					<template #content>
-						<div class="text">
-							<span class="icon">
-								<SvgIcon name="reTry" size="40" />
-							</span>
-							Re-try
-						</div>
-					</template>
-				</gradientButton>
-			</div>
-			<div class="btnItem style2" @click.stop="toProduct">Continue</div>
-		</div>
-	</div>
-	<!-- <div class="footer placeholder"></div> -->
-	<div class="loading-container" v-if="isLoading">
-      <GenerateLoading :title="loadingTitle"/>
     </div>
-	<StyleListDom ref="styleListVue"></StyleListDom>
+    <div class="selectContent">
+      <!-- {{ select }} -->
+      <div class="imgBox">
+        <img :src="select.path" alt="" />
+      </div>
+      <div v-if="!isHistoryFlow" class="chooseMore" @click.stop="styleListInit">
+        <gradientButton>
+          <template #content>
+            <div class="text">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" />
+        </div>
+        <div class="down" @click.stop="setDownload()">
+          <SvgIcon name="download" size="35" />
+        </div>
+      </div>
+    </div>
+    <div class="btn">
+      <div class="btnItem style1" @click.stop="updateStyle()">
+        <gradientButton>
+          <template #content>
+            <div class="text">
+              <span class="icon">
+                <SvgIcon name="reTry" size="40" />
+              </span>
+              Re-try
+            </div>
+          </template>
+        </gradientButton>
+      </div>
+      <div class="btnItem style2" @click.stop="toProduct">Continue</div>
+    </div>
+  </div>
+  <!-- <div class="footer placeholder"></div> -->
+  <div class="loading-container" v-if="isGenerating || isLoading">
+    <GenerateLoading :title="loadingTitle" />
+  </div>
+  <StyleListDom ref="styleListVue"></StyleListDom>
 </template>
 <style lang="less" scoped>
-	.header-title {
+.header-title {
-		// --header-title-background: #f6f6f6;
+  // --header-title-background: #f6f6f6;
-	}
+}
-	.loading-container{
+.loading-container {
-		width: 100%;
+  width: 100%;
-		height: 100%;
+  height: 100%;
-		position: absolute;
+  position: absolute;
-		top: 50%;
+  top: 50%;
-		left: 50%;
+  left: 50%;
-		transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-		z-index: 2;
+  z-index: 2;
-		background-color: #fff;
+  background-color: #fff;
-		display: flex;
+  display: flex;
-		align-items: center;
+  align-items: center;
-		justify-content: center;
+  justify-content: center;
-	}
+}
-	.selectStyle{
+.selectStyle {
-		width: 100%;
+  width: 100%;
-		flex: 1;
+  flex: 1;
-		// height: 100%;
+  // height: 100%;
-		position: relative;
+  position: relative;
-		display: flex;
+  display: flex;
-		flex-direction: column;
+  flex-direction: column;
-		background-color: #f6f6f6;
+  background-color: #f6f6f6;
-		overflow: hidden;
+  overflow: hidden;
-		> .text{
+  > .text {
-			text-align: center;
+    text-align: center;
-			width: 100%;
+    width: 100%;
-			margin-top: 8.5rem;
+    margin-top: 8.5rem;
-			margin-bottom: 8.5rem;
+    margin-bottom: 8.5rem;
-			> .title{
+    > .title {
-				font-family: satoshiBold;
+      font-family: satoshiBold;
-				font-weight: 700;
+      font-weight: 700;
-				font-size: 8.6rem;
+      font-size: 8.6rem;
-				line-height: 124%;
+      line-height: 124%;
-				color: #000;
+      color: #000;
-			}
+    }
-			> .info{
+    > .info {
-				font-size: 4rem;
+      font-size: 4rem;
-				font-weight: 400;
+      font-weight: 400;
-				line-height: 124%;
+      line-height: 124%;
-				margin-top: 3.2rem;
+      margin-top: 3.2rem;
-				color: rgba(0, 0, 0, 0.6);
+      color: rgba(0, 0, 0, 0.6);
-			}
+    }
-		}
+  }
-		.selectContent{
+  .selectContent {
-			// padding: 0 4rem;
+    // padding: 0 4rem;
-			margin: 0 auto;
+    margin: 0 auto;
-			width: 73.7rem;
+    width: 73.7rem;
-			margin-bottom: 19rem;
+    margin-bottom: 19rem;
-			> .imgBox{
+    > .imgBox {
-				height: 73.7rem;
+      height: 73.7rem;
-				width: 100%;
+      width: 100%;
-				margin-bottom: 5.6rem;
+      margin-bottom: 5.6rem;
-				> img{
+      > img {
-					width: 100%;
+        width: 100%;
-					height: 100%;
+        height: 100%;
-				}
+      }
-			}
+    }
-			> .chooseMore{
+    > .chooseMore {
-				--borderRadius: 5.4rem;
+      --borderRadius: 5.4rem;
-				--borderWidth: 2px;
+      --borderWidth: 2px;
-				width: 24.8rem;
+      width: 24.8rem;
-				margin: 0 auto;
+      margin: 0 auto;
-				height: 7.6rem;
+      height: 7.6rem;
-				.text{
+      .text {
-					font-size: 3.1rem;
+        font-size: 3.1rem;
-					color: #000;
+        color: #000;
-					font-family: satoshiMedium;
+        font-family: satoshiMedium;
-				}
+      }
-			}
+    }
-			> .btn{
+    > .btn {
-				display: flex;
+      display: flex;
-				align-items: center;
+      align-items: center;
-				justify-content: flex-end;
+      justify-content: flex-end;
-				gap: 2rem;
+      gap: 2rem;
-				> div{
+      > div {
-					color: #000;
+        color: #000;
-					border-radius: 50%;
+        border-radius: 50%;
-					width: 7rem;
+        width: 7rem;
-					height: 7rem;
+        height: 7rem;
-					padding: 1rem;
+        padding: 1rem;
-					background-color: #fff;
+        background-color: #fff;
-					&:hover{
+        &:hover {
-						color: #000;
+          color: #000;
-					}
+        }
-				}
+      }
-			}
+    }
-		}
+  }
-		> .btn{
+  > .btn {
-			display: flex;
+    display: flex;
-			gap: 6.6rem;
+    gap: 6.6rem;
-			justify-content: center;
+    justify-content: center;
-			> div {
+    > div {
-				border-radius: .96rem;
+      border-radius: 0.96rem;
-				width: 33.7rem;
+      width: 33.7rem;
-				font-size: 4.8rem;
+      font-size: 4.8rem;
-				font-family: satoshiMedium;
+      font-family: satoshiMedium;
-				line-height: 9.2rem;
+      line-height: 9.2rem;
-				display: flex;
+      display: flex;
-				justify-content: center;
+      justify-content: center;
-				&.style1{
+      &.style1 {
-					--borderRadius: .96rem;
+        --borderRadius: 0.96rem;
-					--borderWidth: 2px;
+        --borderWidth: 2px;
-					.text{
+        .text {
-						width: 100%;
+          width: 100%;
-						text-align: center;
+          text-align: center;
-						> .icon{
+          > .icon {
-							left: 4rem;
+            left: 4rem;
-							top: 50%;
+            top: 50%;
-							transform: translateY(-50%);
+            transform: translateY(-50%);
-							position: absolute;
+            position: absolute;
-						}
+          }
-					}
+        }
-				}
+      }
-				&.style2{
+      &.style2 {
-					color: #fff;	
+        color: #fff;
-					background-color: #000;
+        background-color: #000;
-				}
+      }
-			}
+    }
-			.btnItem .text{
+    .btnItem .text {
-				color: #000;
+      color: #000;
-			}
+    }
-		}
+  }
-	}
+}
-</style>
+</style>

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%;
+    //         width: 100%;
-            padding: 0;
+    //         padding: 0;
-          }
+    //       }
-          :deep(.visualizer-container) {
+    //       :deep(.visualizer-container) {
-            height: 100%;
+    //         height: 100%;
-          }
+    //       }
-        }
+    //     }
-        .input-item {
+    //     .input-item {
-          // width: 100%;
+    //       // width: 100%;
-          height: 100%;
+    //       height: 100%;
-          outline: none;
+    //       outline: none;
-          border: none;
+    //       border: none;
-          background-color: #efefef;
+    //       background-color: #efefef;
-        }
+    //     }
-        .audio-icon {
+    //     .audio-icon {
-          width: initial;
+    //       width: initial;
-        }
+    //     }
-      }
+    //   }
-      .send {
+    //   .send {
-        width: 7.6rem;
+    //     width: 7.6rem;
-        height: 7.6rem;
+    //     height: 7.6rem;
-        background-color: #efefef;
+    //     background-color: #efefef;
-        border-radius: 1rem;
+    //     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()
@@ -79,16 +83,16 @@ const stylists = ref<any[]>([
     value: 'crystal',
     name: 'Crystal',
     description: 'Contemporary, Classic, Simple Silhouettes, Statement Pieces',
-    image: female,
+    image: Crystal,
-    thumb: femaleThumb
+    thumb: CrystalThumb
   },
   {
     id: 2,
     value: 'mini',
     name: 'Mini',
     description: 'Modern, Edgy, Bold Colors, Street Style',
-    image: male,
+    image: mini,
-    thumb: maleThumb
+    thumb: miniThumb
   },
   {
     id: 3,

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: {