feat: 聊天列表自动滚动到底部&跳转下一步

src/views/asistant/components/AudioVisualizer.vue

@@ -30,10 +30,11 @@ const calculateLines = (): Line[] => {
   const lineWidthPx = lineWidth * remToPx
   const gapPx = gap * remToPx
 
-  // 计算能容纳多少条线
+  // 为了创建无缝滚动效果，我们需要生成两倍的内容
+  // 这样当滚动到50%时，内容看起来和开始一样
   const availableWidth = containerWidth
   const lineWithGap = lineWidthPx + gapPx
-  const maxLines = Math.floor(availableWidth / lineWithGap)
+  const linesNeeded = Math.ceil(availableWidth / lineWithGap)
 
   const generatedLines: Line[] = []
 
@@ -62,25 +63,29 @@ const calculateLines = (): Line[] => {
     { type: 1 } // 4条1号线
   ]
 
-  // 先添加基础模式
+  // 生成一个完整周期的内容
-  generatedLines.push(...basePattern)
+  const oneCycle: Line[] = []
-
+  oneCycle.push(...basePattern)
-  // 然后重复添加模式直到填满容器
+  
+  // 添加重复模式直到填满一个周期
   let currentIndex = basePattern.length
-  while (currentIndex < maxLines) {
+  while (currentIndex < linesNeeded) {
-    const remainingSpace = maxLines - currentIndex
+    const remainingSpace = linesNeeded - currentIndex
     if (remainingSpace >= repeatPattern.length) {
-      generatedLines.push(...repeatPattern)
+      oneCycle.push(...repeatPattern)
       currentIndex += repeatPattern.length
     } else {
-      // 如果剩余空间不够一个完整模式，就用1号线填充
+      // 如果剩余空间不够一个完整模式，就添加部分模式
       for (let i = 0; i < remainingSpace; i++) {
-        generatedLines.push({ type: 1 })
+        oneCycle.push(repeatPattern[i % repeatPattern.length])
       }
       break
     }
   }
 
+  // 复制内容，创建两倍的内容用于无缝循环
+  generatedLines.push(...oneCycle, ...oneCycle)
+
   return generatedLines
 }
 
@@ -124,6 +129,18 @@ onUnmounted(() => {
   gap: 0.96rem;
   height: 120px;
   flex-wrap: nowrap;
+  animation: scrollLeft 3.75s linear infinite;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+@keyframes scrollLeft {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
 }
 
 .line {

src/views/asistant/components/InputArea.vue

@@ -22,6 +22,7 @@
       <!-- 正常状态：显示输入框 -->
       <div class="input-wrapper">
         <input
+          id="textarea"
           v-show="!isRecording"
           v-model="inputValue"
           type="text"
@@ -241,10 +242,16 @@ const stopRecording = () => {
   flex: 1;
   display: flex;
   align-items: center;
+  overflow: hidden;
+  // height: 100%;
 }
 
 .text-input {
   width: 100%;
+  // height: 100%;
+  height: auto;
+  // min-height: 4.8rem;
+  // max-height: 100%;
   border: none;
   outline: none;
   background: transparent;
@@ -255,6 +262,7 @@ const stopRecording = () => {
   // padding-right: 2rem;
   margin-right: 4.21rem;
   color: #000;
+  // resize: none;
 
   &::placeholder {
     color: #888;
@@ -262,6 +270,7 @@ const stopRecording = () => {
     font-weight: 400;
     font-family: 'robotoBold';
     word-spacing: -5px;
+    line-height: 4.8rem;
   }
 }
 

src/views/asistant/components/NoticeList.vue

@@ -1,19 +1,15 @@
 <template>
-  <div class="chat-list">
+  <div class="chat-list" ref="chatListRef">
-    <div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
+    <div class="chat-message-item" v-for="message in list" :key="message.id">
       <NoticeItem :value="message" @send-message="handleSendMessage" />
     </div>
-    <!-- Loading效果 -->
-    <div v-if="isLoading" class="chat-message-item">
-      <ChatLoading />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import NoticeItem from './NoticeItem.vue'
 import ChatLoading from './ChatLoading.vue'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 
 // 定义消息类型
 interface ChatMessage {
@@ -23,68 +19,37 @@ interface ChatMessage {
   time: string
   thumb: string
 }
+const props = defineProps<{
+  list: ChatMessage[]
+}>()
 
-// 定义组件暴露的方法类型
+const emits = defineEmits(['send-message'])
-interface NoticeListExpose {
+
-  simulateSendMessage: () => void
+const chatListRef = ref<HTMLElement>()
+
+// 自动滚动到底部
+const scrollToBottom = (): void => {
+  if (chatListRef.value) {
+    chatListRef.value.scrollTo({
+      top: chatListRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
+  }
 }
 
-const isLoading = ref<boolean>(false)
+// 监听消息列表变化，自动滚动到底部
-let loadingTimer: any = null
+watch(
-
+  () => props.list,
-const chatMessages = ref<ChatMessage[]>([
+  async () => {
-  {
+    await nextTick()
-    id: '1',
+    scrollToBottom()
-    content: 'I want a chic outfit for dinner.',
-    userId: '1',
-    time: '14:30',
-    thumb: ''
   },
-  {
+  { deep: true }
-    id: '2',
+)
-    content:
-      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
-    userId: '2',
-    time: '14:31',
-    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-  },
-  {
-    id: '3',
-    content: "It's a romantic date, and I prefer classic elegance.",
-    userId: '1',
-    time: '14:32',
-    thumb: ''
-  },
-  {
-    id: '4',
-    content:
-      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
-    userId: '2',
-    time: '14:33',
-    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-  }
-])
 
 const handleSendMessage = (message: string): void => {
   console.log('list发送消息:', message)
-}
+  emits('send-message', message)
-
-const simulateSendMessage = (): void => {
-  isLoading.value = true
-
-  loadingTimer = setTimeout(() => {
-    const newMessage: ChatMessage = {
-      id: Date.now().toString(),
-      content:
-        "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
-      userId: '2',
-      time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
-      thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
-    }
-
-    chatMessages.value.push(newMessage)
-    isLoading.value = false
-  }, 3000)
 }
 </script>
 

src/views/asistant/index.vue

@@ -8,12 +8,12 @@
     </div>
     <template v-else>
       <div class="content flex-1" v-if="!isLoading">
-        <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
+        <NoticeList ref="noticeListRef" :list="messageList" @send-message="handleSendMessage" />
       </div>
       <div class="footer" v-if="!isLoading">
         <InputArea @send-message="handleSendMessage" />
         <div class="continue">
-          <button class="btn">Continue</button>
+          <button class="btn" @click="handleContinue">Continue</button>
         </div>
       </div>
     </template>
@@ -25,33 +25,103 @@ import NoticeList from './components/NoticeList.vue'
 import InputArea from './components/InputArea.vue'
 import ChatLoading from './components/ChatLoading.vue'
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 // 定义NoticeList组件引用类型
 interface NoticeListRef {
   simulateSendMessage: () => void
 }
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
 
 const isLoading = ref<boolean>(false)
 const noticeListRef = ref<NoticeListRef | null>(null)
+const messageList = ref<ChatMessage[]>([
+  {
+    id: '1',
+    content: 'I want a chic outfit for dinner.',
+    userId: '1',
+    time: '14:30',
+    thumb: ''
+  },
+  {
+    id: '2',
+    content:
+      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
+    userId: '2',
+    time: '14:31',
+    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  },
+  {
+    id: '3',
+    content: "It's a romantic date, and I prefer classic elegance.",
+    userId: '1',
+    time: '14:32',
+    thumb: ''
+  },
+  {
+    id: '4',
+    content:
+      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
+    userId: '2',
+    time: '14:33',
+    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  }
+])
 
 onMounted(() => {
   // handleSendMessage('123')
 })
 
+let loadingTimer: any = null
 const handleSendMessage = (message: string): void => {
   console.log('收到消息:', message)
-  // 显示loading状态
+  messageList.value.push({
-  isLoading.value = true
+    id: '1',
+    content: message,
+    userId: '1',
+    time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+    thumb: ''
+  })
+  //
 
   // 模拟请求延迟
+  // setTimeout(() => {
+  //   // 调用NoticeList的方法添加新消息
+  //   if (noticeListRef.value) {
+  //     isLoading.value = true
+
+  //     loadingTimer = setTimeout(() => {
+  //       const newMessage: ChatMessage = {
+  //         id: Date.now().toString(),
+  //         content:
+  //           "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.",
+  //         userId: '2',
+  //         time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+  //         thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
+  //       }
+  //       messageList.value.push(newMessage)
+  //       isLoading.value = false
+  //     }, 3000)
+  //   }
+  // }, 10000) // 3秒后完成
+}
+
+const handleContinue = () => {
+  // router.push('/workshop/selectStyle')
+  // 模拟接口之后再跳转
+  isLoading.value = true
   setTimeout(() => {
-    // 调用NoticeList的方法添加新消息
+    router.push('/workshop/selectStyle')
-    if (noticeListRef.value) {
+    // isLoading.value = false
-      noticeListRef.value.simulateSendMessage()
+  }, 1000)
-    }
-    // 隐藏loading状态
-    isLoading.value = false
-  }, 10000) // 3秒后完成
 }
 </script>
 <style lang="less" scoped>