feat: deliver V1.1 dual-client UI fidelity milestone

docs/UI-V11-Visual-Acceptance-2026-09-10.md

@@ -0,0 +1,29 @@
+# 善缘丹阳 V1.1 双端 UI 可视验收记录
+
+日期：2026-09-10  
+分支：`codex/ui-v11-fidelity`
+
+## 本轮成果
+
+小程序端完成 U18 固定首页结构与 8 个固定入口；新增统一 ErrorState；补齐公益服务中心、善缘服务站、服务预约、我的预约、婚恋课堂、内容详情、婚恋反诈、专项公益服务、公益服务记录；U37“我的”改为文档规定的四组；U28 活动详情从占位页改为完整页面；U55 咨询与红娘分离；U58 移除高饱和婚庆式视觉。
+
+管理后台改为 220px 暖白侧栏、分组权限菜单和公益品牌视觉。工作台按资料审核、婚恋咨询、服务站等角色分别展示职责说明、今日待办与快捷入口，不再使用通用大盘。
+
+## 可视文件
+
+- 小程序首页：320、375、390、430px 响应式截图。
+- 管理后台：资料审核 1440×900、咨询人员 1366×768、服务站人员 1366×768 实际运行截图。
+- `miniapp-home-preview.html` 是未安装微信开发者工具时的同尺寸审查画布；实际代码位于 `miniapp/pages/`。
+
+## 验证
+
+- `node ui-tests/ui-contracts.mjs`：通过。
+- 新增和修改的小程序 JavaScript 语法检查：通过。
+- `npm run type-check --prefix miniapp`：通过。
+- `npm run type-check --prefix admin-web`：通过。
+- `npm run build --prefix admin-web`：通过，成功构建 1725 个模块。
+- `git diff --check`：通过，仅有 LF/CRLF 提示。
+
+## 尚需继续
+
+本机未检测到微信开发者工具，小程序需补模拟器/真机截图。管理后台二级业务页，以及小程序找对象、消息、聊天、活动列表、用户详情、红娘页，下一轮继续逐页精修；本记录不把这些页面声明为已完成。

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

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

docs/superpowers/specs/2026-09-10-ui-v11-fidelity-design.md

@@ -0,0 +1,35 @@
+# 善缘丹阳 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/陌生人私信等被禁止功能，也不扩展两份文档之外的页面模块。