feat：完成清除高亮脚本封装

app/components/collabora/CollaboraViewer.tsx

@@ -15,6 +15,7 @@ import type { CollaboraViewerProps, CollaboraViewerHandle } from './types';
 import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
 import { sendUnoCommand } from './Uno';
 import { switchHighlight } from './lib/Highlightselecttext';
+import { clearHighlights } from './lib/ClearHighlight';
 
 /**
  * Collabora 文档查看器组件
@@ -27,7 +28,7 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
       fileId,
       mode = 'view',
       userId = 'guest',
-      userName = '访客',
+      userName = '',
     },
     ref
   ) {
@@ -44,6 +45,10 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
     const [previousHighlightText, setPreviousHighlightText] = useState<string | null>(null);
     const [highlightResult, setHighlightResult] = useState<string | null>(null);
 
+    // 清除高亮测试面板状态
+    const [clearHighlightResult, setClearHighlightResult] = useState<string | null>(null);
+    const [isClearing, setIsClearing] = useState(false);
+
     // 1. 加载 Collabora 配置
     const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
 
@@ -163,6 +168,50 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
     }
   };
 
+  // 清除高亮处理函数
+  const handleClearHighlights = async () => {
+    if (!iframeRef.current?.contentWindow) {
+      setClearHighlightResult('iframe 未就绪');
+      return;
+    }
+
+    setIsClearing(true);
+    setClearHighlightResult('正在清除高亮...');
+
+    try {
+      const result = await clearHighlights(iframeRef.current.contentWindow, {
+        color: 16776960, // 黄色
+        timeout: 10000,
+      });
+
+      if (result.success) {
+        setClearHighlightResult(`✓ ${result.message}`);
+        console.log('[CollaboraViewer] 清除高亮成功:', result);
+
+        // 清空之前记录的高亮文本
+        setPreviousHighlightText(null);
+      } else {
+        setClearHighlightResult(`✗ 清除失败: ${result.message}`);
+        console.error('[CollaboraViewer] 清除高亮失败:', result);
+      }
+
+      // 3秒后清除提示
+      setTimeout(() => {
+        setClearHighlightResult(null);
+      }, 3000);
+    } catch (e) {
+      console.error('清除高亮失败:', e);
+      setClearHighlightResult(`✗ 清除失败: ${e instanceof Error ? e.message : '未知错误'}`);
+
+      // 5秒后清除错误提示
+      setTimeout(() => {
+        setClearHighlightResult(null);
+      }, 5000);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
   return (
     <div className="collabora-viewer relative w-full h-full min-h-[600px]">
       {/* UNO 命令测试面板 */}
@@ -235,6 +284,30 @@ export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewer
         )}
       </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">
+        <button
+          className={`px-4 py-1.5 rounded text-sm font-medium transition-colors ${
+            isClearing
+              ? 'bg-gray-400 text-white cursor-not-allowed'
+              : 'bg-red-500 text-white hover:bg-red-600'
+          }`}
+          onClick={handleClearHighlights}
+          disabled={!isDocumentLoaded || isClearing}
+        >
+          {isClearing ? '清除中...' : '清除所有高亮'}
+        </button>
+        {clearHighlightResult && (
+          <span className={`text-xs ml-2 ${
+            clearHighlightResult.startsWith('✓') ? 'text-green-600' :
+            clearHighlightResult.startsWith('✗') ? 'text-red-600' :
+            'text-gray-600'
+          }`}>
+            {clearHighlightResult}
+          </span>
+        )}
+      </div>
+
       {/* 文档加载提示 */}
       {!isDocumentLoaded && (
         <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90 z-10">