feat(文档详情): 添加文档下载功能并优化内容展示

- 在文档详情头部添加下载按钮，支持文件下载
- 使用实际文档数据替换模拟数据
- 优化文档内容展示样式，使用pre标签保持格式
- 添加文件内容获取逻辑，显示实际文件内容

src/views/knowledge/component/documentDetailDialog.vue

@@ -11,12 +11,48 @@
 		<div class="drawer-content">
 			<!-- 左侧：文档原文 -->
 			<div class="document-content">
-				<div class="content-header">
+				<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 = '';