chore(openspec): track fe-admin-user-page component extraction

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

@@ -1,35 +1,37 @@
 ## Context
 
-布局壳已完成（`frontend/AD/layout`）。菜单占位数据里「用户管理」指向 `/system/user`，但该路由页面尚未创建。本阶段只做界面，占位数据字段对齐后端 User 模型，后端对接放到后续。
+布局壳已完成（`frontend/AD/layout`）。用户管理页是第一个业务页，目标是**跑通并抽取一套可复用的 CRUD 公共组件**，作为后续角色/资源/组织/字典/配置/日志页面的底座。本阶段不接后端，页面内写死数据 + `setTimeout` 模拟异步。
 
 ## Goals / Non-Goals
 
 **Goals:**
-- 跑通 CRUD 页面模式（搜索 + 表格 + 分页 + 弹窗表单 + 删除确认 + 重置密码），作为后续页面的模板。
+- 抽取公共组件：`ty-schema-form`（JSON Schema 表单）、`ty-search-form`、`ty-table`、`ty-form-dialog`、`ty-crud`（整页组合）。
-- 数据源隔离在 `src/api/user.ts`，页面只调其函数，后续换 http 不动页面。
+- 用 JSON Schema 描述表单（搜索 + 弹窗表单），声明式渲染字段与校验。
+- 用户管理页用 `ty-crud` + JSON Schema + 内联数据（setTimeout）跑通。
 
 **Non-Goals:**
-- 不接后端真实接口；不做「关联角色/部门」的跨域操作；不抽公共 CRUD 组件（等第二个页面再抽共性）。
+- 不接后端；不做「关联角色/部门」跨域操作；不引入第三方表单库（自己实现轻量 JSON Schema 子集）。
 
 ## Decisions
 
-### D1. 数据源：mock 模块，契约对齐后端
+### D1. JSON Schema 驱动表单（自实现轻量子集）
-`src/api/user.ts` 导出异步函数（`listUsers/createUser/updateUser/deleteUser/resetPassword`），内部用模块级数组模拟数据，返回 `{code:0, message:'ok', data}`。字段严格对齐后端 `User`（`id/tenantCode/username/nickname/email/phone/status/orgCode/createdAt`）。
+表单字段用 JSON Schema 描述：`type`（string/integer/number/boolean）、`title`（标签）、`enum`+`enumNames`（下拉）、`format`（password/email/textarea）、`default`、`readOnly`、`showOn`（仅 create/edit 显示，如 password）、`required`（必填）、`minLength`/`format:email`（校验）。
-- 备选：页面内联 mock。放弃——后续接后端要改页面，隔离到 api 模块换实现即可。
+- `ty-schema-form` 按 schema 渲染字段（enum→select、boolean→switch、number→input-number、format→password/textarea、其余→input），校验规则由 schema 生成，`defineExpose` 暴露 `validate`/`resetFields`。
-- 该模块用注释标注「TODO: 对接后端」，后续替换为 `http` 调用。
+- 不引第三方 JSON Schema 表单库（`vue-json-schema-form` 等）——脚手架追求少依赖，且只需常用子集。
 
-### D2. 页面结构（直接使用 Element Plus）
+### D2. 组件分层（基础组件 + 整页组合）
-`src/pages/system/user/index.vue` 使用 el-form（搜索）+ el-table（列表）+ el-pagination（分页）+ el-dialog + el-form（新增/编辑/重置密码）+ ElMessage/ElMessageBox（提示/确认）。
+- 基础组件：`ty-schema-form`、`ty-search-form`（搜索 + 查询/重置）、`ty-table`（列配置 + 分页 + 操作列插槽）、`ty-form-dialog`（弹窗 + schema 表单 + 校验提交）。
-- 不抽公共组件：等第二个域页面出现重复再提取（YAGNI）。
+- 整页组件：`ty-crud`（组合搜索/工具栏/表格/弹窗/删除），props 传 `columns/searchSchema/formSchema/list/create/update/remove` 等，`#row-actions` 插槽放额外操作（如重置密码）。
-- 页面用 `<route>` 块声明 `meta`（breadcrumb/title 等可后续补）。
+- 类型放 `src/types/crud.ts`（JsonSchema/JsonSchemaProperty/TableColumn/PageResult/PageQuery）。
 
-### D3. 状态与组织展示
+### D3. 数据：页面内联 + setTimeout
-状态 `status` 用 el-tag 区分（enabled=success / disabled=info / locked=danger）。所属组织 `orgCode` 在表格显示组织名（mock 内联一个 org 映射），表单用 el-select 选择。
+不建 mock 模块。用户管理页内联 `users` 数组，`list/create/update/remove` 用 `setTimeout` 模拟异步、返回 `PageResult`。后续接后端时，把这些函数替换为 `http` 调用即可（页面与 `ty-crud` 不动）。
 
 ## Risks / Trade-offs
 
-- [mock 数据不持久] → 刷新即重置，仅用于界面演示；接后端后自然解决。
+- [JSON Schema 子集覆盖不全] → 只覆盖常用字段类型，复杂字段用 `readOnly`/`showOn`/`formatter` 扩展，必要时组件内补 widget。
-- [公共组件抽取时机] → 先做单页，第二个域页面出现重复时再抽 `ty-*` 公共组件。
+- [内联数据刷新即重置] → 仅界面演示用；接后端后自然解决。
+- [ty-crud 抽象过早] → 先用户管理一页验证，第二页复用时再迭代调整。
 
 ## Migration Plan
 
@@ -37,4 +39,4 @@
 
 ## Open Questions
 
-（无）
+- 复杂字段（日期/级联/文件上传）的 schema widget 后置，用到再补。

openspec/changes/fe-admin-user-page/proposal.md

@@ -6,7 +6,9 @@
 
 - 新增「用户管理」页面（`src/pages/system/user/index.vue`，对应菜单 `/system/user`）。
 - 页面功能：搜索（用户名/昵称/手机/状态）、表格（用户名/昵称/邮箱/手机/状态/组织/创建时间）、分页、新增/编辑弹窗、删除确认、重置密码。
-- 数据源：占位数据（`src/api/user.ts` 内 mock，返回 `{code, message, data}`，字段严格对齐后端 `User` 模型），后续接后端只替换该模块实现。
+- **抽取公共 CRUD 组件**（本次核心目标）：`ty-schema-form`（JSON Schema 驱动表单）、`ty-search-form`、`ty-table`、`ty-form-dialog`、`ty-crud`（整页组合），供后续 8 个域页面复用。
+- **JSON Schema 描述表单**：搜索与弹窗表单字段用 JSON Schema 声明式配置（类型/标题/枚举/校验/showOn）。
+- 数据：页面内联 + `setTimeout` 模拟异步（不建 mock 模块），字段对齐后端 `user` 模型，后续接后端只替换数据函数。
 
 ## Capabilities
 
@@ -19,6 +21,7 @@
 ## Impact
 
 - 前端 `sources/sysmgr-admin`：
-  - 新增 `src/pages/system/user/index.vue`（用户管理页）
+  - 新增公共组件 `src/components/ty-schema-form.vue`、`ty-search-form.vue`、`ty-table.vue`、`ty-form-dialog.vue`、`ty-crud.vue`
-  - 新增 `src/api/user.ts`（占位数据源，字段对齐后端 User，后续换 http）
+  - 新增类型 `src/types/crud.ts`（JsonSchema/TableColumn/PageResult 等）
+  - 新增 `src/pages/system/user/index.vue`（用户管理页，ty-crud + JSON Schema + 内联数据）
 - 后端无变更；不接真实接口。

openspec/changes/fe-admin-user-page/tasks.md

@@ -1,18 +1,24 @@
-## 1. 数据源
+## 1. 类型
 
-- [x] 1.1 `src/api/user.ts`：定义 `User` 类型（字段对齐后端）+ 模块级 mock 数组 + `listUsers/createUser/updateUser/deleteUser/resetPassword` 异步函数（返回 `{code,message,data}`）
+- [x] 1.1 `src/types/crud.ts`：JsonSchema/JsonSchemaProperty/TableColumn/PageResult/PageQuery 类型
 
-## 2. 用户管理页面
+## 2. 基础组件（src/components/ty-*.vue，自动导入）
 
-- [x] 2.1 `src/pages/system/user/index.vue`：搜索表单（用户名/昵称/手机/状态 + 查询/重置）
+- [x] 2.1 `ty-schema-form`：按 JSON Schema 渲染字段（select/switch/input-number/password/textarea/input）+ 校验 + expose validate/resetFields + readOnly/showOn
-- [x] 2.2 表格列（用户名/昵称/邮箱/手机/状态 tag/组织/创建时间）+ 操作列（编辑/重置密码/删除）
+- [x] 2.2 `ty-search-form`：行内搜索 + 查询/重置
-- [x] 2.3 分页（el-pagination，page/pageSize/total）
+- [x] 2.3 `ty-table`：列配置（text/tag/datetime/formatter）+ 分页 + `#actions` 操作列插槽
-- [x] 2.4 新增/编辑弹窗（el-dialog + el-form，校验用户名/密码必填；编辑时用户名只读）
+- [x] 2.4 `ty-form-dialog`：弹窗 + schema 表单 + 校验提交（v-model:visible + mode）
-- [x] 2.5 重置密码弹窗（新密码）
-- [x] 2.6 删除确认（ElMessageBox.confirm）+ 成功/失败提示（ElMessage）
 
-## 3. 验证
+## 3. 整页组件
 
-- [x] 3.1 `pnpm dev` 登录后进入「用户管理」，列表/搜索/分页正常
+- [x] 3.1 `ty-crud`：组合搜索/工具栏/表格/弹窗/删除，props 传 columns/searchSchema/formSchema/list/create/update/remove，`#row-actions` 插槽扩展
-- [x] 3.2 新增/编辑/重置密码/删除流程可用，状态标签颜色正确
+
-- [x] 3.3 `pnpm type-check` 与 `pnpm build-only` 通过
+## 4. 用户管理页
+
+- [x] 4.1 `src/pages/system/user/index.vue`：用 ty-crud + JSON Schema + 内联数据（setTimeout）实现搜索/列表/分页/新增/编辑/删除/重置密码
+- [x] 4.2 删除 `src/api/user.ts`（不建 mock 模块）
+
+## 5. 验证
+
+- [x] 5.1 `pnpm type-check` 与 `pnpm build-only` 通过
+- [x] 5.2 页面交互（搜索/分页/增删改/重置密码/状态标签）在 dev 下可验收

sources/sysmgr-admin

@@ -1 +1 @@
-Subproject commit 5549b2e75cf1766c144008d1746513775d85dd1e
+Subproject commit 45b22acd6cf4b498e5a432b56ce448141d4d0808