Files
danyang-match/docs/superpowers/plans/2026-09-13-reference-driven-dual-client-ui-redesign.md
T

6.7 KiB
Raw Blame History

善缘丹阳双端参考图重设计总实施计划

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: 先完成旧 UI 代码与冲突文档治理,再依次交付管理端框架/工作台和小程序 11 个核心页面的参考图驱动重设计。

Architecture: 将工作拆成三个可独立验证的执行包,严格按“清理治理 → 管理端 → 小程序 → 双端终验”推进。每个执行包有独立测试、提交和人工验收门禁,上一包未通过不得进入下一包。

Tech Stack: PowerShell、Node.js contract tests、Vue 3、TypeScript、Vite、Element Plus、微信原生小程序、微信开发者工具、Docker Compose

Spec: docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md

Global Constraints

  • 管理端唯一视觉参考:ChatGPT Image 2026年9月11日 10_34_34 (1).png。
  • 小程序唯一视觉参考:ChatGPT Image 2026年9月11日 12_46_40.png。
  • 小程序首页保留 8 个固定入口,顺序为找对象、公益红娘、公益活动、婚恋咨询、婚恋课堂、婚前辅导、婚恋反诈、善缘服务站。
  • 管理端第一批只重构全局框架与工作台。
  • 小程序第一批只重构 11 个已确认核心页面。
  • 不改变 API、数据库、权限、Capability、Required、Mutual Match、Block 和活动二阶段确认规则。
  • 不依赖 Google Fonts、境外 CDN 或新的大型 UI 框架。
  • 所有删除必须先有引用证据,并能通过 Git 恢复。

Task 1: 执行旧代码与文档治理计划

Files:

  • Read: docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md
  • Produce: docs/UI_CLEANUP_REPORT_2026-09-13.md

Interfaces:

  • Consumes: 当前 Git 工作区、活动路由、Markdown 文档和小程序编译配置。

  • Produces: 唯一有效视觉文档入口、清理报告、无失效视觉证据的代码库。

  • Step 1: 按子计划逐项执行清理任务

Run:

Get-Content -Raw -Encoding UTF8 'docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md'

Expected: 读取到代码盘点、文档治理、TypeScript 唯一源和清理验收四个任务。

  • Step 2: 完成清理门禁并暂停

Run:

node ui-tests/ui-document-baseline-contracts.mjs
node ui-tests/miniapp-source-uniqueness-contracts.mjs
npm --prefix admin-web run type-check
npm --prefix admin-web run build
npm --prefix miniapp run type-check

Expected: 全部退出码为 0;清理报告已列出 KEEP/REFACTOR/DELETE/REVIEW;等待用户确认后再继续。

Task 2: 执行管理端框架与工作台重设计计划

Files:

  • Read: docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md
  • Produce: artifacts/ui-redesign/admin/

Interfaces:

  • Consumes: 清理后的唯一视觉基线、现有权限路由和运营统计 API。

  • Produces: 新管理端框架、工作台及两种目标分辨率截图。

  • Step 1: 执行管理端子计划

Run:

Get-Content -Raw -Encoding UTF8 'docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md'

Expected: 读取到视觉契约、全局框架、数据适配、工作台和浏览器验收任务。

  • Step 2: 完成管理端门禁并暂停

Run:

node ui-tests/admin-reference-contracts.mjs
npm --prefix admin-web run type-check
npm --prefix admin-web run build

Expected: 全部通过;1366×768、1920×1080 截图存在;用户完成人工验收。

Task 3: 执行小程序 11 页重设计计划

Files:

  • Read: docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md
  • Produce: artifacts/ui-redesign/miniapp/

Interfaces:

  • Consumes: 清理后的 TypeScript/JavaScript 源文件边界、现有 stores/services/API 和参考图。

  • Produces: 5 个 Tab 页、6 个服务页、正式素材和逐屏截图。

  • Step 1: 执行小程序子计划 A/B/C 三组

Run:

Get-Content -Raw -Encoding UTF8 'docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md'

Expected: 每组均包含失败契约、最小实现、静态检查、开发者工具编译和人工验收步骤。

  • Step 2: 完成小程序门禁

Run:

node ui-tests/miniapp-reference-contracts.mjs
node ui-tests/phase07-home-contracts.mjs
npm --prefix miniapp run type-check

Expected: 全部通过;11 页截图完整;微信开发者工具无 WXML/WXSS/TypeScript 编译错误。

Task 4: 双端最终验收与状态收口

Files:

  • Create: docs/UI_REFERENCE_REDESIGN_ACCEPTANCE_2026-09-13.md
  • Modify: docs/STATUS.md
  • Modify: docs/JIRA_BACKLOG.md
  • Modify: docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
  • Test: ui-tests/ui-document-baseline-contracts.mjs

Interfaces:

  • Consumes: 双端最终截图、构建日志、微信开发者工具编译结果和用户验收结论。

  • Produces: 唯一有效的本轮验收报告和准确进度状态。

  • Step 1: 写入验收报告骨架并保持未通过状态

# 双端参考图重设计验收报告

- 管理端框架与工作台:待验收
- 小程序 11 个核心页面:待验收
- 冲突代码与文档清理:待验收
- 剩余差异:以逐屏对比记录为准
  • Step 2: 运行双端完整门禁

Run:

node ui-tests/ui-document-baseline-contracts.mjs
node ui-tests/admin-reference-contracts.mjs
node ui-tests/miniapp-reference-contracts.mjs
node ui-tests/phase03-verification-contracts.mjs
node ui-tests/phase04-local-eligibility-contracts.mjs
node ui-tests/phase06-match-eligibility-contracts.mjs
node ui-tests/phase07-home-contracts.mjs
npm --prefix admin-web run type-check
npm --prefix admin-web run build
npm --prefix miniapp run type-check

Expected: 全部退出码为 0。

  • Step 3: 使用 Docker 联调但不重建数据卷

Run:

docker compose -f infrastructure/docker-compose.yml ps
bash backend/mvnw -f backend/pom.xml test

Expected: Docker 服务为运行状态;仓库 Maven Wrapper 完成后端测试。Docker 检查不得执行 down -v、删除或重建 volume。

  • Step 4: 用户验收后更新状态

将验收报告、STATUS.md、JIRA_BACKLOG.md 和页面矩阵从“待验收”更新为实际结论,不得预先写入“通过”。

  • Step 5: 提交最终验收记录
git add -- docs/UI_REFERENCE_REDESIGN_ACCEPTANCE_2026-09-13.md docs/STATUS.md docs/JIRA_BACKLOG.md docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "docs: record reference UI redesign acceptance"

Expected: 提交只包含状态和验收文档,不混入业务代码。