feat: 聊天页面

src/views/asistant/components/NoticeList.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="chat-list">
+    <div class="chat-message-item" v-for="message in chatMessages" :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'
+
+// 定义消息类型
+interface ChatMessage {
+  id: string
+  content: string
+  userId: string
+  time: string
+  thumb: string
+}
+
+// 定义组件暴露的方法类型
+interface NoticeListExpose {
+  simulateSendMessage: () => void
+}
+
+const isLoading = ref<boolean>(false)
+let loadingTimer: any = null
+
+const chatMessages = 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'
+  }
+])
+
+const handleSendMessage = (message: string): void => {
+  console.log('list发送消息:', 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>
+
+<style lang="less" scoped>
+.chat-list {
+  padding: 16px;
+  background-color: #fff;
+  height: 100%;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.chat-message-item {
+  margin-bottom: 4.84rem;
+}
+</style>