From 023d5569770cb83bae130e3fe86f4a2864503adb Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Tue, 13 Jan 2026 22:45:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E6=81=AF=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/views/home/ChatBox.vue | 52 +++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/renderer/views/home/ChatBox.vue b/src/renderer/views/home/ChatBox.vue
index 93cb186..c260540 100644
--- a/src/renderer/views/home/ChatBox.vue
+++ b/src/renderer/views/home/ChatBox.vue
@@ -6,26 +6,40 @@
     <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>
+        <img v-if="msg.role === 'ai'" class="w-9 h-9 rounded-full shrink-0" src="@assets/images/login/blue_logo.png" /> 
 
-        <!-- 气泡 -->
+        <!-- 消息气泡 -->
         <div class="max-w-[70%]">
-          <div class="px-4 py-3 text-sm text-gray-700" :class="msg.role === 'user' ? 'bg-[#f7f9fc] rounded-md' : ''">
+          <div class="flex items-start gap-2 pt-0.5 mb-2" :class="msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'">
+            <span class="text-xs text-[#4E5969]"> ZHINIAN</span>
+            <span class="text-xs text-[#86909C]"> 20:30</span>
+          </div>
+          <div class="text-sm text-gray-700" :class="msg.role === 'user' ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
             {{ msg.content }}
           </div>
 
           <!-- AI 标识 -->
-          <div v-if="msg.role === 'ai'" class="mt-1 text-xs text-gray-400 ">
+          <div v-if="msg.role === 'ai'" class="mt-2 text-xs text-gray-400 ">
             本回答由 AI 生成
           </div>
+
+          <!-- AI 操作按钮 -->
+          <div v-if="msg.role === 'ai'" class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
+            <RiFileCopyLine size="16px" @click="copyFileClick(msg)" />
+            <div class="flex items-center gap-4">
+              <RiShareForwardLine size="16px" @click="shareForwardClick(msg)"/>
+              <RiDownload2Line size="16px" @click="downloadClick(msg)" />
+              <RiThumbUpLine size="16px" @click="thumbUpClick(msg)" />
+              <RiThumbDownLine size="16px" @click="thumbDownClick(msg)" />
+            </div>
+
+          </div>
         </div>
 
         <!-- User avatar -->
-        <div v-if="msg.role === 'user'" class="w-9 h-9 rounded-full bg-blue-200 shrink-0"></div>
+        <img v-if="msg.role === 'user'" class="w-9 h-9 rounded-full shrink-0" src="@assets/images/login/user_icon.png" />
       </div>
     </div>
 
@@ -58,8 +72,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RiLink, RiSendPlaneFill } from '@remixicon/vue'
-
+import { RiLink, RiSendPlaneFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
 
 type Message = {
   id: number
@@ -81,4 +94,23 @@ const messages = ref<Message[]>(
         ),
   }))
 )
+
+/// actions 实现复制、分享、下载、点赞等功能
+const copyFileClick = (msg: Message) => {
+  console.log('copy file', msg)
+} 
+const shareForwardClick = (msg: Message) => {
+  console.log('share forward', msg)
+}
+const downloadClick = (msg: Message) => {
+  console.log('download', msg)
+}
+const thumbUpClick = (msg: Message) => {  
+  console.log('thumb up', msg)
+}
+const thumbDownClick = (msg: Message) => {
+  console.log('thumb down', msg)
+} 
+
+
 </script>