danyang-match/docs/superpowers/plans/2026-09-10-ui-v11-fidelity.md

善缘丹阳 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: 输出可点击截图、访问地址、当前限制及用户需要审核的页面。