feat:完成通过自定义Collabora插件实现页面跳转

This commit is contained in:
PingChuan
2025-11-25 14:38:54 +08:00
parent d40e5b261c
commit a475000df5
10 changed files with 205 additions and 147 deletions
+19 -26
View File
@@ -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>
);
});