diff --git a/docs/superpowers/plans/2026-09-11-admin-full-ui-redesign.md b/docs/superpowers/plans/2026-09-11-admin-full-ui-redesign.md new file mode 100644 index 0000000..52340db --- /dev/null +++ b/docs/superpowers/plans/2026-09-11-admin-full-ui-redesign.md @@ -0,0 +1,323 @@ +# Admin 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:** 将管理端全部 19 条现有路由迁移到已批准的浅色专业运营设计系统。 + +**Architecture:** 复用基础计划交付的主题令牌、整体框架和 Element Plus,通过业务域批次改造页面,不改变 API 调用、权限元数据和操作语义。每个批次先扩展静态契约,再改 WYSIWYG 页面并执行类型检查和构建。 + +**Tech Stack:** Vue 3、TypeScript、Vite、Pinia、Element Plus、Node.js assert + +**Spec:** `docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md` + +## Global Constraints + +- 必须先通过 `2026-09-11-ui-foundation-and-pilot.md` 的用户视觉门禁。 +- 保留全部现有路由、权限和真实 API。 +- 不新增管理端业务页面,不隐藏现有模块。 +- 所有列表具备加载、空数据、错误和无权限状态。 +- 删除、发布、封禁、覆盖和批量操作保留二次确认。 +- 不引入新的 UI 框架或图标依赖。 + +--- + +### Task 1: 锁定管理端全路由覆盖 + +**Files:** +- Modify: `ui-tests/admin-redesign-contracts.mjs` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` +- Test: `ui-tests/admin-redesign-contracts.mjs` + +**Interfaces:** +- Consumes: `admin-web/src/router/index.ts`。 +- Produces: 19 条路由对应的组件文件覆盖断言。 + +- [ ] **Step 1: 加入失败覆盖测试** + +```js +const routeViews = [ + 'views/LoginView.vue', 'views/DashboardView.vue', + 'modules/review/ReviewView.vue', 'modules/activity/ActivityInterestView.vue', + 'modules/risk/ReportCenterView.vue', 'modules/appeal/AppealCenterView.vue', + 'modules/user/UserManagementView.vue', 'modules/user/UserDetailView.vue', + 'modules/organization/OrganizationView.vue', 'modules/operator/OperatorManagementView.vue', + 'modules/analytics/AnalyticsView.vue', 'modules/audit/AuditLogView.vue', + 'modules/banner/BannerManagementView.vue', 'modules/content/ContentManagementView.vue', + 'modules/service-station/ServiceStationView.vue', + 'modules/service-appointment/ServiceAppointmentView.vue', + 'modules/service-program/ServiceProgramView.vue', + 'modules/counseling/CounselingView.vue', 'modules/referral/ReferralManagementView.vue', +] +for (const view of routeViews) { + assert.ok(read(`admin-web/src/${view}`).includes('ui-redesign-ready'), `${view} 未完成重设计`) +} +``` + +- [ ] **Step 2: 验证测试失败** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,列出首个未完成页面。 + +- [ ] **Step 3: 在矩阵标记各批次** + +将 19 条管理端页面状态保持为 `未开始`,完成后由各任务改为 `待验收`,不得预先标记通过。 + +- [ ] **Step 4: 提交契约** + +```bash +git add ui-tests/admin-redesign-contracts.mjs docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "test: require full admin redesign coverage" +``` + +### Task 2: 用户、资料审核和活动互选 + +**Files:** +- Modify: `admin-web/src/modules/user/UserManagementView.vue` +- Modify: `admin-web/src/modules/user/UserDetailView.vue` +- Modify: `admin-web/src/modules/review/ReviewView.vue` +- Modify: `admin-web/src/modules/activity/ActivityInterestView.vue` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` + +**Interfaces:** +- Consumes: 原文件中的用户、审核和活动互选 API。 +- Produces: 统一筛选栏、表格、详情分区、审核操作区和状态反馈。 + +- [ ] **Step 1: 保持 Task 1 契约为红** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,且失败列表包含本批次页面。 + +- [ ] **Step 2: 改造四个页面** + +在四个根容器添加 `ui-redesign-ready page-container page-shell`。复用 `page-heading`、`surface-card` 和 Element Plus 组件;禁止改变请求路径、请求参数和权限检查。 + +- [ ] **Step 3: 标记矩阵为待验收并验证** + +Run: + +```bash +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 退出码 0。 + +- [ ] **Step 4: 提交** + +```bash +git add admin-web/src/modules/user admin-web/src/modules/review admin-web/src/modules/activity docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "feat: redesign admin user and review workflows" +``` + +### Task 3: 公益咨询、转介和专项服务 + +**Files:** +- Modify: `admin-web/src/modules/counseling/CounselingView.vue` +- Modify: `admin-web/src/modules/referral/ReferralManagementView.vue` +- Modify: `admin-web/src/modules/service-program/ServiceProgramView.vue` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` + +**Interfaces:** +- Consumes: 原咨询、转介和专项服务 API;Counselor 数据范围保持 Assigned Service。 +- Produces: 服务队列、分配状态、跟进信息和项目成员界面。 + +- [ ] **Step 1: 确认覆盖测试仍失败** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,包含本批次三个页面。 + +- [ ] **Step 2: 改造三个页面** + +加入 `ui-redesign-ready`,将敏感咨询正文与普通服务摘要视觉分区;无权限时不渲染敏感字段。 + +- [ ] **Step 3: 验证并提交** + +```bash +npm --prefix admin-web run type-check +npm --prefix admin-web run build +git add admin-web/src/modules/counseling admin-web/src/modules/referral admin-web/src/modules/service-program docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "feat: redesign admin counseling services" +``` + +Expected: 构建成功并提交本批次文件。 + +### Task 4: 服务站和预约 + +**Files:** +- Modify: `admin-web/src/modules/service-station/ServiceStationView.vue` +- Modify: `admin-web/src/modules/service-appointment/ServiceAppointmentView.vue` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` + +**Interfaces:** +- Consumes: 服务站与预约现有 API。 +- Produces: 场地卡片、开放时间、预约队列、确认和完成状态。 + +- [ ] **Step 1: 确认契约为红** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,包含两个服务阵地页面。 + +- [ ] **Step 2: 改造并验证数据范围提示** + +服务站人员界面不得出现全用户库入口;预约操作保留确认反馈。 + +- [ ] **Step 3: 构建并提交** + +```bash +npm --prefix admin-web run type-check +npm --prefix admin-web run build +git add admin-web/src/modules/service-station admin-web/src/modules/service-appointment docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "feat: redesign admin station operations" +``` + +### Task 5: Banner 和内容运营 + +**Files:** +- Modify: `admin-web/src/modules/banner/BannerManagementView.vue` +- Modify: `admin-web/src/modules/content/ContentManagementView.vue` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` + +**Interfaces:** +- Consumes: Banner 和内容 API。 +- Produces: 图片预览、内部目标类型、内容状态、发布和下架操作。 + +- [ ] **Step 1: 确认契约为红** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,包含两个内容页面。 + +- [ ] **Step 2: 改造两个页面** + +Banner 表单只展示允许的内部跳转类型;发布和下架保持二次确认;Content Editor 页面不展示用户婚恋数据。 + +- [ ] **Step 3: 构建并提交** + +```bash +npm --prefix admin-web run type-check +npm --prefix admin-web run build +git add admin-web/src/modules/banner admin-web/src/modules/content docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "feat: redesign admin content operations" +``` + +### Task 6: 举报、申诉和审计 + +**Files:** +- Modify: `admin-web/src/modules/risk/ReportCenterView.vue` +- Modify: `admin-web/src/modules/appeal/AppealCenterView.vue` +- Modify: `admin-web/src/modules/audit/AuditLogView.vue` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` + +**Interfaces:** +- Consumes: 举报、申诉和审计 API。 +- Produces: 风险级别、处理时限、证据摘要、申诉状态和审计轨迹。 + +- [ ] **Step 1: 确认契约为红** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,包含三个安全治理页面。 + +- [ ] **Step 2: 改造三个页面** + +高风险状态同时使用图标、文字和颜色;敏感字段保持脱敏;处理操作保留确认与结果反馈。 + +- [ ] **Step 3: 构建并提交** + +```bash +npm --prefix admin-web run type-check +npm --prefix admin-web run build +git add admin-web/src/modules/risk admin-web/src/modules/appeal admin-web/src/modules/audit docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "feat: redesign admin safety operations" +``` + +### Task 7: 组织、人员和统计 + +**Files:** +- Modify: `admin-web/src/modules/organization/OrganizationView.vue` +- Modify: `admin-web/src/modules/operator/OperatorManagementView.vue` +- Modify: `admin-web/src/modules/analytics/AnalyticsView.vue` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` + +**Interfaces:** +- Consumes: 组织、Operator 和统计 API。 +- Produces: 组织关系、人员权限摘要和数据图表页面。 + +- [ ] **Step 1: 确认契约为红** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,包含本批次三个页面。 + +- [ ] **Step 2: 改造三个页面** + +组织关系不得显示为用户数据权限;角色与权限使用清晰只读摘要;图表颜色取自管理端令牌。 + +- [ ] **Step 3: 运行全管理端契约** + +Run: + +```bash +node ui-tests/admin-redesign-contracts.mjs +node ui-tests/ui-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 全部 PASS,19 个页面均包含 `ui-redesign-ready`。 + +- [ ] **Step 4: 提交** + +```bash +git add admin-web/src/modules/organization admin-web/src/modules/operator admin-web/src/modules/analytics docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "feat: complete admin full UI redesign" +``` + +### Task 8: 管理端视觉和权限验收 + +**Files:** +- Create: `docs/Phase-Admin-UI-Completion-Report.md` +- Create: `artifacts/ui-redesign/admin/admin-1280.png` +- Create: `artifacts/ui-redesign/admin/admin-1366.png` +- Create: `artifacts/ui-redesign/admin/admin-1440.png` +- Create: `artifacts/ui-redesign/admin/admin-1920.png` + +**Interfaces:** +- Consumes: 全部管理端页面与角色账号。 +- Produces: 响应式截图、权限抽查和完成报告。 + +- [ ] **Step 1: 用不同角色检查菜单** + +检查 super_admin、reviewer、matchmaker、counselor、service_station_operator、content_editor;每个角色只能看到有权限的导航。 + +- [ ] **Step 2: 捕获四种宽度** + +检查侧栏、表格、筛选、弹窗和详情页无横向遮挡;记录参考图差异。 + +- [ ] **Step 3: 检查基础无障碍** + +用键盘完成菜单、筛选、表格操作和弹窗关闭;焦点清晰可见;图标按钮有中文可访问名称;正文和状态文字满足可读对比度。 + +- [ ] **Step 4: 运行最终验证** + +```bash +node ui-tests/admin-redesign-contracts.mjs +node ui-tests/ui-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 全部退出码 0。 + +- [ ] **Step 5: 提交报告并停止** + +```bash +git add docs/Phase-Admin-UI-Completion-Report.md +git commit -m "docs: report admin UI completion" +``` + +停止并等待管理端验收,不自动进入小程序全量计划。 diff --git a/docs/superpowers/plans/2026-09-11-miniapp-full-ui-redesign.md b/docs/superpowers/plans/2026-09-11-miniapp-full-ui-redesign.md new file mode 100644 index 0000000..5c9a9dd --- /dev/null +++ b/docs/superpowers/plans/2026-09-11-miniapp-full-ui-redesign.md @@ -0,0 +1,432 @@ +# 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" +``` + +停止并等待最终验收,不自动发布或部署。 diff --git a/docs/superpowers/plans/2026-09-11-ui-foundation-and-pilot.md b/docs/superpowers/plans/2026-09-11-ui-foundation-and-pilot.md new file mode 100644 index 0000000..be3f658 --- /dev/null +++ b/docs/superpowers/plans/2026-09-11-ui-foundation-and-pilot.md @@ -0,0 +1,406 @@ +# UI Foundation And Pilot 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:** 建立双端品牌资产和设计系统,并交付管理端与小程序核心样板页供用户确认。 + +**Architecture:** 复用现有 Vue/Element Plus 与微信原生组件,在管理端 `theme/index.css` 和小程序 `app.wxss` 建立双主题令牌。先以契约测试锁定页面数量、固定导航、素材存在性和禁用占位符规则,再改造样板页面并进行同尺寸视觉对比。 + +**Tech Stack:** Vue 3、TypeScript、Element Plus、微信小程序原生、Node.js assert、ImageGen + +**Spec:** `docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md` + +## Global Constraints + +- 管理端覆盖 19 条现有路由,小程序覆盖 63 个现有页面。 +- 小程序底部导航固定为:首页、找对象、消息、活动、我的。 +- 小程序首页保留 8 个固定入口和 V1.1 完整模块顺序。 +- 管理端使用暖白、珊瑚红、深蓝灰;小程序使用紫蓝夜景、粉色高光和浅色正文卡片。 +- 不改变后端、数据库、API、权限和核心业务不变量。 +- 不硬编码参考图中的人物、活动和统计数字。 +- 不使用 Emoji、文字方块、CSS 拼图或临时占位框作为正式视觉资产。 +- 不新增前端框架或大型 UI 依赖。 + +--- + +### Task 1: 冻结 82 个页面的改造基线 + +**Files:** +- Create: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` +- Modify: `ui-tests/ui-contracts.mjs` +- Test: `ui-tests/ui-contracts.mjs` + +**Interfaces:** +- Consumes: `admin-web/src/router/index.ts` 的 19 条路由与 `miniapp/app.json` 的 63 个页面。 +- Produces: 页面矩阵,字段固定为 `终端 | 页面 | 路由 | 业务域 | 权限/能力 | 数据源 | 必备状态 | 状态`。 + +- [ ] **Step 1: 写入失败契约** + +在 `ui-tests/ui-contracts.mjs` 增加: + +```js +assert.equal(appConfig.pages.length, 63, '小程序页面清单必须完整覆盖 63 页') +const matrix = read('docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md') +for (const page of appConfig.pages) { + assert.ok(matrix.includes(`\`/${page}\``), `页面矩阵遗漏 /${page}`) +} +``` + +- [ ] **Step 2: 验证契约失败** + +Run: `node ui-tests/ui-contracts.mjs` + +Expected: FAIL,提示缺少 `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md`。 + +- [ ] **Step 3: 建立页面矩阵** + +逐条登记 19 条管理端路由和 63 个小程序页面。状态列只允许 `未开始`、`进行中`、`待验收`、`通过`、`阻塞`。 + +- [ ] **Step 4: 验证契约通过** + +Run: `node ui-tests/ui-contracts.mjs` + +Expected: PASS,输出 `UI contracts passed`。 + +- [ ] **Step 5: 提交** + +```bash +git add docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md ui-tests/ui-contracts.mjs +git commit -m "test: freeze full UI redesign page matrix" +``` + +### Task 2: 制作原创品牌和首批页面素材 + +**Files:** +- Create: `admin-web/public/brand/logo-mark.png` +- Create: `admin-web/public/brand/login-illustration.jpg` +- Create: `miniapp/assets/brand/logo-mark.png` +- Create: `miniapp/assets/brand/home-nightscape.jpg` +- Create: `miniapp/assets/brand/default-avatar.png` +- Create: `miniapp/assets/covers/activity-default.jpg` +- Create: `miniapp/assets/covers/classroom-default.jpg` +- Create: `miniapp/assets/covers/counseling-default.jpg` +- Create: `miniapp/assets/covers/anti-fraud-default.jpg` +- Create: `miniapp/assets/covers/station-default.jpg` +- Create: `ui-tests/brand-assets.mjs` +- Test: `ui-tests/brand-assets.mjs` + +**Interfaces:** +- Consumes: 两张已批准参考图的心形识别、丹阳城市意象与双端色彩方向。 +- Produces: 不带个人身份的本地视觉资产;Logo 中文文字由真实文本渲染,图片只承载心形标志。 + +- [ ] **Step 1: 写入失败资产测试** + +```js +import assert from 'node:assert/strict' +import { existsSync, readFileSync } from 'node:fs' + +const assets = [ + 'admin-web/public/brand/logo-mark.png', + 'admin-web/public/brand/login-illustration.jpg', + 'miniapp/assets/brand/logo-mark.png', + 'miniapp/assets/brand/home-nightscape.jpg', + 'miniapp/assets/brand/default-avatar.png', + 'miniapp/assets/covers/activity-default.jpg', + 'miniapp/assets/covers/classroom-default.jpg', + 'miniapp/assets/covers/counseling-default.jpg', + 'miniapp/assets/covers/anti-fraud-default.jpg', + 'miniapp/assets/covers/station-default.jpg', +] +for (const file of assets) { + assert.ok(existsSync(file), `缺少品牌资产 ${file}`) + assert.ok(readFileSync(file).length > 4096, `品牌资产为空或过小 ${file}`) +} +console.log('Brand asset contracts passed') +``` + +- [ ] **Step 2: 验证测试失败** + +Run: `node ui-tests/brand-assets.mjs` + +Expected: FAIL,提示首个品牌素材不存在。 + +- [ ] **Step 3: 使用 ImageGen 制作素材** + +统一要求:原创、无文字、无水印、无真实人物身份、丹阳塔桥和城市夜景只作艺术化意象;后台素材低饱和浅色,小程序素材紫蓝夜景配粉色光晕。 + +- [ ] **Step 4: 优化尺寸与包体** + +后台登录插画按桌面横幅裁切;小程序首页图按 750rpx 宽组件裁切;封面统一 16:9;头像统一正方形透明或浅色背景。 + +- [ ] **Step 5: 验证资产** + +Run: `node ui-tests/brand-assets.mjs` + +Expected: PASS,输出 `Brand asset contracts passed`。 + +- [ ] **Step 6: 提交** + +```bash +git add admin-web/public/brand miniapp/assets/brand miniapp/assets/covers ui-tests/brand-assets.mjs +git commit -m "feat: add original Shanyuan Danyang brand assets" +``` + +### Task 3: 建立管理端设计令牌和整体框架 + +**Files:** +- Create: `ui-tests/admin-redesign-contracts.mjs` +- Modify: `admin-web/src/theme/index.css` +- Modify: `admin-web/src/layouts/MainLayout.vue` +- Modify: `admin-web/src/router/index.ts` +- Test: `ui-tests/admin-redesign-contracts.mjs` + +**Interfaces:** +- Consumes: Pinia `useAuthStore().permissions` 和现有路由 `meta.permissions`。 +- Produces: `--admin-sidebar-bg`、`--admin-page-bg`、`--admin-primary`、`--admin-card-radius`;按权限过滤的 9 组导航。 + +- [ ] **Step 1: 写入失败契约** + +```js +import assert from 'node:assert/strict' +import { readFileSync } from 'node:fs' +const read = (file) => readFileSync(file, 'utf8') +const theme = read('admin-web/src/theme/index.css') +const layout = read('admin-web/src/layouts/MainLayout.vue') +for (const token of ['--admin-sidebar-bg', '--admin-page-bg', '--admin-primary', '--admin-card-radius']) { + assert.ok(theme.includes(token), `缺少管理端令牌 ${token}`) +} +for (const group of ['用户与审核', '婚恋服务', '活动与阵地', '内容运营', '安全治理', '组织与权限']) { + assert.ok(layout.includes(group), `缺少菜单组 ${group}`) +} +assert.ok(layout.includes('logo-mark.png'), '管理端未使用正式品牌标志') +console.log('Admin redesign contracts passed') +``` + +- [ ] **Step 2: 验证契约失败** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,提示缺少 `--admin-sidebar-bg`。 + +- [ ] **Step 3: 实现管理端令牌** + +在 `theme/index.css` 中增加双层变量映射,Element Plus 继续通过 `--el-color-primary` 使用统一主色;删除页面基础样式中的散落旧色值。 + +- [ ] **Step 4: 重构侧栏和顶栏** + +保持现有权限判断函数;将路由分组映射到 9 个已批准业务域。加入真实图片标志、品牌文字、搜索外观、通知入口、操作员信息和 72px 收起态。 + +- [ ] **Step 5: 验证契约与构建** + +Run: + +```bash +node ui-tests/admin-redesign-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 三条命令均退出码 0。 + +- [ ] **Step 6: 提交** + +```bash +git add ui-tests/admin-redesign-contracts.mjs admin-web/src/theme/index.css admin-web/src/layouts/MainLayout.vue admin-web/src/router/index.ts +git commit -m "feat: establish admin visual foundation" +``` + +### Task 4: 完成管理端五个样板页面 + +**Files:** +- Modify: `admin-web/src/views/LoginView.vue` +- Modify: `admin-web/src/views/DashboardView.vue` +- Modify: `admin-web/src/modules/user/UserManagementView.vue` +- Modify: `admin-web/src/modules/user/UserDetailView.vue` +- Modify: `admin-web/src/modules/review/ReviewView.vue` +- Modify: `ui-tests/admin-redesign-contracts.mjs` +- Test: `ui-tests/admin-redesign-contracts.mjs` + +**Interfaces:** +- Consumes: 现有登录、工作台、用户与审核 API,不修改响应字段。 +- Produces: 登录、数据卡、待办列表、活动区、用户列表、详情区和审核状态的样板布局。 + +- [ ] **Step 1: 为五页加入失败契约** + +```js +for (const file of [ + 'admin-web/src/views/LoginView.vue', + 'admin-web/src/views/DashboardView.vue', + 'admin-web/src/modules/user/UserManagementView.vue', + 'admin-web/src/modules/user/UserDetailView.vue', + 'admin-web/src/modules/review/ReviewView.vue', +]) { + const source = read(file) + assert.ok(source.includes('page-shell') || source.includes('login-shell'), `${file} 未接入样板布局`) + assert.doesNotMatch(source, /[\u{1F300}-\u{1FAFF}]/u, `${file} 仍包含 Emoji`) +} +``` + +- [ ] **Step 2: 验证契约失败** + +Run: `node ui-tests/admin-redesign-contracts.mjs` + +Expected: FAIL,指出尚未接入样板布局的页面。 + +- [ ] **Step 3: 实现五个样板页面** + +所有数据继续读取现有 API。空数组显示空状态;请求中显示骨架或 loading;403 显示无权限说明;其他失败显示原因和重试按钮。 + +- [ ] **Step 4: 验证** + +Run: + +```bash +node ui-tests/admin-redesign-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 全部 PASS。 + +- [ ] **Step 5: 提交** + +```bash +git add admin-web/src/views admin-web/src/modules/user admin-web/src/modules/review ui-tests/admin-redesign-contracts.mjs +git commit -m "feat: deliver admin redesign pilot" +``` + +### Task 5: 建立小程序设计令牌和五个 Tab 样板 + +**Files:** +- Create: `ui-tests/miniapp-redesign-contracts.mjs` +- Modify: `miniapp/app.wxss` +- Modify: `miniapp/app.json` +- Modify: `miniapp/components/nav-bar/index.wxml` +- Modify: `miniapp/components/nav-bar/index.wxss` +- Modify: `miniapp/components/button/index.wxss` +- Modify: `miniapp/components/recommend-card/index.wxml` +- Modify: `miniapp/components/recommend-card/index.wxss` +- Modify: `miniapp/components/conversation-item/index.wxml` +- Modify: `miniapp/components/conversation-item/index.wxss` +- Modify: `miniapp/components/activity-card/index.wxml` +- Modify: `miniapp/components/activity-card/index.wxss` +- Modify: `miniapp/pages/index/index.wxml` +- Modify: `miniapp/pages/index/index.wxss` +- Modify: `miniapp/pages/discover/discover.wxml` +- Modify: `miniapp/pages/discover/discover.wxss` +- Modify: `miniapp/pages/messages/messages.wxml` +- Modify: `miniapp/pages/messages/messages.wxss` +- Modify: `miniapp/pages/activity/activity.wxml` +- Modify: `miniapp/pages/activity/activity.wxss` +- Modify: `miniapp/pages/mine/mine.wxml` +- Modify: `miniapp/pages/mine/mine.wxss` +- Test: `ui-tests/miniapp-redesign-contracts.mjs` + +**Interfaces:** +- Consumes: `GET /api/v1/home`、推荐、消息、活动和个人中心现有数据。 +- Produces: 紫蓝夜景令牌、浅色正文卡片、五个固定 Tab 页面和统一导航组件。 + +- [ ] **Step 1: 写入失败契约** + +```js +import assert from 'node:assert/strict' +import { readFileSync } from 'node:fs' +const read = (file) => readFileSync(file, 'utf8') +const app = JSON.parse(read('miniapp/app.json')) +assert.deepEqual(app.tabBar.list.map((item) => item.text), ['首页', '找对象', '消息', '活动', '我的']) +const style = read('miniapp/app.wxss') +for (const token of ['--mini-night-start', '--mini-night-end', '--mini-accent-pink', '--mini-card-bg']) { + assert.ok(style.includes(token), `缺少小程序令牌 ${token}`) +} +for (const page of ['index', 'discover', 'messages', 'activity', 'mine']) { + const source = read(`miniapp/pages/${page}/${page}.wxml`) + assert.ok(source.includes('app-page'), `${page} 未接入统一页面容器`) + assert.doesNotMatch(source, /[\u{1F300}-\u{1FAFF}]/u, `${page} 仍包含 Emoji`) +} +console.log('Miniapp redesign contracts passed') +``` + +- [ ] **Step 2: 验证契约失败** + +Run: `node ui-tests/miniapp-redesign-contracts.mjs` + +Expected: FAIL,提示缺少小程序夜景令牌。 + +- [ ] **Step 3: 实现全局令牌和公共组件** + +夜景只用于品牌区、导航区和营销卡片;表单、正文和数据列表使用 `--mini-card-bg`。保留现有事件名和组件属性,避免改动业务逻辑。 + +- [ ] **Step 4: 实现五个 Tab 页面** + +首页必须保留现有注释标识的十段顺序及 8 个入口。找对象、消息、活动、我的继续使用真实 API,并补齐加载、空、错误和禁用状态。 + +- [ ] **Step 5: 验证** + +Run: + +```bash +node ui-tests/ui-contracts.mjs +node ui-tests/tabbar-icons.mjs +node ui-tests/miniapp-redesign-contracts.mjs +npm --prefix miniapp run type-check +``` + +Expected: 全部 PASS。 + +- [ ] **Step 6: 提交** + +```bash +git add miniapp/app.wxss miniapp/app.json miniapp/components miniapp/pages/index miniapp/pages/discover miniapp/pages/messages miniapp/pages/activity miniapp/pages/mine ui-tests/miniapp-redesign-contracts.mjs +git commit -m "feat: deliver miniapp navigation pilot" +``` + +### Task 6: 样板视觉验收门禁 + +**Files:** +- Create: `docs/Phase-UI-Pilot-Completion-Report.md` +- Create: `artifacts/ui-redesign/pilot/admin-dashboard-1440.png` +- Create: `artifacts/ui-redesign/pilot/miniapp-home-375.png` +- Create: `artifacts/ui-redesign/pilot/miniapp-tabs-375.png` + +**Interfaces:** +- Consumes: 已批准参考图及 Task 4、Task 5 的可运行页面。 +- Produces: 同尺寸截图、差异清单和用户审批结论。 + +- [ ] **Step 1: 启动双端** + +Run: + +```bash +docker compose -f infrastructure/docker-compose.yml up -d --build +``` + +Expected: 管理端和后端健康;小程序由微信开发者工具打开 `miniapp/`。 + +- [ ] **Step 2: 捕获指定尺寸** + +管理端捕获 1440px 工作台;小程序捕获 375px 首页和五个 Tab。不得使用加载中、空白或错误截图代替稳定页面。 + +- [ ] **Step 3: 并排比较** + +比较颜色关系、卡片层次、圆角、间距、字体重量、图片裁切、图标、导航和首屏信息密度;逐项修正可见差异。 + +- [ ] **Step 4: 执行最终检查** + +Run: + +```bash +node ui-tests/ui-contracts.mjs +node ui-tests/brand-assets.mjs +node ui-tests/admin-redesign-contracts.mjs +node ui-tests/miniapp-redesign-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +npm --prefix miniapp run type-check +``` + +Expected: 全部退出码 0。 + +- [ ] **Step 5: 提交报告** + +```bash +git add docs/Phase-UI-Pilot-Completion-Report.md +git commit -m "docs: report UI pilot completion" +``` + +停止并等待用户确认样板视觉,不自动进入管理端和小程序全量计划。