System_Management/openspec/changes/fe-admin-user-page/design.md

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（JSON Schema 表单，字段支持 width）、ty-search-form（搜索 + 折叠/展开，collapseCount 默认 2，查询/重置置右）、ty-table（列配置 + 分页 + 操作列插槽）、ty-form-dialog（弹窗 + schema 表单 + 校验提交）。
• 整页组件：ty-crud（组合搜索/工具栏/表格/弹窗/删除），props 传 columns/searchSchema/formSchema/list/create/update/remove/actions 等；操作列数据驱动（内置 'edit'/'delete' 或自定义动作），超过 collapseCount（默认 2）时折叠为「更多」下拉。
• 类型放 src/types/crud.ts（JsonSchema/JsonSchemaProperty/TableColumn/PageResult/PageQuery/CrudAction）。

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 后置，用到再补。