Merge branch 'PingChuan' into shiy-login
This commit is contained in:
@@ -14,6 +14,7 @@ import { useRef, forwardRef, useImperativeHandle, useState } from 'react';
|
|||||||
import type { CollaboraViewerProps, CollaboraViewerHandle } from './types';
|
import type { CollaboraViewerProps, CollaboraViewerHandle } from './types';
|
||||||
import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
|
import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
|
||||||
import { sendUnoCommand } from './Uno';
|
import { sendUnoCommand } from './Uno';
|
||||||
|
import { switchHighlight } from './lib/Highlightselecttext';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Collabora 文档查看器组件
|
* Collabora 文档查看器组件
|
||||||
@@ -37,6 +38,12 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
|||||||
const [unoArgs, setUnoArgs] = useState('{}');
|
const [unoArgs, setUnoArgs] = useState('{}');
|
||||||
const [unoResult, setUnoResult] = useState<string | null>(null);
|
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 配置
|
// 1. 加载 Collabora 配置
|
||||||
const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
|
const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
|
||||||
|
|
||||||
@@ -80,45 +87,86 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送 UNO 命令的处理函数
|
// 发送 UNO 命令的处理函数(测试用)
|
||||||
const sendUno = () => {
|
// 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) {
|
if (!iframeRef.current?.contentWindow) {
|
||||||
setUnoResult('iframe 不可用');
|
setHighlightResult('iframe 未就绪');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let args: Record<string, unknown> = {};
|
if (!highlightText || highlightText.trim() === '') {
|
||||||
const raw = (unoArgs || '').trim();
|
setHighlightResult('请输入要高亮的文本');
|
||||||
if (raw !== '') {
|
return;
|
||||||
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 {
|
try {
|
||||||
// 使用正确的 sendUnoCommand 方法
|
// 解析页码 (可选)
|
||||||
sendUnoCommand(iframeRef.current.contentWindow, unoCmd, args);
|
const page = highlightPage && highlightPage.trim() !== ''
|
||||||
setUnoResult(`已发送: ${unoCmd}`);
|
? parseInt(highlightPage.trim(), 10)
|
||||||
console.log('[UNO Debug] 发送命令:', unoCmd, args);
|
: 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) {
|
} catch (e) {
|
||||||
console.error('发送 UNO 失败:', e);
|
console.error('切换高亮失败:', e);
|
||||||
setUnoResult('发送失败,请查看控制台');
|
setHighlightResult(`切换失败: ${e instanceof Error ? e.message : '未知错误'}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="collabora-viewer relative w-full h-full min-h-[600px]">
|
<div className="collabora-viewer relative w-full h-full min-h-[600px]">
|
||||||
{/* UNO 命令测试面板 */}
|
{/* 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
|
<input
|
||||||
className="px-2 py-1 border rounded text-sm w-48"
|
className="px-2 py-1 border rounded text-sm w-48"
|
||||||
value={unoCmd}
|
value={unoCmd}
|
||||||
@@ -140,6 +188,51 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
|||||||
发送 UNO
|
发送 UNO
|
||||||
</button>
|
</button>
|
||||||
{unoResult && <span className="text-xs text-gray-500 ml-2">{unoResult}</span>}
|
{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>
|
</div>
|
||||||
|
|
||||||
{/* 文档加载提示 */}
|
{/* 文档加载提示 */}
|
||||||
|
|||||||
@@ -9,23 +9,22 @@
|
|||||||
* @encoding UTF-8
|
* @encoding UTF-8
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { RefObject, useCallback, useEffect, useState, useMemo } from 'react';
|
|
||||||
import { useFetcher } from '@remix-run/react';
|
import { useFetcher } from '@remix-run/react';
|
||||||
import { toastService } from '../ui/Toast';
|
import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import type { CollaboraConfig } from './types';
|
|
||||||
import {
|
|
||||||
unoSearchText,
|
|
||||||
unoReplaceText,
|
|
||||||
unoHighlightText,
|
|
||||||
unoRemoveHighlight,
|
|
||||||
unoEscape,
|
|
||||||
unoScrollToTop,
|
|
||||||
unoSave,
|
|
||||||
unoZoomPlus,
|
|
||||||
unoZoomMinus,
|
|
||||||
unoSetZoom,
|
|
||||||
} from './lib';
|
|
||||||
import { COLLABORA_URL } from '~/config/api-config';
|
import { COLLABORA_URL } from '~/config/api-config';
|
||||||
|
import { toastService } from '../ui/Toast';
|
||||||
|
import {
|
||||||
|
unoEscape,
|
||||||
|
// unoHighlightText,
|
||||||
|
unoReplaceText,
|
||||||
|
unoSave,
|
||||||
|
unoScrollToTop,
|
||||||
|
unoSearchText,
|
||||||
|
unoSetZoom,
|
||||||
|
unoZoomMinus,
|
||||||
|
unoZoomPlus,
|
||||||
|
} from './lib';
|
||||||
|
import type { CollaboraConfig } from './types';
|
||||||
|
|
||||||
// ==================== 1. 配置加载 ====================
|
// ==================== 1. 配置加载 ====================
|
||||||
|
|
||||||
@@ -142,32 +141,32 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
|
|||||||
[iframeRef]
|
[iframeRef]
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 定位文本(搜索 + 立即取消选中)
|
// * 定位文本(搜索 + 立即取消选中)
|
||||||
* 用于"只看不改"的场景,避免蓝色选中背景
|
// * 用于"只看不改"的场景,避免蓝色选中背景
|
||||||
*/
|
// */
|
||||||
const locateText = useCallback(
|
// const locateText = useCallback(
|
||||||
async (text: string) => {
|
// async (text: string) => {
|
||||||
if (!iframeRef.current?.contentWindow) {
|
// if (!iframeRef.current?.contentWindow) {
|
||||||
console.warn('[UNO] iframe 不可用');
|
// console.warn('[UNO] iframe 不可用');
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
|
|
||||||
console.log(`[UNO] 定位文本(无选中): "${text}"`);
|
// console.log(`[UNO] 定位文本(无选中): "${text}"`);
|
||||||
|
|
||||||
// 1. 执行搜索(滚动到目标并选中)
|
// // 1. 执行搜索(滚动到目标并选中)
|
||||||
await searchText(text);
|
// await searchText(text);
|
||||||
|
|
||||||
// 2. 等待渲染完成
|
// // 2. 等待渲染完成
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
// await new Promise((resolve) => setTimeout(resolve, 50));
|
||||||
|
|
||||||
// 3. 取消选中(去除蓝色背景,保留视图位置)
|
// // 3. 取消选中(去除蓝色背景,保留视图位置)
|
||||||
unoEscape(iframeRef.current.contentWindow);
|
// unoEscape(iframeRef.current.contentWindow);
|
||||||
|
|
||||||
console.log(`[UNO] 定位完成,已取消选中`);
|
// console.log(`[UNO] 定位完成,已取消选中`);
|
||||||
},
|
// },
|
||||||
[searchText, iframeRef]
|
// [searchText, iframeRef]
|
||||||
);
|
// );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 替换文本(ReplaceAll)
|
* 替换文本(ReplaceAll)
|
||||||
@@ -185,37 +184,37 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
|
|||||||
[iframeRef]
|
[iframeRef]
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 高亮文本
|
// * 高亮文本
|
||||||
*/
|
// */
|
||||||
const highlightText = useCallback(
|
// const highlightText = useCallback(
|
||||||
async (text: string, color?: number) => {
|
// async (text: string, color?: number) => {
|
||||||
if (!iframeRef.current?.contentWindow) {
|
// if (!iframeRef.current?.contentWindow) {
|
||||||
console.warn('[UNO] iframe 不可用');
|
// console.warn('[UNO] iframe 不可用');
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
console.log(`[UNO] 高亮文本: "${text}"`);
|
// console.log(`[UNO] 高亮文本: "${text}"`);
|
||||||
await unoHighlightText(iframeRef.current.contentWindow, text, color);
|
// await unoHighlightText(iframeRef.current.contentWindow, text, color);
|
||||||
await new Promise((resolve) => setTimeout(resolve, 200));
|
// await new Promise((resolve) => setTimeout(resolve, 200));
|
||||||
},
|
// },
|
||||||
[iframeRef]
|
// [iframeRef]
|
||||||
);
|
// );
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 移除高亮
|
// * 移除高亮
|
||||||
*/
|
// */
|
||||||
const removeHighlight = useCallback(
|
// const removeHighlight = useCallback(
|
||||||
async (text: string) => {
|
// async (text: string) => {
|
||||||
if (!iframeRef.current?.contentWindow) {
|
// if (!iframeRef.current?.contentWindow) {
|
||||||
console.warn('[UNO] iframe 不可用');
|
// console.warn('[UNO] iframe 不可用');
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
console.log(`[UNO] 移除高亮: "${text}"`);
|
// console.log(`[UNO] 移除高亮: "${text}"`);
|
||||||
await unoRemoveHighlight(iframeRef.current.contentWindow, text);
|
// await unoRemoveHighlight(iframeRef.current.contentWindow, text);
|
||||||
await new Promise((resolve) => setTimeout(resolve, 200));
|
// await new Promise((resolve) => setTimeout(resolve, 200));
|
||||||
},
|
// },
|
||||||
[iframeRef]
|
// [iframeRef]
|
||||||
);
|
// );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 取消选中(Escape)
|
* 取消选中(Escape)
|
||||||
@@ -309,10 +308,10 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
|
|||||||
return useMemo(
|
return useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
searchText,
|
searchText,
|
||||||
locateText,
|
// locateText,
|
||||||
replaceText,
|
replaceText,
|
||||||
highlightText,
|
// highlightText,
|
||||||
removeHighlight,
|
// removeHighlight,
|
||||||
escapeSelection,
|
escapeSelection,
|
||||||
scrollToTop,
|
scrollToTop,
|
||||||
saveDocument,
|
saveDocument,
|
||||||
@@ -322,10 +321,10 @@ export function useCollaboraUnoCommands(iframeRef: RefObject<HTMLIFrameElement>)
|
|||||||
}),
|
}),
|
||||||
[
|
[
|
||||||
searchText,
|
searchText,
|
||||||
locateText,
|
// locateText,
|
||||||
replaceText,
|
replaceText,
|
||||||
highlightText,
|
// highlightText,
|
||||||
removeHighlight,
|
// removeHighlight,
|
||||||
escapeSelection,
|
escapeSelection,
|
||||||
scrollToTop,
|
scrollToTop,
|
||||||
saveDocument,
|
saveDocument,
|
||||||
|
|||||||
@@ -0,0 +1,270 @@
|
|||||||
|
/**
|
||||||
|
* Collabora Online 高亮选中文本工具
|
||||||
|
*
|
||||||
|
* 职责: 实现文本的搜索、高亮、清除高亮功能,支持跳转到指定页面
|
||||||
|
*
|
||||||
|
* 核心逻辑:
|
||||||
|
* 1. 搜索并高亮指定文本
|
||||||
|
* 2. 清除指定文本的高亮
|
||||||
|
* 3. 切换高亮 (清除旧文本高亮 + 高亮新文本)
|
||||||
|
* 4. 跳转到指定页面后高亮文本
|
||||||
|
*
|
||||||
|
* @encoding UTF-8
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { sendUnoCommand } from "../Uno";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面跳转响应接口
|
||||||
|
*/
|
||||||
|
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 命令)
|
||||||
|
*
|
||||||
|
* @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', {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换高亮文本 (支持指定页面)
|
||||||
|
*
|
||||||
|
* @param iframeWindow - Collabora iframe 的 contentWindow
|
||||||
|
* @param oldText - 上一次高亮的文本 (null 表示首次高亮)
|
||||||
|
* @param newText - 当前要高亮的文本
|
||||||
|
* @param options - 可选配置
|
||||||
|
* @param options.color - 高亮颜色 (LibreOffice Decimal 格式), 默认 16776960 = 黄色
|
||||||
|
* @param options.page - 可选页码 (从1开始),指定后会先跳转到该页面再高亮
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* // 首次高亮
|
||||||
|
* await switchHighlight(iframeWindow, null, '{乙方名称}');
|
||||||
|
*
|
||||||
|
* // 切换到下一个字段
|
||||||
|
* await switchHighlight(iframeWindow, '{乙方名称}', '{乙方法定代表人}');
|
||||||
|
*
|
||||||
|
* // 跳转到第2页并高亮
|
||||||
|
* await switchHighlight(iframeWindow, null, '{合同编号}', { page: 2 });
|
||||||
|
*/
|
||||||
|
export async function switchHighlight(
|
||||||
|
iframeWindow: Window,
|
||||||
|
oldText: string | null,
|
||||||
|
newText: string,
|
||||||
|
options?: { color?: number; page?: number }
|
||||||
|
): Promise<void> {
|
||||||
|
const color = options?.color || 16776960;
|
||||||
|
const page = options?.page;
|
||||||
|
|
||||||
|
console.log('[HighlightSelectText] 切换高亮:', { oldText, newText, color, page });
|
||||||
|
|
||||||
|
// 1. 如果存在旧文本,先清除旧高亮 (在跳转之前清除,确保在旧页面清除)
|
||||||
|
if (oldText && oldText.trim() !== '') {
|
||||||
|
console.log('[HighlightSelectText] 清除旧高亮:', oldText);
|
||||||
|
removeHighlight(iframeWindow, oldText);
|
||||||
|
escapeSelection(iframeWindow);
|
||||||
|
// 等待清除命令执行完成
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 100));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 搜索并高亮新文本
|
||||||
|
if (newText && newText.trim() !== '') {
|
||||||
|
console.log('[HighlightSelectText] 高亮新文本:', newText);
|
||||||
|
highlightText(iframeWindow, newText, color);
|
||||||
|
|
||||||
|
// 4. 取消选中,避免影响用户后续操作
|
||||||
|
escapeSelection(iframeWindow);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[HighlightSelectText] 切换完成');
|
||||||
|
}
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
/**
|
|
||||||
* Collabora 高亮功能模块
|
|
||||||
*
|
|
||||||
* @encoding UTF-8
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { sendUnoCommand } from '../Uno';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 高亮文本
|
|
||||||
* @param iframeWindow - iframe 的 contentWindow
|
|
||||||
* @param text - 要高亮的文本
|
|
||||||
* @param color - 高亮颜色,默认 16776960 = 黄色
|
|
||||||
*/
|
|
||||||
export function unoHighlightText(
|
|
||||||
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 - 要移除高亮的文本
|
|
||||||
*/
|
|
||||||
export function unoRemoveHighlight(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
|
|
||||||
*/
|
|
||||||
export function unoEscape(iframeWindow: Window): void {
|
|
||||||
sendUnoCommand(iframeWindow, '.uno:Escape', {});
|
|
||||||
}
|
|
||||||
@@ -4,22 +4,23 @@
|
|||||||
* @encoding UTF-8
|
* @encoding UTF-8
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// 搜索功能
|
// // 搜索功能
|
||||||
export { unoSearchText } from './search';
|
// export { unoSearchText } from './search';
|
||||||
|
|
||||||
// 替换功能
|
// // 替换功能
|
||||||
export { unoReplaceText } from './replace';
|
// export { unoReplaceText } from './replace';
|
||||||
|
|
||||||
// 高亮功能
|
|
||||||
export { unoHighlightText, unoRemoveHighlight, unoEscape } from './highlight';
|
// 高亮,已经封装好了
|
||||||
|
export { switchHighlight } from './Highlightselecttext';
|
||||||
|
|
||||||
// 导航/跳转功能
|
// 导航/跳转功能
|
||||||
export {
|
export {
|
||||||
unoScrollToTop,
|
unoScrollToTop
|
||||||
} from './navigation';
|
} from './navigation';
|
||||||
|
|
||||||
// 缩放功能
|
// 缩放功能
|
||||||
export { unoZoomPlus, unoZoomMinus, unoSetZoom } from './zoom';
|
// export { unoSetZoom, unoZoomMinus, unoZoomPlus } from './zoom';
|
||||||
|
|
||||||
// 文档操作
|
// 文档操作
|
||||||
export { unoSave } from './document';
|
export { unoSave } from './document';
|
||||||
@@ -27,11 +28,12 @@ export { unoSave } from './document';
|
|||||||
// 页数信息
|
// 页数信息
|
||||||
export {
|
export {
|
||||||
requestPageInfo,
|
requestPageInfo,
|
||||||
type PageInfo,
|
type PageInfo
|
||||||
} from './pageInfo';
|
} from './pageInfo';
|
||||||
|
|
||||||
// 自定义页面跳转功能
|
// 自定义页面跳转功能
|
||||||
export {
|
export {
|
||||||
customGotoPage,
|
customGotoPage,
|
||||||
type GotoPageResponse,
|
type GotoPageResponse
|
||||||
} from './gotoPage';
|
} from './gotoPage';
|
||||||
|
|
||||||
|
|||||||
@@ -1,29 +0,0 @@
|
|||||||
/**
|
|
||||||
* Collabora 替换功能模块
|
|
||||||
*
|
|
||||||
* @encoding UTF-8
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { sendUnoCommand } from '../Uno';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 替换文本
|
|
||||||
* @param iframeWindow - iframe 的 contentWindow
|
|
||||||
* @param searchText - 要搜索的文本
|
|
||||||
* @param replaceText - 替换后的文本
|
|
||||||
*/
|
|
||||||
export function unoReplaceText(
|
|
||||||
iframeWindow: Window,
|
|
||||||
searchText: string,
|
|
||||||
replaceText: string
|
|
||||||
): void {
|
|
||||||
sendUnoCommand(iframeWindow, '.uno:ExecuteSearch', {
|
|
||||||
'SearchItem.SearchString': { type: 'string', value: searchText },
|
|
||||||
'SearchItem.ReplaceString': { type: 'string', value: replaceText },
|
|
||||||
'SearchItem.Command': { type: 'long', value: 3 }, // 3 = ReplaceAll
|
|
||||||
'SearchItem.AlgorithmType': { type: 'short', value: 0 },
|
|
||||||
'SearchItem.SearchFlags': { type: 'long', value: 0 },
|
|
||||||
'SearchItem.Backward': { type: 'boolean', value: false },
|
|
||||||
'Quiet': { type: 'boolean', value: true },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
/**
|
|
||||||
* Collabora 搜索功能模块
|
|
||||||
*
|
|
||||||
* @encoding UTF-8
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { sendUnoCommand } from '../Uno';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 搜索文本
|
|
||||||
* @param iframeWindow - iframe 的 contentWindow
|
|
||||||
* @param text - 要搜索的文本
|
|
||||||
*/
|
|
||||||
export function unoSearchText(iframeWindow: Window, text: string): void {
|
|
||||||
sendUnoCommand(iframeWindow, '.uno:ExecuteSearch', {
|
|
||||||
'SearchItem.SearchString': { type: 'string', value: text },
|
|
||||||
'SearchItem.Command': { type: 'long', value: 1 }, // 1 = Search Next (搜索下一个)
|
|
||||||
'SearchItem.Backward': { type: 'boolean', value: false },
|
|
||||||
'SearchItem.Pattern': { type: 'boolean', value: false },
|
|
||||||
'SearchItem.Content': { type: 'boolean', value: false },
|
|
||||||
'SearchItem.AsianOptions': { type: 'boolean', value: false },
|
|
||||||
'SearchItem.AlgorithmType': { type: 'short', value: 0 }, // 普通搜索
|
|
||||||
'SearchItem.SearchFlags': { type: 'long', value: 0 },
|
|
||||||
'SearchItem.Start': { type: 'boolean', value: true }, // 从头开始搜索
|
|
||||||
'SearchItem.Quiet': { type: 'boolean', value: true }, // 静默模式
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,37 +1,37 @@
|
|||||||
/**
|
// /**
|
||||||
* Collabora 缩放功能模块
|
// * Collabora 缩放功能模块
|
||||||
*
|
// *
|
||||||
* @encoding UTF-8
|
// * @encoding UTF-8
|
||||||
*/
|
// */
|
||||||
|
|
||||||
import { sendUnoCommand } from '../Uno';
|
// import { sendUnoCommand } from '../Uno';
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 放大文档(固定步长)
|
// * 放大文档(固定步长)
|
||||||
* @param iframeWindow - iframe 的 contentWindow
|
// * @param iframeWindow - iframe 的 contentWindow
|
||||||
*/
|
// */
|
||||||
export function unoZoomPlus(iframeWindow: Window): void {
|
// export function unoZoomPlus(iframeWindow: Window): void {
|
||||||
sendUnoCommand(iframeWindow, '.uno:ZoomPlus', {});
|
// sendUnoCommand(iframeWindow, '.uno:ZoomPlus', {});
|
||||||
}
|
// }
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 缩小文档(固定步长)
|
// * 缩小文档(固定步长)
|
||||||
* @param iframeWindow - iframe 的 contentWindow
|
// * @param iframeWindow - iframe 的 contentWindow
|
||||||
*/
|
// */
|
||||||
export function unoZoomMinus(iframeWindow: Window): void {
|
// export function unoZoomMinus(iframeWindow: Window): void {
|
||||||
sendUnoCommand(iframeWindow, '.uno:ZoomMinus', {});
|
// sendUnoCommand(iframeWindow, '.uno:ZoomMinus', {});
|
||||||
}
|
// }
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 设置文档缩放比例
|
// * 设置文档缩放比例
|
||||||
* @param iframeWindow - iframe 的 contentWindow
|
// * @param iframeWindow - iframe 的 contentWindow
|
||||||
* @param percentage - 缩放百分比(例如:100 表示 100%)
|
// * @param percentage - 缩放百分比(例如:100 表示 100%)
|
||||||
*/
|
// */
|
||||||
export function unoSetZoom(iframeWindow: Window, percentage: number): void {
|
// export function unoSetZoom(iframeWindow: Window, percentage: number): void {
|
||||||
sendUnoCommand(iframeWindow, '.uno:Zoom', {
|
// sendUnoCommand(iframeWindow, '.uno:Zoom', {
|
||||||
Zoom: {
|
// Zoom: {
|
||||||
type: 'short',
|
// type: 'short',
|
||||||
value: percentage,
|
// value: percentage,
|
||||||
},
|
// },
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|||||||
Reference in New Issue
Block a user