From a475000df58a3e4406160fdcea7282828697d6b6 Mon Sep 17 00:00:00 2001
From: PingChuan <1259732256@qq.com>
Date: Tue, 25 Nov 2025 14:38:54 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E6=88=90=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=E8=87=AA=E5=AE=9A=E4=B9=89Collabora=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/collabora/CollaboraViewer.tsx |  45 +++---
 app/components/collabora/Uno.ts              |   3 +-
 app/components/collabora/hooks.ts            |  57 +------
 app/components/collabora/lib/README.md       |  15 +-
 app/components/collabora/lib/gotoPage.ts     | 151 +++++++++++++++++++
 app/components/collabora/lib/index.ts        |   9 +-
 app/components/collabora/lib/navigation.ts   |  29 ----
 app/components/collabora/lib/pageInfo.ts     |  21 ---
 app/components/collabora/types.ts            |   3 -
 app/components/reviews/FilePreview.tsx       |  19 ++-
 10 files changed, 205 insertions(+), 147 deletions(-)
 create mode 100644 app/components/collabora/lib/gotoPage.ts

diff --git a/app/components/collabora/CollaboraViewer.tsx b/app/components/collabora/CollaboraViewer.tsx
index a899e7f..b5f9f3c 100644
--- a/app/components/collabora/CollaboraViewer.tsx
+++ b/app/components/collabora/CollaboraViewer.tsx
@@ -10,7 +10,7 @@
  * @encoding UTF-8
  */
 
-import { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { useRef, forwardRef, useImperativeHandle, useState } from 'react';
 import type { CollaboraViewerProps, CollaboraViewerHandle } from './types';
 import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
 import { sendUnoCommand } from './Uno';
@@ -54,20 +54,6 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
       getIframeWindow: () => iframeRef.current?.contentWindow || null,
     }), [unoCommands, isDocumentLoaded, mode]);
 
-    // 5. 将 sendUnoCommand 挂载到 window 对象，供调试面板和控制台使用
-    useEffect(() => {
-      if (iframeRef.current?.contentWindow) {
-        (window as any).sendUno = (cmd: string, args: any = {}) => {
-          if (iframeRef.current?.contentWindow) {
-            sendUnoCommand(iframeRef.current.contentWindow, cmd, args);
-          }
-        };
-      }
-
-      return () => {
-        delete (window as any).sendUno;
-      };
-    }, [isDocumentLoaded]);
 
   // 加载中状态
   if (loading) {
@@ -101,20 +87,15 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
       return;
     }
 
-    if (!(window as any).sendUno) {
-      setUnoResult('window.sendUno 未初始化');
-      return;
-    }
-
-    let args: any = {};
+    let args: Record<string, unknown> = {};
     const raw = (unoArgs || '').trim();
     if (raw !== '') {
       try {
-        args = JSON.parse(raw);
+        args = JSON.parse(raw) as Record<string, unknown>;
       } catch (err) {
         try {
           // fallback: replace single quotes with double quotes and parse
-          args = JSON.parse(raw.replace(/'(.*?)'/g, '"$1"'));
+          args = JSON.parse(raw.replace(/'(.*?)'/g, '"$1"')) as Record<string, unknown>;
         } catch (err2) {
           console.error('解析 UNO Args 失败:', err2);
           setUnoResult('Args 解析失败，请使用有效 JSON');
@@ -122,12 +103,22 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
         }
       }
     }
+
+    try {
+      // 使用正确的 sendUnoCommand 方法
+      sendUnoCommand(iframeRef.current.contentWindow, unoCmd, args);
+      setUnoResult(`已发送: ${unoCmd}`);
+      console.log('[UNO Debug] 发送命令:', unoCmd, args);
+    } catch (e) {
+      console.error('发送 UNO 失败:', e);
+      setUnoResult('发送失败，请查看控制台');
+    }
   };
 
   return (
     <div className="collabora-viewer relative w-full h-full min-h-[600px]">
       {/* UNO 命令测试面板 */}
-      {/* <div className="absolute top-2 left-2 z-50 bg-white bg-opacity-90 px-2 py-1 rounded shadow flex items-center gap-2">
+      <div className="absolute top-2 left-2 z-50 bg-white bg-opacity-90 px-2 py-1 rounded shadow flex items-center gap-2">
         <input
           className="px-2 py-1 border rounded text-sm w-48"
           value={unoCmd}
@@ -149,7 +140,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
           发送 UNO
         </button>
         {unoResult && <span className="text-xs text-gray-500 ml-2">{unoResult}</span>}
-      </div> */}
+      </div>
 
       {/* 文档加载提示 */}
       {!isDocumentLoaded && (
@@ -162,7 +153,8 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
         </div>
       )}
 
-      {/* Collabora iframe */}
+      {/* Collabora iframe - tabIndex is needed for keyboard navigation */}
+      {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}
       <iframe
         ref={iframeRef}
         src={config.iframeUrl}
@@ -176,6 +168,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
         sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals"
         tabIndex={0}
       />
+      {/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}
     </div>
   );
 });
diff --git a/app/components/collabora/Uno.ts b/app/components/collabora/Uno.ts
index 545834f..10a6da7 100644
--- a/app/components/collabora/Uno.ts
+++ b/app/components/collabora/Uno.ts
@@ -15,10 +15,11 @@
 export function sendUnoCommand(
     iframeWindow: Window,
     command: string,
-    args: Record<string, any> = {}
+    args: Record<string, unknown> = {}
 ): void {
     const message = {
         MessageId: 'Send_UNO_Command',
+        SendTime: Date.now(),
         Values: {
             Command: command,
             Args: args,
diff --git a/app/components/collabora/hooks.ts b/app/components/collabora/hooks.ts
index 79bc2a5..f976a22 100644
--- a/app/components/collabora/hooks.ts
+++ b/app/components/collabora/hooks.ts
@@ -24,9 +24,6 @@ import {
   unoZoomPlus,
   unoZoomMinus,
   unoSetZoom,
-  unoGotoPage,
-  unoFirstPage,
-  unoLastPage,
 } from './lib';
 import { COLLABORA_URL } from '~/config/api-config';
 
@@ -67,7 +64,8 @@ export function useCollaboraConfig(
   // 检查错误
   useEffect(() => {
     if (fetcher.data && 'error' in fetcher.data) {
-      const errorMessage = (fetcher.data as any).error || '加载配置失败';
+      const errorData = fetcher.data as { error: string };
+      const errorMessage = errorData.error || '加载配置失败';
       setError(errorMessage);
       toastService.error(`加载文档配置失败: ${errorMessage}`);
     }
@@ -307,51 +305,6 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
     [iframeRef]
   );
 
-  /**
-   * 跳转到指定页面
-   * @param pageNumber - 页码（从1开始）
-   */
-  const gotoPage = useCallback(
-    async (pageNumber: number) => {
-      if (!iframeRef.current?.contentWindow) {
-        console.warn('[UNO] iframe 不可用');
-        return;
-      }
-
-      console.log(`[UNO] 跳转到第 ${pageNumber} 页`);
-      await unoGotoPage(iframeRef.current.contentWindow, pageNumber);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    },
-    [iframeRef]
-  );
-
-  /**
-   * 跳转到第一页
-   */
-  const gotoFirstPage = useCallback(async () => {
-    if (!iframeRef.current?.contentWindow) {
-      console.warn('[UNO] iframe 不可用');
-      return;
-    }
-
-    console.log('[UNO] 跳转到第一页');
-    await unoFirstPage(iframeRef.current.contentWindow);
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  }, [iframeRef]);
-
-  /**
-   * 跳转到最后一页
-   */
-  const gotoLastPage = useCallback(async () => {
-    if (!iframeRef.current?.contentWindow) {
-      console.warn('[UNO] iframe 不可用');
-      return;
-    }
-
-    console.log('[UNO] 跳转到最后一页');
-    await unoLastPage(iframeRef.current.contentWindow);
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  }, [iframeRef]);
 
   return useMemo(
     () => ({
@@ -366,9 +319,6 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
       zoomIn,
       zoomOut,
       setZoom,
-      gotoPage,
-      gotoFirstPage,
-      gotoLastPage,
     }),
     [
       searchText,
@@ -382,9 +332,6 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
       zoomIn,
       zoomOut,
       setZoom,
-      gotoPage,
-      gotoFirstPage,
-      gotoLastPage,
     ]
   );
 }
diff --git a/app/components/collabora/lib/README.md b/app/components/collabora/lib/README.md
index 3ee9816..eed4a2f 100644
--- a/app/components/collabora/lib/README.md
+++ b/app/components/collabora/lib/README.md
@@ -13,7 +13,9 @@ lib/
 ├── highlight.ts        # 高亮功能
 ├── navigation.ts       # 导航/跳转功能
 ├── zoom.ts             # 缩放功能
-└── document.ts         # 文档操作
+├── document.ts         # 文档操作
+├── pageInfo.ts         # 页数信息获取
+└── gotoPage.ts         # 自定义页面跳转（不使用 UNO 命令）
 ```
 
 ## 功能模块
@@ -31,9 +33,6 @@ lib/
 
 ### 4. navigation.ts - 导航/跳转功能
 - `unoScrollToTop(iframeWindow)` - 滚动到文档开头（带焦点请求）
-- `unoGotoPage(iframeWindow, pageNumber)` - 跳转到指定页面
-- `unoFirstPage(iframeWindow)` - 跳转到第一页
-- `unoLastPage(iframeWindow)` - 跳转到最后一页
 
 ### 5. zoom.ts - 缩放功能
 - `unoZoomPlus(iframeWindow)` - 放大文档
@@ -49,6 +48,10 @@ lib/
 - `getPageInfoFromCollabora()` - 从 Collabora 内部直接获取页数（仅 iframe 内部可用）
 - `PageInfo` 接口 - 页数信息类型定义
 
+### 8. gotoPage.ts - 自定义页面跳转（不使用 UNO 命令）
+- `customGotoPage(iframeWindow, pageNumber)` - 跳转到指定页面（使用自定义 PostMessage 协议）
+- `GotoPageResponse` 接口 - 页面跳转响应信息类型定义
+
 ## 使用方式
 
 ### 方式 1: 从统一入口导入（推荐）
@@ -60,6 +63,8 @@ import {
   unoHighlightText,
   unoScrollToTop,
   unoSave,
+  customGotoPage,
+  requestPageInfo,
 } from '~/components/collabora/lib';
 ```
 
@@ -68,6 +73,8 @@ import {
 ```typescript
 import { unoSearchText } from '~/components/collabora/lib/search';
 import { unoScrollToTop } from '~/components/collabora/lib/navigation';
+import { customGotoPage } from '~/components/collabora/lib/gotoPage';
+import { requestPageInfo } from '~/components/collabora/lib/pageInfo';
 ```
 
 ## 核心工具函数
diff --git a/app/components/collabora/lib/gotoPage.ts b/app/components/collabora/lib/gotoPage.ts
new file mode 100644
index 0000000..3716603
--- /dev/null
+++ b/app/components/collabora/lib/gotoPage.ts
@@ -0,0 +1,151 @@
+/**
+ * Collabora 自定义页面跳转模块
+ *
+ * 使用自定义 PostMessage 协议实现页面跳转,不依赖 UNO 命令
+ *
+ * @encoding UTF-8
+ */
+
+/**
+ * 页面跳转响应接口
+ */
+export interface GotoPageResponse {
+    pageNumber: number;
+    pageIndex: number;
+    totalPages: number;
+    currentOffset: number;
+    targetOffset: number;
+    scrollDelta: number;
+    timestamp: number;
+}
+
+/**
+ * Collabora PostMessage 数据类型
+ */
+interface CollaboraMessageData {
+    MessageId?: string;
+    msgId?: string;
+    Values?: {
+        Command?: string;
+        Status?: string;
+        pageNumber?: number;
+        pageIndex?: number;
+        totalPages?: number;
+        currentOffset?: number;
+        targetOffset?: number;
+        scrollDelta?: number;
+        timestamp?: number;
+        Error?: string;
+        [key: string]: unknown;
+    };
+    args?: {
+        Command?: string;
+        Status?: string;
+        pageNumber?: number;
+        pageIndex?: number;
+        totalPages?: number;
+        currentOffset?: number;
+        targetOffset?: number;
+        scrollDelta?: number;
+        timestamp?: number;
+        Error?: string;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+
+/**
+ * 解析 PostMessage 数据
+ */
+function parseMessageData(data: unknown): CollaboraMessageData {
+    if (typeof data === 'string') {
+        return JSON.parse(data) as CollaboraMessageData;
+    }
+    return data as CollaboraMessageData;
+}
+
+/**
+ * 跳转到指定页面 (自定义实现,不使用 UNO 命令)
+ *
+ * 使用自定义 custompostMessage 插件实现页面跳转。
+ * 注意: Collabora 的页码是从 0 开始的,但此函数接受从 1 开始的页码。
+ *
+ * @param iframeWindow - iframe 的 contentWindow
+ * @param pageNumber - 页码 (从1开始)
+ * @returns Promise,解析为跳转响应信息
+ *
+ * @example
+ * ```typescript
+ * const response = await customGotoPage(iframeWindow, 5);
+ * console.log(`成功跳转到第 ${response.pageNumber} 页`);
+ * ```
+ */
+export async function customGotoPage(
+    iframeWindow: Window,
+    pageNumber: number
+): Promise<GotoPageResponse> {
+    return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            cleanup();
+            reject(new Error('页面跳转超时'));
+        }, 5000);
+
+        const handleMessage = (event: MessageEvent) => {
+            try {
+                if (event.source !== iframeWindow) {
+                    return;
+                }
+
+                const data = parseMessageData(event.data);
+
+                // bundle.js 的 _postMessage 会将消息转换为:
+                // { MessageId: 'custompostMessage_Resp', Values: { Command: 'GOTO_PAGE', ... } }
+                if (
+                    data.MessageId === 'custompostMessage_Resp' &&
+                    data.Values?.Command === 'GOTO_PAGE'
+                ) {
+                    clearTimeout(timeout);
+                    cleanup();
+
+                    if (data.Values.Status === 'success') {
+                        const response: GotoPageResponse = {
+                            pageNumber: data.Values.pageNumber || pageNumber,
+                            pageIndex: data.Values.pageIndex || pageNumber - 1,
+                            totalPages: data.Values.totalPages || 0,
+                            currentOffset: data.Values.currentOffset || 0,
+                            targetOffset: data.Values.targetOffset || 0,
+                            scrollDelta: data.Values.scrollDelta || 0,
+                            timestamp: data.Values.timestamp || Date.now(),
+                        };
+                        resolve(response);
+                    } else {
+                        reject(new Error(data.Values.Error || '页面跳转失败'));
+                    }
+                }
+            } catch (error) {
+                clearTimeout(timeout);
+                cleanup();
+                reject(error);
+            }
+        };
+
+        const cleanup = () => {
+            window.removeEventListener('message', handleMessage);
+        };
+
+        window.addEventListener('message', handleMessage);
+
+        // 发送跳转请求消息
+        const message = {
+            MessageId: 'custompostMessage',
+            Values: {
+                Command: 'GOTO_PAGE',
+                Args: {
+                    pageNumber: pageNumber,
+                },
+            },
+        };
+
+        iframeWindow.postMessage(JSON.stringify(message), '*');
+    });
+}
diff --git a/app/components/collabora/lib/index.ts b/app/components/collabora/lib/index.ts
index 32f1394..9e1215d 100644
--- a/app/components/collabora/lib/index.ts
+++ b/app/components/collabora/lib/index.ts
@@ -16,9 +16,6 @@ export { unoHighlightText, unoRemoveHighlight, unoEscape } from './highlight';
 // 导航/跳转功能
 export {
     unoScrollToTop,
-    unoGotoPage,
-    unoFirstPage,
-    unoLastPage,
 } from './navigation';
 
 // 缩放功能
@@ -32,3 +29,9 @@ export {
     requestPageInfo,
     type PageInfo,
 } from './pageInfo';
+
+// 自定义页面跳转功能
+export {
+    customGotoPage,
+    type GotoPageResponse,
+} from './gotoPage';
diff --git a/app/components/collabora/lib/navigation.ts b/app/components/collabora/lib/navigation.ts
index e592227..0bd310c 100644
--- a/app/components/collabora/lib/navigation.ts
+++ b/app/components/collabora/lib/navigation.ts
@@ -31,32 +31,3 @@ export async function unoScrollToTop(iframeWindow: Window): Promise<void> {
     sendUnoCommand(iframeWindow, '.uno:GoToStartOfDoc', {});
 }
 
-/**
- * 跳转到指定页面
- * @param iframeWindow - iframe 的 contentWindow
- * @param pageNumber - 页码（从1开始）
- */
-export function unoGotoPage(iframeWindow: Window, pageNumber: number): void {
-    sendUnoCommand(iframeWindow, '.uno:GotoPage', {
-        Page: {
-            type: 'long',
-            value: pageNumber,
-        },
-    });
-}
-
-/**
- * 跳转到第一页
- * @param iframeWindow - iframe 的 contentWindow
- */
-export function unoFirstPage(iframeWindow: Window): void {
-    sendUnoCommand(iframeWindow, '.uno:FirstPage', {});
-}
-
-/**
- * 跳转到最后一页
- * @param iframeWindow - iframe 的 contentWindow
- */
-export function unoLastPage(iframeWindow: Window): void {
-    sendUnoCommand(iframeWindow, '.uno:LastPage', {});
-}
diff --git a/app/components/collabora/lib/pageInfo.ts b/app/components/collabora/lib/pageInfo.ts
index e6f3b3b..5bbd5b6 100644
--- a/app/components/collabora/lib/pageInfo.ts
+++ b/app/components/collabora/lib/pageInfo.ts
@@ -27,7 +27,6 @@ interface CollaboraMessageData {
         currentPage?: number;
         timestamp?: number;
         pages?: number;
-        currentPage?: number;
         [key: string]: unknown;
     };
     // 原始插件返回的格式
@@ -42,27 +41,7 @@ interface CollaboraMessageData {
     [key: string]: unknown;
 }
 
-/**
- * Collabora 全局对象类型
- */
-interface CollaboraApp {
-    map?: {
-        _docLayer?: {
-            _pages?: number;
-            _currentPage?: number;
-            [key: string]: unknown;
-        };
-        [key: string]: unknown;
-    };
-    [key: string]: unknown;
-}
 
-/**
- * 扩展 Window 类型以包含 Collabora app
- */
-interface CollaboraWindow extends Window {
-    app?: CollaboraApp;
-}
 
 /**
  * 解析 PostMessage 数据
diff --git a/app/components/collabora/types.ts b/app/components/collabora/types.ts
index 275c09e..a4635ea 100644
--- a/app/components/collabora/types.ts
+++ b/app/components/collabora/types.ts
@@ -53,9 +53,6 @@ export interface CollaboraViewerHandle {
         zoomIn: () => Promise<void>;
         zoomOut: () => Promise<void>;
         setZoom: (percentage: number) => Promise<void>;
-        gotoPage: (pageNumber: number) => Promise<void>;
-        gotoFirstPage: () => Promise<void>;
-        gotoLastPage: () => Promise<void>;
     };
     /** 文档是否已加载完成 */
     isReady: boolean;
diff --git a/app/components/reviews/FilePreview.tsx b/app/components/reviews/FilePreview.tsx
index c86c4ab..06bb06c 100644
--- a/app/components/reviews/FilePreview.tsx
+++ b/app/components/reviews/FilePreview.tsx
@@ -6,7 +6,7 @@ import { useState, useEffect, useRef, ChangeEvent } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import { DOCUMENT_URL } from '~/api/axios-client';
 import { CollaboraViewer, type CollaboraViewerHandle } from '~/components/collabora/CollaboraViewer';
-import { requestPageInfo } from '~/components/collabora/lib/pageInfo';
+import { requestPageInfo, customGotoPage } from '~/components/collabora/lib';
 
 // 导入react-pdf的CSS样式（文本层和注释层必需）
 import 'react-pdf/dist/esm/Page/TextLayer.css';
@@ -317,19 +317,28 @@ export function FilePreview({ fileContent, activeReviewPointResultId, targetPage
   };
   
   // 处理页码跳转
-  const handlePageJump = () => {
+  const handlePageJump = async () => {
     if (!pageInputValue) return;
 
     const targetPageNum = parseInt(pageInputValue, 10);
 
     if (isDocx) {
-      // DOCX 文件：调用 Collabora UNO 命令
-      if (!collaboraViewerRef.current?.isReady) {
+      // DOCX 文件：调用自定义页面跳转
+      const iframeWindow = collaboraViewerRef.current?.getIframeWindow?.();
+      if (!iframeWindow) {
         toastService.warning('文档尚未加载完成，请稍候...');
         return;
       }
+
       if (targetPageNum > 0) {
-        collaboraViewerRef.current?.unoCommands.gotoPage(targetPageNum);
+        try {
+          await customGotoPage(iframeWindow, targetPageNum);
+          // 跳转成功，清空输入框
+          setPageInputValue('');
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : '未知错误';
+          toastService.error(`跳转失败: ${errorMessage}`);
+        }
       } else {
         toastService.warning('请输入有效页码');
         setPageInputValue('');