diff --git a/docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md b/docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md new file mode 100644 index 0000000..1b28aae --- /dev/null +++ b/docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md @@ -0,0 +1,288 @@ +# 管理端框架与工作台参考图重设计实施计划 + +> **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:** 由全局 Token 和背景资产提供视觉基础,`MainLayout.vue` 负责外框、侧栏和顶部栏,独立 dashboard service/adapter 负责聚合现有统计与活动 API,`DashboardView.vue` 只负责呈现六指标和四个业务区块。 + +**Tech Stack:** Vue 3、TypeScript、Vite、Pinia、Element Plus、Node.js contracts、浏览器截图 + +**Spec:** `docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md` + +## Global Constraints + +- 只重构全局框架与工作台,不逐页重写业务模块。 +- 菜单继续由服务端权限映射控制。 +- 统计数字和活动数据来自现有 API,不硬编码参考图演示值。 +- 背景和品牌素材本地化,不增加境外运行时依赖。 +- 支持 `1366×768` 与 `1920×1080`,不使用整体缩放。 + +--- + +### Task 1: 锁定管理端参考图契约与资产 + +**Files:** +- Create: `ui-tests/admin-reference-contracts.mjs` +- Create: `admin-web/public/brand/admin-danyang-backdrop.jpg` +- Keep: `admin-web/public/brand/logo-mark.png` +- Modify: `admin-web/src/theme/index.css` +- Test: `ui-tests/admin-reference-contracts.mjs` + +**Interfaces:** +- Consumes: 管理端参考图和现有 `logo-mark.png`。 +- Produces: `--admin-*` 视觉 Token、正式背景资产和失败优先契约。 + +- [ ] **Step 1: 编写失败的视觉契约** + +```js +import assert from 'node:assert/strict' +import { existsSync, readFileSync } from 'node:fs' +import { resolve } from 'node:path' +const root = resolve(import.meta.dirname, '..') +const read = (p) => readFileSync(resolve(root, p), 'utf8') +const theme = read('admin-web/src/theme/index.css') +const layout = read('admin-web/src/layouts/MainLayout.vue') +const dashboard = read('admin-web/src/views/DashboardView.vue') +for (const token of ['--admin-coral', '--admin-shell-bg', '--admin-sidebar-bg', '--admin-card-radius', '--admin-shell-radius']) { + assert.ok(theme.includes(token), `缺少管理端参考图令牌 ${token}`) +} +assert.ok(existsSync(resolve(root, 'admin-web/public/brand/admin-danyang-backdrop.jpg'))) +for (const item of ['工作台','用户管理','资料审核','匹配管理','公益红娘','公益咨询','活动管理','内容管理','善缘服务站','举报风控','数据统计','组织人员','系统设置']) { + assert.ok(layout.includes(item), `侧栏缺少 ${item}`) +} +assert.match(dashboard, /class="metric-card/, '工作台缺少指标卡结构') +assert.match(dashboard, /metrics/, '工作台缺少指标数据绑定') +for (const title of ['今日待办事项','近期公益活动','服务数据概览','项目服务成效']) assert.ok(dashboard.includes(title)) +console.log('Admin reference contracts passed') +``` + +- [ ] **Step 2: 运行契约确认失败** + +Run: `node ui-tests/admin-reference-contracts.mjs` + +Expected: FAIL,至少缺少新 Token、背景资产或六项指标。 + +- [ ] **Step 3: 生成并检查背景资产** + +使用参考图风格生成不含 UI 文字的浅粉丹阳城市背景,包含塔、桥、远山、爱心和低对比人物剪影;输出 `1920×1080` JPG。生成后检查无乱码文字、无第三方 Logo、主要装饰不遮挡中央系统容器。 + +- [ ] **Step 4: 建立主题 Token** + +```css +:root { + --admin-coral: #f45f68; + --admin-coral-soft: #fff0f1; + --admin-shell-bg: rgba(255, 255, 255, 0.96); + --admin-sidebar-bg: #202d38; + --admin-page-bg: #f7f9fb; + --admin-card-radius: 14px; + --admin-shell-radius: 22px; + --admin-shadow: 0 18px 48px rgba(57, 40, 45, 0.14); +} +``` + +- [ ] **Step 5: 运行契约并提交基础** + +```powershell +node ui-tests/admin-reference-contracts.mjs +git add -- ui-tests/admin-reference-contracts.mjs admin-web/public/brand admin-web/src/theme/index.css +git commit -m "feat: establish admin reference design foundation" +``` + +Expected: 契约可能继续因布局未完成而失败,但 Token 和资产断言通过。 + +### Task 2: 重构全局框架、侧栏与顶部栏 + +**Files:** +- Modify: `admin-web/src/layouts/MainLayout.vue` +- Modify: `admin-web/src/router/index.ts`(仅在需要给现有路由补充菜单元数据时) +- Test: `ui-tests/admin-reference-contracts.mjs` + +**Interfaces:** +- Consumes: `useAuthStore().permissions`、现有路由、主题 Token 和品牌资产。 +- Produces: `.admin-scene`、`.admin-shell`、`.admin-sidebar`、`.admin-topbar` 四层框架。 + +- [ ] **Step 1: 为框架结构补充失败断言** + +```js +for (const className of ['admin-scene','admin-shell','admin-sidebar','admin-topbar','admin-content']) { + assert.ok(layout.includes(className), `缺少框架结构 ${className}`) +} +assert.match(layout, /admin-danyang-backdrop\.jpg/) +assert.match(layout, /permissions/) +``` + +- [ ] **Step 2: 运行断言确认失败** + +Run: `node ui-tests/admin-reference-contracts.mjs` + +Expected: FAIL,报告缺少新框架结构。 + +- [ ] **Step 3: 实现参考图布局** + +将外层背景、中央圆角壳、约 208px 深色侧栏、64px 顶栏和滚动内容区分层实现。侧栏按参考图名称组织现有路由;多个现有路由归入同一一级入口时使用模块内二级菜单,不删除路由。 + +- [ ] **Step 4: 保持权限与操作反馈** + +搜索框必须有可操作状态;通知入口提供抽屉或明确提示;管理员菜单保留退出登录。无权限入口不渲染,路由守卫继续后端权限同名校验。 + +- [ ] **Step 5: 验证框架** + +```powershell +node ui-tests/admin-reference-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 类型检查和构建 PASS;契约只可能因工作台尚未完成而失败。 + +- [ ] **Step 6: 提交框架** + +```powershell +git add -- admin-web/src/layouts/MainLayout.vue admin-web/src/router/index.ts ui-tests/admin-reference-contracts.mjs +git commit -m "feat: rebuild admin shell from reference" +``` + +### Task 3: 建立工作台数据适配层 + +**Files:** +- Create: `admin-web/src/services/dashboard.ts` +- Create: `admin-web/src/types/dashboard.ts` +- Create: `ui-tests/admin-dashboard-data-contracts.mjs` +- Modify: `admin-web/src/views/DashboardView.vue` +- Test: `ui-tests/admin-dashboard-data-contracts.mjs` + +**Interfaces:** +- Consumes: `GET /operator/analytics/dashboard`、`GET /operator/analytics/v11-dashboard` 和现有活动列表接口。 +- Produces: `DashboardModel`,包含 `metrics[6]`、`todos`、`activities`、`serviceOverview`、`effectiveness`。 + +- [ ] **Step 1: 定义工作台模型** + +```ts +export interface DashboardMetric { key: string; label: string; value: number; trendText: string; tone: 'rose'|'amber'|'blue'|'green'|'purple' } +export interface DashboardTodo { key: string; title: string; description: string; count: number; actionText: string; route: string } +export interface DashboardActivity { id: string; title: string; coverUrl: string; startAt: string; locationName: string; registered: number; capacity: number; statusText: string } +export interface DashboardModel { + metrics: DashboardMetric[] + todos: DashboardTodo[] + activities: DashboardActivity[] + serviceOverview: Array<{ key: string; label: string; value: number; compareText: string }> + effectiveness: Array<{ key: string; label: string; value: number; max: number; unit: string }> +} +``` + +- [ ] **Step 2: 编写失败的数据契约** + +契约读取 `dashboard.ts`,断言导出 `loadDashboard`、设置请求超时、失败时返回显式错误而不是演示数字,并断言类型文件包含上述五个字段。 + +- [ ] **Step 3: 实现并发加载与适配** + +使用现有 `api/client.ts` 并发读取授权接口。缺少某一接口权限时,仅将对应模块标记为不可用;不得用 `|| 3`、`|| 12` 等演示值替代真实的 0。 + +- [ ] **Step 4: 验证数据层** + +```powershell +node ui-tests/admin-dashboard-data-contracts.mjs +npm --prefix admin-web run type-check +``` + +Expected: PASS;无硬编码非零业务统计。 + +- [ ] **Step 5: 提交数据适配层** + +```powershell +git add -- admin-web/src/services/dashboard.ts admin-web/src/types/dashboard.ts admin-web/src/views/DashboardView.vue ui-tests/admin-dashboard-data-contracts.mjs +git commit -m "feat: add admin dashboard data adapter" +``` + +### Task 4: 实现六指标与四个工作台区块 + +**Files:** +- Modify: `admin-web/src/views/DashboardView.vue` +- Modify: `admin-web/src/theme/index.css` +- Test: `ui-tests/admin-reference-contracts.mjs` + +**Interfaces:** +- Consumes: `loadDashboard(): Promise`。 +- Produces: `.dashboard-metrics`、`.todo-panel`、`.activity-panel`、`.service-overview-panel`、`.effectiveness-panel`。 + +- [ ] **Step 1: 将完整工作台结构加入契约** + +断言六个 `metric-card`、四个标题、Loading、Empty、Error/Retry 和无权限状态类名全部存在。 + +- [ ] **Step 2: 运行契约确认失败** + +Run: `node ui-tests/admin-reference-contracts.mjs` + +Expected: FAIL,报告缺少新工作台结构或状态。 + +- [ ] **Step 3: 实现欢迎区与六项指标** + +六项指标使用一行卡片;在 `1366px` 可缩小间距与字号但不隐藏指标。日期使用 `zh-CN` 与 `Asia/Shanghai`,不接入外部天气服务。 + +- [ ] **Step 4: 实现四个内容区块** + +桌面宽度使用两列布局:今日待办/近期活动、服务数据/项目成效。活动封面失败时使用本地默认图;进度条的 `max` 为 0 时显示 0%,避免除零。 + +- [ ] **Step 5: 实现状态与操作** + +加载显示骨架;接口失败显示重试;数组为空显示紧凑空状态;待办操作按现有路由跳转;无权限区块不显示敏感数字。 + +- [ ] **Step 6: 验证并提交工作台** + +```powershell +node ui-tests/admin-reference-contracts.mjs +node ui-tests/admin-dashboard-data-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +git add -- admin-web/src/views/DashboardView.vue admin-web/src/theme/index.css +git commit -m "feat: recreate admin dashboard from reference" +``` + +Expected: 所有自动化门禁 PASS。 + +### Task 5: 浏览器视觉 QA 与人工验收 + +**Files:** +- Create: `artifacts/ui-redesign/admin/dashboard-1366x768.png` +- Create: `artifacts/ui-redesign/admin/dashboard-1920x1080.png` +- Create: `artifacts/ui-redesign/admin/dashboard-comparison.png` +- Create: `docs/ADMIN_REFERENCE_UI_QA_2026-09-13.md` + +**Interfaces:** +- Consumes: 运行中的 Docker 后端与管理端开发服务器、管理端参考图。 +- Produces: 两种尺寸截图、并排对比和差异结论。 + +- [ ] **Step 1: 启动并打开真实管理端** + +```powershell +docker compose -f infrastructure/docker-compose.yml ps +npm --prefix admin-web run dev -- --host 0.0.0.0 +``` + +Expected: 后端可访问,管理端页面能登录并进入 `/dashboard`。 + +- [ ] **Step 2: 检查主要交互和控制台** + +验证菜单跳转、权限隐藏、搜索反馈、通知反馈、管理员菜单、退出登录、待办跳转和重试;浏览器控制台无未处理错误。 + +- [ ] **Step 3: 分别截图并制作对比图** + +在 `1366×768` 和 `1920×1080` 真实 viewport 截图。对比背景氛围、侧栏宽度、顶栏高度、六卡一行、两列面板、圆角、阴影、颜色和信息密度。 + +- [ ] **Step 4: 修复差异并重新截图** + +所有 P0/P1/P2 差异修复后覆盖最终截图;报告记录仍存在但经确认可接受的差异。 + +- [ ] **Step 5: 最终验证与提交** + +```powershell +node ui-tests/admin-reference-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +git add -- artifacts/ui-redesign/admin docs/ADMIN_REFERENCE_UI_QA_2026-09-13.md admin-web +git commit -m "test: verify admin reference UI fidelity" +``` + +Expected: 自动化 PASS;人工验收后才可进入小程序计划。 diff --git a/docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md b/docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md new file mode 100644 index 0000000..55c9c2b --- /dev/null +++ b/docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md @@ -0,0 +1,380 @@ +# 小程序 11 个核心页面参考图重设计实施计划 + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 严格按照小程序参考图重构 5 个 Tab 页面与 6 个服务页面,保留真实数据、业务不变量和 8 个固定首页入口。 + +**Architecture:** 先建立全局 Token、正式素材和公共页面骨架,再按 A/B/C 三组迁移页面。页面继续使用现有 stores/services/API;视觉组件只接收状态与数据,不在组件内推导权限或关系事实。 + +**Tech Stack:** 微信原生小程序、TypeScript/JavaScript、WXML、WXSS、Node.js contracts、微信开发者工具 + +**Spec:** `docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md` + +## Global Constraints + +- 五个 Tab 固定为首页、找对象、消息、活动、我的。 +- 首页 8 入口采用两行四列并保持正式顺序。 +- 页面使用深靛蓝/紫色夜景、珊瑚粉、白色内容卡片的参考图语言。 +- 不使用 Emoji、字符图标、CSS 拼图或临时占位资产。 +- Mutual Match、Block、Required、Capability 和活动二阶段确认逻辑保持不变。 +- 只重构已确认 11 页;次级详情页只保证入口与现有功能不被破坏。 + +--- + +### Task 1: 建立 11 页范围与参考图契约 + +**Files:** +- Create: `ui-tests/miniapp-reference-contracts.mjs` +- Modify: `miniapp/app.json` +- Modify: `miniapp/app.wxss` +- Test: `ui-tests/miniapp-reference-contracts.mjs` + +**Interfaces:** +- Consumes: 11 个页面路径、五项 Tab 和 8 入口正式顺序。 +- Produces: 对页面范围、Token、图标资源和关键结构的失败优先契约。 + +- [ ] **Step 1: 编写失败的核心契约** + +```js +import assert from 'node:assert/strict' +import { existsSync, readFileSync } from 'node:fs' +import { resolve } from 'node:path' +const root = resolve(import.meta.dirname, '..') +const read = (p) => readFileSync(resolve(root, p), 'utf8') +const app = JSON.parse(read('miniapp/app.json')) +const pages = ['index','discover','messages','activity','mine','matchmaker','counseling-intro','premarital-intro','content','anti-fraud','service-station'] +assert.deepEqual(app.tabBar.list.map((i) => i.text), ['首页','找对象','消息','活动','我的']) +for (const page of pages) { + const base = `miniapp/pages/${page}/${page}` + for (const ext of ['.json','.wxml','.wxss']) assert.ok(existsSync(resolve(root, base + ext)), `${page}${ext} 不存在`) + assert.match(read(base + '.wxml'), /reference-page/, `${page} 未接入参考图页面骨架`) + assert.doesNotMatch(read(base + '.wxml'), /[\u{1F300}-\u{1FAFF}]/u, `${page} 含 Emoji`) +} +const home = read('miniapp/pages/index/index.ts') +for (const code of ['find_object','matchmaker','activities','counseling','classroom','premarital','anti_fraud','service_station']) assert.ok(home.includes(code)) +console.log('Miniapp reference contracts passed') +``` + +- [ ] **Step 2: 运行契约确认失败** + +Run: `node ui-tests/miniapp-reference-contracts.mjs` + +Expected: FAIL,报告首个未接入 `reference-page` 的页面。 + +- [ ] **Step 3: 建立全局 Token** + +```css +page { + --mini-night-start: #171d72; + --mini-night-end: #4d268f; + --mini-accent-pink: #ff4f91; + --mini-accent-coral: #ff6678; + --mini-card-bg: #ffffff; + --mini-text: #1f2744; + --mini-muted: #7d839b; + --mini-card-radius: 24rpx; + --mini-shadow: 0 12rpx 32rpx rgba(31, 25, 91, 0.12); +} +``` + +- [ ] **Step 4: 校准 `app.json`** + +保持 64 个现有页面注册和五项 Tab 路径不变;只更新全局背景、导航颜色和本轮正式图标路径,不删除非本轮页面。 + +- [ ] **Step 5: 提交契约与基础 Token** + +```powershell +npm --prefix miniapp run type-check +git add -- ui-tests/miniapp-reference-contracts.mjs miniapp/app.json miniapp/app.wxss +git commit -m "test: lock miniapp reference page scope" +``` + +### Task 2: 制作正式素材与公共组件 + +**Files:** +- Create: `miniapp/assets/brand/home-hero-v2.jpg` +- Create: `miniapp/assets/service/matchmaker-hero.jpg` +- Create: `miniapp/assets/service/counseling-hero.jpg` +- Create: `miniapp/assets/service/premarital-hero.jpg` +- Create: `miniapp/assets/service/anti-fraud-hero.jpg` +- Create: `miniapp/assets/service/station-hero.jpg` +- Create: `miniapp/assets/icons/home/*.png` +- Modify: `miniapp/components/nav-bar/*` +- Modify: `miniapp/components/section-header/*` +- Modify: `miniapp/components/loading/*` +- Modify: `miniapp/components/empty/*` +- Modify: `miniapp/components/error-state/*` +- Create: `miniapp/components/service-hero/index.{js,json,wxml,wxss}` +- Test: `ui-tests/brand-assets.mjs` +- Test: `ui-tests/miniapp-reference-contracts.mjs` + +**Interfaces:** +- Consumes: 参考图的夜景、人物、花朵、爱心和丹阳城市风格。 +- Produces: `service-hero` 组件属性 `title/subtitle/imageSrc/tone` 和 8 个入口 PNG 图标。 + +- [ ] **Step 1: 扩展资产失败契约** + +断言上述图片存在、尺寸非零、首页 8 图标不复用封面图、WXML 不使用 Emoji/字符图标。 + +- [ ] **Step 2: 按实际组件尺寸生成素材** + +生成不含设备边框和不可编辑 UI 文字的独立图片;首页 Banner 使用横向夜景,服务页 Hero 保留人物或主题主体安全区。逐张检查风格一致、无乱码、无水印。 + +- [ ] **Step 3: 实现公共组件状态** + +`service-hero` 只负责图片与文案布局;Loading、Empty、Error 保持明确状态;`nav-bar` 适配胶囊按钮和安全区,不写业务权限。 + +- [ ] **Step 4: 验证并提交素材组件** + +```powershell +node ui-tests/brand-assets.mjs +npm --prefix miniapp run type-check +git add -- miniapp/assets miniapp/components ui-tests/brand-assets.mjs +git commit -m "feat: add miniapp reference assets and primitives" +``` + +### Task 3: A1 首页重构 + +**Files:** +- Modify: `miniapp/pages/index/index.ts` +- Modify: `miniapp/pages/index/index.json` +- Modify: `miniapp/pages/index/index.wxml` +- Modify: `miniapp/pages/index/index.wxss` +- Modify: `miniapp/components/recommend-card/*` +- Test: `ui-tests/phase07-home-contracts.mjs` +- Test: `ui-tests/miniapp-reference-contracts.mjs` + +**Interfaces:** +- Consumes: `GET /home`、服务端 quickEntries/Capability、推荐、活动、服务站、课堂与安全数据。 +- Produces: 固定模块顺序与 2×4 入口布局。 + +- [ ] **Step 1: 扩展首页失败契约** + +断言 WXML 模块顺序为品牌状态、Banner、8 入口、今日推荐、公益服务、近期活动、服务站、课堂、安全提醒;断言 `processHomeData` 不改变服务端 `enabled/disabledReason`。 + +- [ ] **Step 2: 运行契约确认失败** + +```powershell +node ui-tests/phase07-home-contracts.mjs +node ui-tests/miniapp-reference-contracts.mjs +``` + +Expected: 至少一个新结构或视觉断言失败。 + +- [ ] **Step 3: 实现首屏和 8 入口** + +参考图还原紫蓝品牌区、夜景 Banner、白色浮层入口卡和紧凑推荐卡;入口固定两行四列。服务端返回入口时按固定 code 排序,不允许运营重排。 + +- [ ] **Step 4: 完成状态和真实操作** + +保留未登录、准入、审核中、暂停、成功牵手、空推荐、错误重试;Like/Pass 必须调用现有 service,删除当前 `setTimeout` 演示反馈。 + +- [ ] **Step 5: 验证并提交首页** + +```powershell +node ui-tests/phase07-home-contracts.mjs +node ui-tests/miniapp-reference-contracts.mjs +npm --prefix miniapp run type-check +git add -- miniapp/pages/index miniapp/components/recommend-card +git commit -m "feat: recreate miniapp home from reference" +``` + +### Task 4: A2 找对象与消息重构 + +**Files:** +- Modify: `miniapp/pages/discover/discover.{ts,json,wxml,wxss}` +- Modify: `miniapp/pages/messages/messages.{js,json,wxml,wxss}` +- Modify: `miniapp/components/user-card/*` +- Modify: `miniapp/components/conversation-item/*` +- Test: `ui-tests/miniapp-reference-contracts.mjs` +- Test: `ui-tests/phase06-match-eligibility-contracts.mjs` + +**Interfaces:** +- Consumes: `recommendationService`、筛选状态、messageStore、Mutual Match/Block 后端结果。 +- Produces: 参考图人物列表、胶囊筛选、消息分类和会话列表。 + +- [ ] **Step 1: 添加失败断言** + +断言找对象页包含 `discover-filter-chips`、`candidate-list`;消息页包含 `message-shortcuts`、`conversation-list`、未读徽标和无 Mutual 状态。 + +- [ ] **Step 2: 实现找对象页** + +保持 Required 筛选语义,卡片展示头像、年龄、本地信息、职业、认证和兴趣;喜欢/忽略调用现有服务;Block 用户不在前端临时过滤后又可被搜索恢复。 + +- [ ] **Step 3: 实现消息页** + +顶部四项为新朋友、互动喜欢、我的关注、系统通知;列表展示头像、摘要、时间和未读数;只有服务端允许的 Mutual Match 会话可进入聊天。 + +- [ ] **Step 4: 验证并提交** + +```powershell +node ui-tests/phase06-match-eligibility-contracts.mjs +node ui-tests/miniapp-reference-contracts.mjs +npm --prefix miniapp run type-check +git add -- miniapp/pages/discover miniapp/pages/messages miniapp/components/user-card miniapp/components/conversation-item +git commit -m "feat: redesign discovery and messages tabs" +``` + +### Task 5: A3 活动与我的重构 + +**Files:** +- Modify: `miniapp/pages/activity/activity.{js,json,wxml,wxss}` +- Modify: `miniapp/pages/mine/mine.{js,json,wxml,wxss}` +- Modify: `miniapp/components/activity-card/*` +- Modify: `miniapp/components/avatar/*` +- Test: `ui-tests/miniapp-reference-contracts.mjs` + +**Interfaces:** +- Consumes: activityStore、userStore、matchStore 和现有路由。 +- Produces: 活动大图卡、报名状态、个人统计和五项服务入口。 + +- [ ] **Step 1: 添加失败断言** + +断言活动页有分类、日历、人数/容量、状态按钮;我的页有个人头部、四项统计、公益身份卡、红娘/咨询/活动/预约/设置入口。 + +- [ ] **Step 2: 实现活动页** + +活动卡展示真实时间、地点、适龄范围、人数和状态;报名按钮进入现有报名流程。不得在活动列表直接创建 Match 或聊天。 + +- [ ] **Step 3: 实现我的页** + +未登录显示登录引导;登录态展示真实资料和统计;敏感数据不出现在页面摘要;设置和各服务入口保持现有路由。 + +- [ ] **Step 4: 验证 A 组并提交** + +```powershell +node ui-tests/miniapp-reference-contracts.mjs +npm --prefix miniapp run type-check +git add -- miniapp/pages/activity miniapp/pages/mine miniapp/components/activity-card miniapp/components/avatar +git commit -m "feat: redesign activity and profile tabs" +``` + +Expected: 五个 Tab 均可打开且主要交互有效;暂停等待 A 组人工验收。 + +### Task 6: B 组公益红娘、婚恋咨询、婚前辅导 + +**Files:** +- Modify: `miniapp/pages/matchmaker/matchmaker.{js,json,wxml,wxss}` +- Modify: `miniapp/pages/counseling-intro/counseling-intro.{ts,json,wxml,wxss}` +- Modify: `miniapp/pages/premarital-intro/premarital-intro.{ts,json,wxml,wxss}` +- Modify: `miniapp/components/matchmaker-card/*` +- Modify: `miniapp/styles/service-page.wxss` +- Test: `ui-tests/miniapp-reference-contracts.mjs` + +**Interfaces:** +- Consumes: matchmakerStore、咨询/辅导 API、Capability 和现有申请路由。 +- Produces: 三个参考图服务首页及真实申请/预约入口。 + +- [ ] **Step 1: 添加 B 组失败断言** + +断言三个页面使用 `service-hero`;红娘页包含免费服务/真实匹配/隐私保护与申请状态;咨询和辅导页包含四个主题、预约按钮和服务状态。 + +- [ ] **Step 2: 实现公益红娘** + +展示公益说明、申请状态、红娘资料和服务记录;所有推荐仍由用户本人决定,页面不得出现代 Like 操作。 + +- [ ] **Step 3: 实现咨询与辅导** + +咨询与红娘数据模型分离;咨询正文不在介绍页加载;预约按钮进入现有申请页;Capability 禁用时显示服务端原因。 + +- [ ] **Step 4: 验证 B 组并提交** + +```powershell +node ui-tests/miniapp-reference-contracts.mjs +npm --prefix miniapp run type-check +git add -- miniapp/pages/matchmaker miniapp/pages/counseling-intro miniapp/pages/premarital-intro miniapp/components/matchmaker-card miniapp/styles/service-page.wxss +git commit -m "feat: redesign public relationship services" +``` + +Expected: 自动化 PASS;暂停等待 B 组人工验收。 + +### Task 7: C 组婚恋课堂、婚恋反诈、善缘服务站 + +**Files:** +- Modify: `miniapp/pages/content/content.{js,json,wxml,wxss}` +- Modify: `miniapp/pages/anti-fraud/anti-fraud.{js,json,wxml,wxss}` +- Modify: `miniapp/pages/service-station/service-station.{js,json,wxml,wxss}` +- Modify: `miniapp/styles/service-page.wxss` +- Test: `ui-tests/miniapp-reference-contracts.mjs` + +**Interfaces:** +- Consumes: 内容、反诈和服务站 API;微信位置与电话接口。 +- Produces: 参考图内容列表、安全页和服务站卡片。 + +- [ ] **Step 1: 添加 C 组失败断言** + +断言课堂页有分类和内容列表;反诈页有四类风险与举报/求助入口;服务站页有地址、电话、开放时间、服务项目、定位和预约。 + +- [ ] **Step 2: 实现课堂与反诈页** + +课堂列表展示真实封面、标题、浏览量和发布日期;反诈页使用明确警示但保持温和公益表达;举报入口进入现有举报页面。 + +- [ ] **Step 3: 实现服务站页** + +站点数据为空时显示区域空状态;电话使用 `wx.makePhoneCall`;位置使用 `wx.openLocation`,不依赖 Google Maps;预约进入现有服务预约页。 + +- [ ] **Step 4: 验证 C 组并提交** + +```powershell +node ui-tests/miniapp-reference-contracts.mjs +npm --prefix miniapp run type-check +git add -- miniapp/pages/content miniapp/pages/anti-fraud miniapp/pages/service-station miniapp/styles/service-page.wxss +git commit -m "feat: redesign content safety and service station pages" +``` + +Expected: 自动化 PASS;暂停等待 C 组人工验收。 + +### Task 8: 微信开发者工具与逐屏视觉 QA + +**Files:** +- Create: `artifacts/ui-redesign/miniapp/01-home.png` 至 `11-service-station.png` +- Create: `artifacts/ui-redesign/miniapp/reference-comparisons/` +- Create: `docs/MINIAPP_REFERENCE_UI_QA_2026-09-13.md` +- Modify: 仅 QA 发现差异的本轮页面和公共组件 + +**Interfaces:** +- Consumes: 微信开发者工具中的真实编译页面和小程序参考图。 +- Produces: 11 页截图、对比图、交互检查与剩余差异记录。 + +- [ ] **Step 1: 在微信开发者工具重新编译** + +确认 TypeScript 编译插件启用;清除旧编译缓存后重新编译。控制台不得出现 WXML、WXSS、组件路径或页面注册错误。 + +- [ ] **Step 2: 验证五项 Tab 和 11 页入口** + +逐个检查 Tab 切换、8 个首页入口、Like/Pass、会话进入、活动报名、红娘申请、咨询预约、辅导预约、课堂详情、举报、电话、定位和服务预约。 + +- [ ] **Step 3: 验证异常状态** + +检查未登录、Loading、空数据、网络失败、无权限、Capability 禁用、Block、无 Mutual Match、审核中和提交失败状态。 + +- [ ] **Step 4: 截图并对比** + +使用同一设备基线截取 11 页,逐页检查顶部高度、卡片圆角、图片比例、按钮尺寸、标签密度、底部安全区和参考图视觉语言。 + +- [ ] **Step 5: 修复 P0/P1/P2 差异并复测** + +每次修复后重新编译和截图;报告不得在仍有 P0/P1/P2 时写 `passed`。 + +- [ ] **Step 6: 运行最终自动化门禁** + +```powershell +node ui-tests/miniapp-reference-contracts.mjs +node ui-tests/phase03-verification-contracts.mjs +node ui-tests/phase04-local-eligibility-contracts.mjs +node ui-tests/phase06-match-eligibility-contracts.mjs +node ui-tests/phase07-home-contracts.mjs +npm --prefix miniapp run type-check +git diff --check +``` + +Expected: 全部退出码为 0。 + +- [ ] **Step 7: 提交 QA 证据** + +```powershell +git add -- artifacts/ui-redesign/miniapp docs/MINIAPP_REFERENCE_UI_QA_2026-09-13.md miniapp +git commit -m "test: verify miniapp reference UI fidelity" +``` + +Expected: 11 页截图和报告齐全;等待用户最终验收。 diff --git a/docs/superpowers/plans/2026-09-13-reference-driven-dual-client-ui-redesign.md b/docs/superpowers/plans/2026-09-13-reference-driven-dual-client-ui-redesign.md new file mode 100644 index 0000000..0b3e692 --- /dev/null +++ b/docs/superpowers/plans/2026-09-13-reference-driven-dual-client-ui-redesign.md @@ -0,0 +1,189 @@ +# 善缘丹阳双端参考图重设计总实施计划 + +> **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:** 先完成旧 UI 代码与冲突文档治理,再依次交付管理端框架/工作台和小程序 11 个核心页面的参考图驱动重设计。 + +**Architecture:** 将工作拆成三个可独立验证的执行包,严格按“清理治理 → 管理端 → 小程序 → 双端终验”推进。每个执行包有独立测试、提交和人工验收门禁,上一包未通过不得进入下一包。 + +**Tech Stack:** PowerShell、Node.js contract tests、Vue 3、TypeScript、Vite、Element Plus、微信原生小程序、微信开发者工具、Docker Compose + +**Spec:** `docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md` + +## Global Constraints + +- 管理端唯一视觉参考:`ChatGPT Image 2026年9月11日 10_34_34 (1).png`。 +- 小程序唯一视觉参考:`ChatGPT Image 2026年9月11日 12_46_40.png`。 +- 小程序首页保留 8 个固定入口,顺序为找对象、公益红娘、公益活动、婚恋咨询、婚恋课堂、婚前辅导、婚恋反诈、善缘服务站。 +- 管理端第一批只重构全局框架与工作台。 +- 小程序第一批只重构 11 个已确认核心页面。 +- 不改变 API、数据库、权限、Capability、Required、Mutual Match、Block 和活动二阶段确认规则。 +- 不依赖 Google Fonts、境外 CDN 或新的大型 UI 框架。 +- 所有删除必须先有引用证据,并能通过 Git 恢复。 + +--- + +### Task 1: 执行旧代码与文档治理计划 + +**Files:** +- Read: `docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md` +- Produce: `docs/UI_CLEANUP_REPORT_2026-09-13.md` + +**Interfaces:** +- Consumes: 当前 Git 工作区、活动路由、Markdown 文档和小程序编译配置。 +- Produces: 唯一有效视觉文档入口、清理报告、无失效视觉证据的代码库。 + +- [ ] **Step 1: 按子计划逐项执行清理任务** + +Run: + +```powershell +Get-Content -Raw -Encoding UTF8 'docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md' +``` + +Expected: 读取到代码盘点、文档治理、TypeScript 唯一源和清理验收四个任务。 + +- [ ] **Step 2: 完成清理门禁并暂停** + +Run: + +```powershell +node ui-tests/ui-document-baseline-contracts.mjs +node ui-tests/miniapp-source-uniqueness-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +npm --prefix miniapp run type-check +``` + +Expected: 全部退出码为 0;清理报告已列出 `KEEP/REFACTOR/DELETE/REVIEW`;等待用户确认后再继续。 + +### Task 2: 执行管理端框架与工作台重设计计划 + +**Files:** +- Read: `docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md` +- Produce: `artifacts/ui-redesign/admin/` + +**Interfaces:** +- Consumes: 清理后的唯一视觉基线、现有权限路由和运营统计 API。 +- Produces: 新管理端框架、工作台及两种目标分辨率截图。 + +- [ ] **Step 1: 执行管理端子计划** + +Run: + +```powershell +Get-Content -Raw -Encoding UTF8 'docs/superpowers/plans/2026-09-13-admin-shell-dashboard-redesign.md' +``` + +Expected: 读取到视觉契约、全局框架、数据适配、工作台和浏览器验收任务。 + +- [ ] **Step 2: 完成管理端门禁并暂停** + +Run: + +```powershell +node ui-tests/admin-reference-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +``` + +Expected: 全部通过;`1366×768`、`1920×1080` 截图存在;用户完成人工验收。 + +### Task 3: 执行小程序 11 页重设计计划 + +**Files:** +- Read: `docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md` +- Produce: `artifacts/ui-redesign/miniapp/` + +**Interfaces:** +- Consumes: 清理后的 TypeScript/JavaScript 源文件边界、现有 stores/services/API 和参考图。 +- Produces: 5 个 Tab 页、6 个服务页、正式素材和逐屏截图。 + +- [ ] **Step 1: 执行小程序子计划 A/B/C 三组** + +Run: + +```powershell +Get-Content -Raw -Encoding UTF8 'docs/superpowers/plans/2026-09-13-miniapp-11-core-pages-redesign.md' +``` + +Expected: 每组均包含失败契约、最小实现、静态检查、开发者工具编译和人工验收步骤。 + +- [ ] **Step 2: 完成小程序门禁** + +Run: + +```powershell +node ui-tests/miniapp-reference-contracts.mjs +node ui-tests/phase07-home-contracts.mjs +npm --prefix miniapp run type-check +``` + +Expected: 全部通过;11 页截图完整;微信开发者工具无 WXML/WXSS/TypeScript 编译错误。 + +### Task 4: 双端最终验收与状态收口 + +**Files:** +- Create: `docs/UI_REFERENCE_REDESIGN_ACCEPTANCE_2026-09-13.md` +- Modify: `docs/STATUS.md` +- Modify: `docs/JIRA_BACKLOG.md` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` +- Test: `ui-tests/ui-document-baseline-contracts.mjs` + +**Interfaces:** +- Consumes: 双端最终截图、构建日志、微信开发者工具编译结果和用户验收结论。 +- Produces: 唯一有效的本轮验收报告和准确进度状态。 + +- [ ] **Step 1: 写入验收报告骨架并保持未通过状态** + +```markdown +# 双端参考图重设计验收报告 + +- 管理端框架与工作台:待验收 +- 小程序 11 个核心页面:待验收 +- 冲突代码与文档清理:待验收 +- 剩余差异:以逐屏对比记录为准 +``` + +- [ ] **Step 2: 运行双端完整门禁** + +Run: + +```powershell +node ui-tests/ui-document-baseline-contracts.mjs +node ui-tests/admin-reference-contracts.mjs +node ui-tests/miniapp-reference-contracts.mjs +node ui-tests/phase03-verification-contracts.mjs +node ui-tests/phase04-local-eligibility-contracts.mjs +node ui-tests/phase06-match-eligibility-contracts.mjs +node ui-tests/phase07-home-contracts.mjs +npm --prefix admin-web run type-check +npm --prefix admin-web run build +npm --prefix miniapp run type-check +``` + +Expected: 全部退出码为 0。 + +- [ ] **Step 3: 使用 Docker 联调但不重建数据卷** + +Run: + +```powershell +docker compose -f infrastructure/docker-compose.yml ps +bash backend/mvnw -f backend/pom.xml test +``` + +Expected: Docker 服务为运行状态;仓库 Maven Wrapper 完成后端测试。Docker 检查不得执行 `down -v`、删除或重建 volume。 + +- [ ] **Step 4: 用户验收后更新状态** + +将验收报告、`STATUS.md`、`JIRA_BACKLOG.md` 和页面矩阵从“待验收”更新为实际结论,不得预先写入“通过”。 + +- [ ] **Step 5: 提交最终验收记录** + +```powershell +git add -- docs/UI_REFERENCE_REDESIGN_ACCEPTANCE_2026-09-13.md docs/STATUS.md docs/JIRA_BACKLOG.md docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md +git commit -m "docs: record reference UI redesign acceptance" +``` + +Expected: 提交只包含状态和验收文档,不混入业务代码。 diff --git a/docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md b/docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md new file mode 100644 index 0000000..89b72aa --- /dev/null +++ b/docs/superpowers/plans/2026-09-13-ui-cleanup-and-document-governance.md @@ -0,0 +1,318 @@ +# 旧 UI 代码与冲突文档治理实施计划 + +> **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:** 在不丢失有效业务代码和审计证据的前提下,删除废弃 UI 实现与冲突文档,并建立唯一有效视觉事实源。 + +**Architecture:** 先以只读脚本生成引用证据,再用契约测试锁定文档权威和小程序源文件唯一性,最后分批执行显式删除与修订。清理过程不使用目录级通配删除,每批都通过双端构建门禁。 + +**Tech Stack:** PowerShell、Node.js、Git、Vue TypeScript、微信小程序 TypeScript + +**Spec:** `docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md` + +## Global Constraints + +- 不删除后端业务、Flyway migration、Docker volume、数据库备份或用户未授权文件。 +- 只删除引用证据明确且由 Git 可恢复的文件。 +- `AGENTS.md` 最终只指向 2026-09-13 新 UI 规格。 +- 旧 Phase 07 视觉结果必须标记为失效,不能继续作为通过证据。 +- 小程序共享 `.js` 文件如仍被纯 JavaScript 页面运行时引用,必须保留并记录原因。 + +--- + +### Task 1: 建立清理候选与引用证据 + +**Files:** +- Create: `scripts/audit-ui-obsolete-files.ps1` +- Create: `docs/UI_CLEANUP_INVENTORY_2026-09-13.md` +- Test: `scripts/audit-ui-obsolete-files.ps1` + +**Interfaces:** +- Consumes: `admin-web/src/router/index.ts`、`miniapp/app.json`、组件注册、import/require、Markdown 链接和 Git 状态。 +- Produces: `KEEP/REFACTOR/DELETE/REVIEW` 四类清单,不执行删除。 + +- [ ] **Step 1: 编写只读审计脚本** + +```powershell +param([string]$Root = (Resolve-Path "$PSScriptRoot\..")) +$miniappPages = (Get-Content -Raw -Encoding UTF8 "$Root\miniapp\app.json" | ConvertFrom-Json).pages +$status = git -C $Root status --short +$pairs = Get-ChildItem "$Root\miniapp" -Recurse -Filter *.ts | ForEach-Object { + $js = [IO.Path]::ChangeExtension($_.FullName, '.js') + if (Test-Path -LiteralPath $js) { "$(Resolve-Path -Relative $_.FullName)|$(Resolve-Path -Relative $js)" } +} +[PSCustomObject]@{ + activePages = $miniappPages + duplicateSources = $pairs + gitStatus = $status +} | ConvertTo-Json -Depth 4 +``` + +- [ ] **Step 2: 运行脚本并确认未删除文件** + +Run: + +```powershell +& .\scripts\audit-ui-obsolete-files.ps1 +git status --short +``` + +Expected: 终端输出活动页面、同名源和 Git 状态 JSON;脚本不写文件,Git 状态没有被脚本扩大。使用 `apply_patch` 将核对后的结果写入盘点文档。 + +- [ ] **Step 3: 人工补齐四类判定和证据** + +在盘点文档中为每项写入:分类、引用位置、替代实现、删除风险和验证命令。证据不足的项目必须标记 `REVIEW`。 + +- [ ] **Step 4: 提交只读盘点能力** + +```powershell +git add -- scripts/audit-ui-obsolete-files.ps1 docs/UI_CLEANUP_INVENTORY_2026-09-13.md +git commit -m "chore: inventory obsolete UI files" +``` + +### Task 2: 建立文档单一事实源契约 + +**Files:** +- Create: `ui-tests/ui-document-baseline-contracts.mjs` +- Modify: `AGENTS.md` +- Modify: `docs/STATUS.md` +- Modify: `docs/JIRA_BACKLOG.md` +- Modify: `docs/Phase-07-V11-Recovery-Completion-Report-2026-09-13.md` +- Modify: `docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md` +- Modify: `docs/善缘丹阳 V1.1 客户需求基线增量开发与修复计划.md` +- Modify: `docs/善缘丹阳 V1.1 当前进度校正与严格Phase修复计划.md` +- Delete: `docs/善缘丹阳 V1.1 前端 UI-UX 高保真原型修订说明.md` +- Delete: spec 第 7.2 节列出的旧 UI 规格、计划和验收文件 +- Delete: spec 第 7.2 节列出的旧 Phase 07 截图 +- Test: `ui-tests/ui-document-baseline-contracts.mjs` + +**Interfaces:** +- Consumes: 已确认新规格、旧文档中仍有效的业务状态/权限/交互要求。 +- Produces: `AGENTS.md` 唯一视觉入口和不会声明旧视觉已通过的活动文档集。 + +- [ ] **Step 1: 编写失败的文档契约** + +```js +import assert from 'node:assert/strict' +import { existsSync, readFileSync } from 'node:fs' +import { resolve } from 'node:path' + +const root = resolve(import.meta.dirname, '..') +const read = (p) => readFileSync(resolve(root, p), 'utf8') +const spec = 'docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md' +const obsolete = [ + 'docs/superpowers/specs/2026-09-10-ui-v11-fidelity-design.md', + 'docs/superpowers/specs/2026-09-11-codex-baseline-cleanup-design.md', + 'docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md', + 'docs/superpowers/plans/2026-09-10-ui-v11-fidelity.md', + 'docs/superpowers/plans/2026-09-11-codex-baseline-cleanup.md', + 'docs/superpowers/plans/2026-09-11-admin-full-ui-redesign.md', + 'docs/superpowers/plans/2026-09-11-miniapp-full-ui-redesign.md', + 'docs/superpowers/plans/2026-09-11-ui-foundation-and-pilot.md', + 'docs/UI-V11-Visual-Acceptance-2026-09-10.md', + 'docs/善缘丹阳 V1.1 前端 UI-UX 高保真原型修订说明.md', + 'design-qa.md', +] +assert.ok(read('AGENTS.md').includes(spec), 'AGENTS.md 未指向唯一视觉规格') +for (const file of obsolete) assert.equal(existsSync(resolve(root, file)), false, `旧有效文档仍存在: ${file}`) +assert.match(read('docs/STATUS.md'), /Phase 07.*视觉.*(否决|重新实现|待验收)/s) +assert.doesNotMatch(read('docs/Phase-07-V11-Recovery-Completion-Report-2026-09-13.md'), /视觉验收.*通过/) +console.log('UI document baseline contracts passed') +``` + +- [ ] **Step 2: 运行契约确认失败** + +Run: `node ui-tests/ui-document-baseline-contracts.mjs` + +Expected: FAIL,首先报告 `AGENTS.md` 未指向新规格或旧文档仍存在。 + +- [ ] **Step 3: 迁移有效规则并修订活动文档** + +将旧高保真文档中仍有效的业务状态、权限、错误状态和可访问性要求逐条核对到新规格、页面功能文档或 API 文档;在迁移清单中记录目标章节。随后更新 `AGENTS.md`、状态、JIRA、Phase 07 报告和页面矩阵。 + +- [ ] **Step 4: 显式删除旧文档与失败截图** + +使用以下数组中的每个 `$path` 调用 `git ls-files --error-unmatch -- $path` 区分已跟踪和未跟踪文件,再执行显式列表;不得使用递归删除或通配符。 + +```powershell +$trackedObsolete = @( + 'docs/superpowers/specs/2026-09-10-ui-v11-fidelity-design.md', + 'docs/superpowers/specs/2026-09-11-codex-baseline-cleanup-design.md', + 'docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md', + 'docs/superpowers/plans/2026-09-10-ui-v11-fidelity.md', + 'docs/superpowers/plans/2026-09-11-codex-baseline-cleanup.md', + 'docs/superpowers/plans/2026-09-11-admin-full-ui-redesign.md', + 'docs/superpowers/plans/2026-09-11-miniapp-full-ui-redesign.md', + 'docs/superpowers/plans/2026-09-11-ui-foundation-and-pilot.md', + 'docs/UI-V11-Visual-Acceptance-2026-09-10.md', + 'docs/善缘丹阳 V1.1 前端 UI-UX 高保真原型修订说明.md' +) +foreach ($path in $trackedObsolete) { + if (git ls-files --error-unmatch -- $path 2>$null) { git rm -- $path } +} +$untrackedObsolete = @( + 'design-qa.md', + 'artifacts/phase07-miniapp-home.png', + 'artifacts/phase07-miniapp-discover.png', + 'artifacts/phase07-home-comparison.png', + 'artifacts/phase07-discover-comparison.png' +) +foreach ($path in $untrackedObsolete) { + $resolved = Resolve-Path -LiteralPath $path -ErrorAction SilentlyContinue + if ($resolved -and $resolved.Path.StartsWith((Resolve-Path '.').Path)) { + Remove-Item -LiteralPath $resolved.Path + } +} +``` + +- [ ] **Step 5: 运行文档契约** + +Run: + +```powershell +node ui-tests/ui-document-baseline-contracts.mjs +rg -n "2026-09-10-ui-v11-fidelity|2026-09-11-dual-client-full-ui-redesign|视觉验收.*通过" AGENTS.md docs +``` + +Expected: 契约 PASS;`rg` 只允许在新规格和清理报告的历史删除清单中命中。 + +- [ ] **Step 6: 提交文档治理** + +```powershell +git add -- AGENTS.md docs/STATUS.md docs/JIRA_BACKLOG.md docs/Phase-07-V11-Recovery-Completion-Report-2026-09-13.md docs/UI_REDESIGN_PAGE_MATRIX_V1.1.md 'docs/善缘丹阳 V1.1 客户需求基线增量开发与修复计划.md' 'docs/善缘丹阳 V1.1 当前进度校正与严格Phase修复计划.md' ui-tests/ui-document-baseline-contracts.mjs +git commit -m "docs: retire conflicting UI baselines" +``` + +### Task 3: 处理小程序 TypeScript/JavaScript 同名源 + +**Files:** +- Create: `ui-tests/miniapp-source-uniqueness-contracts.mjs` +- Modify: 当前 11 个同名页面的 `.ts` 文件(仅在行为缺失时) +- Delete: `miniapp/pages/activity-mutual-result/activity-mutual-result.js` +- Delete: `miniapp/pages/activity-mutual-waiting/activity-mutual-waiting.js` +- Delete: `miniapp/pages/chat/chat.js` +- Delete: `miniapp/pages/counseling-intro/counseling-intro.js` +- Delete: `miniapp/pages/counseling-request/counseling-request.js` +- Delete: `miniapp/pages/local-eligibility/local-eligibility.js` +- Delete: `miniapp/pages/local-eligibility-supplement/local-eligibility-supplement.js` +- Delete: `miniapp/pages/login/login.js` +- Delete: `miniapp/pages/my-counseling/my-counseling.js` +- Delete: `miniapp/pages/premarital-intro/premarital-intro.js` +- Delete: `miniapp/pages/premarital-request/premarital-request.js` +- Keep: `miniapp/env.js` +- Keep: `miniapp/utils/api.js` +- Test: `ui-tests/miniapp-source-uniqueness-contracts.mjs` + +**Interfaces:** +- Consumes: `project.config.json` 的 TypeScript 编译器、页面 `.js/.ts` 行为差异和现有 JS 页面对共享模块的依赖。 +- Produces: 页面级 TypeScript 唯一手写源;共享 JS 兼容层暂时保留并有明确理由。 + +- [ ] **Step 1: 编写失败的页面唯一源契约** + +```js +import assert from 'node:assert/strict' +import { existsSync, readdirSync } from 'node:fs' +import { extname, join, resolve } from 'node:path' + +const pages = resolve(import.meta.dirname, '../miniapp/pages') +const duplicates = [] +for (const dir of readdirSync(pages, { withFileTypes: true }).filter((item) => item.isDirectory())) { + const base = join(pages, dir.name, dir.name) + if (existsSync(`${base}.ts`) && existsSync(`${base}.js`)) duplicates.push(dir.name) +} +assert.deepEqual(duplicates, [], `页面仍有 TS/JS 双源: ${duplicates.join(', ')}`) +console.log('Miniapp page sources are unique') +``` + +- [ ] **Step 2: 运行契约确认失败** + +Run: `node ui-tests/miniapp-source-uniqueness-contracts.mjs` + +Expected: FAIL,并列出 activity-mutual、chat、counseling、local-eligibility、login、premarital 等重复页面。 + +- [ ] **Step 3: 逐页比较行为并补齐 TypeScript** + +对每一对文件使用 `git diff --no-index -- .js .ts`,确认 API 路径、事件处理、状态字段和路由均保留。只将 `.js` 中仍有效且 `.ts` 缺失的行为迁入 `.ts`。 + +- [ ] **Step 4: 显式删除页面 JavaScript 双源** + +逐个删除盘点中确认的页面 `.js`,不删除 `miniapp/env.js` 和 `miniapp/utils/api.js`,因为其仍被未迁移的 JavaScript 页面使用。 + +- [ ] **Step 5: 验证唯一源和编译** + +Run: + +```powershell +node ui-tests/miniapp-source-uniqueness-contracts.mjs +npm --prefix miniapp run type-check +node ui-tests/miniapp-auth-contracts.mjs +node ui-tests/phase04-local-eligibility-contracts.mjs +``` + +Expected: 全部 PASS;微信开发者工具编译插件继续以 `.ts` 生成运行代码。 + +- [ ] **Step 6: 提交页面源清理** + +```powershell +git add -- miniapp/pages/activity-mutual-result miniapp/pages/activity-mutual-waiting miniapp/pages/chat miniapp/pages/counseling-intro miniapp/pages/counseling-request miniapp/pages/local-eligibility miniapp/pages/local-eligibility-supplement miniapp/pages/login miniapp/pages/my-counseling miniapp/pages/premarital-intro miniapp/pages/premarital-request ui-tests/miniapp-source-uniqueness-contracts.mjs +git commit -m "refactor: remove duplicate miniapp page sources" +``` + +### Task 4: 清理剩余无引用 UI 资产并生成报告 + +**Files:** +- Modify: `docs/UI_CLEANUP_INVENTORY_2026-09-13.md` +- Create: `docs/UI_CLEANUP_REPORT_2026-09-13.md` +- Delete: 本任务不新增删除目标;证据不足的组件、样式和素材保留为 `REVIEW` +- Test: 现有全部 UI contract tests + +**Interfaces:** +- Consumes: 盘点文档、引用证据、前两项任务的删除结果。 +- Produces: 可审核的清理报告和保持可构建的双端代码库。 + +- [ ] **Step 1: 对候选资产执行引用复核** + +Run: + +```powershell +$candidateNames = Select-String -Path 'docs/UI_CLEANUP_INVENTORY_2026-09-13.md' -Pattern '^\| DELETE \|' | ForEach-Object { ($_ -split '\|')[2].Trim() } +foreach ($candidateName in $candidateNames) { + rg -n --fixed-strings $candidateName admin-web miniapp ui-tests docs + git ls-files -- "*$candidateName*" +} +``` + +Expected: 仅当运行代码、配置和测试均无引用时才保持 `DELETE`;否则改为 `KEEP/REFACTOR/REVIEW`。 + +- [ ] **Step 2: 分批显式删除并立即回归** + +本轮只执行 Task 2 与 Task 3 已列明的精确删除目标。其他无引用组件、样式或素材即使进入候选清单,也保持 `REVIEW`;需要新增精确路径并获得确认后,才能加入后续清理批次。 + +- [ ] **Step 3: 运行清理总门禁** + +```powershell +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 +npm --prefix admin-web run type-check +npm --prefix admin-web run build +npm --prefix miniapp run type-check +git diff --check +``` + +Expected: 全部通过;如旧视觉契约本身已被新规格废弃,应在 Task 2 中先删除或改写该契约,不能为通过测试保留错误设计。 + +- [ ] **Step 4: 写清理报告** + +报告必须包含:删除文件、保留文件及原因、待确认项、清理前后文件数、执行命令、测试结果、可恢复提交和未触及范围。 + +- [ ] **Step 5: 提交并暂停等待用户确认** + +```powershell +git add -- docs/UI_CLEANUP_INVENTORY_2026-09-13.md docs/UI_CLEANUP_REPORT_2026-09-13.md +git commit -m "chore: remove obsolete UI implementation" +``` + +Expected: 完成清理 Completion Report;不得自动进入管理端重构。 diff --git a/docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md b/docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md index 6eeb902..512142d 100644 --- a/docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md +++ b/docs/superpowers/specs/2026-09-13-reference-driven-dual-client-ui-redesign-design.md @@ -2,7 +2,7 @@ 日期:2026-09-13 -状态:待用户书面复核 +状态:用户已确认,可编写并执行实施计划 适用范围:管理端全局框架与工作台;小程序首批 11 个核心页面;旧 UI 代码与冲突文档治理