TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：集成uno命令，封装高亮特定文本方法

Browse Source
This commit is contained in:
PingChuan
2025-11-25 18:31:50 +08:00
parent a475000df5
commit 08ebcf1935
2 changed files with 388 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/collabora/CollaboraViewer.tsx
+118 -25
View File
@@ -14,6 +14,7 @@ import { useRef, forwardRef, useImperativeHandle, useState } from 'react';
import type { CollaboraViewerProps, CollaboraViewerHandle } from './types';
import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
import { sendUnoCommand } from './Uno';
import { switchHighlight } from './lib/Highlightselecttext';
/**
* Collabora 文档查看器组件
@@ -37,6 +38,12 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
const [unoArgs, setUnoArgs] = useState('{}');
const [unoResult, setUnoResult] = useState<string | null>(null);
// 高亮测试面板状态
const [highlightText, setHighlightText] = useState('');
const [highlightPage, setHighlightPage] = useState('');
const [previousHighlightText, setPreviousHighlightText] = useState<string | null>(null);
const [highlightResult, setHighlightResult] = useState<string | null>(null);
// 1. 加载 Collabora 配置
const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
@@ -80,45 +87,86 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
);
}
// 发送 UNO 命令的处理函数
const sendUno = () => {
// 发送 UNO 命令的处理函数（测试用）
// const sendUno = () => {
// if (!iframeRef.current?.contentWindow) {
// setUnoResult('iframe 不可用');
// return;
// }
// let args: Record<string, unknown> = {};
// const raw = (unoArgs || '').trim();
// if (raw !== '') {
// try {
// 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"')) as Record<string, unknown>;
// } catch (err2) {
// console.error('解析 UNO Args 失败:', err2);
// setUnoResult('Args 解析失败，请使用有效 JSON');
// return;
// }
// }
// }
// try {
// // 使用正确的 sendUnoCommand 方法
// sendUnoCommand(iframeRef.current.contentWindow, unoCmd, args);
// setUnoResult(`已发送: ${unoCmd}`);
// console.log('[UNO Debug] 发送命令:', unoCmd, args);
// } catch (e) {
// console.error('发送 UNO 失败:', e);
// setUnoResult('发送失败，请查看控制台');
// }
// };
// 高亮测试处理函数
const handleSwitchHighlight = async () => {
if (!iframeRef.current?.contentWindow) {
setUnoResult('iframe 不可用');
setHighlightResult('iframe 未就绪');
return;
}
let args: Record<string, unknown> = {};
const raw = (unoArgs || '').trim();
if (raw !== '') {
try {
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"')) as Record<string, unknown>;
} catch (err2) {
console.error('解析 UNO Args 失败:', err2);
setUnoResult('Args 解析失败，请使用有效 JSON');
return;
}
}
if (!highlightText || highlightText.trim() === '') {
setHighlightResult('请输入要高亮的文本');
return;
}
try {
// 使用正确的 sendUnoCommand 方法
sendUnoCommand(iframeRef.current.contentWindow, unoCmd, args);
setUnoResult(`已发送: ${unoCmd}`);
console.log('[UNO Debug] 发送命令:', unoCmd, args);
// 解析页码 (可选)
const page = highlightPage && highlightPage.trim() !== ''
? parseInt(highlightPage.trim(), 10)
: undefined;
// 验证页码
if (page !== undefined && (isNaN(page) || page < 1)) {
setHighlightResult('页码必须是大于0的整数');
return;
}
await switchHighlight(
iframeRef.current.contentWindow,
previousHighlightText,
highlightText.trim(),
{ page }
);
// 更新上一次高亮的文本
setPreviousHighlightText(highlightText.trim());
const pageInfo = page ? ` (第${page}页)` : '';
setHighlightResult(`✓ 已切换高亮: ${highlightText.trim()}${pageInfo}`);
} catch (e) {
console.error('发送 UNO 失败:', e);
setUnoResult('发送失败，请查看控制台');
console.error('切换高亮失败:', e);
setHighlightResult(`切换失败: ${e instanceof Error ? e.message : '未知错误'}`);
}
};
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}
@@ -140,6 +188,51 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
发送 UNO
</button>
{unoResult && <span className="text-xs text-gray-500 ml-2">{unoResult}</span>}
</div> */}
{/* 高亮测试面板 */}
<div className="absolute top-2 left-2 z-50 bg-white bg-opacity-90 px-3 py-2 rounded shadow flex items-center gap-2">
<input
className="px-3 py-1.5 border rounded text-sm w-64"
value={highlightText}
onChange={(e) => setHighlightText(e.target.value)}
placeholder="输入要高亮的文本 (如: 合同编号)"
aria-label="高亮文本"
onKeyPress={(e) => {
if (e.key === 'Enter') {
handleSwitchHighlight();
}
}}
/>
<input
className="px-3 py-1.5 border rounded text-sm w-20"
value={highlightPage}
onChange={(e) => setHighlightPage(e.target.value)}
placeholder="页码"
aria-label="页码"
type="number"
min="1"
onKeyPress={(e) => {
if (e.key === 'Enter') {
handleSwitchHighlight();
}
}}
/>
<button
className="px-4 py-1.5 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-sm font-medium"
onClick={handleSwitchHighlight}
disabled={!isDocumentLoaded}
>
切换高亮
</button>
{previousHighlightText && (
<span className="text-xs text-gray-600">
上次: {previousHighlightText}
</span>
)}
{highlightResult && (
<span className="text-xs text-gray-700 ml-2">{highlightResult}</span>
)}
</div>
{/* 文档加载提示 */}