docs: plan full dual-client UI redesign
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
# Admin Full UI Redesign Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 将管理端全部 19 条现有路由迁移到已批准的浅色专业运营设计系统。
|
||||
|
||||
**Architecture:** 复用基础计划交付的主题令牌、整体框架和 Element Plus，通过业务域批次改造页面，不改变 API 调用、权限元数据和操作语义。每个批次先扩展静态契约，再改 WYSIWYG 页面并执行类型检查和构建。
|
||||
|
||||
**Tech Stack:** Vue 3、TypeScript、Vite、Pinia、Element Plus、Node.js assert
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md`
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 必须先通过 `2026-09-11-ui-foundation-and-pilot.md` 的用户视觉门禁。
|
||||
- 保留全部现有路由、权限和真实 API。
|
||||
- 不新增管理端业务页面，不隐藏现有模块。
|
||||
- 所有列表具备加载、空数据、错误和无权限状态。
|
||||
- 删除、发布、封禁、覆盖和批量操作保留二次确认。
|
||||
- 不引入新的 UI 框架或图标依赖。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 锁定管理端全路由覆盖
|
||||
|
||||
**Files:**
|
||||
- Modify: `ui-tests/admin-redesign-contracts.mjs`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
- Test: `ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `admin-web/src/router/index.ts`。
|
||||
- Produces: 19 条路由对应的组件文件覆盖断言。
|
||||
|
||||
- [ ] **Step 1: 加入失败覆盖测试**
|
||||
|
||||
```js
|
||||
const routeViews = [
|
||||
'views/LoginView.vue', 'views/DashboardView.vue',
|
||||
'modules/review/ReviewView.vue', 'modules/activity/ActivityInterestView.vue',
|
||||
'modules/risk/ReportCenterView.vue', 'modules/appeal/AppealCenterView.vue',
|
||||
'modules/user/UserManagementView.vue', 'modules/user/UserDetailView.vue',
|
||||
'modules/organization/OrganizationView.vue', 'modules/operator/OperatorManagementView.vue',
|
||||
'modules/analytics/AnalyticsView.vue', 'modules/audit/AuditLogView.vue',
|
||||
'modules/banner/BannerManagementView.vue', 'modules/content/ContentManagementView.vue',
|
||||
'modules/service-station/ServiceStationView.vue',
|
||||
'modules/service-appointment/ServiceAppointmentView.vue',
|
||||
'modules/service-program/ServiceProgramView.vue',
|
||||
'modules/counseling/CounselingView.vue', 'modules/referral/ReferralManagementView.vue',
|
||||
]
|
||||
for (const view of routeViews) {
|
||||
assert.ok(read(`admin-web/src/${view}`).includes('ui-redesign-ready'), `${view} 未完成重设计`)
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 验证测试失败**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，列出首个未完成页面。
|
||||
|
||||
- [ ] **Step 3: 在矩阵标记各批次**
|
||||
|
||||
将 19 条管理端页面状态保持为 `未开始`，完成后由各任务改为 `待验收`，不得预先标记通过。
|
||||
|
||||
- [ ] **Step 4: 提交契约**
|
||||
|
||||
```bash
|
||||
git add ui-tests/admin-redesign-contracts.mjs docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "test: require full admin redesign coverage"
|
||||
```
|
||||
|
||||
### Task 2: 用户、资料审核和活动互选
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/modules/user/UserManagementView.vue`
|
||||
- Modify: `admin-web/src/modules/user/UserDetailView.vue`
|
||||
- Modify: `admin-web/src/modules/review/ReviewView.vue`
|
||||
- Modify: `admin-web/src/modules/activity/ActivityInterestView.vue`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 原文件中的用户、审核和活动互选 API。
|
||||
- Produces: 统一筛选栏、表格、详情分区、审核操作区和状态反馈。
|
||||
|
||||
- [ ] **Step 1: 保持 Task 1 契约为红**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，且失败列表包含本批次页面。
|
||||
|
||||
- [ ] **Step 2: 改造四个页面**
|
||||
|
||||
在四个根容器添加 `ui-redesign-ready page-container page-shell`。复用 `page-heading`、`surface-card` 和 Element Plus 组件；禁止改变请求路径、请求参数和权限检查。
|
||||
|
||||
- [ ] **Step 3: 标记矩阵为待验收并验证**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
```
|
||||
|
||||
Expected: 退出码 0。
|
||||
|
||||
- [ ] **Step 4: 提交**
|
||||
|
||||
```bash
|
||||
git add admin-web/src/modules/user admin-web/src/modules/review admin-web/src/modules/activity docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "feat: redesign admin user and review workflows"
|
||||
```
|
||||
|
||||
### Task 3: 公益咨询、转介和专项服务
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/modules/counseling/CounselingView.vue`
|
||||
- Modify: `admin-web/src/modules/referral/ReferralManagementView.vue`
|
||||
- Modify: `admin-web/src/modules/service-program/ServiceProgramView.vue`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 原咨询、转介和专项服务 API；Counselor 数据范围保持 Assigned Service。
|
||||
- Produces: 服务队列、分配状态、跟进信息和项目成员界面。
|
||||
|
||||
- [ ] **Step 1: 确认覆盖测试仍失败**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，包含本批次三个页面。
|
||||
|
||||
- [ ] **Step 2: 改造三个页面**
|
||||
|
||||
加入 `ui-redesign-ready`，将敏感咨询正文与普通服务摘要视觉分区；无权限时不渲染敏感字段。
|
||||
|
||||
- [ ] **Step 3: 验证并提交**
|
||||
|
||||
```bash
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
git add admin-web/src/modules/counseling admin-web/src/modules/referral admin-web/src/modules/service-program docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "feat: redesign admin counseling services"
|
||||
```
|
||||
|
||||
Expected: 构建成功并提交本批次文件。
|
||||
|
||||
### Task 4: 服务站和预约
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/modules/service-station/ServiceStationView.vue`
|
||||
- Modify: `admin-web/src/modules/service-appointment/ServiceAppointmentView.vue`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 服务站与预约现有 API。
|
||||
- Produces: 场地卡片、开放时间、预约队列、确认和完成状态。
|
||||
|
||||
- [ ] **Step 1: 确认契约为红**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，包含两个服务阵地页面。
|
||||
|
||||
- [ ] **Step 2: 改造并验证数据范围提示**
|
||||
|
||||
服务站人员界面不得出现全用户库入口；预约操作保留确认反馈。
|
||||
|
||||
- [ ] **Step 3: 构建并提交**
|
||||
|
||||
```bash
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
git add admin-web/src/modules/service-station admin-web/src/modules/service-appointment docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "feat: redesign admin station operations"
|
||||
```
|
||||
|
||||
### Task 5: Banner 和内容运营
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/modules/banner/BannerManagementView.vue`
|
||||
- Modify: `admin-web/src/modules/content/ContentManagementView.vue`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Banner 和内容 API。
|
||||
- Produces: 图片预览、内部目标类型、内容状态、发布和下架操作。
|
||||
|
||||
- [ ] **Step 1: 确认契约为红**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，包含两个内容页面。
|
||||
|
||||
- [ ] **Step 2: 改造两个页面**
|
||||
|
||||
Banner 表单只展示允许的内部跳转类型；发布和下架保持二次确认；Content Editor 页面不展示用户婚恋数据。
|
||||
|
||||
- [ ] **Step 3: 构建并提交**
|
||||
|
||||
```bash
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
git add admin-web/src/modules/banner admin-web/src/modules/content docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "feat: redesign admin content operations"
|
||||
```
|
||||
|
||||
### Task 6: 举报、申诉和审计
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/modules/risk/ReportCenterView.vue`
|
||||
- Modify: `admin-web/src/modules/appeal/AppealCenterView.vue`
|
||||
- Modify: `admin-web/src/modules/audit/AuditLogView.vue`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 举报、申诉和审计 API。
|
||||
- Produces: 风险级别、处理时限、证据摘要、申诉状态和审计轨迹。
|
||||
|
||||
- [ ] **Step 1: 确认契约为红**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，包含三个安全治理页面。
|
||||
|
||||
- [ ] **Step 2: 改造三个页面**
|
||||
|
||||
高风险状态同时使用图标、文字和颜色；敏感字段保持脱敏；处理操作保留确认与结果反馈。
|
||||
|
||||
- [ ] **Step 3: 构建并提交**
|
||||
|
||||
```bash
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
git add admin-web/src/modules/risk admin-web/src/modules/appeal admin-web/src/modules/audit docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "feat: redesign admin safety operations"
|
||||
```
|
||||
|
||||
### Task 7: 组织、人员和统计
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/modules/organization/OrganizationView.vue`
|
||||
- Modify: `admin-web/src/modules/operator/OperatorManagementView.vue`
|
||||
- Modify: `admin-web/src/modules/analytics/AnalyticsView.vue`
|
||||
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 组织、Operator 和统计 API。
|
||||
- Produces: 组织关系、人员权限摘要和数据图表页面。
|
||||
|
||||
- [ ] **Step 1: 确认契约为红**
|
||||
|
||||
Run: `node ui-tests/admin-redesign-contracts.mjs`
|
||||
|
||||
Expected: FAIL，包含本批次三个页面。
|
||||
|
||||
- [ ] **Step 2: 改造三个页面**
|
||||
|
||||
组织关系不得显示为用户数据权限；角色与权限使用清晰只读摘要；图表颜色取自管理端令牌。
|
||||
|
||||
- [ ] **Step 3: 运行全管理端契约**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
node ui-tests/admin-redesign-contracts.mjs
|
||||
node ui-tests/ui-contracts.mjs
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
```
|
||||
|
||||
Expected: 全部 PASS，19 个页面均包含 `ui-redesign-ready`。
|
||||
|
||||
- [ ] **Step 4: 提交**
|
||||
|
||||
```bash
|
||||
git add admin-web/src/modules/organization admin-web/src/modules/operator admin-web/src/modules/analytics docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
|
||||
git commit -m "feat: complete admin full UI redesign"
|
||||
```
|
||||
|
||||
### Task 8: 管理端视觉和权限验收
|
||||
|
||||
**Files:**
|
||||
- Create: `docs/Phase-Admin-UI-Completion-Report.md`
|
||||
- Create: `artifacts/ui-redesign/admin/admin-1280.png`
|
||||
- Create: `artifacts/ui-redesign/admin/admin-1366.png`
|
||||
- Create: `artifacts/ui-redesign/admin/admin-1440.png`
|
||||
- Create: `artifacts/ui-redesign/admin/admin-1920.png`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 全部管理端页面与角色账号。
|
||||
- Produces: 响应式截图、权限抽查和完成报告。
|
||||
|
||||
- [ ] **Step 1: 用不同角色检查菜单**
|
||||
|
||||
检查 super_admin、reviewer、matchmaker、counselor、service_station_operator、content_editor；每个角色只能看到有权限的导航。
|
||||
|
||||
- [ ] **Step 2: 捕获四种宽度**
|
||||
|
||||
检查侧栏、表格、筛选、弹窗和详情页无横向遮挡；记录参考图差异。
|
||||
|
||||
- [ ] **Step 3: 检查基础无障碍**
|
||||
|
||||
用键盘完成菜单、筛选、表格操作和弹窗关闭；焦点清晰可见；图标按钮有中文可访问名称；正文和状态文字满足可读对比度。
|
||||
|
||||
- [ ] **Step 4: 运行最终验证**
|
||||
|
||||
```bash
|
||||
node ui-tests/admin-redesign-contracts.mjs
|
||||
node ui-tests/ui-contracts.mjs
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
```
|
||||
|
||||
Expected: 全部退出码 0。
|
||||
|
||||
- [ ] **Step 5: 提交报告并停止**
|
||||
|
||||
```bash
|
||||
git add docs/Phase-Admin-UI-Completion-Report.md
|
||||
git commit -m "docs: report admin UI completion"
|
||||
```
|
||||
|
||||
停止并等待管理端验收，不自动进入小程序全量计划。
|
||||
Reference in New Issue
Block a user