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-miniapp-full-ui-redesign.md
T

433 lines
17 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Miniapp 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:** 将小程序全部 63 个页面迁移到已批准的紫蓝夜景与粉色高光设计系统，同时保持 V1.1 功能和业务状态完整。
**Architecture:** 复用基础计划交付的全局令牌、导航、卡片、按钮、头像、空状态和错误状态组件；页面按业务域批量改造 WXML/WXSS，保留现有 JS/TS 请求和事件契约。全局契约自动检查 63 页覆盖、固定 Tab、8 个首页入口、Emoji 和页面硬编码颜色。
**Tech Stack:** 微信小程序原生、TypeScript、JavaScript、WXSS、Node.js assert
**Spec:** `docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md`
**Path notation:** 下文 `name.{wxml,wxss}` 明确表示同时修改 `name.wxml` 与 `name.wxss` 两个现有文件，不代表通配或待定文件。
## Global Constraints
- 必须先通过 `2026-09-11-ui-foundation-and-pilot.md` 的用户视觉门禁。
- 63 个已注册页面必须全部覆盖，不新增第六个 Tab。
- 首页 8 个入口和首页模块顺序不可改变。
- Required 条件、Mutual Match、Block、活动互选二阶段确认和 Capability 不可回归。
- 人物、活动、服务和内容继续读取真实 API。
- 页面 WXML 不得残留 Emoji；页面 WXSS 不得新增硬编码主题色。
- 表单、正文、安全和隐私页面使用高对比浅色内容区。
---
### Task 1: 建立 63 页自动覆盖契约
**Files:**
- Modify: `ui-tests/miniapp-redesign-contracts.mjs`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
- Test: `ui-tests/miniapp-redesign-contracts.mjs`
**Interfaces:**
- Consumes: `miniapp/app.json` 页面清单。
- Produces: 每页根节点 `app-page`、无 Emoji 和矩阵状态覆盖契约。
- [ ] **Step 1: 写入失败测试**
```js
const pages = JSON.parse(read('miniapp/app.json')).pages
assert.equal(pages.length, 63)
for (const route of pages) {
const name = route.split('/').at(-1)
const wxml = read(`miniapp/${route}.wxml`)
const wxss = read(`miniapp/${route}.wxss`)
assert.ok(wxml.includes('app-page'), `${route} 未接入统一页面容器`)
assert.doesNotMatch(wxml, /[\u{1F300}-\u{1FAFF}]/u, `${route} 仍包含 Emoji`)
assert.doesNotMatch(wxss, /#[0-9a-fA-F]{3,8}/, `${route} 仍含页面级硬编码颜色`)
}
```
- [ ] **Step 2: 验证契约失败**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，指出首个未迁移页面。
- [ ] **Step 3: 将 63 页标记为未开始**
矩阵不得提前标记通过；每个后续任务仅更新本批页面为 `待验收`。
- [ ] **Step 4: 提交**
```bash
git add ui-tests/miniapp-redesign-contracts.mjs docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "test: require full miniapp redesign coverage"
```
### Task 2: 登录、实名、本地资格和资料流程
**Files:**
- Modify: `miniapp/pages/login/login.{wxml,wxss}`
- Modify: `miniapp/pages/bind-phone/bind-phone.{wxml,wxss}`
- Modify: `miniapp/pages/verification/verification.{wxml,wxss}`
- Modify: `miniapp/pages/local-eligibility/local-eligibility.{wxml,wxss}`
- Modify: `miniapp/pages/local-eligibility-supplement/local-eligibility-supplement.{wxml,wxss}`
- Modify: `miniapp/pages/profile-basic/profile-basic.{wxml,wxss}`
- Modify: `miniapp/pages/profile-lifestyle/profile-lifestyle.{wxml,wxss}`
- Modify: `miniapp/pages/profile-photos/profile-photos.{wxml,wxss}`
- Modify: `miniapp/pages/profile-interests/profile-interests.{wxml,wxss}`
- Modify: `miniapp/pages/profile-intent/profile-intent.{wxml,wxss}`
- Modify: `miniapp/pages/profile-intro/profile-intro.{wxml,wxss}`
- Modify: `miniapp/pages/profile-preference/profile-preference.{wxml,wxss}`
- Modify: `miniapp/pages/profile-confirm/profile-confirm.{wxml,wxss}`
- Modify: `miniapp/pages/review-pending/review-pending.{wxml,wxss}`
- Modify: `miniapp/pages/review-rejected/review-rejected.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 现有认证、资料、实名和本地资格 API。
- Produces: 分步资料流程、上传、审核中、驳回和重新提交界面。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含本批页面。
- [ ] **Step 2: 改造 15 个页面**
根容器使用 `app-page`；表单保持真实 label、必填说明和错误恢复；本地资格与实名认证保持独立表达。
- [ ] **Step 3: 验证并提交**
```bash
npm --prefix miniapp run type-check
git add miniapp/pages/login miniapp/pages/bind-phone miniapp/pages/verification miniapp/pages/local-eligibility miniapp/pages/local-eligibility-supplement miniapp/pages/profile-* miniapp/pages/review-* docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp onboarding flows"
```
Expected: 类型检查退出码 0。
### Task 3: 推荐、人物、匹配和聊天
**Files:**
- Modify: `miniapp/pages/discover/discover.{wxml,wxss}`
- Modify: `miniapp/pages/profile-detail/profile-detail.{wxml,wxss}`
- Modify: `miniapp/pages/fate-center/fate-center.{wxml,wxss}`
- Modify: `miniapp/pages/messages/messages.{wxml,wxss}`
- Modify: `miniapp/pages/chat/chat.{wxml,wxss}`
- Modify: `miniapp/components/user-card/index.{wxml,wxss}`
- Modify: `miniapp/components/recommend-card/index.{wxml,wxss}`
- Modify: `miniapp/components/conversation-item/index.{wxml,wxss}`
- Modify: `miniapp/components/message-bubble/index.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 推荐、用户详情、Match 和消息 API。
- Produces: 筛选、人物卡、喜欢状态、会话列表和聊天气泡。
- [ ] **Step 1: 保持契约为红**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含本批页面。
- [ ] **Step 2: 改造页面与组件**
Required 条件不显示“已放宽”；未 Mutual 页面不出现私信入口；Block 状态禁用推荐、搜索和聊天入口。
- [ ] **Step 3: 运行安全契约与类型检查**
```bash
node ui-tests/miniapp-auth-contracts.mjs
npm --prefix miniapp run type-check
```
Expected: 两条命令均 PASS。
- [ ] **Step 4: 提交**
```bash
git add miniapp/pages/discover miniapp/pages/profile-detail miniapp/pages/fate-center miniapp/pages/messages miniapp/pages/chat miniapp/components/user-card miniapp/components/recommend-card miniapp/components/conversation-item miniapp/components/message-bubble docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp matching and chat"
```
### Task 4: 活动、报名、签到和活动互选
**Files:**
- Modify: `miniapp/pages/activity/activity.{wxml,wxss}`
- Modify: `miniapp/pages/activity-detail/activity-detail.{wxml,wxss}`
- Modify: `miniapp/pages/activity-register/activity-register.{wxml,wxss}`
- Modify: `miniapp/pages/my-activities/my-activities.{wxml,wxss}`
- Modify: `miniapp/pages/checkin/checkin.{wxml,wxss}`
- Modify: `miniapp/pages/activity-feedback/activity-feedback.{wxml,wxss}`
- Modify: `miniapp/pages/activity-matches/activity-matches.{wxml,wxss}`
- Modify: `miniapp/pages/activity-mutual-result/activity-mutual-result.{wxml,wxss}`
- Modify: `miniapp/pages/activity-mutual-waiting/activity-mutual-waiting.{wxml,wxss}`
- Modify: `miniapp/components/activity-card/index.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 活动、报名、签到、反馈和互选确认 API。
- Produces: 活动卡、详情、报名状态、签到码和二阶段互选确认界面。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含本批页面。
- [ ] **Step 2: 改造活动流程**
单向意向页面不得泄露对方选择；互选结果页必须先要求双方分别确认开启沟通，不能直接表现为已创建聊天。
- [ ] **Step 3: 验证并提交**
```bash
node ui-tests/ui-contracts.mjs
npm --prefix miniapp run type-check
git add miniapp/pages/activity* miniapp/pages/my-activities miniapp/pages/checkin miniapp/components/activity-card docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp activity flows"
```
Expected: 契约和类型检查 PASS。
### Task 5: 公益红娘
**Files:**
- Modify: `miniapp/pages/matchmaker/matchmaker.{wxml,wxss}`
- Modify: `miniapp/pages/matchmaker-apply/matchmaker-apply.{wxml,wxss}`
- Modify: `miniapp/pages/matchmaker-progress/matchmaker-progress.{wxml,wxss}`
- Modify: `miniapp/pages/matchmaker-login/matchmaker-login.{wxml,wxss}`
- Modify: `miniapp/pages/matchmaker-workbench/matchmaker-workbench.{wxml,wxss}`
- Modify: `miniapp/components/matchmaker-card/index.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 公益红娘申请、进度和工作台 API。
- Produces: 公益说明、申请、服务进度和红娘工作台。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含红娘页面。
- [ ] **Step 2: 改造五页和红娘卡片**
明确“用户永久免费”；红娘只能辅助推荐，界面不得出现代用户 Like 的操作。
- [ ] **Step 3: 类型检查并提交**
```bash
npm --prefix miniapp run type-check
git add miniapp/pages/matchmaker* miniapp/components/matchmaker-card docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp matchmaker service"
```
### Task 6: 咨询和婚前辅导
**Files:**
- Modify: `miniapp/pages/counseling-intro/counseling-intro.{wxml,wxss}`
- Modify: `miniapp/pages/counseling-request/counseling-request.{wxml,wxss}`
- Modify: `miniapp/pages/my-counseling/my-counseling.{wxml,wxss}`
- Modify: `miniapp/pages/premarital-intro/premarital-intro.{wxml,wxss}`
- Modify: `miniapp/pages/premarital-request/premarital-request.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 咨询与婚前辅导 API。
- Produces: 服务介绍、申请、预约状态和隐私提示。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含五个咨询页面。
- [ ] **Step 2: 改造五个页面**
咨询与红娘服务保持独立表达；咨询正文不出现在红娘页面；隐私提示始终可见。
- [ ] **Step 3: 类型检查并提交**
```bash
npm --prefix miniapp run type-check
git add miniapp/pages/counseling-* miniapp/pages/my-counseling miniapp/pages/premarital-* docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp counseling flows"
```
### Task 7: 服务中心、服务站和预约
**Files:**
- Modify: `miniapp/pages/service-center/service-center.{wxml,wxss}`
- Modify: `miniapp/pages/service-station/service-station.{wxml,wxss}`
- Modify: `miniapp/pages/service-appointment/service-appointment.{wxml,wxss}`
- Modify: `miniapp/pages/my-appointments/my-appointments.{wxml,wxss}`
- Modify: `miniapp/pages/service-program/service-program.{wxml,wxss}`
- Modify: `miniapp/pages/service-history/service-history.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 服务站、预约、专项服务和服务记录 API。
- Produces: 服务入口、地点、开放时间、预约表单和历史记录。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含六个服务页面。
- [ ] **Step 2: 改造六个页面**
服务站展示地址、电话、开放时间和内部预约入口；不得将主办组织关系表现为用户数据权限。
- [ ] **Step 3: 类型检查并提交**
```bash
npm --prefix miniapp run type-check
git add miniapp/pages/service-* miniapp/pages/my-appointments docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp service locations"
```
### Task 8: 内容、反诈、安全和账号管理
**Files:**
- Modify: `miniapp/pages/content/content.{wxml,wxss}`
- Modify: `miniapp/pages/content-detail/content-detail.{wxml,wxss}`
- Modify: `miniapp/pages/anti-fraud/anti-fraud.{wxml,wxss}`
- Modify: `miniapp/pages/report/report.{wxml,wxss}`
- Modify: `miniapp/pages/my-reports/my-reports.{wxml,wxss}`
- Modify: `miniapp/pages/appeal/appeal.{wxml,wxss}`
- Modify: `miniapp/pages/blacklist/blacklist.{wxml,wxss}`
- Modify: `miniapp/pages/privacy-settings/privacy-settings.{wxml,wxss}`
- Modify: `miniapp/pages/relationship-status/relationship-status.{wxml,wxss}`
- Modify: `miniapp/pages/account-status/account-status.{wxml,wxss}`
- Modify: `miniapp/pages/account-status-page/account-status-page.{wxml,wxss}`
- Modify: `miniapp/pages/account-logout/account-logout.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 内容、举报、申诉、黑名单、隐私和账号生命周期 API。
- Produces: 内容列表、长文、安全提示、证据上传和危险操作界面。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: FAIL，包含本批页面。
- [ ] **Step 2: 改造十二个页面**
长文使用浅色正文区；举报和申诉说明证据与结果；退出服务、注销、拉黑等危险操作保留二次确认和结果反馈。
- [ ] **Step 3: 类型检查并提交**
```bash
npm --prefix miniapp run type-check
git add miniapp/pages/content* miniapp/pages/anti-fraud miniapp/pages/report miniapp/pages/my-reports miniapp/pages/appeal miniapp/pages/blacklist miniapp/pages/privacy-settings miniapp/pages/relationship-status miniapp/pages/account-* docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: redesign miniapp safety and account flows"
```
### Task 9: 个人中心、通知和帮助页面
**Files:**
- Modify: `miniapp/pages/index/index.{wxml,wxss}`
- Modify: `miniapp/pages/mine/mine.{wxml,wxss}`
- Modify: `miniapp/pages/settings/settings.{wxml,wxss}`
- Modify: `miniapp/pages/notifications/notifications.{wxml,wxss}`
- Modify: `miniapp/pages/help-center/help-center.{wxml,wxss}`
- Modify: `miniapp/pages/about/about.{wxml,wxss}`
- Modify: `miniapp/pages/my-activities/my-activities.{wxml,wxss}`
- Modify: `miniapp/pages/my-appointments/my-appointments.{wxml,wxss}`
- Modify: `miniapp/pages/my-counseling/my-counseling.{wxml,wxss}`
- Modify: `miniapp/pages/my-reports/my-reports.{wxml,wxss}`
- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`
**Interfaces:**
- Consumes: 首页聚合、个人中心、通知和各“我的服务”API。
- Produces: 首页完整模块、个人服务总览、通知和帮助。
- [ ] **Step 1: 运行红色覆盖测试**
Run: `node ui-tests/miniapp-redesign-contracts.mjs`
Expected: 仅剩本批或未登记页面失败。
- [ ] **Step 2: 改造页面并保持固定顺序**
首页十段注释和 8 个入口顺序保持不变；个人中心显示真实服务状态，不使用参考图统计数字。
- [ ] **Step 3: 运行全量契约**
```bash
node ui-tests/ui-contracts.mjs
node ui-tests/tabbar-icons.mjs
node ui-tests/miniapp-auth-contracts.mjs
node ui-tests/miniapp-redesign-contracts.mjs
npm --prefix miniapp run type-check
```
Expected: 全部 PASS，63 页覆盖契约无失败。
- [ ] **Step 4: 提交**
```bash
git add miniapp/pages/index miniapp/pages/mine miniapp/pages/settings miniapp/pages/notifications miniapp/pages/help-center miniapp/pages/about miniapp/pages/my-* docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md
git commit -m "feat: complete miniapp full UI redesign"
```
### Task 10: 微信开发者工具和多尺寸验收
**Files:**
- Create: `docs/Phase-Miniapp-UI-Completion-Report.md`
- Create: `artifacts/ui-redesign/miniapp/home-320.png`
- Create: `artifacts/ui-redesign/miniapp/home-375.png`
- Create: `artifacts/ui-redesign/miniapp/home-390.png`
- Create: `artifacts/ui-redesign/miniapp/home-430.png`
**Interfaces:**
- Consumes: 63 个已改造页面和微信开发者工具。
- Produces: 编译结果、多尺寸截图、核心流程回归和完成报告。
- [ ] **Step 1: 执行静态验证**
```bash
node ui-tests/ui-contracts.mjs
node ui-tests/brand-assets.mjs
node ui-tests/tabbar-icons.mjs
node ui-tests/miniapp-auth-contracts.mjs
node ui-tests/miniapp-redesign-contracts.mjs
npm --prefix miniapp run type-check
```
Expected: 全部退出码 0。
- [ ] **Step 2: 微信开发者工具编译**
打开 `miniapp/`，清空控制台后重新编译。Expected: WXML、WXSS、JavaScript、资源路径均无红色错误。
- [ ] **Step 3: 回归核心流程**
依次检查登录、资料、审核、推荐、喜欢、Mutual、聊天、Block、活动报名、活动互选二阶段确认、红娘、咨询、预约、内容和举报。
- [ ] **Step 4: 捕获四种宽度并比较**
使用 320、375、390、430 宽度；检查安全区、Tab Bar、长文本、表单、弹窗、空状态和图片裁切。
- [ ] **Step 5: 检查基础无障碍**
所有主要触控目标不小于 44px 等效尺寸；图标具备可理解的文字或无障碍标签；浅色正文区、按钮和状态文字保持可读对比度；不只用颜色表达错误或业务状态。
- [ ] **Step 6: 提交完成报告**
```bash
git add docs/Phase-Miniapp-UI-Completion-Report.md
git commit -m "docs: report miniapp UI completion"
```
停止并等待最终验收，不自动发布或部署。
Reference in New Issue View Git Blame Copy Permalink