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