# 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"
```

停止并等待管理端验收，不自动进入小程序全量计划。