2.9 KiB
2.9 KiB
Context
布局壳已完成（frontend/AD/layout）。用户管理页是第一个业务页，目标是跑通并抽取一套可复用的 CRUD 公共组件，作为后续角色/资源/组织/字典/配置/日志页面的底座。本阶段不接后端，页面内写死数据 + setTimeout 模拟异步。
Goals / Non-Goals
Goals:
- 抽取公共组件：
ty-form（JSON Schema 表单）、ty-search-form、ty-table、ty-form-dialog、ty-crud（整页组合）。 - 用 JSON Schema 描述表单（搜索 + 弹窗表单），声明式渲染字段与校验。
- 用户管理页用
ty-crud+ JSON Schema + 内联数据（setTimeout）跑通。
Non-Goals:
- 不接后端；不做「关联角色/部门」跨域操作；不引入第三方表单库（自己实现轻量 JSON Schema 子集）。
Decisions
D1. JSON Schema 驱动表单（自实现轻量子集）
表单字段用 JSON Schema 描述：type（string/integer/number/boolean）、title（标签）、enum+enumNames（下拉）、format（password/email/textarea）、default、readOnly、showOn（仅 create/edit 显示，如 password）、required（必填）、minLength/format:email（校验）。
ty-form按 schema 渲染字段（enum→select、boolean→switch、number→input-number、format→password/textarea、其余→input），校验规则由 schema 生成，defineExpose暴露validate/resetFields。- 不引第三方 JSON Schema 表单库（
vue-json-schema-form等）——脚手架追求少依赖，且只需常用子集。
D2. 组件分层（基础组件 + 整页组合）
- 基础组件：
ty-form、ty-search-form（搜索 + 查询/重置）、ty-table（列配置 + 分页 + 操作列插槽）、ty-form-dialog（弹窗 + schema 表单 + 校验提交）。 - 整页组件：
ty-crud（组合搜索/工具栏/表格/弹窗/删除），props 传columns/searchSchema/formSchema/list/create/update/remove等，#row-actions插槽放额外操作（如重置密码）。 - 类型放
src/types/crud.ts（JsonSchema/JsonSchemaProperty/TableColumn/PageResult/PageQuery）。
D3. 数据：页面内联 + setTimeout
不建 mock 模块。用户管理页内联 users 数组，list/create/update/remove 用 setTimeout 模拟异步、返回 PageResult。后续接后端时，把这些函数替换为 http 调用即可（页面与 ty-crud 不动）。
Risks / Trade-offs
- [JSON Schema 子集覆盖不全] → 只覆盖常用字段类型，复杂字段用
readOnly/showOn/formatter扩展，必要时组件内补 widget。 - [内联数据刷新即重置] → 仅界面演示用；接后端后自然解决。
- [ty-crud 抽象过早] → 先用户管理一页验证，第二页复用时再迭代调整。
Migration Plan
- 纯前端新增，无迁移。回滚
git revert。
Open Questions
- 复杂字段（日期/级联/文件上传）的 schema widget 后置，用到再补。