leaudit-platform-frontend/app/components/collabora/CollaboraViewer.tsx

/**
 * Collabora Online 文档查看器组件
 *
 * 功能：
 * - 加载 Collabora Online iframe
 * - 管理文档加载状态
 * - 提供 UNO 命令接口
 * - 支持只读和编辑模式
 *
 * @encoding UTF-8
 */

import { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import type { CollaboraViewerProps, CollaboraViewerHandle } from './types';
import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
import { sendUnoCommand } from './Uno';

/**
 * Collabora 文档查看器组件
 * @param props - 组件属性
 * @param ref - 父组件传入的 ref，用于暴露命令接口
 */
export const CollaboraViewer = forwardRef<CollaboraViewerHandle, CollaboraViewerProps>(
  function CollaboraViewer(
    {
      fileId,
      mode = 'view',
      userId = 'guest',
      userName = '访客',
    },
    ref
  ) {
    const iframeRef = useRef<HTMLIFrameElement>(null);

    // 调试面板状态
    const [unoCmd, setUnoCmd] = useState('.uno:GoToStartOfDoc');
    const [unoArgs, setUnoArgs] = useState('{}');
    const [unoResult, setUnoResult] = useState<string | null>(null);

    // 1. 加载 Collabora 配置
    const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);

    // 2. 监听文档加载状态
    const { isDocumentLoaded } = useDocumentReady(iframeRef);

    // 3. UNO 命令封装
    const unoCommands = useCollaboraUnoCommands(iframeRef);

    // 4. 暴露接口给父组件
    useImperativeHandle(ref, () => ({
      unoCommands,
      isReady: isDocumentLoaded,
      mode,
      getIframeWindow: () => iframeRef.current?.contentWindow || null,
    }), [unoCommands, isDocumentLoaded, mode]);

    // 5. 将 sendUnoCommand 挂载到 window 对象，供调试面板和控制台使用
    useEffect(() => {
      if (iframeRef.current?.contentWindow) {
        (window as any).sendUno = (cmd: string, args: any = {}) => {
          if (iframeRef.current?.contentWindow) {
            sendUnoCommand(iframeRef.current.contentWindow, cmd, args);
          }
        };
      }

      return () => {
        delete (window as any).sendUno;
      };
    }, [isDocumentLoaded]);

  // 加载中状态
  if (loading) {
    return (
      <div className="flex justify-center items-center h-full min-h-[600px]">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
          <p className="mt-4 text-gray-600">加载文档配置中...</p>
        </div>
      </div>
    );
  }

  // 错误状态
  if (error || !config) {
    return (
      <div className="flex justify-center items-center h-full min-h-[600px]">
        <div className="text-center text-red-500">
          <i className="ri-error-warning-line text-4xl mb-2"></i>
          <p className="text-lg">{error || '加载配置失败'}</p>
          <p className="text-sm text-gray-500 mt-2">请刷新页面重试或联系管理员</p>
        </div>
      </div>
    );
  }

  // 发送 UNO 命令的处理函数
  const sendUno = () => {
    if (!iframeRef.current?.contentWindow) {
      setUnoResult('iframe 不可用');
      return;
    }

    if (!(window as any).sendUno) {
      setUnoResult('window.sendUno 未初始化');
      return;
    }

    let args: any = {};
    const raw = (unoArgs || '').trim();
    if (raw !== '') {
      try {
        args = JSON.parse(raw);
      } catch (err) {
        try {
          // fallback: replace single quotes with double quotes and parse
          args = JSON.parse(raw.replace(/'(.*?)'/g, '"$1"'));
        } catch (err2) {
          console.error('解析 UNO Args 失败:', err2);
          setUnoResult('Args 解析失败，请使用有效 JSON');
          return;
        }
      }
    }
  };

  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">
        <input
          className="px-2 py-1 border rounded text-sm w-48"
          value={unoCmd}
          onChange={(e) => setUnoCmd(e.target.value)}
          placeholder="UNO 命令"
          aria-label="UNO 命令"
        />
        <input
          className="px-2 py-1 border rounded text-sm w-64"
          value={unoArgs}
          onChange={(e) => setUnoArgs(e.target.value)}
          placeholder="UNO Args (JSON)"
          aria-label="UNO Args (JSON)"
        />
        <button
          className="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm"
          onClick={sendUno}
        >
          发送 UNO
        </button>
        {unoResult && <span className="text-xs text-gray-500 ml-2">{unoResult}</span>}
      </div> */}

      {/* 文档加载提示 */}
      {!isDocumentLoaded && (
        <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90 z-10">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            <p className="mt-4 text-gray-600">正在加载文档...</p>
            <p className="text-sm text-gray-500 mt-2">{config.fileName}</p>
          </div>
        </div>
      )}

      {/* Collabora iframe */}
      <iframe
        ref={iframeRef}
        src={config.iframeUrl}
        className="w-full h-full border-0"
        style={{
          minHeight: '600px',
          height: '100%',
        }}
        allow="clipboard-read; clipboard-write"
        title={`Collabora Online - ${config.fileName}`}
        sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals"
        tabIndex={0}
      />
    </div>
  );
});

// 导出类型和 hook
export type { CollaboraViewerHandle };
export { useCollaboraUnoCommands };