feat(预览): 模型回复内容支持下载和复制

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-item.vue

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { throttle } from 'lodash-es'
 import { CheckOne, Down } from '@icon-park/vue-next'
 import CustomLoading from './custom-loading.vue'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
 import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import { useUserStore } from '@/store/modules/user'
+import { asBlob } from 'html-docx-js-typescript'
+import { downloadFile } from '@/utils/download-file'
+import { copyToClip } from '@/utils/copy'
 
 interface Props {
   role: 'user' | 'assistant'
@@ -24,6 +28,8 @@ const { t } = useI18n()
 const userStore = useUserStore()
 const personalAppConfigStore = usePersonalAppConfigStore()
 
+const markdownRenderRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('markdownRenderRef')
+
 const isShowReasoningContent = ref(true)
 
 const useAvatar = computed(() => {
@@ -65,6 +71,32 @@ function handleAudioControl() {
 function handleShowReasoningContentSwitch() {
   isShowReasoningContent.value = !isShowReasoningContent.value
 }
+
+const handleContentDownload = throttle(
+  () => {
+    if (markdownRenderRef.value) {
+      const content = markdownRenderRef.value.getRenderTextContent()
+
+      asBlob(content).then((data) => {
+        downloadFile(data as Blob).then(() => {
+          window.$message.success(t('common_module.copy_success_message'))
+        })
+      })
+    }
+  },
+  1000,
+  { leading: true, trailing: false },
+)
+
+const handleContentCopy = throttle(
+  () => {
+    copyToClip(props.messageItem.textContent).then(() => {
+      window.$message.success(t('common_module.copy_success_message'))
+    })
+  },
+  1000,
+  { leading: true, trailing: false },
+)
 </script>
 
 <template>
@@ -109,6 +141,7 @@ function handleShowReasoningContentSwitch() {
               />
               <template v-else>
                 <MarkdownRender
+                  ref="markdownRenderRef"
                   :raw-text-content="
                     messageItem.reasoningContent
                       ? messageItem.reasoningContent
@@ -158,6 +191,7 @@ function handleShowReasoningContentSwitch() {
         <div v-else>
           <p class="break-all">
             <MarkdownRender
+              ref="markdownRenderRef"
               :raw-text-content="
                 messageItem.isEmptyContent
                   ? t('common_module.dialogue_module.empty_message_content')
@@ -173,32 +207,53 @@ function handleShowReasoningContentSwitch() {
         </div>
       </div>
 
-      <div
-        v-show="isShowAudioControl"
-        class="text-font-color flex items-center gap-0.5"
-        :class="isPlayableAudio ? 'hover:text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed'"
-        @click="handleAudioControl"
-      >
-        <i v-if="!messageItem.isVoicePlaying" class="iconfont icon-play text-[24px]" />
-        <div v-else class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]" />
+      <div class="flex w-full items-center justify-between">
+        <div>
+          <div
+            v-show="isShowAudioControl"
+            class="text-font-color flex items-center gap-0.5"
+            :class="isPlayableAudio ? 'hover:text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed'"
+            @click="handleAudioControl"
+          >
+            <i v-if="!messageItem.isVoicePlaying" class="iconfont icon-play text-[24px]" />
+            <div
+              v-else
+              class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]"
+            />
 
-        <span
-          v-show="isPlayableAudio"
-          class="text-[12px]"
-          :class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
-        >
-          {{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
-        </span>
-        <n-popover style="max-width: 310px">
-          <template #trigger>
-            <span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
-          </template>
-          {{ t('common_module.unplayable_tip') }}
-        </n-popover>
-      </div>
+            <span
+              v-show="isPlayableAudio"
+              class="text-[12px]"
+              :class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
+            >
+              {{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
+            </span>
+            <n-popover style="max-width: 310px">
+              <template #trigger>
+                <span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
+              </template>
+              {{ t('common_module.unplayable_tip') }}
+            </n-popover>
+          </div>
+
+          <div v-if="isShowVoiceLoading" class="py-3.5 pl-6">
+            <CustomLoading />
+          </div>
+        </div>
 
-      <div v-if="isShowVoiceLoading" class="py-3.5 pl-6">
-        <CustomLoading />
+        <div
+          v-show="role === 'assistant' && messageItem.textContent && !messageItem.isAnswerResponseLoading"
+          class="py-[10px] pr-[14px] text-end"
+        >
+          <i
+            class="iconfont icon-download hover:text-theme-color mr-[14px] transform cursor-pointer text-[14px]"
+            @click="handleContentDownload"
+          />
+          <i
+            class="iconfont icon-copy1 hover:text-theme-color transform cursor-pointer text-[14px]"
+            @click="handleContentCopy"
+          />
+        </div>
       </div>
     </div>
   </div>