From 1272b48fc1168e648c1266e2b8165912f405e906 Mon Sep 17 00:00:00 2001 From: liuyun Date: Sun, 11 Oct 2026 01:26:11 +0800 Subject: [PATCH] chore(openspec): track fe-admin-user-page component extraction Co-Authored-By: Claude Opus 4.8 --- openspec/changes/fe-admin-user-page/design.md | 36 ++++++++++--------- .../changes/fe-admin-user-page/proposal.md | 9 +++-- openspec/changes/fe-admin-user-page/tasks.md | 32 ++++++++++------- sources/sysmgr-admin | 2 +- 4 files changed, 45 insertions(+), 34 deletions(-) diff --git a/openspec/changes/fe-admin-user-page/design.md b/openspec/changes/fe-admin-user-page/design.md index fe06d44..2fc5d26 100644 --- a/openspec/changes/fe-admin-user-page/design.md +++ b/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 页面模式（搜索 + 表格 + 分页 + 弹窗表单 + 删除确认 + 重置密码），作为后续页面的模板。 -- 数据源隔离在 `src/api/user.ts`，页面只调其函数，后续换 http 不动页面。 +- 抽取公共组件：`ty-schema-form`（JSON Schema 表单）、`ty-search-form`、`ty-table`、`ty-form-dialog`、`ty-crud`（整页组合）。 +- 用 JSON Schema 描述表单（搜索 + 弹窗表单），声明式渲染字段与校验。 +- 用户管理页用 `ty-crud` + JSON Schema + 内联数据（setTimeout）跑通。 **Non-Goals:** -- 不接后端真实接口；不做「关联角色/部门」的跨域操作；不抽公共 CRUD 组件（等第二个页面再抽共性）。 +- 不接后端；不做「关联角色/部门」跨域操作；不引入第三方表单库（自己实现轻量 JSON Schema 子集）。 ## Decisions -### D1. 数据源：mock 模块，契约对齐后端 -`src/api/user.ts` 导出异步函数（`listUsers/createUser/updateUser/deleteUser/resetPassword`），内部用模块级数组模拟数据，返回 `{code:0, message:'ok', data}`。字段严格对齐后端 `User`（`id/tenantCode/username/nickname/email/phone/status/orgCode/createdAt`）。 -- 备选：页面内联 mock。放弃——后续接后端要改页面，隔离到 api 模块换实现即可。 -- 该模块用注释标注「TODO: 对接后端」，后续替换为 `http` 调用。 +### 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. 页面结构（直接使用 Element Plus） -`src/pages/system/user/index.vue` 使用 el-form（搜索）+ el-table（列表）+ el-pagination（分页）+ el-dialog + el-form（新增/编辑/重置密码）+ ElMessage/ElMessageBox（提示/确认）。 -- 不抽公共组件：等第二个域页面出现重复再提取（YAGNI）。 -- 页面用 `` 块声明 `meta`（breadcrumb/title 等可后续补）。 +### 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. 状态与组织展示 -状态 `status` 用 el-tag 区分（enabled=success / disabled=info / locked=danger）。所属组织 `orgCode` 在表格显示组织名（mock 内联一个 org 映射），表单用 el-select 选择。 +### D3. 数据：页面内联 + setTimeout +不建 mock 模块。用户管理页内联 `users` 数组，`list/create/update/remove` 用 `setTimeout` 模拟异步、返回 `PageResult`。后续接后端时，把这些函数替换为 `http` 调用即可（页面与 `ty-crud` 不动）。 ## Risks / Trade-offs -- [mock 数据不持久] → 刷新即重置，仅用于界面演示；接后端后自然解决。 -- [公共组件抽取时机] → 先做单页，第二个域页面出现重复时再抽 `ty-*` 公共组件。 +- [JSON Schema 子集覆盖不全] → 只覆盖常用字段类型，复杂字段用 `readOnly`/`showOn`/`formatter` 扩展，必要时组件内补 widget。 +- [内联数据刷新即重置] → 仅界面演示用；接后端后自然解决。 +- [ty-crud 抽象过早] → 先用户管理一页验证，第二页复用时再迭代调整。 ## Migration Plan @@ -37,4 +39,4 @@ ## Open Questions -（无） +- 复杂字段（日期/级联/文件上传）的 schema widget 后置，用到再补。 diff --git a/openspec/changes/fe-admin-user-page/proposal.md b/openspec/changes/fe-admin-user-page/proposal.md index c37cf4a..303ba9d 100644 --- a/openspec/changes/fe-admin-user-page/proposal.md +++ b/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/api/user.ts`（占位数据源，字段对齐后端 User，后续换 http） + - 新增公共组件 `src/components/ty-schema-form.vue`、`ty-search-form.vue`、`ty-table.vue`、`ty-form-dialog.vue`、`ty-crud.vue` + - 新增类型 `src/types/crud.ts`（JsonSchema/TableColumn/PageResult 等） + - 新增 `src/pages/system/user/index.vue`（用户管理页，ty-crud + JSON Schema + 内联数据） - 后端无变更；不接真实接口。 diff --git a/openspec/changes/fe-admin-user-page/tasks.md b/openspec/changes/fe-admin-user-page/tasks.md index 897a6e1..6683aaf 100644 --- a/openspec/changes/fe-admin-user-page/tasks.md +++ b/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.2 表格列（用户名/昵称/邮箱/手机/状态 tag/组织/创建时间）+ 操作列（编辑/重置密码/删除） -- [x] 2.3 分页（el-pagination，page/pageSize/total） -- [x] 2.4 新增/编辑弹窗（el-dialog + el-form，校验用户名/密码必填；编辑时用户名只读） -- [x] 2.5 重置密码弹窗（新密码） -- [x] 2.6 删除确认（ElMessageBox.confirm）+ 成功/失败提示（ElMessage） +- [x] 2.1 `ty-schema-form`：按 JSON Schema 渲染字段（select/switch/input-number/password/textarea/input）+ 校验 + expose validate/resetFields + readOnly/showOn +- [x] 2.2 `ty-search-form`：行内搜索 + 查询/重置 +- [x] 2.3 `ty-table`：列配置（text/tag/datetime/formatter）+ 分页 + `#actions` 操作列插槽 +- [x] 2.4 `ty-form-dialog`：弹窗 + schema 表单 + 校验提交（v-model:visible + mode） -## 3. 验证 +## 3. 整页组件 -- [x] 3.1 `pnpm dev` 登录后进入「用户管理」，列表/搜索/分页正常 -- [x] 3.2 新增/编辑/重置密码/删除流程可用，状态标签颜色正确 -- [x] 3.3 `pnpm type-check` 与 `pnpm build-only` 通过 +- [x] 3.1 `ty-crud`：组合搜索/工具栏/表格/弹窗/删除，props 传 columns/searchSchema/formSchema/list/create/update/remove，`#row-actions` 插槽扩展 + +## 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 下可验收 diff --git a/sources/sysmgr-admin b/sources/sysmgr-admin index 5549b2e..45b22ac 160000 --- a/sources/sysmgr-admin +++ b/sources/sysmgr-admin @@ -1 +1 @@ -Subproject commit 5549b2e75cf1766c144008d1746513775d85dd1e +Subproject commit 45b22acd6cf4b498e5a432b56ce448141d4d0808