From 521d96b67383a3463080e7fac414130cce51c62e Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Tue, 13 Jan 2026 16:04:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=AD=E5=BB=BA=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/Layout/index.vue      |  2 +-
 src/renderer/views/home/ChatBox.vue           | 80 +++++++++++++++++++
 .../home/{MessageList.vue => ChatHistory.vue} |  3 +-
 src/renderer/views/home/HomeTab.vue           | 12 +--
 4 files changed, 90 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/views/home/ChatBox.vue
 rename src/renderer/views/home/{MessageList.vue => ChatHistory.vue} (97%)

diff --git a/src/renderer/components/Layout/index.vue b/src/renderer/components/Layout/index.vue
index f970d0d..87f6099 100644
--- a/src/renderer/components/Layout/index.vue
+++ b/src/renderer/components/Layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="bg-white box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
+  <main class="bg-[#f7f9fc] box-border w-full h-screen flex pt-[8px] pb-[8px] pl-[8px] ">
     <div class="flex-1 flex gap-[8px]">
       <div class="flex-1 h-full">
 
diff --git a/src/renderer/views/home/ChatBox.vue b/src/renderer/views/home/ChatBox.vue
new file mode 100644
index 0000000..2f38388
--- /dev/null
+++ b/src/renderer/views/home/ChatBox.vue
@@ -0,0 +1,80 @@
+<template>
+  <!-- 页面根 -->
+  <div class="h-full overflow-hidden flex flex-col">
+
+    <!-- 消息列表（唯一滚动区） -->
+    <div ref="listRef" class="flex-1 overflow-y-auto px-6 py-6 space-y-6">
+      <div v-for="msg in messages" :key="msg.id" class="flex items-start gap-3"
+        :class="msg.role === 'user' ? 'justify-end' : 'justify-start'">
+        <!-- AI avatar -->
+        <div v-if="msg.role === 'ai'"
+          class="w-9 h-9 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold shrink-0">
+          N
+        </div>
+
+        <!-- 气泡 -->
+        <div class="max-w-[70%]">
+          <div class="px-4 py-3 text-sm text-gray-700" :class="msg.role === 'user' ? 'bg-[#f7f9fc] rounded-md' : ''">
+            {{ msg.content }}
+          </div>
+
+          <!-- AI 标识 -->
+          <div v-if="msg.role === 'ai'" class="mt-1 text-xs text-gray-400 ">
+            本回答由 AI 生成
+          </div>
+        </div>
+
+        <!-- User avatar -->
+        <div v-if="msg.role === 'user'" class="w-9 h-9 rounded-full bg-blue-200 shrink-0"></div>
+      </div>
+    </div>
+
+    <!-- 输入区（固定底部，不滚） -->
+    <div class="shrink-0 px-6 py-4 gap-3">
+      <div class="inline-flex items-center justify-center w-[108px]
+                   px-3 py-1.5 rounded-2xl border border-[#E5E8EE]
+                   text-[13px] text-[#333]">
+        智能问数
+      </div>
+
+      <div class="h-[174px] bg-white rounded-lg border border-[#eef2f6]
+                   shadow-[0_1px_0_rgba(0,0,0,0.03)]
+                   p-[18px] mt-[8px] flex flex-col justify-between">
+        <textarea rows="2" placeholder="给我发布或者布置任务" class="flex-1 resize-none outline-none text-sm" />
+
+        <div class="flex justify-between items-center">
+          <button class="text-[#9fb0c4]">🔗</button>
+          <button class="bg-[#f1f6fb] px-2.5 py-1.5 rounded-md">
+            ✈
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Message = {
+  id: number
+  role: 'user' | 'ai'
+  content: string
+}
+
+const messages = ref<Message[]>(
+  Array.from({ length: 40 }).map((_, i) => ({
+    id: i,
+    role: i % 2 === 0 ? 'user' : 'ai',
+    content:
+      i % 2 === 0
+        ? '这里是一段用户输入的消息，用于测试滚动效果。'.repeat(
+          (i % 3) + 1
+        )
+        : '这里是一段 AI 回复的内容，用于测试长文本下的滚动体验。'.repeat(
+          (i % 4) + 1
+        ),
+  }))
+)
+</script>
diff --git a/src/renderer/views/home/MessageList.vue b/src/renderer/views/home/ChatHistory.vue
similarity index 97%
rename from src/renderer/views/home/MessageList.vue
rename to src/renderer/views/home/ChatHistory.vue
index 717237a..9f47b93 100644
--- a/src/renderer/views/home/MessageList.vue
+++ b/src/renderer/views/home/ChatHistory.vue
@@ -15,7 +15,7 @@
 			<section v-for="group in groups" :key="group.title" class="mb-3">
 				<div class="flex items-center justify-between text-sm text-gray-500 py-2">
 					<span>{{ group.title }}</span>
-					<span class="text-gray-400 mr-4">▾</span>
+					<RiArrowDownSLine />
 				</div>
 
 				<ul class="list-none p-1 mr-4">
@@ -38,6 +38,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
 
 const selectedId = ref<number | null>(2)
 
diff --git a/src/renderer/views/home/HomeTab.vue b/src/renderer/views/home/HomeTab.vue
index 79dd20a..5e31d0d 100644
--- a/src/renderer/views/home/HomeTab.vue
+++ b/src/renderer/views/home/HomeTab.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="bg-white h-full w-full p-[20px]">
+  <div class="bg-[#f7f9fc] h-full w-full px-[20px]">
     <div class="flex h-full w-full flex-col md:flex-row">
-      <message-list class="flex-none w-64" />
-      <div class="flex-1 overflow-auto p-5">
-        <chat-guide />
+      <chat-history class="flex-none w-64" />
+      <div class="flex-1 overflow-auto px-5 bg-white rounded-xl">
+        <!-- <chat-guide /> -->
+        <chat-box />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import MessageList from './MessageList.vue'
+import ChatHistory from './ChatHistory.vue'
 import ChatGuide from './ChatGuide.vue'
+import ChatBox from './ChatBox.vue'
 </script>