feat: 消息页面的样式调整

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>