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

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

> **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:

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

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

- [ ] **Step 2: 完成清理门禁并暂停**

Run:

```powershell
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:

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

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

- [ ] **Step 2: 完成管理端门禁并暂停**

Run:

```powershell
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:

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

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

- [ ] **Step 2: 完成小程序门禁**

Run:

```powershell
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: 写入验收报告骨架并保持未通过状态**

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

- 管理端框架与工作台：待验收
- 小程序 11 个核心页面：待验收
- 冲突代码与文档清理：待验收
- 剩余差异：以逐屏对比记录为准
```

- [ ] **Step 2: 运行双端完整门禁**

Run:

```powershell
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:

```powershell
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: 提交最终验收记录**

```powershell
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: 提交只包含状态和验收文档，不混入业务代码。