docs: retire conflicting UI baselines
This commit is contained in:
@@ -1,115 +0,0 @@
|
||||
# 善缘丹阳 V1.1 双端高保真 UI 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:** 让小程序端和管理后台的实际可见界面严格对齐两份 V1.1 UI 与页面流程文档,并提供可运行预览和截图。
|
||||
|
||||
**Architecture:** 保留现有原生小程序及 Vue 3/Element Plus 架构,先用可执行契约测试固定页面顺序、路由与主题,再统一设计令牌和共享状态组件,随后分别完成小程序首页/核心页面与后台布局/角色工作台。开发数据只用于界面预览,不写入后端。
|
||||
|
||||
**Tech Stack:** 微信小程序原生 + TypeScript;Vue 3 + TypeScript + Vite + Pinia + Element Plus;Node.js 契约测试。
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-09-10-ui-v11-fidelity-design.md`
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 小程序页面背景 `#FAFAF8`,主色 `#E96B6B`,页面左右 16px,模块间距 24px,点击区不小于 44px。
|
||||
- 首页区块和 8 个核心入口顺序固定,禁止运营重排。
|
||||
- 用户端入口由服务端 Capability 控制,禁止前端自行组合业务资格。
|
||||
- 后台侧栏展开宽度 220px,菜单按权限显示,工作台按角色聚焦待办。
|
||||
- 不新增 UI 框架、在线字体、外链 Banner 或付费功能。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 建立双端 UI 契约与主题基线
|
||||
|
||||
**Files:**
|
||||
- Create: `ui-tests/ui-contracts.mjs`
|
||||
- Modify: `miniapp/app.wxss`
|
||||
- Modify: `miniapp/app.json`
|
||||
- Modify: `admin-web/src/theme/index.css`
|
||||
- Modify: `admin-web/src/main.ts`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 两份 V1.1 文档规定的颜色、间距、菜单及页面顺序。
|
||||
- Produces: 两端共享的视觉变量及可重复运行的 `node ui-tests/ui-contracts.mjs` 验收入口。
|
||||
|
||||
- [ ] **Step 1: 编写契约测试**,检查暖白背景、24px 模块间距、首页固定区块、8 个固定入口、缺失页面路由和后台 220px 侧栏。
|
||||
- [ ] **Step 2: 运行 `node ui-tests/ui-contracts.mjs`**,确认因现有偏移而失败。
|
||||
- [ ] **Step 3: 修正两端主题变量与全局 Element Plus 覆盖**。
|
||||
- [ ] **Step 4: 重跑契约测试、两端类型检查和后台构建**。
|
||||
|
||||
### Task 2: 完成小程序 U18 首页可见闭环
|
||||
|
||||
**Files:**
|
||||
- Modify: `miniapp/pages/index/index.wxml`
|
||||
- Modify: `miniapp/pages/index/index.wxss`
|
||||
- Modify: `miniapp/pages/index/index.ts`
|
||||
- Modify: `miniapp/pages/index/index.js`
|
||||
- Modify: `miniapp/pages/index/index.json`
|
||||
- Create: `miniapp/components/error-state/index.{js,json,wxml,wxss}`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `GET /api/v1/home` 数据与 Capability 字段。
|
||||
- Produces: 固定顺序首页,以及 `onEntryTap`、`onBannerTap`、`onRetry` 可见交互。
|
||||
|
||||
- [ ] **Step 1: 扩展契约测试**,验证首页区块与事件、共享错误状态组件。
|
||||
- [ ] **Step 2: 运行测试并确认首页缺少婚恋课堂、错误态和正确路由而失败**。
|
||||
- [ ] **Step 3: 统一首页 JS 可执行源与 TS 类型源,补齐课堂、安全、服务站和预览数据**。
|
||||
- [ ] **Step 4: 重跑契约测试和小程序类型检查**。
|
||||
|
||||
### Task 3: 补齐小程序核心服务页及“我的”分组
|
||||
|
||||
**Files:**
|
||||
- Modify: `miniapp/app.json`
|
||||
- Modify: `miniapp/pages/mine/mine.{js,wxml,wxss}`
|
||||
- Create: `miniapp/pages/service-center/*`
|
||||
- Create: `miniapp/pages/service-station/*`
|
||||
- Create: `miniapp/pages/service-appointment/*`
|
||||
- Create: `miniapp/pages/my-appointments/*`
|
||||
- Create: `miniapp/pages/content/*`
|
||||
- Create: `miniapp/pages/content-detail/*`
|
||||
- Create: `miniapp/pages/anti-fraud/*`
|
||||
- Create: `miniapp/pages/service-program/*`
|
||||
- Create: `miniapp/pages/service-history/*`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 首页入口事件和现有咨询、活动、红娘、本地资格页面。
|
||||
- Produces: 所有核心入口均可进入真实页面,“我的”按资料、公益服务、安全、其他四组展示。
|
||||
|
||||
- [ ] **Step 1: 扩展契约测试**,验证新增页面均注册且入口无占位提示。
|
||||
- [ ] **Step 2: 运行测试确认缺页失败**。
|
||||
- [ ] **Step 3: 以统一卡片、表单、Badge、空状态实现最小完整页面**。
|
||||
- [ ] **Step 4: 重跑契约测试和小程序类型检查**。
|
||||
|
||||
### Task 4: 重构管理后台框架和角色工作台
|
||||
|
||||
**Files:**
|
||||
- Modify: `admin-web/src/layouts/MainLayout.vue`
|
||||
- Modify: `admin-web/src/views/DashboardView.vue`
|
||||
- Modify: `admin-web/src/stores/auth.ts`
|
||||
- Modify: `admin-web/src/router/index.ts`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 登录用户角色与权限集合。
|
||||
- Produces: `workspaceProfile` 角色视图模型、分组菜单、响应式后台首屏。
|
||||
|
||||
- [ ] **Step 1: 增加 Vitest 或纯函数契约测试,验证角色到工作台标题、统计卡和快捷入口映射**。
|
||||
- [ ] **Step 2: 运行测试确认现有通用大盘不满足角色契约**。
|
||||
- [ ] **Step 3: 实现浅色 220px 侧栏、顶部上下文、角色待办与统一页面标题结构**。
|
||||
- [ ] **Step 4: 运行后台类型检查和生产构建**。
|
||||
|
||||
### Task 5: 可视化验收与交付
|
||||
|
||||
**Files:**
|
||||
- Create: `docs/UI-V11-Visual-Acceptance-2026-09-10.md`
|
||||
- Create: `artifacts/ui-v11/*.png`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 两端可运行构建。
|
||||
- Produces: 后台 1366×768、1440×900 与小程序 320/375/390/430px 的验收记录和截图。
|
||||
|
||||
- [ ] **Step 1: 启动后台开发服务并注入仅本地生效的预览身份**。
|
||||
- [ ] **Step 2: 截取工作台和主要业务页面实际运行图**。
|
||||
- [ ] **Step 3: 使用微信开发者工具或本地渲染预览检查小程序首页与核心页面**。
|
||||
- [ ] **Step 4: 运行全部契约检查、类型检查和构建,记录命令与结果**。
|
||||
- [ ] **Step 5: 输出可点击截图、访问地址、当前限制及用户需要审核的页面**。
|
||||
@@ -1,323 +0,0 @@
|
||||
# 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"
|
||||
```
|
||||
|
||||
停止并等待管理端验收,不自动进入小程序全量计划。
|
||||
@@ -1,65 +0,0 @@
|
||||
# Codex Baseline Cleanup 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:** 以昨天 Codex 构建为唯一基线,删除 ZCode 旧版和本项目旧运行环境,并从空环境完成可验证启动。
|
||||
|
||||
**Architecture:** Git 以 `codex/ui-v11-fidelity` 为源快进 `main`,不混合旧 Phase 代码。运行环境通过明确的项目资源白名单清理,数据库先备份,再由 Flyway 从空卷重建。
|
||||
|
||||
**Tech Stack:** Git、Docker Compose、PostgreSQL 16、Java 21/Maven、Vue 3/Vite、微信原生小程序/TypeScript
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-09-11-codex-baseline-cleanup-design.md`
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 只清理 `E:\develop\公益婚恋服务平台` 及 Docker 项目 `infrastructure`/旧 `danyang` 的资源。
|
||||
- 保留 `artifacts/backups/*.dump`、Flyway 迁移、冻结标签和 Codex 分支。
|
||||
- 不停止或删除其他项目 Docker 资源。
|
||||
- 删除数据卷前必须生成新的 PostgreSQL custom-format 备份并验证文件非空。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 归并 Git 基线并删除旧文件
|
||||
|
||||
**Files:**
|
||||
- Delete: `.zcode/`
|
||||
- Delete: `backend/build-temp/`
|
||||
- Delete: `backend/maven.zip`
|
||||
- Delete: `miniapp/project.config.json.bak`
|
||||
- Modify: `.gitignore`
|
||||
|
||||
- [ ] **Step 1:** 确认 HEAD 位于 `codex/ui-v11-fidelity`,工作区除数据库备份外无未知变更。
|
||||
- [ ] **Step 2:** 删除上述 ZCode/临时文件,并让 `.gitignore` 保持生成物不回流。
|
||||
- [ ] **Step 3:** 将 `main` 快进到当前 Codex 提交,删除 `phase/02-rbac-datascope`。
|
||||
- [ ] **Step 4:** 用 `git status --short --branch` 和 `git branch -vv` 验证基线。
|
||||
|
||||
### Task 2: 备份并清理本项目运行环境
|
||||
|
||||
**Files:**
|
||||
- Preserve: `artifacts/backups/*.dump`
|
||||
|
||||
- [ ] **Step 1:** 在当前 PostgreSQL 容器内执行 `pg_dump -Fc`,复制到 `artifacts/backups/` 并验证非空。
|
||||
- [ ] **Step 2:** 停止本项目管理端开发进程和 Compose 项目 `infrastructure`。
|
||||
- [ ] **Step 3:** 删除白名单资源:`infrastructure_*`、`danyang_*`、`danyang-m2-cache`、`danyang-net` 和本项目构建镜像。
|
||||
- [ ] **Step 4:** 列出剩余 Docker 资源,确认其他 Compose 项目仍存在。
|
||||
|
||||
### Task 3: 清理并重建依赖
|
||||
|
||||
**Files:**
|
||||
- Delete and recreate: `admin-web/node_modules/`, `miniapp/node_modules/`, `backend/target/`
|
||||
- Preserve: package manifests and lock files
|
||||
|
||||
- [ ] **Step 1:** 删除可重建的依赖、构建和测试缓存。
|
||||
- [ ] **Step 2:** 使用现有锁文件执行 `npm ci`。
|
||||
- [ ] **Step 3:** 执行后端测试、管理端类型检查/构建、小程序类型检查。
|
||||
|
||||
### Task 4: 从空卷启动并验收
|
||||
|
||||
**Files:**
|
||||
- Modify only if startup evidence proves necessary: `infrastructure/docker-compose.yml`, `infrastructure/nginx.conf`
|
||||
|
||||
- [ ] **Step 1:** 执行 `docker compose up -d --build postgres redis minio backend`。
|
||||
- [ ] **Step 2:** 等待所有服务健康,验证 Flyway 和 `/api/v1/health/live`。
|
||||
- [ ] **Step 3:** 启动管理端,验证 HTTP 200 和 API 代理。
|
||||
- [ ] **Step 4:** 验证微信小程序 TypeScript;开发者工具若关闭服务端口,仅报告人工打开方式,不修改安全设置。
|
||||
- [ ] **Step 5:** 输出 Git、测试、端口、容器和保留备份的最终清单。
|
||||
@@ -1,432 +0,0 @@
|
||||
# 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"
|
||||
```
|
||||
|
||||
停止并等待最终验收,不自动发布或部署。
|
||||
@@ -1,406 +0,0 @@
|
||||
# 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"
|
||||
```
|
||||
|
||||
停止并等待用户确认样板视觉,不自动进入管理端和小程序全量计划。
|
||||
@@ -294,8 +294,9 @@ Expected: 仅当运行代码、配置和测试均无引用时才保持 `DELETE`
|
||||
node ui-tests/ui-document-baseline-contracts.mjs
|
||||
node ui-tests/miniapp-source-uniqueness-contracts.mjs
|
||||
node ui-tests/ui-contracts.mjs
|
||||
node ui-tests/admin-redesign-contracts.mjs
|
||||
node ui-tests/miniapp-redesign-contracts.mjs
|
||||
node ui-tests/phase07-home-contracts.mjs
|
||||
node ui-tests/brand-assets.mjs
|
||||
node ui-tests/tabbar-icons.mjs
|
||||
npm --prefix admin-web run type-check
|
||||
npm --prefix admin-web run build
|
||||
npm --prefix miniapp run type-check
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
# 善缘丹阳 V1.1 双端高保真 UI 修订设计
|
||||
|
||||
## 目标
|
||||
|
||||
以《前端 UI-UX 高保真原型修订说明》和《页面级功能清单与交互流程修订版》为唯一 UI/交互验收依据,在保留现有业务能力的前提下,完成微信小程序端与响应式运营后台的可见界面校正,并提供可运行预览与截图。
|
||||
|
||||
## 设计原则
|
||||
|
||||
- 品牌气质:温暖、可信、公益、本地、现代;避免商业婚恋滑卡感与政务门户感。
|
||||
- 小程序:暖白 `#FAFAF8` 页面背景、珊瑚红 `#E96B6B` 主色、白色卡片、轻阴影、16px 页面边距、24px 模块间距、至少 44px 点击区。
|
||||
- 后台:220px 浅色侧栏、清晰工作台、白色内容卡片、中等信息密度;在 1366×768 与 1440×900 下可用。
|
||||
- 只复用现有原生小程序与 Vue 3 + Element Plus 技术栈,不引入新 UI 框架或在线字体。
|
||||
- 所有可见入口、页面结构、空状态和提示文案必须使用简体中文。
|
||||
|
||||
## 小程序信息架构
|
||||
|
||||
底部固定为:首页、找对象、消息、活动、我的。
|
||||
|
||||
首页固定顺序为:品牌区、用户状态、Banner、8 个核心入口、今日推荐、善缘公益服务、近期公益活动、善缘服务站、婚恋课堂、安全提醒。8 个入口固定两行四列,依次为找对象、公益红娘、公益活动、婚恋咨询、婚恋课堂、婚前辅导、婚恋反诈、善缘服务站。
|
||||
|
||||
首批可见闭环覆盖 U18、U19、U21、U23、U24、U27、U28、U33、U37、U50、U55、U60;补齐服务预约、婚恋课堂、内容详情、我的咨询、婚前辅导、本地资格、公益服务记录等二级入口。每页具备加载、空、错误三类状态的统一视觉。
|
||||
|
||||
## 管理后台信息架构
|
||||
|
||||
布局使用固定品牌侧栏、顶部上下文栏和主内容区。菜单依权限显示,并按工作台、资料与用户、婚恋服务、活动运营、内容与 Banner、服务阵地、安全治理、组织与系统、数据统计分组。
|
||||
|
||||
工作台首屏根据角色显示“今天需要处理的事项”,不再使用面向所有角色的通用大盘。Reviewer、Matchmaker、Counselor、Service Station Operator、Activity Manager、Risk Operator 各自看到与职责对应的待办卡、快捷入口和最近任务。
|
||||
|
||||
## 状态与演示
|
||||
|
||||
真实接口成功时展示接口数据;开发预览接口不可用时,页面使用明确标注为“界面预览数据”的本地演示数据,保证无需生产账号即可审查 UI,不把演示数据写入后端。最终验收包含静态契约检查、类型检查、构建和实际浏览器截图;小程序通过微信开发者工具或本地渲染预览检查 320/375/390/430px 宽度。
|
||||
|
||||
## 非目标
|
||||
|
||||
本次不重写后端业务、不改变权限规则、不增加付费/VIP/外链 Banner/陌生人私信等被禁止功能,也不扩展两份文档之外的页面模块。
|
||||
@@ -1,38 +0,0 @@
|
||||
# Codex 基线归并与旧环境清理设计
|
||||
|
||||
## 目标
|
||||
|
||||
以 `codex/ui-v11-fidelity` 的 `ac2327b` 为唯一代码基线,清除 ZCode 遗留、旧 Phase 分支、临时依赖与本项目历史 Docker 环境,并从空环境验证启动。
|
||||
|
||||
## 保留
|
||||
|
||||
- Codex 分支、冻结标签和完整 Git 历史;
|
||||
- `artifacts/backups/*.dump` 数据库备份;
|
||||
- Flyway 全部迁移文件;
|
||||
- 当前 V1.1 客户需求文档与 Codex 已完成代码。
|
||||
|
||||
## 清理
|
||||
|
||||
- `.zcode/`;
|
||||
- 旧 `phase/02-rbac-datascope` 分支;
|
||||
- 已跟踪的临时 Maven 包、临时 POM、小程序 `.bak`;
|
||||
- `node_modules`、`target`、`dist`、pytest 缓存等可重建产物;
|
||||
- 仅属于本项目的旧容器、镜像、网络和数据卷。
|
||||
|
||||
其他项目的 Docker 资源不在本次范围内。
|
||||
|
||||
## 归并与重建
|
||||
|
||||
1. 将 `main` 快进到 Codex 基线,保留 `codex/ui-v11-fidelity` 作为审计分支。
|
||||
2. 数据卷删除前创建 PostgreSQL 备份。
|
||||
3. 清理后按锁文件重新安装依赖,从空 PostgreSQL 执行 Flyway。
|
||||
4. 修复妨碍纯净启动的配置冲突,但不重构业务架构。
|
||||
|
||||
## 验收
|
||||
|
||||
- Git 工作区仅保留预期变更和备份;
|
||||
- 后端测试及构建通过;
|
||||
- 管理端类型检查、构建及页面访问通过;
|
||||
- 小程序 TypeScript 检查通过,并能由微信开发者工具打开;
|
||||
- PostgreSQL、Redis、MinIO、Backend 健康,管理端可访问;
|
||||
- 不删除或停止其他项目的容器、网络、卷和镜像。
|
||||
@@ -1,215 +0,0 @@
|
||||
# 善缘丹阳 V1.1 双端全量 UI 重设计规格
|
||||
|
||||
日期:2026-09-11
|
||||
状态:已获用户方案批准,待规格复核
|
||||
视觉来源:
|
||||
|
||||
- `ChatGPT Image 2026年9月11日 10_34_34 (1).png`:管理端视觉基准;
|
||||
- `ChatGPT Image 2026年9月11日 12_46_40.png`:小程序导航页与 Tab 页视觉基准。
|
||||
|
||||
## 1. 目标
|
||||
|
||||
在不改变 V1.1 业务能力、接口契约、权限边界和核心不变量的前提下,重设计管理端全部现有页面及小程序全部 63 个页面,使双端具有统一品牌识别、清晰信息层级、完整交互状态和可验证的参考图还原度。
|
||||
|
||||
## 2. 已确认范围
|
||||
|
||||
1. 只实现参考海报中的实际软件界面,不实现外围宣传标题、标语或城市背景画布。
|
||||
2. 保留 V1.1 全部功能、页面、路由、权限和接口。
|
||||
3. 小程序首页保留固定 8 个核心入口及现行文档规定的完整模块顺序。
|
||||
4. 管理端保留全部模块,通过一级分组与二级菜单整理,不隐藏或删除功能。
|
||||
5. 管理端全部现有业务路由、小程序全部 63 个页面均纳入本次重设计。
|
||||
6. 允许制作原创 Logo、Banner、丹阳城市插画、活动和内容封面、匿名演示头像及状态插画。
|
||||
7. 页面继续读取真实 API;参考图中的人物、活动和统计数字仅用于确定布局密度,不硬编码进业务页面。
|
||||
|
||||
## 3. 设计方向
|
||||
|
||||
### 3.1 统一品牌
|
||||
|
||||
双端共用“善缘丹阳”品牌名称、心形识别符号、字体层级、图标笔画语言和公益、真实、安全、温暖的表达原则。
|
||||
|
||||
正式视觉资产必须使用可交付图片或现有图标库。不得使用 Emoji、文字方块、CSS 拼图、临时占位框或手写 SVG 冒充正式资产。
|
||||
|
||||
### 3.2 管理端主题
|
||||
|
||||
- 暖白页面背景;
|
||||
- 珊瑚红作为主操作和强调色;
|
||||
- 深蓝灰侧栏;
|
||||
- 浅粉、浅蓝、浅绿、浅紫用于状态卡片;
|
||||
- 信息密度接近参考图中央后台窗口;
|
||||
- 风格专业、可信、克制,避免霓虹化和过度装饰。
|
||||
|
||||
### 3.3 小程序主题
|
||||
|
||||
- 紫蓝夜景作为品牌氛围;
|
||||
- 粉色作为主要操作和选中状态;
|
||||
- 内容区使用高对比白色或浅色卡片;
|
||||
- 保留参考图的温暖陪伴感和丹阳城市意象;
|
||||
- 长文本、表单、安全提示和敏感操作页优先保证可读性,不使用高饱和背景承载正文。
|
||||
|
||||
## 4. 技术边界
|
||||
|
||||
- 管理端继续使用 Vue 3、TypeScript、Vite、Pinia 和 Element Plus。
|
||||
- 小程序继续使用微信原生框架和现有 TypeScript/JavaScript 页面,不迁移跨端框架。
|
||||
- 优先改造现有主题变量和公共组件,不引入大型 UI 依赖。
|
||||
- 默认不修改后端、数据库、API 和业务规则。
|
||||
- 如视觉流程暴露缺失接口或缺失业务路由,先记录并请求确认,不擅自扩展产品范围。
|
||||
- Mutual Match、Block、活动互选二阶段确认、Capability、数据范围和敏感信息权限保持不变。
|
||||
|
||||
## 5. 管理端信息架构
|
||||
|
||||
现有页面按权限动态显示,并归入以下导航组:
|
||||
|
||||
1. 工作台;
|
||||
2. 用户与资料审核;
|
||||
3. 匹配与活动服务;
|
||||
4. 公益咨询与转介;
|
||||
5. 服务站、预约与专项服务;
|
||||
6. Banner 与内容运营;
|
||||
7. 举报、申诉与审计;
|
||||
8. 组织、人员与权限;
|
||||
9. 数据统计。
|
||||
|
||||
管理端整体框架包含品牌侧栏、分组菜单、顶部搜索、通知、当前操作员、面包屑、内容区和响应式收起状态。登录页、工作台、列表、详情、编辑、筛选、弹窗、分页和危险操作确认必须使用同一设计系统。
|
||||
|
||||
## 6. 小程序信息架构
|
||||
|
||||
底部导航固定为:
|
||||
|
||||
1. 首页;
|
||||
2. 找对象;
|
||||
3. 消息;
|
||||
4. 活动;
|
||||
5. 我的。
|
||||
|
||||
首页 8 个入口固定为:
|
||||
|
||||
1. 找对象;
|
||||
2. 公益红娘;
|
||||
3. 公益活动;
|
||||
4. 婚恋咨询;
|
||||
5. 婚恋课堂;
|
||||
6. 婚前辅导;
|
||||
7. 婚恋反诈;
|
||||
8. 善缘服务站。
|
||||
|
||||
63 个页面按以下领域统一改造:
|
||||
|
||||
- 登录、手机号、实名、本地资格;
|
||||
- 用户资料、照片、兴趣、择偶条件和审核状态;
|
||||
- 推荐、人物详情、喜欢、匹配和聊天;
|
||||
- 活动、报名、签到、反馈和活动互选;
|
||||
- 公益红娘;
|
||||
- 婚恋咨询与婚前辅导;
|
||||
- 服务中心、服务站、预约、专项服务和服务记录;
|
||||
- 婚恋课堂、内容详情和婚恋反诈;
|
||||
- 举报、申诉、黑名单、隐私和账号生命周期;
|
||||
- 通知、帮助、关于及异常状态页。
|
||||
|
||||
## 7. 公共组件与状态
|
||||
|
||||
### 7.1 管理端
|
||||
|
||||
- 页面标题与操作区;
|
||||
- 数据概览卡;
|
||||
- 筛选栏;
|
||||
- 数据表格;
|
||||
- 状态标签;
|
||||
- 详情分区;
|
||||
- 表单与弹窗;
|
||||
- 空数据、错误、无权限和加载状态;
|
||||
- 二次确认与操作结果反馈。
|
||||
|
||||
### 7.2 小程序
|
||||
|
||||
- 品牌导航栏;
|
||||
- 自定义 Tab Bar;
|
||||
- 用户、推荐和活动卡片;
|
||||
- 服务入口与功能宫格;
|
||||
- 会话列表和聊天气泡;
|
||||
- 表单、上传和步骤状态;
|
||||
- 底部固定操作栏;
|
||||
- 加载骨架、空状态、网络错误、权限不足、审核中和服务不可用状态。
|
||||
|
||||
## 8. 素材策略
|
||||
|
||||
- 制作独立 Logo 与小尺寸品牌图标,不从展示海报裁切。
|
||||
- Tab 图标提供普通态和选中态,并适配微信安全区。
|
||||
- Banner、活动封面、课堂封面和服务插画按实际组件尺寸生成。
|
||||
- 匿名演示头像只用于本地测试和验收,不冒充真实用户。
|
||||
- 真实用户头像、活动数据和统计值继续由 API 提供。
|
||||
- 素材在小程序包体限制内优化;需要远程托管的业务图片走现有私有对象存储。
|
||||
|
||||
## 9. 响应式与可访问性
|
||||
|
||||
- 管理端验证 1280、1366、1440、1920 宽度,窄屏采用真实重排而非整体缩放。
|
||||
- 小程序验证 320、375、390、430 像素宽度及底部安全区。
|
||||
- 正文、按钮和状态标签满足可读对比度。
|
||||
- 状态不能只依赖颜色表达。
|
||||
- 交互目标尺寸、键盘焦点、表单标签、错误恢复和重要结果反馈均需验证。
|
||||
- 截图只能发现视觉风险,最终仍需真机、键盘和交互测试。
|
||||
|
||||
## 10. 实施阶段与门禁
|
||||
|
||||
### Phase 01:基线冻结
|
||||
|
||||
建立完整页面矩阵,记录路由、角色、接口、状态和改造前截图;发现缺口只登记,不扩展功能。
|
||||
|
||||
门禁:页面覆盖率 100%,缺口均有归属。
|
||||
|
||||
### Phase 02:品牌资产与设计系统
|
||||
|
||||
完成双端令牌、Logo、Tab 图标、核心插画和公共组件规范。
|
||||
|
||||
门禁:用户审核素材样张与设计令牌。
|
||||
|
||||
### Phase 03:样板页面
|
||||
|
||||
管理端完成登录、框架、工作台、用户列表和用户详情;小程序完成首页、找对象、消息、活动、我的和 Tab Bar。
|
||||
|
||||
门禁:参考图与实现图同尺寸并排对比,用户确认视觉方向。
|
||||
|
||||
### Phase 04:管理端全量页面
|
||||
|
||||
按导航业务域逐组完成全部页面和全部状态。
|
||||
|
||||
门禁:类型检查、构建、权限路由与核心操作流程通过。
|
||||
|
||||
### Phase 05:小程序五个 Tab 页面
|
||||
|
||||
完成五个一级页面、导航联动、未读红点和安全区适配。
|
||||
|
||||
门禁:微信开发者工具编译无错误,多尺寸截图通过。
|
||||
|
||||
### Phase 06:小程序其余页面
|
||||
|
||||
按业务领域分批完成其余页面,每批复用已批准组件和视觉令牌。
|
||||
|
||||
门禁:63 个页面均可进入、返回并正确展示主要状态。
|
||||
|
||||
### Phase 07:全量验证与交付
|
||||
|
||||
完成构建、类型检查、接口联调、核心业务回归、视觉对比、响应式和可访问性检查。
|
||||
|
||||
门禁:输出页面完成矩阵、视觉验收报告、测试结果和剩余限制。
|
||||
|
||||
每个 Phase 完成后输出 Completion Report,未通过门禁不得自动进入下一阶段。
|
||||
|
||||
## 11. 验收标准
|
||||
|
||||
1. 管理端全部现有路由有统一设计且权限行为不变。
|
||||
2. 小程序 63 个页面无遗漏,五个 Tab 与 8 个首页入口保持固定。
|
||||
3. 参考图中的颜色关系、卡片层次、圆角、间距、图标风格和信息密度得到一致实现。
|
||||
4. 页面不使用硬编码演示数据冒充接口成功。
|
||||
5. 加载、空数据、错误、无权限、不可用和危险操作状态完整。
|
||||
6. 管理端构建与类型检查通过。
|
||||
7. 小程序 TypeScript 检查及微信开发者工具编译通过。
|
||||
8. 核心业务不变量和权限矩阵无回归。
|
||||
|
||||
## 12. 非目标
|
||||
|
||||
- 不删除或缩减 V1.1 功能;
|
||||
- 不新增参考图和现行需求之外的业务;
|
||||
- 不重写后端或数据库;
|
||||
- 不迁移前端框架;
|
||||
- 不引入微服务或额外基础设施;
|
||||
- 不为追求截图相似度牺牲隐私、安全、权限或真实数据流。
|
||||
Reference in New Issue
Block a user