From 919aaa195df895825da1266ed6f17cb6515f9376 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Sat, 11 Apr 2026 17:54:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=87=E6=A1=A3=E8=AF=A6=E6=83=85):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3=E4=B8=8B=E8=BD=BD=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E5=86=85=E5=AE=B9=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在文档详情头部添加下载按钮，支持文件下载
- 使用实际文档数据替换模拟数据
- 优化文档内容展示样式，使用pre标签保持格式
- 添加文件内容获取逻辑，显示实际文件内容
---
 .../component/documentDetailDialog.vue        | 86 ++++++++++++++++---
 1 file changed, 74 insertions(+), 12 deletions(-)

diff --git a/src/views/knowledge/component/documentDetailDialog.vue b/src/views/knowledge/component/documentDetailDialog.vue
index b38d10c..0f86ba0 100644
--- a/src/views/knowledge/component/documentDetailDialog.vue
+++ b/src/views/knowledge/component/documentDetailDialog.vue
@@ -11,12 +11,48 @@
 		<div class="drawer-content">
 			<!-- 左侧：文档原文 -->
 			<div class="document-content">
-				<div class="content-header">
-					<h2>{{ documentInfo.name }}</h2>
-					<div class="content-meta">Size：{{ formatFileSize(documentInfo.fileSize) }} Uploaded Time：{{ documentInfo.createdAt }}</div>
+				<div class="content-header" style="display: flex; justify-content: space-between; align-items: flex-start">
+					<div>
+						<h2>{{ documentInfo.name }}</h2>
+						<div class="content-meta">Size：{{ formatFileSize(documentInfo.fileSize) }} Uploaded Time：{{ documentInfo.createdAt }}</div>
+					</div>
+					<a
+						href="#"
+						id="downloadLink"
+						style="
+							background-color: #f0f9eb;
+							color: #67c23a;
+							padding: 6px 12px;
+							border-radius: 4px;
+							text-decoration: none;
+							font-size: 12px;
+							display: inline-flex;
+							align-items: center;
+							border: 1px solid #e1f5dc;
+							margin-top: 4px;
+						"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							style="margin-right: 4px"
+						>
+							<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+							<polyline points="7 10 12 15 17 10"></polyline>
+							<line x1="12" y1="15" x2="12" y2="3"></line>
+						</svg>
+						下载
+					</a>
 				</div>
 				<div class="content-body" v-loading="contentLoading">
-					<pre class="document-text">{{ documentContent }}</pre>
+					<div class="document-text" v-html="documentContent"></div>
 				</div>
 			</div>
 
@@ -95,7 +131,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch } from 'vue';
+import { ref, reactive, computed, watch, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
 
 const props = defineProps<{
@@ -159,15 +195,41 @@ const truncateText = (text: string, maxLength: number) => {
 const getDocumentDetail = async () => {
 	contentLoading.value = true;
 	try {
-		// 模拟数据
+		// 使用实际的文档数据
 		documentInfo.id = props.document?.id || '';
-		documentInfo.name = props.document?.name || '456_product(1).txt';
-		documentInfo.fileType = props.document?.fileType || 'txt';
-		documentInfo.fileSize = props.document?.fileSize || 10;
-		documentInfo.createdAt = props.document?.createdAt || '22/01/2026 00:53:32';
+		documentInfo.name = props.document?.title || '未知文件';
+		documentInfo.fileSize = props.document?.fileSize || 0;
+		documentInfo.createdAt = props.document?.createdAt || '';
 
-		// 模拟文档内容
-		documentContent.value = '<p>123</p>';
+		// 构建文件地址
+		const imgAddressPrefix = props.document?.imgAddressPrefix?.trim() || '';
+		const filePath = props.document?.filePath || '';
+		const fileUrl = imgAddressPrefix + filePath;
+
+		// 设置下载链接
+		nextTick(() => {
+			const downloadLink = document.getElementById('downloadLink');
+			if (downloadLink) {
+				downloadLink.setAttribute('href', fileUrl);
+				downloadLink.setAttribute('download', documentInfo.name);
+			}
+		});
+
+		// 尝试获取文件内容
+		let fileContent = '';
+		try {
+			const response = await fetch(fileUrl);
+			if (response.ok) {
+				fileContent = await response.text();
+			} else {
+				fileContent = '无法加载文件内容';
+			}
+		} catch (error) {
+			fileContent = '无法加载文件内容';
+		}
+
+		// 生成文档内容，只包含文件内容
+		documentContent.value = `<pre style="background: #fafafa; padding: 16px; border-radius: 4px; border: 1px solid #ebeef5; margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 14px; line-height: 1.5;">${fileContent}</pre>`;
 	} catch (_error) {
 		ElMessage.error('获取文档详情失败');
 		documentContent.value = '';