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

src/views/asistant/components/AudioVisualizer.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="audio-visualizer" ref="containerRef">
+    <div class="visualizer-container" ref="visualizerRef">
+      <div v-for="(line, index) in lines" :key="index" :class="['line', `line-${line.type}`]"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+// 定义线条类型
+interface Line {
+  type: 1 | 2 | 3
+}
+
+const containerRef = ref<HTMLElement>()
+const visualizerRef = ref<HTMLElement>()
+const lines = ref<Line[]>([])
+
+// 计算需要的线条数量
+const calculateLines = (): Line[] => {
+  if (!visualizerRef.value) return []
+
+  const containerWidth = visualizerRef.value.offsetWidth
+  const lineWidth = 0.96 // 每条线的宽度 (rem)
+  const gap = 0.96 // 线条之间的间距 (rem)
+
+  const remToPx = 10
+  const lineWidthPx = lineWidth * remToPx
+  const gapPx = gap * remToPx
+
+  // 计算能容纳多少条线
+  const availableWidth = containerWidth
+  const lineWithGap = lineWidthPx + gapPx
+  const maxLines = Math.floor(availableWidth / lineWithGap)
+
+  const generatedLines: Line[] = []
+
+  // 基础模式：3条1号线 → 1条2号线 → 1条3号线 → 1条2号线 → 4条1号线
+  const basePattern: Line[] = [
+    { type: 1 },
+    { type: 1 },
+    { type: 1 }, // 3条1号线
+    { type: 2 }, // 1条2号线
+    { type: 3 }, // 1条3号线
+    { type: 2 }, // 1条2号线
+    { type: 1 },
+    { type: 1 },
+    { type: 1 },
+    { type: 1 } // 4条1号线
+  ]
+
+  // 重复模式：1条2号线 → 1条3号线 → 1条2号线 → 4条1号线
+  const repeatPattern: Line[] = [
+    { type: 2 }, // 1条2号线
+    { type: 3 }, // 1条3号线
+    { type: 2 }, // 1条2号线
+    { type: 1 },
+    { type: 1 },
+    { type: 1 },
+    { type: 1 } // 4条1号线
+  ]
+
+  // 先添加基础模式
+  generatedLines.push(...basePattern)
+
+  // 然后重复添加模式直到填满容器
+  let currentIndex = basePattern.length
+  while (currentIndex < maxLines) {
+    const remainingSpace = maxLines - currentIndex
+    if (remainingSpace >= repeatPattern.length) {
+      generatedLines.push(...repeatPattern)
+      currentIndex += repeatPattern.length
+    } else {
+      // 如果剩余空间不够一个完整模式，就用1号线填充
+      for (let i = 0; i < remainingSpace; i++) {
+        generatedLines.push({ type: 1 })
+      }
+      break
+    }
+  }
+
+  return generatedLines
+}
+
+// 更新线条
+const updateLines = () => {
+  lines.value = calculateLines()
+}
+
+// 监听窗口大小变化
+const handleResize = () => {
+  updateLines()
+}
+
+onMounted(async () => {
+  await nextTick()
+  updateLines()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.audio-visualizer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  min-height: 200px;
+  border-radius: 10px;
+}
+
+.visualizer-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.96rem;
+  height: 120px;
+  flex-wrap: nowrap;
+}
+
+.line {
+  background: linear-gradient(0deg, #b5b5b5, #b5b5b5),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+  border-radius: 20px;
+}
+
+/* 1号线 - 最短 */
+.line-1 {
+  width: 0.96rem;
+  height: 2.42rem;
+}
+
+/* 2号线 - 稍长 */
+.line-2 {
+  width: 0.96rem;
+  height: 3.87rem;
+}
+
+/* 3号线 - 最长 */
+.line-3 {
+  width: 0.96rem;
+  height: 6.29rem;
+}
+</style>

src/views/asistant/components/InputArea.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="input-area">
+    <div class="shortcut-container flex">
+      <div
+        class="shortcut-item flex flex-center"
+        v-for="item in shortcutList"
+        :key="item"
+        @click="handleShortcut(item)"
+      >
+        {{ item }}
+      </div>
+    </div>
     <div class="input-container">
       <!-- 加号图标 -->
       <div class="icon-wrapper">
@@ -9,19 +19,25 @@
       <!-- 分隔线 -->
       <div class="divider"></div>
 
-      <!-- 输入框 -->
+      <!-- 正常状态：显示输入框 -->
       <div class="input-wrapper">
         <input
+          v-show="!isRecording"
           v-model="inputValue"
           type="text"
           placeholder="Ask anything about your desired outfit"
           class="text-input"
           @keyup.enter="handleSend"
         />
+        <div v-show="isRecording" class="recording-wrapper">
+          <!-- <div class="recording-animation"> -->
+          <AudioVisualizer />
+          <!-- </div> -->
+        </div>
       </div>
 
       <!-- 语音图标 -->
-      <div class="icon-wrapper">
+      <div class="icon-wrapper" v-show="!isRecording" @click="handleClickAudio">
         <SvgIcon name="audio" size="52" />
       </div>
 
@@ -34,16 +50,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import SvgIcon from '@/components/SvgIcon/index.vue'
+import { ref, onUnmounted } from 'vue'
+import AudioVisualizer from './AudioVisualizer.vue'
 
-interface InputAreaEmits {
-  'send-message': [message: string]
-}
+const emit = defineEmits(['send-message'])
 
 const inputValue = ref<string>('')
-
-const emit = defineEmits<InputAreaEmits>()
+const isRecording = ref<boolean>(false)
+const shortcutList: string[] = [
+  'Suggest shoe styles',
+  'Recommend evening bags',
+  'Suggest accessory combinations',
+  'Suggest color combinations',
+  'Suggest fabric combinations',
+  'Suggest style combinations'
+]
 
 const handleSend = (): void => {
   if (inputValue.value.trim()) {
@@ -52,12 +73,142 @@ const handleSend = (): void => {
     inputValue.value = ''
   }
 }
+
+const handleShortcut = (item: string): void => {
+  inputValue.value = item
+}
+
+// 语音识别相关变量
+let speechRecognition = null
+let lastTranscript = '' // 用于防重复
+
+onUnmounted(() => {
+  if (speechRecognition) {
+    speechRecognition = null
+  }
+})
+
+const handleClickAudio = (): void => {
+  isRecording.value = !isRecording.value
+
+  if (isRecording.value) {
+    startRecording()
+  } else {
+    stopRecording()
+  }
+}
+
+// 开始语音识别
+const startRecording = () => {
+  if (!speechRecognition) {
+    // 检查浏览器支持
+    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+      alert('您的浏览器不支持语音识别功能')
+      return
+    }
+
+    // 创建语音识别对象
+    const SpeechRecognition =
+      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+    speechRecognition = new SpeechRecognition()
+
+    // 配置参数
+    speechRecognition.continuous = true
+    speechRecognition.interimResults = true
+    speechRecognition.lang = 'zh-CN' // 设置为中文
+  }
+
+  // 识别开始
+  speechRecognition.onstart = () => {
+    console.log('开始语音识别')
+    isRecording.value = true
+  }
+
+  // 识别结果
+  speechRecognition.onresult = (event) => {
+    let finalTranscript = ''
+    let interimTranscript = ''
+
+    // 处理所有识别结果
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript
+      if (event.results[i].isFinal) {
+        finalTranscript += transcript
+      } else {
+        interimTranscript += transcript
+      }
+    }
+
+    // 只处理最终结果，避免重复
+    if (finalTranscript && finalTranscript !== lastTranscript) {
+      console.log('最终识别结果:', finalTranscript)
+      lastTranscript = finalTranscript
+
+      // 将识别结果填入输入框并发送
+      inputValue.value = finalTranscript
+      // emit('send-message', finalTranscript)
+    }
+
+    // 显示临时结果（可选）
+    if (interimTranscript) {
+      console.log('临时识别结果:', interimTranscript)
+    }
+  }
+
+  // 识别结束
+  speechRecognition.onend = () => {
+    console.log('语音识别结束')
+    isRecording.value = false
+    // 清空防重复变量
+    lastTranscript = ''
+  }
+
+  // 识别错误
+  speechRecognition.onerror = (event) => {
+    console.error('语音识别错误:', event.error)
+    isRecording.value = false
+    alert('语音识别失败，请重试')
+  }
+
+  // 开始识别
+  speechRecognition.start()
+}
+
+// 停止语音识别
+const stopRecording = () => {
+  if (speechRecognition && isRecording.value) {
+    speechRecognition.stop()
+    isRecording.value = false
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .input-area {
   background-color: #fff;
 }
+.shortcut-container {
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  padding: 0 4.4rem;
+  column-gap: 1.2rem;
+  margin-bottom: 2.84rem;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .shortcut-item {
+    font-size: 4.2rem;
+    width: fit-content;
+    font-family: 'robotoBold';
+    white-space: nowrap;
+    height: 8.1rem;
+    line-height: 8.1rem;
+    padding: 2.2rem 2.8rem;
+    color: #6d6868;
+    background-color: #efefef;
+    border-radius: 2rem;
+  }
+}
 
 .input-container {
   display: flex;
@@ -122,4 +273,28 @@ const handleSend = (): void => {
     fill: #6d6868;
   }
 }
+
+// 录制状态样式
+.recording-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.recording-animation {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.recording-text {
+  font-family: 'robotoBold';
+  font-size: 2.8rem;
+  color: #6d6868;
+  letter-spacing: 0.02em;
+}
 </style>

src/views/asistant/index.vue

@@ -3,19 +3,20 @@
     <div class="header">
       <HeaderTitle light hasSetting />
     </div>
-    <div class="content flex-1" v-if="!isLoading">
-      <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
-    </div>
-    <div class="footer" v-if="!isLoading">
-      <InputArea @send-message="handleSendMessage" />
-      <div class="continue">
-        <button class="btn">Continue</button>
-      </div>
-    </div>
-    <!-- Loading状态时显示loading组件 -->
-    <div v-if="isLoading" class="loading-wrapper">
+    <div class="loading-container" v-if="isLoading">
       <ChatLoading />
     </div>
+    <template v-else>
+      <div class="content flex-1" v-if="!isLoading">
+        <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
+      </div>
+      <div class="footer" v-if="!isLoading">
+        <InputArea @send-message="handleSendMessage" />
+        <div class="continue">
+          <button class="btn">Continue</button>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -41,7 +42,7 @@ const handleSendMessage = (message: string): void => {
   console.log('收到消息:', message)
   // 显示loading状态
   isLoading.value = true
-  
+
   // 模拟请求延迟
   setTimeout(() => {
     // 调用NoticeList的方法添加新消息
@@ -71,7 +72,7 @@ const handleSendMessage = (message: string): void => {
 
 .footer {
   flex-shrink: 0;
-  
+
   .continue {
     font-family: 'satoshiRegular';
     font-size: 3.6rem;
@@ -87,7 +88,7 @@ const handleSendMessage = (message: string): void => {
   }
 }
 
-.loading-wrapper {
+.loading-container {
   flex: 1;
   display: flex;
   align-items: center;
@@ -95,4 +96,3 @@ const handleSendMessage = (message: string): void => {
   background-color: #fff;
 }
 </style>
-

src/views/login/LoginPage.vue

@@ -117,16 +117,6 @@ const validateForm = () => {
   return isValid
 }
 
-// 计算属性：表单是否有效
-const isFormValid = computed(() => {
-  return (
-    formData.email &&
-    formData.password &&
-    validateEmail(formData.email) &&
-    validatePassword(formData.password)
-  )
-})
-
 // 返回上一页
 const goBack = () => {
   router.go(-1)
@@ -151,7 +141,7 @@ const handleLogin = async () => {
     showToast('登录成功')
 
     // 登录成功后跳转到主页或工作台
-    router.push('/workshop')
+    router.push('/stylist/customer')
   } catch (error) {
     console.error('登录失败:', error)
     showToast('登录失败，请重试')

src/views/stylist/customer.vue

@@ -40,6 +40,9 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
 type PageMode = 'form' | 'entry'
 const pageMode = ref<PageMode>('entry')
 
@@ -49,6 +52,7 @@ const handleChangeMode = (mode: PageMode) => {
 
 const handleConfirm = () => {
   console.log('handleConfirm')
+  router.push('/stylist/index')
 }
 </script>
 <style lang="less" scoped>

src/views/stylist/dressfor.vue

@@ -7,8 +7,12 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
 const handleStart = () => {
   console.log('click start')
+  router.push('/asistant')
 }
 </script>
 <style lang="less" scoped>

src/views/stylist/index.vue

@@ -121,7 +121,7 @@ const handleClickStylist = (item: any) => {
 
 const handleContinue = () => {
   // 跳转到下一个页面
-  router.push('/workshop')
+  router.push('/stylist/sex')
 }
 
 // 监听showVideo变化，关闭时暂停视频

src/views/stylist/sex.vue

@@ -17,6 +17,9 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
 const options = ref<any[]>([
   { label: 'Female', value: '1' },
   { label: 'Male', value: '0' }
@@ -24,6 +27,7 @@ const options = ref<any[]>([
 
 const handleSelect = (value: string) => {
   console.log(value)
+  router.push('/stylist/dressfor')
 }
 </script>
 <style lang="less" scoped>