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

2025-11-20 20:36:42 +08:00
parent 2e604e8ede
commit b9fe57c5fa
12 changed files with 1310 additions and 36 deletions
@@ -146,7 +146,93 @@ The system uses a **port-based multi-client architecture** where:
 - `MessageModal.tsx` - Confirmation/alert modal system
 - `Toast.tsx` - Toast notification provider
 - `LoadingBar.tsx` - Top loading bar for route transitions
- `FilePreview.tsx` - PDF/Word document preview
+- `FilePreview.tsx` - PDF/Word document preview (react-pdf + Collabora integration)
+
+### Document Preview System
+
+**Current Implementation** (`app/components/reviews/FilePreview.tsx`):
+- **PDF files**: Rendered using `react-pdf` library
+- **DOCX files**: Needs Collabora Online integration (planned)
+
+**Integration Plan - Collabora Online for DOCX Preview**:
+
+The FilePreview component should support multiple file types:
+1. `.pdf` → Use react-pdf (current implementation)
+2. `.docx` → Use Collabora Online viewer (to be integrated from collabora-test project)
+
+**Key Pages Using FilePreview**:
+- `app/routes/reviews.tsx` - Document review page (uses `document.path`)
+- `app/routes/contract-template.detail.$id.tsx` - Contract template details (uses `template.file_path`)
+
+**Data Flow for Collabora Integration**:
+```
+Page Component (reviews.tsx / contract-template.detail.$id.tsx)
+  ↓ passes fileContent.path
+FilePreview Component (detects file extension)
+  ↓ if .docx
+CollaboraViewer Component (app/components/collabora/)
+  ↓ calls API
+app/routes/api.collabora.config.tsx (Remix loader)
+  ↓ generates JWT + WOPISrc URL
+  ↓ returns { iframeUrl, accessToken }
+CollaboraViewer renders iframe
+  ↓ Collabora Online loads document
+  ↓ calls WOPI endpoints
+app/routes/api.collabora.wopi.files.$fileId.tsx (Remix loader/action)
+  ↓ CheckFileInfo (GET) / GetFile (GET /contents) / PutFile (POST /contents)
+  ↓ interacts with MinIO storage
+Returns document data to Collabora
+```
+
+**Files to Migrate from collabora-test**:
+- `CollaboraViewer.tsx` - Main viewer component
+- `hooks.ts` - useCollaboraConfig, useCollaboraUICustomization, useDocumentReady, useCollaboraUnoCommands
+- `api.ts` - API client for Collabora config
+- `Uno.ts` - LibreOffice UNO commands wrapper
+- `CollaboraIframeUI.ts` - UI customization utilities
+- `types.ts` - TypeScript type definitions
+
+**Backend API Routes to Create**:
+1. `app/routes/api.collabora.config.tsx` - Generate Collabora iframe URL and JWT token
+2. `app/routes/api.collabora.wopi.files.$fileId.tsx` - WOPI protocol implementation (CheckFileInfo, GetFile, PutFile)
+
+**Environment Variables Needed**:
+```bash
+# Collabora Online server URL
+COLLABORA_URL=http://10.79.97.17:9980
+
+# Application base URL (must be accessible from Collabora server)
+APP_URL=http://10.79.97.17:51703
+
+# JWT secret for WOPI token signing (reuse existing JWT_SECRET)
+```
+
+**Security Considerations**:
+- JWT token must include `fileId` for WOPI endpoint validation
+- File path sanitization to prevent directory traversal attacks
+- CORS configuration for Collabora server to access WOPI endpoints
+- WOPI CheckFileInfo should return pure JSON (not wrapped in API response format)
+
+**File Type Detection in FilePreview**:
+```typescript
+const fileExtension = fileContent.path.split('.').pop()?.toLowerCase();
+
+if (fileExtension === 'pdf') {
+  // Use react-pdf
+  return <PDFViewer />;
+} else if (fileExtension === 'docx') {
+  // Use Collabora
+  return <CollaboraViewer fileId={fileContent.path} mode="view" />;
+} else {
+  // Unsupported format
+  return <UnsupportedFileMessage />;
+}
+```
+
+**Reference Implementation**:
+- See `collabora-test` workspace for complete working example
+- Adapt Next.js API routes to Remix loader/action pattern
+- Convert Next.js `route.ts` GET/POST to Remix `loader()` and `action()` functions

 **RemixIcon Usage**:
 - Icons are locally hosted in `public/fonts/`