feat: 聊天界面调整

src/renderer/views/home/ChatBox.vue

@@ -8,8 +8,7 @@
         :class="msg.messageRole === MessageRole.ME ? 'justify-end' : 'justify-start'">
 
         <!-- AI avatar -->
-        <img v-if="msg.messageRole === MessageRole.AI" class="w-9 h-9 rounded-full shrink-0"
-          src="@assets/images/login/blue_logo.png" />
+        <ChatAvatar v-if="msg.messageRole === MessageRole.AI" :src="aiAvatar" />
 
         <!-- 消息气泡 -->
         <div class="max-w-[70%]">
@@ -18,6 +17,7 @@
             <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.messageRole === MessageRole.ME ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
             {{ msg.messageContent }}
@@ -29,21 +29,11 @@
           </div>
 
           <!-- AI 操作按钮 -->
-          <div v-if="msg.messageRole === MessageRole.AI && msg.finished"
-            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>
+          <ChatOperation v-if="msg.messageRole === MessageRole.AI && msg.finished" :msg="msg" /> 
         </div>
 
         <!-- User avatar -->
-        <img v-if="msg.messageRole === MessageRole.ME" class="w-9 h-9 rounded-full shrink-0"
-          src="@assets/images/login/user_icon.png" />
+        <ChatAvatar v-if="msg.messageRole === MessageRole.ME" :src="userAvatar" />
       </div>
     </div>
 
@@ -84,9 +74,14 @@ import { onMounted, nextTick, onUnmounted } from "vue";
 import { WebSocketManager } from "@common/WebSocketManager";
 import { MessageRole, ChatMessage } from "./model/ChatModel";
 import { IdUtils } from "@common/index";
+import ChatAvatar from './components/ChatAvatar.vue';
+import ChatOperation from './components/ChatOperation.vue';
 
 import { Session } from '../../utils/storage';
 
+import userAvatar from '@assets/images/login/user_icon.png';
+import aiAvatar from '@assets/images/login/blue_logo.png';
+
 ///（控制滚动位置）
 const scrollTop = ref(99999);
 
@@ -161,24 +156,6 @@ const handleReplyInstruct = async (message: string, type: string) => {
   setTimeoutScrollToBottom();
 };
 
-
-/// actions 实现复制、分享、下载、点赞等功能
-const copyFileClick = (msg: ChatMessage) => {
-  console.log('copy file', msg)
-}
-const shareForwardClick = (msg: ChatMessage) => {
-  console.log('share forward', msg)
-}
-const downloadClick = (msg: ChatMessage) => {
-  console.log('download', msg)
-}
-const thumbUpClick = (msg: ChatMessage) => {
-  console.log('thumb up', msg)
-}
-const thumbDownClick = (msg: ChatMessage) => {
-  console.log('thumb down', msg)
-}
-
 /// 添加附件按钮事件
 const addAttachmentAction = () => {
   console.log("添加附件");