## Context 布局壳已完成(`frontend/AD/layout`)。用户管理页是第一个业务页,目标是**跑通并抽取一套可复用的 CRUD 公共组件**,作为后续角色/资源/组织/字典/配置/日志页面的底座。本阶段不接后端,页面内写死数据 + `setTimeout` 模拟异步。 ## Goals / Non-Goals **Goals:** - 抽取公共组件:`ty-schema-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-schema-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-schema-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 后置,用到再补。