Merge branch 'master' of https://gitee.com/lvYeJu/lane-crawford-3

src/views/Workshop/selectModelContinue.vue

@@ -3,38 +3,47 @@ import { onMounted, onUnmounted, reactive, toRefs } from "vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
+import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
 const router = useRouter()
 //const props = defineProps({
 //})
 const emit = defineEmits(['view-type'])
-// let data = reactive({
-// 	modelList: 
-// 	[
+let data = reactive({
+	modelList: 
+	[
 
-// 	],
-// 	selectedModelId: null,
-// })
+	],
+	isLoading: false,
+})
 
 // const setSelectedModelId = (item)=>{
 // 	data.selectedModelId = item.id;
 // }
 
+
 const onContinue = ()=>{
 	router.push('uploadFace')
+}
 
+const changeModel = ()=>{
+	router.push('selectModel')
 }
 
 onMounted(() => {
 	emit('view-type', 1)
+	data.isLoading = true;
+	setTimeout(()=>{
+		data.isLoading = false;
+	}, 2000)
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-// const { modelList, selectedModelId } = toRefs(data);
+const { isLoading } = toRefs(data);
 </script>
 <template>
 	<header-title style-type="2" />
-	<div class="selectModelContinue">
+	<div class="selectModelContinue" v-if="!isLoading">
 		<div class="text">
 			<div class="title">
 				Go with this Look?
@@ -58,12 +67,15 @@ defineExpose({})
 				</div>
 			</div>
 			<div class="again">
-				<div>Re-try?</div>
+				<div @click="changeModel">Change Model</div>
 				<div @click="onContinue">Continue</div>
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
+	<footer-navigation is-placeholder v-if="!isLoading"/>
+	<div class="loading-container" v-if="isLoading">
+		<GenerateLoading title="Generating Results..." />
+	</div>
 </template>
 <style lang="less" scoped>
 	.selectModelContinue{
@@ -157,4 +169,11 @@ defineExpose({})
 			}
 		}
 	}
+	.loading-container{
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #fff;
+	}
 </style>

src/views/Workshop/selectStyle.vue

@@ -66,8 +66,8 @@ let data = reactive({
 		
 	}
 })
-const toSelectModel = ()=>{
-	router.push({ path: 'selectModel' })
+const toSelectModelContinue = ()=>{
+	router.push({ path: 'selectModelContinue' })
 }
 onMounted(()=>{
 	emit('view-type', 1)
@@ -94,7 +94,7 @@ const { selectList, select } = toRefs(data);
 	</div>
 	<div class="footer placeholder"></div>
 	<div class="footer">
-		<button @click.stop="toSelectModel">Continue</button>
+		<button @click.stop="toSelectModelContinue">Continue</button>
 	</div>
 </template>
 <style lang="less" scoped>

src/views/asistant/components/AudioVisualizer.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 
 // 定义线条类型
 interface Line {
@@ -24,7 +24,6 @@ const containerRef = ref<HTMLElement>()
 const visualizerRef = ref<HTMLElement>()
 const lines = ref<Line[]>([])
 const isInitialized = ref<boolean>(false)
-let resizeObserver: ResizeObserver | null = null
 
 // 计算需要的线条数量
 const calculateLines = (): Line[] => {
@@ -102,6 +101,7 @@ const calculateLines = (): Line[] => {
 
 // 更新线条
 const updateLines = () => {
+  if (isInitialized.value) return
   const newLines = calculateLines()
   if (newLines.length > 0) {
     lines.value = newLines
@@ -114,11 +114,6 @@ defineExpose({
   updateLines
 })
 
-// 监听窗口大小变化
-const handleResize = () => {
-  updateLines()
-}
-
 onMounted(async () => {
   await nextTick()
 
@@ -138,28 +133,6 @@ onMounted(async () => {
       updateLines()
     }
   }, 150)
-
-  // 使用ResizeObserver监听容器大小变化，更精确地检测初始化时机
-  if (visualizerRef.value && window.ResizeObserver) {
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.contentRect.width > 50 && !isInitialized.value) {
-          updateLines()
-        }
-      }
-    })
-    resizeObserver.observe(visualizerRef.value)
-  }
-
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
 })
 </script>
 
@@ -170,7 +143,6 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   padding: 20px;
-  min-height: 200px;
   border-radius: 10px;
 }
 

src/views/asistant/components/GenerateLoading.vue

@@ -4,19 +4,23 @@
       <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
       <!-- 阴影效果 -->
       <div class="loading-shadow"></div>
-      <div class="loading-text">Analyzing the Outfit...</div>
+      <div class="loading-text">{{ title }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 // 这个组件只负责显示loading动画
-interface LoadingProps {
-  // 可以在这里定义props类型
-}
 
 // 定义组件props类型
-const props = defineProps<LoadingProps>()
+const props = defineProps({
+	title: {
+		type: String,
+		default: 'Analyzing the Outfit...'
+	}
+})
+
+
 </script>
 
 <style lang="less" scoped>

src/views/asistant/components/InputArea.vue

@@ -13,7 +13,8 @@
     <div class="input-container">
       <!-- 加号图标 -->
       <div class="icon-wrapper">
-        <SvgIcon name="plus" size="40" />
+        <SvgIcon v-if="!isRecording" name="plus" size="40" />
+        <SvgIcon v-else name="pause" size="60" @click="stopRecording" />
       </div>
 
       <!-- 分隔线 -->
@@ -97,12 +98,12 @@ const handleInput = (): void => {
   if (textareaRef.value) {
     textareaRef.value.style.height = 'auto'
 
-    // const lineHeight = 4.8 
+    // const lineHeight = 4.8
     // const maxLines = 3
     // const maxHeight = lineHeight * maxLines
 
     const scrollHeight = textareaRef.value.scrollHeight
-    // const newHeight = Math.min(scrollHeight, maxHeight * 10) 
+    // const newHeight = Math.min(scrollHeight, maxHeight * 10)
 
     textareaRef.value.style.height = `${scrollHeight}px`
   }
@@ -138,9 +139,6 @@ const handleClickAudio = async (): Promise<void> => {
         audioVisualizerRef.value.updateLines?.()
       }
     }, 50)
-  }
-
-  if (isRecording.value) {
     startRecording()
   } else {
     stopRecording()
@@ -174,7 +172,7 @@ const startRecording = () => {
   }
 
   // 识别结果
-  speechRecognition.onresult = (event) => {
+  speechRecognition.onresult = (event: any) => {
     let finalTranscript = ''
     let interimTranscript = ''
 
@@ -213,7 +211,7 @@ const startRecording = () => {
   }
 
   // 识别错误
-  speechRecognition.onerror = (event) => {
+  speechRecognition.onerror = (event: any) => {
     console.error('语音识别错误:', event.error)
     isRecording.value = false
     // alert('语音识别失败，请重试')
@@ -273,6 +271,7 @@ const stopRecording = () => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  color: #6d6868;
 
   &.send-icon {
     margin-left: 4.38rem;

src/views/asistant/components/NoticeList.vue

@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import NoticeItem from './NoticeItem.vue'
-import ChatLoading from './ChatLoading.vue'
+import GenerateLoading from './GenerateLoading.vue'
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 
 // 定义消息类型

src/views/asistant/index.vue

@@ -4,7 +4,7 @@
       <HeaderTitle hasSetting styleType="2" />
     </div>
     <div class="loading-container" v-if="isLoading">
-      <ChatLoading />
+      <GenerateLoading />
     </div>
     <template v-else>
       <div class="content flex-1" v-if="!isLoading">
@@ -23,7 +23,7 @@
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import NoticeList from './components/NoticeList.vue'
 import InputArea from './components/InputArea.vue'
-import ChatLoading from './components/ChatLoading.vue'
+import GenerateLoading from './components/GenerateLoading.vue'
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()