feat:

- 在 FileDetailModal 组件中，新增下载原文和下载 Markdown 按钮。
- 实现下载原文和 Markdown 的逻辑，包括文件名处理和错误提示。
- 优化模态框标题样式，增强用户体验。

Author: xerrors

docs/latest/changelog/roadmap.md

@@ -19,6 +19,7 @@
 ### 新增
 - 优化知识库详情页面，更加简洁清晰
 - 新增对于上传文件的智能体中间件
+- 增强文件下载功能
 
 ### 修复
 - 修复重排序模型实际未生效的问题

web/src/components/FileDetailModal.vue

@@ -1,13 +1,39 @@
 <template>
   <a-modal
     v-model:open="visible"
-    :title="file?.filename || '文件详情'"
     width="1200px"
     :footer="null"
     wrap-class-name="file-detail"
     @after-open-change="afterOpenChange"
     :bodyStyle="{ height: '80vh', padding: '0' }"
   >
+    <template #title>
+      <div class="modal-title-wrapper">
+        <span>{{ file?.filename || '文件详情' }}</span>
+        <div class="download-buttons" v-if="file">
+          <a-button
+            type="text"
+            size="small"
+            @click="handleDownloadOriginal"
+            :loading="downloadingOriginal"
+            :disabled="!file.file_id"
+            :icon="h(DownloadOutlined)"
+          >
+            下载原文
+          </a-button>
+          <a-button
+            type="text"
+            size="small"
+            @click="handleDownloadMarkdown"
+            :loading="downloadingMarkdown"
+            :disabled="!file.lines || file.lines.length === 0"
+            :icon="h(DownloadOutlined)"
+          >
+            下载 Markdown
+          </a-button>
+        </div>
+      </div>
+    </template>
     <div class="file-detail-content" v-if="file">
       <div class="file-content-section" v-if="file.lines && file.lines.length > 0">
         <MarkdownContentViewer :chunks="file.lines" />
@@ -25,8 +51,13 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, h } from 'vue';
 import { useDatabaseStore } from '@/stores/database';
+import { message } from 'ant-design-vue';
+import { DownloadOutlined } from '@ant-design/icons-vue';
+import { documentApi } from '@/apis/knowledge_api';
+import { mergeChunks } from '@/utils/chunkUtils';
+import MarkdownContentViewer from './MarkdownContentViewer.vue';
 
 const store = useDatabaseStore();
 
@@ -37,16 +68,122 @@ const visible = computed({
 
 const file = computed(() => store.selectedFile);
 const loading = computed(() => store.state.fileDetailLoading);
+const downloadingOriginal = ref(false);
+const downloadingMarkdown = ref(false);
 
 const afterOpenChange = (open) => {
   if (!open) {
     store.selectedFile = null;
   }
 };
 
-// 导入工具函数
-import { getStatusText, formatStandardTime } from '@/utils/file_utils';
-import MarkdownContentViewer from './MarkdownContentViewer.vue';
+// 下载原文
+const handleDownloadOriginal = async () => {
+  if (!file.value || !file.value.file_id) {
+    message.error('文件信息不完整');
+    return;
+  }
+
+  const dbId = store.databaseId;
+  if (!dbId) {
+    message.error('无法获取数据库ID，请刷新页面后重试');
+    return;
+  }
+
+  downloadingOriginal.value = true;
+  try {
+    const response = await documentApi.downloadDocument(dbId, file.value.file_id);
+
+    // 获取文件名
+    const contentDisposition = response.headers.get('content-disposition');
+    let filename = file.value.filename;
+    if (contentDisposition) {
+      // 首先尝试匹配RFC 2231格式 filename*=UTF-8''...
+      const rfc2231Match = contentDisposition.match(/filename\*=UTF-8''([^;]+)/);
+      if (rfc2231Match) {
+        try {
+          filename = decodeURIComponent(rfc2231Match[1]);
+        } catch (error) {
+          console.warn('Failed to decode RFC2231 filename:', rfc2231Match[1], error);
+        }
+      } else {
+        // 回退到标准格式 filename="..."
+        const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+        if (filenameMatch && filenameMatch[1]) {
+          filename = filenameMatch[1].replace(/['"]/g, '');
+          // 解码URL编码的文件名
+          try {
+            filename = decodeURIComponent(filename);
+          } catch (error) {
+            console.warn('Failed to decode filename:', filename, error);
+          }
+        }
+      }
+    }
+
+    // 创建blob并下载
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+    message.success('下载成功');
+  } catch (error) {
+    console.error('下载文件时出错:', error);
+    message.error(error.message || '下载文件失败');
+  } finally {
+    downloadingOriginal.value = false;
+  }
+};
+
+// 下载 Markdown
+const handleDownloadMarkdown = () => {
+  if (!file.value || !file.value.lines || file.value.lines.length === 0) {
+    message.error('没有可下载的 Markdown 内容');
+    return;
+  }
+
+  downloadingMarkdown.value = true;
+  try {
+    // 合并 chunks 生成完整的 Markdown 内容
+    const { content } = mergeChunks(file.value.lines);
+
+    // 生成文件名（如果原文件没有 .md 扩展名，则添加）
+    let filename = file.value.filename || 'document.md';
+    if (!filename.toLowerCase().endsWith('.md')) {
+      // 移除原扩展名，添加 .md
+      const lastDotIndex = filename.lastIndexOf('.');
+      if (lastDotIndex > 0) {
+        filename = filename.substring(0, lastDotIndex) + '.md';
+      } else {
+        filename = filename + '.md';
+      }
+    }
+
+    // 创建 blob 并下载
+    const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+    message.success('下载成功');
+  } catch (error) {
+    console.error('下载 Markdown 时出错:', error);
+    message.error(error.message || '下载 Markdown 失败');
+  } finally {
+    downloadingMarkdown.value = false;
+  }
+};
 </script>
 
 <style scoped>
@@ -82,5 +219,26 @@ import MarkdownContentViewer from './MarkdownContentViewer.vue';
   .ant-modal {
     top: 20px;
   }
+
+  .ant-modal-header {
+    .ant-modal-title {
+      width: 100%;
+    }
+  }
+}
+
+.modal-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 8px;
+}
+
+.download-buttons {
+  display: flex;
+  gap: 8px;
+  margin: 0 16px;
+  flex-shrink: 0;
 }
 </style>