feat：合同文档列表预览完成Collabora集成
This commit is contained in:
PingChuan
@@ -86,24 +86,6 @@ export function CollaboraViewer({
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -115,11 +115,11 @@ const portConfigs: Record<string, Partial<ApiConfig>> = {
|
||||
const configs: Record<string, ApiConfig> = {
|
||||
// 开发环境
|
||||
development: {
|
||||
baseUrl: 'http://127.0.0.1:8073', // FastAPI后端（包含/dify代理）
|
||||
documentUrl: 'http://127.0.0.1:8073/docauditai/',
|
||||
uploadUrl: 'http://127.0.0.1:8073/admin/documents',
|
||||
baseUrl: 'http://172.16.0.78:8073', // FastAPI后端（包含/dify代理）
|
||||
documentUrl: 'http://172.16.0.78:8073/docauditai/',
|
||||
uploadUrl: 'http://172.16.0.78:8073/admin/documents',
|
||||
collaboraUrl: 'http://172.16.0.81:9980',
|
||||
appUrl: 'http://10.79.97.17:51703',
|
||||
appUrl: 'http://172.16.0.78:51703',
|
||||
oauth: {
|
||||
serverUrl: 'http://10.79.112.85', // IDaaS服务器地址
|
||||
clientId: 'none',
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
/**
|
||||
* Collabora Online 配置生成服务
|
||||
*
|
||||
* 职责：
|
||||
* - 生成 Collabora iframe URL
|
||||
* - 生成 WOPI access token
|
||||
* - 构建完整的 Collabora 配置
|
||||
*
|
||||
* @encoding UTF-8
|
||||
*/
|
||||
|
||||
import { COLLABORA_URL, APP_URL } from '~/config/api-config';
|
||||
import { WopiService } from './wopi.server';
|
||||
import type { CollaboraConfig } from '~/components/collabora/types';
|
||||
|
||||
/**
|
||||
* Collabora 配置生成参数
|
||||
*/
|
||||
export interface GenerateConfigParams {
|
||||
fileId: string;
|
||||
mode: 'view' | 'edit';
|
||||
userId: string;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 Collabora 配置
|
||||
* @param params - 配置参数
|
||||
* @returns Collabora 配置对象
|
||||
*/
|
||||
export async function generateCollaboraConfig(
|
||||
params: GenerateConfigParams
|
||||
): Promise<CollaboraConfig> {
|
||||
const { fileId, mode, userId, userName } = params;
|
||||
|
||||
// 创建 WOPI 服务实例
|
||||
const wopiService = new WopiService();
|
||||
|
||||
// 生成 WOPI access token（2 小时有效期）
|
||||
const accessToken = wopiService.generateAccessToken(
|
||||
{
|
||||
fileId,
|
||||
mode,
|
||||
userId,
|
||||
userName,
|
||||
},
|
||||
7200 // 2 小时
|
||||
);
|
||||
|
||||
// 构建 WOPI Src URL
|
||||
const wopiSrc = `${APP_URL}/api/collabora/wopi/files/${encodeURIComponent(fileId)}`;
|
||||
|
||||
// 构建 Collabora iframe URL
|
||||
const iframeUrl = buildCollaboraIframeUrl({
|
||||
collaboraUrl: COLLABORA_URL,
|
||||
wopiSrc,
|
||||
accessToken,
|
||||
mode,
|
||||
});
|
||||
|
||||
// 提取文件名
|
||||
const fileName = fileId.split('/').pop() || 'document.docx';
|
||||
|
||||
return {
|
||||
iframeUrl,
|
||||
accessToken,
|
||||
fileName,
|
||||
fileId,
|
||||
collaboraUrl: COLLABORA_URL,
|
||||
wopiSrc,
|
||||
mode,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建 Collabora iframe URL
|
||||
* @param params - URL 构建参数
|
||||
* @returns Collabora iframe URL
|
||||
*/
|
||||
function buildCollaboraIframeUrl(params: {
|
||||
collaboraUrl: string;
|
||||
wopiSrc: string;
|
||||
accessToken: string;
|
||||
mode: 'view' | 'edit';
|
||||
}): string {
|
||||
const { collaboraUrl, wopiSrc, accessToken, mode } = params;
|
||||
|
||||
// Collabora iframe 基础 URL
|
||||
// fa80579 是 Collabora 的版本号标识，实际部署时可能需要调整
|
||||
const baseUrl = `${collaboraUrl}/browser/fa80579/cool.html`;
|
||||
|
||||
const url = new URL(baseUrl);
|
||||
|
||||
// 设置 WOPI Src
|
||||
url.searchParams.set('WOPISrc', wopiSrc);
|
||||
|
||||
// 设置 access token
|
||||
url.searchParams.set('access_token', accessToken);
|
||||
|
||||
// 设置 token 过期时间（毫秒）
|
||||
url.searchParams.set('access_token_ttl', '7200000'); // 2 小时
|
||||
|
||||
// UI 定制参数
|
||||
const uiDefaults = [
|
||||
'UIMode=compact', // 紧凑模式
|
||||
'TextRuler=false', // 隐藏标尺
|
||||
'TextStatusbar=false', // 隐藏状态栏
|
||||
'TextSidebar=false', // 隐藏侧边栏
|
||||
'SavedUIState=false', // 不保存 UI 状态
|
||||
].join(';');
|
||||
url.searchParams.set('ui_defaults', uiDefaults);
|
||||
|
||||
// 其他 UI 参数
|
||||
url.searchParams.set('closebutton', '0'); // 隐藏关闭按钮
|
||||
url.searchParams.set('revisionhistory', 'false'); // 禁用修订历史
|
||||
url.searchParams.set('lang', 'zh-CN'); // 设置语言为中文
|
||||
|
||||
// 根据模式设置权限
|
||||
if (mode === 'view') {
|
||||
// 只读模式：通过 URL 参数限制权限
|
||||
url.searchParams.set('permission', 'readonly');
|
||||
}
|
||||
|
||||
return url.toString();
|
||||
}
|
||||
@@ -1,258 +0,0 @@
|
||||
/**
|
||||
* WOPI (Web Application Open Platform Interface) 协议服务层
|
||||
*
|
||||
* 职责：
|
||||
* - CheckFileInfo: 返回文件元数据
|
||||
* - GetFile: 返回文件内容
|
||||
* - PutFile: 保存文件内容
|
||||
*
|
||||
* @encoding UTF-8
|
||||
*/
|
||||
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { DOCUMENT_URL } from '~/config/api-config';
|
||||
|
||||
/**
|
||||
* WOPI Access Token Payload
|
||||
*/
|
||||
export interface WopiTokenPayload {
|
||||
fileId: string;
|
||||
mode: 'view' | 'edit';
|
||||
userId: string;
|
||||
userName: string;
|
||||
iat: number; // 签发时间
|
||||
exp: number; // 过期时间
|
||||
}
|
||||
|
||||
/**
|
||||
* WOPI 服务类
|
||||
*/
|
||||
export class WopiService {
|
||||
private readonly jwtSecret: string;
|
||||
|
||||
constructor() {
|
||||
const secret = process.env.JWT_SECRET;
|
||||
if (!secret) {
|
||||
throw new Error('JWT_SECRET environment variable is not set');
|
||||
}
|
||||
this.jwtSecret = secret;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 WOPI access token
|
||||
* @param params - Token 参数
|
||||
* @param expiresIn - 过期时间（秒），默认 2 小时
|
||||
* @returns JWT token
|
||||
*/
|
||||
generateAccessToken(params: {
|
||||
fileId: string;
|
||||
mode: 'view' | 'edit';
|
||||
userId: string;
|
||||
userName: string;
|
||||
}, expiresIn: number = 7200): string {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
const payload: WopiTokenPayload = {
|
||||
fileId: params.fileId,
|
||||
mode: params.mode,
|
||||
userId: params.userId,
|
||||
userName: params.userName,
|
||||
iat: now,
|
||||
exp: now + expiresIn,
|
||||
};
|
||||
|
||||
return jwt.sign(payload, this.jwtSecret, {
|
||||
algorithm: 'HS256',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证 WOPI access token
|
||||
* @param token - JWT token
|
||||
* @param fileId - 文件 ID（用于验证 token 中的 fileId 是否匹配）
|
||||
* @returns Token payload
|
||||
* @throws Error 如果 token 无效
|
||||
*/
|
||||
private verifyAccessToken(token: string, fileId: string): WopiTokenPayload {
|
||||
try {
|
||||
const payload = jwt.verify(token, this.jwtSecret, {
|
||||
algorithms: ['HS256'],
|
||||
}) as WopiTokenPayload;
|
||||
|
||||
// 验证文件 ID 是否匹配
|
||||
if (payload.fileId !== fileId) {
|
||||
throw new Error('Token 文件 ID 不匹配');
|
||||
}
|
||||
|
||||
// 验证过期时间
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
if (payload.exp && payload.exp < now) {
|
||||
throw new Error('Token 已过期');
|
||||
}
|
||||
|
||||
return payload;
|
||||
} catch (error) {
|
||||
console.error('WOPI token 验证失败:', error);
|
||||
throw new Error('Token 无效');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件路径清理（防止目录遍历攻击）
|
||||
* @param fileId - 文件 ID
|
||||
* @returns 清理后的文件 ID
|
||||
*/
|
||||
private sanitizeFileId(fileId: string): string {
|
||||
// 移除 ../ 和绝对路径
|
||||
return fileId.replace(/\.\./g, '').replace(/^\//, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* CheckFileInfo - 返回文件元数据
|
||||
* @param fileId - 文件路径（例如：contracts/test.docx）
|
||||
* @param accessToken - WOPI access token
|
||||
* @returns 文件元数据（WOPI CheckFileInfo 响应）
|
||||
*/
|
||||
async checkFileInfo(fileId: string, accessToken: string) {
|
||||
// 验证 token
|
||||
const tokenData = this.verifyAccessToken(accessToken, fileId);
|
||||
|
||||
// 清理文件路径
|
||||
const sanitizedFileId = this.sanitizeFileId(fileId);
|
||||
|
||||
// 通过 FastAPI 代理获取文件元数据（使用 HEAD 请求）
|
||||
const fileUrl = `${DOCUMENT_URL}${sanitizedFileId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(fileUrl, {
|
||||
method: 'HEAD',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`文件不存在: ${sanitizedFileId}`);
|
||||
}
|
||||
|
||||
const contentLength = response.headers.get('Content-Length');
|
||||
const lastModified = response.headers.get('Last-Modified');
|
||||
const fileName = sanitizedFileId.split('/').pop() || 'document.docx';
|
||||
|
||||
// 返回 WOPI CheckFileInfo 响应
|
||||
return {
|
||||
// 基本文件信息
|
||||
BaseFileName: fileName,
|
||||
Size: contentLength ? parseInt(contentLength, 10) : 0,
|
||||
Version: lastModified || Date.now().toString(),
|
||||
|
||||
// 用户信息
|
||||
UserId: tokenData.userId,
|
||||
UserFriendlyName: tokenData.userName,
|
||||
|
||||
// 文件权限
|
||||
UserCanWrite: tokenData.mode === 'edit',
|
||||
UserCanNotWriteRelative: true,
|
||||
|
||||
// Collabora 特定属性
|
||||
EnableOwnerTermination: false,
|
||||
SupportsUpdate: tokenData.mode === 'edit',
|
||||
SupportsLocks: false,
|
||||
|
||||
// UI 隐藏选项
|
||||
HidePrintOption: false,
|
||||
HideSaveOption: false,
|
||||
HideExportOption: false,
|
||||
HideUserList: 'desktop',
|
||||
|
||||
// 功能配置
|
||||
DisableInactiveMessages: true,
|
||||
DisableAutoSave: true,
|
||||
|
||||
// 文件最后修改时间
|
||||
LastModifiedTime: lastModified || new Date().toISOString(),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('CheckFileInfo 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GetFile - 返回文件内容
|
||||
* @param fileId - 文件路径
|
||||
* @param accessToken - WOPI access token
|
||||
* @returns 文件内容和元数据
|
||||
*/
|
||||
async getFile(fileId: string, accessToken: string) {
|
||||
// 验证 token
|
||||
this.verifyAccessToken(accessToken, fileId);
|
||||
|
||||
// 清理文件路径
|
||||
const sanitizedFileId = this.sanitizeFileId(fileId);
|
||||
|
||||
// 通过 FastAPI 代理获取文件内容
|
||||
const fileUrl = `${DOCUMENT_URL}${sanitizedFileId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(fileUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`获取文件失败: ${sanitizedFileId}`);
|
||||
}
|
||||
|
||||
const buffer = Buffer.from(await response.arrayBuffer());
|
||||
const contentType = response.headers.get('Content-Type') ||
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||||
|
||||
return {
|
||||
buffer,
|
||||
metadata: {
|
||||
contentType,
|
||||
size: buffer.length,
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('GetFile 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* PutFile - 保存文件内容
|
||||
* @param fileId - 文件路径
|
||||
* @param accessToken - WOPI access token
|
||||
* @param fileBuffer - 文件内容
|
||||
*/
|
||||
async putFile(fileId: string, accessToken: string, fileBuffer: ArrayBuffer) {
|
||||
// 验证 token
|
||||
const tokenData = this.verifyAccessToken(accessToken, fileId);
|
||||
|
||||
// 检查是否有写入权限
|
||||
if (tokenData.mode !== 'edit') {
|
||||
throw new Error('无写入权限');
|
||||
}
|
||||
|
||||
// 清理文件路径
|
||||
const sanitizedFileId = this.sanitizeFileId(fileId);
|
||||
|
||||
// 通过 FastAPI 代理上传文件
|
||||
const uploadUrl = `${DOCUMENT_URL}${sanitizedFileId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(uploadUrl, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
},
|
||||
body: fileBuffer,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`保存文件失败: ${sanitizedFileId}`);
|
||||
}
|
||||
|
||||
console.log(`PutFile 成功: ${sanitizedFileId}, Size: ${fileBuffer.byteLength} bytes`);
|
||||
} catch (error) {
|
||||
console.error('PutFile 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
import { type LoaderFunctionArgs, json } from '@remix-run/node';
|
||||
import { getUserSession } from '~/api/login/auth.server';
|
||||
import { generateCollaboraConfig } from '~/lib/collabora/config.server';
|
||||
import { generateCollaboraConfig } from '~/services/collabora.config.server';
|
||||
|
||||
/**
|
||||
* GET /api/collabora/config
|
||||
@@ -24,8 +24,8 @@ import { generateCollaboraConfig } from '~/lib/collabora/config.server';
|
||||
*/
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
try {
|
||||
// 获取用户会话信息
|
||||
const { userInfo } = await getUserSession(request);
|
||||
// 获取用户会话信息和 frontendJWT
|
||||
const { userInfo, frontendJWT } = await getUserSession(request);
|
||||
|
||||
// 解析查询参数
|
||||
const url = new URL(request.url);
|
||||
@@ -42,12 +42,21 @@ export async function loader({ request }: LoaderFunctionArgs) {
|
||||
);
|
||||
}
|
||||
|
||||
// 验证 frontendJWT
|
||||
if (!frontendJWT) {
|
||||
return json(
|
||||
{ error: '用户未认证' },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
// 生成 Collabora 配置
|
||||
const config = await generateCollaboraConfig({
|
||||
fileId,
|
||||
mode,
|
||||
userId,
|
||||
userName,
|
||||
frontendJWT,
|
||||
});
|
||||
|
||||
return json(config);
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* WOPI 协议 API 路由（Splat路由，支持多级路径）
|
||||
*
|
||||
* 功能：
|
||||
* - CheckFileInfo: GET /api/collabora/wopi/files/{...fileId}
|
||||
* - GetFile: GET /api/collabora/wopi/files/{...fileId}/contents
|
||||
* - PutFile: POST /api/collabora/wopi/files/{...fileId}/contents
|
||||
*
|
||||
* 注意：使用splat路由($)匹配多级文件路径，如 documents/mz/合同文档/2025/test.docx
|
||||
*
|
||||
* @encoding UTF-8
|
||||
*/
|
||||
|
||||
import { type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { WopiService } from '../services/collabora.wopi.server';
|
||||
|
||||
const wopiService = new WopiService();
|
||||
|
||||
/**
|
||||
* GET 请求处理
|
||||
* - 无 /contents 后缀 → CheckFileInfo
|
||||
* - 有 /contents 后缀 → GetFile
|
||||
*/
|
||||
export async function loader({ request, params }: LoaderFunctionArgs) {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const accessToken = url.searchParams.get('access_token');
|
||||
|
||||
if (!accessToken) {
|
||||
return new Response('访问令牌缺失', { status: 401 });
|
||||
}
|
||||
|
||||
// 获取文件 ID（使用 splat 参数 '*'）
|
||||
let fileId = params['*'] || '';
|
||||
|
||||
// 判断是否是 GetFile 请求（路径以 /contents 结尾）
|
||||
const isContentsRequest = url.pathname.endsWith('/contents');
|
||||
|
||||
// 如果是 GetFile 请求，需要移除路径末尾的 /contents
|
||||
if (isContentsRequest && fileId.endsWith('/contents')) {
|
||||
fileId = fileId.slice(0, -9); // 移除 '/contents'
|
||||
}
|
||||
|
||||
if (isContentsRequest) {
|
||||
// GetFile: 返回文件内容
|
||||
const { buffer, metadata } = await wopiService.getFile(fileId, accessToken);
|
||||
|
||||
return new Response(buffer, {
|
||||
headers: {
|
||||
'Content-Type': metadata.contentType,
|
||||
'Content-Length': metadata.size.toString(),
|
||||
'Content-Disposition': 'inline',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// CheckFileInfo: 返回文件元数据
|
||||
const checkFileInfo = await wopiService.checkFileInfo(fileId, accessToken);
|
||||
|
||||
// 注意：CheckFileInfo 必须返回纯 JSON，不能使用 Result.success() 包装
|
||||
return Response.json(checkFileInfo);
|
||||
} catch (error) {
|
||||
console.error('WOPI GET 失败:', error);
|
||||
return new Response(
|
||||
error instanceof Error ? error.message : 'Internal server error',
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST 请求处理
|
||||
* - PutFile: 保存文件内容
|
||||
*/
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const accessToken = url.searchParams.get('access_token');
|
||||
|
||||
if (!accessToken) {
|
||||
return new Response('访问令牌缺失', { status: 401 });
|
||||
}
|
||||
|
||||
// 获取文件 ID（使用 splat 参数 '*'）
|
||||
let fileId = params['*'] || '';
|
||||
|
||||
// 判断是否是 PutFile 请求（路径以 /contents 结尾）
|
||||
const isContentsRequest = url.pathname.endsWith('/contents');
|
||||
|
||||
if (!isContentsRequest) {
|
||||
return new Response('PutFile 必须使用 /contents 路径', { status: 400 });
|
||||
}
|
||||
|
||||
// 移除路径末尾的 /contents
|
||||
if (fileId.endsWith('/contents')) {
|
||||
fileId = fileId.slice(0, -9);
|
||||
}
|
||||
|
||||
// PutFile: 保存文件
|
||||
const fileBuffer = await request.arrayBuffer();
|
||||
await wopiService.putFile(fileId, accessToken, fileBuffer);
|
||||
|
||||
return new Response(null, { status: 200 });
|
||||
} catch (error) {
|
||||
console.error('WOPI POST 失败:', error);
|
||||
return new Response(
|
||||
error instanceof Error ? error.message : 'Internal server error',
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
*/
|
||||
|
||||
import { type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { WopiService } from '~/lib/collabora/wopi.server';
|
||||
import { WopiService } from '../services/collabora.wopi.server';
|
||||
|
||||
const wopiService = new WopiService();
|
||||
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Collabora Online 配置生成服务
|
||||
*
|
||||
* 职责：
|
||||
* - 生成 Collabora iframe URL
|
||||
* - 生成 WOPI access token
|
||||
* - 构建完整的 Collabora 配置
|
||||
*
|
||||
* @encoding UTF-8
|
||||
*/
|
||||
|
||||
import type { CollaboraConfig } from '~/components/collabora/types';
|
||||
import { APP_URL, COLLABORA_URL } from '~/config/api-config';
|
||||
import { WopiService } from './collabora.wopi.server';
|
||||
|
||||
/**
|
||||
* Collabora 配置生成参数
|
||||
*/
|
||||
export interface GenerateConfigParams {
|
||||
fileId: string;
|
||||
mode: 'view' | 'edit';
|
||||
userId: string;
|
||||
userName: string;
|
||||
frontendJWT: string; // 用户的前端JWT token（用于调用FastAPI）
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 Collabora 配置
|
||||
* @param params - 配置参数
|
||||
* @returns Collabora 配置对象
|
||||
*/
|
||||
export async function generateCollaboraConfig(
|
||||
params: GenerateConfigParams
|
||||
): Promise<CollaboraConfig> {
|
||||
const { fileId, mode, userId, userName, frontendJWT } = params;
|
||||
|
||||
// 创建 WOPI 服务实例
|
||||
const wopiService = new WopiService();
|
||||
|
||||
// 生成 WOPI access token（2 小时有效期）
|
||||
const accessToken = wopiService.generateAccessToken(
|
||||
{
|
||||
fileId,
|
||||
mode,
|
||||
userId,
|
||||
userName,
|
||||
frontendJWT,
|
||||
},
|
||||
7200 // 2 小时
|
||||
);
|
||||
|
||||
// 构建 WOPI Src URL
|
||||
const wopiSrc = `${APP_URL}/api/collabora/wopi/files/${encodeURIComponent(fileId)}`;
|
||||
|
||||
// 构建 Collabora iframe URL
|
||||
const iframeUrl = buildCollaboraIframeUrl({
|
||||
collaboraUrl: COLLABORA_URL,
|
||||
wopiSrc,
|
||||
accessToken,
|
||||
mode,
|
||||
});
|
||||
|
||||
// 提取文件名
|
||||
const fileName = fileId.split('/').pop() || 'document.docx';
|
||||
|
||||
return {
|
||||
iframeUrl,
|
||||
accessToken,
|
||||
fileName,
|
||||
fileId,
|
||||
collaboraUrl: COLLABORA_URL,
|
||||
wopiSrc,
|
||||
mode,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建 Collabora iframe URL
|
||||
* @param params - URL 构建参数
|
||||
* @returns Collabora iframe URL
|
||||
*/
|
||||
function buildCollaboraIframeUrl(params: {
|
||||
collaboraUrl: string;
|
||||
wopiSrc: string;
|
||||
accessToken: string;
|
||||
mode: 'view' | 'edit';
|
||||
}): string {
|
||||
const { collaboraUrl, wopiSrc, accessToken, mode } = params;
|
||||
|
||||
// Collabora iframe 基础 URL
|
||||
// fa80579 是 Collabora 的版本号标识，实际部署时可能需要调整
|
||||
const baseUrl = `${collaboraUrl}/browser/fa80579/cool.html`;
|
||||
|
||||
const url = new URL(baseUrl);
|
||||
|
||||
// 设置 WOPI Src
|
||||
url.searchParams.set('WOPISrc', wopiSrc);
|
||||
|
||||
// 设置 access token
|
||||
url.searchParams.set('access_token', accessToken);
|
||||
|
||||
// 设置 token 过期时间（毫秒）
|
||||
url.searchParams.set('access_token_ttl', '7200000'); // 2 小时
|
||||
|
||||
// UI 定制参数
|
||||
const uiDefaults = [
|
||||
'UIMode=compact', // 紧凑模式
|
||||
'TextRuler=false', // 隐藏标尺
|
||||
'TextStatusbar=false', // 隐藏状态栏
|
||||
'TextSidebar=false', // 隐藏侧边栏
|
||||
'SavedUIState=false', // 不保存 UI 状态
|
||||
].join(';');
|
||||
url.searchParams.set('ui_defaults', uiDefaults);
|
||||
|
||||
// 其他 UI 参数
|
||||
url.searchParams.set('closebutton', '0'); // 隐藏关闭按钮
|
||||
url.searchParams.set('revisionhistory', 'false'); // 禁用修订历史
|
||||
url.searchParams.set('lang', 'zh-CN'); // 设置语言为中文
|
||||
|
||||
// 根据模式设置权限
|
||||
if (mode === 'view') {
|
||||
// 只读模式：通过 URL 参数限制权限
|
||||
url.searchParams.set('permission', 'readonly');
|
||||
}
|
||||
|
||||
return url.toString();
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
/**
|
||||
* WOPI (Web Application Open Platform Interface) 协议服务层
|
||||
*
|
||||
* 职责：
|
||||
* - CheckFileInfo: 返回文件元数据
|
||||
* - GetFile: 返回文件内容
|
||||
* - PutFile: 保存文件内容
|
||||
*
|
||||
* @encoding UTF-8
|
||||
*/
|
||||
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { DOCUMENT_URL } from '~/config/api-config';
|
||||
|
||||
/**
|
||||
* WOPI Access Token Payload
|
||||
*/
|
||||
export interface WopiTokenPayload {
|
||||
fileId: string;
|
||||
mode: 'view' | 'edit';
|
||||
userId: string;
|
||||
userName: string;
|
||||
frontendJWT: string; // 用户的前端JWT token（用于调用FastAPI）
|
||||
iat: number; // 签发时间
|
||||
exp: number; // 过期时间
|
||||
}
|
||||
|
||||
/**
|
||||
* WOPI 服务类
|
||||
*/
|
||||
export class WopiService {
|
||||
private readonly jwtSecret: string;
|
||||
|
||||
constructor() {
|
||||
const secret = process.env.JWT_SECRET;
|
||||
if (!secret) {
|
||||
throw new Error('JWT_SECRET environment variable is not set');
|
||||
}
|
||||
this.jwtSecret = secret;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 WOPI access token
|
||||
* @param params - Token 参数
|
||||
* @param expiresIn - 过期时间（秒），默认 2 小时
|
||||
* @returns JWT token
|
||||
*/
|
||||
generateAccessToken(params: {
|
||||
fileId: string;
|
||||
mode: 'view' | 'edit';
|
||||
userId: string;
|
||||
userName: string;
|
||||
frontendJWT: string; // 用户的前端JWT token
|
||||
}, expiresIn: number = 7200): string {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
const payload: WopiTokenPayload = {
|
||||
fileId: params.fileId,
|
||||
mode: params.mode,
|
||||
userId: params.userId,
|
||||
userName: params.userName,
|
||||
frontendJWT: params.frontendJWT,
|
||||
iat: now,
|
||||
exp: now + expiresIn,
|
||||
};
|
||||
|
||||
return jwt.sign(payload, this.jwtSecret, {
|
||||
algorithm: 'HS256',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证 WOPI access token
|
||||
* @param token - JWT token
|
||||
* @param fileId - 文件 ID（用于验证 token 中的 fileId 是否匹配）
|
||||
* @returns Token payload
|
||||
* @throws Error 如果 token 无效
|
||||
*/
|
||||
private verifyAccessToken(token: string, fileId: string): WopiTokenPayload {
|
||||
try {
|
||||
const payload = jwt.verify(token, this.jwtSecret, {
|
||||
algorithms: ['HS256'],
|
||||
}) as WopiTokenPayload;
|
||||
|
||||
// 验证文件 ID 是否匹配
|
||||
if (payload.fileId !== fileId) {
|
||||
throw new Error('Token 文件 ID 不匹配');
|
||||
}
|
||||
|
||||
// 验证过期时间
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
if (payload.exp && payload.exp < now) {
|
||||
throw new Error('Token 已过期');
|
||||
}
|
||||
|
||||
return payload;
|
||||
} catch (error) {
|
||||
console.error('WOPI token 验证失败:', error);
|
||||
throw new Error('Token 无效');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件路径清理（防止目录遍历攻击）
|
||||
* @param fileId - 文件 ID
|
||||
* @returns 清理后的文件 ID
|
||||
*/
|
||||
private sanitizeFileId(fileId: string): string {
|
||||
// 移除 ../ 和绝对路径
|
||||
return fileId.replace(/\.\./g, '').replace(/^\//, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* CheckFileInfo - 返回文件元数据
|
||||
* @param fileId - 文件路径（例如：contracts/test.docx）
|
||||
* @param accessToken - WOPI access token
|
||||
* @returns 文件元数据（WOPI CheckFileInfo 响应）
|
||||
*/
|
||||
async checkFileInfo(fileId: string, accessToken: string) {
|
||||
// 验证 token
|
||||
const tokenData = this.verifyAccessToken(accessToken, fileId);
|
||||
|
||||
// 清理文件路径
|
||||
const sanitizedFileId = this.sanitizeFileId(fileId);
|
||||
|
||||
// 通过 FastAPI 代理获取文件元数据（使用 HEAD 请求）
|
||||
const fileUrl = `${DOCUMENT_URL}${sanitizedFileId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(fileUrl, {
|
||||
method: 'HEAD',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${tokenData.frontendJWT}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`文件不存在: ${sanitizedFileId}`);
|
||||
}
|
||||
|
||||
const contentLength = response.headers.get('Content-Length');
|
||||
const lastModified = response.headers.get('Last-Modified');
|
||||
const fileName = sanitizedFileId.split('/').pop() || 'document.docx';
|
||||
|
||||
// 返回 WOPI CheckFileInfo 响应
|
||||
return {
|
||||
// 基本文件信息
|
||||
BaseFileName: fileName,
|
||||
Size: contentLength ? parseInt(contentLength, 10) : 0,
|
||||
Version: lastModified || Date.now().toString(),
|
||||
|
||||
// 用户信息
|
||||
UserId: tokenData.userId,
|
||||
UserFriendlyName: tokenData.userName,
|
||||
|
||||
// 文件权限
|
||||
UserCanWrite: tokenData.mode === 'edit',
|
||||
UserCanNotWriteRelative: true,
|
||||
|
||||
// Collabora 特定属性
|
||||
EnableOwnerTermination: false,
|
||||
SupportsUpdate: tokenData.mode === 'edit',
|
||||
SupportsLocks: false,
|
||||
|
||||
// UI 隐藏选项
|
||||
HidePrintOption: false,
|
||||
HideSaveOption: false,
|
||||
HideExportOption: false,
|
||||
HideUserList: 'desktop',
|
||||
|
||||
// 功能配置
|
||||
DisableInactiveMessages: true,
|
||||
DisableAutoSave: true,
|
||||
|
||||
// 文件最后修改时间
|
||||
LastModifiedTime: lastModified || new Date().toISOString(),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('CheckFileInfo 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GetFile - 返回文件内容
|
||||
* @param fileId - 文件路径
|
||||
* @param accessToken - WOPI access token
|
||||
* @returns 文件内容和元数据
|
||||
*/
|
||||
async getFile(fileId: string, accessToken: string) {
|
||||
// 验证 token
|
||||
const tokenData = this.verifyAccessToken(accessToken, fileId);
|
||||
|
||||
// 清理文件路径
|
||||
const sanitizedFileId = this.sanitizeFileId(fileId);
|
||||
|
||||
// 通过 FastAPI 代理获取文件内容
|
||||
const fileUrl = `${DOCUMENT_URL}${sanitizedFileId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(fileUrl, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${tokenData.frontendJWT}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`获取文件失败: ${sanitizedFileId}`);
|
||||
}
|
||||
|
||||
const buffer = Buffer.from(await response.arrayBuffer());
|
||||
const contentType = response.headers.get('Content-Type') ||
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||||
|
||||
return {
|
||||
buffer,
|
||||
metadata: {
|
||||
contentType,
|
||||
size: buffer.length,
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('GetFile 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* PutFile - 保存文件内容
|
||||
* @param fileId - 文件路径
|
||||
* @param accessToken - WOPI access token
|
||||
* @param fileBuffer - 文件内容
|
||||
*/
|
||||
async putFile(fileId: string, accessToken: string, fileBuffer: ArrayBuffer) {
|
||||
// 验证 token
|
||||
const tokenData = this.verifyAccessToken(accessToken, fileId);
|
||||
|
||||
// 检查是否有写入权限
|
||||
if (tokenData.mode !== 'edit') {
|
||||
throw new Error('无写入权限');
|
||||
}
|
||||
|
||||
// 清理文件路径
|
||||
const sanitizedFileId = this.sanitizeFileId(fileId);
|
||||
|
||||
// 通过 FastAPI 代理上传文件
|
||||
const uploadUrl = `${DOCUMENT_URL}${sanitizedFileId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(uploadUrl, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'Authorization': `Bearer ${tokenData.frontendJWT}`,
|
||||
},
|
||||
body: fileBuffer,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`保存文件失败: ${sanitizedFileId}`);
|
||||
}
|
||||
|
||||
console.log(`PutFile 成功: ${sanitizedFileId}, Size: ${fileBuffer.byteLength} bytes`);
|
||||
} catch (error) {
|
||||
console.error('PutFile 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"version": "1.0"
|
||||
}
|
||||
Reference in New Issue
Block a user