+
+ );
+ }
+
+ // 错误状态
+ if (error || !config) {
+ return (
+
+
+
+ 加载文档配置中...
+
+
+ );
+ }
+
+ return (
+
+
+
+ {error || '加载配置失败'}
+请刷新页面重试或联系管理员
+
+ {/* 文档加载提示 */}
+ {!isDocumentLoaded && (
+
+ );
+}
+
+// 导出 UNO 命令 hook 供父组件使用（如果需要）
+export { useCollaboraUnoCommands };
diff --git a/app/components/collabora/Uno.ts b/app/components/collabora/Uno.ts
new file mode 100644
index 0000000..c20af04
--- /dev/null
+++ b/app/components/collabora/Uno.ts
@@ -0,0 +1,168 @@
+/**
+ * Collabora Online UNO 命令工具函数
+ *
+ * 职责: 封装 Collabora iframe 的 UNO 命令调用
+ *
+ * @encoding UTF-8
+ */
+
+/**
+ * 发送 UNO 命令到 Collabora iframe
+ * @param iframeWindow - iframe 的 contentWindow
+ * @param command - UNO 命令名称，如 '.uno:ExecuteSearch'
+ * @param args - 命令参数
+ */
+export function sendUnoCommand(
+ iframeWindow: Window,
+ command: string,
+ args: Record
+
+ )}
+
+ {/* Collabora iframe */}
+
+
+
+
+ 正在加载文档...
+{config.fileName}
+暂不支持预览此类型的文件：{fileExtension}
diff --git a/app/config/api-config.ts b/app/config/api-config.ts index 2901213..15ee7cc 100644 --- a/app/config/api-config.ts +++ b/app/config/api-config.ts @@ -11,6 +11,10 @@ interface ApiConfig { documentUrl: string; // 文档上传API URL uploadUrl: string; + // Collabora Online 服务器地址 + collaboraUrl: string; + // 应用基础URL（用于 WOPI 回调） + appUrl: string; // OAuth2.0配置 oauth: { // IDaaS服务器地址 @@ -33,26 +37,24 @@ const portConfigs: Record
{/* 登出表单 - 隐藏 */}
@@ -250,24 +289,45 @@ export default function Index() {
{/* 动态渲染入口模块 */}
{loaderData.entryModules && loaderData.entryModules.length > 0 ? (
- loaderData.entryModules.map((module) => (
-
handleModuleClick(module)}
- onKeyDown={(e) => handleKeyDown(module, e)}
- role="button"
- tabIndex={0}
- aria-label={module.name}
- >
- })
- {module.name}
-
- ))
+ <>
+ {loaderData.entryModules.map((module) => (
+ handleModuleClick(module)}
+ onKeyDown={(e) => handleKeyDown(module, e)}
+ role="button"
+ tabIndex={0}
+ aria-label={module.name}
+ >
+
+ {module.name}
+
+ ))}
+
+ {/* 🔑 系统设置入口 - 只有有权限的用户才能看到 */}
+ {loaderData.hasSettingsAccess && (
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ handleEnterSettings();
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ aria-label="系统设置"
+ >
+
+ 系统设置
+
+ )}
+
) : (
暂无可用模块
diff --git a/app/routes/api.collabora.config.tsx b/app/routes/api.collabora.config.tsx
new file mode 100644
index 0000000..09b9277
--- /dev/null
+++ b/app/routes/api.collabora.config.tsx
@@ -0,0 +1,72 @@
+/**
+ * Collabora 配置生成 API 路由
+ *
+ * 功能：
+ * - 生成 Collabora iframe URL
+ * - 生成 WOPI access token
+ * - 返回完整的 Collabora 配置
+ *
+ * @encoding UTF-8
+ */
+
+import { type LoaderFunctionArgs, json } from '@remix-run/node';
+import { getUserSession } from '~/api/login/auth.server';
+import { generateCollaboraConfig } from '~/services/collabora.config.server';
+
+/**
+ * GET /api/collabora/config
+ *
+ * 查询参数：
+ * - fileId: 文件路径（例如：contracts/test.docx）
+ * - mode: 模式（view 或 edit），默认 view
+ * - userId: 用户 ID（可选，从 session 获取）
+ * - userName: 用户名（可选，从 session 获取）
+ */
+export async function loader({ request }: LoaderFunctionArgs) {
+ try {
+ // 获取用户会话信息和 frontendJWT
+ const { userInfo, frontendJWT } = await getUserSession(request);
+
+ // 解析查询参数
+ const url = new URL(request.url);
+ const fileId = url.searchParams.get('fileId');
+ const mode = (url.searchParams.get('mode') || 'view') as 'view' | 'edit';
+ const userId = url.searchParams.get('userId') || userInfo?.sub || 'guest';
+ const userName = url.searchParams.get('userName') || userInfo?.nick_name || '访客';
+
+ // 验证必需参数
+ if (!fileId) {
+ return json(
+ { error: '文件路径不能为空' },
+ { status: 400 }
+ );
+ }
+
+ // 验证 frontendJWT
+ if (!frontendJWT) {
+ return json(
+ { error: '用户未认证' },
+ { status: 401 }
+ );
+ }
+
+ // 生成 Collabora 配置
+ const config = await generateCollaboraConfig({
+ fileId,
+ mode,
+ userId,
+ userName,
+ frontendJWT,
+ });
+
+ return json(config);
+ } catch (error) {
+ console.error('生成 Collabora 配置失败:', error);
+ return json(
+ {
+ error: error instanceof Error ? error.message : '生成配置失败',
+ },
+ { status: 500 }
+ );
+ }
+}
diff --git a/app/routes/api.collabora.wopi.files.$.tsx b/app/routes/api.collabora.wopi.files.$.tsx
new file mode 100644
index 0000000..e976dac
--- /dev/null
+++ b/app/routes/api.collabora.wopi.files.$.tsx
@@ -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 }
+ );
+ }
+}
diff --git a/app/routes/api.collabora.wopi.files.$fileId.tsx b/app/routes/api.collabora.wopi.files.$fileId.tsx
new file mode 100644
index 0000000..f82150a
--- /dev/null
+++ b/app/routes/api.collabora.wopi.files.$fileId.tsx
@@ -0,0 +1,98 @@
+/**
+ * WOPI 协议 API 路由
+ *
+ * 功能：
+ * - CheckFileInfo: GET /api/collabora/wopi/files/{fileId}
+ * - GetFile: GET /api/collabora/wopi/files/{fileId}/contents
+ * - PutFile: POST /api/collabora/wopi/files/{fileId}/contents
+ *
+ * @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
+ const fileId = params.fileId || '';
+
+ // 判断是否是 GetFile 请求（路径以 /contents 结尾）
+ const isContentsRequest = url.pathname.endsWith('/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 });
+ }
+
+ const fileId = params.fileId || '';
+
+ // 判断是否是 PutFile 请求（路径以 /contents 结尾）
+ const isContentsRequest = url.pathname.endsWith('/contents');
+
+ if (!isContentsRequest) {
+ return new Response('PutFile 必须使用 /contents 路径', { status: 400 });
+ }
+
+ // 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 }
+ );
+ }
+}
diff --git a/app/routes/callback.tsx b/app/routes/callback.tsx
index 57052a7..30fdd4c 100644
--- a/app/routes/callback.tsx
+++ b/app/routes/callback.tsx
@@ -145,8 +145,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
}
console.log("✅ [Callback] 用户信息获取成功");
- // 获取重定向URL
- const redirectTo = url.searchParams.get("redirect") || "/";
+ // 🔑 强制重定向到首页，确保用户选择入口模块并初始化 sessionStorage
+ // 忽略 redirect 参数，总是跳转到首页让用户选择模块
+ const redirectTo = "/";
// 调用后端登录接口,传递 OAuth 用户信息,获取 JWT token
const loginRequest: LoginRequest = {
@@ -271,7 +272,8 @@ export default function Callback() {
// 从 URL 参数中获取 token（如果有）
const token = searchParams.get("token");
const userInfo = searchParams.get("userInfo");
- const redirectTo = searchParams.get("redirectTo") || "/";
+ // 🔑 强制重定向到首页，确保用户选择入口模块并初始化 sessionStorage
+ const redirectTo = "/";
if (token && typeof window !== 'undefined') {
console.log('🔑 [Callback] 开始保存 token 到 localStorage');
diff --git a/app/routes/contract-template.detail.$id.tsx b/app/routes/contract-template.detail.$id.tsx
index e95bdaa..dbd2b77 100644
--- a/app/routes/contract-template.detail.$id.tsx
+++ b/app/routes/contract-template.detail.$id.tsx
@@ -150,11 +150,13 @@ export default function ContractTemplateDetail() {
}; */
// 创建文件内容对象用于FilePreview组件
- const fileContent = template.pdf_file_path ? {
+ // 优先使用原始文件路径（支持docx），如果没有则使用pdf_file_path
+ const previewPath = template.file_path || template.pdf_file_path;
+ const fileContent = previewPath ? {
title: template.title,
contractNumber: template.template_code,
- // 使用pdf_file_path字段
- path: template.pdf_file_path,
+ // 使用file_path以支持多种格式（docx/pdf）
+ path: previewPath,
parties: {
partyA: {
name: '',
diff --git a/app/routes/entry-modules._index.tsx b/app/routes/entry-modules._index.tsx
index 964420b..f14dc89 100644
--- a/app/routes/entry-modules._index.tsx
+++ b/app/routes/entry-modules._index.tsx
@@ -31,6 +31,11 @@ export const meta: MetaFunction = () => {
];
};
+// 面包屑配置
+export const handle = {
+ breadcrumb: "入口模块管理"
+};
+
// 定义加载器返回的数据类型
interface LoaderData {
diff --git a/app/routes/entry-modules.new.tsx b/app/routes/entry-modules.new.tsx
index 120df4a..4b11b79 100644
--- a/app/routes/entry-modules.new.tsx
+++ b/app/routes/entry-modules.new.tsx
@@ -22,7 +22,11 @@ export const meta: MetaFunction = () => {
};
export const handle = {
- breadcrumb: "新建/编辑入口模块"
+ breadcrumb: "新建/编辑入口模块",
+ previousRoute: {
+ title: "入口模块管理",
+ to: "/entry-modules"
+ }
};
// 定义加载器返回的数据类型
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
index 33a9f83..993a056 100644
--- a/app/routes/login.tsx
+++ b/app/routes/login.tsx
@@ -79,7 +79,8 @@ export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();
const username = formData.get("username") as string;
const password = formData.get("password") as string;
- const redirectTo = formData.get("redirectTo") as string || "/";
+ // 🔑 强制重定向到首页，确保用户选择入口模块并初始化 sessionStorage
+ const redirectTo = "/";
// 验证输入
if (!username?.trim()) {
diff --git a/app/services/collabora.config.server.ts b/app/services/collabora.config.server.ts
new file mode 100644
index 0000000..bfe3e55
--- /dev/null
+++ b/app/services/collabora.config.server.ts
@@ -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 {
+ 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();
+}
diff --git a/app/services/collabora.wopi.server.ts b/app/services/collabora.wopi.server.ts
new file mode 100644
index 0000000..48f6236
--- /dev/null
+++ b/app/services/collabora.wopi.server.ts
@@ -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;
+ }
+ }
+}
diff --git a/app/styles/pages/home.css b/app/styles/pages/home.css
index 2116b07..e0feb56 100644
--- a/app/styles/pages/home.css
+++ b/app/styles/pages/home.css
@@ -80,7 +80,7 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: flex-start; /* 改为从顶部开始 */
padding-bottom: 0;
margin-bottom: 0;
background-color: #f0f7f4;
@@ -91,27 +91,61 @@
}
.index-main-content-container {
- padding: 2rem 0;
+ padding: 0;
margin: 0 auto;
width: 90%;
max-width: 1200px;
- transform: translateY(-7rem);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
+
.welcome-text {
font-size: 1.95rem;
font-weight: 500;
color: #333;
- margin-bottom: 5rem;
text-align: center;
+ /* 标题固定在页面上方 1/4 处，水平垂直居中 */
+ height: 25vh; /* 占据上方 25% 的高度 */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ flex-shrink: 0; /* 防止被压缩 */
}
.modules-container {
display: flex;
+ flex-wrap: wrap; /* 自动换行 */
justify-content: center;
+ align-content: flex-start; /* 内容从顶部开始排列 */
gap: 2.5rem;
- margin-bottom: 3rem;
+ flex: 1; /* 占据剩余空间 */
+ overflow-y: auto; /* 超出高度时显示垂直滚动条 */
+ overflow-x: hidden; /* 隐藏水平滚动条 */
+ padding: 2rem 0 3rem 0; /* 上下留出一些空间 */
}
-
+
+ /* 滚动条样式优化 */
+ .modules-container::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ .modules-container::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 4px;
+ }
+
+ .modules-container::-webkit-scrollbar-thumb {
+ background: rgba(0, 104, 74, 0.3);
+ border-radius: 4px;
+ transition: background 0.2s;
+ }
+
+ .modules-container::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 104, 74, 0.5);
+ }
+
.module-card {
display: flex;
align-items: center;
@@ -120,6 +154,7 @@
padding: 0 2rem;
height: 136px;
width: 290px;
+ flex-shrink: 0; /* 防止卡片被压缩 */
background: linear-gradient(180deg, #ebf1f7 0%, #ffffff 100%);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
@@ -234,22 +269,28 @@
.index-main-content-container {
width: 95%;
- padding: 1rem 0;
- transform: translateY(-2rem);
+ padding: 0;
}
.welcome-text {
font-size: 1.3rem;
- margin-bottom: 2.5rem;
+ height: 20vh; /* 移动端标题区域稍小一点 */
padding: 0 1rem;
}
/* 模块容器改为纵向排列 */
.modules-container {
flex-direction: column;
+ flex-wrap: nowrap; /* 移动端不需要换行 */
gap: 1.25rem;
- margin-bottom: 1.5rem;
align-items: center;
+ overflow-y: auto; /* 移动端超出长度滚动显示 */
+ padding: 1rem 0 2rem 0;
+ }
+
+ /* 移动端滚动条样式 */
+ .modules-container::-webkit-scrollbar {
+ width: 6px;
}
/* 模块卡片调整 */
@@ -259,6 +300,7 @@
height: 100px;
padding: 0 1.5rem;
gap: 1.25rem;
+ flex-shrink: 0; /* 移动端也防止卡片被压缩 */
}
.module-card img {
@@ -299,7 +341,7 @@
.welcome-text {
font-size: 1.15rem;
- margin-bottom: 2rem;
+ height: 18vh; /* 超小屏幕标题区域更小 */
}
.module-card {
@@ -327,20 +369,20 @@
@media (min-width: 769px) and (max-width: 1024px) {
.index-main-content-container {
width: 85%;
- transform: translateY(-5rem);
+ }
+
+ .welcome-text {
+ font-size: 1.75rem;
+ height: 22vh; /* 平板电脑标题区域高度 */
}
.modules-container {
gap: 2rem;
+ padding: 1.5rem 0 2.5rem 0;
}
.module-card {
width: 260px;
height: 120px;
}
-
- .welcome-text {
- font-size: 1.75rem;
- margin-bottom: 4rem;
- }
}
\ No newline at end of file
diff --git a/public/.well-known/appspecific/com.chrome.devtools.json b/public/.well-known/appspecific/com.chrome.devtools.json
new file mode 100644
index 0000000..90fa5e8
--- /dev/null
+++ b/public/.well-known/appspecific/com.chrome.devtools.json
@@ -0,0 +1,3 @@
+{
+ "version": "1.0"
+}
\ No newline at end of file