Compare commits
10 Commits
e9821a3b7f
...
0f4a418408
| Author | SHA1 | Date |
|---|---|---|
chiguyong
|
0f4a418408 | |
|
chiguyong
|
137bda0361 | |
|
chiguyong
|
229dc0b2f3 | |
|
chiguyong
|
e931fbef2d | |
|
chiguyong
|
f280627da1 | |
|
chiguyong
|
5baaeb489d | |
|
chiguyong
|
f0c993a0d9 | |
|
chiguyong
|
e1cf073693 | |
|
chiguyong
|
96ccca3d87 | |
|
chiguyong
|
f8927d1749 |
|
|
@ -29,7 +29,7 @@ agentkit bitable 后端 v1 已基本齐全：`BitableFile→Table→Field/Record
|
|||
- REST 端点：28 个，前缀 `/api/v1/bitable`（`src/agentkit/server/routes/bitable.py`），JWT 或 `X-Internal-Token` 认证，404-before-403 所有权检查
|
||||
- 字段类型（后端 `FieldType` 枚举）：`text`/`number`/`date`/`select`/`multiselect`/`attachment`/`image`/`formula`/`lookup`（9 种）
|
||||
- 字段所有权：`FieldOwner.agent`/`user`，upsert 只更新 agent 列，用户列不被覆盖
|
||||
- 默认字段：5 个模板（标题 `text` / 状态 `select` / 日期 `date` / 创建人 `text` / 创建时间 `date`）——注意 `FieldType` 枚举无 `user`/`datetime` 类型，创建人与创建时间实际是 `text`/`date`
|
||||
- 默认字段：5 个模板（标题 `text` / 状态 `select` / 日期 `date` / 创建人 `text` / 创建时间 `date`）——注意 `FieldType` 枚举无 `user`/`datetime` 类型，创建人与创建时间实际是 `text`/`date`（R8 schema V3 后将迁移为 `user`/`datetime`，见默认字段迁移矩阵）
|
||||
- 公式引擎：10 函数（`SUM`/`AVG`/`COUNT`/`MIN`/`MAX`/`ABS`/`ROUND`/`IF`/`LEN`/`CONCAT`），AST 节点白名单（见 `formula/parser.py`，永不 eval/exec），DAG 拓扑排序 + 环检测，异步 `RecalcWorker`（0.5s 轮询、300s reaper、600s 过期阈值）
|
||||
- 跨表引用：单向 `lookup`（`lookup_target` 配 `table_id`/`field_id`/`filter_field_id`/`filter_value`）
|
||||
- 采集：Excel（SSRF 守护的 URL 抓取 + openpyxl，`src/agentkit/bitable/ingestion/excel.py`）、数据库（SQLAlchemy 反射，`database.py`）、API（形状变换，`api_collector.py`）
|
||||
|
|
@ -118,7 +118,7 @@ agentkit bitable 后端 v1 已基本齐全：`BitableFile→Table→Field/Record
|
|||
|
||||
- **G4.** 视图只有 grid（枚举 5 种但只渲染 1 种）——飞书 5-6 种、Twenty 3 种
|
||||
- **G5.** 字段类型 9 种（前端 UI 8 种无 lookup）——飞书 25+、Twenty 20+；关键缺：`user`/`checkbox`/`url`/`email`/`phone`/`auto-number`/`datetime`/`modified-by`/`location`/`barcode`/`rating`/`progress`/`currency`/`rich-text`/`date-range`/`json`/双向关联
|
||||
- **G6.** 默认字段"创建人"=`text`、"创建时间"=`date`——因 `FieldType` 无 `user`/`datetime`，默认字段集本身暴露字段类型缺口
|
||||
- **G6.** 默认字段"创建人"=`text`、"创建时间"=`date`——因 `FieldType` 无 `user`/`datetime`，默认字段集本身暴露字段类型缺口（R8 schema V3 迁移将修正：`text` → `user`、`date` → `datetime`）
|
||||
- **G7.** 公式仅 10 函数——缺 `LOOKUP`/`ROLLUP`/`FILTER`/`SORT`/日期函数/条件函数/字符串函数；飞书有丰富函数库 + AI 生成公式
|
||||
- **G8.** 跨表关联仅单向 lookup——无双向关联、无 rollup 聚合
|
||||
- **G9.** 无仪表盘——飞书 12+ 图表类型 + 关联多表 + 千人千面
|
||||
|
|
@ -138,7 +138,7 @@ agentkit bitable 后端 v1 已基本齐全：`BitableFile→Table→Field/Record
|
|||
- **G20.** 协作单用户——飞书实时 + 评论 + 通知；Twenty 有 Notes/Tasks/@mention
|
||||
- **G21.** 无移动端原生——飞书有原生 App
|
||||
- **G22.** 权限粗粒度——仅文件/表所有权，飞书/Twenty 有字段级/记录级 + SSO + 审计
|
||||
- **G23.** 前端无采集入口 UI——后端三类采集就位但前端无触发入口（2026-06-29 阶段二未做）
|
||||
- **G23.** 前端无采集入口 UI——后端三类采集就位但前端无触发入口（2026-06-29 阶段二未做）。**闭合路径**：R15c（路径 (a) 新增 `/collections` 端点 + 前端采集入口 UI；路径 (b) 由 agent 通过 BitableTool 触发——依赖 R15a 完成）
|
||||
|
||||
### 差异化优势（非差距，应加倍投入）
|
||||
|
||||
|
|
@ -170,7 +170,7 @@ agentkit bitable 后端 v1 已基本齐全：`BitableFile→Table→Field/Record
|
|||
|
||||
## Agent 对等评估方法
|
||||
|
||||
bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/bitable_tool.py`）仅暴露 6 个动作（`create_table`/`list_tables`/`query_records`/`create_record`/`update_record`/`delete_record`），存在系统性 agent 孤儿风险。下表为每个 R-ID 标注复用端点、需新增的 BitableTool 动作、以及 agent 孤儿风险等级。
|
||||
bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/bitable_tool.py`）仅暴露 6 个动作（`create_table`/`import_excel`/`import_database`/`collect_api`/`upsert_records`/`query_records`），存在系统性 agent 孤儿风险。下表为每个 R-ID 标注复用端点、需新增的 BitableTool 动作、以及 agent 孤儿风险等级。
|
||||
|
||||
| R-ID | 复用/新增端点 | BitableTool 需新动作 | Agent 孤儿风险 |
|
||||
|------|--------------|---------------------|---------------|
|
||||
|
|
@ -180,7 +180,7 @@ bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/b
|
|||
| R4 | 复用 PATCH /views（需扩展 group_by/conditional_formatting） | `update_view` | 高 — agent 无法配置分组/条件格式 |
|
||||
| R5 | 纯前端 token 系统 | （无需新动作） | 无 |
|
||||
| R6/R7 | 复用 POST /views + PATCH /views | `create_view`/`update_view`（同 R3/R4） | 中 — 与 R3/R4 共享动作 |
|
||||
| R8 | 复用 POST /fields（需扩展类型枚举） | `create_field`（可选，R1 的 `update_field` 已覆盖部分） | 中 |
|
||||
| R8 | 复用 POST /fields（需扩展类型枚举） | `create_field`（**必需**——17 个新类型需 agent 能批量建字段，R1 的 `update_field` 不覆盖创建路径） | 中 |
|
||||
| R9/R10 | 复用公式引擎（`formula/parser.py`）+ POST /fields（双向关联 schema） | （无需新动作，复用 `create_field`/`update_field`） | 低 |
|
||||
| R11 | 复用 POST /views | `create_view`（同 R3） | 中 |
|
||||
| R15a | 复用 DELETE /views（需新增后端端点） | `delete_view` | 高 — 后端 + agent 双侧缺口 |
|
||||
|
|
@ -199,9 +199,10 @@ bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/b
|
|||
|
||||
- R1. 列内联字段配置：列头菜单直接编辑字段（重命名/改类型/选项管理），不跳右侧抽屉。闭合 G14。
|
||||
- R2. 记录详情侧边抽屉：行点击展开详情面板，含所有字段类型的可视化展示与编辑。闭合 G15。
|
||||
- R3. 视图类型切换与创建：`ViewSwitcher` 支持选 grid/kanban/gallery/gantt/form，新建视图选类型（不再硬编码 grid）。P0 暴露全部 5 种类型，未实现的以禁用态展示并标注"规划中"（预告路线图）。闭合 G16，为 P1 视图实现铺路。
|
||||
- R3. 视图类型切换与创建：`ViewSwitcher` 支持选 grid/kanban/gallery/gantt/form，新建视图选类型（不再硬编码 grid）。P0 暴露全部 5 种类型，未实现的以禁用态展示并标注"规划中"（预告路线图）。**后端依赖**：POST /views 需扩展 schema 接受 `type` 字段（当前硬编码 grid）。闭合 G16，为 P1 视图实现铺路。
|
||||
- R4. grid 视图内分组与条件格式：多字段分组 + 规则自动着色。**后端扩展**：View.config 新增 `group_by`/`conditional_formatting` schema，通过 PATCH /views 暴露。**Agent 对等**：BitableTool 的 `create_view`/`update_view` 动作需支持传入这些配置（见 Agent 对等评估方法）。闭合 G17、G18。
|
||||
- R5. 视觉风格对齐：P0 引入统一设计 token 系统（CSS 变量层：颜色/间距/圆角/字号），以 token 驱动重写列头/chip/密度等，配套字段类型图标与彩色 chip 标签达飞书水准。闭合 G1、G2、G3。
|
||||
- R15a. BitableTool 动作补全（P0 提升，agent 对等最高优先级子项）：从 6 个动作扩展到 10 个（新增 `create_view`/`update_view`/`update_field`/`delete_view`），消除与 28 个 REST 端点的 agent 孤儿风险。**与 R3/R4 同步推进**（共享 `create_view`/`update_view` 动作）。强化 D1、D2，闭合 Agent 对等缺口（见 Agent 对等评估方法）。
|
||||
|
||||
### P1 — 功能广度（A 跟进，下一轮 ce-plan）
|
||||
|
||||
|
|
@ -220,7 +221,6 @@ bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/b
|
|||
|
||||
### B 线 — Agent 差异化（贯穿，不阻塞 P0/P1）
|
||||
|
||||
- R15a. BitableTool 动作补全：从 6 个动作扩展到 10 个（新增 `create_view`/`update_view`/`update_field`/`delete_view`），消除与 28 个 REST 端点的 agent 孤儿风险。强化 D1、D2，闭合 Agent 对等缺口（见 Agent 对等评估方法）。
|
||||
- R15b. 自然语言→表结构 agent 技能：agent 接收自然语言描述，调用 BitableTool 完成「建表 + 建字段 + 建视图」一站式编排，作为 agentkit 差异化主线。强化 D1、D2。
|
||||
- R15c. 定时采集 + 前端采集入口 UI：在现有 Excel/DB/API 三类采集基础上，新增定时调度能力（cron 表达式驱动）+ 前端采集入口 UI（闭合 G23）。**路径决策**：(a) 新增 REST 端点 `/api/v1/bitable/collections`（CRUD + 调度器管理）；(b) 由 agent 通过 BitableTool 触发（依赖 R15a 完成）。ce-plan 阶段二选一。
|
||||
|
||||
|
|
@ -259,6 +259,25 @@ bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/b
|
|||
- Given select 选项 chip，When 渲染，Then 对比度 ≥4.5:1（WCAG AA，axe-core 可测试）
|
||||
- Given chip 配色，When 审计，Then 全部来自 design token 调色板
|
||||
|
||||
**R15a. BitableTool 动作补全 + 视图删除端点**
|
||||
- Given BitableTool，When 调用 `create_view`/`update_view`/`update_field`/`delete_view`，Then 4 个新动作全部可用（BitableTool 从 6 扩展到 10 个动作）
|
||||
- Given 视图列表，When 用户点击删除，Then 调用 DELETE /views/{id}（**后端需新增端点**，前端 api/bitable.ts 需补 `deleteView` 方法——见 Outstanding Questions）
|
||||
- Given R3/R4 配置变更，When agent 调用 `create_view`/`update_view` 传 `type`/`group_by`/`conditional_formatting`，Then 配置成功写入（与 REST PATCH /views 等价）
|
||||
- Given 字段配置，When agent 调用 `update_field`，Then 与 PATCH /fields/{id} 等价（agent 不再需要绕过工具直接调 REST）
|
||||
|
||||
**横切验收标准（适用所有 P0 R-ID）**
|
||||
|
||||
可访问性（WCAG AA）：
|
||||
- Given 任何交互元素（按钮/链接/单元格/抽屉触发），When 键盘 Tab 导航，Then 可达且焦点可见（focus-visible 样式）
|
||||
- Given grid 视图，When 屏幕阅读器遍历，Then 列头/单元格有正确 ARIA role 与 label（`role="grid"`/`role="columnheader"`/`aria-label`）
|
||||
- Given select/multiselect 编辑器，When 键盘操作，Then 方向键导航 + Enter 选中 + Esc 关闭（不依赖鼠标）
|
||||
- Given 颜色对比度审计，When axe-core 扫描，Then 所有关键文本 ≥4.5:1、大字号 ≥3:1（WCAG AA）
|
||||
|
||||
空状态（无数据时）：
|
||||
- Given 新建表无字段无记录，When 渲染 grid，Then 显示"暂无字段，点击列头 + 创建"+ "暂无记录"双空状态
|
||||
- Given 视图列表为空，When 渲染 ViewSwitcher，Then 显示"暂无视图，新建 grid 视图"提示（非空白）
|
||||
- Given 抽屉/筛选器/分组无数据，When 渲染，Then 显示对应空状态文案（非空白、非报错）
|
||||
|
||||
---
|
||||
|
||||
## Test Strategy
|
||||
|
|
@ -275,35 +294,41 @@ bitable 后端有 28 个 REST 端点，但 `BitableTool`（`src/agentkit/tools/b
|
|||
| R4 | new: test_grouping.py + test_conditional_formatting.py | helpers/groupingRulesUtils.ts | new: bitable-grouping.spec.ts | - |
|
||||
| R5 | - | helpers/designTokenAudit.ts（grep token 使用） | bitable-view.spec.ts（visual regression） | - |
|
||||
| R8 | test_models.py + test_default_fields.py + test_service.py | helpers/fieldTypeUtils.ts | bitable-field-ops.spec.ts（extend） | integration（schema V3 迁移） |
|
||||
| R15 | test_bitable_tool.py（new actions） | - | new: bitable-agent-parity.spec.ts | redis（notify_callback） |
|
||||
| R15a | test_bitable_tool.py（4 new actions: create_view/update_view/update_field/delete_view） | - | new: bitable-agent-parity.spec.ts | redis（notify_callback） |
|
||||
| R15b | new: test_nl_to_table.py（agent 编排：建表 + 建字段 + 建视图） | helpers/nlTableUtils.ts | new: bitable-nl-table.spec.ts | redis（agent 编排） |
|
||||
| R15c | new: test_collections.py（CRUD + 调度器）+ test_collection_security.py（SSRF/凭据） | helpers/collectionSchedulerUtils.ts | new: bitable-collection-ui.spec.ts | postgres（调度持久化）、redis（cron 触发） |
|
||||
|
||||
**Agent 对等测试契约**：每个 P0/P1 R-ID 交付时，附 BitableTool 调用契约测试——验证 agent 能完成等价操作（人类可做的 agent 也能做）。BitableTool 当前 6 actions vs 28 REST 端点，新增端点的 R-ID 需同步补 BitableTool 动作 + 契约测试。
|
||||
|
||||
**R15c 测试策略补充**：路径 (a) `/collections` 端点需覆盖 (1) CRUD 正常路径；(2) cron 表达式校验与调度触发；(3) SSRF 守护复用 `excel.py` 的 URL 白名单逻辑；(4) 凭据加密存储（建议复用 agentkit 现有 secrets 模块，禁明文）；(5) 端点访问控制：JWT 或 `X-Internal-Token`（与 28 个既有端点一致）。路径 (b) 由 agent 通过 BitableTool 触发，复用 R15a 测试契约，无需单独端点测试。
|
||||
|
||||
---
|
||||
|
||||
## R8 Field Type Acceptance Matrix
|
||||
|
||||
R8 扩展的 16 字段类型 + 1 双向关联的逐类型验收标准。每行映射约 4-6 个单元测试（test_models.py / test_service.py / test_default_fields.py）。
|
||||
R8 扩展的 16 字段类型 + 1 双向关联的逐类型验收标准（**覆盖 P1 范围，非 P0**——P0 验收标准见 Acceptance Criteria (P0)）。每行映射约 4-6 个单元测试（test_models.py / test_service.py / test_default_fields.py）。
|
||||
|
||||
| 类型 | 有效输入 | 无效输入（422） | 所有权 | 公式参与 | V2→V3 迁移 |
|
||||
|---|---|---|---|---|---|
|
||||
| `user` | user_id 字符串 | 非存在 user_id | both | 不支持 | 创建人 `text` → `user` |
|
||||
| `checkbox` | `true`/`false` | 非布尔值 | both | 支持（IF 条件） | - |
|
||||
| `url` | `https://example.com` | 非合法 URL | both | 不支持 | - |
|
||||
| `email` | `a@b.com` | 非合法邮箱 | both | 不支持 | - |
|
||||
| `phone` | `+86-...` 字符串 | 空字符串 OK | both | 不支持 | - |
|
||||
| `auto-number` | 自增整数（后端分配） | 不可手动写 | agent only | 不支持 | - |
|
||||
| `datetime` | ISO 8601 `2026-07-03T12:00:00Z` | 非日期格式 | both | 支持（日期函数） | 创建时间 `date` → `datetime` |
|
||||
| `modified-by` | user_id（自动管理） | 不可手动写 | agent only | 不支持 | - |
|
||||
| `location` | `{lat: float, lng: float}` | 非合法坐标 | both | 不支持 | - |
|
||||
| `barcode` | 字符串 | 空字符串 OK | both | 不支持 | - |
|
||||
| `rating` | 1-5 整数 | 超范围 | both | 支持（AVG） | - |
|
||||
| `progress` | 0-100 整数 | 超范围 | both | 支持（AVG） | - |
|
||||
| `currency` | `{amount: number, code: str}` | 负数 OK | both | 支持（SUM） | - |
|
||||
| `rich-text` | HTML 子集（无 `<script>`） | 含 `<script>` 标签 | both | 不支持 | - |
|
||||
| `date-range` | `{start: ISO, end: ISO}` | `end < start` | both | 不支持 | - |
|
||||
| `json` | 任意合法 JSON | 非法 JSON | both | 不支持 | - |
|
||||
| 双向关联 | `target_record_id` | 非存在 record | both | 支持（ROLLUP） | 新增，无 V2 数据 |
|
||||
**Schema V3 迁移成本估算**：17 个新类型中 2 个需 V2→V3 数据迁移（`user`/`datetime`），1 个需双向关联 schema（无 V2 数据）。预估后端工作量：models.py 扩展 + migration 脚本 + RecalcWorker cache 失效路径 + service 兼容层 ≈ 3-5 个工作日。前端工作量：FieldConfigForm.vue 8 类型 → 24 类型 + SelectCellEditor 扩展 ≈ 4-6 个工作日。回滚策略见 Outstanding Questions。
|
||||
|
||||
| 类型 | 有效输入 | 无效输入（422） | 所有权 | 公式参与 | V2→V3 迁移 | PII / 安全 |
|
||||
|---|---|---|---|---|---|---|
|
||||
| `user` | user_id 字符串 | 非存在 user_id | both | 不支持 | 创建人 `text` → `user` | **PII**：user_id 不直接暴露用户邮箱/手机，但需脱敏日志 |
|
||||
| `checkbox` | `true`/`false` | 非布尔值 | both | 支持（IF 条件） | - | - |
|
||||
| `url` | `https://example.com` | 非合法 URL | both | 不支持 | - | - |
|
||||
| `email` | `a@b.com` | 非合法邮箱 | both | 不支持 | - | **PII**：列表/导出需脱敏选项；agent 写入需脱敏审计 |
|
||||
| `phone` | `+86-...` 字符串 | 空字符串 OK | both | 不支持 | - | **PII**：同 `email` |
|
||||
| `auto-number` | 自增整数（后端分配） | 不可手动写（agent 侧写保护：BitableTool `create_record`/`upsert_records` 拒绝传 auto-number 字段） | agent only | 不支持 | - | - |
|
||||
| `datetime` | ISO 8601 `2026-07-03T12:00:00Z` | 非日期格式 | both | 支持（日期函数） | 创建时间 `date` → `datetime` | - |
|
||||
| `modified-by` | user_id（自动管理） | 不可手动写（agent 侧同 `auto-number`） | agent only | 不支持 | - | **PII**：同 `user` |
|
||||
| `location` | `{lat: float, lng: float}` | 非合法坐标 | both | 不支持 | - | - |
|
||||
| `barcode` | 字符串 | 空字符串 OK | both | 不支持 | - | - |
|
||||
| `rating` | 1-5 整数 | 超范围 | both | 支持（AVG） | - | - |
|
||||
| `progress` | 0-100 整数 | 超范围 | both | 支持（AVG） | - | - |
|
||||
| `currency` | `{amount: number, code: str}` | 负数 OK | both | 支持（SUM） | - | - |
|
||||
| `rich-text` | HTML 子集（白名单标签/属性，**服务端 sanitize**——禁 `<script>`/`<iframe>`/`on*` 事件属性，建议复用 `bleach` 或等价库；前端渲染前再过一遍 DOMPurify） | 含 `<script>`/`<iframe>`/`on*` 事件属性 | both | 不支持 | - | **XSS**：双清洗（服务端 + 前端），CSP 头限制 |
|
||||
| `date-range` | `{start: ISO, end: ISO}` | `end < start` | both | 不支持 | - | - |
|
||||
| `json` | 任意合法 JSON | 非法 JSON | both | 不支持 | - | - |
|
||||
| 双向关联 | `target_record_id` | 非存在 record | both | 支持（ROLLUP） | 新增，无 V2 数据 | - |
|
||||
|
||||
**迁移测试**：V2 → V3 迁移需覆盖 (a) 创建人 `text` → `user`（现有值保留为字符串，运行时解析为 user_id）；(b) 创建时间 `date` → `datetime`（现有值追加 `T00:00:00Z`）；(c) 未迁移字段行为不变（旧字段 `type='text'` 不因新类型引入而变）。
|
||||
|
||||
|
|
@ -338,7 +363,7 @@ R8 扩展的 16 字段类型 + 1 双向关联的逐类型验收标准。每行
|
|||
## Dependencies / Assumptions
|
||||
|
||||
- **依赖**：后端 v1 齐全（28 端点 + 公式引擎 + 三类采集），P0 主要在前端
|
||||
- **依赖**：vxe-table 4 已用于 `BitableGrid`，继续作为 grid 实现基础
|
||||
- **依赖**：vxe-table 4 已用于 `BitableGrid`，继续作为 grid 实现基础。**注**：当前为幽灵依赖——`BitableGrid.vue` 直接 `import 'vxe-table'`，但 `src/agentkit/server/frontend/package.json` 未声明，仅靠主仓 `node_modules` hoisting 解析。R1/R3 实施前需在 frontend `package.json` 显式声明 `vxe-table` 与 `vxe-pc-ui` 版本（消除 hoisting 风险）
|
||||
- **依赖**：Ant Design Vue 4 + Vue 3 + Pinia + TypeScript（强类型，禁 any）
|
||||
- **假设**：现有 PostgreSQL 性能足以支撑 v1/v2 规模；大规模（百万行）延后 v3
|
||||
- **假设**：用户接受分阶段交付，P0 先行可独立验证
|
||||
|
|
@ -360,7 +385,58 @@ R8 扩展的 16 字段类型 + 1 双向关联的逐类型验收标准。每行
|
|||
- 看板视图（R6）组件选型：自建 vs 现成库
|
||||
- 公式库扩展（R9）是否引入第三方 formula-parser
|
||||
- `FieldType` 扩展的 schema V3 迁移策略
|
||||
- 视图删除端点（后端 + 前端均缺 `deleteView`）是否在 P0 补齐
|
||||
|
||||
### From 2026-07-03 review
|
||||
|
||||
ce-doc-review（7 reviewers）经 best-judgment 路径处理的 12 个 manual findings，需 ce-plan 阶段决策：
|
||||
|
||||
- **user 字段用户模型** — R8 验收矩阵 (P1, feasibility, confidence 100)
|
||||
|
||||
`user`/`modified-by` 字段类型引用 `user_id`，但 agentkit 当前无统一的 user 模型抽象（bitable 的 `FieldOwner.user` 仅标识所有权，不解析为用户实体）。需明确：(1) user_id 是 agentkit 内部 ID 还是外部系统 ID；(2) 是否复用 server/auth 的用户表；(3) 跨表查询用户名时如何解析。
|
||||
|
||||
- **C 先行优先级策略的实证依据** — Key Decisions KD1 (P1, adversarial, confidence 75)
|
||||
|
||||
KD1 主张"C 先行（UX 打磨）→ A 跟进"，但未给出实证依据（无用户访谈、无 A/B 数据、无竞品上市时序分析）。产品价值判断需 ce-plan 阶段补充：(1) 飞书/Twenty 的迭代史是否支持 UX 先行；(2) agentkit 当前用户是否反馈过 grid 体验问题；(3) B 线（agent 差异化）是否才是真正护城河。
|
||||
|
||||
- **并发编辑 UX 策略** — Three-Way Comparison (P1, design-lens, confidence 75)
|
||||
|
||||
飞书支持实时协作，agentkit 有 agent + 用户双写入场景（upsert 保留用户列）。需决策：(1) 同一记录被 agent 与用户同时编辑时的冲突解决（last-write-wins vs 字段级合并 vs 提示用户）；(2) 是否需要 optimistic locking（version 字段）；(3) UI 上是否提示"agent 已更新此字段"。
|
||||
|
||||
- **加载/错误状态统一模式** — Acceptance Criteria (P2, design-lens, confidence 75)
|
||||
|
||||
文档未规定异步加载（公式重算、采集、视图切换）与错误状态的统一交互模式。需 ce-plan 决策：(1) 加载态用骨架屏还是 spinner；(2) 错误态用 toast 还是行内提示；(3) RecalcWorker 失败时的回退展示。
|
||||
|
||||
- **条件格式规则构建器 UX 形态** — Acceptance Criteria R4 (P2, design-lens, confidence 75)
|
||||
|
||||
R4 验收标准列出 7 个运算符，但未规定规则编辑器形态。需决策：(1) 向导式（step-by-step）vs 列表式（rule list）vs DSL（类 Excel 公式）；(2) 单规则多条件 vs 多规则单条件；(3) 规则预览如何展示（实时着色样本 vs 描述文本）。
|
||||
|
||||
- **分组交互细节** — Acceptance Criteria R4 (P2, design-lens, confidence 75)
|
||||
|
||||
R4 验收"最多 3 字段分组"但未规定交互。需决策：(1) 分组层级折叠/展开（默认折叠还是展开）；(2) 多字段分组的排序规则（首字段优先 vs 用户可调）；(3) 分组头部是否显示聚合行（计数/求和/平均值）；(4) 拖拽分组字段调整层级。
|
||||
|
||||
- **响应式断点定义** — Scope Boundaries (P2, design-lens, confidence 75)
|
||||
|
||||
文档标注"响应式 web"但未给断点。需 ce-plan 决策：(1) 移动/平板/桌面三档断点（建议 768/1024/1440）；(2) grid 视图在小屏是否降级为卡片列表；(3) 抽屉在小屏是否全屏覆盖。
|
||||
|
||||
- **R2 记录详情抽屉宽度** — Deferred to Planning (P2, coherence, confidence 75)
|
||||
|
||||
既有"单列纵向 vs 双列紧凑"未决。补充考虑：(1) 字段数超过 20 时单列纵向滚动成本；(2) 双列紧凑在窄屏的退化形态；(3) 与 R5 design token 间距系统对齐（建议宽度 480/640/800 三档）。
|
||||
|
||||
- **vxe-table 容量上限评估** — Dependencies (P2, feasibility, confidence 100)
|
||||
|
||||
依赖 vxe-table 4 但未评估单表行数上限。需 ce-plan 阶段实测：(1) vxe-table 4 在 1 万 / 10 万 / 100 万行下的渲染性能（首屏 / 滚动 / 编辑延迟）；(2) 是否需要虚拟滚动（vxe-table 内置 vs 自定义）；(3) 与"PG 部门级（<10 万行）"假设是否匹配。
|
||||
|
||||
- **R13 仪表盘图表库 buy-vs-build** — Priority Recommendations (P2, scope-guardian, confidence 75)
|
||||
|
||||
R13 列"图表组件库 + 关联多表"但未选型。需决策：(1) 自建 SVG/Canvas 图表 vs 引入库（ECharts/Chart.js/AntV G2）；(2) 引入库的 license 兼容性（agentkit 非开源，需商业授权）；(3) 12+ 图表类型的实现优先级（先做柱/折/饼，还是全量）。
|
||||
|
||||
- **禁用态视图类型路线图** — Acceptance Criteria R3 (P3, product-lens, confidence 50)
|
||||
|
||||
R3 规定未实现视图以禁用态展示 + "规划中"标注，但未规定解锁路径。需决策：(1) 禁用态点击是否弹出路线图（具体版本/时间）；(2) 路线图信息从哪里读取（hardcode vs config vs 远端）；(3) 用户是否能"投票"解锁（需求收集机制）。
|
||||
|
||||
- **schema V3 双向关联回滚策略** — R8 Field Type Acceptance Matrix (P3, feasibility, confidence 50)
|
||||
|
||||
R8 矩阵列"双向关联：新增，无 V2 数据"，但 V3 迁移失败时的回滚未定义。需决策：(1) 双向关联是 schema-only 变更还是数据变更；(2) 回滚是 drop column 还是保留为 text 字段；(3) 已建立的双向关联数据在回滚后如何展示（只读 vs 隐藏）。
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,521 @@
|
|||
---
|
||||
title: "feat: Bitable P0 UX Polish + Agent Parity"
|
||||
type: feat
|
||||
date: 2026-07-03
|
||||
origin: docs/brainstorms/2026-07-03-bitable-comparative-evaluation-requirements.md
|
||||
---
|
||||
|
||||
# Bitable P0 UX Polish + Agent Parity
|
||||
|
||||
## Summary
|
||||
|
||||
引入统一设计 token 系统、补齐 grid 视图 UX 缺口（内联字段配置、记录详情抽屉、视图类型切换、分组与条件格式）、闭合 agent 对等缺口（BitableTool 4 新动作 + DELETE /views 端点）。这是 bitable 从"功能残缺"到"grid 体验达飞书/Twenty 水准 + agent 对等"的 P0 交付，分 3 阶段：R5 token 基座 → R1-R4 前端 UX → R15a 后端+agent 对等。
|
||||
|
||||
## Problem Frame
|
||||
|
||||
bitable 后端 v1 齐备（28 端点 + 公式引擎 + 三类采集），但前端产品形态残缺——grid 体验未达竞品水准（列头编辑跳抽屉、无记录详情、无分组/条件格式、视觉无统一设计语言），且 BitableTool 仅 6 动作 vs 28 REST 端点存在系统性 agent 孤儿风险。P0 聚焦"已存在功能的 UX 打磨 + agent 对等最高优先级子项"，P1/P2 功能广度延后。
|
||||
|
||||
origin 文档（`docs/brainstorms/2026-07-03-bitable-comparative-evaluation-requirements.md`）已完成三向对比评估（agentkit vs Twenty vs 飞书）、差距分析、优先级建议，本 plan 承接其 P0 范围（R1/R2/R3/R4/R5/R15a）。
|
||||
|
||||
---
|
||||
|
||||
## Scope
|
||||
|
||||
### In Scope (P0)
|
||||
|
||||
- R5: 统一设计 token 系统（CSS 变量层：颜色/间距/圆角/字号）+ 字段类型图标 + 彩色 chip 升级
|
||||
- R1: 列内联字段配置（列头菜单直接编辑，不跳右侧抽屉）
|
||||
- R2: 记录详情侧边抽屉（行点击展开，全字段类型可视化展示与编辑）
|
||||
- R3: 视图类型切换与创建（ViewSwitcher 暴露 5 种类型，禁用态标注"规划中"）
|
||||
- R4: grid 视图内分组与条件格式（多字段分组 + 规则自动着色）
|
||||
- R15a: BitableTool 动作补全（6→10 动作）+ DELETE /views 后端端点
|
||||
|
||||
### Out of Scope (Deferred to P1/P2)
|
||||
|
||||
- R6/R7: 看板/画廊视图实现（P1）
|
||||
- R8: 字段类型扩展 17 项 + schema V3 迁移（P1）
|
||||
- R9/R10: 公式库扩展 + 跨表关联增强（P1）
|
||||
- R11: 甘特/表单视图（P2）
|
||||
- R12/R13/R14: 自动化/仪表盘/细粒度权限（P2）
|
||||
- R15b/R15c: NL→表 agent 技能 / 定时采集 UI（B 线，独立推进）
|
||||
- 并发编辑 UX、实时协作（P1+）
|
||||
- 大规模优化（列式存储/分区，v3）
|
||||
|
||||
### Pre-conditions / Assumptions
|
||||
|
||||
- 后端 v1 齐备且稳定（28 端点 + 公式引擎 + 三类采集已就位）
|
||||
- `ViewType` 枚举已有 5 种类型（grid/kanban/gantt/gallery/form）—— 后端无需改枚举
|
||||
- `CreateViewRequest` 已接受 `view_type` 字段 —— R3 纯前端
|
||||
- `UpdateViewRequest.config: dict` 可直接存 `group_by`/`conditional_formatting` —— R4 后端无需改模型
|
||||
- vxe-table 4 作为 grid 实现基础（需先消除幽灵依赖）
|
||||
- PostgreSQL 性能足以支撑 v1/v2 规模（<10 万行）；大规模延后 v3
|
||||
- P0 视觉风格对齐基于现有 Ant Design Vue + vxe-table 主题定制，不引入新 UI 库
|
||||
|
||||
---
|
||||
|
||||
## Key Technical Decisions
|
||||
|
||||
**KTD1. 设计 token 用 CSS 自定义属性层，不引入 Tailwind/Sass。** 在 `src/agentkit/server/frontend/src/styles/bitable-tokens.css` 定义 `:root` 下的 CSS 变量（`--bitable-color-*`/`--bitable-spacing-*`/`--bitable-radius-*`/`--bitable-font-*`），通过 Ant Design Vue 的 ConfigProvider token 覆盖与 vxe-table 的 CSS 变量对接。理由：零依赖、运行时可覆盖、与现有 Ant Design Vue 4 token 系统兼容。颜色调色板 8 色预设，全部满足 WCAG AA 对比度（≥4.5:1）。
|
||||
|
||||
**KTD2. vxe-table 幽灵依赖在 U1 显式声明。** `src/agentkit/server/frontend/package.json` 添加 `vxe-table` 与 `vxe-pc-ui` 版本声明（与主仓 node_modules 实际版本对齐），消除 hoisting 风险。这是 R1/R3/R4 实施的前置条件。
|
||||
|
||||
**KTD3. R1 内联字段配置用 vxe-table header slot + 自定义 InlineFieldConfigurator 组件（混合方案）。** 不用 vxe-table 内置编辑（功能受限），不自建完整列头组件（重复造轮子）。在 vxe-table 的 header slot 内渲染列名 + 下拉触发图标，下拉面板内嵌 `InlineFieldConfigurator.vue`（复用 `FieldConfigForm.vue` 的类型切换/选项管理逻辑，但不抽屉化）。`FieldManagePanel.vue` 保留作为批量管理入口。
|
||||
|
||||
**KTD4. R2 记录详情抽屉单列纵向，宽度 480px（与 FieldManagePanel 一致），>10 字段时扩展至 640px。** 不用双列紧凑（窄屏退化复杂、字段类型多时视觉混乱）。sticky header 显示记录标题，body 按字段顺序纵向排列，每字段一行（label + value）。attachment/image 显示缩略图，formula 显示只读计算结果，lookup 显示关联值。宽度断点通过 design token 控制（`--bitable-drawer-width`/`--bitable-drawer-width-wide`）。
|
||||
|
||||
**KTD5. R3 视图类型选择用 Ant Design Vue Dropdown + disabled items。** `ViewSwitcher.vue` 的"新建视图"按钮改为 Dropdown，5 种类型列出，未实现的（kanban/gallery/gantt/form）设 `disabled` + tooltip "规划中"。点击 grid 调用 `handleCreateView` 传 `view_type: 'grid'`（不再硬编码）。后端 `CreateViewRequest` 已支持 `view_type`，无需后端改动。
|
||||
|
||||
**KTD6. R4 分组与条件格式存入 View.config，后端用 Pydantic 校验 config 子结构。** `group_by: [{field_id, direction}]`（最多 3 字段）+ `conditional_formatting: [{field_id, operator, value, color_key}]`（7 运算符）。前端 `ViewConfigPanel.vue` 新增分组与条件格式编辑器，提交时 PUT 进 `config` dict。后端 `UpdateViewRequest.config` 已是 `dict[str, Any]`，但**新增 Pydantic 校验模型**（`GroupByItem`/`ConditionalFormatRule`）在 service 层 validate config 子结构——operator 枚举校验、color_key 限定 8 色白名单、group_by 长度 ≤3。理由：agent 通过 BitableTool 的 `update_view` 动作可直接写 config，前端校验对 agent 路径无效，必须服务端 enforce（闭合 ce-doc-review 安全 finding）。颜色存语义 key（`'red'|'orange'|'yellow'|'green'|'blue'|'purple'|'gray'|'neutral'`），前端 `groupingRulesUtils.ts` 提供 `colorKeyToCssVar()` 映射到 `--bitable-cf-*`，避免前端 CSS 实现细节持久化到数据库。
|
||||
|
||||
**KTD7. R4 条件格式规则构建器用列表式（rule list），非向导式、非 DSL。** 每条规则一行：字段选择 + 运算符选择 + 值输入 + 颜色选择（8 色 token 预设）+ 启用/禁用开关。规则按顺序优先（首条匹配 wins）。预览实时着色当前 grid 数据样本。
|
||||
|
||||
**KTD8. R4 分组交互：默认展开、首字段优先排序、分组头显示聚合行。** 分组头显示分组字段值 + 计数（+ 求和/平均值如果字段为 number）。多字段分组时层级嵌套，可折叠/展开。拖拽分组字段调整层级顺序（可选，P0 不强制）。
|
||||
|
||||
**KTD9. R15a 后端新增 DELETE /views/{view_id} 端点，复用现有 ownership 检查模式。** 路由 `@router.delete("/views/{view_id}", status_code=204)`，调用 `service.delete_view(view_id)`，前置 `_check_table_ownership`（通过 view → table 关联查 owner）。404-before-403 与现有 27 端点一致（见 `docs/solutions/architecture-patterns/bitable-companion-service-security-reliability-patterns.md` 模式 4）。**X-Internal-Token 路径 ownership 语义**：内部令牌绑定系统 agent 身份（`user_id="__bitable_internal__"`），所有写操作记审计日志。agent 通过 BitableTool 调用 `_delete_view` 时，X-Internal-Token 透传但 ownership 检查仍执行——内部令牌仅 bypass ownership（与现有 28 端点一致），不等于全权。Test scenario 验证：X-Internal-Token 调用 `_delete_view` 操作非自己资源时返回 404。
|
||||
|
||||
**KTD10. R15a BitableTool 4 新动作与现有 6 动作同模式。** `bitable_tool.py` 新增 `_create_view`/`_update_view`/`_update_field`/`_delete_view` 4 个 async def，复用现有 `_call_api` 内部方法（JWT 或 X-Internal-Token 认证）。**动作注册需同步更新两处**：(1) `execute()` 内 `handlers` dict 添加 4 个映射；(2) `input_schema.properties.action.enum` 添加 4 个字符串（`create_view`/`update_view`/`update_field`/`delete_view`）。若只改 handlers 不改 enum，agent 的 LLM 看不到新动作可选值，4 个新动作实际不可调用。`update_field` 覆盖 R1 的 PATCH /fields/{id}，`create_view`/`update_view` 覆盖 R3/R4 的视图操作，`delete_view` 覆盖新增的 DELETE 端点。
|
||||
|
||||
**KTD11. 交付分 3 阶段，每阶段可独立验证。** Phase 1 (U1) token 基座 → Phase 2 (U2-U5) 前端 UX → Phase 3 (U6) 后端+agent。Phase 2 的 4 个 U-ID 可并行（共享 U1 token 但互不依赖），Phase 3 依赖 Phase 2 的 U4 + U5（create_view/update_view 的 view_type + group_by/conditional_formatting config 结构需与前端一致）。**Phase 2 开始时即冻结 config schema 契约文档**，U6 可与 U4/U5 并行实现，仅集成测试在 Phase 2 完成后。
|
||||
|
||||
---
|
||||
|
||||
## Implementation Units
|
||||
|
||||
### Phase 1 — Foundation
|
||||
|
||||
#### U1: R5 Design Token System + vxe-table Dependency Declaration
|
||||
|
||||
**Goal:** 建立统一设计 token 系统（CSS 变量层），重写 bitable 组件颜色/间距/圆角/字号，补齐字段类型图标与彩色 chip 升级，显式声明 vxe-table 依赖。这是 Phase 2 所有 UI 工作的前置基座。
|
||||
|
||||
**Files:**
|
||||
- `src/agentkit/server/frontend/package.json` — 添加 `vxe-table` + `vxe-pc-ui` 依赖声明
|
||||
- `src/agentkit/server/frontend/src/styles/bitable-tokens.css` (new) — CSS 自定义属性定义
|
||||
- `src/agentkit/server/frontend/src/main.ts` — import bitable-tokens.css
|
||||
- `src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue` — 替换硬编码颜色为 token 引用
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ColumnHeaderMenu.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/components/bitable/SelectDisplay.vue` — chip 升级（8 色 token 调色板 + 对比度修复）
|
||||
- `src/agentkit/server/frontend/src/components/bitable/SelectCellEditor.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/components/bitable/AttachmentCell.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ImageCell.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/components/bitable/FileCard.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/views/BitableFileListView.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/views/BitableFileDetailView.vue` — token 化
|
||||
- `src/agentkit/server/frontend/src/components/bitable/FieldTypeIcon.vue` (new) — 9 种字段类型图标（Ant Design Outlined）
|
||||
- `src/agentkit/server/frontend/src/composables/useResponsiveBreakpoint.ts` (new) — 768/1024/1440 断点 composable
|
||||
- `src/agentkit/server/frontend/src/components/bitable/LoadingState.vue` (new) — 统一加载态（骨架屏）
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ErrorState.vue` (new) — 统一错误态（行内提示）
|
||||
|
||||
**Approach:**
|
||||
1. 在 `bitable-tokens.css` 定义 4 类 token：
|
||||
- 颜色：`--bitable-color-primary`/`--bitable-color-bg`/`--bitable-color-text`/`--bitable-color-border`/`--bitable-cf-{red,orange,yellow,green,blue,purple,gray,neutral}`（条件格式 8 色预设，全部 WCAG AA ≥4.5:1）
|
||||
- 间距：`--bitable-spacing-{xs,sm,md,lg,xl}`（4/8/12/16/24px）
|
||||
- 圆角：`--bitable-radius-{sm,md,lg}`（4/6/8px）
|
||||
- 字号：`--bitable-font-{xs,sm,md,lg}`（12/13/14/16px）
|
||||
- 抽屉宽度：`--bitable-drawer-width: 480px`/`--bitable-drawer-width-wide: 640px`
|
||||
2. 逐组件 grep 硬编码 hex 颜色（`#[0-9a-fA-F]{3,6}`），替换为 token var()
|
||||
3. `FieldTypeIcon.vue` 映射 9 种类型到 Ant Design Outlined 图标：text→FileTextOutlined, number→NumberOutlined, date→CalendarOutlined, select→TagOutlined, multiselect→TagsOutlined, attachment→PaperClipOutlined, image→PictureOutlined, formula→FunctionOutlined, lookup→LinkOutlined
|
||||
4. `SelectDisplay.vue` chip 配色从 8 色 token 调色板取色，每色确保 ≥4.5:1 对比度
|
||||
5. `useResponsiveBreakpoint.ts` 暴露 `isMobile`/`isTablet`/`isDesktop` 响应式断点（768/1024/1440）
|
||||
6. `LoadingState.vue` + `ErrorState.vue` 作为 bitable 内部统一加载/错误态组件（**P0 提升理由**：U3 RecordDetailDrawer 异步加载需骨架屏避免白屏、U2/U4 提交需 loading 态防重复点击。U2-U5 Test scenarios 强制引用这两个组件证明确实被消费）
|
||||
7. `useResponsiveBreakpoint.ts` 在 U3（抽屉 `isMobile` 时全屏覆盖）+ U5（ViewConfigPanel `isMobile` 时改底部抽屉）显式消费
|
||||
8. **R3/R4 后端假设验证**（Phase 1 退出条件）：grep + pytest round-trip 验证 `CreateViewRequest` 接受 `view_type` 且 `UpdateViewRequest` 接受任意 config dict。若验证失败，Phase 2 需补后端工作项
|
||||
|
||||
**Test scenarios:**
|
||||
1. Given bitable-tokens.css, When grep `#[0-9a-fA-F]{3,6}` in bitable components, Then 零硬编码 hex（全部用 var()）
|
||||
2. Given FieldTypeIcon, When 渲染 9 种字段类型, Then 各有对应 Ant Design Outlined 图标
|
||||
3. Given SelectDisplay chip, When axe-core 扫描, Then 所有关键文本对比度 ≥4.5:1（WCAG AA）
|
||||
4. Given package.json, When `npm ls vxe-table vxe-pc-ui`, Then 两者均为显式声明依赖（非 hoisting）
|
||||
5. Given useResponsiveBreakpoint, When viewport < 768px, Then `isMobile === true`
|
||||
6. Given LoadingState, When 异步加载, Then 显示骨架屏（非 spinner）
|
||||
7. Given ErrorState, When 异步失败, Then 显示行内错误提示 + 重试按钮
|
||||
|
||||
**Verification:**
|
||||
- `npm run typecheck` 通过
|
||||
- `npm run build:frontend` 通过
|
||||
- axe-core 扫描 bitable 页面对比度全绿
|
||||
- grep 硬编码 hex 零匹配
|
||||
|
||||
---
|
||||
|
||||
### Phase 2 — Frontend UX (depends on U1)
|
||||
|
||||
#### U2: R1 Inline Field Configuration
|
||||
|
||||
**Goal:** 列头菜单直接编辑字段（重命名/改类型/选项管理），不跳右侧 FieldManagePanel 抽屉。FieldManagePanel 保留作为批量管理入口。
|
||||
|
||||
**Files:**
|
||||
- `src/agentkit/server/frontend/src/components/bitable/InlineFieldConfigurator.vue` (new) — 内联字段配置面板（复用 FieldConfigForm 逻辑）
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ColumnHeaderMenu.vue` — 菜单重构：编辑 → 内联展开（非跳抽屉）
|
||||
- `src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue` — header slot 集成 InlineFieldConfigurator
|
||||
- `src/agentkit/server/frontend/src/components/bitable/FieldManagePanel.vue` — 保留，添加"批量管理"定位提示
|
||||
- `src/agentkit/server/frontend/src/stores/bitable.ts` — 复用现有 `updateField` action
|
||||
- `src/agentkit/server/frontend/e2e/bitable-field-ops.spec.ts` — extend: 内联编辑场景
|
||||
- `src/agentkit/server/frontend/src/helpers/fieldRenderUtils.ts` (new) — 纯函数：字段类型校验、类型转换兼容性检查
|
||||
|
||||
**Approach:**
|
||||
1. `InlineFieldConfigurator.vue` 从 `FieldConfigForm.vue` 抽取核心逻辑（类型切换、选项管理、校验），以 inline panel 形式渲染（非抽屉）
|
||||
2. `ColumnHeaderMenu.vue` 的"编辑"项改为 toggle InlineFieldConfigurator 在列头下方展开
|
||||
3. 类型变更提交前调用 `fieldRenderUtils.checkTypeCompatibility(oldType, newType, existingValues)` —— 若现有值不可转换则显示警告 + 阻止提交
|
||||
4. 重命名/选项管理直接调用 store `updateField(fieldId, patch)` → PATCH /fields/{id}
|
||||
5. 键盘可达：Tab 到列头菜单 → Enter 展开 → Tab 字段间切换 → Esc 关闭
|
||||
|
||||
**Test scenarios:**
|
||||
1. Given select 字段有 3 选项, When 点击列头菜单"编辑", Then InlineFieldConfigurator 内联展开（不跳右侧抽屉）
|
||||
2. Given 字段名变更提交, When PATCH /fields/{id}, Then 返回 200 + grid 在 1 帧内重渲染新标签
|
||||
3. Given 字段类型 text → number, When 现有记录值不可转换, Then 显示警告 + 阻止提交
|
||||
4. Given select 选项管理, When 新增/删除/重命名选项, Then 内联完成 + 提交后 chip 更新
|
||||
5. Given 键盘导航, When Tab 到列头菜单 → Enter, Then 展开 InlineFieldConfigurator + 焦点在首字段
|
||||
6. Given FieldManagePanel, When 从列头菜单"批量管理"打开, Then 仍可用（保留入口）
|
||||
|
||||
**Verification:**
|
||||
- `npm run typecheck` 通过
|
||||
- e2e `bitable-field-ops.spec.ts` 内联编辑场景通过
|
||||
- axe-core 键盘导航可达性通过
|
||||
|
||||
---
|
||||
|
||||
#### U3: R2 Record Detail Drawer
|
||||
|
||||
**Goal:** grid 行点击展开右侧详情抽屉，显示所有字段类型的可视化展示与编辑。单列纵向，480px（>10 字段扩展 640px）。
|
||||
|
||||
**Files:**
|
||||
- `src/agentkit/server/frontend/src/components/bitable/RecordDetailDrawer.vue` (new) — 记录详情抽屉
|
||||
- `src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue` — 行点击事件 → 打开抽屉
|
||||
- `src/agentkit/server/frontend/src/stores/bitable.ts` — `currentRecord` state + `openRecordDetail`/`closeRecordDetail` actions
|
||||
- `src/agentkit/server/frontend/src/api/bitable.ts` — 复用现有 `queryRecords`（按 record_id 查询）
|
||||
- `src/agentkit/server/frontend/e2e/bitable-record-drawer.spec.ts` (new) — 抽屉 e2e
|
||||
- `src/agentkit/server/frontend/src/helpers/recordDrawerUtils.ts` (new) — 纯函数：字段值渲染格式化、attachment/image 缩略图 URL 生成
|
||||
|
||||
**Approach:**
|
||||
1. `RecordDetailDrawer.vue` 用 Ant Design Vue `a-drawer`，`width` 绑定 design token（`--bitable-drawer-width` / `--bitable-drawer-width-wide`）
|
||||
2. sticky header 显示记录标题字段值（首个 text 类型字段）
|
||||
3. body 按字段顺序纵向排列，每字段一行：
|
||||
- label（字段名 + FieldTypeIcon）
|
||||
- value（根据类型渲染：text/number/date 直接显示，select/multiselect 用 SelectDisplay chip，attachment 显示文件名列表，image 显示缩略图网格，formula 显示只读计算结果，lookup 显示关联表字段值）
|
||||
4. user-owned 字段可编辑（inline edit → upsert），agent-owned 字段只读
|
||||
5. 编辑提交调用 store `upsertRecord` → upsert 保留 agent 列（见 origin R2 验收标准）
|
||||
6. Esc 关闭抽屉
|
||||
|
||||
**Test scenarios:**
|
||||
1. Given grid 行, When 用户点击行, Then 右侧抽屉展开显示所有字段（含 attachment/formula/lookup）
|
||||
2. Given 抽屉打开且字段为 attachment/image, When 渲染, Then 显示缩略图/预览（非原始 URL）
|
||||
3. Given 抽屉打开且字段为 formula, When 渲染, Then 显示计算结果（只读，不可编辑）
|
||||
4. Given 抽屉中编辑 user-owned 字段并提交, When 后端 upsert, Then agent 列不被覆盖
|
||||
5. Given 字段数 ≤ 10, When 抽屉渲染, Then 宽度 480px
|
||||
6. Given 字段数 > 10, When 抽屉渲染, Then 宽度 640px
|
||||
7. Given 抽屉打开, When 按 Esc, Then 抽屉关闭
|
||||
|
||||
**Verification:**
|
||||
- `npm run typecheck` 通过
|
||||
- e2e `bitable-record-drawer.spec.ts` 通过
|
||||
- upsert 保留 agent 列（现有 test_service.py 覆盖）
|
||||
|
||||
---
|
||||
|
||||
#### U4: R3 View Type Switcher
|
||||
|
||||
**Goal:** ViewSwitcher 支持选 grid/kanban/gallery/gantt/form，新建视图选类型（不再硬编码 grid）。未实现的以禁用态展示 + 标注"规划中"。
|
||||
|
||||
**Files:**
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ViewSwitcher.vue` — "新建视图"改为 Dropdown + 5 类型选择
|
||||
- `src/agentkit/server/frontend/src/views/BitableFileDetailView.vue` — `handleCreateView` 接受 `view_type` 参数（不再硬编码 'grid'）
|
||||
- `src/agentkit/server/frontend/src/stores/bitable.ts` — `createView` action 传 `view_type`
|
||||
- `src/agentkit/server/frontend/src/api/bitable.ts` — `createView` API 调用传 `view_type`
|
||||
- `src/agentkit/server/frontend/e2e/bitable-view.spec.ts` — extend: 类型选择场景
|
||||
- `src/agentkit/server/frontend/src/helpers/viewSwitcherUtils.ts` (new) — 纯函数：视图类型元数据（label/icon/disabled/tooltip）
|
||||
|
||||
**Approach:**
|
||||
1. `viewSwitcherUtils.ts` 定义 5 种类型元数据：
|
||||
- grid: { label: '表格', icon: TableOutlined, disabled: false }
|
||||
- kanban: { label: '看板', icon: AppstoreOutlined, disabled: true, tooltip: '规划中' }
|
||||
- gallery: { label: '画廊', icon: PictureOutlined, disabled: true, tooltip: '规划中' }
|
||||
- gantt: { label: '甘特', icon: BarChartOutlined, disabled: true, tooltip: '规划中' }
|
||||
- form: { label: '表单', icon: FormOutlined, disabled: true, tooltip: '规划中' }
|
||||
2. `ViewSwitcher.vue` 的"新建视图"按钮改为 `a-dropdown`，列出 5 类型，disabled 项设 `disabled` + tooltip
|
||||
3. `handleCreateView` 在 `BitableFileDetailView.vue` 接受 `viewType: ViewType` 参数，调用 store `createView({ table_id, name, view_type })`
|
||||
4. store `createView` 调用 API `createView` 传 `view_type` 字段
|
||||
5. 后端 `CreateViewRequest` 已支持 `view_type`（line 181），无需后端改动
|
||||
|
||||
**Test scenarios:**
|
||||
1. Given ViewSwitcher, When 用户点击"新建视图", Then 显示 5 种类型选择（grid/kanban/gallery/gantt/form）
|
||||
2. Given kanban/gallery/gantt/form 未实现, When 渲染, Then 以禁用态展示 + 标注"规划中" tooltip
|
||||
3. Given 新建视图选 grid, When 创建, Then 调用 POST /views 传 `view_type=grid`（不再硬编码）
|
||||
4. Given 禁用态类型, When 点击, Then 不触发创建 + 显示"规划中" tooltip
|
||||
5. Given 后端 CreateViewRequest, When 接收 `view_type` 字段, Then 正确存储（现有后端已支持）
|
||||
|
||||
**Verification:**
|
||||
- `npm run typecheck` 通过
|
||||
- e2e `bitable-view.spec.ts` 类型选择场景通过
|
||||
- POST /views 请求体含 `view_type` 字段
|
||||
|
||||
---
|
||||
|
||||
#### U5: R4 Grouping + Conditional Formatting
|
||||
|
||||
**Goal:** grid 视图内多字段分组（最多 3 字段）+ 条件格式规则自动着色（7 运算符）。分组与条件格式存入 View.config。
|
||||
|
||||
**Files:**
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ViewConfigPanel.vue` — 新增分组 + 条件格式编辑器 tab
|
||||
- `src/agentkit/server/frontend/src/components/bitable/GroupingEditor.vue` (new) — 分组编辑器（字段选择 + 排序 + 聚合）
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ConditionalFormatEditor.vue` (new) — 条件格式规则列表编辑器
|
||||
- `src/agentkit/server/frontend/src/components/bitable/BitableGrid.vue` — 分组渲染 + 条件格式着色逻辑
|
||||
- `src/agentkit/server/frontend/src/stores/bitable.ts` — `updateViewConfig` action（PATCH /views config）
|
||||
- `src/agentkit/server/frontend/src/api/bitable.ts` — 复用现有 `updateView`
|
||||
- `src/agentkit/server/frontend/e2e/bitable-grouping.spec.ts` (new) — 分组 + 条件格式 e2e
|
||||
- `src/agentkit/server/frontend/src/helpers/groupingRulesUtils.ts` (new) — 纯函数：分组层级计算、聚合值计算、条件格式规则匹配
|
||||
- `tests/unit/bitable/test_grouping.py` (new) — 后端 config 存储测试
|
||||
- `tests/unit/bitable/test_conditional_formatting.py` (new) — 后端 config 存储测试
|
||||
|
||||
**Approach:**
|
||||
1. View.config schema（前端约定 + 后端 Pydantic 校验，见 KTD6）：
|
||||
```typescript
|
||||
{
|
||||
group_by: [{ field_id: string, direction: 'asc' | 'desc' }], // 最多 3 项
|
||||
conditional_formatting: [{
|
||||
field_id: string,
|
||||
operator: 'equals' | 'not-equals' | 'contains' | 'is-empty' | 'greater-than' | 'less-than' | 'between',
|
||||
value: string,
|
||||
color_key: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'gray' | 'neutral'
|
||||
}]
|
||||
}
|
||||
```
|
||||
2. `GroupingEditor.vue`：字段多选（最多 3）+ 方向切换 + 拖拽排序层级
|
||||
3. `ConditionalFormatEditor.vue`：列表式规则编辑器，每行 = 字段 + 运算符 + 值 + 颜色（8 色 key 预设）+ 启用开关
|
||||
4. `BitableGrid.vue` 分组渲染：按 group_by 字段层级嵌套，分组头显示字段值 + 计数 + number 字段聚合（SUM/AVG），默认展开，可折叠
|
||||
5. `BitableGrid.vue` 条件格式着色：遍历 conditional_formatting 规则，首条匹配 wins，单元格背景色用 `var(colorKeyToCssVar(color_key))`。**组合态约定**：分组 + 条件格式同时启用时，条件格式仅作用于数据单元格，分组头不着色（避免视觉冲突）
|
||||
6. 提交时调用 store `updateViewConfig(viewId, { group_by, conditional_formatting })` → PATCH /views config
|
||||
7. 后端 service 层用 Pydantic 校验 config 子结构（`GroupByItem`/`ConditionalFormatRule`），拒绝非法 operator/color_key/超长 group_by（422）
|
||||
|
||||
**Test scenarios:**
|
||||
1. Given grid 视图, When 用户开启分组, Then 支持最多 3 字段分组（对标飞书/Twenty）
|
||||
2. Given 条件格式规则 operator=equals, When 单元格值匹配, Then 自动着色
|
||||
3. Given 两条规则匹配同一单元格, When 冲突, Then 首条规则优先（按用户排序）
|
||||
4. Given 着色, When 颜色来源审计, Then 全部来自 design token 调色板（8 色预设，无硬编码 hex）
|
||||
5. Given 分组头, When 渲染, Then 显示分组字段值 + 计数 + number 字段聚合（SUM/AVG）
|
||||
6. Given 多字段分组, When 渲染, Then 层级嵌套 + 可折叠/展开
|
||||
7. Given PATCH /views config, When 后端存储, Then config dict 含 group_by + conditional_formatting
|
||||
8. Given 7 运算符, When 测试 each, Then equals/not-equals/contains/is-empty/greater-than/less-than/between 全部正确匹配
|
||||
|
||||
**Verification:**
|
||||
- `npm run typecheck` 通过
|
||||
- e2e `bitable-grouping.spec.ts` 通过
|
||||
- pytest `test_grouping.py` + `test_conditional_formatting.py` 通过
|
||||
- grep 着色 hex 零匹配（全部用 token）
|
||||
|
||||
---
|
||||
|
||||
### Phase 3 — Agent Parity (depends on U4)
|
||||
|
||||
#### U6: R15a BitableTool 4 New Actions + DELETE /views Endpoint
|
||||
|
||||
**Goal:** BitableTool 从 6 动作扩展到 10 动作（新增 create_view/update_view/update_field/delete_view），后端新增 DELETE /views/{view_id} 端点，消除 agent 孤儿风险。
|
||||
|
||||
**Files:**
|
||||
- `src/agentkit/server/routes/bitable.py` — 新增 `DELETE /views/{view_id}` 端点（line ~660 后）
|
||||
- `src/agentkit/bitable/service.py` — 新增 `delete_view(view_id)` 方法
|
||||
- `src/agentkit/bitable/repository.py` — 新增 `delete_view(view_id)` 方法
|
||||
- `src/agentkit/tools/bitable_tool.py` — 新增 4 个 async def: `_create_view`/`_update_view`/`_update_field`/`_delete_view`（line ~466 后）
|
||||
- `src/agentkit/server/frontend/src/api/bitable.ts` — 新增 `deleteView(viewId)` 方法
|
||||
- `src/agentkit/server/frontend/src/components/bitable/ViewSwitcher.vue` — 视图删除入口（调用 deleteView）
|
||||
- `tests/unit/bitable/test_bitable_tool.py` — extend: 4 新动作测试
|
||||
- `tests/unit/bitable/test_routes.py` — extend: DELETE /views 测试
|
||||
- `src/agentkit/server/frontend/e2e/bitable-agent-parity.spec.ts` (new) — agent 对等 e2e
|
||||
|
||||
**Approach:**
|
||||
1. 后端 `DELETE /views/{view_id}`:
|
||||
- 路由：`@router.delete("/views/{view_id}", status_code=204)`
|
||||
- 前置：通过 view_id 查 view → table_id → `_check_table_ownership`（404-before-403）
|
||||
- 调用 `service.delete_view(view_id)` → `repository.delete_view(view_id)`
|
||||
- 返回 204 No Content
|
||||
2. BitableTool 4 新动作（复用现有 `_call_api` 内部方法）：
|
||||
- `_create_view(table_id, name, view_type, config)` → POST /tables/{table_id}/views
|
||||
- `_update_view(view_id, name, config)` → PATCH /views/{view_id}
|
||||
- `_update_field(field_id, name, type, config)` → PATCH /fields/{field_id}
|
||||
- `_delete_view(view_id)` → DELETE /views/{view_id}
|
||||
3. 动作注册：在 BitableTool 的 `_ACTIONS` 字典（或等价注册机制）添加 4 项，总数 6→10
|
||||
4. 前端 `api/bitable.ts` 新增 `deleteView(viewId)` 调用 DELETE /views/{view_id}
|
||||
5. `ViewSwitcher.vue` 视图 tab 添加删除按钮（dropdown 菜单或右键），调用 `deleteView` + 二次确认
|
||||
|
||||
**Test scenarios:**
|
||||
1. Given BitableTool, When 调用 `create_view`/`update_view`/`update_field`/`delete_view`, Then 4 个新动作全部可用（6→10 动作）
|
||||
2. Given 视图列表, When 用户点击删除, Then 调用 DELETE /views/{id} + 二次确认
|
||||
3. Given DELETE /views/{view_id}, When 视图不存在, Then 返回 404
|
||||
4. Given DELETE /views/{view_id}, When 无所有权, Then 返回 404（非 403，existence disclosure 防护）
|
||||
5. Given R3/R4 配置变更, When agent 调用 `create_view`/`update_view` 传 `type`/`group_by`/`conditional_formatting`, Then 配置成功写入（与 REST PATCH /views 等价）
|
||||
6. Given 字段配置, When agent 调用 `update_field`, Then 与 PATCH /fields/{id} 等价
|
||||
7. Given BitableTool 动作清单, When 审计, Then 10 个动作覆盖 28 端点中的核心 CRUD（create_table/import_excel/import_database/collect_api/upsert_records/query_records/create_view/update_view/update_field/delete_view）
|
||||
8. Given 内部 token 认证, When agent 调用 BitableTool, Then X-Internal-Token 透传成功
|
||||
|
||||
**Verification:**
|
||||
- `ruff check src/ && ruff format src/` 通过
|
||||
- pytest `test_bitable_tool.py` + `test_routes.py` 通过
|
||||
- e2e `bitable-agent-parity.spec.ts` 通过
|
||||
- BitableTool 动作数 10（验证 `execute()` 内 handlers dict keys + `input_schema.properties.action.enum` 均含 10 项）
|
||||
|
||||
---
|
||||
|
||||
## Risks & Dependencies
|
||||
|
||||
### Risks
|
||||
|
||||
| Risk | Likelihood | Impact | Mitigation |
|
||||
|------|-----------|--------|------------|
|
||||
| vxe-table 4 主题定制深度不足，token 覆盖不到所有组件样式 | 中 | 中 | U1 先做 token 映射 PoC，验证 vxe-table CSS 变量可覆盖；不行则用 wrapper 组件 + scoped CSS |
|
||||
| 条件格式 7 运算符在 vxe-table 行渲染中性能差（大数据量） | 低 | 中 | P0 假设 <10k 行，首版不做虚拟滚动优化；若 >10k 行降级为禁用条件格式提示 |
|
||||
| R4 分组渲染与 vxe-table 内置分组冲突 | 中 | 高 | 不用 vxe-table 内置分组，自建分组 wrapper 层（数据分桶 + 折叠 UI），grid 只渲染当前分组数据 |
|
||||
| BitableTool 4 新动作的 X-Internal-Token 透传在 agent 编排场景失效 | 低 | 高 | U6 测试契约覆盖 agent 编排场景（redis 标记）；复用现有 6 动作的认证模式 |
|
||||
| design token 与 Ant Design Vue 4 ConfigProvider token 冲突 | 低 | 低 | bitable-tokens.css 用 `--bitable-*` 前缀，不覆盖 Ant Design 全局 token |
|
||||
|
||||
### Dependencies
|
||||
|
||||
- **U1 → U2/U3/U4/U5**: Phase 2 所有 UI 工作依赖 U1 token 系统 + vxe-table 依赖声明
|
||||
- **U4 → U6**: U6 的 `create_view`/`update_view` 动作需与 U4 的 view_type 一致
|
||||
- **U5 → U6**: U6 的 `update_view` 动作需与 U5 的 group_by/conditional_formatting config 结构一致（Phase 2 开始时冻结 config schema 契约，U6 可并行实现）
|
||||
- **外部依赖**: vxe-table 4 + vxe-pc-ui（版本与主仓 node_modules 对齐）、Ant Design Vue 4 Outlined 图标
|
||||
- **既有约束**: AGENTS.md 规则（no-emoji、Pydantic v2、no-any、pytest asyncio_mode=auto）、ruff check/format（py311，行宽 100）
|
||||
|
||||
---
|
||||
|
||||
## System-Wide Impact
|
||||
|
||||
### 后端改动
|
||||
|
||||
- **新增端点**: `DELETE /api/v1/bitable/views/{view_id}`（U6）—— 第 29 个端点
|
||||
- **service/repository**: 新增 `delete_view` 方法（U6）
|
||||
- **无 schema 迁移**: View.config 已是 `dict[str, Any]`，group_by/conditional_formatting 作为 config key 存储，无需 V2→V3 迁移
|
||||
- **无 FieldType 扩展**: P0 不引入新字段类型（R8 延后 P1）
|
||||
|
||||
### 前端改动
|
||||
|
||||
- **新组件**: `FieldTypeIcon`/`InlineFieldConfigurator`/`RecordDetailDrawer`/`GroupingEditor`/`ConditionalFormatEditor`/`LoadingState`/`ErrorState`（7 个）
|
||||
- **新 composable**: `useResponsiveBreakpoint`
|
||||
- **新 helpers**: `fieldRenderUtils`/`recordDrawerUtils`/`viewSwitcherUtils`/`groupingRulesUtils`（4 个纯函数模块）
|
||||
- **新样式**: `bitable-tokens.css`（design token 层）
|
||||
- **改动组件**: `BitableGrid`/`ColumnHeaderMenu`/`ViewSwitcher`/`ViewConfigPanel`/`SelectDisplay`/`FieldManagePanel` + 2 个 view（token 化 + 功能集成）
|
||||
- **package.json**: 显式声明 vxe-table + vxe-pc-ui
|
||||
|
||||
### Agent 对等影响
|
||||
|
||||
- BitableTool 动作数 6→10，覆盖视图 CRUD + 字段更新
|
||||
- agent 可通过 BitableTool 完成与人类等价的视图/字段操作（闭合 R15a 缺口）
|
||||
- 为 R15b（NL→表 agent 编排）铺路：agent 可编排 create_table + create_field + create_view
|
||||
|
||||
### 测试影响
|
||||
|
||||
- 新增后端测试: `test_grouping.py`/`test_conditional_formatting.py` + extend `test_bitable_tool.py`/`test_routes.py`
|
||||
- 新增前端 e2e: `bitable-record-drawer.spec.ts`/`bitable-grouping.spec.ts`/`bitable-agent-parity.spec.ts`
|
||||
- 新增前端 helpers: 4 个纯函数模块（vitest 测试）
|
||||
|
||||
---
|
||||
|
||||
## Test Strategy Summary
|
||||
|
||||
| U-ID | 后端单元测试 | 前端单元测试 | e2e 测试 | 集成标记 |
|
||||
|------|------------|------------|---------|---------|
|
||||
| U1 (R5) | - | `helpers/designTokenAudit.ts`（grep token 使用） | `bitable-view.spec.ts`（visual regression） | - |
|
||||
| U2 (R1) | `test_routes.py`（PATCH /fields/{id}） | `helpers/fieldRenderUtils.ts` | `bitable-field-ops.spec.ts`（extend） | - |
|
||||
| U3 (R2) | `test_service.py`（upsert 保留 user 列） | `helpers/recordDrawerUtils.ts` | `bitable-record-drawer.spec.ts`（new） | - |
|
||||
| U4 (R3) | `test_routes.py`（POST /views type 参数） | `helpers/viewSwitcherUtils.ts` | `bitable-view.spec.ts`（extend） | - |
|
||||
| U5 (R4) | `test_grouping.py` + `test_conditional_formatting.py`（new） | `helpers/groupingRulesUtils.ts` | `bitable-grouping.spec.ts`（new） | - |
|
||||
| U6 (R15a) | `test_bitable_tool.py`（4 new actions）+ `test_routes.py`（DELETE /views） | - | `bitable-agent-parity.spec.ts`（new） | redis（notify_callback） |
|
||||
|
||||
**测试约定**: 后端 pytest（asyncio_mode=auto，标记 integration/redis/postgres）；前端 vitest（纯函数抽 helpers/，不用 @vue/test-utils）；e2e Playwright。
|
||||
|
||||
**Agent 对等测试契约**: U6 交付时附 BitableTool 4 新动作的契约测试，验证 agent 能完成与人类等价的视图/字段操作。
|
||||
|
||||
**横切测试（适用所有 U-ID）**:
|
||||
- WCAG AA 可访问性：axe-core 扫描键盘导航 + 对比度 + ARIA role
|
||||
- 空状态：无字段/无记录/无视图的空状态文案
|
||||
- design token 审计：grep 硬编码 hex 零匹配
|
||||
|
||||
---
|
||||
|
||||
## Execution Posture
|
||||
|
||||
**Posture signal**: 标准 TDD（后端 pytest first，前端 helpers vitest first）。后端 `DELETE /views` 端点用 TDD（先写 test_routes.py 失败用例，再实现）。前端组件不强求 TDD（Vue 组件 TDD 投入产出比低），但纯函数 helpers 用 TDD。
|
||||
|
||||
**Sequencing**:
|
||||
1. Phase 1 (U1) —— token 基座，可独立验证
|
||||
2. Phase 2 (U2/U3/U4/U5) —— 4 个 U-ID 可并行（共享 U1 token 但互不依赖）
|
||||
3. Phase 3 (U6) —— 依赖 U4 的 view_type + U5 的 config 结构
|
||||
|
||||
**Branch**: `feat/bitable-enhancement`（当前分支）
|
||||
|
||||
---
|
||||
|
||||
## Open Questions (Deferred to Execution)
|
||||
|
||||
以下来自 origin 文档 Outstanding Questions + ce-doc-review manual findings，P0 范围内可在实现时决策，P1/P2 延后：
|
||||
|
||||
### P0 范围内（实现时决策）
|
||||
|
||||
- **vxe-table 容量上限**: P0 假设 <10k 行，若实测 >10k 行性能差则降级（禁用条件格式提示或虚拟滚动延后 P1）
|
||||
- **条件格式规则构建器细节**: 列表式（KTD7），预览实时着色当前 grid 数据样本
|
||||
- **分组交互细节**: 默认展开、首字段优先排序、分组头显示聚合行（KTD8）
|
||||
- **R2 抽屉宽度**: 480px（≤10 字段）/ 640px（>10 字段）（KTD4）
|
||||
- **禁用态视图路线图**: tooltip "规划中"（hardcode，不读 config，P0 不做投票机制）
|
||||
- **响应式断点**: 768/1024/1440（U1 useResponsiveBreakpoint）
|
||||
- **加载/错误状态**: 骨架屏（LoadingState）+ 行内提示（ErrorState），U1 统一组件
|
||||
|
||||
### 延后 P1/P2（不在本 plan 范围）
|
||||
|
||||
- **user 字段用户模型** (P1, R8): user_id 解析、跨表用户名查询
|
||||
- **C 先行优先级策略实证依据** (P1, product): 用户访谈/A-B 数据
|
||||
- **并发编辑 UX** (P1): agent + 用户双写入冲突解决、optimistic locking
|
||||
- **schema V3 双向关联回滚策略** (P3, R8): drop column vs 保留为 text
|
||||
- **R13 仪表盘图表库 buy-vs-build** (P2): ECharts/Chart.js/AntV G2 选型
|
||||
- **R6 看板组件选型** (P1): 自建 vs 现成库
|
||||
- **R9 公式库第三方 parser** (P1): 是否引入
|
||||
|
||||
### From 2026-07-03 ce-plan Phase 5.3 headless ce-doc-review
|
||||
|
||||
ce-doc-review（5 reviewers）headless pass 的 manual findings，需实现时决策：
|
||||
|
||||
- **条件格式 WCAG 1.4.1 色盲可感知性** — U5 KTD7 (P1, design-lens, confidence 80)
|
||||
|
||||
条件格式仅靠颜色区分，8 色预设中红/绿/橙/黄对色盲用户不可区分。WCAG 1.4.1 要求颜色不能作为唯一区分手段。需实现时决策：(1) 规则增加可选 `decoration` 字段（下划线/加粗/斜体/图标）；(2) 单元格着色同时附加左侧色条 + 图标。最小方案：规则编辑器默认勾选"同时加粗文本"。
|
||||
|
||||
- **RecordDetailDrawer 加载/错误/404 状态** — U3 (P1, design-lens, confidence 78)
|
||||
|
||||
抽屉异步按 record_id 查询，需规定网络失败/记录被并发删除/权限丢失时的状态。U1 建了 LoadingState/ErrorState，U3 需强制引用：(1) 打开中显示骨架屏；(2) 查询 404 显示"记录不存在或已被删除" + 关闭按钮；(3) 查询 5xx 显示 ErrorState + 重试按钮。
|
||||
|
||||
- **新编辑器组件空状态** — U3/U5 (P2, design-lens, confidence 72)
|
||||
|
||||
RecordDetailDrawer 打开但记录 0 字段、GroupingEditor 可选字段 <1、ConditionalFormatEditor 0 条规则时的引导文案需定义。实现时补各组件空状态文案。
|
||||
|
||||
- **保存中按钮状态** — U2/U4 (P2, design-lens, confidence 70)
|
||||
|
||||
PATCH /fields、POST /views 提交期间按钮需 disabled + loading 图标，防重复点击。实现时在 U2 InlineFieldConfigurator + U4 ViewSwitcher 补 loading 态。
|
||||
|
||||
- **delete_view 硬删/软删 + 最后视图保护** — U6 (P2, security-lens, confidence 68)
|
||||
|
||||
硬删不可逆，agent 误调 `_delete_view` 即数据丢失。需决策：(1) soft delete（deleted_at 标记）+ 可恢复；(2) hard delete 但禁止删除表的最后一个视图（返回 409 Conflict）。实现时在 U6 Test scenarios 补对应用例。
|
||||
|
||||
- **分组 wrapper 与 vxe-table 交互限制** — U5 Risks (P3, feasibility, confidence 70)
|
||||
|
||||
自建分组 wrapper 层会丢失跨分组多选、滚动位置、vxe-table 内置筛选与分组交互。P0 已知限制：不支持跨分组多选、折叠分组时虚拟滚动位置重置。后续 P1 优化。
|
||||
|
||||
- **U2 lookup 类型缺口** — U2 (P3, coherence, confidence 60)
|
||||
|
||||
U2 复用 FieldConfigForm 的 8 类型，lookup 字段内联编辑延后 R8（P1）。已知限制，不阻塞 P0。
|
||||
|
||||
- **vxe-pc-ui 依赖必要性** — U1 KTD2 (P2, feasibility, confidence 80)
|
||||
|
||||
KTD2 声明 vxe-pc-ui 但代码库仅 import vxe-table。需 U1 实施时验证 vxe-pc-ui 是否为 vxe-table v4 的 peer dependency。若非 peer dep 则移除，避免多余依赖。
|
||||
|
||||
---
|
||||
|
||||
## Origin Traceability
|
||||
|
||||
本 plan 承接 origin 文档（`docs/brainstorms/2026-07-03-bitable-comparative-evaluation-requirements.md`）的 P0 范围：
|
||||
|
||||
| R-ID | origin 章节 | 本 plan U-ID | 交付阶段 |
|
||||
|------|-----------|------------|---------|
|
||||
| R5 | Priority Recommendations P0 | U1 | Phase 1 |
|
||||
| R1 | Priority Recommendations P0 | U2 | Phase 2 |
|
||||
| R2 | Priority Recommendations P0 | U3 | Phase 2 |
|
||||
| R3 | Priority Recommendations P0 | U4 | Phase 2 |
|
||||
| R4 | Priority Recommendations P0 | U5 | Phase 2 |
|
||||
| R15a | Priority Recommendations P0 (agent 对等最高优先级子项) | U6 | Phase 3 |
|
||||
|
||||
origin 文档的 Acceptance Criteria (P0) + 横切验收标准（WCAG AA + 空状态）已映射到各 U-ID 的 Test scenarios。Agent 对等评估方法的 4 个新动作（create_view/update_view/update_field/delete_view）全部在 U6 实现。
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# Residual Review Findings — feat/bitable-enhancement
|
||||
|
||||
## Source
|
||||
- **Review**: ce-code-review (mode:agent) on 2026-07-03
|
||||
- **Branch**: feat/bitable-enhancement
|
||||
- **Commits reviewed**: e1cf073..229dc0b (6 U-ID commits) + 137bda0 (simplification)
|
||||
- **Overall assessment**: PASS WITH FINDINGS (0 P0, 0 P1, 2 P2, 3 P3)
|
||||
|
||||
## Residual Findings (deferred to downstream resolver)
|
||||
|
||||
### DR-1: Pre-existing `text()` SQL calls in repository.py (P2, security-lens, confidence HIGH)
|
||||
|
||||
- **File**: `src/agentkit/bitable/repository.py` line 660, 778-779
|
||||
- **Description**: Pre-existing `text()` calls with potential SQL injection risk. These calls exist on `origin/main` and were NOT introduced by this branch (verified via git diff). The new `delete_view` method (line 467-472) uses ORM `delete(ViewModel).where(...)` and is safe.
|
||||
- **Suggested fix**: Migrate `text()` calls to parameterized queries or ORM methods in a subsequent sprint.
|
||||
- **Severity**: P2 (pre-existing, not a regression)
|
||||
|
||||
### DR-2: ViewConfigPanel.vue container component not deeply reviewed (P2, design-lens, confidence MEDIUM)
|
||||
|
||||
- **File**: `src/agentkit/server/frontend/src/components/bitable/ViewConfigPanel.vue`
|
||||
- **Description**: The container component that composes GroupingEditor + ConditionalFormatEditor was not deeply reviewed in this pass. Based on architecture, it is a composition layer (both child components were deeply reviewed and PASS). E2E specs `bitable-view.spec.ts` and `bitable-grouping.spec.ts` cover end-to-end behavior.
|
||||
- **Suggested fix**: Quick review during PR review to confirm props passthrough and event emit wiring.
|
||||
- **Severity**: P2 (mitigated by child component review + e2e coverage)
|
||||
|
||||
### DR-3: Design token lacks independent unit test (P3, test-coverage, confidence LOW)
|
||||
|
||||
- **File**: `src/agentkit/server/frontend/src/styles/bitable-tokens.css`
|
||||
- **Description**: CSS tokens are validated via typecheck + e2e visual regression, but lack an independent test asserting key tokens (`--bitable-color-*`, `--bitable-cf-*`, `--bitable-drawer-width`) are defined in `:root`.
|
||||
- **Suggested fix**: Optional — add a simple test that parses the CSS file and asserts token presence.
|
||||
- **Severity**: P3 (optional polish)
|
||||
|
||||
## Context
|
||||
- All 6 Implementation Units (U1-U6) verified PASS against plan requirements
|
||||
- All 11 KTDs verified PASS
|
||||
- All Open Questions resolved (WCAG bold default, empty states, drawer loading/error/404, save button loading, vxe-pc-ui dependency, last-view protection)
|
||||
- 0 P0/P1 findings — no blockers for merge
|
||||
|
|
@ -464,6 +464,13 @@ class BitableRepository:
|
|||
await session.commit()
|
||||
return View.model_validate(entity) if entity else None
|
||||
|
||||
async def delete_view(self, view_id: str) -> bool:
|
||||
"""Delete a view. Returns True if a row was deleted."""
|
||||
async with self._session_factory() as session:
|
||||
result = await session.execute(delete(ViewModel).where(ViewModel.id == view_id))
|
||||
await session.commit()
|
||||
return result.rowcount > 0
|
||||
|
||||
# ── Recalc Queue ────────────────────────────────────────
|
||||
|
||||
async def enqueue_recalc(
|
||||
|
|
|
|||
|
|
@ -54,6 +54,14 @@ class FieldDependencyError(Exception):
|
|||
self.dependencies = dependencies
|
||||
|
||||
|
||||
class LastViewDeletionError(Exception):
|
||||
"""Raised when attempting to delete the last remaining view of a table.
|
||||
|
||||
Prevents users from deleting all views and making a table inaccessible.
|
||||
The route layer maps this to HTTP 409 Conflict.
|
||||
"""
|
||||
|
||||
|
||||
class BitableService:
|
||||
"""Bitable business logic service.
|
||||
|
||||
|
|
@ -536,6 +544,25 @@ class BitableService:
|
|||
async def get_view(self, view_id: str) -> View | None:
|
||||
return await self._repo.get_view(view_id)
|
||||
|
||||
async def delete_view(self, view_id: str) -> bool:
|
||||
"""Delete a view with last-view protection (U6).
|
||||
|
||||
Raises :class:`LastViewDeletionError` if the view is the last one in
|
||||
its table — preventing users from making a table inaccessible. The
|
||||
route layer is responsible for the 404 + ownership checks before
|
||||
calling this (matching the existing ``delete_field`` pattern).
|
||||
Returns True if a row was deleted.
|
||||
"""
|
||||
view = await self._repo.get_view(view_id)
|
||||
if view is None:
|
||||
return False
|
||||
siblings = await self._repo.list_views(view.table_id)
|
||||
if len(siblings) <= 1:
|
||||
raise LastViewDeletionError(
|
||||
"Cannot delete the last view of a table"
|
||||
)
|
||||
return await self._repo.delete_view(view_id)
|
||||
|
||||
# ── Recalc (U3: formula recalc pipeline) ────────────────
|
||||
|
||||
async def _trigger_recalc_for_affected_fields(self, table_id: str, record_id: str) -> None:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
"""Pydantic validation models for bitable view config substructures (U5).
|
||||
|
||||
The ``View.config`` JSONB column holds arbitrary JSON. To keep grouping +
|
||||
conditional formatting well-formed, the route layer validates the
|
||||
``group_by`` and ``conditional_formatting`` sub-keys against the schemas
|
||||
defined here before persisting. Other config keys (filters / sort /
|
||||
hidden_fields) are left untouched — this validation is additive.
|
||||
|
||||
ponytail: the validator is a pure function over a dict; no DB access, no
|
||||
side effects. The route converts ``ValidationError`` to HTTP 422.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from typing import Literal
|
||||
|
||||
from pydantic import BaseModel, ConfigDict, Field, ValidationError
|
||||
|
||||
# 7 operators supported by the conditional format rule matcher in
|
||||
# groupingRulesUtils.ts. Kept in sync via test_conditional_formatting.py.
|
||||
ConditionalOperator = Literal[
|
||||
"equals",
|
||||
"not-equals",
|
||||
"contains",
|
||||
"is-empty",
|
||||
"greater-than",
|
||||
"less-than",
|
||||
"between",
|
||||
]
|
||||
|
||||
# 8 color keys mapped to --bitable-cf-<key>-{bg,fg} tokens in
|
||||
# bitable-tokens.css. Adding a new color requires a token + a Literal entry.
|
||||
ColorKey = Literal[
|
||||
"red",
|
||||
"orange",
|
||||
"yellow",
|
||||
"green",
|
||||
"blue",
|
||||
"purple",
|
||||
"gray",
|
||||
"neutral",
|
||||
]
|
||||
|
||||
GroupDirection = Literal["asc", "desc"]
|
||||
|
||||
# U5 spec: max 3 group_by levels. Matches Feishu / Twenty UX.
|
||||
MAX_GROUP_BY_FIELDS = 3
|
||||
|
||||
|
||||
class GroupByItem(BaseModel):
|
||||
"""A single grouping level — field + sort direction."""
|
||||
|
||||
model_config = ConfigDict(extra="forbid")
|
||||
|
||||
field_id: str = Field(min_length=1, max_length=64)
|
||||
direction: GroupDirection = "asc"
|
||||
|
||||
|
||||
class ConditionalFormatRule(BaseModel):
|
||||
"""A single conditional formatting rule.
|
||||
|
||||
``bold`` defaults to True for WCAG 1.4.1 (color-blind accessibility) —
|
||||
color alone must not be the only visual cue, so we also bold the text
|
||||
unless the user explicitly disables it.
|
||||
"""
|
||||
|
||||
model_config = ConfigDict(extra="forbid")
|
||||
|
||||
field_id: str = Field(min_length=1, max_length=64)
|
||||
operator: ConditionalOperator
|
||||
# value is required even for is-empty (the matcher ignores it, but the
|
||||
# schema keeps the field uniform — UI sends "" for is-empty).
|
||||
value: str = Field(default="", max_length=512)
|
||||
color_key: ColorKey
|
||||
bold: bool = True
|
||||
enabled: bool = True
|
||||
|
||||
|
||||
class ViewConfigSchema(BaseModel):
|
||||
"""Validated sub-structure of View.config for U5.
|
||||
|
||||
Only the ``group_by`` and ``conditional_formatting`` keys are validated;
|
||||
other config keys (filters / sort / hidden_fields) pass through unchanged.
|
||||
"""
|
||||
|
||||
model_config = ConfigDict(extra="ignore")
|
||||
|
||||
group_by: list[GroupByItem] = Field(default_factory=list, max_length=MAX_GROUP_BY_FIELDS)
|
||||
conditional_formatting: list[ConditionalFormatRule] = Field(default_factory=list)
|
||||
|
||||
|
||||
class ViewConfigValidationError(ValueError):
|
||||
"""Raised when View.config fails U5 schema validation.
|
||||
|
||||
Subclass of ValueError so existing ``except ValueError`` handlers in the
|
||||
route layer pick it up. Carries the structured error detail for the 422
|
||||
response body.
|
||||
"""
|
||||
|
||||
def __init__(self, message: str, errors: list[dict[str, object]]) -> None:
|
||||
super().__init__(message)
|
||||
self.errors = errors
|
||||
|
||||
|
||||
def validate_view_config(config: dict[str, object] | None) -> None:
|
||||
"""Validate the U5 sub-keys of a View.config dict in place.
|
||||
|
||||
Raises ``ViewConfigValidationError`` if ``group_by`` or
|
||||
``conditional_formatting`` are present but malformed. Absent keys are
|
||||
treated as empty lists (no validation needed).
|
||||
|
||||
Other config keys (filters / sort / hidden_fields) are NOT validated
|
||||
here — they have their own loose shape and remain unchanged.
|
||||
"""
|
||||
if not config:
|
||||
return
|
||||
if "group_by" not in config and "conditional_formatting" not in config:
|
||||
return
|
||||
try:
|
||||
ViewConfigSchema.model_validate(
|
||||
{
|
||||
"group_by": config.get("group_by", []),
|
||||
"conditional_formatting": config.get("conditional_formatting", []),
|
||||
}
|
||||
)
|
||||
except ValidationError as exc:
|
||||
raise ViewConfigValidationError(
|
||||
"Invalid view config (group_by / conditional_formatting)",
|
||||
exc.errors(),
|
||||
) from exc
|
||||
|
|
@ -90,6 +90,7 @@ declare module 'vue' {
|
|||
CollaborationGraphCard: typeof import('./src/components/chat/messages/CollaborationGraphCard.vue')['default']
|
||||
ColumnHeaderMenu: typeof import('./src/components/bitable/ColumnHeaderMenu.vue')['default']
|
||||
CommandHistory: typeof import('./src/components/terminal/CommandHistory.vue')['default']
|
||||
ConditionalFormatEditor: typeof import('./src/components/bitable/ConditionalFormatEditor.vue')['default']
|
||||
ConditionNode: typeof import('./src/components/workflow/ConditionNode.vue')['default']
|
||||
ContextPill: typeof import('./src/components/chat/ContextPill.vue')['default']
|
||||
DashboardOverview: typeof import('./src/components/evolution/DashboardOverview.vue')['default']
|
||||
|
|
@ -102,6 +103,7 @@ declare module 'vue' {
|
|||
DocumentsTab: typeof import('./src/components/layout/tabs/DocumentsTab.vue')['default']
|
||||
DocumentUpload: typeof import('./src/components/kb/DocumentUpload.vue')['default']
|
||||
ErrorCard: typeof import('./src/components/chat/messages/ErrorCard.vue')['default']
|
||||
ErrorState: typeof import('./src/components/bitable/ErrorState.vue')['default']
|
||||
EventBadge: typeof import('./src/components/calendar/EventBadge.vue')['default']
|
||||
EventEditor: typeof import('./src/components/calendar/EventEditor.vue')['default']
|
||||
ExperiencePanel: typeof import('./src/components/evolution/ExperiencePanel.vue')['default']
|
||||
|
|
@ -110,6 +112,7 @@ declare module 'vue' {
|
|||
ExpertTeamView: typeof import('./src/components/chat/ExpertTeamView.vue')['default']
|
||||
FieldConfigForm: typeof import('./src/components/bitable/FieldConfigForm.vue')['default']
|
||||
FieldManagePanel: typeof import('./src/components/bitable/FieldManagePanel.vue')['default']
|
||||
FieldTypeIcon: typeof import('./src/components/bitable/FieldTypeIcon.vue')['default']
|
||||
FileAttachment: typeof import('./src/components/chat/messages/FileAttachment.vue')['default']
|
||||
FileCard: typeof import('./src/components/bitable/FileCard.vue')['default']
|
||||
FileCreateModal: typeof import('./src/components/bitable/FileCreateModal.vue')['default']
|
||||
|
|
@ -117,12 +120,15 @@ declare module 'vue' {
|
|||
FileTree: typeof import('./src/components/code/FileTree.vue')['default']
|
||||
FilterBuilder: typeof import('./src/components/bitable/FilterBuilder.vue')['default']
|
||||
FlowCanvas: typeof import('./src/components/workflow/FlowCanvas.vue')['default']
|
||||
GroupingEditor: typeof import('./src/components/bitable/GroupingEditor.vue')['default']
|
||||
IconNav: typeof import('./src/components/layout/IconNav.vue')['default']
|
||||
ImageCell: typeof import('./src/components/bitable/ImageCell.vue')['default']
|
||||
InlineFieldConfigurator: typeof import('./src/components/bitable/InlineFieldConfigurator.vue')['default']
|
||||
InvitationManager: typeof import('./src/components/calendar/InvitationManager.vue')['default']
|
||||
KBSettings: typeof import('./src/components/kb/KBSettings.vue')['default']
|
||||
KnowledgeTab: typeof import('./src/components/layout/tabs/KnowledgeTab.vue')['default']
|
||||
ListView: typeof import('./src/components/calendar/ListView.vue')['default']
|
||||
LoadingState: typeof import('./src/components/bitable/LoadingState.vue')['default']
|
||||
MentionDropdown: typeof import('./src/components/chat/MentionDropdown.vue')['default']
|
||||
MessageShell: typeof import('./src/components/chat/messages/MessageShell.vue')['default']
|
||||
MetricsChart: typeof import('./src/components/evolution/MetricsChart.vue')['default']
|
||||
|
|
@ -137,6 +143,7 @@ declare module 'vue' {
|
|||
PlanVisualization: typeof import('./src/components/chat/PlanVisualization.vue')['default']
|
||||
PropertyPanel: typeof import('./src/components/workflow/PropertyPanel.vue')['default']
|
||||
QuadrantPanel: typeof import('./src/components/layout/QuadrantPanel.vue')['default']
|
||||
RecordDetailDrawer: typeof import('./src/components/bitable/RecordDetailDrawer.vue')['default']
|
||||
ReminderConfig: typeof import('./src/components/calendar/ReminderConfig.vue')['default']
|
||||
ReviewResultCard: typeof import('./src/components/chat/messages/ReviewResultCard.vue')['default']
|
||||
RightPanel: typeof import('./src/components/layout/RightPanel.vue')['default']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,395 @@
|
|||
/**
|
||||
* E2E tests for U6: R15a BitableTool agent parity — the 4 new actions
|
||||
* (create_view / update_view / update_field / delete_view) and the
|
||||
* DELETE /views/{id} endpoint.
|
||||
*
|
||||
* These tests verify the UI flows that correspond to the 4 new BitableTool
|
||||
* actions, focusing on the delete-view flow (the main U6 frontend feature)
|
||||
* and the 204/409 contract of the DELETE endpoint.
|
||||
*
|
||||
* Route mocking is used for the DELETE /views endpoint so the 204 success
|
||||
* and 409 last-view scenarios are deterministic and don't depend on
|
||||
* specific backend view persistence state.
|
||||
*
|
||||
* ponytail: scenarios reuse the loginAndOpenBitable + openFileDetailWithTable
|
||||
* helpers from bitable-view.spec.ts. Each test creates a unique file to
|
||||
* avoid collisions. The backend may not be fully configured — tests skip
|
||||
* gracefully if the server is down.
|
||||
*/
|
||||
|
||||
import { test, expect, type Page } from '@playwright/test'
|
||||
import { TEST_USER, clearAuth, waitForServer } from './helpers'
|
||||
|
||||
async function loginAndOpenBitable(page: Page): Promise<void> {
|
||||
await page.goto('/login')
|
||||
await clearAuth(page)
|
||||
await page.getByPlaceholder('请输入用户名').fill(TEST_USER.username)
|
||||
await page.getByPlaceholder('请输入密码').fill(TEST_USER.password)
|
||||
await page.getByRole('button', { name: /登\s*录/ }).click()
|
||||
await expect(page).toHaveURL(/\/agent/, { timeout: 15_000 })
|
||||
await page.getByRole('button', { name: '多维表格' }).click()
|
||||
await expect(page).toHaveURL(/\/bitable/, { timeout: 15_000 })
|
||||
await expect(page.locator('.bitable-file-list-view')).toBeVisible({ timeout: 15_000 })
|
||||
}
|
||||
|
||||
/**
|
||||
* Log in, create a bitable file + table via the UI, and wait for the
|
||||
* ViewSwitcher to render. Returns once the grid header is visible.
|
||||
*/
|
||||
async function openFileDetailWithTable(page: Page, label: string): Promise<void> {
|
||||
await loginAndOpenBitable(page)
|
||||
await page.getByRole('button', { name: /新建文件/ }).click()
|
||||
await page.getByPlaceholder('请输入文件名').fill(`U6-${label}`)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page).toHaveURL(/\/bitable\/[^/]+/, { timeout: 10_000 })
|
||||
await page.locator('.table-view-list__header .ant-btn').click()
|
||||
await expect(page.getByText('新建数据表')).toBeVisible({ timeout: 5_000 })
|
||||
await page.getByPlaceholder('请输入表名').fill(`U6表-${label}`)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toContainText(
|
||||
`U6表-${label}`,
|
||||
{ timeout: 10_000 },
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock the list views GET to return the given view objects, so the
|
||||
* ViewSwitcher renders the exact set of views needed for each test.
|
||||
*/
|
||||
async function mockListViewsWith(
|
||||
page: Page,
|
||||
views: { id: string; name: string; view_type: string; config: Record<string, unknown> }[],
|
||||
): Promise<void> {
|
||||
await page.route('**/api/v1/bitable/tables/*/views', (route) => {
|
||||
if (route.request().method() !== 'GET') return route.continue()
|
||||
return route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, views }),
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
test.describe('Bitable Agent Parity E2E (U6: R15a)', () => {
|
||||
test.beforeAll(async () => {
|
||||
try {
|
||||
await waitForServer(undefined, 5_000)
|
||||
} catch {
|
||||
test.skip(true, 'Backend not running — skipping agent parity E2E')
|
||||
}
|
||||
})
|
||||
|
||||
// ── P1: delete button hidden when only 1 view ──────────────────────
|
||||
|
||||
test('P1: delete button hidden when only one view exists', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P1-single-view')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '默认视图', view_type: 'grid', config: {} },
|
||||
])
|
||||
// Reload the table to pick up the mocked views.
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
// The delete button must NOT be visible (views.length === 1).
|
||||
await expect(page.getByRole('button', { name: /删除/ })).not.toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
|
||||
// ── P2: delete button visible when 2+ views ────────────────────────
|
||||
|
||||
test('P2: delete button visible when 2+ views exist', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P2-two-views')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '视图A', view_type: 'grid', config: {} },
|
||||
{ id: 'v2', name: '视图B', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
// The delete button must be visible.
|
||||
await expect(page.getByRole('button', { name: /删除/ })).toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
|
||||
// ── P3: popconfirm appears on delete click ─────────────────────────
|
||||
|
||||
test('P3: clicking delete shows popconfirm with "确认删除此视图？"', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P3-popconfirm')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '视图A', view_type: 'grid', config: {} },
|
||||
{ id: 'v2', name: '视图B', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
// The popconfirm overlay should appear with the confirmation text.
|
||||
await expect(page.getByText('确认删除此视图？')).toBeVisible({ timeout: 5_000 })
|
||||
await expect(page.getByRole('button', { name: /删\s*除/ }).last()).toBeVisible()
|
||||
await expect(page.getByRole('button', { name: /取\s*消/ })).toBeVisible()
|
||||
})
|
||||
|
||||
// ── P4: cancel popconfirm does not delete ──────────────────────────
|
||||
|
||||
test('P4: cancel popconfirm does not fire DELETE request', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P4-cancel')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '视图A', view_type: 'grid', config: {} },
|
||||
{ id: 'v2', name: '视图B', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
let deleteFired = false
|
||||
await page.route('**/api/v1/bitable/views/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
deleteFired = true
|
||||
return route.fulfill({ status: 204 })
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
await page.getByRole('button', { name: /取\s*消/ }).click()
|
||||
|
||||
// Popconfirm disappears.
|
||||
await expect(page.getByText('确认删除此视图？')).not.toBeVisible({ timeout: 3_000 })
|
||||
// No DELETE request was fired.
|
||||
expect(deleteFired).toBe(false)
|
||||
})
|
||||
|
||||
// ── P5: confirm delete fires DELETE /views/{id} ────────────────────
|
||||
|
||||
test('P5: confirm delete fires DELETE /views/{id} and returns 204', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P5-delete-204')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '视图A', view_type: 'grid', config: {} },
|
||||
{ id: 'v-del', name: '待删除', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
let deletedViewId: string | null = null
|
||||
await page.route('**/api/v1/bitable/views/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
const url = route.request().url()
|
||||
deletedViewId = url.split('/views/')[1]?.split('?')[0] ?? null
|
||||
return route.fulfill({ status: 204 })
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
await page.getByRole('button', { name: /删\s*除/ }).last().click()
|
||||
|
||||
// The DELETE request was fired with the active view's id.
|
||||
await expect
|
||||
.poll(async () => deletedViewId, { timeout: 5_000 })
|
||||
.toBeTruthy()
|
||||
})
|
||||
|
||||
// ── P6: 409 last view shows warning notification ───────────────────
|
||||
|
||||
test('P6: 409 Conflict on last view shows warning notification', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P6-409-last-view')
|
||||
// Mock 2 views so the delete button is visible, but the backend
|
||||
// returns 409 (last view) — simulating a race where the other view
|
||||
// was deleted server-side between the list and the delete.
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '视图A', view_type: 'grid', config: {} },
|
||||
{ id: 'v2', name: '视图B', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
await page.route('**/api/v1/bitable/views/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
return route.fulfill({
|
||||
status: 409,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ detail: 'Cannot delete the last view of a table' }),
|
||||
})
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
await page.getByRole('button', { name: /删\s*除/ }).last().click()
|
||||
|
||||
// The warning notification should appear with the "无法删除" message.
|
||||
await expect(page.getByText('无法删除')).toBeVisible({ timeout: 5_000 })
|
||||
})
|
||||
|
||||
// ── P7: successful delete removes the view from the tab list ───────
|
||||
|
||||
test('P7: successful delete removes view from tab list (optimistic update)', async ({
|
||||
page,
|
||||
}) => {
|
||||
await openFileDetailWithTable(page, 'P7-removes-tab')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v-keep', name: '保留视图', view_type: 'grid', config: {} },
|
||||
{ id: 'v-del', name: '删除视图', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
// Both view tabs should be visible initially.
|
||||
await expect(page.getByRole('tab', { name: '保留视图' })).toBeVisible({ timeout: 5_000 })
|
||||
await expect(page.getByRole('tab', { name: '删除视图' })).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
await page.route('**/api/v1/bitable/views/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
return route.fulfill({ status: 204 })
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
// Switch to the view we want to delete, then delete it.
|
||||
await page.getByRole('tab', { name: '删除视图' }).click()
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
await page.getByRole('button', { name: /删\s*除/ }).last().click()
|
||||
|
||||
// The deleted view's tab should disappear.
|
||||
await expect(page.getByRole('tab', { name: '删除视图' })).not.toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
// The remaining view's tab should still be visible.
|
||||
await expect(page.getByRole('tab', { name: '保留视图' })).toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
|
||||
// ── P8: deleting active view switches to first remaining ───────────
|
||||
|
||||
test('P8: deleting active view switches to the first remaining view', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P8-switch-after-delete')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v-first', name: '第一个视图', view_type: 'grid', config: {} },
|
||||
{ id: 'v-second', name: '第二个视图', view_type: 'grid', config: {} },
|
||||
{ id: 'v-third', name: '第三个视图', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
await page.route('**/api/v1/bitable/views/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
return route.fulfill({ status: 204 })
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
// Switch to the second view, then delete it.
|
||||
await page.getByRole('tab', { name: '第二个视图' }).click()
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
await page.getByRole('button', { name: /删\s*除/ }).last().click()
|
||||
|
||||
// The first view should become the active tab.
|
||||
await expect(page.getByRole('tab', { name: '第一个视图' })).toHaveClass(
|
||||
/ant-tabs-tab-active/,
|
||||
{ timeout: 5_000 },
|
||||
)
|
||||
})
|
||||
|
||||
// ── P9: 404 on delete (non-owned view) shows error notification ────
|
||||
|
||||
test('P9: 404 on delete shows error notification (non-owner / missing)', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P9-404-not-found')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '视图A', view_type: 'grid', config: {} },
|
||||
{ id: 'v2', name: '视图B', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
await page.route('**/api/v1/bitable/views/*', (route) => {
|
||||
if (route.request().method() === 'DELETE') {
|
||||
return route.fulfill({
|
||||
status: 404,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ detail: 'View not found' }),
|
||||
})
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
await page.getByRole('button', { name: /删除/ }).click()
|
||||
await page.getByRole('button', { name: /删\s*除/ }).last().click()
|
||||
|
||||
// An error notification should appear.
|
||||
await expect(page.getByText('删除视图失败')).toBeVisible({ timeout: 5_000 })
|
||||
})
|
||||
|
||||
// ── P10: create view adds new tab to the switcher ──────────────────
|
||||
|
||||
test('P10: creating a new view adds it to the tab list', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'P10-create-adds-tab')
|
||||
await mockListViewsWith(page, [
|
||||
{ id: 'v1', name: '默认视图', view_type: 'grid', config: {} },
|
||||
])
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toBeVisible({
|
||||
timeout: 10_000,
|
||||
})
|
||||
|
||||
// Initially only 1 tab.
|
||||
await expect(page.getByRole('tab', { name: '默认视图' })).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Mock the POST /views response.
|
||||
await page.route('**/api/v1/bitable/tables/*/views', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
const body = route.request().postDataJSON() ?? {}
|
||||
return route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
view: {
|
||||
id: 'v-new',
|
||||
table_id: 'tbl',
|
||||
name: body.name ?? '新视图',
|
||||
view_type: 'grid',
|
||||
config: {},
|
||||
created_at: new Date().toISOString(),
|
||||
},
|
||||
}),
|
||||
})
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
// Open the "新建视图" dropdown and click "表格" (grid).
|
||||
await page.getByRole('button', { name: /新建视图/ }).click()
|
||||
await page.locator('.ant-dropdown-menu-item').filter({ hasText: '表格' }).click()
|
||||
|
||||
// Fill the name modal.
|
||||
const nameInput = page.getByPlaceholder('请输入视图名称')
|
||||
await expect(nameInput).toBeVisible({ timeout: 5_000 })
|
||||
await nameInput.fill('新创建视图')
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
|
||||
// The new view tab should appear.
|
||||
await expect(page.getByRole('tab', { name: '新创建视图' })).toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -145,4 +145,144 @@ test.describe('Bitable Field Operations E2E', () => {
|
|||
// the select editor renders when editing a select-type cell
|
||||
await page.waitForTimeout(500)
|
||||
})
|
||||
|
||||
// ── U2: inline field configuration in column header menu ──────────────
|
||||
|
||||
test('C6: edit menu opens InlineFieldConfigurator inline (no drawer)', async ({ page }) => {
|
||||
await setupBitableWithTable(page, 'E2E内联编辑', '测试表')
|
||||
|
||||
// Open the first column header dropdown
|
||||
const headerMenu = page.locator('.column-header-menu').first()
|
||||
await headerMenu.click()
|
||||
|
||||
// Click "编辑字段" — should open the inline configurator, NOT the drawer
|
||||
await page.getByText('编辑字段').click()
|
||||
|
||||
// Inline configurator renders inside a popover (role=dialog)
|
||||
await expect(page.locator('.inline-field-configurator')).toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
|
||||
// The right-side drawer must NOT have opened
|
||||
await expect(page.locator('.ant-drawer-content')).toHaveCount(0)
|
||||
})
|
||||
|
||||
test('C7: rename field via inline config updates the grid label', async ({ page }) => {
|
||||
await setupBitableWithTable(page, 'E2E重命名', '测试表')
|
||||
|
||||
const headerMenu = page.locator('.column-header-menu').first()
|
||||
await headerMenu.click()
|
||||
await page.getByText('编辑字段').click()
|
||||
|
||||
// The first input in the inline configurator is the field name
|
||||
const nameInput = page.locator('.inline-field-configurator input').first()
|
||||
await expect(nameInput).toBeVisible({ timeout: 5_000 })
|
||||
await nameInput.fill('')
|
||||
await nameInput.fill('重命名后字段')
|
||||
|
||||
// Save
|
||||
await page.locator('.inline-field-configurator').getByRole('button', { name: '保存' }).click()
|
||||
|
||||
// The grid header should now show the new label
|
||||
await expect(
|
||||
page.locator('.column-header-menu__title', { hasText: '重命名后字段' }),
|
||||
).toBeVisible({ timeout: 10_000 })
|
||||
})
|
||||
|
||||
test('C8: incompatible type change (text -> number) blocks submit', async ({ page }) => {
|
||||
await setupBitableWithTable(page, 'E2E类型转换', '测试表')
|
||||
|
||||
// Pick a text column with non-numeric values (the default "名称" field).
|
||||
const headerMenu = page
|
||||
.locator('.column-header-menu')
|
||||
.filter({ hasText: '名称' })
|
||||
.first()
|
||||
await headerMenu.click()
|
||||
await page.getByText('编辑字段').click()
|
||||
|
||||
// Switch type to number
|
||||
await page.locator('.inline-field-configurator .ant-select').first().click()
|
||||
await page.getByRole('option', { name: '数字' }).click()
|
||||
|
||||
// Compatibility warning must appear
|
||||
await expect(
|
||||
page.locator('.inline-field-configurator__warning, .inline-field-configurator .ant-alert-warning'),
|
||||
).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Save button must be disabled
|
||||
const saveBtn = page
|
||||
.locator('.inline-field-configurator')
|
||||
.getByRole('button', { name: '保存' })
|
||||
await expect(saveBtn).toBeDisabled()
|
||||
})
|
||||
|
||||
test('C9: select option management inline updates chips after save', async ({ page }) => {
|
||||
await setupBitableWithTable(page, 'E2E选项管理', '测试表')
|
||||
|
||||
// The "状态" field is a select field. Open its inline editor.
|
||||
const statusHeader = page
|
||||
.locator('.column-header-menu')
|
||||
.filter({ hasText: '状态' })
|
||||
.first()
|
||||
await statusHeader.click()
|
||||
await page.getByText('编辑字段').click()
|
||||
|
||||
// Add a new option
|
||||
await page
|
||||
.locator('.inline-field-configurator')
|
||||
.getByRole('button', { name: /添加选项/ })
|
||||
.click()
|
||||
const optionInputs = page.locator('.inline-field-configurator__option-row input')
|
||||
const newOption = optionInputs.last()
|
||||
await newOption.fill('新选项值')
|
||||
|
||||
// Save
|
||||
await page.locator('.inline-field-configurator').getByRole('button', { name: '保存' }).click()
|
||||
|
||||
// Inline configurator closes after save
|
||||
await expect(page.locator('.inline-field-configurator')).toHaveCount(0, { timeout: 10_000 })
|
||||
})
|
||||
|
||||
test('C10: keyboard nav — Tab to header, Enter opens inline editor', async ({ page }) => {
|
||||
await setupBitableWithTable(page, 'E2E键盘导航', '测试表')
|
||||
|
||||
// Tab until focus reaches the first column header menu (role=button)
|
||||
for (let i = 0; i < 30; i++) {
|
||||
await page.keyboard.press('Tab')
|
||||
const focused = await page.locator(':focus').evaluate((el) => ({
|
||||
cls: el.className,
|
||||
tag: el.tagName,
|
||||
}))
|
||||
if (focused.cls.includes('column-header-menu')) break
|
||||
}
|
||||
|
||||
// Enter opens the dropdown menu
|
||||
await page.keyboard.press('Enter')
|
||||
await expect(page.getByText('编辑字段')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Activate "编辑字段" via keyboard (a-menu supports arrow + Enter)
|
||||
await page.keyboard.press('Enter')
|
||||
await expect(page.locator('.inline-field-configurator')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Focus should be inside the inline configurator's first field
|
||||
await expect(page.locator('.inline-field-configurator input').first()).toBeFocused()
|
||||
|
||||
// Esc closes the inline configurator
|
||||
await page.keyboard.press('Escape')
|
||||
await expect(page.locator('.inline-field-configurator')).toHaveCount(0, { timeout: 5_000 })
|
||||
})
|
||||
|
||||
test('C11: batch management entry still opens FieldManagePanel', async ({ page }) => {
|
||||
await setupBitableWithTable(page, 'E2E批量管理', '测试表')
|
||||
|
||||
const headerMenu = page.locator('.column-header-menu').first()
|
||||
await headerMenu.click()
|
||||
|
||||
// Click "批量管理" — should open the right-side drawer
|
||||
await page.getByText('批量管理').click()
|
||||
await expect(page.locator('.ant-drawer-content')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// The batch-management hint banner must be present
|
||||
await expect(page.locator('.field-manage-panel__hint')).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,432 @@
|
|||
/**
|
||||
* E2E tests for Bitable grouping + conditional formatting (U5 / R4).
|
||||
*
|
||||
* Flow: login → create file → create table → seed records via API →
|
||||
* PATCH view config with group_by / conditional_formatting →
|
||||
* reload grid → assert group headers + CF row coloring.
|
||||
*
|
||||
* ponytail: setup goes through the REST API (page.evaluate fetch) rather
|
||||
* than UI clicks — setup is not the thing under test. Ceiling: API path
|
||||
* couples the test to the /views PATCH contract; if that contract shifts,
|
||||
* setup breaks (acceptable — the same contract is exercised by the UI).
|
||||
*
|
||||
* Requires: running backend with PostgreSQL. Skips gracefully if unreachable.
|
||||
*/
|
||||
|
||||
import { test, expect, type Page } from '@playwright/test'
|
||||
import { TEST_USER, clearAuth, waitForServer, API_BASE } from './helpers'
|
||||
|
||||
interface IField {
|
||||
id: string
|
||||
name: string
|
||||
field_type: string
|
||||
owner: string
|
||||
}
|
||||
|
||||
interface IRecord {
|
||||
id: string
|
||||
values: Record<string, unknown>
|
||||
}
|
||||
|
||||
interface IView {
|
||||
id: string
|
||||
name: string
|
||||
config: Record<string, unknown>
|
||||
}
|
||||
|
||||
const API_BASE_STR = API_BASE
|
||||
|
||||
async function loginAndCreateTable(
|
||||
page: Page,
|
||||
fileName: string,
|
||||
tableName: string,
|
||||
): Promise<{ tableId: string; fields: IField[]; viewId: string }> {
|
||||
await page.goto('/login')
|
||||
await clearAuth(page)
|
||||
await page.getByPlaceholder('请输入用户名').fill(TEST_USER.username)
|
||||
await page.getByPlaceholder('请输入密码').fill(TEST_USER.password)
|
||||
await page.getByRole('button', { name: /登\s*录/ }).click()
|
||||
await expect(page).toHaveURL(/\/agent/, { timeout: 15_000 })
|
||||
|
||||
await page.getByRole('button', { name: '多维表格' }).click()
|
||||
await expect(page).toHaveURL(/\/bitable$/, { timeout: 15_000 })
|
||||
|
||||
// Create file
|
||||
await page.getByRole('button', { name: /新建文件/ }).click()
|
||||
await page.getByPlaceholder('请输入文件名').fill(fileName)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page).toHaveURL(/\/bitable\/[^/]+/, { timeout: 10_000 })
|
||||
|
||||
// Create table
|
||||
await page.locator('.table-view-list__header .ant-btn').click()
|
||||
await page.getByPlaceholder('请输入表名').fill(tableName)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toContainText(
|
||||
tableName,
|
||||
{ timeout: 10_000 },
|
||||
)
|
||||
|
||||
// Fetch table id + fields + default view via API
|
||||
const { tableId, fields, viewId } = await page.evaluate(async (apiBase: string) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
const tablesResp = await fetch(`${apiBase}/bitable/tables`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
const tablesJson = (await tablesResp.json()) as { tables: { id: string }[] }
|
||||
const table = tablesJson.tables[0]
|
||||
const fieldsResp = await fetch(`${apiBase}/bitable/tables/${table.id}/fields`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
const fieldsJson = (await fieldsResp.json()) as { fields: IField[] }
|
||||
const viewsResp = await fetch(`${apiBase}/bitable/tables/${table.id}/views`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
const viewsJson = (await viewsResp.json()) as { views: IView[] }
|
||||
return {
|
||||
tableId: table.id,
|
||||
fields: fieldsJson.fields,
|
||||
viewId: viewsJson.views[0]?.id ?? '',
|
||||
}
|
||||
}, API_BASE_STR)
|
||||
return { tableId, fields, viewId }
|
||||
}
|
||||
|
||||
async function createRecordViaApi(
|
||||
page: Page,
|
||||
tableId: string,
|
||||
values: Record<string, unknown>,
|
||||
): Promise<IRecord> {
|
||||
return await page.evaluate(
|
||||
async ({ tableId, values, apiBase }) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
const resp = await fetch(`${apiBase}/bitable/tables/${tableId}/records`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ records: [values] }),
|
||||
})
|
||||
const json = (await resp.json()) as { records: IRecord[] }
|
||||
return json.records[0]
|
||||
},
|
||||
{ tableId, values, apiBase: API_BASE_STR },
|
||||
)
|
||||
}
|
||||
|
||||
async function createFieldViaApi(
|
||||
page: Page,
|
||||
tableId: string,
|
||||
name: string,
|
||||
fieldType: string,
|
||||
owner: string = 'user',
|
||||
): Promise<IField> {
|
||||
return await page.evaluate(
|
||||
async ({ tableId, name, fieldType, owner, apiBase }) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
const resp = await fetch(`${apiBase}/bitable/tables/${tableId}/fields`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name, field_type: fieldType, owner }),
|
||||
})
|
||||
const json = (await resp.json()) as { field: IField }
|
||||
return json.field
|
||||
},
|
||||
{ tableId, name, fieldType, owner, apiBase: API_BASE_STR },
|
||||
)
|
||||
}
|
||||
|
||||
async function updateViewConfig(
|
||||
page: Page,
|
||||
viewId: string,
|
||||
config: Record<string, unknown>,
|
||||
): Promise<void> {
|
||||
await page.evaluate(
|
||||
async ({ viewId, config, apiBase }) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
await fetch(`${apiBase}/bitable/views/${viewId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ config }),
|
||||
})
|
||||
},
|
||||
{ viewId, config, apiBase: API_BASE_STR },
|
||||
)
|
||||
}
|
||||
|
||||
async function reloadGrid(page: Page): Promise<void> {
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-grid-scope')).toBeVisible({ timeout: 15_000 })
|
||||
}
|
||||
|
||||
test.describe('Bitable Grouping + Conditional Formatting E2E (U5)', () => {
|
||||
test.beforeAll(async () => {
|
||||
try {
|
||||
await waitForServer(undefined, 5_000)
|
||||
} catch {
|
||||
test.skip(true, 'Backend not running — skipping grouping E2E')
|
||||
}
|
||||
})
|
||||
|
||||
test('G1: group by one field renders group headers with value + count', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E分组G1', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录A', [statusField.id]: '进行中' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录B', [statusField.id]: '已完成' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录C', [statusField.id]: '进行中' })
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
group_by: [{ field_id: statusField.id, direction: 'asc' }],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
// Group headers appear
|
||||
const headers = page.locator('.bitable-grid-scope__group-header')
|
||||
await expect(headers).toHaveCount(2, { timeout: 10_000 })
|
||||
|
||||
// The "进行中" group has 2 records
|
||||
const headerInProgress = headers.filter({ hasText: '进行中' })
|
||||
await expect(headerInProgress).toBeVisible()
|
||||
await expect(headerInProgress).toContainText('2 条')
|
||||
|
||||
// The "已完成" group has 1 record
|
||||
const headerDone = headers.filter({ hasText: '已完成' })
|
||||
await expect(headerDone).toBeVisible()
|
||||
await expect(headerDone).toContainText('1 条')
|
||||
})
|
||||
|
||||
test('G2: clicking a group header collapses its records', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E分组G2', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录A', [statusField.id]: '进行中' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录B', [statusField.id]: '已完成' })
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
group_by: [{ field_id: statusField.id, direction: 'asc' }],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
const headerInProgress = page.locator('.bitable-grid-scope__group-header').first()
|
||||
await expect(headerInProgress).toBeVisible({ timeout: 10_000 })
|
||||
|
||||
// Count vxe-table body rows before collapse (should have data rows)
|
||||
const rowsBefore = await page.locator('.vxe-body--row').count()
|
||||
expect(rowsBefore).toBeGreaterThan(0)
|
||||
|
||||
// Click to collapse
|
||||
await headerInProgress.click()
|
||||
|
||||
// After collapse, the caret shows ▸ (collapsed indicator)
|
||||
await expect(headerInProgress.locator('.bitable-grid-scope__caret')).toContainText('▸')
|
||||
})
|
||||
|
||||
test('G3: clicking a collapsed group header expands its records', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E分组G3', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录A', [statusField.id]: '进行中' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录B', [statusField.id]: '已完成' })
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
group_by: [{ field_id: statusField.id, direction: 'asc' }],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
const header = page.locator('.bitable-grid-scope__group-header').first()
|
||||
await expect(header).toBeVisible({ timeout: 10_000 })
|
||||
|
||||
// Collapse
|
||||
await header.click()
|
||||
await expect(header.locator('.bitable-grid-scope__caret')).toContainText('▸')
|
||||
|
||||
// Expand
|
||||
await header.click()
|
||||
await expect(header.locator('.bitable-grid-scope__caret')).toContainText('▾')
|
||||
})
|
||||
|
||||
test('G4: multi-level grouping (2 fields) renders nested headers', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E分组G4', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
const priorityField = await createFieldViaApi(page, tableId, '优先级', 'select')
|
||||
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '记录A',
|
||||
[statusField.id]: '进行中',
|
||||
[priorityField.id]: '高',
|
||||
})
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '记录B',
|
||||
[statusField.id]: '进行中',
|
||||
[priorityField.id]: '低',
|
||||
})
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '记录C',
|
||||
[statusField.id]: '已完成',
|
||||
[priorityField.id]: '高',
|
||||
})
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
group_by: [
|
||||
{ field_id: statusField.id, direction: 'asc' },
|
||||
{ field_id: priorityField.id, direction: 'asc' },
|
||||
],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
// 2 top-level groups (进行中, 已完成) + 3 sub-groups (高, 低, 高) = 5 headers
|
||||
const headers = page.locator('.bitable-grid-scope__group-header')
|
||||
await expect(headers).toHaveCount(5, { timeout: 10_000 })
|
||||
|
||||
// Sub-group headers have more padding (depth=1)
|
||||
const subHeaders = headers.filter({ hasText: '高' })
|
||||
await expect(subHeaders.first()).toBeVisible()
|
||||
})
|
||||
|
||||
test('G5: conditional format "equals" colors matching rows', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E条件格式G5', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录A', [statusField.id]: '已完成' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录B', [statusField.id]: '进行中' })
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
conditional_formatting: [
|
||||
{
|
||||
field_id: statusField.id,
|
||||
operator: 'equals',
|
||||
value: '已完成',
|
||||
color_key: 'green',
|
||||
bold: true,
|
||||
enabled: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
// At least one row should have the green CF class
|
||||
const greenRows = page.locator('.bitable-cf--green')
|
||||
await expect(greenRows.first()).toBeVisible({ timeout: 10_000 })
|
||||
|
||||
// The green row should also be bold
|
||||
const greenBoldRows = page.locator('.bitable-cf--green.bitable-cf--bold')
|
||||
await expect(greenBoldRows.first()).toBeVisible()
|
||||
})
|
||||
|
||||
test('G6: conditional format "between" colors rows in numeric range', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E条件格式G6', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const numberField = await createFieldViaApi(page, tableId, '数值', 'number')
|
||||
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录A', [numberField.id]: 50 })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录B', [numberField.id]: 150 })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录C', [numberField.id]: 250 })
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
conditional_formatting: [
|
||||
{
|
||||
field_id: numberField.id,
|
||||
operator: 'between',
|
||||
value: '100,200',
|
||||
color_key: 'yellow',
|
||||
bold: false,
|
||||
enabled: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
// Only the row with value 150 should be colored yellow
|
||||
const yellowRows = page.locator('.bitable-cf--yellow')
|
||||
await expect(yellowRows).toHaveCount(1, { timeout: 10_000 })
|
||||
})
|
||||
|
||||
test('G7: group + CF combined — CF only on data cells, not group headers', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E组合G7', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录A', [statusField.id]: '已完成' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录B', [statusField.id]: '进行中' })
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '记录C', [statusField.id]: '已完成' })
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
group_by: [{ field_id: statusField.id, direction: 'asc' }],
|
||||
conditional_formatting: [
|
||||
{
|
||||
field_id: statusField.id,
|
||||
operator: 'equals',
|
||||
value: '已完成',
|
||||
color_key: 'green',
|
||||
bold: true,
|
||||
enabled: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
// Group headers exist
|
||||
const headers = page.locator('.bitable-grid-scope__group-header')
|
||||
await expect(headers).toHaveCount(2, { timeout: 10_000 })
|
||||
|
||||
// Group headers must NOT have CF classes
|
||||
const coloredHeaders = headers.filter({
|
||||
has: page.locator('.bitable-cf--green'),
|
||||
})
|
||||
await expect(coloredHeaders).toHaveCount(0)
|
||||
|
||||
// Data rows DO have CF classes (the "已完成" group's rows are green)
|
||||
const greenDataRows = page.locator('.vxe-body--row.bitable-cf--green')
|
||||
await expect(greenDataRows.first()).toBeVisible({ timeout: 10_000 })
|
||||
})
|
||||
|
||||
test('G8: group header shows SUM + AVG aggregation for number fields', async ({ page }) => {
|
||||
const { tableId, fields, viewId } = await loginAndCreateTable(page, 'E2E聚合G8', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const statusField = await createFieldViaApi(page, tableId, '状态', 'select')
|
||||
const amountField = await createFieldViaApi(page, tableId, '金额', 'number')
|
||||
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '记录A',
|
||||
[statusField.id]: '进行中',
|
||||
[amountField.id]: 100,
|
||||
})
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '记录B',
|
||||
[statusField.id]: '进行中',
|
||||
[amountField.id]: 200,
|
||||
})
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '记录C',
|
||||
[statusField.id]: '已完成',
|
||||
[amountField.id]: 50,
|
||||
})
|
||||
|
||||
await updateViewConfig(page, viewId, {
|
||||
group_by: [{ field_id: statusField.id, direction: 'asc' }],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
// The "进行中" group header should show aggregation: 合计 300 · 均值 150
|
||||
const headerInProgress = page
|
||||
.locator('.bitable-grid-scope__group-header')
|
||||
.filter({ hasText: '进行中' })
|
||||
await expect(headerInProgress).toBeVisible({ timeout: 10_000 })
|
||||
await expect(headerInProgress).toContainText('合计')
|
||||
await expect(headerInProgress).toContainText('300')
|
||||
await expect(headerInProgress).toContainText('均值')
|
||||
await expect(headerInProgress).toContainText('150')
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
/**
|
||||
* E2E tests for the Bitable record detail drawer (U3 / R2).
|
||||
*
|
||||
* Flow: login → create file → create table → seed a record via API →
|
||||
* click the row's seq cell → assert drawer opens with all field types.
|
||||
*
|
||||
* ponytail: record + extra-field seeding goes through the REST API (via
|
||||
* page.evaluate fetch) rather than UI clicks — setup is not the thing under
|
||||
* test, and API seeding is ~10x faster + more deterministic than driving the
|
||||
* add-field / add-record UI for 11+ fields. Ceiling: API path couples the
|
||||
* test to the /tables/{id}/fields + /tables/{id}/records contract; if that
|
||||
* contract shifts, setup breaks (acceptable — the same contract is exercised
|
||||
* by the grid itself).
|
||||
*
|
||||
* Requires: running backend with PostgreSQL. Skips gracefully if unreachable.
|
||||
*/
|
||||
|
||||
import { test, expect, type Page } from '@playwright/test'
|
||||
import { TEST_USER, clearAuth, waitForServer, API_BASE } from './helpers'
|
||||
|
||||
interface IField {
|
||||
id: string
|
||||
name: string
|
||||
field_type: string
|
||||
owner: string
|
||||
}
|
||||
|
||||
interface IRecord {
|
||||
id: string
|
||||
values: Record<string, unknown>
|
||||
}
|
||||
|
||||
// API_BASE is an absolute URL (http://127.0.0.1:PORT/api/v1) — passed into
|
||||
// page.evaluate as an arg because the browser context cannot close over
|
||||
// Node-scope variables.
|
||||
const API_BASE_STR = API_BASE
|
||||
|
||||
async function loginAndCreateTable(
|
||||
page: Page,
|
||||
fileName: string,
|
||||
tableName: string,
|
||||
): Promise<{ tableId: string; fields: IField[] }> {
|
||||
await page.goto('/login')
|
||||
await clearAuth(page)
|
||||
await page.getByPlaceholder('请输入用户名').fill(TEST_USER.username)
|
||||
await page.getByPlaceholder('请输入密码').fill(TEST_USER.password)
|
||||
await page.getByRole('button', { name: /登\s*录/ }).click()
|
||||
await expect(page).toHaveURL(/\/agent/, { timeout: 15_000 })
|
||||
|
||||
await page.getByRole('button', { name: '多维表格' }).click()
|
||||
await expect(page).toHaveURL(/\/bitable$/, { timeout: 15_000 })
|
||||
|
||||
// Create file
|
||||
await page.getByRole('button', { name: /新建文件/ }).click()
|
||||
await page.getByPlaceholder('请输入文件名').fill(fileName)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page).toHaveURL(/\/bitable\/[^/]+/, { timeout: 10_000 })
|
||||
|
||||
// Create table
|
||||
await page.locator('.table-view-list__header .ant-btn').click()
|
||||
await page.getByPlaceholder('请输入表名').fill(tableName)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toContainText(
|
||||
tableName,
|
||||
{ timeout: 10_000 },
|
||||
)
|
||||
|
||||
// Fetch table id + fields via API (auth token is in localStorage after UI login).
|
||||
// apiBase is passed as an arg — browser context cannot close over Node vars.
|
||||
const { tableId, fields } = await page.evaluate(async (apiBase: string) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
const tablesResp = await fetch(`${apiBase}/bitable/tables`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
const tablesJson = (await tablesResp.json()) as { tables: { id: string; name: string }[] }
|
||||
const table = tablesJson.tables[0]
|
||||
const fieldsResp = await fetch(`${apiBase}/bitable/tables/${table.id}/fields`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
const fieldsJson = (await fieldsResp.json()) as { fields: IField[] }
|
||||
return { tableId: table.id, fields: fieldsJson.fields }
|
||||
}, API_BASE_STR)
|
||||
return { tableId, fields }
|
||||
}
|
||||
|
||||
async function createRecordViaApi(
|
||||
page: Page,
|
||||
tableId: string,
|
||||
values: Record<string, unknown>,
|
||||
): Promise<IRecord> {
|
||||
return await page.evaluate(
|
||||
async ({ tableId, values, apiBase }) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
const resp = await fetch(`${apiBase}/bitable/tables/${tableId}/records`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ records: [values] }),
|
||||
})
|
||||
const json = (await resp.json()) as { records: IRecord[] }
|
||||
return json.records[0]
|
||||
},
|
||||
{ tableId, values, apiBase: API_BASE_STR },
|
||||
)
|
||||
}
|
||||
|
||||
async function createFieldViaApi(
|
||||
page: Page,
|
||||
tableId: string,
|
||||
name: string,
|
||||
fieldType: string,
|
||||
owner: string = 'user',
|
||||
): Promise<IField> {
|
||||
return await page.evaluate(
|
||||
async ({ tableId, name, fieldType, owner, apiBase }) => {
|
||||
const token = localStorage.getItem('agentkit.access_token') ?? ''
|
||||
const resp = await fetch(`${apiBase}/bitable/tables/${tableId}/fields`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ name, field_type: fieldType, owner }),
|
||||
})
|
||||
const json = (await resp.json()) as { field: IField }
|
||||
return json.field
|
||||
},
|
||||
{ tableId, name, fieldType, owner, apiBase: API_BASE_STR },
|
||||
)
|
||||
}
|
||||
|
||||
async function reloadGrid(page: Page): Promise<void> {
|
||||
await page.reload()
|
||||
await expect(page.locator('.bitable-grid-scope')).toBeVisible({ timeout: 15_000 })
|
||||
}
|
||||
|
||||
test.describe('Bitable Record Detail Drawer E2E (U3)', () => {
|
||||
test.beforeAll(async () => {
|
||||
try {
|
||||
await waitForServer(undefined, 5_000)
|
||||
} catch {
|
||||
test.skip(true, 'Backend not running — skipping record drawer E2E')
|
||||
}
|
||||
})
|
||||
|
||||
test('D1: clicking a row seq cell opens the drawer with all fields', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E抽屉打开', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '测试记录1' })
|
||||
await reloadGrid(page)
|
||||
|
||||
// Click the seq cell (row number column) of the first data row.
|
||||
const seqCell = page.locator('.vxe-body--column.col--seq').first()
|
||||
await expect(seqCell).toBeVisible({ timeout: 10_000 })
|
||||
await seqCell.click()
|
||||
|
||||
// Drawer opens
|
||||
await expect(page.locator('.record-detail-drawer')).toBeVisible({ timeout: 5_000 })
|
||||
// The sticky header shows the record title
|
||||
await expect(page.locator('.record-detail-drawer__header-title')).toContainText(
|
||||
'测试记录1',
|
||||
{ timeout: 5_000 },
|
||||
)
|
||||
// Field labels are rendered (default table has 5 fields incl. attachment-free types)
|
||||
await expect(page.locator('.record-detail-drawer__field')).toHaveCount(5, {
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
|
||||
test('D2: attachment/image fields render thumbnails, not raw URLs', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E附件图片', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
// Add attachment + image fields
|
||||
const attachmentField = await createFieldViaApi(page, tableId, '附件', 'attachment')
|
||||
const imageField = await createFieldViaApi(page, tableId, '图片', 'image')
|
||||
|
||||
// Seed a record with attachment/image metadata
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '带附件记录',
|
||||
[attachmentField.id]: [{ filename: 'doc.pdf', url: '/files/doc.pdf', size: 1024 }],
|
||||
[imageField.id]: [{ filename: 'pic.png', url: '/files/pic.png', size: 2048 }],
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
await expect(page.locator('.record-detail-drawer')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Attachment cell renders a download link (not a raw URL string)
|
||||
await expect(page.locator('.record-detail-drawer .attachment-cell__link')).toHaveCount(
|
||||
1,
|
||||
{ timeout: 5_000 },
|
||||
)
|
||||
// Image cell renders a thumbnail <img>
|
||||
await expect(page.locator('.record-detail-drawer .image-cell__thumb')).toHaveCount(1, {
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
|
||||
test('D3: formula field renders read-only (no input control)', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E公式只读', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const numberField = fields.find((f) => f.field_type === 'number')
|
||||
// Add a number field + a formula field referencing it
|
||||
const numField = numberField ?? (await createFieldViaApi(page, tableId, '数值', 'number'))
|
||||
const formulaField = await createFieldViaApi(
|
||||
page,
|
||||
tableId,
|
||||
'公式',
|
||||
'formula',
|
||||
)
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '公式记录',
|
||||
[numField.id]: 42,
|
||||
// formula value is computed server-side; seed a cached value for display
|
||||
[formulaField.id]: 84,
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
await expect(page.locator('.record-detail-drawer')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// The formula field's value row must NOT contain an editable input.
|
||||
const formulaRow = page
|
||||
.locator('.record-detail-drawer__field')
|
||||
.filter({ hasText: '公式' })
|
||||
await expect(formulaRow).toBeVisible({ timeout: 5_000 })
|
||||
await expect(formulaRow.locator('input')).toHaveCount(0)
|
||||
// The computed value is shown as read-only text
|
||||
await expect(formulaRow.locator('.record-detail-drawer__readonly')).toContainText('84')
|
||||
})
|
||||
|
||||
test('D4: editing a user-owned field preserves agent columns', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E保留agent列', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
const agentField = fields.find((f) => f.owner === 'agent')!
|
||||
await createRecordViaApi(page, tableId, {
|
||||
[titleField.id]: '编辑前标题',
|
||||
[agentField.id]: 'AGENT_VALUE',
|
||||
})
|
||||
await reloadGrid(page)
|
||||
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
await expect(page.locator('.record-detail-drawer')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Edit the user-owned title field
|
||||
const titleInput = page.locator('.record-detail-drawer__field').first().locator('input')
|
||||
await titleInput.fill('编辑后标题')
|
||||
await page.locator('.record-detail-drawer__footer').getByRole('button', { name: '保存' }).click()
|
||||
|
||||
// Drawer closes on success
|
||||
await expect(page.locator('.record-detail-drawer')).toHaveCount(0, { timeout: 10_000 })
|
||||
|
||||
// Re-open the drawer — agent column must still show AGENT_VALUE
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
await expect(page.locator('.record-detail-drawer')).toBeVisible({ timeout: 5_000 })
|
||||
const agentRow = page
|
||||
.locator('.record-detail-drawer__field')
|
||||
.filter({ hasText: agentField.name })
|
||||
await expect(agentRow).toContainText('AGENT_VALUE', { timeout: 5_000 })
|
||||
})
|
||||
|
||||
test('D5: drawer width is 480px when field count <= 10', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E宽度480', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '宽度测试' })
|
||||
await reloadGrid(page)
|
||||
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
const drawer = page.locator('.record-detail-drawer')
|
||||
await expect(drawer).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Default table has 5 fields (<=10). Resolved width should be 480px.
|
||||
const width = await drawer.evaluate((el) => {
|
||||
// The a-drawer width is applied to the .ant-drawer-content wrapper.
|
||||
const content = el.querySelector('.ant-drawer-content') ?? el
|
||||
return getComputedStyle(content).width
|
||||
})
|
||||
expect(width).toBe('480px')
|
||||
})
|
||||
|
||||
test('D6: drawer width is 640px when field count > 10', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E宽度640', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
// Default table has 5 fields; add 7 more to exceed 10.
|
||||
for (let i = 0; i < 7; i++) {
|
||||
await createFieldViaApi(page, tableId, `扩展字段${i}`, 'text')
|
||||
}
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: '宽屏测试' })
|
||||
await reloadGrid(page)
|
||||
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
const drawer = page.locator('.record-detail-drawer')
|
||||
await expect(drawer).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
const width = await drawer.evaluate((el) => {
|
||||
const content = el.querySelector('.ant-drawer-content') ?? el
|
||||
return getComputedStyle(content).width
|
||||
})
|
||||
expect(width).toBe('640px')
|
||||
})
|
||||
|
||||
test('D7: Esc closes the drawer', async ({ page }) => {
|
||||
const { tableId, fields } = await loginAndCreateTable(page, 'E2E Esc关闭', '测试表')
|
||||
const titleField = fields.find((f) => f.field_type === 'text')!
|
||||
await createRecordViaApi(page, tableId, { [titleField.id]: 'Esc测试' })
|
||||
await reloadGrid(page)
|
||||
|
||||
await page.locator('.vxe-body--column.col--seq').first().click()
|
||||
await expect(page.locator('.record-detail-drawer')).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
await page.keyboard.press('Escape')
|
||||
await expect(page.locator('.record-detail-drawer')).toHaveCount(0, { timeout: 5_000 })
|
||||
})
|
||||
})
|
||||
|
|
@ -72,3 +72,192 @@ test.describe('Bitable View E2E', () => {
|
|||
await expect(newButton).toBeVisible({ timeout: 10_000 })
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// U4 (R3): View type switcher — "新建视图" exposes 5 view types; only `grid`
|
||||
// is enabled in v1, the rest are disabled with a "规划中" tooltip.
|
||||
//
|
||||
// These tests require a running backend (to create a file + table so the
|
||||
// ViewSwitcher renders). They skip gracefully if the backend is down, mirroring
|
||||
// the B1-B3 suite. The POST /views request is intercepted and mocked so the
|
||||
// view-creation assertion is deterministic and does not depend on backend
|
||||
// view persistence.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test.describe('Bitable View Type Switcher E2E (U4)', () => {
|
||||
test.beforeAll(async () => {
|
||||
try {
|
||||
await waitForServer(undefined, 5_000)
|
||||
} catch {
|
||||
test.skip(true, 'Backend not running — skipping view type switcher E2E')
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Log in, create a bitable file + table via the UI, and wait for the
|
||||
* ViewSwitcher ("新建视图" button) to render. Returns once the grid header
|
||||
* is visible so callers can interact with the view switcher.
|
||||
*
|
||||
* Each test uses a unique file name to avoid collisions with parallel runs.
|
||||
*/
|
||||
async function openFileDetailWithTable(page: Page, label: string): Promise<void> {
|
||||
await loginAndOpenBitable(page)
|
||||
|
||||
// Create a file — opens the file detail view.
|
||||
await page.getByRole('button', { name: /新建文件/ }).click()
|
||||
await page.getByPlaceholder('请输入文件名').fill(`U4-${label}`)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
await expect(page).toHaveURL(/\/bitable\/[^/]+/, { timeout: 10_000 })
|
||||
|
||||
// Create a table — required for the ViewSwitcher to render.
|
||||
await page.locator('.table-view-list__header .ant-btn').click()
|
||||
await expect(page.getByText('新建数据表')).toBeVisible({ timeout: 5_000 })
|
||||
await page.getByPlaceholder('请输入表名').fill(`U4表-${label}`)
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
|
||||
// Wait for the grid header (and thus the ViewSwitcher) to render.
|
||||
await expect(page.locator('.bitable-file-detail-view__table-name')).toContainText(
|
||||
`U4表-${label}`,
|
||||
{ timeout: 10_000 },
|
||||
)
|
||||
}
|
||||
|
||||
/** Open the "新建视图" dropdown and return the menu item locator list. */
|
||||
async function openViewTypeDropdown(page: Page): Promise<import('@playwright/test').Locator> {
|
||||
await page.getByRole('button', { name: /新建视图/ }).click()
|
||||
// The dropdown overlay menu items.
|
||||
return page.locator('.ant-dropdown-menu-item')
|
||||
}
|
||||
|
||||
test('E1: "新建视图" dropdown exposes all 5 view types', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'E1-types')
|
||||
|
||||
const items = await openViewTypeDropdown(page)
|
||||
await expect(items).toHaveCount(5, { timeout: 5_000 })
|
||||
|
||||
// Labels in spec order: 表格 / 看板 / 画廊 / 甘特 / 表单
|
||||
const labels = await items.allTextContents()
|
||||
expect(labels.map((t) => t.trim())).toEqual(['表格', '看板', '画廊', '甘特', '表单'])
|
||||
})
|
||||
|
||||
test('E2: kanban/gallery/gantt/form are disabled with "规划中" tooltip', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'E2-disabled')
|
||||
|
||||
const items = await openViewTypeDropdown(page)
|
||||
|
||||
// The 4 unimplemented types are disabled and carry title="规划中".
|
||||
for (const label of ['看板', '画廊', '甘特', '表单']) {
|
||||
const item = items.filter({ hasText: label })
|
||||
await expect(item).toHaveClass(/ant-dropdown-menu-item-disabled/, { timeout: 5_000 })
|
||||
await expect(item).toHaveAttribute('title', '规划中')
|
||||
}
|
||||
|
||||
// grid is enabled and has no "规划中" title.
|
||||
const gridItem = items.filter({ hasText: '表格' })
|
||||
await expect(gridItem).not.toHaveClass(/ant-dropdown-menu-item-disabled/)
|
||||
await expect(gridItem).not.toHaveAttribute('title', '规划中')
|
||||
})
|
||||
|
||||
test('E3: selecting grid sends POST /views with view_type=grid', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'E3-create-grid')
|
||||
|
||||
let capturedBody: { name?: string; view_type?: string } | null = null
|
||||
await page.route('**/api/v1/bitable/tables/*/views', (route) => {
|
||||
if (route.request().method() !== 'POST') return route.continue()
|
||||
capturedBody = route.request().postDataJSON()
|
||||
const name = capturedBody?.name ?? '测试视图'
|
||||
return route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
view: {
|
||||
id: 'view-e3-mock',
|
||||
table_id: 'tbl-e3',
|
||||
name,
|
||||
view_type: 'grid',
|
||||
config: {},
|
||||
created_at: new Date().toISOString(),
|
||||
},
|
||||
}),
|
||||
})
|
||||
})
|
||||
|
||||
const items = await openViewTypeDropdown(page)
|
||||
await items.filter({ hasText: '表格' }).click()
|
||||
|
||||
// Name modal (AModal.confirm) appears — fill + confirm.
|
||||
const nameInput = page.getByPlaceholder('请输入视图名称')
|
||||
await expect(nameInput).toBeVisible({ timeout: 5_000 })
|
||||
await nameInput.fill('网格视图E3')
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
|
||||
// Assert the POST body carried view_type=grid (no longer hardcoded elsewhere).
|
||||
await expect
|
||||
.poll(async () => capturedBody, { timeout: 5_000 })
|
||||
.toMatchObject({ name: '网格视图E3', view_type: 'grid' })
|
||||
})
|
||||
|
||||
test('E4: clicking a disabled type does not open the name modal or fire POST', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'E4-disabled-click')
|
||||
|
||||
let postFired = false
|
||||
await page.route('**/api/v1/bitable/tables/*/views', (route) => {
|
||||
if (route.request().method() === 'POST') {
|
||||
postFired = true
|
||||
return route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ success: true, view: { id: 'x', table_id: 'x', name: 'x', view_type: 'kanban', config: {}, created_at: '' } }),
|
||||
})
|
||||
}
|
||||
return route.continue()
|
||||
})
|
||||
|
||||
const items = await openViewTypeDropdown(page)
|
||||
// Click the disabled "看板" item — antd will not emit a click event for it.
|
||||
await items.filter({ hasText: '看板' }).click({ force: true })
|
||||
|
||||
// The name modal must NOT appear, and no POST /views must have fired.
|
||||
await expect(page.getByPlaceholder('请输入视图名称')).not.toBeVisible({ timeout: 1_500 })
|
||||
expect(postFired).toBe(false)
|
||||
})
|
||||
|
||||
test('E5: created grid view is added to the view tab list (round-trip contract)', async ({ page }) => {
|
||||
await openFileDetailWithTable(page, 'E5-roundtrip')
|
||||
|
||||
await page.route('**/api/v1/bitable/tables/*/views', (route) => {
|
||||
if (route.request().method() !== 'POST') return route.continue()
|
||||
const body = route.request().postDataJSON() ?? {}
|
||||
return route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
success: true,
|
||||
view: {
|
||||
id: 'view-e5-mock',
|
||||
table_id: 'tbl-e5',
|
||||
name: body.name ?? 'E5视图',
|
||||
view_type: body.view_type ?? 'grid',
|
||||
config: {},
|
||||
created_at: new Date().toISOString(),
|
||||
},
|
||||
}),
|
||||
})
|
||||
})
|
||||
|
||||
const items = await openViewTypeDropdown(page)
|
||||
await items.filter({ hasText: '表格' }).click()
|
||||
|
||||
const nameInput = page.getByPlaceholder('请输入视图名称')
|
||||
await expect(nameInput).toBeVisible({ timeout: 5_000 })
|
||||
await nameInput.fill('E5网格视图')
|
||||
await page.getByRole('button', { name: /确\s*定/ }).click()
|
||||
|
||||
// The mock response is pushed into the store; a new tab with the view
|
||||
// name appears in the ViewSwitcher tabs.
|
||||
await expect(page.locator('.ant-tabs-tab', { hasText: 'E5网格视图' })).toBeVisible({
|
||||
timeout: 5_000,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@
|
|||
"markdown-it": "^14.2.0",
|
||||
"pinia": "^2.2.0",
|
||||
"vue": "^3.5.0",
|
||||
"vue-router": "^4.4.0"
|
||||
"vue-router": "^4.4.0",
|
||||
"vxe-table": "^4.19.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.59.0",
|
||||
|
|
@ -1699,6 +1700,19 @@
|
|||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vxe-ui/core": {
|
||||
"version": "4.4.15",
|
||||
"resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.4.15.tgz",
|
||||
"integrity": "sha512-DPNPnjSnypg8XO44ApcHw/nJNNJUYF85k1IVFJU8nyKj3qvYBFP96m4ZLOhc6tlMmMJWmhbzXCWZOb37dUNctQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dom-zindex": "^1.0.7",
|
||||
"xe-utils": "^4.0.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.17.0",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.17.0.tgz",
|
||||
|
|
@ -2045,6 +2059,12 @@
|
|||
"integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-zindex": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.7.tgz",
|
||||
"integrity": "sha512-cKU/h8v8IPBgdZOTPbPmq3Ib+Ac5C+kKoh9I4LbGR9BM3GwbmB16KYWKJcj5M2BavnA66EbgYzxYDLd1IytnlQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.4.10",
|
||||
"resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-3.4.10.tgz",
|
||||
|
|
@ -3320,6 +3340,24 @@
|
|||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vxe-pc-ui": {
|
||||
"version": "4.15.21",
|
||||
"resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.15.21.tgz",
|
||||
"integrity": "sha512-8uCUelYE2OyhKOUMCZ9DffRQvIuTpEYm3LsiwQ/XiKNq4qOdFY8RlBEzGY8MnZnpm+kKDXvynFFS59inQT42Rg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vxe-ui/core": "^4.4.15"
|
||||
}
|
||||
},
|
||||
"node_modules/vxe-table": {
|
||||
"version": "4.19.23",
|
||||
"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.19.23.tgz",
|
||||
"integrity": "sha512-kg6nzIkGCea4otjoxzWKVdcshUa00eswSlVZgo0cNIxpmmOMMIdmcY34IzJXl+UyYd/rvFGVjRidy/R97yaqVA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vxe-pc-ui": "^4.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
|
||||
|
|
@ -3373,6 +3411,12 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/xe-utils": {
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-4.0.10.tgz",
|
||||
"integrity": "sha512-HLj9r+EjCh6e0J1vfZhDKPwaTtONMl0GNK0OYR6b3KU4QHHpOXNFzEhgwe35KFy8dqsK2sm2WFRzHRafqkYgMA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
"markdown-it": "^14.2.0",
|
||||
"pinia": "^2.2.0",
|
||||
"vue": "^3.5.0",
|
||||
"vue-router": "^4.4.0"
|
||||
"vue-router": "^4.4.0",
|
||||
"vxe-table": "^4.19.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.59.0",
|
||||
|
|
|
|||
|
|
@ -383,6 +383,14 @@ class BitableApiClient extends BaseApiClient {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a view (U6: R15a). Returns 204 No Content on success.
|
||||
* The last view of a table cannot be deleted (backend returns 409).
|
||||
*/
|
||||
async deleteView(viewId: string): Promise<void> {
|
||||
await this.request(`/views/${viewId}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
// ── File upload (U6: attachment & image) ──────────────
|
||||
|
||||
async uploadFile(
|
||||
|
|
|
|||
|
|
@ -45,10 +45,10 @@ function formatSize(bytes: number): string {
|
|||
.attachment-cell__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--color-primary, #1a1a1a);
|
||||
gap: var(--bitable-spacing-xs);
|
||||
color: var(--bitable-color-primary);
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-size: var(--bitable-font-xs);
|
||||
}
|
||||
|
||||
.attachment-cell__link:hover {
|
||||
|
|
@ -63,11 +63,11 @@ function formatSize(bytes: number): string {
|
|||
}
|
||||
|
||||
.attachment-cell__size {
|
||||
color: var(--text-secondary, #8c8c8c);
|
||||
color: var(--bitable-color-text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.attachment-cell__empty {
|
||||
color: var(--text-placeholder, #bfbfbf);
|
||||
color: var(--bitable-color-text-placeholder);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,42 @@
|
|||
<template>
|
||||
<div class="bitable-grid-scope">
|
||||
<!-- U5: Unified section rendering — grouping disabled produces a single
|
||||
data section (node=null); grouping enabled produces interleaved
|
||||
header + data sections. The vxe-grid declaration + all slots are
|
||||
written ONCE here (no duplication). -->
|
||||
<template v-for="(section, idx) in groupSections" :key="`sec_${idx}`">
|
||||
<!-- Group header (grouping mode only) -->
|
||||
<div
|
||||
v-if="section.type === 'header'"
|
||||
class="bitable-grid-scope__group-header"
|
||||
:style="{ paddingLeft: `${section.node.depth * 24 + 8}px` }"
|
||||
@click="toggleGroup(section.node)"
|
||||
>
|
||||
<span class="bitable-grid-scope__caret">{{ isCollapsed(section.node) ? '▸' : '▾' }}</span>
|
||||
<span class="bitable-grid-scope__group-key">{{ section.node.key || '(空)' }}</span>
|
||||
<span class="bitable-grid-scope__group-count">{{ section.node.records.length }} 条</span>
|
||||
<template v-for="(agg, fid) in section.node.aggregations" :key="fid">
|
||||
<span class="bitable-grid-scope__group-agg">
|
||||
{{ fieldName(String(fid)) }}：<template v-if="agg.sum != null">合计 {{ formatNum(agg.sum) }}</template><template v-if="agg.avg != null"> · 均值 {{ formatNum(agg.avg) }}</template>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Data section: vxe-grid for this group's records (or all records) -->
|
||||
<div
|
||||
v-else
|
||||
v-show="section.node === null || !isCollapsed(section.node)"
|
||||
class="bitable-grid-scope__group-grid"
|
||||
>
|
||||
<vxe-grid
|
||||
ref="gridRef"
|
||||
:data="rows"
|
||||
:ref="(el: unknown) => onGridRef(idx, el)"
|
||||
:data="section.node ? rowsForGroup(section.node) : rows"
|
||||
:columns="gridColumns"
|
||||
:height="height"
|
||||
:height="groupingEnabled ? 'auto' : height"
|
||||
:loading="loading"
|
||||
:row-config="{ keyField: '_recordId' }"
|
||||
:row-config="rowConfig"
|
||||
:column-config="{ resizable: true }"
|
||||
:virtual-y-config="{ enabled: true, gt: 60 }"
|
||||
:virtual-y-config="{ enabled: !groupingEnabled, gt: 60 }"
|
||||
:virtual-x-config="{ enabled: true, gt: 20 }"
|
||||
:edit-config="{
|
||||
trigger: 'click',
|
||||
|
|
@ -17,6 +45,7 @@
|
|||
autoClear: false,
|
||||
}"
|
||||
@edit-closed="onEditClosed"
|
||||
@cell-click="onCellClick"
|
||||
>
|
||||
<template #empty>
|
||||
<a-empty :description="emptyText" />
|
||||
|
|
@ -36,18 +65,35 @@
|
|||
:images="(row[f.id] as IAttachmentMeta[] | null | undefined)"
|
||||
/>
|
||||
</template>
|
||||
<!-- Column header dropdown menus (U4) -->
|
||||
<!-- Column header dropdown menus (U4) + inline field config (U2) -->
|
||||
<template
|
||||
v-for="f in fields"
|
||||
:key="`hdr_${f.id}`"
|
||||
#[`header_${f.id}`]
|
||||
>
|
||||
<a-popover
|
||||
:open="editingFieldId === f.id"
|
||||
:trigger="[]"
|
||||
placement="bottomLeft"
|
||||
overlay-class-name="bitable-inline-config-popover"
|
||||
:overlay-style="{ width: '340px' }"
|
||||
>
|
||||
<ColumnHeaderMenu
|
||||
:field="f"
|
||||
@edit="emit('config-field', $event)"
|
||||
@edit-inline="startInlineEdit(f.id)"
|
||||
@open-batch-panel="emit('config-field', $event)"
|
||||
@hide="emit('hide-field', $event)"
|
||||
@delete="emit('delete-field', $event)"
|
||||
/>
|
||||
<template #content>
|
||||
<InlineFieldConfigurator
|
||||
v-if="editingFieldId === f.id"
|
||||
:field="f"
|
||||
@saved="onInlineSaved"
|
||||
@cancel="onInlineCancel"
|
||||
/>
|
||||
</template>
|
||||
</a-popover>
|
||||
</template>
|
||||
<!-- Select / Multiselect edit slots (U5) -->
|
||||
<template
|
||||
|
|
@ -82,12 +128,24 @@
|
|||
</template>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- U3: Record detail drawer — opened by clicking the row's seq cell.
|
||||
Rendered here so the grid is self-contained; reads state from the
|
||||
bitable store (currentRecordId / currentRecord / fields). -->
|
||||
<RecordDetailDrawer
|
||||
:record-id="store.currentRecordId"
|
||||
:open="!!store.currentRecordId"
|
||||
@close="store.closeRecordDetail"
|
||||
@retry="onDrawerRetry"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { VxeGrid } from 'vxe-table'
|
||||
import { Empty as AEmpty } from 'ant-design-vue'
|
||||
import { Empty as AEmpty, Popover as APopover } from 'ant-design-vue'
|
||||
import { PlusOutlined } from '@ant-design/icons-vue'
|
||||
import type { VxeGridProps, VxeGridEvents } from 'vxe-table'
|
||||
import type {
|
||||
|
|
@ -96,12 +154,23 @@ import type {
|
|||
IAttachmentMeta,
|
||||
FieldType,
|
||||
} from '@/api/bitable'
|
||||
import { useBitableStore } from '@/stores/bitable'
|
||||
import AttachmentCell from './AttachmentCell.vue'
|
||||
import ImageCell from './ImageCell.vue'
|
||||
import ColumnHeaderMenu from './ColumnHeaderMenu.vue'
|
||||
import SelectCellEditor from './SelectCellEditor.vue'
|
||||
import SelectDisplay from './SelectDisplay.vue'
|
||||
import InlineFieldConfigurator from './InlineFieldConfigurator.vue'
|
||||
import RecordDetailDrawer from './RecordDetailDrawer.vue'
|
||||
import type { ISelectOption } from './SelectCellEditor.vue'
|
||||
import {
|
||||
computeGroupingLevels,
|
||||
matchConditionalFormatRule,
|
||||
type GroupByItem,
|
||||
type ConditionalFormatRule,
|
||||
type GroupNode,
|
||||
type ViewConfigU5,
|
||||
} from '@/helpers/groupingRulesUtils'
|
||||
|
||||
type GridRow = Record<string, unknown> & { _rowId: string; _recordId: string }
|
||||
type GridColumn = NonNullable<VxeGridProps['columns']>[number]
|
||||
|
|
@ -129,7 +198,182 @@ const emit = defineEmits<{
|
|||
(e: 'delete-field', field: IBitableField): void
|
||||
}>()
|
||||
|
||||
const gridRef = ref<InstanceType<typeof VxeGrid> | null>(null)
|
||||
// Track vxe-grid instances across sections (for refreshColumn on inline save).
|
||||
// ponytail: Map keyed by section idx — simplest stable approach for a v-for.
|
||||
// Ceiling: if sections reorder (e.g. via sort), idx-based keys may stale;
|
||||
// upgrade path: key by groupNodeKey instead.
|
||||
const gridInstanceMap = new Map<number, InstanceType<typeof VxeGrid>>()
|
||||
function onGridRef(idx: number, el: unknown): void {
|
||||
if (el) {
|
||||
gridInstanceMap.set(idx, el as InstanceType<typeof VxeGrid>)
|
||||
} else {
|
||||
gridInstanceMap.delete(idx)
|
||||
}
|
||||
}
|
||||
|
||||
// U3: bitable store — used for the record detail drawer (currentRecordId) AND
|
||||
// U5: reading the current view's group_by + conditional_formatting config.
|
||||
// ponytail: reading view config from the store avoids adding a new prop.
|
||||
// Ceiling: BitableGrid is coupled to store.currentView shape; if reused
|
||||
// outside the bitable detail view, pass viewConfig as a prop instead.
|
||||
const store = useBitableStore()
|
||||
|
||||
// ── U5: Grouping + Conditional Formatting ──────────────────────────────────
|
||||
|
||||
const viewConfig = computed<ViewConfigU5>(() => {
|
||||
const config = store.currentView?.config as ViewConfigU5 | undefined
|
||||
return config ?? {}
|
||||
})
|
||||
|
||||
const groupByItems = computed<GroupByItem[]>(() => {
|
||||
const raw = viewConfig.value.group_by
|
||||
if (!Array.isArray(raw)) return []
|
||||
return raw as GroupByItem[]
|
||||
})
|
||||
|
||||
const cfRules = computed<ConditionalFormatRule[]>(() => {
|
||||
const raw = viewConfig.value.conditional_formatting
|
||||
if (!Array.isArray(raw)) return []
|
||||
return raw as ConditionalFormatRule[]
|
||||
})
|
||||
|
||||
const groupingEnabled = computed(
|
||||
() => groupByItems.value.length > 0 && props.records.length > 0,
|
||||
)
|
||||
|
||||
// Build the nested group tree. Uses store.fields (all fields, not just
|
||||
// visible ones) so number-field aggregations work even when the field is
|
||||
// hidden by the view's hidden_fields config.
|
||||
const groupTree = computed<GroupNode[]>(() => {
|
||||
if (!groupingEnabled.value) return []
|
||||
return computeGroupingLevels(props.records, groupByItems.value, store.fields)
|
||||
})
|
||||
|
||||
type GroupSection =
|
||||
| { type: 'header'; node: GroupNode }
|
||||
| { type: 'data'; node: GroupNode | null }
|
||||
|
||||
// Flatten the group tree into header + data sections. When grouping is
|
||||
// disabled, returns a single data section with node=null (the grid renders
|
||||
// all records in one block, preserving the original non-grouped UX).
|
||||
const groupSections = computed<GroupSection[]>(() => {
|
||||
if (!groupingEnabled.value) {
|
||||
return [{ type: 'data', node: null }]
|
||||
}
|
||||
return flattenGroupTree(groupTree.value)
|
||||
})
|
||||
|
||||
function flattenGroupTree(nodes: GroupNode[]): GroupSection[] {
|
||||
const result: GroupSection[] = []
|
||||
for (const node of nodes) {
|
||||
result.push({ type: 'header', node })
|
||||
if (node.children.length > 0) {
|
||||
// Intermediate node: recurse into children (no direct data grid).
|
||||
result.push(...flattenGroupTree(node.children))
|
||||
} else {
|
||||
// Leaf node: data section with this group's records.
|
||||
result.push({ type: 'data', node })
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
// Collapse state — keyed by `${depth}:${fieldId}:${key}` for tree-wide uniqueness.
|
||||
// Default expanded (empty Set = nothing collapsed).
|
||||
const collapsedKeys = ref<Set<string>>(new Set())
|
||||
|
||||
function groupNodeKey(node: GroupNode): string {
|
||||
return `${node.depth}:${node.fieldId}:${node.key}`
|
||||
}
|
||||
|
||||
function isCollapsed(node: GroupNode): boolean {
|
||||
return collapsedKeys.value.has(groupNodeKey(node))
|
||||
}
|
||||
|
||||
function toggleGroup(node: GroupNode): void {
|
||||
const key = groupNodeKey(node)
|
||||
const next = new Set(collapsedKeys.value)
|
||||
if (next.has(key)) {
|
||||
next.delete(key)
|
||||
} else {
|
||||
next.add(key)
|
||||
}
|
||||
collapsedKeys.value = next
|
||||
}
|
||||
|
||||
// Map a group's records to grid rows (same shape as the `rows` computed).
|
||||
function rowsForGroup(node: GroupNode): GridRow[] {
|
||||
return node.records.map((r) => ({
|
||||
_rowId: r.id,
|
||||
_recordId: r.id,
|
||||
...r.values,
|
||||
}))
|
||||
}
|
||||
|
||||
// CF row class — first matching rule colors the entire row.
|
||||
// Group headers are separate <div> elements (not vxe-grid rows), so they
|
||||
// are naturally unaffected by CF (组合态约定: 条件格式仅作用于数据单元格).
|
||||
function rowClassName({ row }: { row: unknown; rowIndex: number }): string {
|
||||
if (cfRules.value.length === 0) return ''
|
||||
const gridRow = row as GridRow
|
||||
for (const rule of cfRules.value) {
|
||||
if (!rule.enabled) continue
|
||||
const value = gridRow[rule.field_id]
|
||||
if (matchConditionalFormatRule(value, rule)) {
|
||||
const classes = [`bitable-cf--${rule.color_key}`]
|
||||
if (rule.bold) classes.push('bitable-cf--bold')
|
||||
return classes.join(' ')
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// row-config object — passed to vxe-grid as :row-config. Includes the CF
|
||||
// className function so vxe-table calls it for every data row.
|
||||
const rowConfig = computed(() => ({
|
||||
keyField: '_recordId',
|
||||
className: rowClassName as unknown as string,
|
||||
}))
|
||||
|
||||
function fieldName(fieldId: string): string {
|
||||
return store.fields.find((f) => f.id === fieldId)?.name ?? fieldId
|
||||
}
|
||||
|
||||
function formatNum(n: number): string {
|
||||
return Number.isInteger(n) ? String(n) : n.toFixed(2)
|
||||
}
|
||||
|
||||
// ── End U5 ─────────────────────────────────────────────────────────────────
|
||||
|
||||
// U3: clicking the row's seq cell (#) opens the record detail drawer.
|
||||
const onCellClick: VxeGridEvents.CellClick = (params) => {
|
||||
const { row, column } = params
|
||||
if (!column || column.type !== 'seq') return
|
||||
const recordId = (row as GridRow)._recordId
|
||||
if (!recordId) return
|
||||
store.openRecordDetail(recordId)
|
||||
}
|
||||
|
||||
function onDrawerRetry(recordId: string): void {
|
||||
store.fetchRecordDetail(recordId)
|
||||
}
|
||||
|
||||
// U2: inline field config — only one column edits at a time.
|
||||
const editingFieldId = ref<string | null>(null)
|
||||
|
||||
function startInlineEdit(fieldId: string): void {
|
||||
editingFieldId.value = fieldId
|
||||
}
|
||||
|
||||
function onInlineSaved(_field: IBitableField): void {
|
||||
editingFieldId.value = null
|
||||
// Refresh all grid instances so a type change picks up the new editRender.
|
||||
gridInstanceMap.forEach((g) => g?.refreshColumn?.())
|
||||
}
|
||||
|
||||
function onInlineCancel(): void {
|
||||
editingFieldId.value = null
|
||||
}
|
||||
|
||||
// Fields that use custom slot renderers (attachment/image)
|
||||
const attachmentFields = computed(() =>
|
||||
|
|
@ -276,9 +520,11 @@ const onEditClosed: VxeGridEvents.EditClosed = (params) => {
|
|||
})
|
||||
}
|
||||
|
||||
// Expose grid ref for parent (e.g. to refresh)
|
||||
// Expose refresh for parent (refreshes all grid instances)
|
||||
defineExpose({
|
||||
refresh: () => gridRef.value?.refreshColumn(),
|
||||
refresh: () => {
|
||||
gridInstanceMap.forEach((g) => g?.refreshColumn?.())
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -292,35 +538,153 @@ defineExpose({
|
|||
/* KTD10: CSS isolation — all vxe-table style overrides scoped to
|
||||
.bitable-grid-scope. Use :deep() to reach vxe-table internals. */
|
||||
.bitable-grid-scope :deep(.vxe-table) {
|
||||
font-size: 13px;
|
||||
font-size: var(--bitable-font-sm);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.vxe-header--column) {
|
||||
background: var(--bg-secondary, #fafafa);
|
||||
background: var(--bitable-color-bg-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.vxe-body--column.is--dirty) {
|
||||
background: var(--bg-tertiary, #f3f4f6);
|
||||
background: var(--bitable-color-bg-tertiary);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.vxe-cell--dirty) {
|
||||
color: var(--color-primary, #1a1a1a);
|
||||
color: var(--bitable-color-primary);
|
||||
}
|
||||
|
||||
/* U3: seq column (#) is the row-detail affordance — pointer cursor signals
|
||||
clickability without a dedicated expand icon. */
|
||||
.bitable-grid-scope :deep(.vxe-header--column.col--seq),
|
||||
.bitable-grid-scope :deep(.vxe-body--column.col--seq) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bitable-grid-scope__add-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary, #8c8c8c);
|
||||
font-size: 12px;
|
||||
padding: 0 8px;
|
||||
color: var(--bitable-color-text-secondary);
|
||||
font-size: var(--bitable-font-xs);
|
||||
padding: 0 var(--bitable-spacing-sm);
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bitable-grid-scope__add-col:hover {
|
||||
color: var(--color-primary, #1a1a1a);
|
||||
color: var(--bitable-color-primary);
|
||||
}
|
||||
|
||||
/* ── U5: Grouping ─────────────────────────────────────────────────────── */
|
||||
|
||||
.bitable-grid-scope__group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
padding: var(--bitable-spacing-xs) var(--bitable-spacing-sm);
|
||||
background: var(--bitable-color-bg-secondary);
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: var(--bitable-font-sm);
|
||||
color: var(--bitable-color-text);
|
||||
}
|
||||
|
||||
.bitable-grid-scope__group-header:hover {
|
||||
background: var(--bitable-color-bg-tertiary);
|
||||
}
|
||||
|
||||
.bitable-grid-scope__caret {
|
||||
display: inline-flex;
|
||||
width: 16px;
|
||||
justify-content: center;
|
||||
color: var(--bitable-color-text-secondary);
|
||||
font-size: var(--bitable-font-sm);
|
||||
}
|
||||
|
||||
.bitable-grid-scope__group-key {
|
||||
font-weight: 600;
|
||||
color: var(--bitable-color-text);
|
||||
}
|
||||
|
||||
.bitable-grid-scope__group-count {
|
||||
color: var(--bitable-color-text-secondary);
|
||||
font-size: var(--bitable-font-xs);
|
||||
}
|
||||
|
||||
.bitable-grid-scope__group-agg {
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
font-size: var(--bitable-font-xs);
|
||||
margin-left: var(--bitable-spacing-sm);
|
||||
}
|
||||
|
||||
.bitable-grid-scope__group-grid {
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
}
|
||||
|
||||
/* ── U5: Conditional Formatting (8 colors + bold) ─────────────────────── */
|
||||
/* Row-level classes applied via row-config.className. Group headers are
|
||||
separate <div> elements, so they're naturally unaffected by CF. */
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--red) .vxe-body--column {
|
||||
background: var(--bitable-cf-red-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--red) .vxe-cell {
|
||||
color: var(--bitable-cf-red-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--orange) .vxe-body--column {
|
||||
background: var(--bitable-cf-orange-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--orange) .vxe-cell {
|
||||
color: var(--bitable-cf-orange-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--yellow) .vxe-body--column {
|
||||
background: var(--bitable-cf-yellow-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--yellow) .vxe-cell {
|
||||
color: var(--bitable-cf-yellow-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--green) .vxe-body--column {
|
||||
background: var(--bitable-cf-green-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--green) .vxe-cell {
|
||||
color: var(--bitable-cf-green-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--blue) .vxe-body--column {
|
||||
background: var(--bitable-cf-blue-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--blue) .vxe-cell {
|
||||
color: var(--bitable-cf-blue-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--purple) .vxe-body--column {
|
||||
background: var(--bitable-cf-purple-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--purple) .vxe-cell {
|
||||
color: var(--bitable-cf-purple-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--gray) .vxe-body--column {
|
||||
background: var(--bitable-cf-gray-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--gray) .vxe-cell {
|
||||
color: var(--bitable-cf-gray-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--neutral) .vxe-body--column {
|
||||
background: var(--bitable-cf-neutral-bg);
|
||||
}
|
||||
.bitable-grid-scope :deep(.bitable-cf--neutral) .vxe-cell {
|
||||
color: var(--bitable-cf-neutral-fg);
|
||||
}
|
||||
|
||||
.bitable-grid-scope :deep(.bitable-cf--bold) .vxe-cell {
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,26 @@
|
|||
<template>
|
||||
<a-dropdown :trigger="['click']" placement="bottomLeft">
|
||||
<div class="column-header-menu" @click.stop>
|
||||
<a-dropdown v-model:open="open" :trigger="['click']" placement="bottomLeft">
|
||||
<div
|
||||
class="column-header-menu"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:aria-label="`字段 ${field.name} 菜单`"
|
||||
:aria-expanded="open"
|
||||
@click.stop
|
||||
@keydown.enter.prevent="open = true"
|
||||
@keydown.space.prevent="open = true"
|
||||
>
|
||||
<span class="column-header-menu__title">{{ field.name }}</span>
|
||||
<DownOutlined class="column-header-menu__arrow" />
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="edit">
|
||||
<a-menu-item key="edit-inline">
|
||||
<EditOutlined /> 编辑字段
|
||||
</a-menu-item>
|
||||
<a-menu-item key="open-batch-panel">
|
||||
<AppstoreOutlined /> 批量管理
|
||||
</a-menu-item>
|
||||
<a-menu-item key="hide">
|
||||
<EyeInvisibleOutlined /> 隐藏字段
|
||||
</a-menu-item>
|
||||
|
|
@ -22,11 +34,13 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
EyeInvisibleOutlined,
|
||||
DeleteOutlined,
|
||||
AppstoreOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import type { IBitableField } from '@/api/bitable'
|
||||
|
||||
|
|
@ -35,15 +49,26 @@ const props = defineProps<{
|
|||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'edit', field: IBitableField): void
|
||||
(e: 'edit-inline', field: IBitableField): void
|
||||
(e: 'open-batch-panel', field: IBitableField): void
|
||||
(e: 'hide', fieldId: string): void
|
||||
(e: 'delete', field: IBitableField): void
|
||||
}>()
|
||||
|
||||
// Controlled open state so Enter/Space on the focusable header opens the menu
|
||||
// (U2 scenario 5: Tab to header -> Enter opens menu).
|
||||
const open = ref(false)
|
||||
|
||||
function handleMenuClick({ key }: { key: string }): void {
|
||||
// Close the menu immediately after a choice (a-menu does not auto-close on
|
||||
// programmatic emit when controlled via v-model:open).
|
||||
open.value = false
|
||||
switch (key) {
|
||||
case 'edit':
|
||||
emit('edit', props.field)
|
||||
case 'edit-inline':
|
||||
emit('edit-inline', props.field)
|
||||
break
|
||||
case 'open-batch-panel':
|
||||
emit('open-batch-panel', props.field)
|
||||
break
|
||||
case 'hide':
|
||||
emit('hide', props.field.id)
|
||||
|
|
@ -59,11 +84,13 @@ function handleMenuClick({ key }: { key: string }): void {
|
|||
.column-header-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
border-radius: var(--bitable-radius-sm);
|
||||
}
|
||||
|
||||
.column-header-menu__title {
|
||||
|
|
@ -72,12 +99,12 @@ function handleMenuClick({ key }: { key: string }): void {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-size: var(--bitable-font-sm);
|
||||
}
|
||||
|
||||
.column-header-menu__arrow {
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary, #8c8c8c);
|
||||
color: var(--bitable-color-text-secondary);
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s;
|
||||
|
|
@ -86,4 +113,8 @@ function handleMenuClick({ key }: { key: string }): void {
|
|||
.column-header-menu:hover .column-header-menu__arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.column-header-menu:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--bitable-color-primary) inset;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<div class="cf-editor">
|
||||
<!-- Empty state (Open Question P2) -->
|
||||
<a-empty
|
||||
v-if="modelValue.length === 0"
|
||||
description="暂无规则（点击添加规则开始着色）"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(rule, idx) in modelValue"
|
||||
:key="idx"
|
||||
class="cf-editor__rule"
|
||||
:class="{ 'cf-editor__rule--disabled': !rule.enabled }"
|
||||
>
|
||||
<!-- Enable/disable toggle (left rail) -->
|
||||
<a-switch
|
||||
:checked="rule.enabled"
|
||||
size="small"
|
||||
@update:checked="onFieldChange(idx, { enabled: Boolean($event) })"
|
||||
/>
|
||||
|
||||
<!-- Field select -->
|
||||
<a-select
|
||||
:value="rule.field_id"
|
||||
size="small"
|
||||
placeholder="字段"
|
||||
style="width: 120px"
|
||||
@update:value="onFieldChange(idx, { field_id: String($event) })"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="f in fields"
|
||||
:key="f.id"
|
||||
:value="f.id"
|
||||
>
|
||||
{{ f.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<!-- Operator select -->
|
||||
<a-select
|
||||
:value="rule.operator"
|
||||
size="small"
|
||||
placeholder="运算符"
|
||||
style="width: 100px"
|
||||
@update:value="onOperatorChange(idx, String($event))"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="op in ALL_OPERATORS"
|
||||
:key="op"
|
||||
:value="op"
|
||||
>
|
||||
{{ OPERATOR_LABELS[op] }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<!-- Value input (hidden for is-empty) -->
|
||||
<a-input
|
||||
v-if="rule.operator !== 'is-empty'"
|
||||
:value="rule.value"
|
||||
size="small"
|
||||
:placeholder="valuePlaceholder(rule.operator)"
|
||||
style="width: 120px"
|
||||
@update:value="onFieldChange(idx, { value: String($event) })"
|
||||
/>
|
||||
|
||||
<!-- Color select (with swatch) -->
|
||||
<a-select
|
||||
:value="rule.color_key"
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
@update:value="onColorChange(idx, String($event))"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="ck in ALL_COLOR_KEYS"
|
||||
:key="ck"
|
||||
:value="ck"
|
||||
>
|
||||
<span class="cf-editor__color-option">
|
||||
<span
|
||||
class="cf-editor__color-swatch"
|
||||
:style="{ background: colorKeyToBgCssVar(ck), color: colorKeyToFgCssVar(ck) }"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span>{{ COLOR_KEY_LABELS[ck] }}</span>
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<!-- Bold toggle (WCAG 1.4.1 — default on) -->
|
||||
<a-tooltip title="同时加粗文本（WCAG 1.4.1 色盲可感知）">
|
||||
<a-button
|
||||
size="small"
|
||||
:type="rule.bold ? 'primary' : 'default'"
|
||||
:icon="h(BoldOutlined)"
|
||||
@click="onFieldChange(idx, { bold: !rule.bold })"
|
||||
/>
|
||||
</a-tooltip>
|
||||
|
||||
<!-- Delete rule -->
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
:icon="h(DeleteOutlined)"
|
||||
@click="removeRule(idx)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add rule + color legend -->
|
||||
<div class="cf-editor__footer">
|
||||
<a-button
|
||||
size="small"
|
||||
type="dashed"
|
||||
:icon="h(PlusOutlined)"
|
||||
@click="addRule"
|
||||
>
|
||||
添加规则
|
||||
</a-button>
|
||||
<span class="cf-editor__legend">
|
||||
规则按顺序优先（首条匹配生效）
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
import {
|
||||
Select as ASelect,
|
||||
Input as AInput,
|
||||
Button as AButton,
|
||||
Switch as ASwitch,
|
||||
Empty as AEmpty,
|
||||
Tooltip as ATooltip,
|
||||
} from 'ant-design-vue'
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
BoldOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import type { IBitableField } from '@/api/bitable'
|
||||
import {
|
||||
ALL_COLOR_KEYS,
|
||||
ALL_OPERATORS,
|
||||
COLOR_KEY_LABELS,
|
||||
OPERATOR_LABELS,
|
||||
colorKeyToBgCssVar,
|
||||
colorKeyToFgCssVar,
|
||||
type ColorKey,
|
||||
type ConditionalFormatRule,
|
||||
type ConditionalOperator,
|
||||
} from '@/helpers/groupingRulesUtils'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ConditionalFormatRule[]
|
||||
fields: IBitableField[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: ConditionalFormatRule[]): void
|
||||
}>()
|
||||
|
||||
function emitUpdate(rules: ConditionalFormatRule[]): void {
|
||||
emit('update:modelValue', rules)
|
||||
}
|
||||
|
||||
function addRule(): void {
|
||||
// Default new rule: equals / red / bold=true / enabled=true on first field.
|
||||
const firstField = props.fields[0]
|
||||
const newRule: ConditionalFormatRule = {
|
||||
field_id: firstField?.id ?? '',
|
||||
operator: 'equals',
|
||||
value: '',
|
||||
color_key: 'red',
|
||||
bold: true,
|
||||
enabled: true,
|
||||
}
|
||||
emitUpdate([...props.modelValue, newRule])
|
||||
}
|
||||
|
||||
function removeRule(idx: number): void {
|
||||
emitUpdate(props.modelValue.filter((_, i) => i !== idx))
|
||||
}
|
||||
|
||||
function onFieldChange(
|
||||
idx: number,
|
||||
patch: Partial<ConditionalFormatRule>,
|
||||
): void {
|
||||
const next = props.modelValue.map((r, i) => (i === idx ? { ...r, ...patch } : r))
|
||||
emitUpdate(next)
|
||||
}
|
||||
|
||||
function onOperatorChange(idx: number, op: string): void {
|
||||
// Cast through unknown because the select emits a generic string.
|
||||
const operator = op as ConditionalOperator
|
||||
onFieldChange(idx, { operator })
|
||||
}
|
||||
|
||||
function onColorChange(idx: number, ck: string): void {
|
||||
const colorKey = ck as ColorKey
|
||||
onFieldChange(idx, { color_key: colorKey })
|
||||
}
|
||||
|
||||
function valuePlaceholder(operator: ConditionalOperator): string {
|
||||
if (operator === 'between') return 'min,max'
|
||||
return '值'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cf-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
}
|
||||
|
||||
.cf-editor__rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
flex-wrap: wrap;
|
||||
padding: var(--bitable-spacing-xs) 0;
|
||||
border-bottom: 1px solid var(--bitable-color-border-split);
|
||||
}
|
||||
|
||||
.cf-editor__rule--disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.cf-editor__color-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
}
|
||||
|
||||
.cf-editor__color-swatch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--bitable-radius-sm);
|
||||
font-weight: 700;
|
||||
font-size: var(--bitable-font-xs);
|
||||
/* Background + color set inline from tokens via colorKeyTo{Bg,Fg}CssVar */
|
||||
}
|
||||
|
||||
.cf-editor__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-md);
|
||||
margin-top: var(--bitable-spacing-sm);
|
||||
}
|
||||
|
||||
.cf-editor__legend {
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<a-alert
|
||||
class="bitable-error-state"
|
||||
type="error"
|
||||
show-icon
|
||||
:message="message"
|
||||
:description="description"
|
||||
role="alert"
|
||||
>
|
||||
<template v-if="$slots.action || retryable" #action>
|
||||
<slot name="action">
|
||||
<a-button size="small" :loading="retrying" @click="emit('retry')">
|
||||
重试
|
||||
</a-button>
|
||||
</slot>
|
||||
</template>
|
||||
</a-alert>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Alert as AAlert, Button as AButton } from 'ant-design-vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
message?: string
|
||||
description?: string
|
||||
retryable?: boolean
|
||||
retrying?: boolean
|
||||
}>(),
|
||||
{
|
||||
message: '加载失败',
|
||||
description: '请检查网络后重试',
|
||||
retryable: true,
|
||||
retrying: false,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'retry'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bitable-error-state {
|
||||
margin: var(--bitable-spacing-md, 12px) 0;
|
||||
border-radius: var(--bitable-radius-md, 6px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,6 +6,16 @@
|
|||
:width="480"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- U2: positioning hint — single-field edits now happen inline via the
|
||||
column header menu; this drawer remains the batch-management entry. -->
|
||||
<a-alert
|
||||
class="field-manage-panel__hint"
|
||||
type="info"
|
||||
show-icon
|
||||
message="批量管理入口"
|
||||
description="单字段编辑请使用列头菜单中的「编辑字段」。此处用于批量管理字段。"
|
||||
/>
|
||||
|
||||
<!-- Field list -->
|
||||
<div class="field-manage-panel__list">
|
||||
<div
|
||||
|
|
@ -68,7 +78,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, h } from 'vue'
|
||||
import { Modal as AModal, Drawer as ADrawer, Button as AButton, Tag as ATag, Empty as AEmpty } from 'ant-design-vue'
|
||||
import { Modal as AModal, Drawer as ADrawer, Button as AButton, Tag as ATag, Empty as AEmpty, Alert as AAlert } from 'ant-design-vue'
|
||||
import { PlusOutlined } from '@ant-design/icons-vue'
|
||||
import type { IBitableField, FieldType } from '@/api/bitable'
|
||||
import { useBitableStore } from '@/stores/bitable'
|
||||
|
|
@ -197,6 +207,11 @@ function typeColor(t: FieldType): string {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-manage-panel__hint {
|
||||
margin-bottom: var(--bitable-spacing-md);
|
||||
border-radius: var(--bitable-radius-md);
|
||||
}
|
||||
|
||||
.field-manage-panel__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<component :is="iconComponent" class="field-type-icon" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, type Component } from 'vue'
|
||||
import {
|
||||
FileTextOutlined,
|
||||
NumberOutlined,
|
||||
CalendarOutlined,
|
||||
TagOutlined,
|
||||
TagsOutlined,
|
||||
PaperClipOutlined,
|
||||
PictureOutlined,
|
||||
FunctionOutlined,
|
||||
LinkOutlined,
|
||||
QuestionOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import type { FieldType } from '@/api/bitable'
|
||||
|
||||
const props = defineProps<{
|
||||
type: FieldType
|
||||
}>()
|
||||
|
||||
// 9 种字段类型 → Ant Design Outlined 图标（KTD1/plan U1 step 3）
|
||||
const ICON_MAP: Record<FieldType, Component> = {
|
||||
text: FileTextOutlined,
|
||||
number: NumberOutlined,
|
||||
date: CalendarOutlined,
|
||||
select: TagOutlined,
|
||||
multiselect: TagsOutlined,
|
||||
attachment: PaperClipOutlined,
|
||||
image: PictureOutlined,
|
||||
formula: FunctionOutlined,
|
||||
lookup: LinkOutlined,
|
||||
}
|
||||
|
||||
const iconComponent = computed<Component>(
|
||||
() => ICON_MAP[props.type] ?? QuestionOutlined,
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-type-icon {
|
||||
font-size: var(--bitable-font-sm);
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -52,18 +52,18 @@ function formatDate(iso: string): string {
|
|||
<style scoped>
|
||||
.file-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--bg-primary, #fff);
|
||||
border: 1px solid var(--border-color, #f0f0f0);
|
||||
border-radius: 8px;
|
||||
gap: var(--bitable-spacing-md);
|
||||
padding: var(--bitable-spacing-lg);
|
||||
background: var(--bitable-color-bg);
|
||||
border: 1px solid var(--bitable-color-border);
|
||||
border-radius: var(--bitable-radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-card:hover {
|
||||
border-color: var(--color-primary, #1a1a1a);
|
||||
border-color: var(--bitable-color-primary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
|
@ -77,7 +77,7 @@ function formatDate(iso: string): string {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-primary, #1a1a1a);
|
||||
color: var(--bitable-color-primary);
|
||||
}
|
||||
|
||||
.file-card__body {
|
||||
|
|
@ -85,21 +85,21 @@ function formatDate(iso: string): string {
|
|||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
}
|
||||
|
||||
.file-card__name {
|
||||
font-size: 14px;
|
||||
font-size: var(--bitable-font-md);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #1f1f1f);
|
||||
color: var(--bitable-color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-card__desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #8c8c8c);
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -108,6 +108,6 @@ function formatDate(iso: string): string {
|
|||
|
||||
.file-card__meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-placeholder, #bfbfbf);
|
||||
color: var(--bitable-color-text-placeholder);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<div class="grouping-editor">
|
||||
<!-- Known limitation note (Open Question P3) -->
|
||||
<p class="grouping-editor__note">已知限制：不支持跨分组多选</p>
|
||||
|
||||
<!-- Empty state (Open Question P2) -->
|
||||
<a-empty
|
||||
v-if="fields.length < 1"
|
||||
description="暂无可分组字段（请先创建字段）"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<a-select
|
||||
v-model:value="selectedFieldIds"
|
||||
mode="multiple"
|
||||
:max-tag-count="MAX_GROUP_BY_FIELDS"
|
||||
placeholder="选择分组字段（最多 3 个）"
|
||||
style="width: 100%"
|
||||
@change="onSelectionChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="f in selectableFields"
|
||||
:key="f.id"
|
||||
:value="f.id"
|
||||
:disabled="
|
||||
!selectedFieldIds.includes(f.id) &&
|
||||
selectedFieldIds.length >= MAX_GROUP_BY_FIELDS
|
||||
"
|
||||
>
|
||||
{{ f.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<!-- Group-by levels with direction toggle + reorder -->
|
||||
<div
|
||||
v-for="(item, idx) in modelValue"
|
||||
:key="item.field_id"
|
||||
class="grouping-editor__level"
|
||||
>
|
||||
<span class="grouping-editor__level-index">{{ idx + 1 }}.</span>
|
||||
<span class="grouping-editor__level-name">{{ fieldName(item.field_id) }}</span>
|
||||
<a-radio-group
|
||||
:value="item.direction"
|
||||
size="small"
|
||||
@update:value="onDirectionChange(idx, $event)"
|
||||
>
|
||||
<a-radio-button value="asc">升序</a-radio-button>
|
||||
<a-radio-button value="desc">降序</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button
|
||||
size="small"
|
||||
:disabled="idx === 0"
|
||||
:icon="h(ArrowUpOutlined)"
|
||||
@click="moveUp(idx)"
|
||||
/>
|
||||
<a-button
|
||||
size="small"
|
||||
:disabled="idx === modelValue.length - 1"
|
||||
:icon="h(ArrowDownOutlined)"
|
||||
@click="moveDown(idx)"
|
||||
/>
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
:icon="h(DeleteOutlined)"
|
||||
@click="removeField(idx)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="modelValue.length === MAX_GROUP_BY_FIELDS"
|
||||
class="grouping-editor__max-hint"
|
||||
>
|
||||
已达最大分组层数（{{ MAX_GROUP_BY_FIELDS }}）
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, h } from 'vue'
|
||||
import {
|
||||
Select as ASelect,
|
||||
Empty as AEmpty,
|
||||
Button as AButton,
|
||||
} from 'ant-design-vue'
|
||||
import { ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||||
import type { IBitableField } from '@/api/bitable'
|
||||
import {
|
||||
MAX_GROUP_BY_FIELDS,
|
||||
type GroupByItem,
|
||||
type GroupDirection,
|
||||
} from '@/helpers/groupingRulesUtils'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: GroupByItem[]
|
||||
fields: IBitableField[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: GroupByItem[]): void
|
||||
}>()
|
||||
|
||||
// Local copy of the selected field ids — derived from modelValue but
|
||||
// kept as a separate ref because a-select multiple mode wants string[].
|
||||
const selectedFieldIds = ref<string[]>(
|
||||
props.modelValue.map((item) => item.field_id),
|
||||
)
|
||||
|
||||
// Sync local selection when the parent's modelValue changes externally
|
||||
// (e.g. after a successful PATCH reloads the view config).
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
const newIds = newVal.map((item) => item.field_id)
|
||||
if (
|
||||
newIds.length !== selectedFieldIds.value.length ||
|
||||
!newIds.every((id, i) => id === selectedFieldIds.value[i])
|
||||
) {
|
||||
selectedFieldIds.value = newIds
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
// All fields are selectable EXCEPT formula / lookup / attachment / image —
|
||||
// these have opaque values that don't form meaningful groups. Number/text/
|
||||
// date/select/multiselect all group by their scalar value.
|
||||
const selectableFields = computed(() =>
|
||||
props.fields.filter(
|
||||
(f) =>
|
||||
f.field_type !== 'formula' &&
|
||||
f.field_type !== 'lookup' &&
|
||||
f.field_type !== 'attachment' &&
|
||||
f.field_type !== 'image',
|
||||
),
|
||||
)
|
||||
|
||||
function fieldName(fieldId: string): string {
|
||||
return props.fields.find((f) => f.id === fieldId)?.name ?? fieldId
|
||||
}
|
||||
|
||||
function emitUpdate(items: GroupByItem[]): void {
|
||||
emit('update:modelValue', items)
|
||||
}
|
||||
|
||||
function onSelectionChange(value: unknown): void {
|
||||
// a-select multiple emits SelectValue (string | number | Array | undefined);
|
||||
// narrow to string[] — mode="multiple" always yields an array in practice.
|
||||
const newIds = Array.isArray(value) ? value.map((v) => String(v)) : []
|
||||
// Preserve direction for existing items; default new items to 'asc'.
|
||||
const existing = new Map(props.modelValue.map((item) => [item.field_id, item]))
|
||||
const next: GroupByItem[] = newIds.map((id) => {
|
||||
const old = existing.get(id)
|
||||
return old ?? { field_id: id, direction: 'asc' as GroupDirection }
|
||||
})
|
||||
emitUpdate(next)
|
||||
}
|
||||
|
||||
function onDirectionChange(idx: number, direction: GroupDirection): void {
|
||||
const next = props.modelValue.map((item, i) =>
|
||||
i === idx ? { ...item, direction } : item,
|
||||
)
|
||||
emitUpdate(next)
|
||||
}
|
||||
|
||||
function moveUp(idx: number): void {
|
||||
if (idx === 0) return
|
||||
const next = [...props.modelValue]
|
||||
;[next[idx - 1], next[idx]] = [next[idx], next[idx - 1]]
|
||||
emitUpdate(next)
|
||||
}
|
||||
|
||||
function moveDown(idx: number): void {
|
||||
if (idx === props.modelValue.length - 1) return
|
||||
const next = [...props.modelValue]
|
||||
;[next[idx], next[idx + 1]] = [next[idx + 1], next[idx]]
|
||||
emitUpdate(next)
|
||||
}
|
||||
|
||||
function removeField(idx: number): void {
|
||||
const next = props.modelValue.filter((_, i) => i !== idx)
|
||||
// Also clear from local selection so the a-select re-enables the option.
|
||||
selectedFieldIds.value = next.map((item) => item.field_id)
|
||||
emitUpdate(next)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grouping-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--bitable-spacing-md);
|
||||
}
|
||||
|
||||
.grouping-editor__note {
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
margin: 0;
|
||||
padding: var(--bitable-spacing-xs) var(--bitable-spacing-sm);
|
||||
background: var(--bitable-color-bg-tertiary);
|
||||
border-radius: var(--bitable-radius-sm);
|
||||
}
|
||||
|
||||
.grouping-editor__level {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
padding: var(--bitable-spacing-xs) 0;
|
||||
border-bottom: 1px solid var(--bitable-color-border-split);
|
||||
}
|
||||
|
||||
.grouping-editor__level-index {
|
||||
font-weight: 600;
|
||||
color: var(--bitable-color-text-secondary);
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.grouping-editor__level-name {
|
||||
flex: 1;
|
||||
font-size: var(--bitable-font-sm);
|
||||
color: var(--bitable-color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.grouping-editor__max-hint {
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -83,21 +83,21 @@ onUnmounted(() => {
|
|||
.image-cell {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.image-cell__thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--bitable-radius-sm);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: var(--bg-secondary, #f5f5f5);
|
||||
background: var(--bitable-color-bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color, #f0f0f0);
|
||||
border: 1px solid var(--bitable-color-border);
|
||||
}
|
||||
|
||||
.image-cell__img {
|
||||
|
|
@ -107,11 +107,11 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.image-cell__placeholder {
|
||||
color: var(--text-placeholder, #bfbfbf);
|
||||
font-size: 16px;
|
||||
color: var(--bitable-color-text-placeholder);
|
||||
font-size: var(--bitable-font-lg);
|
||||
}
|
||||
|
||||
.image-cell__empty {
|
||||
color: var(--text-placeholder, #bfbfbf);
|
||||
color: var(--bitable-color-text-placeholder);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<div
|
||||
class="inline-field-configurator"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-label="内联编辑字段"
|
||||
@keydown.esc="onCancel"
|
||||
>
|
||||
<div class="inline-field-configurator__header">
|
||||
<FieldTypeIcon :type="localType" />
|
||||
<span class="inline-field-configurator__title">编辑字段</span>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
:icon="h(CloseOutlined)"
|
||||
aria-label="关闭"
|
||||
@click="onCancel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-form layout="vertical" size="small">
|
||||
<a-form-item label="字段名称">
|
||||
<a-input
|
||||
ref="nameInputRef"
|
||||
v-model:value="localName"
|
||||
:maxlength="100"
|
||||
placeholder="字段名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="字段类型">
|
||||
<a-select v-model:value="localType" @change="onTypeChange">
|
||||
<a-select-option value="text">文本</a-select-option>
|
||||
<a-select-option value="number">数字</a-select-option>
|
||||
<a-select-option value="date">日期</a-select-option>
|
||||
<a-select-option value="select">单选</a-select-option>
|
||||
<a-select-option value="multiselect">多选</a-select-option>
|
||||
<a-select-option value="formula">公式</a-select-option>
|
||||
<a-select-option value="attachment">附件</a-select-option>
|
||||
<a-select-option value="image">图片</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Select / Multiselect: options editor -->
|
||||
<template v-if="localType === 'select' || localType === 'multiselect'">
|
||||
<a-form-item label="选项列表">
|
||||
<div
|
||||
v-for="(_, idx) in selectOptions"
|
||||
:key="idx"
|
||||
class="inline-field-configurator__option-row"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="selectOptions[idx]"
|
||||
placeholder="选项值"
|
||||
:maxlength="200"
|
||||
/>
|
||||
<a-button
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
:icon="h(DeleteOutlined)"
|
||||
aria-label="删除选项"
|
||||
@click="removeOption(idx)"
|
||||
/>
|
||||
</div>
|
||||
<a-button
|
||||
type="dashed"
|
||||
block
|
||||
size="small"
|
||||
:icon="h(PlusOutlined)"
|
||||
@click="addOption"
|
||||
>
|
||||
添加选项
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- Formula: expression editor with live validation -->
|
||||
<template v-if="localType === 'formula'">
|
||||
<a-form-item label="公式表达式">
|
||||
<a-textarea
|
||||
v-model:value="formulaExpr"
|
||||
placeholder="例如: {field_id_1} + {field_id_2} 或 SUM({field_id})"
|
||||
:rows="3"
|
||||
:maxlength="2000"
|
||||
/>
|
||||
<div class="inline-field-configurator__formula-hint">
|
||||
用 {字段ID} 引用其他字段，支持 SUM/AVG/COUNT/MIN/MAX/ABS/ROUND/IF/LEN/CONCAT
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="formulaExpr" label="语法校验">
|
||||
<a-alert
|
||||
v-if="formulaValid === true"
|
||||
type="success"
|
||||
message="公式语法正确"
|
||||
show-icon
|
||||
/>
|
||||
<a-alert
|
||||
v-else-if="formulaValid === false"
|
||||
type="error"
|
||||
:message="formulaError || '公式语法错误'"
|
||||
show-icon
|
||||
/>
|
||||
<a-alert v-else type="info" message="校验中..." show-icon />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<!-- Date: format -->
|
||||
<template v-if="localType === 'date'">
|
||||
<a-form-item label="日期格式">
|
||||
<a-select v-model:value="dateFormat">
|
||||
<a-select-option value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
|
||||
<a-select-option value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</a-select-option>
|
||||
<a-select-option value="YYYY/MM/DD">YYYY/MM/DD</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
|
||||
<!-- Type-change compatibility warning (blocks submit) -->
|
||||
<a-alert
|
||||
v-if="compatWarning"
|
||||
class="inline-field-configurator__warning"
|
||||
type="warning"
|
||||
show-icon
|
||||
message="无法转换字段类型"
|
||||
:description="compatWarning"
|
||||
/>
|
||||
|
||||
<!-- Submit error with retry -->
|
||||
<ErrorState
|
||||
v-if="submitError"
|
||||
class="inline-field-configurator__error"
|
||||
message="保存失败"
|
||||
:description="submitError"
|
||||
:retryable="true"
|
||||
:retrying="submitting"
|
||||
@retry="onSubmit"
|
||||
/>
|
||||
|
||||
<div class="inline-field-configurator__actions">
|
||||
<a-button size="small" :disabled="submitting" @click="onCancel">
|
||||
取消
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="submitting"
|
||||
:disabled="!canSubmit"
|
||||
@click="onSubmit"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, h } from 'vue'
|
||||
import {
|
||||
Button as AButton,
|
||||
Input as AInput,
|
||||
Select as ASelect,
|
||||
Alert as AAlert,
|
||||
} from 'ant-design-vue'
|
||||
import {
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import type { IBitableField, FieldType } from '@/api/bitable'
|
||||
import { useBitableStore } from '@/stores/bitable'
|
||||
import { checkTypeCompatibility } from '@/helpers/fieldRenderUtils'
|
||||
import FieldTypeIcon from './FieldTypeIcon.vue'
|
||||
import ErrorState from './ErrorState.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
field: IBitableField
|
||||
// ponytail: tableId is reserved for future table-scoped operations; the
|
||||
// PATCH /fields/{id} endpoint only needs fieldId. Kept per U2 spec contract.
|
||||
tableId?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'saved', field: IBitableField): void
|
||||
(e: 'cancel'): void
|
||||
}>()
|
||||
|
||||
const store = useBitableStore()
|
||||
|
||||
const localName = ref(props.field.name)
|
||||
const localType = ref<FieldType>(props.field.field_type)
|
||||
const selectOptions = ref<string[]>(
|
||||
(props.field.config?.options as string[]) ?? [],
|
||||
)
|
||||
const formulaExpr = ref((props.field.config?.formula_expr as string) ?? '')
|
||||
const dateFormat = ref((props.field.config?.format as string) ?? 'YYYY-MM-DD')
|
||||
|
||||
// Formula validation state (debounced API check, same as FieldConfigForm)
|
||||
const formulaValid = ref<boolean | null>(null)
|
||||
const formulaError = ref<string | null>(null)
|
||||
let validateTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const submitting = ref(false)
|
||||
const submitError = ref<string | null>(null)
|
||||
const nameInputRef = ref<InstanceType<typeof AInput> | null>(null)
|
||||
|
||||
// Existing values for the field across all loaded records (for compat check)
|
||||
const existingValues = computed<unknown[]>(() =>
|
||||
store.records.map((r) => r.values[props.field.id]),
|
||||
)
|
||||
|
||||
// Compatibility result when type changes
|
||||
const compat = computed(() =>
|
||||
checkTypeCompatibility(
|
||||
props.field.field_type,
|
||||
localType.value,
|
||||
existingValues.value,
|
||||
),
|
||||
)
|
||||
|
||||
const compatWarning = computed<string | null>(() =>
|
||||
compat.value.compatible ? null : (compat.value.reason ?? '当前数据不支持该类型转换'),
|
||||
)
|
||||
|
||||
// Debounced formula validation
|
||||
watch(formulaExpr, (val) => {
|
||||
if (!val.trim()) {
|
||||
formulaValid.value = null
|
||||
return
|
||||
}
|
||||
formulaValid.value = null
|
||||
if (validateTimer) clearTimeout(validateTimer)
|
||||
validateTimer = setTimeout(async () => {
|
||||
try {
|
||||
const { bitableApi } = await import('@/api/bitable')
|
||||
const result = await bitableApi.validateFormula(val)
|
||||
formulaValid.value = result.valid
|
||||
formulaError.value = result.error ?? null
|
||||
} catch (err) {
|
||||
formulaValid.value = false
|
||||
formulaError.value = err instanceof Error ? err.message : String(err)
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
|
||||
function onTypeChange(): void {
|
||||
// Reset type-specific config when type changes (mirrors FieldConfigForm)
|
||||
selectOptions.value = []
|
||||
formulaExpr.value = ''
|
||||
formulaValid.value = null
|
||||
}
|
||||
|
||||
function addOption(): void {
|
||||
selectOptions.value.push('')
|
||||
}
|
||||
|
||||
function removeOption(idx: number): void {
|
||||
selectOptions.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
function buildConfig(): Record<string, unknown> {
|
||||
const config: Record<string, unknown> = {}
|
||||
if (localType.value === 'select' || localType.value === 'multiselect') {
|
||||
config.options = selectOptions.value.filter((o) => o.trim())
|
||||
}
|
||||
if (localType.value === 'formula') {
|
||||
config.formula_expr = formulaExpr.value
|
||||
}
|
||||
if (localType.value === 'date') {
|
||||
config.format = dateFormat.value
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
const isFormulaStateValid = computed(() => {
|
||||
if (localType.value !== 'formula') return true
|
||||
if (!formulaExpr.value.trim()) return false
|
||||
return formulaValid.value === true
|
||||
})
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
if (submitting.value) return false
|
||||
if (!localName.value.trim()) return false
|
||||
if (!compat.value.compatible) return false
|
||||
return isFormulaStateValid.value
|
||||
})
|
||||
|
||||
function onCancel(): void {
|
||||
if (submitting.value) return
|
||||
submitError.value = null
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
async function onSubmit(): Promise<void> {
|
||||
if (!canSubmit.value) return
|
||||
submitError.value = null
|
||||
submitting.value = true
|
||||
try {
|
||||
const patch: {
|
||||
name: string
|
||||
field_type?: FieldType
|
||||
config: Record<string, unknown>
|
||||
} = {
|
||||
name: localName.value.trim(),
|
||||
config: buildConfig(),
|
||||
}
|
||||
// Only send field_type when it actually changes (avoid no-op PATCH semantics)
|
||||
if (localType.value !== props.field.field_type) {
|
||||
patch.field_type = localType.value
|
||||
}
|
||||
const updated = await store.updateField(props.field.id, patch)
|
||||
if (!updated) {
|
||||
// store.updateField surfaces errors via notification; show inline retry too
|
||||
submitError.value = '服务器返回空响应，请重试'
|
||||
return
|
||||
}
|
||||
emit('saved', updated)
|
||||
} catch (err) {
|
||||
submitError.value = err instanceof Error ? err.message : String(err)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Move focus to the first field for keyboard accessibility (U2 scenario 5).
|
||||
// a-input exposes focus() at runtime; cast to a minimal structural type
|
||||
// because InstanceType<typeof AInput> doesn't surface the imperative method.
|
||||
const inputEl = nameInputRef.value as { focus?: () => void } | null
|
||||
inputEl?.focus?.()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inline-field-configurator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
padding: var(--bitable-spacing-sm) 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.inline-field-configurator__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
padding-bottom: var(--bitable-spacing-xs);
|
||||
border-bottom: 1px solid var(--bitable-color-border-split);
|
||||
}
|
||||
|
||||
.inline-field-configurator__title {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
font-size: var(--bitable-font-md);
|
||||
color: var(--bitable-color-text);
|
||||
}
|
||||
|
||||
.inline-field-configurator__option-row {
|
||||
display: flex;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
margin-bottom: var(--bitable-spacing-xs);
|
||||
}
|
||||
|
||||
.inline-field-configurator__formula-hint {
|
||||
margin-top: var(--bitable-spacing-xs);
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
}
|
||||
|
||||
.inline-field-configurator__warning {
|
||||
margin-top: var(--bitable-spacing-xs);
|
||||
border-radius: var(--bitable-radius-md);
|
||||
}
|
||||
|
||||
.inline-field-configurator__error {
|
||||
margin-top: var(--bitable-spacing-xs);
|
||||
border-radius: var(--bitable-radius-md);
|
||||
}
|
||||
|
||||
.inline-field-configurator__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
margin-top: var(--bitable-spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="bitable-loading-state" role="status" aria-live="polite">
|
||||
<a-skeleton :rows="rows" :title="title" active />
|
||||
<span class="bitable-loading-state__sr-only">加载中</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Skeleton as ASkeleton } from 'ant-design-vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
// 骨架屏占位行数（默认 5 行，适配 grid/抽屉常见规模）
|
||||
rows?: number
|
||||
// 是否显示标题占位（抽屉 sticky header 用）
|
||||
title?: boolean
|
||||
}>(),
|
||||
{
|
||||
rows: 5,
|
||||
title: true,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bitable-loading-state {
|
||||
padding: var(--bitable-spacing-lg, 16px);
|
||||
}
|
||||
|
||||
/* 屏幕阅读器专用文本（视觉隐藏） */
|
||||
.bitable-loading-state__sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,381 @@
|
|||
<template>
|
||||
<a-drawer
|
||||
:open="open"
|
||||
:width="drawerWidth"
|
||||
:keyboard="true"
|
||||
:mask-closable="true"
|
||||
:body-style="{ padding: 0 }"
|
||||
placement="right"
|
||||
class="record-detail-drawer"
|
||||
:class="{ 'record-detail-drawer--wide': isWideDrawer }"
|
||||
@close="onClose"
|
||||
>
|
||||
<template #title>
|
||||
<span class="record-detail-drawer__title">
|
||||
{{ headerTitle }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Loading: skeleton (U1 LoadingState, Open Question P1) -->
|
||||
<LoadingState v-if="store.recordDetailLoading" :rows="6" :title="true" />
|
||||
|
||||
<!-- 404: record not found / concurrently deleted -->
|
||||
<div
|
||||
v-else-if="store.recordDetailNotFound"
|
||||
class="record-detail-drawer__notfound"
|
||||
>
|
||||
<a-empty description="记录不存在或已被删除" />
|
||||
<a-button type="primary" @click="onClose">关闭</a-button>
|
||||
</div>
|
||||
|
||||
<!-- Error: 5xx / network — ErrorState + retry (U1 ErrorState) -->
|
||||
<ErrorState
|
||||
v-else-if="store.recordDetailError"
|
||||
:message="store.recordDetailError"
|
||||
:retrying="store.recordDetailLoading"
|
||||
@retry="retry"
|
||||
/>
|
||||
|
||||
<!-- Ready: render fields -->
|
||||
<template v-else-if="record">
|
||||
<!-- Empty: 0 fields (Open Question P2) -->
|
||||
<div v-if="fields.length === 0" class="record-detail-drawer__empty">
|
||||
<a-empty description="该记录暂无字段数据" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Sticky header: record title -->
|
||||
<div class="record-detail-drawer__header">
|
||||
<span class="record-detail-drawer__header-title">{{ recordTitle }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Body: vertical field list -->
|
||||
<a-form
|
||||
layout="vertical"
|
||||
class="record-detail-drawer__form"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<a-form-item
|
||||
v-for="f in fields"
|
||||
:key="f.id"
|
||||
class="record-detail-drawer__field"
|
||||
>
|
||||
<template #label>
|
||||
<span class="record-detail-drawer__field-label">
|
||||
<FieldTypeIcon :type="f.field_type" />
|
||||
{{ f.name }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- Read-only renders -->
|
||||
<template v-if="!isFieldEditable(f)">
|
||||
<SelectDisplay
|
||||
v-if="f.field_type === 'select' || f.field_type === 'multiselect'"
|
||||
:value="(record.values[f.id] as string | string[] | null | undefined)"
|
||||
:options="(f.config.options as ISelectOption[] | string[] | undefined)"
|
||||
:multiple="f.field_type === 'multiselect'"
|
||||
/>
|
||||
<AttachmentCell
|
||||
v-else-if="f.field_type === 'attachment'"
|
||||
:files="(record.values[f.id] as IAttachmentMeta[] | null | undefined)"
|
||||
/>
|
||||
<ImageCell
|
||||
v-else-if="f.field_type === 'image'"
|
||||
:images="(record.values[f.id] as IAttachmentMeta[] | null | undefined)"
|
||||
/>
|
||||
<span v-else class="record-detail-drawer__readonly">
|
||||
{{ formatFieldValue(record.values[f.id], f.field_type) }}
|
||||
</span>
|
||||
<span v-if="isAgentOwned(f)" class="record-detail-drawer__owner-tag">
|
||||
系统字段
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Editable inputs (user-owned, non-computed).
|
||||
:value + @update:value with explicit casts — avoids `any`
|
||||
while satisfying each component's prop type. -->
|
||||
<template v-else>
|
||||
<a-input
|
||||
v-if="f.field_type === 'text'"
|
||||
:value="(editBuffer[f.id] as string | undefined)"
|
||||
:disabled="submitting"
|
||||
placeholder="请输入"
|
||||
@update:value="editBuffer[f.id] = $event"
|
||||
/>
|
||||
<a-input-number
|
||||
v-else-if="f.field_type === 'number'"
|
||||
:value="(editBuffer[f.id] as number | undefined)"
|
||||
:disabled="submitting"
|
||||
style="width: 100%"
|
||||
placeholder="请输入数字"
|
||||
@update:value="editBuffer[f.id] = $event"
|
||||
/>
|
||||
<a-date-picker
|
||||
v-else-if="f.field_type === 'date'"
|
||||
:value="(editBuffer[f.id] as string | undefined)"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="submitting"
|
||||
style="width: 100%"
|
||||
placeholder="请选择日期"
|
||||
@update:value="editBuffer[f.id] = $event"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="f.field_type === 'select'"
|
||||
:value="(editBuffer[f.id] as string | undefined)"
|
||||
:options="toSelectOptions(f.config.options)"
|
||||
:disabled="submitting"
|
||||
:allow-clear="true"
|
||||
placeholder="请选择"
|
||||
@update:value="editBuffer[f.id] = $event"
|
||||
/>
|
||||
<a-select
|
||||
v-else-if="f.field_type === 'multiselect'"
|
||||
:value="(editBuffer[f.id] as string[] | undefined)"
|
||||
:options="toSelectOptions(f.config.options)"
|
||||
:disabled="submitting"
|
||||
:allow-clear="true"
|
||||
mode="multiple"
|
||||
placeholder="请选择"
|
||||
@update:value="editBuffer[f.id] = $event"
|
||||
/>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Footer: save button (only when ready + has editable fields) -->
|
||||
<template v-if="showFooter" #footer>
|
||||
<div class="record-detail-drawer__footer">
|
||||
<a-button :disabled="submitting" @click="onClose">取消</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="submitting"
|
||||
:disabled="submitting"
|
||||
@click="onSubmit"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import {
|
||||
Drawer as ADrawer,
|
||||
Form as AForm,
|
||||
FormItem as AFormItem,
|
||||
Input as AInput,
|
||||
InputNumber as AInputNumber,
|
||||
DatePicker as ADatePicker,
|
||||
Select as ASelect,
|
||||
Button as AButton,
|
||||
Empty as AEmpty,
|
||||
} from 'ant-design-vue'
|
||||
import type { IAttachmentMeta, IBitableField, IBitableRecord } from '@/api/bitable'
|
||||
import { useBitableStore } from '@/stores/bitable'
|
||||
import { useResponsiveBreakpoint } from '@/composables/useResponsiveBreakpoint'
|
||||
import LoadingState from './LoadingState.vue'
|
||||
import ErrorState from './ErrorState.vue'
|
||||
import FieldTypeIcon from './FieldTypeIcon.vue'
|
||||
import SelectDisplay from './SelectDisplay.vue'
|
||||
import AttachmentCell from './AttachmentCell.vue'
|
||||
import ImageCell from './ImageCell.vue'
|
||||
import type { ISelectOption } from './SelectCellEditor.vue'
|
||||
import {
|
||||
formatFieldValue,
|
||||
getDrawerWidth,
|
||||
getRecordTitle,
|
||||
isFieldEditable,
|
||||
} from '@/helpers/recordDrawerUtils'
|
||||
|
||||
const props = defineProps<{
|
||||
/** Record id to display. When non-null + open, the drawer fetches the record. */
|
||||
recordId: string | null
|
||||
/** Open signal — typically `!!store.currentRecordId`. */
|
||||
open: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
(e: 'retry', recordId: string): void
|
||||
}>()
|
||||
|
||||
const store = useBitableStore()
|
||||
const { isMobile } = useResponsiveBreakpoint()
|
||||
|
||||
const submitting = ref(false)
|
||||
|
||||
// Edit buffer: keyed by field id, only populated for editable fields.
|
||||
// Reset whenever the loaded record changes (watch below).
|
||||
const editBuffer = reactive<Record<string, unknown>>({})
|
||||
|
||||
const record = computed<IBitableRecord | null>(() => store.currentRecord)
|
||||
const fields = computed<IBitableField[]>(() => store.fields)
|
||||
|
||||
const isWideDrawer = computed(() => fields.value.length > 10)
|
||||
const drawerWidth = computed(() => getDrawerWidth(fields.value.length, isMobile.value))
|
||||
|
||||
const recordTitle = computed(() =>
|
||||
record.value ? getRecordTitle(record.value, fields.value) : '记录详情',
|
||||
)
|
||||
|
||||
const headerTitle = computed(() => {
|
||||
if (store.recordDetailLoading) return '加载中...'
|
||||
if (store.recordDetailNotFound) return '记录不存在'
|
||||
if (store.recordDetailError) return '加载失败'
|
||||
return recordTitle.value
|
||||
})
|
||||
|
||||
const showFooter = computed(
|
||||
() =>
|
||||
!!record.value &&
|
||||
fields.value.length > 0 &&
|
||||
fields.value.some(isFieldEditable),
|
||||
)
|
||||
|
||||
function isAgentOwned(f: IBitableField): boolean {
|
||||
return f.owner === 'agent'
|
||||
}
|
||||
|
||||
function toSelectOptions(
|
||||
raw: unknown,
|
||||
): { label: string; value: string }[] {
|
||||
if (!Array.isArray(raw)) return []
|
||||
return raw.map((opt) => {
|
||||
if (typeof opt === 'string') return { label: opt, value: opt }
|
||||
const o = opt as ISelectOption
|
||||
return { label: o.label ?? o.value, value: o.value }
|
||||
})
|
||||
}
|
||||
|
||||
// Reset + hydrate the edit buffer when a new record loads.
|
||||
watch(
|
||||
record,
|
||||
(rec) => {
|
||||
// Clear stale edits
|
||||
for (const k of Object.keys(editBuffer)) {
|
||||
delete editBuffer[k]
|
||||
}
|
||||
if (!rec) return
|
||||
for (const f of fields.value) {
|
||||
if (!isFieldEditable(f)) continue
|
||||
// Clone primitive values; clone arrays so multiselect edits don't
|
||||
// mutate the store's record.
|
||||
const v = rec.values[f.id]
|
||||
editBuffer[f.id] = Array.isArray(v) ? [...v] : (v ?? undefined)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// If the drawer is re-opened for the same record id while the store still
|
||||
// holds it, the watch above won't fire (record ref unchanged). Re-hydrate
|
||||
// on open transition too.
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
if (isOpen && record.value) {
|
||||
// Re-trigger hydration by reassigning via the record watch.
|
||||
for (const k of Object.keys(editBuffer)) delete editBuffer[k]
|
||||
for (const f of fields.value) {
|
||||
if (!isFieldEditable(f)) continue
|
||||
const v = record.value.values[f.id]
|
||||
editBuffer[f.id] = Array.isArray(v) ? [...v] : (v ?? undefined)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
function onClose(): void {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function retry(): void {
|
||||
if (props.recordId) emit('retry', props.recordId)
|
||||
}
|
||||
|
||||
async function onSubmit(): Promise<void> {
|
||||
if (!record.value || !props.recordId) return
|
||||
submitting.value = true
|
||||
try {
|
||||
// Only submit editable user-owned fields. Agent columns are merged back
|
||||
// from currentRecord.values inside updateRecordFields (preserves them).
|
||||
const edited: Record<string, unknown> = {}
|
||||
for (const f of fields.value) {
|
||||
if (!isFieldEditable(f)) continue
|
||||
if (f.id in editBuffer) edited[f.id] = editBuffer[f.id]
|
||||
}
|
||||
const ok = await store.updateRecordFields(props.recordId, edited)
|
||||
if (ok) {
|
||||
emit('close')
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.record-detail-drawer__title {
|
||||
font-size: var(--bitable-font-md);
|
||||
font-weight: 600;
|
||||
color: var(--bitable-color-text);
|
||||
}
|
||||
|
||||
.record-detail-drawer__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--bitable-color-bg);
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
padding: var(--bitable-spacing-md) var(--bitable-spacing-lg);
|
||||
}
|
||||
|
||||
.record-detail-drawer__header-title {
|
||||
font-size: var(--bitable-font-lg);
|
||||
font-weight: 600;
|
||||
color: var(--bitable-color-text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.record-detail-drawer__form {
|
||||
padding: var(--bitable-spacing-md) var(--bitable-spacing-lg);
|
||||
}
|
||||
|
||||
.record-detail-drawer__field {
|
||||
margin-bottom: var(--bitable-spacing-lg);
|
||||
}
|
||||
|
||||
.record-detail-drawer__readonly {
|
||||
color: var(--bitable-color-text);
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.record-detail-drawer__owner-tag {
|
||||
display: inline-block;
|
||||
margin-left: var(--bitable-spacing-sm);
|
||||
padding: 0 var(--bitable-spacing-xs);
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-tertiary);
|
||||
background: var(--bitable-color-bg-tertiary);
|
||||
border-radius: var(--bitable-radius-sm);
|
||||
}
|
||||
|
||||
.record-detail-drawer__notfound,
|
||||
.record-detail-drawer__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-md);
|
||||
padding: var(--bitable-spacing-xl) var(--bitable-spacing-lg);
|
||||
}
|
||||
|
||||
.record-detail-drawer__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +1,27 @@
|
|||
<template>
|
||||
<span v-if="multiple" class="select-display">
|
||||
<a-tag
|
||||
<span
|
||||
v-for="v in (value as string[] | null | undefined) ?? []"
|
||||
:key="v"
|
||||
:color="colorOf(v)"
|
||||
size="small"
|
||||
class="select-display__chip"
|
||||
:style="chipStyle(colorKeyFor(v))"
|
||||
>
|
||||
{{ labelOf(v) }}
|
||||
</a-tag>
|
||||
</span>
|
||||
<a-tag
|
||||
</span>
|
||||
<span
|
||||
v-else-if="value != null && value !== ''"
|
||||
:color="colorOf(value as string)"
|
||||
size="small"
|
||||
class="select-display__chip"
|
||||
:style="chipStyle(colorKeyFor(value as string))"
|
||||
>
|
||||
{{ labelOf(value as string) }}
|
||||
</a-tag>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Tag as ATag } from 'ant-design-vue'
|
||||
|
||||
interface ISelectOption {
|
||||
export interface ISelectOption {
|
||||
label: string
|
||||
value: string
|
||||
color?: string
|
||||
|
|
@ -34,6 +33,21 @@ const props = defineProps<{
|
|||
multiple?: boolean
|
||||
}>()
|
||||
|
||||
// 8 色 token 调色板语义 key（与 bitable-tokens.css --bitable-cf-* 对齐）
|
||||
const COLOR_KEYS = [
|
||||
'red',
|
||||
'orange',
|
||||
'yellow',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'gray',
|
||||
'neutral',
|
||||
] as const
|
||||
type ColorKey = (typeof COLOR_KEYS)[number]
|
||||
|
||||
const COLOR_KEY_SET = new Set<string>(COLOR_KEYS)
|
||||
|
||||
// Normalize options to a lookup map
|
||||
const optionMap = computed<Map<string, ISelectOption>>(() => {
|
||||
const m = new Map<string, ISelectOption>()
|
||||
|
|
@ -53,7 +67,52 @@ function labelOf(value: string): string {
|
|||
return optionMap.value.get(value)?.label ?? value
|
||||
}
|
||||
|
||||
function colorOf(value: string): string {
|
||||
return optionMap.value.get(value)?.color ?? 'default'
|
||||
// ponytail: 简单确定性 hash → 8 色之一。已知 ceiling: hash 分布对短字符串
|
||||
// 可能聚集（不抗冲突），但 chip 着色仅做视觉区分，冲突无功能影响。
|
||||
// 升级路径: 用更均匀的字符串 hash（如 FNV-1a）若实测分布不均。
|
||||
function hashColorKey(value: string): ColorKey {
|
||||
let h = 0
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
h = (h * 31 + value.charCodeAt(i)) | 0
|
||||
}
|
||||
return COLOR_KEYS[Math.abs(h) % COLOR_KEYS.length]
|
||||
}
|
||||
|
||||
// 解析选项颜色：接受 8 色语义 key；非法值（含 Ant Design preset 名如
|
||||
// 'default'/'pink'）回退为确定性 hash 着色，确保每选项有可区分颜色。
|
||||
function colorKeyFor(value: string): ColorKey {
|
||||
const explicit = optionMap.value.get(value)?.color
|
||||
if (explicit && COLOR_KEY_SET.has(explicit)) {
|
||||
return explicit as ColorKey
|
||||
}
|
||||
return hashColorKey(value)
|
||||
}
|
||||
|
||||
// chip 样式：-bg 浅底 + -fg 深字/边框，对比度 ~12:1（WCAG AA 远超 4.5:1）
|
||||
function chipStyle(key: ColorKey): Record<string, string> {
|
||||
return {
|
||||
backgroundColor: `var(--bitable-cf-${key}-bg)`,
|
||||
color: `var(--bitable-cf-${key}-fg)`,
|
||||
borderColor: `var(--bitable-cf-${key}-fg)`,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-display {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
}
|
||||
|
||||
.select-display__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--bitable-spacing-sm);
|
||||
border-radius: var(--bitable-radius-sm);
|
||||
border: 1px solid;
|
||||
font-size: var(--bitable-font-xs);
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<a-drawer
|
||||
:open="open"
|
||||
title="视图配置"
|
||||
placement="right"
|
||||
:width="520"
|
||||
:placement="drawerPlacement"
|
||||
:width="drawerWidth"
|
||||
@close="handleClose"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeTab">
|
||||
|
|
@ -61,6 +61,28 @@
|
|||
<a-button type="primary" @click="saveHidden">保存隐藏配置</a-button>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- U5: Grouping tab -->
|
||||
<a-tab-pane key="grouping" tab="分组">
|
||||
<GroupingEditor
|
||||
v-model="groupByItems"
|
||||
:fields="fields"
|
||||
/>
|
||||
<div class="view-config-panel__actions">
|
||||
<a-button type="primary" @click="saveU5Config">保存分组</a-button>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- U5: Conditional formatting tab -->
|
||||
<a-tab-pane key="conditional-format" tab="条件格式">
|
||||
<ConditionalFormatEditor
|
||||
v-model="cfRules"
|
||||
:fields="fields"
|
||||
/>
|
||||
<div class="view-config-panel__actions">
|
||||
<a-button type="primary" @click="saveU5Config">保存条件格式</a-button>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
|
@ -76,7 +98,14 @@ import {
|
|||
} from 'ant-design-vue'
|
||||
import type { IBitableField, IBitableView } from '@/api/bitable'
|
||||
import { useBitableStore } from '@/stores/bitable'
|
||||
import { useResponsiveBreakpoint } from '@/composables/useResponsiveBreakpoint'
|
||||
import FilterBuilder from './FilterBuilder.vue'
|
||||
import GroupingEditor from './GroupingEditor.vue'
|
||||
import ConditionalFormatEditor from './ConditionalFormatEditor.vue'
|
||||
import type {
|
||||
GroupByItem,
|
||||
ConditionalFormatRule,
|
||||
} from '@/helpers/groupingRulesUtils'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
|
|
@ -90,6 +119,14 @@ const emit = defineEmits<{
|
|||
|
||||
const store = useBitableStore()
|
||||
|
||||
// U1 step 7: ViewConfigPanel becomes a bottom drawer on mobile.
|
||||
// ponytail: only the placement + width differ; the rest of the UI is shared.
|
||||
// Ceiling: the drawer height on mobile is unbounded — long rule lists may
|
||||
// scroll past the fold. Acceptable for v1; upgrade path: a max-height + scroll.
|
||||
const { isMobile } = useResponsiveBreakpoint()
|
||||
const drawerPlacement = computed(() => (isMobile.value ? 'bottom' : 'right'))
|
||||
const drawerWidth = computed(() => (isMobile.value ? '100%' : 520))
|
||||
|
||||
const activeTab = ref('filter')
|
||||
const filterRef = ref<InstanceType<typeof FilterBuilder> | null>(null)
|
||||
|
||||
|
|
@ -110,13 +147,31 @@ const hiddenFieldIds = ref<string[]>(
|
|||
(props.view?.config?.hidden_fields as string[]) ?? [],
|
||||
)
|
||||
|
||||
// Reset when view changes
|
||||
// U5: group_by + conditional_formatting local working copies.
|
||||
const groupByItems = ref<GroupByItem[]>(extractGroupBy(props.view))
|
||||
const cfRules = ref<ConditionalFormatRule[]>(extractConditionalFormat(props.view))
|
||||
|
||||
function extractGroupBy(view: IBitableView | null): GroupByItem[] {
|
||||
const raw = view?.config?.group_by
|
||||
if (!Array.isArray(raw)) return []
|
||||
return raw as GroupByItem[]
|
||||
}
|
||||
|
||||
function extractConditionalFormat(view: IBitableView | null): ConditionalFormatRule[] {
|
||||
const raw = view?.config?.conditional_formatting
|
||||
if (!Array.isArray(raw)) return []
|
||||
return raw as ConditionalFormatRule[]
|
||||
}
|
||||
|
||||
// Reset when view changes (covers initial load + view-switch reloads)
|
||||
watch(
|
||||
() => props.view?.id,
|
||||
() => {
|
||||
sortFieldId.value = (props.view?.config?.sort as { field?: string })?.field ?? ''
|
||||
sortOrder.value = (props.view?.config?.sort as { order?: string })?.order ?? 'asc'
|
||||
hiddenFieldIds.value = (props.view?.config?.hidden_fields as string[]) ?? []
|
||||
groupByItems.value = extractGroupBy(props.view)
|
||||
cfRules.value = extractConditionalFormat(props.view)
|
||||
},
|
||||
)
|
||||
|
||||
|
|
@ -151,6 +206,19 @@ async function saveHidden(): Promise<void> {
|
|||
}
|
||||
await store.updateView(props.view.id, { config })
|
||||
}
|
||||
|
||||
// U5: save group_by + conditional_formatting through the new
|
||||
// updateViewConfig action (which calls the same PATCH /views endpoint;
|
||||
// the route layer validates the U5 sub-keys and 422s on invalid input).
|
||||
// Both tabs' save buttons call this — saving either tab persists both U5
|
||||
// keys together (matches the existing merge-then-PATCH behavior).
|
||||
async function saveU5Config(): Promise<void> {
|
||||
if (!props.view) return
|
||||
await store.updateViewConfig(props.view.id, {
|
||||
group_by: groupByItems.value,
|
||||
conditional_formatting: cfRules.value,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@
|
|||
v-model:activeKey="activeKey"
|
||||
type="editable-card"
|
||||
size="small"
|
||||
:add-icon="h(PlusOutlined)"
|
||||
:hide-add="true"
|
||||
@change="onSwitch"
|
||||
@edit="onEdit"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="v in views"
|
||||
|
|
@ -16,6 +15,35 @@
|
|||
/>
|
||||
</a-tabs>
|
||||
|
||||
<!-- U4: "新建视图" is a dropdown exposing all 5 view types. Only `grid`
|
||||
is enabled in v1; the rest are disabled with a "规划中" tooltip. -->
|
||||
<a-dropdown :trigger="['click']" placement="bottomLeft">
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
:icon="h(PlusOutlined)"
|
||||
:loading="creating"
|
||||
:disabled="creating"
|
||||
>
|
||||
新建视图
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleTypeClick">
|
||||
<a-menu-item
|
||||
v-for="meta in VIEW_TYPE_LIST"
|
||||
:key="meta.viewType"
|
||||
:disabled="meta.disabled"
|
||||
:title="meta.tooltip"
|
||||
>
|
||||
<span class="view-switcher__type-item">
|
||||
<component :is="meta.icon" />
|
||||
<span>{{ meta.label }}</span>
|
||||
</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<a-button
|
||||
v-if="activeKey"
|
||||
type="text"
|
||||
|
|
@ -25,24 +53,58 @@
|
|||
>
|
||||
配置
|
||||
</a-button>
|
||||
|
||||
<!-- U6: delete the active view. Wrapped in a-popconfirm per spec.
|
||||
Disabled when only one view remains — backend rejects with 409
|
||||
(last view), so we preempt in the UI to avoid a wasted round-trip.
|
||||
ponytail: single delete button for the active view (not per-tab)
|
||||
matches the existing "配置" pattern and keeps the tab header clean. -->
|
||||
<a-popconfirm
|
||||
v-if="activeKey && views.length > 1"
|
||||
title="确认删除此视图？"
|
||||
ok-text="删除"
|
||||
ok-type="danger"
|
||||
cancel-text="取消"
|
||||
@confirm="handleDelete"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
danger
|
||||
:icon="h(DeleteOutlined)"
|
||||
>
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, h } from 'vue'
|
||||
import { Tabs as ATabs, Button as AButton } from 'ant-design-vue'
|
||||
import { PlusOutlined, FilterOutlined } from '@ant-design/icons-vue'
|
||||
import type { IBitableView } from '@/api/bitable'
|
||||
import {
|
||||
Tabs as ATabs,
|
||||
Button as AButton,
|
||||
Popconfirm as APopconfirm,
|
||||
} from 'ant-design-vue'
|
||||
import { PlusOutlined, FilterOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||||
import type { IBitableView, ViewType } from '@/api/bitable'
|
||||
import { VIEW_TYPE_LIST } from '@/helpers/viewSwitcherUtils'
|
||||
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
views: IBitableView[]
|
||||
activeViewId: string | null
|
||||
}>()
|
||||
/** True while a createView POST is in flight — disables + shows spinner. */
|
||||
creating?: boolean
|
||||
}>(),
|
||||
{ creating: false },
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'switch', viewId: string): void
|
||||
(e: 'create'): void
|
||||
(e: 'create', viewType: ViewType): void
|
||||
(e: 'config'): void
|
||||
(e: 'delete', viewId: string): void
|
||||
}>()
|
||||
|
||||
// antd Tabs activeKey is string | number | undefined; bridge to/from null
|
||||
|
|
@ -59,11 +121,18 @@ function onSwitch(key: string | number): void {
|
|||
emit('switch', String(key))
|
||||
}
|
||||
|
||||
function onEdit(_targetKey: unknown, action: 'add' | 'remove'): void {
|
||||
if (action === 'add') {
|
||||
emit('create')
|
||||
// U6: emit delete for the active view. The v-if guard on the popconfirm
|
||||
// already ensures activeKey is set and views.length > 1.
|
||||
function handleDelete(): void {
|
||||
if (activeKey.value) {
|
||||
emit('delete', activeKey.value)
|
||||
}
|
||||
// remove is disabled (closable=false) — no-op
|
||||
}
|
||||
|
||||
// a-menu only emits click for enabled items; disabled items are skipped, so
|
||||
// no extra guard is needed — the "规划中" tooltip is shown via `title`.
|
||||
function handleTypeClick({ key }: { key: string }): void {
|
||||
emit('create', key as ViewType)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -71,13 +140,19 @@ function onEdit(_targetKey: unknown, action: 'add' | 'remove'): void {
|
|||
.view-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border-color, #f0f0f0);
|
||||
gap: var(--bitable-spacing-sm);
|
||||
padding: 0 var(--bitable-spacing-lg);
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
}
|
||||
|
||||
.view-switcher :deep(.ant-tabs) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.view-switcher__type-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--bitable-spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* useResponsiveBreakpoint — 响应式断点 composable
|
||||
*
|
||||
* 断点（移动优先，与 plan U1 Open Questions 一致）：
|
||||
* - isMobile: viewport < 768px
|
||||
* - isTablet: 768px ≤ viewport < 1024px
|
||||
* - isDesktop: viewport ≥ 1024px
|
||||
* - isWide: viewport ≥ 1440px（供宽屏布局可选使用）
|
||||
*
|
||||
* 消费点：U3 RecordDetailDrawer（isMobile 时全屏覆盖）、
|
||||
* U5 ViewConfigPanel（isMobile 时改底部抽屉）。U1 仅暴露 API。
|
||||
*
|
||||
* 实现：window.matchMedia + change 事件监听，onUnmounted 清理。
|
||||
* SSR 安全：未定义 window 时返回全 false 默认值（ ponytail: 不引入
|
||||
* 专门的 SSR 检测库，matchMedia 不存在即视为非移动端默认布局）。
|
||||
*/
|
||||
import { ref, onMounted, onUnmounted, type Ref } from 'vue'
|
||||
|
||||
export interface ResponsiveBreakpoint {
|
||||
isMobile: Ref<boolean>
|
||||
isTablet: Ref<boolean>
|
||||
isDesktop: Ref<boolean>
|
||||
isWide: Ref<boolean>
|
||||
}
|
||||
|
||||
const MOBILE_MAX = 767 // < 768
|
||||
const TABLET_MAX = 1023 // < 1024
|
||||
const WIDE_MIN = 1440 // ≥ 1440
|
||||
|
||||
export function useResponsiveBreakpoint(): ResponsiveBreakpoint {
|
||||
const isMobile = ref(false)
|
||||
const isTablet = ref(false)
|
||||
const isDesktop = ref(false)
|
||||
const isWide = ref(false)
|
||||
|
||||
// matchMedia 不支持 change 事件的旧浏览器回退（ponytail: 不做
|
||||
// resize 节流兜底——现代浏览器均支持 matchMedia change，避免额外
|
||||
// 依赖 lodash/throttle；已知 ceiling: IE11 不可用，本项目目标现代浏览器）
|
||||
const mobileMql: MediaQueryList | null =
|
||||
typeof window !== 'undefined' && window.matchMedia
|
||||
? window.matchMedia(`(max-width: ${MOBILE_MAX}px)`)
|
||||
: null
|
||||
const tabletMql: MediaQueryList | null =
|
||||
typeof window !== 'undefined' && window.matchMedia
|
||||
? window.matchMedia(`(min-width: ${MOBILE_MAX + 1}px) and (max-width: ${TABLET_MAX}px)`)
|
||||
: null
|
||||
const wideMql: MediaQueryList | null =
|
||||
typeof window !== 'undefined' && window.matchMedia
|
||||
? window.matchMedia(`(min-width: ${WIDE_MIN}px)`)
|
||||
: null
|
||||
|
||||
function sync(): void {
|
||||
isMobile.value = mobileMql?.matches ?? false
|
||||
isTablet.value = tabletMql?.matches ?? false
|
||||
isWide.value = wideMql?.matches ?? false
|
||||
// desktop = 既非 mobile 也非 tablet（≥ 1024）
|
||||
isDesktop.value = !isMobile.value && !isTablet.value
|
||||
}
|
||||
|
||||
// sync 是稳定的函数引用，3 个 mql 共用同一 handler（每个 mql 独立 add/remove）。
|
||||
onMounted(() => {
|
||||
sync()
|
||||
mobileMql?.addEventListener('change', sync)
|
||||
tabletMql?.addEventListener('change', sync)
|
||||
wideMql?.addEventListener('change', sync)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
mobileMql?.removeEventListener('change', sync)
|
||||
tabletMql?.removeEventListener('change', sync)
|
||||
wideMql?.removeEventListener('change', sync)
|
||||
})
|
||||
|
||||
return { isMobile, isTablet, isDesktop, isWide }
|
||||
}
|
||||
|
||||
// ponytail self-check: 断点边界互斥性。运行时调用 sync() 后，
|
||||
// isMobile/isTablet/isDesktop 三者有且仅有一个为 true（基于互斥的
|
||||
// matchMedia 查询）。trivial 互斥逻辑，不另立测试文件。
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
/**
|
||||
* Bitable field render / type-conversion utilities (U2).
|
||||
*
|
||||
* Pure functions — no Vue, no store, no I/O. Safe to unit-test in isolation.
|
||||
*
|
||||
* `checkTypeCompatibility` implements the conversion matrix from the U2 spec:
|
||||
* - text <-> select/multiselect: compatible (values double as options)
|
||||
* - number -> text: compatible
|
||||
* - text -> number: compatible only if every non-empty value parses as a number
|
||||
* - date -> text: compatible (ISO string)
|
||||
* - text -> date: compatible only if every non-empty value is ISO-date-shaped
|
||||
* - attachment/image/formula/lookup -> anything: NOT compatible (structured data)
|
||||
* - anything -> attachment/image/formula/lookup: NOT compatible (can't synthesize)
|
||||
* - select <-> multiselect: compatible (shared option list, single value <-> [single])
|
||||
*
|
||||
* ponytail: unlisted pairs are blocked conservatively. Ceiling: a few safe pairs
|
||||
* (e.g. number -> select) are also blocked to keep the matrix small and explicit;
|
||||
* upgrade path = extend COMPATIBLE_PAIRS / add a guard below with a test.
|
||||
*/
|
||||
|
||||
import type { FieldType } from '@/api/bitable'
|
||||
|
||||
export interface CompatibilityResult {
|
||||
compatible: boolean
|
||||
reason?: string
|
||||
}
|
||||
|
||||
// ISO-8601 date / date-time. Tolerant: date-only, with/without time + TZ.
|
||||
const ISO_DATE_RE =
|
||||
/^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/
|
||||
|
||||
const STRUCTURED_OR_CALC: ReadonlySet<FieldType> = new Set([
|
||||
'attachment',
|
||||
'image',
|
||||
'formula',
|
||||
'lookup',
|
||||
])
|
||||
|
||||
function isEmpty(v: unknown): boolean {
|
||||
return v == null || v === ''
|
||||
}
|
||||
|
||||
function isNumeric(v: unknown): boolean {
|
||||
if (typeof v === 'number') return Number.isFinite(v)
|
||||
if (typeof v === 'string') {
|
||||
const s = v.trim()
|
||||
if (s === '') return false
|
||||
// ponytail: Number() accepts hex ('0xFF') and ('' ) — guard explicitly.
|
||||
if (s.startsWith('0x') || s.startsWith('0X')) return false
|
||||
const n = Number(s)
|
||||
return !Number.isNaN(n) && Number.isFinite(n)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function isISODate(v: unknown): boolean {
|
||||
if (typeof v !== 'string') return false
|
||||
const s = v.trim()
|
||||
if (!ISO_DATE_RE.test(s)) return false
|
||||
const t = Date.parse(s)
|
||||
return !Number.isNaN(t)
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether existing field values can be carried over when the field's type
|
||||
* changes from `oldType` to `newType`.
|
||||
*
|
||||
* @param existingValues raw values collected from records for this field
|
||||
* (may include nulls / empty strings; they are ignored).
|
||||
*/
|
||||
export function checkTypeCompatibility(
|
||||
oldType: FieldType,
|
||||
newType: FieldType,
|
||||
existingValues: unknown[],
|
||||
): CompatibilityResult {
|
||||
if (oldType === newType) return { compatible: true }
|
||||
|
||||
// Structured / calculated source types cannot be converted away.
|
||||
if (STRUCTURED_OR_CALC.has(oldType)) {
|
||||
return {
|
||||
compatible: false,
|
||||
reason: `${oldType} 字段不支持类型转换（数据结构差异较大）`,
|
||||
}
|
||||
}
|
||||
// Cannot synthesize structured / calculated target types from plain values.
|
||||
if (STRUCTURED_OR_CALC.has(newType)) {
|
||||
return {
|
||||
compatible: false,
|
||||
reason: `不支持转换到 ${newType} 字段（无法由现有值构造）`,
|
||||
}
|
||||
}
|
||||
|
||||
const nonEmpty = existingValues.filter((v) => !isEmpty(v))
|
||||
|
||||
// text <-> select / multiselect
|
||||
if (
|
||||
(oldType === 'text' && (newType === 'select' || newType === 'multiselect')) ||
|
||||
((oldType === 'select' || oldType === 'multiselect') && newType === 'text')
|
||||
) {
|
||||
return { compatible: true }
|
||||
}
|
||||
|
||||
// select <-> multiselect (shared option list)
|
||||
if (
|
||||
(oldType === 'select' && newType === 'multiselect') ||
|
||||
(oldType === 'multiselect' && newType === 'select')
|
||||
) {
|
||||
return { compatible: true }
|
||||
}
|
||||
|
||||
// number -> text
|
||||
if (oldType === 'number' && newType === 'text') {
|
||||
return { compatible: true }
|
||||
}
|
||||
|
||||
// text -> number: all non-empty values must parse as numbers
|
||||
if (oldType === 'text' && newType === 'number') {
|
||||
if (!nonEmpty.every(isNumeric)) {
|
||||
return {
|
||||
compatible: false,
|
||||
reason: '存在非数字文本值，无法转换为数字类型',
|
||||
}
|
||||
}
|
||||
return { compatible: true }
|
||||
}
|
||||
|
||||
// date -> text (ISO string)
|
||||
if (oldType === 'date' && newType === 'text') {
|
||||
return { compatible: true }
|
||||
}
|
||||
|
||||
// text -> date: all non-empty values must be ISO dates
|
||||
if (oldType === 'text' && newType === 'date') {
|
||||
if (!nonEmpty.every(isISODate)) {
|
||||
return {
|
||||
compatible: false,
|
||||
reason: '存在非 ISO 日期格式的文本值，无法转换为日期类型',
|
||||
}
|
||||
}
|
||||
return { compatible: true }
|
||||
}
|
||||
|
||||
// number -> date / date -> number: ambiguous (epoch vs calendar) — block.
|
||||
// select -> number / number -> select already covered where applicable above;
|
||||
// any unlisted pair falls through to the conservative block below.
|
||||
return {
|
||||
compatible: false,
|
||||
reason: `不支持从 ${oldType} 转换到 ${newType}`,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,568 @@
|
|||
/**
|
||||
* Bitable grouping + conditional formatting utilities (U5 / R4).
|
||||
*
|
||||
* Pure functions — no Vue, no store, no I/O. Safe to unit-test in isolation.
|
||||
*
|
||||
* Three concerns:
|
||||
* 1. Conditional format rule matching (7 operators, first-match-wins)
|
||||
* 2. Grouping tree construction (nested levels + number-field aggregation)
|
||||
* 3. Color key → CSS var mapping (8 colors → --bitable-cf-<key>-{bg,fg})
|
||||
*
|
||||
* The 8-color palette + token names are defined in bitable-tokens.css.
|
||||
* Adding a color requires a token there + a `ColorKey` entry here + a
|
||||
* `ColorKey` Literal in `agentkit.bitable.view_config` (Python).
|
||||
*/
|
||||
|
||||
import type { IBitableField, IBitableRecord } from '@/api/bitable'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types — mirror src/agentkit/bitable/view_config.py (kept in sync by tests)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export type GroupDirection = 'asc' | 'desc'
|
||||
|
||||
export type ConditionalOperator =
|
||||
| 'equals'
|
||||
| 'not-equals'
|
||||
| 'contains'
|
||||
| 'is-empty'
|
||||
| 'greater-than'
|
||||
| 'less-than'
|
||||
| 'between'
|
||||
|
||||
export type ColorKey =
|
||||
| 'red'
|
||||
| 'orange'
|
||||
| 'yellow'
|
||||
| 'green'
|
||||
| 'blue'
|
||||
| 'purple'
|
||||
| 'gray'
|
||||
| 'neutral'
|
||||
|
||||
export interface GroupByItem {
|
||||
field_id: string
|
||||
direction: GroupDirection
|
||||
}
|
||||
|
||||
export interface ConditionalFormatRule {
|
||||
field_id: string
|
||||
operator: ConditionalOperator
|
||||
value: string
|
||||
color_key: ColorKey
|
||||
/** Default true for WCAG 1.4.1 — color alone is not enough. */
|
||||
bold: boolean
|
||||
/** Toggle rule without deleting it. Disabled rules never match. */
|
||||
enabled: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* View config sub-shape consumed by U5. The full View.config is
|
||||
* `Record<string, unknown>` (other keys: filters / sort / hidden_fields);
|
||||
* U5 only owns `group_by` and `conditional_formatting`.
|
||||
*/
|
||||
export interface ViewConfigU5 {
|
||||
group_by?: GroupByItem[]
|
||||
conditional_formatting?: ConditionalFormatRule[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Aggregated values for a group's number-type fields.
|
||||
* `sum` / `avg` are omitted (undefined) for non-number fields or empty groups.
|
||||
*/
|
||||
export interface GroupAggregation {
|
||||
count: number
|
||||
sum?: number
|
||||
avg?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* A node in the grouping tree. Root-level nodes correspond to distinct
|
||||
* values of the first group_by field; their `children` correspond to the
|
||||
* second group_by field, and so on. Leaf nodes (depth === group_by.length)
|
||||
* hold the actual records.
|
||||
*/
|
||||
export interface GroupNode {
|
||||
/** Field value that defines this group (e.g. "已完成"). Empty string for null/undefined values. */
|
||||
key: string
|
||||
/** Field id of the group_by level this node represents. */
|
||||
fieldId: string
|
||||
/** Sort direction of this level (for label display / future sort-aware rendering). */
|
||||
direction: GroupDirection
|
||||
/** Depth in the tree (0 = root level). */
|
||||
depth: number
|
||||
/** Records belonging to this group (leaf-level) or all descendant records (intermediate). */
|
||||
records: IBitableRecord[]
|
||||
/** Child groups for the next group_by level. Empty for leaf nodes. */
|
||||
children: GroupNode[]
|
||||
/** Number-field aggregations for this group's records (SUM/AVG). Keyed by field id. */
|
||||
aggregations: Record<string, GroupAggregation>
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Constants
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Max 3 group_by levels (matches Feishu / Twenty UX + backend MAX_GROUP_BY_FIELDS). */
|
||||
export const MAX_GROUP_BY_FIELDS = 3
|
||||
|
||||
/** Color key → CSS var name. Background variant (paired with dark text). */
|
||||
const COLOR_KEY_TO_BG_VAR: Record<ColorKey, string> = {
|
||||
red: 'var(--bitable-cf-red-bg)',
|
||||
orange: 'var(--bitable-cf-orange-bg)',
|
||||
yellow: 'var(--bitable-cf-yellow-bg)',
|
||||
green: 'var(--bitable-cf-green-bg)',
|
||||
blue: 'var(--bitable-cf-blue-bg)',
|
||||
purple: 'var(--bitable-cf-purple-bg)',
|
||||
gray: 'var(--bitable-cf-gray-bg)',
|
||||
neutral: 'var(--bitable-cf-neutral-bg)',
|
||||
}
|
||||
|
||||
/** Color key → CSS var name. Foreground variant (text/border on light bg). */
|
||||
const COLOR_KEY_TO_FG_VAR: Record<ColorKey, string> = {
|
||||
red: 'var(--bitable-cf-red-fg)',
|
||||
orange: 'var(--bitable-cf-orange-fg)',
|
||||
yellow: 'var(--bitable-cf-yellow-fg)',
|
||||
green: 'var(--bitable-cf-green-fg)',
|
||||
blue: 'var(--bitable-cf-blue-fg)',
|
||||
purple: 'var(--bitable-cf-purple-fg)',
|
||||
gray: 'var(--bitable-cf-gray-fg)',
|
||||
neutral: 'var(--bitable-cf-neutral-fg)',
|
||||
}
|
||||
|
||||
/** All 8 color keys — used by the editor to render swatches. */
|
||||
export const ALL_COLOR_KEYS: ColorKey[] = [
|
||||
'red',
|
||||
'orange',
|
||||
'yellow',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'gray',
|
||||
'neutral',
|
||||
]
|
||||
|
||||
/** All 7 operators — used by the editor to populate the operator dropdown. */
|
||||
export const ALL_OPERATORS: ConditionalOperator[] = [
|
||||
'equals',
|
||||
'not-equals',
|
||||
'contains',
|
||||
'is-empty',
|
||||
'greater-than',
|
||||
'less-than',
|
||||
'between',
|
||||
]
|
||||
|
||||
/** Operator display labels (Chinese). */
|
||||
export const OPERATOR_LABELS: Record<ConditionalOperator, string> = {
|
||||
equals: '等于',
|
||||
'not-equals': '不等于',
|
||||
contains: '包含',
|
||||
'is-empty': '为空',
|
||||
'greater-than': '大于',
|
||||
'less-than': '小于',
|
||||
between: '介于',
|
||||
}
|
||||
|
||||
/** Color display labels (Chinese). */
|
||||
export const COLOR_KEY_LABELS: Record<ColorKey, string> = {
|
||||
red: '红色',
|
||||
orange: '橙色',
|
||||
yellow: '黄色',
|
||||
green: '绿色',
|
||||
blue: '蓝色',
|
||||
purple: '紫色',
|
||||
gray: '灰色',
|
||||
neutral: '中性',
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Conditional format rule matching
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Map a color key to its CSS variable for cell background.
|
||||
*
|
||||
* Returns the empty string for unknown keys (defensive — the validator
|
||||
* rejects unknown keys at the API, but a stale local config might still
|
||||
* hold a retired key. Empty string falls back to default cell bg.)
|
||||
*/
|
||||
export function colorKeyToBgCssVar(colorKey: string): string {
|
||||
return COLOR_KEY_TO_BG_VAR[colorKey as ColorKey] ?? ''
|
||||
}
|
||||
|
||||
/** Map a color key to its CSS variable for text/border (foreground variant). */
|
||||
export function colorKeyToFgCssVar(colorKey: string): string {
|
||||
return COLOR_KEY_TO_FG_VAR[colorKey as ColorKey] ?? ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Compare a cell value against a single rule.
|
||||
*
|
||||
* Type coercion:
|
||||
* - numbers (field_type === 'number' or runtime number) compared numerically
|
||||
* for greater-than / less-than / between
|
||||
* - everything else compared as strings
|
||||
* - `is-empty` matches null / undefined / '' / [] (empty array for multiselect)
|
||||
*
|
||||
* `between` parses `value` as "min,max" (comma-separated). Whitespace tolerated.
|
||||
*/
|
||||
export function matchConditionalFormatRule(
|
||||
value: unknown,
|
||||
rule: ConditionalFormatRule,
|
||||
): boolean {
|
||||
if (!rule.enabled) return false
|
||||
|
||||
switch (rule.operator) {
|
||||
case 'is-empty':
|
||||
return isEmptyValue(value)
|
||||
|
||||
case 'equals':
|
||||
return stringifyValue(value) === rule.value
|
||||
|
||||
case 'not-equals':
|
||||
return stringifyValue(value) !== rule.value
|
||||
|
||||
case 'contains':
|
||||
return stringifyValue(value).includes(rule.value)
|
||||
|
||||
case 'greater-than':
|
||||
return compareNumeric(value, rule.value) > 0
|
||||
|
||||
case 'less-than':
|
||||
return compareNumeric(value, rule.value) < 0
|
||||
|
||||
case 'between': {
|
||||
const [minStr, maxStr] = parseBetweenRange(rule.value)
|
||||
if (minStr == null || maxStr == null) return false
|
||||
const min = Number(minStr)
|
||||
const max = Number(maxStr)
|
||||
const v = toNumber(value)
|
||||
if (v == null || !Number.isFinite(v)) return false
|
||||
return v >= min && v <= max
|
||||
}
|
||||
|
||||
default:
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the first matching rule for a cell value.
|
||||
*
|
||||
* Rules are evaluated in array order — first match wins (matches the
|
||||
* spec's "首条匹配 wins" contract and the user's reordering intent).
|
||||
*
|
||||
* Returns null if no rule matches or the rule list is empty.
|
||||
*/
|
||||
export function findFirstMatchingRule(
|
||||
value: unknown,
|
||||
rules: ConditionalFormatRule[] | undefined,
|
||||
): ConditionalFormatRule | null {
|
||||
return rules?.find((rule) => matchConditionalFormatRule(value, rule)) ?? null
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Grouping tree construction
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Build the nested grouping tree from records.
|
||||
*
|
||||
* - Records are bucketed by their value of the first group_by field,
|
||||
* then recursively by each subsequent field.
|
||||
* - Direction (asc/desc) is recorded on each node for label rendering;
|
||||
* node ordering within a level follows direction (asc: empty-key last).
|
||||
* - Leaf nodes (depth === group_by.length) hold the actual records.
|
||||
* - Aggregations are computed for every node (count + sum/avg for number fields).
|
||||
*
|
||||
* Returns an empty array if group_by is empty or records is empty.
|
||||
*/
|
||||
export function computeGroupingLevels(
|
||||
records: IBitableRecord[],
|
||||
groupBy: GroupByItem[] | undefined,
|
||||
fields: IBitableField[] = [],
|
||||
): GroupNode[] {
|
||||
if (!groupBy || groupBy.length === 0 || records.length === 0) return []
|
||||
|
||||
const numberFieldIds = new Set(
|
||||
fields.filter((f) => f.field_type === 'number').map((f) => f.id),
|
||||
)
|
||||
|
||||
return buildGroupLevel(records, groupBy, 0, numberFieldIds)
|
||||
}
|
||||
|
||||
function buildGroupLevel(
|
||||
records: IBitableRecord[],
|
||||
groupBy: GroupByItem[],
|
||||
depth: number,
|
||||
numberFieldIds: Set<string>,
|
||||
): GroupNode[] {
|
||||
const item = groupBy[depth]
|
||||
if (!item) {
|
||||
// Should not happen — leaf level is depth === groupBy.length, handled below.
|
||||
return []
|
||||
}
|
||||
|
||||
// Bucket records by their value of this field.
|
||||
const buckets = new Map<string, IBitableRecord[]>()
|
||||
for (const rec of records) {
|
||||
const key = stringifyValue(rec.values[item.field_id])
|
||||
const existing = buckets.get(key)
|
||||
if (existing) {
|
||||
existing.push(rec)
|
||||
} else {
|
||||
buckets.set(key, [rec])
|
||||
}
|
||||
}
|
||||
|
||||
// Build nodes, applying direction sort.
|
||||
const keys = Array.from(buckets.keys())
|
||||
sortGroupKeys(keys, item.direction)
|
||||
|
||||
return keys.map((key) => {
|
||||
const groupRecords = buckets.get(key)!
|
||||
const isLeaf = depth + 1 === groupBy.length
|
||||
const children = isLeaf
|
||||
? []
|
||||
: buildGroupLevel(groupRecords, groupBy, depth + 1, numberFieldIds)
|
||||
return {
|
||||
key,
|
||||
fieldId: item.field_id,
|
||||
direction: item.direction,
|
||||
depth,
|
||||
records: groupRecords,
|
||||
children,
|
||||
aggregations: aggregateGroup(groupRecords, numberFieldIds),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Sort group keys within a level by direction.
|
||||
*
|
||||
* Ascending: numeric values first (sorted numerically), then strings
|
||||
* (sorted lexicographically), empty string last.
|
||||
* Descending: reverse of the above (empty string still last — empty is
|
||||
* always last regardless of direction, matches Feishu UX).
|
||||
*/
|
||||
function sortGroupKeys(keys: string[], direction: GroupDirection): void {
|
||||
const numericKeys: { value: number; key: string }[] = []
|
||||
const stringKeys: string[] = []
|
||||
for (const k of keys) {
|
||||
if (k === '') continue
|
||||
const n = Number(k)
|
||||
// Number.isFinite excludes NaN/Infinity; '' already skipped above.
|
||||
if (Number.isFinite(n)) {
|
||||
numericKeys.push({ value: n, key: k })
|
||||
} else {
|
||||
stringKeys.push(k)
|
||||
}
|
||||
}
|
||||
numericKeys.sort((a, b) => a.value - b.value)
|
||||
stringKeys.sort((a, b) => a.localeCompare(b))
|
||||
|
||||
const ordered = [
|
||||
...numericKeys.map((n) => n.key),
|
||||
...stringKeys,
|
||||
]
|
||||
// Empty-key group is always last (regardless of direction).
|
||||
if (keys.includes('')) ordered.push('')
|
||||
|
||||
if (direction === 'desc') {
|
||||
// Reverse non-empty keys, keep empty at the end.
|
||||
const emptyTail = ordered[ordered.length - 1] === '' ? ordered.pop() : undefined
|
||||
ordered.reverse()
|
||||
if (emptyTail !== undefined) ordered.push(emptyTail)
|
||||
}
|
||||
|
||||
// Mutate in place (caller passes the keys array).
|
||||
keys.length = 0
|
||||
keys.push(...ordered)
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute count + sum/avg for every number field in the group.
|
||||
*
|
||||
* Sum/avg are computed only for number-type fields (per the spec). Other
|
||||
* field types only contribute to count. Null/undefined values are skipped
|
||||
* in the numeric aggregation but still counted in the record count.
|
||||
*/
|
||||
export function aggregateGroup(
|
||||
records: IBitableRecord[],
|
||||
numberFieldIds: Set<string>,
|
||||
): Record<string, GroupAggregation> {
|
||||
const result: Record<string, GroupAggregation> = {}
|
||||
if (records.length === 0) return result
|
||||
|
||||
for (const fieldId of numberFieldIds) {
|
||||
let sum = 0
|
||||
let count = 0
|
||||
for (const rec of records) {
|
||||
const v = toNumber(rec.values[fieldId])
|
||||
if (v != null && Number.isFinite(v)) {
|
||||
sum += v
|
||||
count++
|
||||
}
|
||||
}
|
||||
if (count > 0) {
|
||||
result[fieldId] = {
|
||||
count: records.length,
|
||||
sum,
|
||||
avg: sum / count,
|
||||
}
|
||||
} else {
|
||||
result[fieldId] = { count: records.length }
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Config feature flags
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function isGroupingEnabled(config: ViewConfigU5 | undefined): boolean {
|
||||
return !!config && Array.isArray(config.group_by) && config.group_by.length > 0
|
||||
}
|
||||
|
||||
export function isConditionalFormattingEnabled(
|
||||
config: ViewConfigU5 | undefined,
|
||||
): boolean {
|
||||
return (
|
||||
!!config &&
|
||||
Array.isArray(config.conditional_formatting) &&
|
||||
config.conditional_formatting.length > 0
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Coercion helpers (internal)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function isEmptyValue(v: unknown): boolean {
|
||||
if (v == null) return true
|
||||
if (typeof v === 'string') return v === ''
|
||||
if (Array.isArray(v)) return v.length === 0
|
||||
return false
|
||||
}
|
||||
|
||||
function stringifyValue(v: unknown): string {
|
||||
if (v == null) return ''
|
||||
if (typeof v === 'string') return v
|
||||
if (typeof v === 'number' || typeof v === 'boolean') return String(v)
|
||||
if (Array.isArray(v)) return v.map(stringifyValue).join(', ')
|
||||
// ponytail: objects (e.g. attachment metadata) — JSON-stringify for equals/contains.
|
||||
// Ceiling: deep object equality is not supported; users should use is-empty for objects.
|
||||
try {
|
||||
return JSON.stringify(v)
|
||||
} catch {
|
||||
return String(v)
|
||||
}
|
||||
}
|
||||
|
||||
function toNumber(v: unknown): number | null {
|
||||
if (typeof v === 'number') return Number.isFinite(v) ? v : null
|
||||
if (typeof v === 'string') {
|
||||
const trimmed = v.trim()
|
||||
if (trimmed === '') return null
|
||||
const n = Number(trimmed)
|
||||
return !Number.isNaN(n) && Number.isFinite(n) ? n : null
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function compareNumeric(value: unknown, ruleValue: string): number {
|
||||
const a = toNumber(value)
|
||||
const b = toNumber(ruleValue)
|
||||
if (a == null || b == null) return 0 // non-numeric → no match for gt/lt
|
||||
return a - b
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a "min,max" range string for the `between` operator.
|
||||
*
|
||||
* Tolerates whitespace around the comma. Returns [null, null] if the
|
||||
* format is wrong or either side is non-numeric.
|
||||
*/
|
||||
function parseBetweenRange(value: string): [string | null, string | null] {
|
||||
const parts = value.split(',')
|
||||
if (parts.length !== 2) return [null, null]
|
||||
const minStr = parts[0].trim()
|
||||
const maxStr = parts[1].trim()
|
||||
if (minStr === '' || maxStr === '') return [null, null]
|
||||
if (Number.isNaN(Number(minStr)) || Number.isNaN(Number(maxStr))) return [null, null]
|
||||
return [minStr, maxStr]
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// ponytail self-check: run a smoke check that the matcher + grouper work on
|
||||
// a tiny fixture. Loaded eagerly on import in dev builds to catch logic
|
||||
// regressions early. Trivial logic — no framework, no fixtures.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function _selfCheck(): void {
|
||||
// Conditional format — equals matches
|
||||
const r1 = matchConditionalFormatRule('done', {
|
||||
field_id: 'f1',
|
||||
operator: 'equals',
|
||||
value: 'done',
|
||||
color_key: 'green',
|
||||
bold: true,
|
||||
enabled: true,
|
||||
})
|
||||
if (!r1) throw new Error('groupingRulesUtils self-check: equals failed')
|
||||
|
||||
// First-match-wins
|
||||
const rules: ConditionalFormatRule[] = [
|
||||
{
|
||||
field_id: 'f1',
|
||||
operator: 'equals',
|
||||
value: 'done',
|
||||
color_key: 'green',
|
||||
bold: true,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
field_id: 'f1',
|
||||
operator: 'equals',
|
||||
value: 'done',
|
||||
color_key: 'red',
|
||||
bold: true,
|
||||
enabled: true,
|
||||
},
|
||||
]
|
||||
const first = findFirstMatchingRule('done', rules)
|
||||
if (first?.color_key !== 'green') {
|
||||
throw new Error('groupingRulesUtils self-check: first-match-wins failed')
|
||||
}
|
||||
|
||||
// Disabled rule never matches
|
||||
const disabledMatch = matchConditionalFormatRule('done', {
|
||||
field_id: 'f1',
|
||||
operator: 'equals',
|
||||
value: 'done',
|
||||
color_key: 'green',
|
||||
bold: true,
|
||||
enabled: false,
|
||||
})
|
||||
if (disabledMatch) {
|
||||
throw new Error('groupingRulesUtils self-check: disabled rule matched')
|
||||
}
|
||||
|
||||
// Color var mapping
|
||||
if (colorKeyToBgCssVar('red') !== 'var(--bitable-cf-red-bg)') {
|
||||
throw new Error('groupingRulesUtils self-check: colorKeyToBgCssVar failed')
|
||||
}
|
||||
}
|
||||
|
||||
// Run the self-check once on module load. Wrapped in try/catch so a
|
||||
// production failure doesn't crash the whole app — the error is logged.
|
||||
if (typeof window !== 'undefined') {
|
||||
try {
|
||||
_selfCheck()
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('[groupingRulesUtils] self-check failed:', e)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
/**
|
||||
* RecordDetailDrawer pure helpers (U3 / R2).
|
||||
*
|
||||
* Pure functions — no Vue, no store, no I/O. Safe to unit-test in isolation.
|
||||
*
|
||||
* Responsibilities:
|
||||
* - formatFieldValue: text/number/date/select/multiselect/formula/lookup → display string
|
||||
* - getAttachmentFileList / getImageThumbnailList: normalize attachment/image
|
||||
* field values (which may be IAttachmentMeta[] or stale legacy shapes) into
|
||||
* a uniform {name, url} / {url, alt} list for the drawer.
|
||||
* - getRecordTitle: first text-type field value, fallback "未命名记录".
|
||||
* - isFieldEditable: user-owned fields are editable; agent-owned + formula +
|
||||
* lookup are read-only (formula/lookup are computed, not user data).
|
||||
* - getDrawerWidth: '100vw' on mobile, else 480px (≤10 fields) / 640px (>10).
|
||||
*
|
||||
* ponytail: width returns a CSS var() reference, not a hardcoded px value, so
|
||||
* the design token in bitable-tokens.css stays the single source of truth.
|
||||
* Ceiling: the field-count threshold (10) is hardcoded per KTD4 spec; if the
|
||||
* token name or threshold changes, update both here and the spec.
|
||||
*/
|
||||
|
||||
import type { FieldType, IAttachmentMeta, IBitableField, IBitableRecord } from '@/api/bitable'
|
||||
|
||||
const DRAWER_FIELD_COUNT_THRESHOLD = 10
|
||||
|
||||
export interface IAttachmentFileView {
|
||||
name: string
|
||||
url: string
|
||||
size?: number
|
||||
}
|
||||
|
||||
export interface IImageView {
|
||||
url: string
|
||||
alt?: string
|
||||
}
|
||||
|
||||
function isEmptyValue(v: unknown): boolean {
|
||||
return v == null || v === '' || (Array.isArray(v) && v.length === 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a field value for read-only display in the drawer.
|
||||
*
|
||||
* - text/number/formula/lookup: coerce to string, empty → '—'
|
||||
* - date: pass through (ISO string); the drawer may format further, but we
|
||||
* return the raw stored value so callers can apply a consistent formatter.
|
||||
* ponytail: no dayjs dependency here — the drawer renders the ISO string
|
||||
* directly to avoid pulling a date lib into a pure helper. Upgrade path:
|
||||
* if a shared date formatter exists, call it from the drawer component.
|
||||
* - select/multiselect: return label joined by ' / '; empty → '—'
|
||||
* - attachment/image: return `${n} 个文件` summary (the drawer renders the
|
||||
* file list separately via getAttachmentFileList / getImageThumbnailList)
|
||||
*/
|
||||
export function formatFieldValue(
|
||||
value: unknown,
|
||||
fieldType: FieldType,
|
||||
options?: { labelOf?: (v: string) => string },
|
||||
): string {
|
||||
if (isEmptyValue(value)) return '—'
|
||||
|
||||
switch (fieldType) {
|
||||
case 'text':
|
||||
case 'number':
|
||||
case 'formula':
|
||||
case 'lookup':
|
||||
return String(value)
|
||||
case 'date':
|
||||
return typeof value === 'string' ? value : String(value)
|
||||
case 'select': {
|
||||
const v = value as string
|
||||
return options?.labelOf ? options.labelOf(v) : v
|
||||
}
|
||||
case 'multiselect': {
|
||||
const arr = value as string[]
|
||||
const labels = arr.map((v) => (options?.labelOf ? options.labelOf(v) : v))
|
||||
return labels.join(' / ')
|
||||
}
|
||||
case 'attachment':
|
||||
case 'image': {
|
||||
const arr = value as IAttachmentMeta[]
|
||||
return `${arr.length} 个文件`
|
||||
}
|
||||
default:
|
||||
return String(value)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize an attachment field value into a uniform file view list.
|
||||
*
|
||||
* Accepts IAttachmentMeta[] (the canonical shape). Defensively tolerates
|
||||
* legacy / malformed entries (missing url → skipped, missing filename →
|
||||
* fallback to stored_name or '未命名文件').
|
||||
*/
|
||||
export function getAttachmentFileList(value: unknown): IAttachmentFileView[] {
|
||||
if (!Array.isArray(value)) return []
|
||||
const out: IAttachmentFileView[] = []
|
||||
for (const raw of value) {
|
||||
if (!raw || typeof raw !== 'object') continue
|
||||
const m = raw as Partial<IAttachmentMeta>
|
||||
if (!m.url) continue
|
||||
out.push({
|
||||
name: m.filename || m.stored_name || '未命名文件',
|
||||
url: m.url,
|
||||
size: typeof m.size === 'number' ? m.size : undefined,
|
||||
})
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize an image field value into a uniform thumbnail view list.
|
||||
*
|
||||
* Reuses getAttachmentFileList logic; image thumbnails use the same
|
||||
* IAttachmentMeta shape (url + filename). `alt` falls back to filename.
|
||||
*/
|
||||
export function getImageThumbnailList(value: unknown): IImageView[] {
|
||||
return getAttachmentFileList(value).map((f) => ({
|
||||
url: f.url,
|
||||
alt: f.name,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the record's title — the value of the first text-type field, or
|
||||
* "未命名记录" if none exists / value is empty.
|
||||
*/
|
||||
export function getRecordTitle(record: IBitableRecord, fields: IBitableField[]): string {
|
||||
const firstText = fields.find((f) => f.field_type === 'text')
|
||||
if (!firstText) return '未命名记录'
|
||||
const v = record.values[firstText.id]
|
||||
if (isEmptyValue(v)) return '未命名记录'
|
||||
return String(v)
|
||||
}
|
||||
|
||||
/**
|
||||
* A field is editable in the drawer iff:
|
||||
* - owner === 'user' (agent-owned columns are managed by the backend / agents)
|
||||
* - field_type is NOT formula (computed) or lookup (derived from another table)
|
||||
*
|
||||
* attachment/image are NOT inline-editable from the drawer in P0 (file upload
|
||||
* flow is out of scope for U3 — ponytail: ceiling noted, upgrade path = add
|
||||
* an upload control in a follow-up U-ID).
|
||||
*/
|
||||
export function isFieldEditable(field: IBitableField): boolean {
|
||||
if (field.owner !== 'user') return false
|
||||
if (field.field_type === 'formula' || field.field_type === 'lookup') return false
|
||||
if (field.field_type === 'attachment' || field.field_type === 'image') return false
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute the drawer width.
|
||||
*
|
||||
* @param fieldCount number of fields rendered in the body
|
||||
* @param isMobile from useResponsiveBreakpoint — full-screen overlay when true
|
||||
* @returns a CSS value string. On desktop/tablet, returns a var() reference
|
||||
* to --bitable-drawer-width (≤10 fields) or --bitable-drawer-width-wide
|
||||
* (>10 fields). On mobile, returns '100vw'.
|
||||
*/
|
||||
export function getDrawerWidth(fieldCount: number, isMobile: boolean): string {
|
||||
if (isMobile) return '100vw'
|
||||
return fieldCount > DRAWER_FIELD_COUNT_THRESHOLD
|
||||
? 'var(--bitable-drawer-width-wide)'
|
||||
: 'var(--bitable-drawer-width)'
|
||||
}
|
||||
|
||||
// ponytail self-check: width threshold + var() reference. The two var() names
|
||||
// must match bitable-tokens.css exactly. Trivial string logic, no test file.
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* View type metadata for the ViewSwitcher dropdown (U4 / R3).
|
||||
*
|
||||
* Pure data + lookup — no Vue, no store, no I/O. Safe to unit-test in
|
||||
* isolation.
|
||||
*
|
||||
* v1 ships only `grid`; the other four types (kanban/gallery/gantt/form) are
|
||||
* rendered as disabled menu items with a "规划中" tooltip so users can see the
|
||||
* roadmap without hitting a dead-end click. The "规划中" string is hardcoded
|
||||
* per spec (no i18n lookup, no config) — it is a temporary placeholder that
|
||||
* gets replaced per-type when each view ships.
|
||||
*
|
||||
* ponytail: icon is a Vue component ref (Ant Design icon), typed as `Component`
|
||||
* so the dropdown can render it via `<component :is="meta.icon" />`. Ceiling:
|
||||
* the list is static; adding a new view type means appending here + flipping
|
||||
* `disabled` to false when implemented.
|
||||
*/
|
||||
|
||||
import type { Component } from 'vue'
|
||||
import {
|
||||
TableOutlined,
|
||||
AppstoreOutlined,
|
||||
PictureOutlined,
|
||||
BarChartOutlined,
|
||||
FormOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import type { ViewType } from '@/api/bitable'
|
||||
|
||||
export interface ViewTypeMeta {
|
||||
/** Backend view_type discriminator (matches ViewType union + ViewType enum). */
|
||||
viewType: ViewType
|
||||
/** Chinese label shown in the dropdown. */
|
||||
label: string
|
||||
/** Ant Design icon component rendered before the label. */
|
||||
icon: Component
|
||||
/** Disabled = not yet implemented in v1; shown greyed-out with tooltip. */
|
||||
disabled: boolean
|
||||
/** Tooltip shown on hover for disabled items (hardcoded "规划中"). */
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Ordered view type list for the "新建视图" dropdown.
|
||||
*
|
||||
* Order matches the U4 spec: grid (enabled) → kanban / gallery / gantt / form
|
||||
* (disabled, "规划中"). Only `grid` is creatable in v1.
|
||||
*/
|
||||
export const VIEW_TYPE_LIST: ViewTypeMeta[] = [
|
||||
{ viewType: 'grid', label: '表格', icon: TableOutlined, disabled: false },
|
||||
{ viewType: 'kanban', label: '看板', icon: AppstoreOutlined, disabled: true, tooltip: '规划中' },
|
||||
{ viewType: 'gallery', label: '画廊', icon: PictureOutlined, disabled: true, tooltip: '规划中' },
|
||||
{ viewType: 'gantt', label: '甘特', icon: BarChartOutlined, disabled: true, tooltip: '规划中' },
|
||||
{ viewType: 'form', label: '表单', icon: FormOutlined, disabled: true, tooltip: '规划中' },
|
||||
]
|
||||
|
||||
/**
|
||||
* Look up the metadata for a given view type.
|
||||
*
|
||||
* Falls back to `grid` (the only enabled v1 type) for unknown values — this
|
||||
* keeps the UI robust against a stale/forward-incompatible view_type returned
|
||||
* by the backend after an upgrade.
|
||||
*/
|
||||
export function getViewTypeMeta(viewType: ViewType): ViewTypeMeta {
|
||||
return VIEW_TYPE_LIST.find((m) => m.viewType === viewType) ?? VIEW_TYPE_LIST[0]
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import { createApp } from 'vue'
|
|||
import { createPinia } from 'pinia'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
import './styles'
|
||||
import './styles/bitable-tokens.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { useAuthStore } from './stores/auth'
|
||||
|
|
|
|||
|
|
@ -36,6 +36,16 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
const nextCursor = ref<string | null>(null)
|
||||
const recalcPendingCount = ref(0)
|
||||
|
||||
// U3: RecordDetailDrawer state. `currentRecordId` is the drawer's open
|
||||
// signal — non-null means the drawer is open. `currentRecord` is the
|
||||
// fully-hydrated record fetched by record_id (so the drawer sees agent
|
||||
// columns even if the grid view hides them).
|
||||
const currentRecordId = ref<string | null>(null)
|
||||
const currentRecord = ref<IBitableRecord | null>(null)
|
||||
const recordDetailLoading = ref(false)
|
||||
const recordDetailError = ref<string | null>(null)
|
||||
const recordDetailNotFound = ref(false)
|
||||
|
||||
// Polling timer for formula recalc status
|
||||
let _pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
const POLL_INTERVAL = 2000 // 2s per plan
|
||||
|
|
@ -317,10 +327,10 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
}
|
||||
}
|
||||
|
||||
/** Update an existing field */
|
||||
/** Update an existing field (U2: field_type added for inline type change) */
|
||||
async function updateField(
|
||||
fieldId: string,
|
||||
data: { name?: string; config?: Record<string, unknown> },
|
||||
data: { name?: string; field_type?: FieldType; config?: Record<string, unknown> },
|
||||
): Promise<IBitableField | null> {
|
||||
try {
|
||||
const resp = await bitableApi.updateField(fieldId, data)
|
||||
|
|
@ -391,6 +401,130 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
}
|
||||
}
|
||||
|
||||
// --- U3: Record detail drawer ---
|
||||
|
||||
/**
|
||||
* Open the record detail drawer for a given record id.
|
||||
*
|
||||
* Sets the drawer open signal and triggers an async fetch of the full
|
||||
* record (by record_id) so the drawer sees all fields including agent-
|
||||
* owned columns that may be hidden in the grid view.
|
||||
*
|
||||
* ponytail: fetch is fire-and-forget — `currentRecord` is null until the
|
||||
* request resolves, which the drawer renders as a skeleton (LoadingState).
|
||||
* Ceiling: no debounce; rapid row-clicks fire one fetch per click. The
|
||||
* drawer's watch on `currentRecordId` short-circuits stale fetches by
|
||||
* checking the id still matches when the response arrives.
|
||||
*/
|
||||
function openRecordDetail(recordId: string): void {
|
||||
if (currentRecordId.value === recordId) return
|
||||
currentRecordId.value = recordId
|
||||
currentRecord.value = null
|
||||
recordDetailLoading.value = true
|
||||
recordDetailError.value = null
|
||||
recordDetailNotFound.value = false
|
||||
void fetchRecordDetail(recordId)
|
||||
}
|
||||
|
||||
/** Close the drawer and clear all drawer state. */
|
||||
function closeRecordDetail(): void {
|
||||
currentRecordId.value = null
|
||||
currentRecord.value = null
|
||||
recordDetailLoading.value = false
|
||||
recordDetailError.value = null
|
||||
recordDetailNotFound.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a single record by id.
|
||||
*
|
||||
* The bitable list endpoint doesn't expose a single-record GET, so this
|
||||
* reuses `listRecords` and searches the result by id. 404 / empty result →
|
||||
* notFound state; network error → error state (drawer shows ErrorState +
|
||||
* retry).
|
||||
*
|
||||
* ponytail: fast path — the record is in the currently-loaded page
|
||||
* (`records.value`), no network round-trip. Slow path — re-query the first
|
||||
* 100 records and search. Ceiling: a record on a later page (cursor > 100)
|
||||
* would 404-false. Acceptable for P0 because the drawer is opened from a
|
||||
* visible grid row, so the record is always in the loaded page. Upgrade
|
||||
* path: add GET /records/{id} when cross-page detail access is needed.
|
||||
*/
|
||||
async function fetchRecordDetail(recordId: string): Promise<void> {
|
||||
if (!currentTable.value) {
|
||||
recordDetailLoading.value = false
|
||||
recordDetailError.value = '未选择数据表'
|
||||
return
|
||||
}
|
||||
recordDetailLoading.value = true
|
||||
recordDetailError.value = null
|
||||
recordDetailNotFound.value = false
|
||||
try {
|
||||
let found: IBitableRecord | null = null
|
||||
// Fast path: record is in the currently-loaded page.
|
||||
const local = records.value.find((r) => r.id === recordId)
|
||||
if (local) {
|
||||
found = local
|
||||
} else if (currentTable.value) {
|
||||
// Slow path: re-query the first 100 records and search by id.
|
||||
// (See function docstring — ceiling noted.)
|
||||
const resp = await bitableApi.listRecords(currentTable.value.id, { limit: 100 })
|
||||
found = (resp.records || []).find((r) => r.id === recordId) ?? null
|
||||
}
|
||||
|
||||
// Stale-response guard: if the user clicked another row while this
|
||||
// fetch was in flight, drop the result.
|
||||
if (currentRecordId.value !== recordId) return
|
||||
|
||||
if (!found) {
|
||||
recordDetailNotFound.value = true
|
||||
} else {
|
||||
currentRecord.value = found
|
||||
}
|
||||
} catch (err) {
|
||||
if (currentRecordId.value !== recordId) return
|
||||
recordDetailError.value = err instanceof Error ? err.message : '加载记录详情失败'
|
||||
} finally {
|
||||
if (currentRecordId.value === recordId) {
|
||||
recordDetailLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save user-edited field values from the drawer.
|
||||
*
|
||||
* Merges the edited user-owned fields with the EXISTING agent-owned field
|
||||
* values from `currentRecord` before PATCHing. This preserves agent
|
||||
* columns: the backend's update_record_values does a full-replace of the
|
||||
* values dict, so we send the agent columns back as-is rather than
|
||||
* dropping them. (Spec: "upsert 保留 agent 列" — implemented client-side
|
||||
* to avoid adding a new backend endpoint in U3.)
|
||||
*
|
||||
* Returns true on success. On success, both `currentRecord` and the
|
||||
* matching entry in `records` are updated with the server response.
|
||||
*/
|
||||
async function updateRecordFields(
|
||||
recordId: string,
|
||||
editedFields: Record<string, unknown>,
|
||||
): Promise<boolean> {
|
||||
const base = currentRecord.value?.values ?? {}
|
||||
const merged: Record<string, unknown> = { ...base, ...editedFields }
|
||||
try {
|
||||
const resp = await bitableApi.updateRecord(recordId, merged)
|
||||
currentRecord.value = resp.record
|
||||
const idx = records.value.findIndex((r) => r.id === recordId)
|
||||
if (idx >= 0) records.value[idx] = resp.record
|
||||
return true
|
||||
} catch (err) {
|
||||
notification.error({
|
||||
message: '保存失败',
|
||||
description: err instanceof Error ? err.message : String(err),
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// --- View management (U5c) ---
|
||||
|
||||
/** Create a new view for the current table */
|
||||
|
|
@ -442,6 +576,32 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* U5: merge group_by + conditional_formatting into the view's existing
|
||||
* config and PATCH it. Preserves other config keys (filters / sort /
|
||||
* hidden_fields) — only the U5 sub-keys are replaced.
|
||||
*
|
||||
* The backend route layer validates the U5 sub-keys via Pydantic and
|
||||
* returns 422 on invalid input (caught here as a notification).
|
||||
*/
|
||||
async function updateViewConfig(
|
||||
viewId: string,
|
||||
u5Config: { group_by?: unknown[]; conditional_formatting?: unknown[] },
|
||||
): Promise<void> {
|
||||
const existing = views.value.find((v) => v.id === viewId)
|
||||
// Merge: start from existing config, overwrite only the U5 keys present.
|
||||
const mergedConfig: Record<string, unknown> = {
|
||||
...(existing?.config ?? {}),
|
||||
}
|
||||
if ('group_by' in u5Config) {
|
||||
mergedConfig.group_by = u5Config.group_by
|
||||
}
|
||||
if ('conditional_formatting' in u5Config) {
|
||||
mergedConfig.conditional_formatting = u5Config.conditional_formatting
|
||||
}
|
||||
await updateView(viewId, { config: mergedConfig })
|
||||
}
|
||||
|
||||
/** Switch to a view — applies its config to the records query */
|
||||
async function switchView(viewId: string): Promise<void> {
|
||||
const view = views.value.find((v) => v.id === viewId)
|
||||
|
|
@ -450,6 +610,41 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
await refreshRecords()
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a view (U6: R15a). Removes it from local state on success.
|
||||
* If the deleted view was active, switches to the first remaining view.
|
||||
* Backend rejects deleting the last view of a table with 409 Conflict.
|
||||
* Returns true on success, false on error (notification shown).
|
||||
*/
|
||||
async function deleteView(viewId: string): Promise<boolean> {
|
||||
try {
|
||||
await bitableApi.deleteView(viewId)
|
||||
const wasActive = currentView.value?.id === viewId
|
||||
views.value = views.value.filter((v) => v.id !== viewId)
|
||||
if (wasActive) {
|
||||
// Switch to the first remaining view, if any.
|
||||
currentView.value = views.value[0] ?? null
|
||||
await refreshRecords()
|
||||
}
|
||||
return true
|
||||
} catch (err) {
|
||||
const apiErr = err as { status?: number }
|
||||
// 409 = last view of the table — backend forbids deletion.
|
||||
if (apiErr.status === 409) {
|
||||
notification.warning({
|
||||
message: '无法删除',
|
||||
description: '至少保留一个视图，不能删除最后一个视图。',
|
||||
})
|
||||
} else {
|
||||
notification.error({
|
||||
message: '删除视图失败',
|
||||
description: err instanceof Error ? err.message : String(err),
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Formula recalc polling (R7) ---
|
||||
|
||||
/** Start polling for formula recalc status */
|
||||
|
|
@ -521,6 +716,12 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
error,
|
||||
nextCursor,
|
||||
recalcPendingCount,
|
||||
// U3: record detail drawer state
|
||||
currentRecordId,
|
||||
currentRecord,
|
||||
recordDetailLoading,
|
||||
recordDetailError,
|
||||
recordDetailNotFound,
|
||||
// Getters
|
||||
formulaFields,
|
||||
hasFormulaFields,
|
||||
|
|
@ -543,9 +744,16 @@ export const useBitableStore = defineStore('bitable', () => {
|
|||
deleteField,
|
||||
hideField,
|
||||
refreshRecords,
|
||||
// U3: record detail drawer actions
|
||||
openRecordDetail,
|
||||
closeRecordDetail,
|
||||
fetchRecordDetail,
|
||||
updateRecordFields,
|
||||
createView,
|
||||
updateView,
|
||||
updateViewConfig,
|
||||
switchView,
|
||||
deleteView,
|
||||
stopPolling,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
/**
|
||||
* Bitable Design Tokens — CSS Custom Properties
|
||||
*
|
||||
* 用 `--bitable-*` 前缀避免与 Ant Design Vue 4 全局 token 冲突。
|
||||
* 颜色/间距/圆角/字号 4 类 token + 抽屉宽度。Phase 2 (U2-U5) 所有
|
||||
* bitable 组件必须引用本文件的 var()，禁止硬编码 hex。
|
||||
*
|
||||
* 颜色 token 映射到全局 tokens.css（已支持暗色主题），bitable 组件
|
||||
* 不直接维护暗色覆写，跟随全局主题切换。
|
||||
*
|
||||
* 条件格式 8 色（--bitable-cf-*）：每色提供 -bg（浅底）+ -fg（深字）配对。
|
||||
* -bg 用于单元格/chip 背景（配深色文本，对比度 ~12:1）
|
||||
* -fg 用于文本/边框/图标（在白底上对比度 ≥4.5:1，WCAG AA）
|
||||
* 颜色语义 key: red | orange | yellow | green | blue | purple | gray | neutral
|
||||
*/
|
||||
:root {
|
||||
/* ── 颜色：基础语义（映射全局 token，跟随暗色主题） ── */
|
||||
--bitable-color-primary: var(--color-primary, #1a1a1a);
|
||||
--bitable-color-bg: var(--bg-primary, #ffffff);
|
||||
--bitable-color-bg-secondary: var(--bg-secondary, #fbfbfa);
|
||||
--bitable-color-bg-tertiary: var(--bg-tertiary, #f7f7f5);
|
||||
--bitable-color-text: var(--text-primary, #1a1a1a);
|
||||
--bitable-color-text-secondary: var(--text-secondary, #4a4a4a);
|
||||
--bitable-color-text-tertiary: var(--text-tertiary, #6b6b6a);
|
||||
--bitable-color-text-placeholder: var(--text-placeholder, #9b9b9a);
|
||||
--bitable-color-border: var(--border-color, #ededec);
|
||||
--bitable-color-border-hover: var(--border-color-hover, #dfdfde);
|
||||
--bitable-color-border-split: var(--border-color-split, #f2f2f0);
|
||||
|
||||
/* ── 颜色：条件格式 8 色（语义 key → bg/fg 配对） ── */
|
||||
/* red */
|
||||
--bitable-cf-red-bg: #fee2e2;
|
||||
--bitable-cf-red-fg: #b91c1c;
|
||||
/* orange */
|
||||
--bitable-cf-orange-bg: #ffedd5;
|
||||
--bitable-cf-orange-fg: #9a3412;
|
||||
/* yellow（深金以保证 AA） */
|
||||
--bitable-cf-yellow-bg: #fef9c3;
|
||||
--bitable-cf-yellow-fg: #a16207;
|
||||
/* green */
|
||||
--bitable-cf-green-bg: #dcfce7;
|
||||
--bitable-cf-green-fg: #15803d;
|
||||
/* blue */
|
||||
--bitable-cf-blue-bg: #dbeafe;
|
||||
--bitable-cf-blue-fg: #1d4ed8;
|
||||
/* purple */
|
||||
--bitable-cf-purple-bg: #f3e8ff;
|
||||
--bitable-cf-purple-fg: #7e22ce;
|
||||
/* gray */
|
||||
--bitable-cf-gray-bg: #f3f4f6;
|
||||
--bitable-cf-gray-fg: #374151;
|
||||
/* neutral（与 gray 区分：更纯的中性灰） */
|
||||
--bitable-cf-neutral-bg: #f5f5f4;
|
||||
--bitable-cf-neutral-fg: #404040;
|
||||
|
||||
/* ── 间距 ── */
|
||||
--bitable-spacing-xs: 4px;
|
||||
--bitable-spacing-sm: 8px;
|
||||
--bitable-spacing-md: 12px;
|
||||
--bitable-spacing-lg: 16px;
|
||||
--bitable-spacing-xl: 24px;
|
||||
|
||||
/* ── 圆角 ── */
|
||||
--bitable-radius-sm: 4px;
|
||||
--bitable-radius-md: 6px;
|
||||
--bitable-radius-lg: 8px;
|
||||
|
||||
/* ── 字号 ── */
|
||||
--bitable-font-xs: 12px;
|
||||
--bitable-font-sm: 13px;
|
||||
--bitable-font-md: 14px;
|
||||
--bitable-font-lg: 16px;
|
||||
|
||||
/* ── 抽屉宽度（KTD4: ≤10 字段 480px，>10 字段 640px） ── */
|
||||
--bitable-drawer-width: 480px;
|
||||
--bitable-drawer-width-wide: 640px;
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<main class="bitable-file-detail-view__main">
|
||||
<div v-if="!store.currentTable" class="bitable-file-detail-view__placeholder">
|
||||
<TableOutlined style="font-size: 48px; color: var(--text-placeholder)" />
|
||||
<TableOutlined style="font-size: 48px; color: var(--bitable-color-text-placeholder)" />
|
||||
<p>请选择左侧的数据表，或点击 + 新建数据表</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -63,9 +63,11 @@
|
|||
<ViewSwitcher
|
||||
:views="store.views"
|
||||
:active-view-id="store.currentView?.id ?? null"
|
||||
:creating="viewCreating"
|
||||
@switch="handleSwitchView"
|
||||
@create="handleCreateView"
|
||||
@config="viewConfigOpen = true"
|
||||
@delete="handleDeleteView"
|
||||
/>
|
||||
|
||||
<div class="bitable-file-detail-view__grid-container">
|
||||
|
|
@ -127,7 +129,7 @@ import {
|
|||
SettingOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useBitableStore } from '@/stores/bitable'
|
||||
import type { IBitableField } from '@/api/bitable'
|
||||
import type { IBitableField, ViewType } from '@/api/bitable'
|
||||
import TableViewList from '@/components/bitable/TableViewList.vue'
|
||||
import BitableGrid from '@/components/bitable/BitableGrid.vue'
|
||||
import TableCreateModal from '@/components/bitable/TableCreateModal.vue'
|
||||
|
|
@ -143,6 +145,9 @@ const store = useBitableStore()
|
|||
const createModalOpen = ref(false)
|
||||
const fieldPanelOpen = ref(false)
|
||||
const viewConfigOpen = ref(false)
|
||||
// U4: createView POST in-flight flag — disables the "新建视图" button + shows
|
||||
// a spinner to prevent duplicate submits.
|
||||
const viewCreating = ref(false)
|
||||
|
||||
const fileId = computed(() => (route.params.fileId as string) ?? '')
|
||||
const tableId = computed(() => (route.params.tableId as string) ?? '')
|
||||
|
|
@ -225,8 +230,16 @@ function handleSwitchView(viewId: string): void {
|
|||
store.switchView(viewId)
|
||||
}
|
||||
|
||||
async function handleCreateView(): Promise<void> {
|
||||
// ponytail: simple prompt for view name; full create modal is overkill for v1
|
||||
// U6: delete the active view. The ViewSwitcher's a-popconfirm already asked
|
||||
// for confirmation; the store handles the 409 last-view case with a warning.
|
||||
async function handleDeleteView(viewId: string): Promise<void> {
|
||||
await store.deleteView(viewId)
|
||||
}
|
||||
|
||||
async function handleCreateView(viewType: ViewType = 'grid'): Promise<void> {
|
||||
// ponytail: simple prompt for view name; full create modal is overkill for v1.
|
||||
// viewType comes from the ViewSwitcher dropdown (U4) — defaults to 'grid'
|
||||
// for backward compatibility with any direct caller.
|
||||
let name = ''
|
||||
AModal.confirm({
|
||||
title: '新建视图',
|
||||
|
|
@ -239,7 +252,12 @@ async function handleCreateView(): Promise<void> {
|
|||
}),
|
||||
onOk: async () => {
|
||||
if (!name.trim()) return
|
||||
await store.createView(name.trim(), 'grid')
|
||||
viewCreating.value = true
|
||||
try {
|
||||
await store.createView(name.trim(), viewType)
|
||||
} finally {
|
||||
viewCreating.value = false
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -280,40 +298,40 @@ async function handleDeleteField(field: IBitableField): Promise<void> {
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary, #fff);
|
||||
background: var(--bitable-color-bg);
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid var(--border-color, #f0f0f0);
|
||||
padding: var(--bitable-spacing-sm) var(--bitable-spacing-lg);
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--bitable-spacing-sm);
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-primary, #1a1a1a);
|
||||
color: var(--bitable-color-primary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: var(--bitable-font-lg);
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__body {
|
||||
|
|
@ -342,28 +360,28 @@ async function handleDeleteField(field: IBitableField): Promise<void> {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
color: var(--text-placeholder, #bfbfbf);
|
||||
gap: var(--bitable-spacing-lg);
|
||||
color: var(--bitable-color-text-placeholder);
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__grid-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border-color, #f0f0f0);
|
||||
gap: var(--bitable-spacing-md);
|
||||
padding: var(--bitable-spacing-md) var(--bitable-spacing-lg);
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__table-name {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-size: var(--bitable-font-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__field-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #8c8c8c);
|
||||
font-size: var(--bitable-font-xs);
|
||||
color: var(--bitable-color-text-secondary);
|
||||
}
|
||||
|
||||
.bitable-file-detail-view__grid-container {
|
||||
|
|
@ -375,8 +393,8 @@ async function handleDeleteField(field: IBitableField): Promise<void> {
|
|||
.bitable-file-detail-view__load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--border-color, #f0f0f0);
|
||||
padding: var(--bitable-spacing-sm);
|
||||
border-top: 1px solid var(--bitable-color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -189,16 +189,16 @@ function handleDelete(file: IBitableFile): void {
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background: var(--bg-secondary, #fafafa);
|
||||
background: var(--bitable-color-bg-secondary);
|
||||
}
|
||||
|
||||
.bitable-file-list-view__topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-primary, #fff);
|
||||
border-bottom: 1px solid var(--border-color, #f0f0f0);
|
||||
padding: var(--bitable-spacing-sm) var(--bitable-spacing-lg);
|
||||
background: var(--bitable-color-bg);
|
||||
border-bottom: 1px solid var(--bitable-color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -248,7 +248,7 @@ function handleDelete(file: IBitableFile): void {
|
|||
}
|
||||
|
||||
.bitable-file-list-view__option-icon {
|
||||
font-size: 16px;
|
||||
color: var(--color-primary, #1a1a1a);
|
||||
font-size: var(--bitable-font-lg);
|
||||
color: var(--bitable-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,12 @@ from fastapi.responses import FileResponse
|
|||
from pydantic import BaseModel, Field
|
||||
|
||||
from agentkit.bitable.models import FieldOwner, FieldType, ViewType
|
||||
from agentkit.bitable.service import BitableService, FieldDependencyError
|
||||
from agentkit.bitable.service import (
|
||||
BitableService,
|
||||
FieldDependencyError,
|
||||
LastViewDeletionError,
|
||||
)
|
||||
from agentkit.bitable.view_config import ViewConfigValidationError, validate_view_config
|
||||
from agentkit.server.auth.dependencies import get_current_user
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
|
@ -668,6 +673,16 @@ async def update_view(
|
|||
if existing is None:
|
||||
raise HTTPException(status_code=404, detail="View not found")
|
||||
await _check_table_ownership(service, existing.table_id, user)
|
||||
# U5: validate group_by / conditional_formatting sub-keys before persisting.
|
||||
# Other config keys (filters / sort / hidden_fields) pass through unchanged.
|
||||
if body.config is not None:
|
||||
try:
|
||||
validate_view_config(body.config)
|
||||
except ViewConfigValidationError as exc:
|
||||
raise HTTPException(
|
||||
status_code=422,
|
||||
detail={"message": str(exc), "errors": exc.errors},
|
||||
) from exc
|
||||
kwargs = body.model_dump(exclude_none=True)
|
||||
view = await service.update_view(view_id, **kwargs)
|
||||
if view is None:
|
||||
|
|
@ -675,6 +690,33 @@ async def update_view(
|
|||
return {"success": True, "view": view.model_dump(mode="json")}
|
||||
|
||||
|
||||
@router.delete("/views/{view_id}", status_code=204)
|
||||
async def delete_view(
|
||||
view_id: str,
|
||||
request: Request,
|
||||
user: dict = Depends(require_bitable_auth),
|
||||
) -> None:
|
||||
"""Delete a view (U6).
|
||||
|
||||
404-before-403: ownership is checked via ``_check_table_ownership`` so a
|
||||
non-owner gets 404 (not 403) — never disclosing existence. Last-view
|
||||
protection returns 409 Conflict. X-Internal-Token bypasses ownership
|
||||
(KTD11) via ``require_bitable_auth``.
|
||||
"""
|
||||
service = _get_service(request)
|
||||
existing = await service.get_view(view_id)
|
||||
if existing is None:
|
||||
raise HTTPException(status_code=404, detail="View not found")
|
||||
await _check_table_ownership(service, existing.table_id, user)
|
||||
try:
|
||||
deleted = await service.delete_view(view_id)
|
||||
except LastViewDeletionError as e:
|
||||
raise HTTPException(status_code=409, detail=str(e)) from e
|
||||
if not deleted:
|
||||
raise HTTPException(status_code=404, detail="View not found")
|
||||
return None
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# File upload / download (U6: attachment & image fields)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Fischer AgentKit</title>
|
||||
<script type="module" crossorigin src="/assets/index-N9Dybwcy.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BgFZbme0.css">
|
||||
<script type="module" crossorigin src="/assets/index-CHtvprqX.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-Ls4ZdRZM.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ Implements KTD5 (REST API boundary even when co-deployed) and KTD11
|
|||
the bitable REST API; it never imports BitableService directly.
|
||||
|
||||
Actions: create_table, import_excel, import_database, collect_api,
|
||||
upsert_records, query_records.
|
||||
upsert_records, query_records, create_view, update_view,
|
||||
update_field, delete_view.
|
||||
|
||||
Batch chunking: upsert and import operations send at most ``BATCH_SIZE``
|
||||
records per HTTP request. On partial failure, the result includes
|
||||
|
|
@ -45,7 +46,8 @@ class BitableTool(Tool):
|
|||
"Create and manage bitable (multi-dimensional spreadsheet) tables, "
|
||||
"ingest data from Excel files, databases, or API responses, and "
|
||||
"query records. Actions: create_table, import_excel, "
|
||||
"import_database, collect_api, upsert_records, query_records."
|
||||
"import_database, collect_api, upsert_records, query_records, "
|
||||
"create_view, update_view, update_field, delete_view."
|
||||
),
|
||||
input_schema={
|
||||
"type": "object",
|
||||
|
|
@ -59,6 +61,10 @@ class BitableTool(Tool):
|
|||
"collect_api",
|
||||
"upsert_records",
|
||||
"query_records",
|
||||
"create_view",
|
||||
"update_view",
|
||||
"update_field",
|
||||
"delete_view",
|
||||
],
|
||||
"description": "Bitable operation to perform.",
|
||||
},
|
||||
|
|
@ -89,7 +95,7 @@ class BitableTool(Tool):
|
|||
},
|
||||
"table_id": {
|
||||
"type": "string",
|
||||
"description": "Target bitable table ID (collect_api, upsert_records, query_records).",
|
||||
"description": "Target bitable table ID (collect_api, upsert_records, query_records, create_view).",
|
||||
},
|
||||
"records": {
|
||||
"type": "array",
|
||||
|
|
@ -115,6 +121,31 @@ class BitableTool(Tool):
|
|||
"type": "integer",
|
||||
"description": "Max records to return (query_records).",
|
||||
},
|
||||
"view_id": {
|
||||
"type": "string",
|
||||
"description": "View ID (update_view, delete_view).",
|
||||
},
|
||||
"view_type": {
|
||||
"type": "string",
|
||||
"enum": ["grid", "kanban", "gantt", "gallery", "form"],
|
||||
"description": "View type (create_view). Defaults to grid.",
|
||||
},
|
||||
"field_id": {
|
||||
"type": "string",
|
||||
"description": "Field ID (update_field).",
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Name for a view or field (create_view, update_view, update_field).",
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"description": "Field type for update_field (e.g. text, number, date).",
|
||||
},
|
||||
"config": {
|
||||
"type": "object",
|
||||
"description": "View/field config dict (create_view, update_view, update_field).",
|
||||
},
|
||||
},
|
||||
"required": ["action"],
|
||||
},
|
||||
|
|
@ -148,6 +179,10 @@ class BitableTool(Tool):
|
|||
"collect_api": self._collect_api,
|
||||
"upsert_records": self._upsert_records,
|
||||
"query_records": self._query_records,
|
||||
"create_view": self._create_view,
|
||||
"update_view": self._update_view,
|
||||
"update_field": self._update_field,
|
||||
"delete_view": self._delete_view,
|
||||
}
|
||||
handler = handlers.get(action)
|
||||
if handler is None:
|
||||
|
|
@ -483,3 +518,68 @@ class BitableTool(Tool):
|
|||
"records": data["records"],
|
||||
"next_cursor": data.get("next_cursor"),
|
||||
}
|
||||
|
||||
# ------------------------------------------------------------------
|
||||
# View & field CRUD (U6: agent parity with REST endpoints)
|
||||
# ------------------------------------------------------------------
|
||||
|
||||
async def _create_view(self, **kwargs) -> dict[str, object]:
|
||||
table_id = kwargs.get("table_id")
|
||||
name = kwargs.get("name")
|
||||
if not table_id:
|
||||
return {"success": False, "error": "Missing required field: table_id"}
|
||||
if not name:
|
||||
return {"success": False, "error": "Missing required field: name"}
|
||||
view_type = kwargs.get("view_type") or "grid"
|
||||
config = kwargs.get("config") or {}
|
||||
client = await self._get_client()
|
||||
resp = await client.post(
|
||||
f"/tables/{table_id}/views",
|
||||
json={"name": name, "view_type": view_type, "config": config},
|
||||
)
|
||||
resp.raise_for_status()
|
||||
return {"success": True, "view": resp.json()["view"]}
|
||||
|
||||
async def _update_view(self, **kwargs) -> dict[str, object]:
|
||||
view_id = kwargs.get("view_id")
|
||||
if not view_id:
|
||||
return {"success": False, "error": "Missing required field: view_id"}
|
||||
payload: dict[str, object] = {}
|
||||
if kwargs.get("name") is not None:
|
||||
payload["name"] = kwargs["name"]
|
||||
if kwargs.get("config") is not None:
|
||||
payload["config"] = kwargs["config"]
|
||||
client = await self._get_client()
|
||||
resp = await client.patch(f"/views/{view_id}", json=payload)
|
||||
resp.raise_for_status()
|
||||
return {"success": True, "view": resp.json()["view"]}
|
||||
|
||||
async def _update_field(self, **kwargs) -> dict[str, object]:
|
||||
field_id = kwargs.get("field_id")
|
||||
if not field_id:
|
||||
return {"success": False, "error": "Missing required field: field_id"}
|
||||
payload: dict[str, object] = {}
|
||||
if kwargs.get("name") is not None:
|
||||
payload["name"] = kwargs["name"]
|
||||
# ponytail: PATCH /fields/{id} is backed by UpdateFieldRequest which
|
||||
# currently accepts only name + config. `type` is forwarded as
|
||||
# `field_type` so the tool is forward-compatible once the request
|
||||
# model adds it; today it is silently ignored by Pydantic (extra=ignore).
|
||||
if kwargs.get("type") is not None:
|
||||
payload["field_type"] = kwargs["type"]
|
||||
if kwargs.get("config") is not None:
|
||||
payload["config"] = kwargs["config"]
|
||||
client = await self._get_client()
|
||||
resp = await client.patch(f"/fields/{field_id}", json=payload)
|
||||
resp.raise_for_status()
|
||||
return {"success": True, "field": resp.json()["field"]}
|
||||
|
||||
async def _delete_view(self, **kwargs) -> dict[str, object]:
|
||||
view_id = kwargs.get("view_id")
|
||||
if not view_id:
|
||||
return {"success": False, "error": "Missing required field: view_id"}
|
||||
client = await self._get_client()
|
||||
resp = await client.delete(f"/views/{view_id}")
|
||||
resp.raise_for_status()
|
||||
# 204 No Content has an empty body; report a stable success shape.
|
||||
return {"success": True, "deleted": True}
|
||||
|
|
|
|||
|
|
@ -483,3 +483,236 @@ def test_transform_records_missing_keys() -> None:
|
|||
field_mapping={"a": "fld_a"}, # b is not mapped
|
||||
)
|
||||
assert result == [{"fld_a": 1}]
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# U6: View & field CRUD actions (create_view, update_view, update_field,
|
||||
# delete_view) — agent parity with the REST API.
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def test_action_enum_has_10_actions() -> None:
|
||||
"""input_schema.action.enum lists all 10 actions (6 original + 4 new)."""
|
||||
tool = BitableTool(base_url="http://test/api/v1/bitable")
|
||||
actions = tool.input_schema["properties"]["action"]["enum"]
|
||||
assert len(actions) == 10
|
||||
for new_action in ("create_view", "update_view", "update_field", "delete_view"):
|
||||
assert new_action in actions
|
||||
|
||||
|
||||
def test_execute_handlers_dict_has_10_actions() -> None:
|
||||
"""execute() handlers dict contains all 10 action keys (KTD10)."""
|
||||
import re
|
||||
|
||||
src = open(
|
||||
"src/agentkit/tools/bitable_tool.py",
|
||||
encoding="utf-8",
|
||||
).read()
|
||||
handlers_match = re.search(r"handlers\s*=\s*\{([^}]*)\}", src, re.DOTALL)
|
||||
handler_keys = re.findall(r'"([a-z_]+)":\s*self\._', handlers_match.group(1))
|
||||
assert len(handler_keys) == 10
|
||||
for new_action in ("create_view", "update_view", "update_field", "delete_view"):
|
||||
assert new_action in handler_keys
|
||||
|
||||
|
||||
async def test_create_view_action(tool: BitableTool) -> None:
|
||||
"""create_view action POSTs /tables/{id}/views with name + view_type + config."""
|
||||
result = await tool.execute(action="create_table", table_name="VC")
|
||||
table_id = result["table"]["id"]
|
||||
|
||||
resp = await tool.execute(
|
||||
action="create_view",
|
||||
table_id=table_id,
|
||||
name="Kanban Plan",
|
||||
view_type="kanban",
|
||||
config={"group_by": [{"field_id": "fld_x", "direction": "asc"}]},
|
||||
)
|
||||
assert resp["success"] is True
|
||||
assert resp["view"]["name"] == "Kanban Plan"
|
||||
assert resp["view"]["view_type"] == "kanban"
|
||||
|
||||
|
||||
async def test_create_view_defaults_to_grid(tool: BitableTool) -> None:
|
||||
"""create_view without view_type defaults to grid."""
|
||||
result = await tool.execute(action="create_table", table_name="VG")
|
||||
table_id = result["table"]["id"]
|
||||
resp = await tool.execute(action="create_view", table_id=table_id, name="Default")
|
||||
assert resp["success"] is True
|
||||
assert resp["view"]["view_type"] == "grid"
|
||||
|
||||
|
||||
async def test_create_view_missing_table_id(tool: BitableTool) -> None:
|
||||
"""Missing table_id → error."""
|
||||
resp = await tool.execute(action="create_view", name="x")
|
||||
assert resp["success"] is False
|
||||
assert "table_id" in resp["error"]
|
||||
|
||||
|
||||
async def test_update_view_action(tool: BitableTool) -> None:
|
||||
"""update_view action PATCHes /views/{id} with name + config."""
|
||||
result = await tool.execute(action="create_table", table_name="VU")
|
||||
table_id = result["table"]["id"]
|
||||
view_id = (
|
||||
await tool.execute(action="create_view", table_id=table_id, name="Old")
|
||||
)["view"]["id"]
|
||||
|
||||
resp = await tool.execute(
|
||||
action="update_view",
|
||||
view_id=view_id,
|
||||
name="Renamed",
|
||||
config={"group_by": [{"field_id": "fld_a", "direction": "asc"}]},
|
||||
)
|
||||
assert resp["success"] is True
|
||||
assert resp["view"]["name"] == "Renamed"
|
||||
|
||||
|
||||
async def test_update_view_missing_view_id(tool: BitableTool) -> None:
|
||||
"""Missing view_id → error."""
|
||||
resp = await tool.execute(action="update_view", name="x")
|
||||
assert resp["success"] is False
|
||||
assert "view_id" in resp["error"]
|
||||
|
||||
|
||||
async def test_update_field_action(tool: BitableTool) -> None:
|
||||
"""update_field action PATCHes /fields/{id} (equivalent to REST PATCH /fields)."""
|
||||
result = await tool.execute(action="create_table", table_name="FU")
|
||||
table_id = result["table"]["id"]
|
||||
client = await tool._get_client()
|
||||
field_id = (
|
||||
await client.post(
|
||||
f"/tables/{table_id}/fields",
|
||||
json={"name": "col", "field_type": "text", "owner": "user"},
|
||||
)
|
||||
).json()["field"]["id"]
|
||||
|
||||
resp = await tool.execute(
|
||||
action="update_field",
|
||||
field_id=field_id,
|
||||
name="renamed_col",
|
||||
config={"description": "updated"},
|
||||
)
|
||||
assert resp["success"] is True
|
||||
assert resp["field"]["name"] == "renamed_col"
|
||||
|
||||
|
||||
async def test_update_field_missing_field_id(tool: BitableTool) -> None:
|
||||
"""Missing field_id → error."""
|
||||
resp = await tool.execute(action="update_field", name="x")
|
||||
assert resp["success"] is False
|
||||
assert "field_id" in resp["error"]
|
||||
|
||||
|
||||
async def test_delete_view_action(tool: BitableTool) -> None:
|
||||
"""delete_view action DELETEs /views/{id}; last-view protection applies."""
|
||||
result = await tool.execute(action="create_table", table_name="VD")
|
||||
table_id = result["table"]["id"]
|
||||
v1 = (await tool.execute(action="create_view", table_id=table_id, name="v1"))["view"]["id"]
|
||||
await tool.execute(action="create_view", table_id=table_id, name="v2")
|
||||
|
||||
resp = await tool.execute(action="delete_view", view_id=v1)
|
||||
assert resp["success"] is True
|
||||
assert resp["deleted"] is True
|
||||
|
||||
|
||||
async def test_delete_view_action_409_on_last_view(tool: BitableTool) -> None:
|
||||
"""delete_view on the last view → HTTP 409 surfaced as error."""
|
||||
result = await tool.execute(action="create_table", table_name="VL")
|
||||
table_id = result["table"]["id"]
|
||||
only = (await tool.execute(action="create_view", table_id=table_id, name="only"))["view"]["id"]
|
||||
|
||||
resp = await tool.execute(action="delete_view", view_id=only)
|
||||
assert resp["success"] is False
|
||||
assert "409" in resp["error"]
|
||||
|
||||
|
||||
async def test_delete_view_missing_view_id(tool: BitableTool) -> None:
|
||||
"""Missing view_id → error."""
|
||||
resp = await tool.execute(action="delete_view")
|
||||
assert resp["success"] is False
|
||||
assert "view_id" in resp["error"]
|
||||
|
||||
|
||||
async def test_create_view_with_r3_r4_config(tool: BitableTool) -> None:
|
||||
"""create_view forwards group_by + conditional_formatting config (R3/R4 parity)."""
|
||||
result = await tool.execute(action="create_table", table_name="R34")
|
||||
table_id = result["table"]["id"]
|
||||
client = await tool._get_client()
|
||||
# Create a field so group_by can reference a real field id.
|
||||
fid = (
|
||||
await client.post(
|
||||
f"/tables/{table_id}/fields",
|
||||
json={"name": "status", "field_type": "select", "owner": "user"},
|
||||
)
|
||||
).json()["field"]["id"]
|
||||
|
||||
resp = await tool.execute(
|
||||
action="create_view",
|
||||
table_id=table_id,
|
||||
name="GroupedView",
|
||||
config={
|
||||
"group_by": [{"field_id": fid, "direction": "asc"}],
|
||||
"conditional_formatting": [
|
||||
{
|
||||
"field_id": fid,
|
||||
"operator": "equals",
|
||||
"value": "done",
|
||||
"color_key": "green",
|
||||
}
|
||||
],
|
||||
},
|
||||
)
|
||||
assert resp["success"] is True
|
||||
cfg = resp["view"]["config"]
|
||||
assert len(cfg["group_by"]) == 1
|
||||
assert cfg["group_by"][0]["field_id"] == fid
|
||||
assert cfg["conditional_formatting"][0]["color_key"] == "green"
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# X-Internal-Token transparent passthrough on the 4 new actions (KTD11)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
async def test_new_actions_internal_token_passthrough(
|
||||
tool_real_auth: BitableTool,
|
||||
) -> None:
|
||||
"""X-Internal-Token bypasses ownership for all 4 new actions (KTD11)."""
|
||||
# create_table (existing action) — establishes an admin-owned table.
|
||||
result = await tool_real_auth.execute(action="create_table", table_name="TokenT")
|
||||
table_id = result["table"]["id"]
|
||||
|
||||
# create_view via the new action.
|
||||
v = await tool_real_auth.execute(
|
||||
action="create_view", table_id=table_id, name="tv1"
|
||||
)
|
||||
assert v["success"] is True
|
||||
view_id = v["view"]["id"]
|
||||
|
||||
# update_view via the new action.
|
||||
uv = await tool_real_auth.execute(action="update_view", view_id=view_id, name="tv1-renamed")
|
||||
assert uv["success"] is True
|
||||
|
||||
# update_field: create a field first via the tool's HTTP client, then update.
|
||||
client = await tool_real_auth._get_client()
|
||||
fid = (
|
||||
await client.post(
|
||||
f"/tables/{table_id}/fields",
|
||||
json={"name": "c", "field_type": "text", "owner": "user"},
|
||||
)
|
||||
).json()["field"]["id"]
|
||||
uf = await tool_real_auth.execute(action="update_field", field_id=fid, name="c2")
|
||||
assert uf["success"] is True
|
||||
|
||||
# delete_view: add a second view so last-view protection doesn't block.
|
||||
await tool_real_auth.execute(action="create_view", table_id=table_id, name="tv2")
|
||||
dv = await tool_real_auth.execute(action="delete_view", view_id=view_id)
|
||||
assert dv["success"] is True
|
||||
|
||||
|
||||
async def test_delete_view_internal_token_404_when_missing(
|
||||
tool_real_auth: BitableTool,
|
||||
) -> None:
|
||||
"""X-Internal-Token calling delete_view on a non-existent view → 404 (no silent success)."""
|
||||
resp = await tool_real_auth.execute(action="delete_view", view_id="no-such-view")
|
||||
assert resp["success"] is False
|
||||
assert "404" in resp["error"]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,420 @@
|
|||
"""Tests for bitable view config conditional formatting validation (U5 / R4).
|
||||
|
||||
Covers all 7 operators + 8 color keys. Layered like test_grouping.py:
|
||||
1. Pure Pydantic validation (no DB) — always runs
|
||||
2. Route-level 422 via fake service (no DB) — always runs
|
||||
3. Round-trip via real PG service — skipped if PG unavailable
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from typing import Any
|
||||
|
||||
import httpx
|
||||
import pytest
|
||||
from fastapi import FastAPI
|
||||
from httpx import ASGITransport
|
||||
from pydantic import ValidationError
|
||||
|
||||
from agentkit.bitable.models import View, ViewType
|
||||
from agentkit.bitable.view_config import (
|
||||
ColorKey,
|
||||
ConditionalFormatRule,
|
||||
ConditionalOperator,
|
||||
ViewConfigSchema,
|
||||
ViewConfigValidationError,
|
||||
validate_view_config,
|
||||
)
|
||||
from agentkit.server.routes import bitable as bitable_routes
|
||||
from agentkit.server.routes.bitable import require_bitable_auth
|
||||
|
||||
TEST_USER_ID = "test-user-id"
|
||||
|
||||
# Exhaustive lists — kept in sync with the Literal definitions in view_config.py.
|
||||
ALL_OPERATORS: list[ConditionalOperator] = [
|
||||
"equals",
|
||||
"not-equals",
|
||||
"contains",
|
||||
"is-empty",
|
||||
"greater-than",
|
||||
"less-than",
|
||||
"between",
|
||||
]
|
||||
ALL_COLOR_KEYS: list[ColorKey] = [
|
||||
"red",
|
||||
"orange",
|
||||
"yellow",
|
||||
"green",
|
||||
"blue",
|
||||
"purple",
|
||||
"gray",
|
||||
"neutral",
|
||||
]
|
||||
|
||||
|
||||
def _rule(
|
||||
*,
|
||||
field_id: str = "f1",
|
||||
operator: ConditionalOperator = "equals",
|
||||
value: str = "v",
|
||||
color_key: ColorKey = "red",
|
||||
bold: bool = True,
|
||||
enabled: bool = True,
|
||||
) -> dict[str, object]:
|
||||
return {
|
||||
"field_id": field_id,
|
||||
"operator": operator,
|
||||
"value": value,
|
||||
"color_key": color_key,
|
||||
"bold": bold,
|
||||
"enabled": enabled,
|
||||
}
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 1. Pure Pydantic validation — always runs
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.parametrize("op", ALL_OPERATORS)
|
||||
def test_validate_accepts_each_operator(op: ConditionalOperator) -> None:
|
||||
"""All 7 operators accepted (spec test scenario 8)."""
|
||||
config = {"conditional_formatting": [_rule(operator=op)]}
|
||||
validate_view_config(config) # no raise
|
||||
|
||||
|
||||
@pytest.mark.parametrize("color", ALL_COLOR_KEYS)
|
||||
def test_validate_accepts_each_color_key(color: ColorKey) -> None:
|
||||
"""All 8 color keys accepted."""
|
||||
config = {"conditional_formatting": [_rule(color_key=color)]}
|
||||
validate_view_config(config) # no raise
|
||||
|
||||
|
||||
def test_validate_rejects_invalid_operator() -> None:
|
||||
"""Operator not in the 7-key whitelist is rejected."""
|
||||
config = {"conditional_formatting": [_rule(operator="starts-with")]} # type: ignore[dict-item]
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_invalid_color_key() -> None:
|
||||
"""color_key not in the 8-color whitelist is rejected."""
|
||||
config = {"conditional_formatting": [_rule(color_key="pink")]} # type: ignore[dict-item]
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_missing_field_id() -> None:
|
||||
"""field_id is required."""
|
||||
rule = _rule()
|
||||
del rule["field_id"]
|
||||
config = {"conditional_formatting": [rule]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_missing_operator() -> None:
|
||||
"""operator is required."""
|
||||
rule = _rule()
|
||||
del rule["operator"]
|
||||
config = {"conditional_formatting": [rule]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_missing_color_key() -> None:
|
||||
"""color_key is required."""
|
||||
rule = _rule()
|
||||
del rule["color_key"]
|
||||
config = {"conditional_formatting": [rule]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_value_defaults_to_empty_string() -> None:
|
||||
"""value is optional, defaults to '' (UI sends '' for is-empty)."""
|
||||
rule = _rule()
|
||||
del rule["value"]
|
||||
parsed = ConditionalFormatRule.model_validate(rule)
|
||||
assert parsed.value == ""
|
||||
|
||||
|
||||
def test_validate_bold_defaults_to_true() -> None:
|
||||
"""bold defaults to True (WCAG 1.4.1 — color alone is not enough)."""
|
||||
rule = _rule()
|
||||
del rule["bold"]
|
||||
parsed = ConditionalFormatRule.model_validate(rule)
|
||||
assert parsed.bold is True
|
||||
|
||||
|
||||
def test_validate_enabled_defaults_to_true() -> None:
|
||||
"""enabled defaults to True."""
|
||||
rule = _rule()
|
||||
del rule["enabled"]
|
||||
parsed = ConditionalFormatRule.model_validate(rule)
|
||||
assert parsed.enabled is True
|
||||
|
||||
|
||||
def test_validate_rejects_extra_keys_in_rule() -> None:
|
||||
"""extra='forbid' on ConditionalFormatRule — unknown keys rejected."""
|
||||
rule = _rule()
|
||||
rule["extra_key"] = "oops"
|
||||
config = {"conditional_formatting": [rule]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_accepts_empty_conditional_formatting_list() -> None:
|
||||
"""Empty rule list is valid (no rules = no coloring)."""
|
||||
validate_view_config({"conditional_formatting": []})
|
||||
|
||||
|
||||
def test_validate_accepts_multiple_rules() -> None:
|
||||
"""Multiple rules accepted (first-match-wins is enforced client-side)."""
|
||||
config = {
|
||||
"conditional_formatting": [
|
||||
_rule(field_id="f1", operator="equals", value="a", color_key="red"),
|
||||
_rule(field_id="f2", operator="greater-than", value="10", color_key="green"),
|
||||
_rule(field_id="f3", operator="is-empty", color_key="gray"),
|
||||
]
|
||||
}
|
||||
validate_view_config(config) # no raise
|
||||
|
||||
|
||||
def test_validate_ignores_non_u5_keys_with_cf_present() -> None:
|
||||
"""filters / sort / hidden_fields pass through when cf is also present."""
|
||||
config = {
|
||||
"filters": [{"field_id": "f1", "op": "weird-op"}],
|
||||
"hidden_fields": ["f2"],
|
||||
"conditional_formatting": [_rule()],
|
||||
}
|
||||
validate_view_config(config) # no raise
|
||||
|
||||
|
||||
def test_schema_round_trips_conditional_formatting() -> None:
|
||||
"""ViewConfigSchema round-trips a CF config without loss."""
|
||||
raw = {
|
||||
"group_by": [],
|
||||
"conditional_formatting": [
|
||||
{
|
||||
"field_id": "f1",
|
||||
"operator": "between",
|
||||
"value": "10,20",
|
||||
"color_key": "blue",
|
||||
"bold": False,
|
||||
"enabled": True,
|
||||
}
|
||||
],
|
||||
}
|
||||
schema = ViewConfigSchema.model_validate(raw)
|
||||
assert len(schema.conditional_formatting) == 1
|
||||
rule = schema.conditional_formatting[0]
|
||||
assert rule.operator == "between"
|
||||
assert rule.color_key == "blue"
|
||||
assert rule.bold is False
|
||||
dumped = schema.model_dump()
|
||||
assert dumped["conditional_formatting"][0]["value"] == "10,20"
|
||||
|
||||
|
||||
def test_rule_model_rejects_invalid_operator_directly() -> None:
|
||||
"""ConditionalFormatRule rejects invalid operator at construction."""
|
||||
with pytest.raises(ValidationError):
|
||||
ConditionalFormatRule(
|
||||
field_id="f1",
|
||||
operator="starts-with", # type: ignore[arg-type]
|
||||
value="v",
|
||||
color_key="red",
|
||||
)
|
||||
|
||||
|
||||
def test_rule_model_rejects_invalid_color_key_directly() -> None:
|
||||
"""ConditionalFormatRule rejects invalid color_key at construction."""
|
||||
with pytest.raises(ValidationError):
|
||||
ConditionalFormatRule(
|
||||
field_id="f1",
|
||||
operator="equals",
|
||||
value="v",
|
||||
color_key="pink", # type: ignore[arg-type]
|
||||
)
|
||||
|
||||
|
||||
def test_constants_match_spec() -> None:
|
||||
"""7 operators + 8 color keys (spec invariant)."""
|
||||
assert len(ALL_OPERATORS) == 7
|
||||
assert len(ALL_COLOR_KEYS) == 8
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 2. Route-level 422 — uses a fake service (no DB)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def _make_fake_view(view_id: str = "v1", table_id: str = "t1") -> View:
|
||||
return View(
|
||||
id=view_id,
|
||||
table_id=table_id,
|
||||
name="Test View",
|
||||
view_type=ViewType.grid,
|
||||
config={},
|
||||
)
|
||||
|
||||
|
||||
class _FakeService:
|
||||
"""Minimal service stub — same shape as test_grouping.py's stub."""
|
||||
|
||||
def __init__(self, *, existing_view: View | None = None) -> None:
|
||||
self._existing = existing_view
|
||||
|
||||
async def get_view(self, view_id: str) -> View | None:
|
||||
if self._existing is None or self._existing.id != view_id:
|
||||
return None
|
||||
return self._existing
|
||||
|
||||
async def get_table(self, table_id: str) -> Any:
|
||||
class _T:
|
||||
owner_user_id = TEST_USER_ID
|
||||
|
||||
return _T()
|
||||
|
||||
async def update_view(self, view_id: str, **kwargs: object) -> View | None:
|
||||
if self._existing is None:
|
||||
return None
|
||||
config = kwargs.get("config")
|
||||
if isinstance(config, dict):
|
||||
self._existing = self._existing.model_copy(update={"config": config})
|
||||
return self._existing
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def fake_service_app() -> FastAPI:
|
||||
app = FastAPI()
|
||||
app.state.bitable_service = _FakeService(existing_view=_make_fake_view())
|
||||
app.include_router(bitable_routes.router, prefix="/api/v1")
|
||||
app.dependency_overrides[require_bitable_auth] = lambda: {
|
||||
"user_id": TEST_USER_ID,
|
||||
"username": "testuser",
|
||||
"role": "member",
|
||||
}
|
||||
return app
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
async def fake_client(fake_service_app: FastAPI) -> httpx.AsyncClient:
|
||||
transport = ASGITransport(app=fake_service_app)
|
||||
async with httpx.AsyncClient(transport=transport, base_url="http://test") as c:
|
||||
yield c
|
||||
|
||||
|
||||
async def test_patch_view_with_valid_cf_returns_200(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Valid conditional_formatting is accepted and persisted."""
|
||||
config = {
|
||||
"conditional_formatting": [
|
||||
{
|
||||
"field_id": "f1",
|
||||
"operator": "equals",
|
||||
"value": "done",
|
||||
"color_key": "green",
|
||||
}
|
||||
]
|
||||
}
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={"config": config},
|
||||
)
|
||||
assert resp.status_code == 200, resp.text
|
||||
body = resp.json()
|
||||
assert body["view"]["config"]["conditional_formatting"] == config["conditional_formatting"]
|
||||
|
||||
|
||||
async def test_patch_view_with_invalid_operator_returns_422(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Invalid operator returns 422."""
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={
|
||||
"config": {
|
||||
"conditional_formatting": [
|
||||
{"field_id": "f1", "operator": "starts-with", "value": "x", "color_key": "red"}
|
||||
]
|
||||
}
|
||||
},
|
||||
)
|
||||
assert resp.status_code == 422
|
||||
|
||||
|
||||
async def test_patch_view_with_invalid_color_key_returns_422(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Invalid color_key returns 422."""
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={
|
||||
"config": {
|
||||
"conditional_formatting": [
|
||||
{"field_id": "f1", "operator": "equals", "value": "x", "color_key": "pink"}
|
||||
]
|
||||
}
|
||||
},
|
||||
)
|
||||
assert resp.status_code == 422
|
||||
|
||||
|
||||
async def test_patch_view_with_missing_field_id_returns_422(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Missing field_id in a CF rule returns 422."""
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={
|
||||
"config": {
|
||||
"conditional_formatting": [{"operator": "equals", "value": "x", "color_key": "red"}]
|
||||
}
|
||||
},
|
||||
)
|
||||
assert resp.status_code == 422
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 3. Round-trip via real PG — skipped if PG unavailable
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.postgres
|
||||
async def test_round_trip_conditional_formatting_via_real_service(bitable_service) -> None:
|
||||
"""PATCH config with conditional_formatting → GET view returns same."""
|
||||
from agentkit.bitable.service import BitableService
|
||||
|
||||
assert isinstance(bitable_service, BitableService)
|
||||
table = await bitable_service.create_table(name="U5 CF Round-Trip")
|
||||
view = await bitable_service.create_view(table.id, name="V1")
|
||||
|
||||
cf_rules = [
|
||||
{
|
||||
"field_id": "f1",
|
||||
"operator": "equals",
|
||||
"value": "done",
|
||||
"color_key": "green",
|
||||
"bold": True,
|
||||
"enabled": True,
|
||||
},
|
||||
{
|
||||
"field_id": "f2",
|
||||
"operator": "between",
|
||||
"value": "10,20",
|
||||
"color_key": "blue",
|
||||
"bold": False,
|
||||
"enabled": False,
|
||||
},
|
||||
]
|
||||
config = {"conditional_formatting": cf_rules}
|
||||
validate_view_config(config)
|
||||
updated = await bitable_service.update_view(view.id, config=config)
|
||||
assert updated is not None
|
||||
assert updated.config.get("conditional_formatting") == cf_rules
|
||||
|
||||
fetched = await bitable_service.get_view(view.id)
|
||||
assert fetched is not None
|
||||
assert fetched.config.get("conditional_formatting") == cf_rules
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
"""Tests for bitable view config grouping validation (U5 / R4).
|
||||
|
||||
Layered tests:
|
||||
1. Pure Pydantic validation via ``validate_view_config`` (no DB needed — always runs)
|
||||
2. Route-level 422 via a mocked BitableService (no DB needed — always runs)
|
||||
3. Round-trip via real PG service (skipped if PG unavailable)
|
||||
|
||||
The validator lives in ``agentkit.bitable.view_config`` and is called from
|
||||
the PATCH /views route before ``service.update_view`` is invoked.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from typing import Any
|
||||
|
||||
import httpx
|
||||
import pytest
|
||||
from fastapi import FastAPI
|
||||
from httpx import ASGITransport
|
||||
from pydantic import ValidationError
|
||||
|
||||
from agentkit.bitable.models import View, ViewType
|
||||
from agentkit.bitable.view_config import (
|
||||
MAX_GROUP_BY_FIELDS,
|
||||
GroupByItem,
|
||||
ViewConfigSchema,
|
||||
ViewConfigValidationError,
|
||||
validate_view_config,
|
||||
)
|
||||
from agentkit.server.routes import bitable as bitable_routes
|
||||
from agentkit.server.routes.bitable import require_bitable_auth
|
||||
|
||||
TEST_USER_ID = "test-user-id"
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 1. Pure Pydantic validation — always runs (no DB)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def _gb(field_id: str, direction: str = "asc") -> dict[str, str]:
|
||||
return {"field_id": field_id, "direction": direction}
|
||||
|
||||
|
||||
def test_validate_accepts_empty_config() -> None:
|
||||
"""Empty / None config is valid (no group_by to check)."""
|
||||
validate_view_config(None)
|
||||
validate_view_config({})
|
||||
validate_view_config({"filters": []}) # non-U5 keys ignored
|
||||
|
||||
|
||||
def test_validate_accepts_one_to_three_group_by_fields() -> None:
|
||||
"""Spec: max 3 levels. 1, 2, 3 all accepted."""
|
||||
for n in (1, 2, 3):
|
||||
config = {"group_by": [_gb(f"f{i}") for i in range(n)]}
|
||||
validate_view_config(config) # no raise
|
||||
|
||||
|
||||
def test_validate_rejects_more_than_three_group_by_fields() -> None:
|
||||
"""group_by with >3 fields raises ValidationError (422 at the route)."""
|
||||
config = {"group_by": [_gb(f"f{i}") for i in range(MAX_GROUP_BY_FIELDS + 1)]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_invalid_direction() -> None:
|
||||
"""direction must be 'asc' or 'desc' (Literal)."""
|
||||
config = {"group_by": [_gb("f1", "sideways")]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_missing_field_id() -> None:
|
||||
"""field_id is required."""
|
||||
config = {"group_by": [{"direction": "asc"}]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_empty_field_id() -> None:
|
||||
"""field_id must be non-empty (min_length=1)."""
|
||||
config = {"group_by": [_gb("")]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_rejects_extra_keys_in_group_by_item() -> None:
|
||||
"""extra='forbid' on GroupByItem — unknown keys rejected."""
|
||||
config = {"group_by": [{"field_id": "f1", "direction": "asc", "color": "red"}]}
|
||||
with pytest.raises(ViewConfigValidationError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
def test_validate_defaults_direction_to_asc() -> None:
|
||||
"""direction is optional, defaults to 'asc'."""
|
||||
item = GroupByItem(field_id="f1")
|
||||
assert item.direction == "asc"
|
||||
|
||||
|
||||
def test_validate_passes_through_non_u5_keys() -> None:
|
||||
"""filters / sort / hidden_fields are NOT validated here — pass through."""
|
||||
config = {
|
||||
"filters": [{"field_id": "f1", "op": "weird-op", "value": None}],
|
||||
"sort": {"field": "f1", "order": "asc"},
|
||||
"hidden_fields": ["f2"],
|
||||
"group_by": [_gb("f1")],
|
||||
}
|
||||
validate_view_config(config) # no raise — non-U5 keys ignored
|
||||
|
||||
|
||||
def test_schema_max_length_constant() -> None:
|
||||
"""MAX_GROUP_BY_FIELDS is 3 (matches spec / Feishu / Twenty UX)."""
|
||||
assert MAX_GROUP_BY_FIELDS == 3
|
||||
|
||||
|
||||
def test_schema_round_trips_through_model() -> None:
|
||||
"""ViewConfigSchema.model_validate round-trips a valid config."""
|
||||
raw = {
|
||||
"group_by": [{"field_id": "f1", "direction": "asc"}],
|
||||
"conditional_formatting": [],
|
||||
}
|
||||
schema = ViewConfigSchema.model_validate(raw)
|
||||
assert len(schema.group_by) == 1
|
||||
assert schema.group_by[0].field_id == "f1"
|
||||
dumped = schema.model_dump()
|
||||
assert dumped["group_by"][0]["direction"] == "asc"
|
||||
|
||||
|
||||
def test_validation_error_carries_structured_errors() -> None:
|
||||
"""ViewConfigValidationError.errors is the Pydantic error list (for 422 body)."""
|
||||
config = {"group_by": [_gb("")]}
|
||||
with pytest.raises(ViewConfigValidationError) as exc_info:
|
||||
validate_view_config(config)
|
||||
assert isinstance(exc_info.value.errors, list)
|
||||
assert len(exc_info.value.errors) > 0
|
||||
|
||||
|
||||
def test_validation_error_is_value_error_subclass() -> None:
|
||||
"""Subclasses ValueError so existing handlers pick it up."""
|
||||
config = {"group_by": [_gb("")]}
|
||||
with pytest.raises(ValueError):
|
||||
validate_view_config(config)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 2. Route-level 422 — uses a fake service (no DB needed)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def _make_fake_view(view_id: str = "v1", table_id: str = "t1") -> View:
|
||||
return View(
|
||||
id=view_id,
|
||||
table_id=table_id,
|
||||
name="Test View",
|
||||
view_type=ViewType.grid,
|
||||
config={},
|
||||
)
|
||||
|
||||
|
||||
class _FakeService:
|
||||
"""Minimal service stub for route-level tests.
|
||||
|
||||
Only implements the methods the PATCH /views route touches:
|
||||
``get_view`` (existence + ownership check) and ``update_view``.
|
||||
"""
|
||||
|
||||
def __init__(self, *, existing_view: View | None = None) -> None:
|
||||
self._existing = existing_view
|
||||
self.updated_config: dict[str, object] | None = None
|
||||
self.update_called = False
|
||||
|
||||
async def get_view(self, view_id: str) -> View | None:
|
||||
if self._existing is None or self._existing.id != view_id:
|
||||
return None
|
||||
return self._existing
|
||||
|
||||
async def get_table(self, table_id: str) -> Any:
|
||||
# Ownership check passes — return a table owned by the test user.
|
||||
class _T:
|
||||
owner_user_id = TEST_USER_ID
|
||||
|
||||
return _T()
|
||||
|
||||
async def update_view(self, view_id: str, **kwargs: object) -> View | None:
|
||||
self.update_called = True
|
||||
self.updated_config = kwargs.get("config") # type: ignore[assignment]
|
||||
if self._existing is None:
|
||||
return None
|
||||
config = kwargs.get("config")
|
||||
if isinstance(config, dict):
|
||||
self._existing = self._existing.model_copy(update={"config": config})
|
||||
return self._existing
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def fake_service_app() -> FastAPI:
|
||||
"""App with a fake service on state — bypasses PG entirely."""
|
||||
app = FastAPI()
|
||||
app.state.bitable_service = _FakeService(existing_view=_make_fake_view())
|
||||
app.include_router(bitable_routes.router, prefix="/api/v1")
|
||||
app.dependency_overrides[require_bitable_auth] = lambda: {
|
||||
"user_id": TEST_USER_ID,
|
||||
"username": "testuser",
|
||||
"role": "member",
|
||||
}
|
||||
return app
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
async def fake_client(fake_service_app: FastAPI) -> httpx.AsyncClient:
|
||||
transport = ASGITransport(app=fake_service_app)
|
||||
async with httpx.AsyncClient(transport=transport, base_url="http://test") as c:
|
||||
yield c
|
||||
|
||||
|
||||
async def test_patch_view_with_valid_group_by_returns_200(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Valid group_by is accepted and persisted (round-trip at the route layer)."""
|
||||
config = {"group_by": [{"field_id": "f1", "direction": "asc"}]}
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={"config": config},
|
||||
)
|
||||
assert resp.status_code == 200, resp.text
|
||||
body = resp.json()
|
||||
assert body["success"] is True
|
||||
assert body["view"]["config"]["group_by"] == config["group_by"]
|
||||
|
||||
|
||||
async def test_patch_view_with_too_many_group_by_returns_422(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""group_by with >3 fields returns 422 (not 500)."""
|
||||
config = {"group_by": [{"field_id": f"f{i}"} for i in range(4)]}
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={"config": config},
|
||||
)
|
||||
assert resp.status_code == 422
|
||||
body = resp.json()
|
||||
assert "errors" in body["detail"]
|
||||
|
||||
|
||||
async def test_patch_view_with_invalid_direction_returns_422(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Invalid direction value returns 422."""
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={"config": {"group_by": [{"field_id": "f1", "direction": "sideways"}]}},
|
||||
)
|
||||
assert resp.status_code == 422
|
||||
|
||||
|
||||
async def test_patch_view_with_non_u5_config_returns_200(
|
||||
fake_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""Non-U5 config keys (filters / sort / hidden_fields) pass through unchanged."""
|
||||
resp = await fake_client.patch(
|
||||
"/api/v1/bitable/views/v1",
|
||||
json={"config": {"hidden_fields": ["f1", "f2"]}},
|
||||
)
|
||||
assert resp.status_code == 200, resp.text
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 3. Round-trip via real PG — skipped if PG unavailable
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.postgres
|
||||
async def test_round_trip_group_by_via_real_service(bitable_service) -> None:
|
||||
"""PATCH config with group_by → GET view returns same group_by.
|
||||
|
||||
Requires PostgreSQL. Verifies the config dict survives the JSONB
|
||||
round-trip and the route-layer validation does not strip fields.
|
||||
"""
|
||||
from agentkit.bitable.service import BitableService
|
||||
|
||||
assert isinstance(bitable_service, BitableService)
|
||||
table = await bitable_service.create_table(name="U5 Round-Trip")
|
||||
view = await bitable_service.create_view(table.id, name="V1")
|
||||
|
||||
config = {
|
||||
"group_by": [
|
||||
{"field_id": "f1", "direction": "asc"},
|
||||
{"field_id": "f2", "direction": "desc"},
|
||||
],
|
||||
}
|
||||
# Validator accepts the config (no exception).
|
||||
validate_view_config(config)
|
||||
# Service persists it as-is.
|
||||
updated = await bitable_service.update_view(view.id, config=config)
|
||||
assert updated is not None
|
||||
assert updated.config.get("group_by") == config["group_by"]
|
||||
|
||||
# GET view returns the same group_by.
|
||||
fetched = await bitable_service.get_view(view.id)
|
||||
assert fetched is not None
|
||||
assert fetched.config.get("group_by") == config["group_by"]
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Direct schema construction (covers Literal type errors at the model layer)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def test_group_by_item_rejects_invalid_direction_via_model() -> None:
|
||||
"""Constructing GroupByItem with an invalid direction raises ValidationError."""
|
||||
with pytest.raises(ValidationError):
|
||||
GroupByItem(field_id="f1", direction="sideways") # type: ignore[arg-type]
|
||||
|
||||
|
||||
def test_view_config_schema_max_length_enforced() -> None:
|
||||
"""ViewConfigSchema.group_by max_length=3 enforced at the model level."""
|
||||
too_many = [{"field_id": f"f{i}"} for i in range(MAX_GROUP_BY_FIELDS + 1)]
|
||||
with pytest.raises(ValidationError):
|
||||
ViewConfigSchema.model_validate({"group_by": too_many})
|
||||
|
|
@ -53,6 +53,23 @@ def unauth_app(bitable_service: BitableService) -> FastAPI:
|
|||
return app
|
||||
|
||||
|
||||
INTERNAL_TOKEN = "internal-token-routes-abc"
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def internal_app(bitable_service: BitableService) -> FastAPI:
|
||||
"""App with X-Internal-Token configured and NO auth override.
|
||||
|
||||
Exercises the real ``require_bitable_auth`` path: the internal token
|
||||
yields a synthetic admin user that bypasses ownership (KTD11).
|
||||
"""
|
||||
app = FastAPI()
|
||||
app.state.bitable_service = bitable_service
|
||||
app.state.bitable_internal_token = INTERNAL_TOKEN
|
||||
app.include_router(bitable_routes.router, prefix="/api/v1")
|
||||
return app
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def no_service_app() -> FastAPI:
|
||||
"""App without bitable_service on state — simulates uninitialized subsystem."""
|
||||
|
|
@ -77,6 +94,18 @@ async def unauth_client(unauth_app: FastAPI) -> httpx.AsyncClient:
|
|||
yield c
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
async def internal_client(internal_app: FastAPI) -> httpx.AsyncClient:
|
||||
"""Client that sends X-Internal-Token (real auth path, no override)."""
|
||||
transport = ASGITransport(app=internal_app)
|
||||
async with httpx.AsyncClient(
|
||||
transport=transport,
|
||||
base_url="http://test",
|
||||
headers={"X-Internal-Token": INTERNAL_TOKEN},
|
||||
) as c:
|
||||
yield c
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
async def no_service_client(no_service_app: FastAPI) -> httpx.AsyncClient:
|
||||
transport = ASGITransport(app=no_service_app)
|
||||
|
|
@ -497,6 +526,86 @@ async def test_update_view(client: httpx.AsyncClient) -> None:
|
|||
assert resp.json()["view"]["name"] == "New"
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# DELETE /views/{view_id} (U6)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
async def test_delete_view_success(client: httpx.AsyncClient) -> None:
|
||||
"""DELETE an existing view with >=2 views → 204 No Content."""
|
||||
table_id = (await client.post("/api/v1/bitable/tables", json={"name": "T"})).json()["table"][
|
||||
"id"
|
||||
]
|
||||
# Create 2 views so the last-view protection does not trigger.
|
||||
v1 = (
|
||||
await client.post(f"/api/v1/bitable/tables/{table_id}/views", json={"name": "v1"})
|
||||
).json()["view"]["id"]
|
||||
await client.post(f"/api/v1/bitable/tables/{table_id}/views", json={"name": "v2"})
|
||||
resp = await client.delete(f"/api/v1/bitable/views/{v1}")
|
||||
assert resp.status_code == 204
|
||||
assert resp.content == b""
|
||||
# Confirm it's gone.
|
||||
views = (await client.get(f"/api/v1/bitable/tables/{table_id}/views")).json()["views"]
|
||||
assert all(v["id"] != v1 for v in views)
|
||||
|
||||
|
||||
async def test_delete_view_404_when_missing(client: httpx.AsyncClient) -> None:
|
||||
"""DELETE a non-existent view → 404."""
|
||||
resp = await client.delete("/api/v1/bitable/views/nonexistent-view-id")
|
||||
assert resp.status_code == 404
|
||||
|
||||
|
||||
async def test_delete_view_404_when_not_owner(
|
||||
client: httpx.AsyncClient, bitable_service: BitableService
|
||||
) -> None:
|
||||
"""DELETE a view on a table owned by another user → 404 (not 403).
|
||||
|
||||
Pattern 4 (IDOR): existence is never disclosed to a non-owner.
|
||||
"""
|
||||
# Table owned by a different user.
|
||||
other_table = await bitable_service.create_table(name="Other", owner_user_id="other-user")
|
||||
view = await bitable_service.create_view(other_table.id, name="v")
|
||||
resp = await client.delete(f"/api/v1/bitable/views/{view.id}")
|
||||
assert resp.status_code == 404
|
||||
|
||||
|
||||
async def test_delete_view_409_when_last_view(client: httpx.AsyncClient) -> None:
|
||||
"""DELETE the last remaining view of a table → 409 Conflict."""
|
||||
table_id = (await client.post("/api/v1/bitable/tables", json={"name": "T"})).json()["table"][
|
||||
"id"
|
||||
]
|
||||
only_view = (
|
||||
await client.post(f"/api/v1/bitable/tables/{table_id}/views", json={"name": "only"})
|
||||
).json()["view"]["id"]
|
||||
resp = await client.delete(f"/api/v1/bitable/views/{only_view}")
|
||||
assert resp.status_code == 409
|
||||
# The view is still present.
|
||||
views = (await client.get(f"/api/v1/bitable/tables/{table_id}/views")).json()["views"]
|
||||
assert len(views) == 1
|
||||
|
||||
|
||||
async def test_delete_view_internal_token_passthrough(internal_client: httpx.AsyncClient) -> None:
|
||||
"""X-Internal-Token bypasses ownership: DELETE succeeds on another user's table."""
|
||||
# Create a table as the internal admin user; ownership is bypassed.
|
||||
table_id = (
|
||||
await internal_client.post("/api/v1/bitable/tables", json={"name": "InternalT"})
|
||||
).json()["table"]["id"]
|
||||
v1 = (
|
||||
await internal_client.post(f"/api/v1/bitable/tables/{table_id}/views", json={"name": "v1"})
|
||||
).json()["view"]["id"]
|
||||
await internal_client.post(f"/api/v1/bitable/tables/{table_id}/views", json={"name": "v2"})
|
||||
resp = await internal_client.delete(f"/api/v1/bitable/views/{v1}")
|
||||
assert resp.status_code == 204
|
||||
|
||||
|
||||
async def test_delete_view_internal_token_404_when_missing(
|
||||
internal_client: httpx.AsyncClient,
|
||||
) -> None:
|
||||
"""X-Internal-Token still gets 404 for a non-existent view (no silent success)."""
|
||||
resp = await internal_client.delete("/api/v1/bitable/views/does-not-exist")
|
||||
assert resp.status_code == 404
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Formula validation (U5b)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
|
|
|||
Loading…
Reference in New Issue