admin/danyang-match
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
159772f61565280433ab8483b2d5ab479ce24e69
danyang-match/docs/superpowers/plans/2026-09-11-admin-full-ui-redesign.md
T

11 KiB
Raw Blame History

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: 加入失败覆盖测试

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: 提交契约
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:

npm --prefix admin-web run type-check
npm --prefix admin-web run build

Expected: 退出码 0。

  • Step 4: 提交
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: 验证并提交
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: 构建并提交
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: 构建并提交
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: 构建并提交
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:

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: 提交
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: 运行最终验证
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: 提交报告并停止
git add docs/Phase-Admin-UI-Completion-Report.md
git commit -m "docs: report admin UI completion"

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

Reference in New Issue View Git Blame Copy Permalink