temp:临时备份，测试合并兼容性

2025-11-20 20:36:42 +08:00
parent 2e604e8ede
commit b9fe57c5fa
12 changed files with 1310 additions and 36 deletions
@@ -0,0 +1,112 @@
+/**
+ * Collabora Online 文档查看器组件
+ *
+ * 功能：
+ * - 加载 Collabora Online iframe
+ * - 管理文档加载状态
+ * - 提供 UNO 命令接口
+ * - 支持只读和编辑模式
+ *
+ * @encoding UTF-8
+ */
+
+import { useRef } from 'react';
+import type { CollaboraViewerProps } from './types';
+import { useCollaboraConfig, useDocumentReady, useCollaboraUnoCommands } from './hooks';
+
+/**
+ * Collabora 文档查看器组件
+ * @param props - 组件属性
+ */
+export function CollaboraViewer({
+  fileId,
+  mode = 'view',
+  userId = 'guest',
+  userName = '访客',
+}: CollaboraViewerProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // 1. 加载 Collabora 配置
+  const { config, loading, error } = useCollaboraConfig(fileId, mode, userId, userName);
+
+  // 2. 监听文档加载状态
+  const { isDocumentLoaded } = useDocumentReady(iframeRef);
+
+  // 3. UNO 命令封装
+  const unoCommands = useCollaboraUnoCommands(iframeRef);
+
+  // 加载中状态
+  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>
+    );
+  }
+
+  return (
+    <div className="collabora-viewer relative w-full h-full min-h-[600px]">
+      {/* 文档加载提示 */}
+      {!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"
+      />
+
+      {/* 调试信息（开发环境） */}
+      {process.env.NODE_ENV === 'development' && (
+        <div className="mt-2 p-2 bg-gray-100 text-xs rounded">
+          <div>
+            <strong>文档状态:</strong> {isDocumentLoaded ? '已加载' : '加载中...'}
+          </div>
+          <div>
+            <strong>模式:</strong> {config.mode === 'edit' ? '编辑' : '只读'}
+          </div>
+          <div>
+            <strong>文件:</strong> {config.fileName}
+          </div>
+          <div>
+            <strong>用户:</strong> {userName} ({userId})
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 导出 UNO 命令 hook 供父组件使用（如果需要）
+export { useCollaboraUnoCommands };