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

新增 ONLYOFFICE 配置签名、内部内容接口、容器编排与反向代理。打通网页端和桌面端独立预览工作区，完善文档入口、布局及帮助体验。补充桌面安全发布门禁、开发脚本、使用文档和前后端测试。
2026-07-14 14:19:17 +08:00
parent 44db5db838
commit c68dddfc01
50 changed files with 2429 additions and 677 deletions
@@ -0,0 +1,133 @@
+(() => {
+  "use strict";
+
+  const MESSAGE = Object.freeze({
+    HOST_READY: "ctms.onlyoffice.host-ready",
+    INIT: "ctms.onlyoffice.init",
+    DOCUMENT_READY: "ctms.onlyoffice.document-ready",
+    WARNING: "ctms.onlyoffice.warning",
+    ERROR: "ctms.onlyoffice.error",
+  });
+  const API_SCRIPT_PATH = "/onlyoffice/web-apps/apps/api/documents/api.js";
+  const ALLOWED_TAURI_ORIGINS = new Set([
+    "tauri://localhost",
+    "http://tauri.localhost",
+    "https://tauri.localhost",
+  ]);
+  let initialized = false;
+  let editor = null;
+  let parentOrigin = null;
+  let requestNonce = null;
+  let apiScriptPromise = null;
+  let readyTimer = null;
+  let readyDeadlineTimer = null;
+
+  const isLoopbackOrigin = (origin) => {
+    try {
+      const url = new URL(origin);
+      return url.protocol === "http:" && ["localhost", "127.0.0.1", "::1", "[::1]"].includes(url.hostname);
+    } catch {
+      return false;
+    }
+  };
+
+  const isAllowedParentOrigin = (origin) =>
+    origin === window.location.origin || ALLOWED_TAURI_ORIGINS.has(origin) || isLoopbackOrigin(origin);
+
+  const postToParent = (type, detail) => {
+    if (!parentOrigin || !requestNonce) return;
+    window.parent.postMessage({ type, nonce: requestNonce, detail }, parentOrigin);
+  };
+
+  const safeEventDetail = (event) => {
+    const raw = event && typeof event === "object" && "data" in event ? event.data : event;
+    if (!raw || typeof raw !== "object") return {};
+    const detail = {};
+    if (typeof raw.errorCode === "number" || typeof raw.errorCode === "string") detail.errorCode = raw.errorCode;
+    if (typeof raw.errorDescription === "string") detail.errorDescription = raw.errorDescription.slice(0, 500);
+    if (typeof raw.warningCode === "number" || typeof raw.warningCode === "string") detail.warningCode = raw.warningCode;
+    if (typeof raw.warningDescription === "string") detail.warningDescription = raw.warningDescription.slice(0, 500);
+    return detail;
+  };
+
+  const loadOnlyOfficeApi = () => {
+    if (window.DocsAPI?.DocEditor) return Promise.resolve();
+    if (apiScriptPromise) return apiScriptPromise;
+    apiScriptPromise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = API_SCRIPT_PATH;
+      script.async = true;
+      script.addEventListener("load", () => {
+        if (window.DocsAPI?.DocEditor) resolve();
+        else reject(new Error("ONLYOFFICE API 未正确加载"));
+      }, { once: true });
+      script.addEventListener("error", () => reject(new Error("ONLYOFFICE API 加载失败")), { once: true });
+      document.head.appendChild(script);
+    });
+    return apiScriptPromise;
+  };
+
+  const destroyEditor = () => {
+    if (editor && typeof editor.destroyEditor === "function") {
+      try {
+        editor.destroyEditor();
+      } catch {
+        /* The remote editor may already have been torn down. */
+      }
+    }
+    editor = null;
+  };
+
+  const stopReadyAnnouncements = () => {
+    if (readyTimer !== null) window.clearInterval(readyTimer);
+    if (readyDeadlineTimer !== null) window.clearTimeout(readyDeadlineTimer);
+    readyTimer = null;
+    readyDeadlineTimer = null;
+  };
+
+  const announceReady = () => {
+    if (!initialized) window.parent.postMessage({ type: MESSAGE.HOST_READY }, "*");
+  };
+
+  const initializeEditor = async (message) => {
+    const config = message?.config;
+    if (!config || typeof config !== "object" || typeof message?.nonce !== "string" || !message.nonce) {
+      throw new Error("预览配置格式不正确");
+    }
+    requestNonce = message.nonce;
+    await loadOnlyOfficeApi();
+    const editorConfig = {
+      ...config,
+      events: {
+        onDocumentReady: () => postToParent(MESSAGE.DOCUMENT_READY),
+        onWarning: (event) => postToParent(MESSAGE.WARNING, safeEventDetail(event)),
+        onError: (event) => postToParent(MESSAGE.ERROR, safeEventDetail(event)),
+      },
+    };
+    editor = new window.DocsAPI.DocEditor("onlyoffice-editor", editorConfig);
+  };
+
+  window.addEventListener("message", async (event) => {
+    if (event.source !== window.parent || initialized || !isAllowedParentOrigin(event.origin)) return;
+    if (event.data?.type !== MESSAGE.INIT) return;
+    initialized = true;
+    stopReadyAnnouncements();
+    parentOrigin = event.origin;
+    requestNonce = typeof event.data?.nonce === "string" ? event.data.nonce : null;
+    try {
+      await initializeEditor(event.data);
+    } catch (error) {
+      postToParent(MESSAGE.ERROR, {
+        errorDescription: error instanceof Error ? error.message.slice(0, 500) : "Office 预览初始化失败",
+      });
+    }
+  });
+
+  window.addEventListener("pagehide", () => {
+    stopReadyAnnouncements();
+    destroyEditor();
+  }, { once: true });
+  announceReady();
+  readyTimer = window.setInterval(announceReady, 250);
+  readyDeadlineTimer = window.setTimeout(stopReadyAnnouncements, 15_000);
+})();