# 小程序 11 个核心页面参考图重设计实施计划

> **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:** 严格按照小程序参考图重构 5 个 Tab 页面与 6 个服务页面，保留真实数据、业务不变量和 8 个固定首页入口。

**Architecture:** 先建立全局 Token、正式素材和公共页面骨架，再按 A/B/C 三组迁移页面。页面继续使用现有 stores/services/API；视觉组件只接收状态与数据，不在组件内推导权限或关系事实。

**Tech Stack:** 微信原生小程序、TypeScript/JavaScript、WXML、WXSS、Node.js contracts、微信开发者工具

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

## Global Constraints

- 五个 Tab 固定为首页、找对象、消息、活动、我的。
- 首页 8 入口采用两行四列并保持正式顺序。
- 页面使用深靛蓝/紫色夜景、珊瑚粉、白色内容卡片的参考图语言。
- 不使用 Emoji、字符图标、CSS 拼图或临时占位资产。
- Mutual Match、Block、Required、Capability 和活动二阶段确认逻辑保持不变。
- 只重构已确认 11 页；次级详情页只保证入口与现有功能不被破坏。

---

### Task 1: 建立 11 页范围与参考图契约

**Files:**
- Create: `ui-tests/miniapp-reference-contracts.mjs`
- Modify: `miniapp/app.json`
- Modify: `miniapp/app.wxss`
- Test: `ui-tests/miniapp-reference-contracts.mjs`

**Interfaces:**
- Consumes: 11 个页面路径、五项 Tab 和 8 入口正式顺序。
- Produces: 对页面范围、Token、图标资源和关键结构的失败优先契约。

- [ ] **Step 1: 编写失败的核心契约**

```js
import assert from 'node:assert/strict'
import { existsSync, readFileSync } from 'node:fs'
import { resolve } from 'node:path'
const root = resolve(import.meta.dirname, '..')
const read = (p) => readFileSync(resolve(root, p), 'utf8')
const app = JSON.parse(read('miniapp/app.json'))
const pages = ['index','discover','messages','activity','mine','matchmaker','counseling-intro','premarital-intro','content','anti-fraud','service-station']
assert.deepEqual(app.tabBar.list.map((i) => i.text), ['首页','找对象','消息','活动','我的'])
for (const page of pages) {
  const base = `miniapp/pages/${page}/${page}`
  for (const ext of ['.json','.wxml','.wxss']) assert.ok(existsSync(resolve(root, base + ext)), `${page}${ext} 不存在`)
  assert.match(read(base + '.wxml'), /reference-page/, `${page} 未接入参考图页面骨架`)
  assert.doesNotMatch(read(base + '.wxml'), /[\u{1F300}-\u{1FAFF}]/u, `${page} 含 Emoji`)
}
const home = read('miniapp/pages/index/index.ts')
for (const code of ['find_object','matchmaker','activities','counseling','classroom','premarital','anti_fraud','service_station']) assert.ok(home.includes(code))
console.log('Miniapp reference contracts passed')
```

- [ ] **Step 2: 运行契约确认失败**

Run: `node ui-tests/miniapp-reference-contracts.mjs`

Expected: FAIL，报告首个未接入 `reference-page` 的页面。

- [ ] **Step 3: 建立全局 Token**

```css
page {
  --mini-night-start: #171d72;
  --mini-night-end: #4d268f;
  --mini-accent-pink: #ff4f91;
  --mini-accent-coral: #ff6678;
  --mini-card-bg: #ffffff;
  --mini-text: #1f2744;
  --mini-muted: #7d839b;
  --mini-card-radius: 24rpx;
  --mini-shadow: 0 12rpx 32rpx rgba(31, 25, 91, 0.12);
}
```

- [ ] **Step 4: 校准 `app.json`**

保持 64 个现有页面注册和五项 Tab 路径不变；只更新全局背景、导航颜色和本轮正式图标路径，不删除非本轮页面。

- [ ] **Step 5: 提交契约与基础 Token**

```powershell
npm --prefix miniapp run type-check
git add -- ui-tests/miniapp-reference-contracts.mjs miniapp/app.json miniapp/app.wxss
git commit -m "test: lock miniapp reference page scope"
```

### Task 2: 制作正式素材与公共组件

**Files:**
- Create: `miniapp/assets/brand/home-hero-v2.jpg`
- Create: `miniapp/assets/service/matchmaker-hero.jpg`
- Create: `miniapp/assets/service/counseling-hero.jpg`
- Create: `miniapp/assets/service/premarital-hero.jpg`
- Create: `miniapp/assets/service/anti-fraud-hero.jpg`
- Create: `miniapp/assets/service/station-hero.jpg`
- Create: `miniapp/assets/icons/home/*.png`
- Modify: `miniapp/components/nav-bar/*`
- Modify: `miniapp/components/section-header/*`
- Modify: `miniapp/components/loading/*`
- Modify: `miniapp/components/empty/*`
- Modify: `miniapp/components/error-state/*`
- Create: `miniapp/components/service-hero/index.{js,json,wxml,wxss}`
- Test: `ui-tests/brand-assets.mjs`
- Test: `ui-tests/miniapp-reference-contracts.mjs`

**Interfaces:**
- Consumes: 参考图的夜景、人物、花朵、爱心和丹阳城市风格。
- Produces: `service-hero` 组件属性 `title/subtitle/imageSrc/tone` 和 8 个入口 PNG 图标。

- [ ] **Step 1: 扩展资产失败契约**

断言上述图片存在、尺寸非零、首页 8 图标不复用封面图、WXML 不使用 Emoji/字符图标。

- [ ] **Step 2: 按实际组件尺寸生成素材**

生成不含设备边框和不可编辑 UI 文字的独立图片；首页 Banner 使用横向夜景，服务页 Hero 保留人物或主题主体安全区。逐张检查风格一致、无乱码、无水印。

- [ ] **Step 3: 实现公共组件状态**

`service-hero` 只负责图片与文案布局；Loading、Empty、Error 保持明确状态；`nav-bar` 适配胶囊按钮和安全区，不写业务权限。

- [ ] **Step 4: 验证并提交素材组件**

```powershell
node ui-tests/brand-assets.mjs
npm --prefix miniapp run type-check
git add -- miniapp/assets miniapp/components ui-tests/brand-assets.mjs
git commit -m "feat: add miniapp reference assets and primitives"
```

### Task 3: A1 首页重构

**Files:**
- Modify: `miniapp/pages/index/index.ts`
- Modify: `miniapp/pages/index/index.json`
- Modify: `miniapp/pages/index/index.wxml`
- Modify: `miniapp/pages/index/index.wxss`
- Modify: `miniapp/components/recommend-card/*`
- Test: `ui-tests/phase07-home-contracts.mjs`
- Test: `ui-tests/miniapp-reference-contracts.mjs`

**Interfaces:**
- Consumes: `GET /home`、服务端 quickEntries/Capability、推荐、活动、服务站、课堂与安全数据。
- Produces: 固定模块顺序与 2×4 入口布局。

- [ ] **Step 1: 扩展首页失败契约**

断言 WXML 模块顺序为品牌状态、Banner、8 入口、今日推荐、公益服务、近期活动、服务站、课堂、安全提醒；断言 `processHomeData` 不改变服务端 `enabled/disabledReason`。

- [ ] **Step 2: 运行契约确认失败**

```powershell
node ui-tests/phase07-home-contracts.mjs
node ui-tests/miniapp-reference-contracts.mjs
```

Expected: 至少一个新结构或视觉断言失败。

- [ ] **Step 3: 实现首屏和 8 入口**

参考图还原紫蓝品牌区、夜景 Banner、白色浮层入口卡和紧凑推荐卡；入口固定两行四列。服务端返回入口时按固定 code 排序，不允许运营重排。

- [ ] **Step 4: 完成状态和真实操作**

保留未登录、准入、审核中、暂停、成功牵手、空推荐、错误重试；Like/Pass 必须调用现有 service，删除当前 `setTimeout` 演示反馈。

- [ ] **Step 5: 验证并提交首页**

```powershell
node ui-tests/phase07-home-contracts.mjs
node ui-tests/miniapp-reference-contracts.mjs
npm --prefix miniapp run type-check
git add -- miniapp/pages/index miniapp/components/recommend-card
git commit -m "feat: recreate miniapp home from reference"
```

### Task 4: A2 找对象与消息重构

**Files:**
- Modify: `miniapp/pages/discover/discover.{ts,json,wxml,wxss}`
- Modify: `miniapp/pages/messages/messages.{js,json,wxml,wxss}`
- Modify: `miniapp/components/user-card/*`
- Modify: `miniapp/components/conversation-item/*`
- Test: `ui-tests/miniapp-reference-contracts.mjs`
- Test: `ui-tests/phase06-match-eligibility-contracts.mjs`

**Interfaces:**
- Consumes: `recommendationService`、筛选状态、messageStore、Mutual Match/Block 后端结果。
- Produces: 参考图人物列表、胶囊筛选、消息分类和会话列表。

- [ ] **Step 1: 添加失败断言**

断言找对象页包含 `discover-filter-chips`、`candidate-list`；消息页包含 `message-shortcuts`、`conversation-list`、未读徽标和无 Mutual 状态。

- [ ] **Step 2: 实现找对象页**

保持 Required 筛选语义，卡片展示头像、年龄、本地信息、职业、认证和兴趣；喜欢/忽略调用现有服务；Block 用户不在前端临时过滤后又可被搜索恢复。

- [ ] **Step 3: 实现消息页**

顶部四项为新朋友、互动喜欢、我的关注、系统通知；列表展示头像、摘要、时间和未读数；只有服务端允许的 Mutual Match 会话可进入聊天。

- [ ] **Step 4: 验证并提交**

```powershell
node ui-tests/phase06-match-eligibility-contracts.mjs
node ui-tests/miniapp-reference-contracts.mjs
npm --prefix miniapp run type-check
git add -- miniapp/pages/discover miniapp/pages/messages miniapp/components/user-card miniapp/components/conversation-item
git commit -m "feat: redesign discovery and messages tabs"
```

### Task 5: A3 活动与我的重构

**Files:**
- Modify: `miniapp/pages/activity/activity.{js,json,wxml,wxss}`
- Modify: `miniapp/pages/mine/mine.{js,json,wxml,wxss}`
- Modify: `miniapp/components/activity-card/*`
- Modify: `miniapp/components/avatar/*`
- Test: `ui-tests/miniapp-reference-contracts.mjs`

**Interfaces:**
- Consumes: activityStore、userStore、matchStore 和现有路由。
- Produces: 活动大图卡、报名状态、个人统计和五项服务入口。

- [ ] **Step 1: 添加失败断言**

断言活动页有分类、日历、人数/容量、状态按钮；我的页有个人头部、四项统计、公益身份卡、红娘/咨询/活动/预约/设置入口。

- [ ] **Step 2: 实现活动页**

活动卡展示真实时间、地点、适龄范围、人数和状态；报名按钮进入现有报名流程。不得在活动列表直接创建 Match 或聊天。

- [ ] **Step 3: 实现我的页**

未登录显示登录引导；登录态展示真实资料和统计；敏感数据不出现在页面摘要；设置和各服务入口保持现有路由。

- [ ] **Step 4: 验证 A 组并提交**

```powershell
node ui-tests/miniapp-reference-contracts.mjs
npm --prefix miniapp run type-check
git add -- miniapp/pages/activity miniapp/pages/mine miniapp/components/activity-card miniapp/components/avatar
git commit -m "feat: redesign activity and profile tabs"
```

Expected: 五个 Tab 均可打开且主要交互有效；暂停等待 A 组人工验收。

### Task 6: B 组公益红娘、婚恋咨询、婚前辅导

**Files:**
- Modify: `miniapp/pages/matchmaker/matchmaker.{js,json,wxml,wxss}`
- Modify: `miniapp/pages/counseling-intro/counseling-intro.{ts,json,wxml,wxss}`
- Modify: `miniapp/pages/premarital-intro/premarital-intro.{ts,json,wxml,wxss}`
- Modify: `miniapp/components/matchmaker-card/*`
- Modify: `miniapp/styles/service-page.wxss`
- Test: `ui-tests/miniapp-reference-contracts.mjs`

**Interfaces:**
- Consumes: matchmakerStore、咨询/辅导 API、Capability 和现有申请路由。
- Produces: 三个参考图服务首页及真实申请/预约入口。

- [ ] **Step 1: 添加 B 组失败断言**

断言三个页面使用 `service-hero`；红娘页包含免费服务/真实匹配/隐私保护与申请状态；咨询和辅导页包含四个主题、预约按钮和服务状态。

- [ ] **Step 2: 实现公益红娘**

展示公益说明、申请状态、红娘资料和服务记录；所有推荐仍由用户本人决定，页面不得出现代 Like 操作。

- [ ] **Step 3: 实现咨询与辅导**

咨询与红娘数据模型分离；咨询正文不在介绍页加载；预约按钮进入现有申请页；Capability 禁用时显示服务端原因。

- [ ] **Step 4: 验证 B 组并提交**

```powershell
node ui-tests/miniapp-reference-contracts.mjs
npm --prefix miniapp run type-check
git add -- miniapp/pages/matchmaker miniapp/pages/counseling-intro miniapp/pages/premarital-intro miniapp/components/matchmaker-card miniapp/styles/service-page.wxss
git commit -m "feat: redesign public relationship services"
```

Expected: 自动化 PASS；暂停等待 B 组人工验收。

### Task 7: C 组婚恋课堂、婚恋反诈、善缘服务站

**Files:**
- Modify: `miniapp/pages/content/content.{js,json,wxml,wxss}`
- Modify: `miniapp/pages/anti-fraud/anti-fraud.{js,json,wxml,wxss}`
- Modify: `miniapp/pages/service-station/service-station.{js,json,wxml,wxss}`
- Modify: `miniapp/styles/service-page.wxss`
- Test: `ui-tests/miniapp-reference-contracts.mjs`

**Interfaces:**
- Consumes: 内容、反诈和服务站 API；微信位置与电话接口。
- Produces: 参考图内容列表、安全页和服务站卡片。

- [ ] **Step 1: 添加 C 组失败断言**

断言课堂页有分类和内容列表；反诈页有四类风险与举报/求助入口；服务站页有地址、电话、开放时间、服务项目、定位和预约。

- [ ] **Step 2: 实现课堂与反诈页**

课堂列表展示真实封面、标题、浏览量和发布日期；反诈页使用明确警示但保持温和公益表达；举报入口进入现有举报页面。

- [ ] **Step 3: 实现服务站页**

站点数据为空时显示区域空状态；电话使用 `wx.makePhoneCall`；位置使用 `wx.openLocation`，不依赖 Google Maps；预约进入现有服务预约页。

- [ ] **Step 4: 验证 C 组并提交**

```powershell
node ui-tests/miniapp-reference-contracts.mjs
npm --prefix miniapp run type-check
git add -- miniapp/pages/content miniapp/pages/anti-fraud miniapp/pages/service-station miniapp/styles/service-page.wxss
git commit -m "feat: redesign content safety and service station pages"
```

Expected: 自动化 PASS；暂停等待 C 组人工验收。

### Task 8: 微信开发者工具与逐屏视觉 QA

**Files:**
- Create: `artifacts/ui-redesign/miniapp/01-home.png` 至 `11-service-station.png`
- Create: `artifacts/ui-redesign/miniapp/reference-comparisons/`
- Create: `docs/MINIAPP_REFERENCE_UI_QA_2026-09-13.md`
- Modify: 仅 QA 发现差异的本轮页面和公共组件

**Interfaces:**
- Consumes: 微信开发者工具中的真实编译页面和小程序参考图。
- Produces: 11 页截图、对比图、交互检查与剩余差异记录。

- [ ] **Step 1: 在微信开发者工具重新编译**

确认 TypeScript 编译插件启用；清除旧编译缓存后重新编译。控制台不得出现 WXML、WXSS、组件路径或页面注册错误。

- [ ] **Step 2: 验证五项 Tab 和 11 页入口**

逐个检查 Tab 切换、8 个首页入口、Like/Pass、会话进入、活动报名、红娘申请、咨询预约、辅导预约、课堂详情、举报、电话、定位和服务预约。

- [ ] **Step 3: 验证异常状态**

检查未登录、Loading、空数据、网络失败、无权限、Capability 禁用、Block、无 Mutual Match、审核中和提交失败状态。

- [ ] **Step 4: 截图并对比**

使用同一设备基线截取 11 页，逐页检查顶部高度、卡片圆角、图片比例、按钮尺寸、标签密度、底部安全区和参考图视觉语言。

- [ ] **Step 5: 修复 P0/P1/P2 差异并复测**

每次修复后重新编译和截图；报告不得在仍有 P0/P1/P2 时写 `passed`。

- [ ] **Step 6: 运行最终自动化门禁**

```powershell
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 miniapp run type-check
git diff --check
```

Expected: 全部退出码为 0。

- [ ] **Step 7: 提交 QA 证据**

```powershell
git add -- artifacts/ui-redesign/miniapp docs/MINIAPP_REFERENCE_UI_QA_2026-09-13.md miniapp
git commit -m "test: verify miniapp reference UI fidelity"
```

Expected: 11 页截图和报告齐全；等待用户最终验收。