chore(openspec): track fe-admin-user-page implementation

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-11 01:16:08 +08:00
parent 5e002cac74
commit ad002003fe
6 changed files with 143 additions and 1 deletions

View File

@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-10-11

View File

@ -0,0 +1,40 @@
## Context
布局壳已完成(`frontend/AD/layout`)。菜单占位数据里「用户管理」指向 `/system/user`,但该路由页面尚未创建。本阶段只做界面,占位数据字段对齐后端 User 模型,后端对接放到后续。
## Goals / Non-Goals
**Goals:**
- 跑通 CRUD 页面模式(搜索 + 表格 + 分页 + 弹窗表单 + 删除确认 + 重置密码),作为后续页面的模板。
- 数据源隔离在 `src/api/user.ts`,页面只调其函数,后续换 http 不动页面。
**Non-Goals:**
- 不接后端真实接口;不做「关联角色/部门」的跨域操作;不抽公共 CRUD 组件(等第二个页面再抽共性)。
## 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` 调用。
### D2. 页面结构(直接使用 Element Plus)
`src/pages/system/user/index.vue` 使用 el-form(搜索)+ el-table(列表)+ el-pagination(分页)+ el-dialog + el-form(新增/编辑/重置密码)+ ElMessage/ElMessageBox(提示/确认)。
- 不抽公共组件:等第二个域页面出现重复再提取(YAGNI)。
- 页面用 `<route>` 块声明 `meta`(breadcrumb/title 等可后续补)。
### D3. 状态与组织展示
状态 `status` 用 el-tag 区分(enabled=success / disabled=info / locked=danger)。所属组织 `orgCode` 在表格显示组织名(mock 内联一个 org 映射),表单用 el-select 选择。
## Risks / Trade-offs
- [mock 数据不持久] → 刷新即重置,仅用于界面演示;接后端后自然解决。
- [公共组件抽取时机] → 先做单页,第二个域页面出现重复时再抽 `ty-*` 公共组件。
## Migration Plan
- 纯前端新增,无迁移。回滚 `git revert`。
## Open Questions
(无)

View File

@ -0,0 +1,24 @@
## Why
布局壳已完成。Phase 1 需要开始搭管理后台的真实页面。用户管理是最具代表性的 CRUD 页——跑通「搜索 + 表格 + 分页 + 弹窗表单 + 删除 + 重置密码」的页面模式,作为后续角色/资源/组织/字典/配置/日志页面的模板。本阶段只做界面,占位数据字段对齐后端,后端对接放到后面。
## What Changes
- 新增「用户管理」页面(`src/pages/system/user/index.vue`,对应菜单 `/system/user`)。
- 页面功能:搜索(用户名/昵称/手机/状态)、表格(用户名/昵称/邮箱/手机/状态/组织/创建时间)、分页、新增/编辑弹窗、删除确认、重置密码。
- 数据源:占位数据(`src/api/user.ts` 内 mock,返回 `{code, message, data}`,字段严格对齐后端 `User` 模型),后续接后端只替换该模块实现。
## Capabilities
### New Capabilities
- `frontend/AD/user`: 用户管理页面(列表查询/新增/编辑/删除/重置密码/状态展示)
### Modified Capabilities
(无)
## Impact
- 前端 `sources/sysmgr-admin`:
- 新增 `src/pages/system/user/index.vue`(用户管理页)
- 新增 `src/api/user.ts`(占位数据源,字段对齐后端 User,后续换 http)
- 后端无变更;不接真实接口。

View File

@ -0,0 +1,58 @@
## Purpose
定义用户管理页面的行为:按条件分页查询用户列表,支持新增、编辑、删除与重置密码,并展示用户状态。
## ADDED Requirements
### Requirement: 用户分页查询
系统 SHALL 在用户管理页按「用户名/昵称/手机/状态」条件分页查询用户列表,展示用户名、昵称、邮箱、手机、状态、所属组织与创建时间。
#### Scenario: 条件查询
- **WHEN** 用户输入用户名/昵称/手机或选择状态并点击查询
- **THEN** 表格按条件过滤并展示分页结果
#### Scenario: 分页
- **WHEN** 用户切换页码或每页条数
- **THEN** 表格展示对应页数据
### Requirement: 新增用户
系统 SHALL 支持新增用户:填写用户名、昵称、邮箱、手机、状态、所属组织与初始密码。
#### Scenario: 新增
- **WHEN** 用户点击新增并填写必填项(用户名、密码)后提交
- **THEN** 系统新增该用户并刷新列表
### Requirement: 编辑用户
系统 SHALL 支持编辑用户基本信息(昵称/邮箱/手机/状态/组织),用户名不可改。
#### Scenario: 编辑
- **WHEN** 用户编辑某用户并提交
- **THEN** 系统更新该用户并刷新列表
### Requirement: 重置密码
系统 SHALL 支持对某用户重置密码(填写新密码)。
#### Scenario: 重置密码
- **WHEN** 用户对某用户执行重置密码并填写新密码
- **THEN** 系统更新该用户密码
### Requirement: 删除用户
系统 SHALL 支持删除用户,删除前需确认。
#### Scenario: 删除确认
- **WHEN** 用户点击删除并确认
- **THEN** 系统删除该用户并刷新列表
### Requirement: 状态展示
用户状态 SHALL 以标签形式区分展示:启用 / 停用 / 锁定。
#### Scenario: 状态标签
- **WHEN** 列表展示用户
- **THEN** 状态以不同颜色的标签区分(启用=成功色、停用=信息色、锁定=危险色)
### Requirement: 字段对齐后端
占位用户数据 SHALL 采用后端 `user` 实体字段(`id/tenantCode/username/nickname/email/phone/status/orgCode/createdAt` 等),不自造字段名。
#### Scenario: 后续接后端
- **WHEN** 占位数据替换为后端用户接口
- **THEN** 页面无需改动数据结构即可直接渲染

View File

@ -0,0 +1,18 @@
## 1. 数据源
- [x] 1.1 `src/api/user.ts`:定义 `User` 类型(字段对齐后端)+ 模块级 mock 数组 + `listUsers/createUser/updateUser/deleteUser/resetPassword` 异步函数(返回 `{code,message,data}`)
## 2. 用户管理页面
- [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)
## 3. 验证
- [x] 3.1 `pnpm dev` 登录后进入「用户管理」,列表/搜索/分页正常
- [x] 3.2 新增/编辑/重置密码/删除流程可用,状态标签颜色正确
- [x] 3.3 `pnpm type-check` 与 `pnpm build-only` 通过

@ -1 +1 @@
Subproject commit 246a305df50c47070e04d98a50e0fde10800ac7d
Subproject commit 5549b2e75cf1766c144008d1746513775d85dd1e