feat: 组件封装，音频保存

web/components.d.ts

@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('./src/components/avatar.vue')['default']
     Markdown: typeof import('./src/components/markdown.vue')['default']
+    Message_tools: typeof import('./src/components/MessageTools.vue')['default']
+    MessageTools: typeof import('./src/components/MessageTools.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']

web/src/components/MessageTools.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { Message } from "@/interfaces";
+
+import { DocumentDuplicateIcon } from "@/assets/Icons";
+import { copy } from "@/utils";
+
+const { msg } = defineProps<{
+  msg: Message;
+}>();
+</script>
+
+<template>
+  <div class="flex items-center gap-2 justify-end mt-2">
+    <div v-if="msg.role !== 'user'">
+      <tts :text="msg.content || ''" :message-id="msg.id!" />
+    </div>
+    <NPopover trigger="hover">
+      <template #trigger>
+        <NButton quaternary circle @click="copy(msg.content || '')">
+          <DocumentDuplicateIcon class="!w-4 !h-4" />
+        </NButton>
+      </template>
+      <span>复制内容</span>
+    </NPopover>
+  </div>
+</template>

web/src/views/ChatLLMView.vue

@@ -4,7 +4,6 @@ import type { Message } from "@/interfaces";
 import { throttle } from "lodash-es";
 import AIAvatar from "@/assets/ai_avatar.png";
 import {
-  DocumentDuplicateIcon,
   ExclamationTriangleIcon,
   microphone,
   PaperAirplaneIcon,
@@ -13,7 +12,6 @@ import {
 import UserAvatar from "@/assets/user_avatar.jpg";
 import markdown from "@/components/markdown.vue";
 import { useAsrStore, useChatStore, useLayoutStore } from "@/stores";
-import { copy } from "@/utils";
 
 const chatStore = useChatStore();
 const { historyMessages, completing, modelList, modelInfo, thinking } =
@@ -206,19 +204,7 @@ onMounted(() => {
             </NCollapse>
             <!-- 内容↓ 思维链↑ -->
             <markdown :content="msg.content || ''" />
-            <div class="flex items-center gap-2 justify-end mt-2">
-              <div v-if="msg.role !== 'user'">
-                <tts :text="msg.content || ''" :message-id="msg.id!" />
-              </div>
-              <NPopover trigger="hover">
-                <template #trigger>
-                  <NButton quaternary circle @click="copy(msg.content || '')">
-                    <DocumentDuplicateIcon class="!w-4 !h-4" />
-                  </NButton>
-                </template>
-                <span>复制内容</span>
-              </NPopover>
-            </div>
+            <MessageTools :msg="msg" />
             <NDivider />
           </div>
         </div>

web/src/views/VoiceView.vue

@@ -191,9 +191,7 @@ onMounted(() => {
             </NCollapse>
             <!-- 内容↓ 思维链↑ -->
             <markdown :content="msg.content || ''" />
-            <div v-if="msg.role !== 'user'" class="mt-2">
-              <tts :text="msg.content || ''" :message-id="msg.id!" />
-            </div>
+            <MessageTools :msg="msg" />
             <NDivider />
           </div>
         </div>