feat: 聊天页面

src/views/asistant/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="asistant-container flex flex-column">
+    <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">
+      <ChatLoading />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+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 { ref, onMounted } from 'vue'
+
+// 定义NoticeList组件引用类型
+interface NoticeListRef {
+  simulateSendMessage: () => void
+}
+
+const isLoading = ref<boolean>(false)
+const noticeListRef = ref<NoticeListRef | null>(null)
+
+onMounted(() => {
+  // handleSendMessage('123')
+})
+
+const handleSendMessage = (message: string): void => {
+  console.log('收到消息:', message)
+  // 显示loading状态
+  isLoading.value = true
+  
+  // 模拟请求延迟
+  setTimeout(() => {
+    // 调用NoticeList的方法添加新消息
+    if (noticeListRef.value) {
+      noticeListRef.value.simulateSendMessage()
+    }
+    // 隐藏loading状态
+    isLoading.value = false
+  }, 10000) // 3秒后完成
+}
+</script>
+<style lang="less" scoped>
+.asistant-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  flex-shrink: 0;
+  
+  .continue {
+    font-family: 'satoshiRegular';
+    font-size: 3.6rem;
+    color: #fff;
+    text-align: right;
+    padding: 2.6rem 4.5rem;
+    .btn {
+      border-radius: 7px;
+      background-color: #000;
+      width: 24.6rem;
+      height: 5.9rem;
+    }
+  }
+}
+
+.loading-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+</style>
+