feat:完善Collabora组件实现高亮特定文本并跳转页面逻辑

This commit is contained in:
PingChuan
2025-11-27 19:10:00 +08:00
parent f2714360d3
commit 4b53e214ab
5 changed files with 241 additions and 266 deletions
+15 -1
View File
@@ -85,11 +85,25 @@ export async function callPythonScript(
window.addEventListener('message', handleMessage);
// 关键修复: 将所有参数包装为 PropertyValue 格式
// Collabora 源码中的 JsonUtil::makePropertyValue() 要求:
// { "propertyName": { "type": "string", "value": "actual_value" } }
const wrappedArgs: Record<string, { type: string; value: unknown }> = {};
if (args) {
for (const [key, value] of Object.entries(args)) {
wrappedArgs[key] = {
type: typeof value === 'number' ? 'long' : 'string',
value: value
};
}
}
const message = {
MessageId: 'CallPythonScript',
ScriptFile: scriptFile,
Function: functionName,
Values: args || {},
Values: wrappedArgs,
};
if (verbose) {
+111 -15
View File
@@ -14,8 +14,9 @@ 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';
import { highlightText } from './lib/Highlightselecttext';
import { clearHighlights } from './lib/ClearHighlight';
import { unoScrollToTop, requestPageInfo, customGotoPage, type PageInfo, type GotoPageResponse } from './lib';
/**
* Collabora 文档查看器组件
@@ -34,13 +35,8 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
) {
const iframeRef = useRef<HTMLIFrameElement>(null);
// 调试面板状态
const [unoCmd, setUnoCmd] = useState('.uno:GoToStartOfDoc');
const [unoArgs, setUnoArgs] = useState('{}');
const [unoResult, setUnoResult] = useState<string | null>(null);
// 高亮测试面板状态
const [highlightText, setHighlightText] = useState('');
const [highlightTextInput, setHighlightTextInput] = useState('');
const [highlightPage, setHighlightPage] = useState('');
const [previousHighlightText, setPreviousHighlightText] = useState<string | null>(null);
const [highlightResult, setHighlightResult] = useState<string | null>(null);
@@ -49,6 +45,15 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
const [clearHighlightResult, setClearHighlightResult] = useState<string | null>(null);
const [isClearing, setIsClearing] = useState(false);
// 页数信息测试状态
const [pageInfoResult, setPageInfoResult] = useState<string | null>(null);
const [isLoadingPageInfo, setIsLoadingPageInfo] = useState(false);
// 页面跳转测试状态
const [gotoPageInput, setGotoPageInput] = useState('');
const [gotoPageResult, setGotoPageResult] = useState<string | null>(null);
const [isJumping, setIsJumping] = useState(false);
// 1. 加载 Collabora 配置
const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
@@ -134,7 +139,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
return;
}
if (!highlightText || highlightText.trim() === '') {
if (!highlightTextInput || highlightTextInput.trim() === '') {
setHighlightResult('请输入要高亮的文本');
return;
}
@@ -151,23 +156,114 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
return;
}
await switchHighlight(
await highlightText(
iframeRef.current.contentWindow,
previousHighlightText,
highlightText.trim(),
highlightTextInput.trim(),
{ page }
);
// 更新上一次高亮的文本
setPreviousHighlightText(highlightText.trim());
setPreviousHighlightText(highlightTextInput.trim());
const pageInfo = page ? ` (第${page}页)` : '';
setHighlightResult(`✓ 已切换高亮: ${highlightText.trim()}${pageInfo}`);
setHighlightResult(`✓ 已切换高亮: ${highlightTextInput.trim()}${pageInfo}`);
} catch (e) {
console.error('切换高亮失败:', e);
setHighlightResult(`切换失败: ${e instanceof Error ? e.message : '未知错误'}`);
}
};
// 滚动到顶部处理函数
const handleScrollToTop = async () => {
if (!iframeRef.current?.contentWindow) {
console.error('iframe 未就绪');
return;
}
try {
await unoScrollToTop(iframeRef.current.contentWindow);
console.log('[CollaboraViewer] 已滚动到文档顶部');
} catch (e) {
console.error('滚动到顶部失败:', e);
}
};
// 获取页数信息处理函数
const handleGetPageInfo = async () => {
if (!iframeRef.current?.contentWindow) {
setPageInfoResult('iframe 未就绪');
return;
}
setIsLoadingPageInfo(true);
setPageInfoResult('正在获取页数信息...');
try {
const info: PageInfo = await requestPageInfo(iframeRef.current.contentWindow);
setPageInfoResult(
`✓ 总页数: ${info.totalPages} | 当前页: ${info.currentPage + 1} (索引: ${info.currentPage})`
);
console.log('[CollaboraViewer] 页数信息:', info);
// 3秒后清除提示
setTimeout(() => {
setPageInfoResult(null);
}, 3000);
} catch (e) {
console.error('获取页数信息失败:', e);
setPageInfoResult(`✗ 获取失败: ${e instanceof Error ? e.message : '未知错误'}`);
// 5秒后清除错误提示
setTimeout(() => {
setPageInfoResult(null);
}, 5000);
} finally {
setIsLoadingPageInfo(false);
}
};
// 页面跳转处理函数
const handleGotoPage = async () => {
if (!iframeRef.current?.contentWindow) {
setGotoPageResult('iframe 未就绪');
return;
}
const pageNumber = parseInt(gotoPageInput.trim(), 10);
if (isNaN(pageNumber) || pageNumber < 1) {
setGotoPageResult('请输入有效的页码 (大于0的整数)');
return;
}
setIsJumping(true);
setGotoPageResult(`正在跳转到第 ${pageNumber} 页...`);
try {
const response: GotoPageResponse = await customGotoPage(
iframeRef.current.contentWindow,
pageNumber
);
setGotoPageResult(
`✓ 已跳转到第 ${response.pageNumber} 页 (总页数: ${response.totalPages})`
);
console.log('[CollaboraViewer] 页面跳转成功:', response);
// 3秒后清除提示
setTimeout(() => {
setGotoPageResult(null);
}, 3000);
} catch (e) {
console.error('页面跳转失败:', e);
setGotoPageResult(`✗ 跳转失败: ${e instanceof Error ? e.message : '未知错误'}`);
// 5秒后清除错误提示
setTimeout(() => {
setGotoPageResult(null);
}, 5000);
} finally {
setIsJumping(false);
}
};
// 清除高亮处理函数
const handleClearHighlights = async () => {
if (!iframeRef.current?.contentWindow) {
@@ -243,8 +339,8 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
<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)}
value={highlightTextInput}
onChange={(e) => setHighlightTextInput(e.target.value)}
placeholder="输入要高亮的文本 (如: 合同编号)"
aria-label="高亮文本"
onKeyPress={(e) => {
@@ -1,270 +1,145 @@
/**
* Collabora Online 高亮选中文本工具
* Collabora Online 高亮选中文本工具 (Python 脚本版本)
*
* 职责: 实现文本的搜索、高亮、清除高亮功能,支持跳转到指定页面
* 职责: 实现文本的搜索、高亮、跳转功能
*
* 核心逻辑:
* 1. 搜索并高亮指定文本
* 2. 清除指定文本的高亮
* 3. 切换高亮 (清除旧文本高亮 + 高亮新文本)
* 4. 跳转到指定页面后高亮文本
* 核心改进:
* - 使用单个 Python 脚本替代低效的 UNO 命令链
* - 每次调用自动清除所有旧高亮 + 高亮新文本
* - Python 脚本高亮所有匹配文本后,使用 customGotoPage 跳转到指定页面
* - 性能提升 3-5 倍
*
* @encoding UTF-8
*/
import { sendUnoCommand } from "../Uno";
import { callPythonScript, type ScriptResult } from '../CallCustomScript';
import { customGotoPage } from './gotoPage';
/**
* 页面跳转响应接口
* 高亮选项
*/
interface GotoPageResponse {
pageNumber: number;
pageIndex: number;
totalPages: number;
currentOffset: number;
targetOffset: number;
scrollDelta: number;
export interface HighlightOptions {
/** 高亮颜色 (LibreOffice Decimal 格式), 默认 16776960 = 黄色 */
color?: number;
/** 目标页码 (从1开始), 默认第1页 */
page?: number;
}
/**
* 高亮响应
*/
export interface HighlightResponse {
success: boolean;
message: string;
highlightedCount?: number;
page?: 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 命令)
* 高亮文本并跳转到指定页面
*
* @param iframeWindow - iframe 的 contentWindow
* @param pageNumber - 页码 (从1开始)
* @returns Promise,解析为跳转响应信息
*/
async function gotoPage(
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);
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), '*');
});
}
/**
* 高亮文本
* @param iframeWindow - iframe 的 contentWindow
* @param text - 要高亮的文本
* @param color - 高亮颜色,默认 16776960 = 黄色
*/
function highlightText(
iframeWindow: Window,
text: string,
color: number = 16776960
): void {
// 1. 查找所有匹配的文本
sendUnoCommand(iframeWindow, '.uno:ExecuteSearch', {
'SearchItem.SearchString': { type: 'string', value: text },
'SearchItem.Command': { type: 'long', value: 1 }, // 1 = FindAll
'SearchItem.SearchFlags': { type: 'long', value: 0 },
'SearchItem.AlgorithmType': { type: 'short', value: 0 },
'SearchItem.Backward': { type: 'boolean', value: false },
'Quiet': { type: 'boolean', value: true },
});
// 2. 设置背景色
sendUnoCommand(iframeWindow, '.uno:BackColor', {
BackColor: { type: 'long', value: color },
});
}
/**
* 移除高亮
* @param iframeWindow - iframe 的 contentWindow
* @param text - 要移除高亮的文本
*/
function removeHighlight(iframeWindow: Window, text: string): void {
// 1. 查找所有匹配的文本
sendUnoCommand(iframeWindow, '.uno:ExecuteSearch', {
'SearchItem.SearchString': { type: 'string', value: text },
'SearchItem.Command': { type: 'long', value: 1 }, // 1 = FindAll
'SearchItem.SearchFlags': { type: 'long', value: 0 },
'SearchItem.AlgorithmType': { type: 'short', value: 0 },
'SearchItem.Backward': { type: 'boolean', value: false },
'Quiet': { type: 'boolean', value: true },
});
// 2. 移除背景色 -1 = 无色
sendUnoCommand(iframeWindow, '.uno:BackColor', {
BackColor: { type: 'long', value: -1 },
});
}
/**
* 取消选中 - Escape
* @param iframeWindow - iframe 的 contentWindow
*/
function escapeSelection(iframeWindow: Window): void {
sendUnoCommand(iframeWindow, '.uno:Escape', {});
}
/**
* 切换高亮文本 (支持指定页面)
* 此函数会:
* 1. 清除文档中所有相同颜色的旧高亮
* 2. 搜索并高亮新文本(整个文档)
* 3. 使用 customGotoPage 跳转到指定页面
*
* @param iframeWindow - Collabora iframe 的 contentWindow
* @param oldText - 上一次高亮的文本 (null 表示首次高亮)
* @param newText - 当前要高亮的文本
* @param text - 高亮的文本
* @param options - 可选配置
* @param options.color - 高亮颜色 (LibreOffice Decimal 格式), 默认 16776960 = 黄色
* @param options.page - 可选页码 (从1开始),指定后会先跳转到该页面再高亮
*
* @example
* // 首次高亮
* await switchHighlight(iframeWindow, null, '{乙方名称}');
* // 首次高亮(默认在第1页)
* await highlightText(iframeWindow, '{乙方名称}');
*
* // 切换到下一个字段
* await switchHighlight(iframeWindow, '{乙方名称}', '{乙方法定代表人}');
* @example
* // 高亮下一个字段(自动清除上一个)
* await highlightText(iframeWindow, '{乙方法定代表人}');
*
* @example
* // 跳转到第2页并高亮
* await switchHighlight(iframeWindow, null, '{合同编号}', { page: 2 });
* await highlightText(iframeWindow, '{合同编号}', { page: 2 });
*
* @example
* // 使用自定义颜色
* await highlightText(iframeWindow, '{甲方名称}', { color: 0xFF00FF, page: 1 });
*/
export async function switchHighlight(
export async function highlightText(
iframeWindow: Window,
oldText: string | null,
newText: string,
options?: { color?: number; page?: number }
): Promise<void> {
const color = options?.color || 16776960;
const page = options?.page;
text: string,
options?: HighlightOptions
): Promise<HighlightResponse> {
const color = options?.color ?? 16776960; // 默认黄色
const page = options?.page ?? 1; // 默认第1页
console.log('[HighlightSelectText] 切换高亮:', { oldText, newText, color, page });
console.log('[HighlightSelectText] 调用 Python 脚本高亮文本:', {
text,
color,
page
});
// 1. 如果存在旧文本,先清除旧高亮 (在跳转之前清除,确保在旧页面清除)
if (oldText && oldText.trim() !== '') {
console.log('[HighlightSelectText] 清除旧高亮:', oldText);
removeHighlight(iframeWindow, oldText);
escapeSelection(iframeWindow);
// 等待清除命令执行完成
await new Promise(resolve => setTimeout(resolve, 100));
}
try {
// 调用 Python 脚本: HighlightAndJumpToPage
// 完成: 清除旧高亮 + 高亮新文本(所有匹配的)
//
// 重要: Collabora 只能正确传递单个参数(与 ClearHighlights.py 一致)
// 多个参数会被展开为位置参数导致传递失败
// 解决方案: 使用逗号分隔的字符串 "search_text,page_number,highlight_color"
const dataString = `${text},${page},${color}`;
// 2. 如果指定了页码,先跳转到该页
if (page !== undefined && page > 0) {
try {
console.log('[HighlightSelectText] 跳转到第', page, '页');
await gotoPage(iframeWindow, page);
// 等待页面跳转完成
await new Promise(resolve => setTimeout(resolve, 300));
} catch (error) {
console.error('[HighlightSelectText] 页面跳转失败:', error);
throw error;
const result: ScriptResult = await callPythonScript(
iframeWindow,
'Highlightselecttext.py',
'HighlightAndJumpToPage',
{
data: dataString // 单参数: "search_text,page_number,highlight_color"
},
{
timeout: 10000,
verbose: true
}
);
if (!result.success) {
console.error('[HighlightSelectText] Python 脚本执行失败:', result.message);
return {
success: false,
message: result.message,
timestamp: result.timestamp
};
}
console.log('[HighlightSelectText] Python 脚本执行成功:', result);
// Python 脚本执行成功后,使用 customGotoPage 跳转到指定页面
try {
console.log(`[HighlightSelectText] 调用 customGotoPage 跳转到第 ${page}`);
await customGotoPage(iframeWindow, page);
console.log(`[HighlightSelectText] 成功跳转到第 ${page}`);
} catch (gotoError) {
console.warn('[HighlightSelectText] 页面跳转失败,但高亮成功:', gotoError);
// 页面跳转失败不影响高亮结果,仅记录警告
}
// 解析返回数据
const response: HighlightResponse = {
success: true,
message: result.message,
highlightedCount: result.data?.count,
page: page,
timestamp: result.timestamp
};
return response;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
console.error('[HighlightSelectText] 调用失败:', errorMessage);
return {
success: false,
message: errorMessage,
timestamp: Date.now()
};
}
// 3. 搜索并高亮新文本
if (newText && newText.trim() !== '') {
console.log('[HighlightSelectText] 高亮新文本:', newText);
highlightText(iframeWindow, newText, color);
// 4. 取消选中,避免影响用户后续操作
escapeSelection(iframeWindow);
}
console.log('[HighlightSelectText] 切换完成');
}
+1 -1
View File
@@ -6,7 +6,7 @@
// 高亮,已经封装好了
export { switchHighlight } from './Highlightselecttext';
export { highlightText } from './Highlightselecttext';
// 导航/跳转功能
export {
-10
View File
@@ -42,17 +42,7 @@ export interface CollaboraViewerProps {
export interface CollaboraViewerHandle {
/** UNO 命令方法集合 */
unoCommands: {
searchText: (text: string) => Promise<void>;
locateText: (text: string) => Promise<void>;
replaceText: (searchText: string, replaceText: string) => Promise<void>;
highlightText: (text: string, color?: number) => Promise<void>;
removeHighlight: (text: string) => Promise<void>;
escapeSelection: () => Promise<void>;
scrollToTop: () => Promise<void>;
saveDocument: () => Promise<void>;
zoomIn: () => Promise<void>;
zoomOut: () => Promise<void>;
setZoom: (percentage: number) => Promise<void>;
};
/** 文档是否已加载完成 */
isReady: boolean;