fix(template): 修复模板库保存/颜色/拖拽排序,联动OntologyInspector,种子腹腔镜35分类模板
- backend/schemas.py: TemplateUpdate 添加 classes/rules 字段 - backend/models.py: Template 添加 description 列 - backend/routers/templates.py: create/update 打包/解包 mapping_rules.classes (已有) - backend/main.py: seed 腹腔镜胆囊切除术35分类模板 - src/lib/api.ts: updateTemplate 改 PATCH,补齐 color/z_index,_mapTemplate 对齐 TS 接口 - src/store/useStore.ts: 新增 activeTemplateId/setActiveTemplateId - src/components/TemplateRegistry.tsx: 随机颜色(HSL轮盘)、HTML5拖拽排序、批量JSON导入、一键载入腹腔镜模板、handleSave 补齐必填字段 - src/components/OntologyInspector.tsx: 完全重写,从store读取模板,支持模板切换和自定义分类 - src/components/VideoWorkspace.tsx: 进入时自动加载模板列表 - src/components/ProjectLibrary.tsx: 修复状态字符串 TS 严格类型报错 - 工程分析/: 更新实现方案与经验记录 Timestamp: 20260430_222830
This commit is contained in:
37
工程分析/经验记录.md
37
工程分析/经验记录.md
@@ -300,3 +300,40 @@ AI 助手运行的容器/环境与项目实际开发环境分离,后者才装
|
||||
---
|
||||
|
||||
> 新增经验请追加到文件末尾,保持时间倒序或正序均可,但需确保每条经验包含完整的 A/B/C/D 四段。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 2026-04-30-22-38 — 模板库保存失效 + 颜色重复 + 拖拽排序 + OntologyInspector 联动
|
||||
|
||||
### A. 具体问题
|
||||
1. `TemplateRegistry.tsx` 点击保存无反应,模板数据未写入后端
|
||||
2. `addClass()` 所有新类别颜色相同(硬编码 `#06b6d4`)
|
||||
3. z-index 仅显示文本,无拖拽调整功能
|
||||
4. `OntologyInspector.tsx` 完全硬编码 mock 数据,未与模板库联动
|
||||
5. 后端 seed 脚本启动时报 `description` 是 `Template` 的无效关键字参数
|
||||
|
||||
### B. 产生原因
|
||||
1. 前端 `updateTemplate` 用 `PUT` 请求,但后端 `@router.patch` 只接受 `PATCH` → 405
|
||||
2. `createTemplate` payload 未传 `color`/`z_index`,但后端 `TemplateBase` 要求 `color` 必填
|
||||
3. `TemplateUpdate` schema 缺少 `classes`/`rules` 字段,update 时分类数据被丢弃
|
||||
4. `Template` ORM 模型缺少 `description` 列,seed 脚本直接传 `description=...` 导致 TypeError
|
||||
5. `api.ts` 的 `_mapTemplate` 返回了 `color`/`z_index`,但前端 `Template` TS 接口未定义这些字段,导致 TS 编译错误被忽略后引发运行时字段缺失
|
||||
6. `OntologyInspector` 从未接入 store 或 API,完全独立维护一份 mock 数据
|
||||
|
||||
### C. 解决方案
|
||||
1. **对齐 HTTP 方法**: `api.ts` `updateTemplate` 改为 `apiClient.patch(...)`
|
||||
2. **补齐必填字段**: `handleSave` 中构造 payload 时始终携带 `color` 和 `z_index`
|
||||
3. **扩展 Update Schema**: `backend/schemas.py` `TemplateUpdate` 添加 `classes` 和 `rules` 字段
|
||||
4. **数据库 Schema 补丁**: `ALTER TABLE templates ADD COLUMN description TEXT;` + `models.py` 添加 `description = Column(Text, nullable=True)`
|
||||
5. **TS 类型对齐**: `_mapTemplate` 只返回 `Template` 接口中定义的字段,避免隐式 any
|
||||
6. **HTML5 拖拽排序**: 用 `draggable` + `dataTransfer.setData` 实现项间拖拽,释放后重算 z-index(数组倒序 ×10)
|
||||
7. **OntologyInspector 重写**: 从 store 读取 `templates`/`activeTemplateId`,顶部加模板选择器,支持自定义分类添加
|
||||
8. **工作区预加载**: `VideoWorkspace` 进入时若 `templates` 为空自动 `getTemplates()`
|
||||
|
||||
### D. 后续如何避免问题
|
||||
1. **前后端 HTTP 方法必须严格对齐**: FastAPI `@router.patch` 只响应 PATCH,前端不能用 PUT/POST 代替,否则报 405
|
||||
2. **Schema 变更必须双向同步**: 后端 `BaseModel` 添加字段后,前端 payload 类型、ORM 模型、数据库表必须同时更新
|
||||
3. **TS 接口必须与 API 响应严格一致**: `_mapTemplate` 返回的字段如果不在 `Template` 接口中,必须通过 `&` 扩展接口或过滤字段,避免运行时丢失数据
|
||||
4. **Mock 数据必须尽早替换为真实数据流**: 任何硬编码的 mock 数据在联调阶段都是技术债,应在功能开发初期就接入 store/API
|
||||
5. **seed 脚本必须与 ORM 模型严格一致**: 新增模型字段后,seed 逻辑也要同步更新,否则启动即报错
|
||||
|
||||
Reference in New Issue
Block a user