feat: 1. 实现一键替换。
2. 优化追加附件和模板上传的样式。
This commit is contained in:
@@ -43,6 +43,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
userName = '',
|
||||
targetPage,
|
||||
highlightText,
|
||||
aiSuggestionReplace,
|
||||
},
|
||||
ref
|
||||
) {
|
||||
@@ -50,6 +51,11 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
// 保存 iframe 的 contentWindow 引用,用于组件卸载时清除高亮
|
||||
const iframeWindowRef = useRef<Window | null>(null);
|
||||
|
||||
// 搜索替换面板显示状态
|
||||
const [showSearchReplacePanel, setShowSearchReplacePanel] = useState(false);
|
||||
// 标记是否应该自动执行搜索
|
||||
const shouldAutoSearchRef = useRef(false);
|
||||
|
||||
// 高亮测试面板状态
|
||||
const [highlightTextInput, setHighlightTextInput] = useState('');
|
||||
const [highlightPage, setHighlightPage] = useState('');
|
||||
@@ -79,6 +85,12 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
const [replaceText, setReplaceText] = useState('');
|
||||
const [searchReplaceResult, setSearchReplaceResult] = useState<string | null>(null);
|
||||
const [replaceAllMode, setReplaceAllMode] = useState(false);
|
||||
const [searchReplacePageNumber, setSearchReplacePageNumber] = useState('');
|
||||
// 记录上一次搜索的参数,用于判断是否需要重新跳转页面
|
||||
const [lastSearchParams, setLastSearchParams] = useState<{
|
||||
text: string;
|
||||
page: string;
|
||||
}>({ text: '', page: '' });
|
||||
|
||||
// 页面定点替换状态
|
||||
const [replaceInPageNumber, setReplaceInPageNumber] = useState('');
|
||||
@@ -97,18 +109,18 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
useEffect(() => {
|
||||
if (isDocumentLoaded && iframeRef.current?.contentWindow) {
|
||||
iframeWindowRef.current = iframeRef.current.contentWindow;
|
||||
console.log('[CollaboraViewer] 已保存 iframe window 引用');
|
||||
// console.log('[CollaboraViewer] 已保存 iframe window 引用');
|
||||
|
||||
// 🔥 文档加载完成后主动清除一次高亮(防止缓存的高亮状态)
|
||||
console.log('[CollaboraViewer] 🧹 文档加载完成,清除可能存在的缓存高亮');
|
||||
// console.log('[CollaboraViewer] 🧹 文档加载完成,清除可能存在的缓存高亮');
|
||||
clearHighlights(iframeRef.current.contentWindow, {
|
||||
color: 16776960,
|
||||
timeout: 5000,
|
||||
}).then((result) => {
|
||||
if (result.count && result.count > 0) {
|
||||
console.log(`[CollaboraViewer] ✓ 清除了 ${result.count} 个缓存的高亮区域`);
|
||||
// console.log(`[CollaboraViewer] ✓ 清除了 ${result.count} 个缓存的高亮区域`);
|
||||
} else {
|
||||
console.log('[CollaboraViewer] ✓ 文档无缓存高亮,已确认干净');
|
||||
// console.log('[CollaboraViewer] ✓ 文档无缓存高亮,已确认干净');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.warn('[CollaboraViewer] ⚠️ 清除缓存高亮失败:', error);
|
||||
@@ -128,12 +140,12 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
clearAllHighlights: async () => {
|
||||
const savedWindow = iframeWindowRef.current || iframeRef.current?.contentWindow;
|
||||
if (savedWindow) {
|
||||
console.log('[CollaboraViewer] 🧹 父组件调用清除高亮');
|
||||
// console.log('[CollaboraViewer] 🧹 父组件调用清除高亮');
|
||||
await clearHighlights(savedWindow, {
|
||||
color: 16776960,
|
||||
timeout: 5000,
|
||||
});
|
||||
console.log('[CollaboraViewer] ✓ 清除高亮完成');
|
||||
// console.log('[CollaboraViewer] ✓ 清除高亮完成');
|
||||
} else {
|
||||
console.warn('[CollaboraViewer] ⚠️ 无法清除高亮:iframe window 不可用');
|
||||
}
|
||||
@@ -155,7 +167,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
const textToHighlight = highlightText.trim();
|
||||
|
||||
// 🔥 在高亮新内容之前,先清除之前的所有高亮
|
||||
console.log('[CollaboraViewer] 清除旧高亮...');
|
||||
// console.log('[CollaboraViewer] 清除旧高亮...');
|
||||
await clearHighlights(iframeWindow, {
|
||||
color: 16776960, // 黄色
|
||||
timeout: 5000,
|
||||
@@ -207,6 +219,48 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 7. 监听 AI 建议替换参数变化,设置搜索参数
|
||||
useEffect(() => {
|
||||
if (!aiSuggestionReplace || !isDocumentLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[CollaboraViewer] 收到 AI 建议替换参数:', aiSuggestionReplace);
|
||||
|
||||
const { searchText: newSearchText, replaceText: newReplaceText, pageNumber } = aiSuggestionReplace;
|
||||
|
||||
// 显示搜索替换面板
|
||||
setShowSearchReplacePanel(true);
|
||||
|
||||
// 设置搜索、替换和页码输入框的值
|
||||
setSearchText(newSearchText);
|
||||
setReplaceText(newReplaceText);
|
||||
setSearchReplacePageNumber(String(pageNumber));
|
||||
|
||||
// 设置自动搜索标志
|
||||
shouldAutoSearchRef.current = true;
|
||||
|
||||
console.log('[CollaboraViewer] 已设置搜索参数,等待状态更新后自动执行查找');
|
||||
}, [aiSuggestionReplace, isDocumentLoaded]);
|
||||
|
||||
// 8. 当搜索参数更新完成后,自动执行查找
|
||||
useEffect(() => {
|
||||
if (shouldAutoSearchRef.current && searchText && searchReplacePageNumber && isDocumentLoaded) {
|
||||
console.log('[CollaboraViewer] 状态更新完成,执行自动查找:', { searchText, searchReplacePageNumber });
|
||||
|
||||
// 重置标志
|
||||
shouldAutoSearchRef.current = false;
|
||||
|
||||
// 延迟执行,确保 DOM 更新完成
|
||||
const timer = setTimeout(() => {
|
||||
// console.log('[CollaboraViewer] 开始执行自动查找操作');
|
||||
handleSearchNext();
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [searchText, searchReplacePageNumber, isDocumentLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// 加载中状态
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -270,7 +324,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
// 高亮测试处理函数
|
||||
const handleSwitchHighlight = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setHighlightResult('iframe 未就绪');
|
||||
// setHighlightResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -316,7 +370,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
|
||||
try {
|
||||
await unoScrollToTop(iframeRef.current.contentWindow);
|
||||
console.log('[CollaboraViewer] 已滚动到文档顶部');
|
||||
// console.log('[CollaboraViewer] 已滚动到文档顶部');
|
||||
} catch (e) {
|
||||
console.error('滚动到顶部失败:', e);
|
||||
}
|
||||
@@ -325,7 +379,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
// 获取页数信息处理函数
|
||||
const handleGetPageInfo = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setPageInfoResult('iframe 未就绪');
|
||||
// setPageInfoResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -359,7 +413,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
// 页面跳转处理函数
|
||||
const handleGotoPage = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setGotoPageResult('iframe 未就绪');
|
||||
// setGotoPageResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -370,7 +424,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
}
|
||||
|
||||
setIsJumping(true);
|
||||
setGotoPageResult(`正在跳转到第 ${pageNumber} 页...`);
|
||||
// setGotoPageResult(`正在跳转到第 ${pageNumber} 页...`);
|
||||
|
||||
try {
|
||||
const response: GotoPageResponse = await customGotoPage(
|
||||
@@ -380,7 +434,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
setGotoPageResult(
|
||||
`✓ 已跳转到第 ${response.pageNumber} 页 (总页数: ${response.totalPages})`
|
||||
);
|
||||
console.log('[CollaboraViewer] 页面跳转成功:', response);
|
||||
// console.log('[CollaboraViewer] 页面跳转成功:', response);
|
||||
|
||||
// 3秒后清除提示
|
||||
setTimeout(() => {
|
||||
@@ -402,7 +456,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
// 清除高亮处理函数
|
||||
const handleClearHighlights = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setClearHighlightResult('iframe 未就绪');
|
||||
// setClearHighlightResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -417,7 +471,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
|
||||
if (result.success) {
|
||||
setClearHighlightResult(`✓ ${result.message}`);
|
||||
console.log('[CollaboraViewer] 清除高亮成功:', result);
|
||||
// console.log('[CollaboraViewer] 清除高亮成功:', result);
|
||||
|
||||
// 清空之前记录的高亮文本
|
||||
setPreviousHighlightText(null);
|
||||
@@ -444,9 +498,9 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
};
|
||||
|
||||
// 搜索下一个处理函数
|
||||
const handleSearchNext = () => {
|
||||
const handleSearchNext = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setSearchReplaceResult('iframe 未就绪');
|
||||
// setSearchReplaceResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -456,8 +510,48 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
}
|
||||
|
||||
try {
|
||||
unoSearchNext(iframeRef.current.contentWindow, searchText.trim());
|
||||
setSearchReplaceResult(`✓ 搜索: "${searchText.trim()}"`);
|
||||
const currentSearchText = searchText.trim();
|
||||
const currentPageNumber = searchReplacePageNumber.trim();
|
||||
|
||||
// 判断是否需要跳转页面(搜索文本或页码发生变化)
|
||||
const needsPageJump =
|
||||
lastSearchParams.text !== currentSearchText ||
|
||||
lastSearchParams.page !== currentPageNumber;
|
||||
|
||||
// 如果指定了页码且需要跳转,先跳转到该页
|
||||
if (needsPageJump && currentPageNumber !== '') {
|
||||
const pageNumber = parseInt(currentPageNumber, 10);
|
||||
if (isNaN(pageNumber) || pageNumber < 1) {
|
||||
setSearchReplaceResult('✗ 页码必须是大于0的整数');
|
||||
return;
|
||||
}
|
||||
|
||||
// setSearchReplaceResult(`正在跳转到第 ${pageNumber} 页...`);
|
||||
try {
|
||||
await customGotoPage(iframeRef.current.contentWindow, pageNumber);
|
||||
// 短暂延迟等待页面渲染
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
} catch (e) {
|
||||
console.error('跳转页面失败:', e);
|
||||
setSearchReplaceResult(`✗ 跳转失败: ${e instanceof Error ? e.message : '未知错误'}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 执行搜索(如果是页面内循环查找,会自动找到下一个匹配项)
|
||||
unoSearchNext(iframeRef.current.contentWindow, currentSearchText);
|
||||
|
||||
// 更新搜索参数记录
|
||||
setLastSearchParams({
|
||||
text: currentSearchText,
|
||||
page: currentPageNumber
|
||||
});
|
||||
|
||||
// const pageInfo = currentPageNumber !== ''
|
||||
// ? ` (第${currentPageNumber}页内循环查找)`
|
||||
// : '';
|
||||
// const jumpInfo = needsPageJump && currentPageNumber !== '' ? ' [已跳转]' : '';
|
||||
// setSearchReplaceResult(`✓ 搜索: "${currentSearchText}"${pageInfo}${jumpInfo}`);
|
||||
|
||||
// 3秒后清除提示
|
||||
setTimeout(() => setSearchReplaceResult(null), 3000);
|
||||
@@ -468,9 +562,9 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
};
|
||||
|
||||
// 替换处理函数
|
||||
const handleReplace = () => {
|
||||
const handleReplace = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setSearchReplaceResult('iframe 未就绪');
|
||||
// setSearchReplaceResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -480,12 +574,50 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
}
|
||||
|
||||
try {
|
||||
// 如果指定了页码,先跳转到该页
|
||||
if (searchReplacePageNumber && searchReplacePageNumber.trim() !== '') {
|
||||
const pageNumber = parseInt(searchReplacePageNumber.trim(), 10);
|
||||
if (isNaN(pageNumber) || pageNumber < 1) {
|
||||
setSearchReplaceResult('✗ 页码必须是大于0的整数');
|
||||
return;
|
||||
}
|
||||
|
||||
// setSearchReplaceResult(`正在跳转到第 ${pageNumber} 页...`);
|
||||
try {
|
||||
await customGotoPage(iframeRef.current.contentWindow, pageNumber);
|
||||
// 短暂延迟等待页面渲染
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
} catch (e) {
|
||||
console.error('跳转页面失败:', e);
|
||||
setSearchReplaceResult(`✗ 跳转失败: ${e instanceof Error ? e.message : '未知错误'}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const pageInfo = searchReplacePageNumber && searchReplacePageNumber.trim() !== ''
|
||||
? ` (第${searchReplacePageNumber}页)`
|
||||
: '';
|
||||
|
||||
if (replaceAllMode) {
|
||||
// 替换全部
|
||||
unoReplaceAll(iframeRef.current.contentWindow, searchText.trim(), replaceText);
|
||||
setSearchReplaceResult(`✓ 已替换全部: "${searchText.trim()}" → "${replaceText}"`);
|
||||
setSearchReplaceResult(`✓ 已替换全部: "${searchText.trim()}" → "${replaceText}"${pageInfo}`);
|
||||
} else {
|
||||
// 替换当前选中项:先搜索,再替换
|
||||
console.log('[handleReplace] 开始替换流程:先搜索,再替换');
|
||||
|
||||
// 步骤1:先执行搜索,确保文本被选中
|
||||
unoSearchNext(iframeRef.current.contentWindow, searchText.trim());
|
||||
|
||||
// 步骤2:等待搜索完成后执行替换
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
// 步骤3:执行替换
|
||||
unoReplaceCurrent(iframeRef.current.contentWindow, searchText.trim(), replaceText);
|
||||
setSearchReplaceResult(`✓ 已替换: "${searchText.trim()}" → "${replaceText}"`);
|
||||
|
||||
setSearchReplaceResult(`✓ 已替换: "${searchText.trim()}" → "${replaceText}"${pageInfo}`);
|
||||
|
||||
console.log('[handleReplace] 替换完成');
|
||||
}
|
||||
|
||||
// 3秒后清除提示
|
||||
@@ -504,6 +636,8 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
|
||||
try {
|
||||
unoCancelSearch(iframeRef.current.contentWindow);
|
||||
// 重置搜索参数记录,下次搜索会重新定位
|
||||
setLastSearchParams({ text: '', page: '' });
|
||||
setSearchReplaceResult('✓ 已取消搜索');
|
||||
setTimeout(() => setSearchReplaceResult(null), 2000);
|
||||
} catch (e) {
|
||||
@@ -514,7 +648,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
// 页面定点替换处理函数
|
||||
const handleReplaceInPage = async () => {
|
||||
if (!iframeRef.current?.contentWindow) {
|
||||
setReplaceInPageResult('iframe 未就绪');
|
||||
// setReplaceInPageResult('iframe 未就绪');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -561,8 +695,8 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
|
||||
return (
|
||||
<div className="collabora-viewer relative w-full h-full min-h-[600px]">
|
||||
{/* UNO 命令测试面板 */}
|
||||
<div className="absolute top-2 right-2 z-50 bg-white bg-opacity-95 px-3 py-2 rounded shadow-lg flex items-center gap-2 border border-gray-200">
|
||||
{/* UNO 命令测试面板 - 临时隐藏 */}
|
||||
{/* <div className="absolute top-2 right-2 z-50 bg-white bg-opacity-95 px-3 py-2 rounded shadow-lg flex items-center gap-2 border border-gray-200">
|
||||
<span className="text-xs text-gray-500 font-medium">UNO:</span>
|
||||
<input
|
||||
className="px-2 py-1 border rounded text-sm w-48 font-mono"
|
||||
@@ -600,10 +734,10 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
{unoResult}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</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">
|
||||
{/* 高亮测试面板 - 临时隐藏 */}
|
||||
{/* <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={highlightTextInput}
|
||||
@@ -645,10 +779,10 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
{highlightResult && (
|
||||
<span className="text-xs text-gray-700 ml-2">{highlightResult}</span>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 清除高亮测试面板 */}
|
||||
<div className="absolute top-16 left-2 z-50 bg-white bg-opacity-90 px-3 py-2 rounded shadow flex items-center gap-2">
|
||||
{/* 清除高亮测试面板 - 临时隐藏 */}
|
||||
{/* <div className="absolute top-16 left-2 z-50 bg-white bg-opacity-90 px-3 py-2 rounded shadow flex items-center gap-2">
|
||||
<button
|
||||
className={`px-4 py-1.5 rounded text-sm font-medium transition-colors ${
|
||||
isClearing
|
||||
@@ -669,11 +803,25 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
{clearHighlightResult}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 搜索替换测试面板 */}
|
||||
<div className="absolute top-32 left-2 z-50 bg-white bg-opacity-95 px-3 py-2 rounded shadow-lg border border-gray-200">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{/* 搜索替换测试面板 - 移动到左上角并添加关闭按钮 */}
|
||||
{showSearchReplacePanel && (
|
||||
<div className="absolute top-2 left-2 z-50 bg-white bg-opacity-10 px-3 py-2 rounded shadow-lg border border-gray-200">
|
||||
{/* 标题栏和关闭按钮 */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-gray-700 font-medium">搜索替换</span>
|
||||
<button
|
||||
onClick={() => setShowSearchReplacePanel(false)}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
title="关闭面板"
|
||||
aria-label="关闭搜索替换面板"
|
||||
>
|
||||
<i className="ri-close-line text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs text-gray-500 font-medium w-12">搜索:</span>
|
||||
<input
|
||||
className="px-2 py-1 border rounded text-sm w-48"
|
||||
@@ -687,6 +835,17 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-gray-500 font-medium w-12">页码:</span>
|
||||
<input
|
||||
className="px-2 py-1 border rounded text-sm w-16"
|
||||
value={searchReplacePageNumber}
|
||||
onChange={(e) => setSearchReplacePageNumber(e.target.value)}
|
||||
placeholder="页码"
|
||||
aria-label="页码"
|
||||
type="number"
|
||||
min="1"
|
||||
title="可选:指定搜索/替换的页码"
|
||||
/>
|
||||
<button
|
||||
className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm font-medium disabled:bg-gray-400"
|
||||
onClick={handleSearchNext}
|
||||
@@ -700,39 +859,50 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
disabled={!isDocumentLoaded}
|
||||
title="取消搜索选中"
|
||||
>
|
||||
取消
|
||||
取消搜索选中
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500 font-medium w-12">替换:</span>
|
||||
<input
|
||||
className="px-2 py-1 border rounded text-sm w-48"
|
||||
value={replaceText}
|
||||
onChange={(e) => setReplaceText(e.target.value)}
|
||||
placeholder="输入替换后的文本"
|
||||
aria-label="替换文本"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleReplace();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-sm font-medium disabled:bg-gray-400"
|
||||
onClick={handleReplace}
|
||||
disabled={!isDocumentLoaded}
|
||||
>
|
||||
{replaceAllMode ? '全部替换' : '替换'}
|
||||
</button>
|
||||
<label className="flex items-center gap-1 text-xs text-gray-600 cursor-pointer">
|
||||
<div className="flex items-center gap-8 justify-between">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<span className="text-xs text-gray-500 font-medium w-12">替换:</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={replaceAllMode}
|
||||
onChange={(e) => setReplaceAllMode(e.target.checked)}
|
||||
className="w-3 h-3"
|
||||
className="px-2 py-1 border rounded text-sm flex-1"
|
||||
value={replaceText}
|
||||
onChange={(e) => setReplaceText(e.target.value)}
|
||||
placeholder="输入替换后的文本"
|
||||
aria-label="替换文本"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleReplace();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
全部
|
||||
</label>
|
||||
<button
|
||||
className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-sm font-medium disabled:bg-gray-400"
|
||||
onClick={handleReplace}
|
||||
disabled={!isDocumentLoaded}
|
||||
>
|
||||
{replaceAllMode ? '全部确认替换' : '确认替换'}
|
||||
</button>
|
||||
{/* <label className="flex items-center gap-1 text-xs text-gray-600 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={replaceAllMode}
|
||||
onChange={(e) => setReplaceAllMode(e.target.checked)}
|
||||
className="w-3 h-3"
|
||||
/>
|
||||
全部
|
||||
</label> */}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm font-medium transition-colors"
|
||||
onClick={() => setShowSearchReplacePanel(false)}
|
||||
title="关闭搜索替换面板"
|
||||
aria-label="关闭"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
{searchReplaceResult && (
|
||||
<div className={`mt-2 text-xs ${
|
||||
@@ -743,10 +913,11 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
{searchReplaceResult}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 页面定点替换测试面板 */}
|
||||
<div className="absolute top-56 left-2 z-50 bg-white bg-opacity-95 px-3 py-2 rounded shadow-lg border border-purple-200">
|
||||
{/* 页面定点替换测试面板 - 临时隐藏 */}
|
||||
{/* <div className="absolute top-56 left-2 z-50 bg-white bg-opacity-95 px-3 py-2 rounded shadow-lg border border-purple-200">
|
||||
<div className="text-xs text-purple-600 font-medium mb-2">页面定点替换</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs text-gray-500 font-medium w-12">页码:</span>
|
||||
@@ -803,7 +974,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
|
||||
{replaceInPageResult}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 文档加载提示 */}
|
||||
{!isDocumentLoaded && (
|
||||
|
||||
@@ -38,6 +38,12 @@ export interface CollaboraViewerProps {
|
||||
targetPage?: number;
|
||||
/** 要高亮的文本内容 */
|
||||
highlightText?: string;
|
||||
/** AI建议替换参数 */
|
||||
aiSuggestionReplace?: {
|
||||
searchText: string;
|
||||
replaceText: string;
|
||||
pageNumber: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user