danyang-match/docs/superpowers/specs/2026-09-11-dual-client-full-ui-redesign-design.md

善缘丹阳 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 功能；
• 不新增参考图和现行需求之外的业务；
• 不重写后端或数据库；
• 不迁移前端框架；
• 不引入微服务或额外基础设施；
• 不为追求截图相似度牺牲隐私、安全、权限或真实数据流。