# 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" ``` 停止并等待最终验收，不自动发布或部署。