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

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状态
-  isLoading.value = true
+  messageList.value.push({
+    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的方法添加新消息
-    if (noticeListRef.value) {
-      noticeListRef.value.simulateSendMessage()
-    }
-    // 隐藏loading状态
-    isLoading.value = false
-  }, 10000) // 3秒后完成
+    router.push('/workshop/selectStyle')
+    // isLoading.value = false
+  }, 1000)
 }
 </script>
 <style lang="less" scoped>