21 lines
3.3 KiB
Markdown
21 lines
3.3 KiB
Markdown
__核心架构：__ 新表格块 `OnlineTableBlock` 将仅在 Blocknote 文档中存储一个 `tableId`，实际表格数据和协同编辑将通过 `tableId` 关联 Supabase 表 (`document_tables` / `document_table_rows`)，并由 Luckysheet 在全屏模式下处理。
|
||
|
||
__数据模型 (`src/types/online-table.ts`)：__ 定义表格元数据和支持的列类型（文本、数字、货币、日期、选项、复选、公式、引用）。
|
||
|
||
__阶段一：Blocknote 集成与数据准备__
|
||
|
||
| 步骤 | 目标 | 涉及文件 | 详细说明 | | :--- | :--- | :--- | :--- | | 1.1 | 创建数据模型 | `wolai-frontend/src/types/online-table.ts` | 定义表格的 TS 类型，包括列定义 (`TableSchema` / `ColumnType`) 和行数据结构。 | | 1.2 | 创建服务逻辑 | `wolai-frontend/src/lib/online-table.ts` | 创建用于调用后端 API 创建新表格的函数 `createOnlineTable(documentId: string)`。 | | 1.3 | 注册自定义块 | `wolai-frontend/src/components/editor/blocks/OnlineTableBlock.tsx` | 定义 `onlineTableBlock` 的 Block Spec，属性为 `{ tableId: string }`。 | | 1.4 | 更新 Schema | `wolai-frontend/src/components/editor/schema.ts` | 导入并注册 `onlineTableBlock`。 | | 1.5 | 集成 Slash Menu | `wolai-frontend/src/components/editor/menus/CustomSlashMenu.tsx` | 添加“在线表格”菜单项，点击后调用 `createOnlineTable` 并插入 `{ type: 'onlineTable', props: { tableId: newId } }` 块。 |
|
||
|
||
__阶段二：紧凑模式（内联视图）实现__
|
||
|
||
| 步骤 | 目标 | 涉及文件 | 详细说明 | | :--- | :--- | :--- | :--- | | 2.1 | 创建预览组件 | `wolai-frontend/src/components/online-table/CompactTablePreview.tsx` | 实现一个轻量级组件，用于查询 Supabase 获取表格元数据和前 N 行数据（N=3或5），并以紧凑模式渲染。 | | 2.2 | 实现轻编辑 UI | `CompactTablePreview.tsx` | 实现列宽拖拽、单元格批量粘贴的输入逻辑（可能需要依赖一个小型网格库或自建简化网格）。 | | 2.3 | 实现 Hover Toolbar | `CompactTablePreview.tsx` | 鼠标悬停时显示工具栏，包含“进入全屏”按钮和“插入/删除行列”的轻编辑操作。 | | 2.4 | 渲染 Block | `OnlineTableBlock.tsx` | 在 Blocknote 中使用 `CompactTablePreview` 组件。 |
|
||
|
||
__阶段三：全屏模式（Luckysheet 完整体验）实现__
|
||
|
||
| 步骤 | 目标 | 涉及文件 | 详细说明 | | :--- | :--- | :--- | :--- | | 3.1 | 创建全屏组件 | `wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx` | 封装 Luckysheet 和 Yjs 绑定，确保全屏模式下加载指定 `tableId` 的协同数据。 | | 3.2 | 实现模式切换 | `OnlineTableBlock.tsx` / `CompactTablePreview.tsx` | 实现双击或点击工具栏按钮时，通过 Next.js 路由或 Modal 导航到 `/tables/[tableId]/edit` (或打开全屏 Modal)。 | | 3.3 | 增强编辑功能 | `FullScreenTableEditor.tsx` | 配置 Luckysheet，实现冻结首行列、批量填充、组合快捷键、单元格格式和多种列类型支持。 |
|
||
|
||
__阶段四：后端 API 完善__
|
||
|
||
| 步骤 | 目标 | 涉及文件 | 详细说明 | | :--- | :--- | :--- | :--- | | 4.1 | 数据库表确认 | N/A | 确认 Supabase 中的 `document_tables` 和 `document_table_rows` 已存在。 | | 4.2 | 实现 CRUD API | `wolai-backend/app/api/tables.py` | 实现表格的创建、获取元数据、获取行数据的 API，供前端服务调用。 |
|
||
|