feat: 聊天界面调整

global.d.ts

@@ -134,6 +134,12 @@ declare global {
   }
 }
 
+declare module "*.vue" {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
 declare module "@store/*";
 declare module "@service/*";
 declare module "@utils/*";

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("添加附件");

src/renderer/views/home/components/ChatAvatar.vue

@@ -0,0 +1,13 @@
+<template>
+    <img class="w-9 h-9 rounded-full shrink-0" :src="src" />
+</template>
+
+<script setup lang="ts">
+interface Props {
+    src?: string
+}
+
+withDefaults(defineProps<Props>(), {
+    src: '@assets/images/login/blue_logo.png'
+})
+</script>

src/renderer/views/home/components/ChatOperation.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
+        <RiFileCopyLine size="16px" @click="copyFileClick()" />
+        <div class="flex items-center gap-4">
+            <RiShareForwardLine size="16px" @click="shareForwardClick()" />
+            <RiDownload2Line size="16px" @click="downloadClick()" />
+            <RiThumbUpLine size="16px" @click="thumbUpClick()" />
+            <RiThumbDownLine size="16px" @click="thumbDownClick()" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
+import { ChatMessage } from '../model/ChatModel';
+
+interface Props {
+  msg: ChatMessage
+}
+
+const { msg } = defineProps<Props>()
+
+/// actions 实现复制、分享、下载、点赞等功能
+const copyFileClick = () => {
+  console.log('copy file', msg)
+}
+
+const shareForwardClick = () => {
+  console.log('share forward', msg)
+}
+
+const downloadClick = () => {
+  console.log('download', msg)
+}
+
+const thumbUpClick = () => {
+  console.log('thumb up', msg)
+}
+
+const thumbDownClick = () => {
+  console.log('thumb down', msg)
+}
+
+</script>

src/renderer/views/home/model/ChatModel.ts

@@ -34,11 +34,11 @@ export class ChatMessage {
     toolCall?: any,
     question?: any
   ) {
-        this.messageId = messageId;
+    this.messageId = messageId;
     this.messageRole = messageRole;
     this.messageContent = messageContent;
-    this.finished = finished;
     this.isLoading = isLoading;
+    this.finished = finished;
     this.toolCall = toolCall;
     this.question = question;
   }