feat:组装UNO命令实现特定页面搜索替换功能

app/components/collabora/CollaboraViewer.tsx

@@ -16,7 +16,18 @@ import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from '.
 import { sendUnoCommand } from './Uno';
 import { highlightText } from './lib/Highlightselecttext';
 import { clearHighlights } from './lib/ClearHighlight';
-import { unoScrollToTop, requestPageInfo, customGotoPage, type PageInfo, type GotoPageResponse } from './lib';
+import {
+  unoScrollToTop,
+  requestPageInfo,
+  customGotoPage,
+  unoSearchNext,
+  unoReplaceCurrent,
+  unoReplaceAll,
+  unoCancelSearch,
+  replaceTextInPage,
+  type PageInfo,
+  type GotoPageResponse
+} from './lib';
 
 /**
  * Collabora 文档查看器组件
@@ -54,6 +65,24 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
     const [gotoPageResult, setGotoPageResult] = useState<string | null>(null);
     const [isJumping, setIsJumping] = useState(false);
 
+    // UNO 命令测试面板状态
+    const [unoCmd, setUnoCmd] = useState('.uno:Bold');
+    const [unoArgs, setUnoArgs] = useState('');
+    const [unoResult, setUnoResult] = useState<string | null>(null);
+
+    // 搜索替换测试面板状态
+    const [searchText, setSearchText] = useState('');
+    const [replaceText, setReplaceText] = useState('');
+    const [searchReplaceResult, setSearchReplaceResult] = useState<string | null>(null);
+    const [replaceAllMode, setReplaceAllMode] = useState(false);
+
+    // 页面定点替换状态
+    const [replaceInPageNumber, setReplaceInPageNumber] = useState('');
+    const [replaceInPageSearch, setReplaceInPageSearch] = useState('');
+    const [replaceInPageReplace, setReplaceInPageReplace] = useState('');
+    const [replaceInPageResult, setReplaceInPageResult] = useState<string | null>(null);
+    const [isReplacingInPage, setIsReplacingInPage] = useState(false);
+
     // 1. 加载 Collabora 配置
     const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
 
@@ -98,39 +127,39 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
   }
 
   // 发送 UNO 命令的处理函数（测试用）
-  // const sendUno = () => {
-  //   if (!iframeRef.current?.contentWindow) {
-  //     setUnoResult('iframe 不可用');
-  //     return;
-  //   }
+  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;
-  //       }
-  //     }
-  //   }
+    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('发送失败，请查看控制台');
-  //   }
-  // };
+    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 () => {
@@ -308,32 +337,164 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
     }
   };
 
+  // 搜索下一个处理函数
+  const handleSearchNext = () => {
+    if (!iframeRef.current?.contentWindow) {
+      setSearchReplaceResult('iframe 未就绪');
+      return;
+    }
+
+    if (!searchText.trim()) {
+      setSearchReplaceResult('请输入搜索文本');
+      return;
+    }
+
+    try {
+      unoSearchNext(iframeRef.current.contentWindow, searchText.trim());
+      setSearchReplaceResult(`✓ 搜索: "${searchText.trim()}"`);
+
+      // 3秒后清除提示
+      setTimeout(() => setSearchReplaceResult(null), 3000);
+    } catch (e) {
+      console.error('搜索失败:', e);
+      setSearchReplaceResult(`✗ 搜索失败: ${e instanceof Error ? e.message : '未知错误'}`);
+    }
+  };
+
+  // 替换处理函数
+  const handleReplace = () => {
+    if (!iframeRef.current?.contentWindow) {
+      setSearchReplaceResult('iframe 未就绪');
+      return;
+    }
+
+    if (!searchText.trim()) {
+      setSearchReplaceResult('请输入搜索文本');
+      return;
+    }
+
+    try {
+      if (replaceAllMode) {
+        unoReplaceAll(iframeRef.current.contentWindow, searchText.trim(), replaceText);
+        setSearchReplaceResult(`✓ 已替换全部: "${searchText.trim()}" → "${replaceText}"`);
+      } else {
+        unoReplaceCurrent(iframeRef.current.contentWindow, searchText.trim(), replaceText);
+        setSearchReplaceResult(`✓ 已替换: "${searchText.trim()}" → "${replaceText}"`);
+      }
+
+      // 3秒后清除提示
+      setTimeout(() => setSearchReplaceResult(null), 3000);
+    } catch (e) {
+      console.error('替换失败:', e);
+      setSearchReplaceResult(`✗ 替换失败: ${e instanceof Error ? e.message : '未知错误'}`);
+    }
+  };
+
+  // 取消搜索处理函数
+  const handleCancelSearch = () => {
+    if (!iframeRef.current?.contentWindow) {
+      return;
+    }
+
+    try {
+      unoCancelSearch(iframeRef.current.contentWindow);
+      setSearchReplaceResult('✓ 已取消搜索');
+      setTimeout(() => setSearchReplaceResult(null), 2000);
+    } catch (e) {
+      console.error('取消搜索失败:', e);
+    }
+  };
+
+  // 页面定点替换处理函数
+  const handleReplaceInPage = async () => {
+    if (!iframeRef.current?.contentWindow) {
+      setReplaceInPageResult('iframe 未就绪');
+      return;
+    }
+
+    const pageNum = parseInt(replaceInPageNumber.trim(), 10);
+    if (isNaN(pageNum) || pageNum < 1) {
+      setReplaceInPageResult('请输入有效的页码 (大于0的整数)');
+      return;
+    }
+
+    if (!replaceInPageSearch.trim()) {
+      setReplaceInPageResult('请输入原文');
+      return;
+    }
+
+    setIsReplacingInPage(true);
+    setReplaceInPageResult(`正在第 ${pageNum} 页执行替换...`);
+
+    try {
+      const result = await replaceTextInPage(
+        iframeRef.current.contentWindow,
+        pageNum,
+        replaceInPageSearch.trim(),
+        replaceInPageReplace
+      );
+
+      if (result.success) {
+        setReplaceInPageResult(`✓ ${result.message}`);
+      } else {
+        setReplaceInPageResult(`✗ ${result.message}`);
+      }
+
+      // 5秒后清除提示
+      setTimeout(() => setReplaceInPageResult(null), 5000);
+    } catch (e) {
+      console.error('页面定点替换失败:', e);
+      setReplaceInPageResult(`✗ 执行失败: ${e instanceof Error ? e.message : '未知错误'}`);
+
+      // 5秒后清除错误提示
+      setTimeout(() => setReplaceInPageResult(null), 5000);
+    } finally {
+      setIsReplacingInPage(false);
+    }
+  };
+
   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 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"
+          className="px-2 py-1 border rounded text-sm w-48 font-mono"
           value={unoCmd}
           onChange={(e) => setUnoCmd(e.target.value)}
-          placeholder="UNO 命令"
+          placeholder="UNO 命令 (如 .uno:Bold)"
           aria-label="UNO 命令"
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              sendUno();
+            }
+          }}
         />
         <input
-          className="px-2 py-1 border rounded text-sm w-64"
+          className="px-2 py-1 border rounded text-sm w-64 font-mono"
           value={unoArgs}
           onChange={(e) => setUnoArgs(e.target.value)}
-          placeholder="UNO Args (JSON)"
+          placeholder='Args (JSON, 如 {"SearchItem.SearchString":{"type":"string","value":"test"}})'
           aria-label="UNO Args (JSON)"
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              sendUno();
+            }
+          }}
         />
         <button
-          className="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm"
+          className="px-3 py-1.5 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm font-medium disabled:bg-gray-400"
           onClick={sendUno}
+          disabled={!isDocumentLoaded}
         >
-          发送 UNO
+          发送
         </button>
-        {unoResult && <span className="text-xs text-gray-500 ml-2">{unoResult}</span>}
-      </div> */}
+        {unoResult && (
+          <span className={`text-xs ml-1 ${unoResult.startsWith('已发送') ? 'text-green-600' : 'text-red-500'}`}>
+            {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">
@@ -404,6 +565,140 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
         )}
       </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">
+          <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={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            placeholder="输入要搜索的文本"
+            aria-label="搜索文本"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleSearchNext();
+              }
+            }}
+          />
+          <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}
+            disabled={!isDocumentLoaded}
+          >
+            查找
+          </button>
+          <button
+            className="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm font-medium disabled:bg-gray-400"
+            onClick={handleCancelSearch}
+            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">
+            <input
+              type="checkbox"
+              checked={replaceAllMode}
+              onChange={(e) => setReplaceAllMode(e.target.checked)}
+              className="w-3 h-3"
+            />
+            全部
+          </label>
+        </div>
+        {searchReplaceResult && (
+          <div className={`mt-2 text-xs ${
+            searchReplaceResult.startsWith('✓') ? 'text-green-600' :
+            searchReplaceResult.startsWith('✗') ? 'text-red-600' :
+            'text-gray-600'
+          }`}>
+            {searchReplaceResult}
+          </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="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>
+          <input
+            className="px-2 py-1 border rounded text-sm w-16"
+            value={replaceInPageNumber}
+            onChange={(e) => setReplaceInPageNumber(e.target.value)}
+            placeholder="如: 12"
+            aria-label="页码"
+            type="number"
+            min="1"
+          />
+          <span className="text-xs text-gray-500 font-medium w-12">原文:</span>
+          <input
+            className="px-2 py-1 border rounded text-sm w-32"
+            value={replaceInPageSearch}
+            onChange={(e) => setReplaceInPageSearch(e.target.value)}
+            placeholder="要替换的文本"
+            aria-label="原文"
+          />
+        </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={replaceInPageReplace}
+            onChange={(e) => setReplaceInPageReplace(e.target.value)}
+            placeholder="替换后的文本"
+            aria-label="新文本"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleReplaceInPage();
+              }
+            }}
+          />
+          <button
+            className={`px-4 py-1 rounded text-sm font-medium transition-colors ${
+              isReplacingInPage
+                ? 'bg-gray-400 text-white cursor-not-allowed'
+                : 'bg-purple-500 text-white hover:bg-purple-600'
+            }`}
+            onClick={handleReplaceInPage}
+            disabled={!isDocumentLoaded || isReplacingInPage}
+          >
+            {isReplacingInPage ? '执行中...' : '定点替换'}
+          </button>
+        </div>
+        {replaceInPageResult && (
+          <div className={`mt-2 text-xs ${
+            replaceInPageResult.startsWith('✓') ? 'text-green-600' :
+            replaceInPageResult.startsWith('✗') ? 'text-red-600' :
+            'text-gray-600'
+          }`}>
+            {replaceInPageResult}
+          </div>
+        )}
+      </div>
+
       {/* 文档加载提示 */}
       {!isDocumentLoaded && (
         <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90 z-10">