功能(文档预览)：集成 ONLYOFFICE 安全只读预览与工作台体验

新增 ONLYOFFICE 配置签名、内部内容接口、容器编排与反向代理。

打通网页端和桌面端独立预览工作区，完善文档入口、布局及帮助体验。

补充桌面安全发布门禁、开发脚本、使用文档和前后端测试。

frontend/src/views/documents/DocumentDetail.vue

@@ -350,8 +350,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { computed, defineAsyncComponent, onActivated, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
 import { Edit, Upload, Share } from "@element-plus/icons-vue";
 import {
@@ -383,8 +383,10 @@ import { openFileWithFeedback, pickFilesWithFeedback, saveFileWithFeedback } fro
 import { getApiErrorMessage } from "../../utils/apiErrorMessage";
 import { getContentDispositionFilename } from "../../utils/contentDisposition";
 import { prepareSaveFile } from "../../runtime";
+import { detectFilePreviewKind, ONLYOFFICE_FILE_EXTENSIONS } from "../../utils/officePreview";
 
 const route = useRoute();
+const router = useRouter();
 const PdfViewer = defineAsyncComponent(() => import("../../components/PdfViewer.vue"));
 const auth = useAuthStore();
 const study = useStudyStore();
@@ -531,7 +533,7 @@ const uploadDirtyGuard = useDrawerDirtyGuard(() => ({
 const triggerFileInput = async () => {
   const [file] = await pickFilesWithFeedback({
     multiple: false,
-    accept: ["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "png", "jpg", "jpeg"],
+    accept: [...ONLYOFFICE_FILE_EXTENSIONS, "pdf", "png", "jpg", "jpeg"],
     title: "选择文档版本",
   });
   if (file) uploadFile.value = file;
@@ -669,6 +671,7 @@ const loadDetail = async () => {
   try {
     const { data } = await fetchDocumentDetail(documentId.value);
     Object.assign(detail, data);
+    syncBreadcrumbContext();
     if (!users.value.length) await loadUsers();
     if (!members.value.length) await loadMembers();
     if (!sites.value.length) await loadSites();
@@ -771,13 +774,7 @@ const getVersionFileName = (version: DocumentVersion) => {
 };
 
 const detectPreviewType = (version: DocumentVersion) => {
-  const mime = (version.mime_type || "").toLowerCase();
-  if (mime.startsWith("image/")) return "image";
-  if (mime === "application/pdf") return "pdf";
-  const name = getVersionFileName(version).toLowerCase();
-  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp", ".svg"].some((ext) => name.endsWith(ext))) return "image";
-  if (name.endsWith(".pdf")) return "pdf";
-  return "other";
+  return detectFilePreviewKind(getVersionFileName(version), version.mime_type);
 };
 
 const clearPreviewObjectUrl = () => {
@@ -789,7 +786,12 @@ const clearPreviewObjectUrl = () => {
 const previewVersion = async (version: DocumentVersion) => {
   if (!canReadDocument.value) { ElMessage.warning("权限不足"); return; }
   clearPreviewObjectUrl();
-  previewType.value = detectPreviewType(version);
+  const detectedType = detectPreviewType(version);
+  if (detectedType === "office") {
+    await router.push(`/office-preview/version/${version.id}`);
+    return;
+  }
+  previewType.value = detectedType;
   previewTitle.value = getVersionFileName(version) || `${detail.title || TEXT.modules.fileVersionManagement.title} V${version.version_no}`;
   previewUrl.value = "";
   previewError.value = "";
@@ -924,6 +926,10 @@ onMounted(async () => {
   await loadDetail();
 });
 
+onActivated(() => {
+  if (detail.id) syncBreadcrumbContext();
+});
+
 onBeforeUnmount(() => {
   desktopRefreshCleanup?.();
 });