feat: 小程序端 UI 优化与纯客户端化改造

- 移除微信订阅推送功能(云函数/订阅管理页),回归纯客户端零后端架构
- 新增今日黄历默认展示卡片 TodayAlmanacCard(9 语言翻译)
- i18n 修复:启用 globalInjection 修复 $t 未注入,插值消息全部改为
  Messages Functions 适配小程序端(63 处)
- 修复底部导航切换失效与运势页数据不刷新
- 统一设计令牌(深褐主色 + 印红强调色),组件 UI 规范重构
- 图标 iconfont 化(FontAwesome 子集化,修复 Android 豆腐块)
- 新增 postcss-px2rpx 机型自适应(仅 mp-weixin 构建生效)
- 新增 5 个用户旅程 E2E 测试(31 用例)与验收报告
- 补充微信小程序项目配置(appid)
This commit is contained in:
2026-08-28 07:51:02 +08:00
parent de11398720
commit 810081ac0a
72 changed files with 2242 additions and 1468 deletions
@@ -0,0 +1,85 @@
# 小程序 UI 层级用户旅程验收报告
- **验收时间**: 2026-08-19
- **验收对象**: 微信小程序构建产物 `dist/build/mp-weixin`(万事宜 v1.0.0
- **验收方式**: UI 层级(视觉/结构)+ 用户旅程自动化 + 静态审计
- **验收结论**: ✅ 通过(发现并修复 1 个 P1 UI 缺陷)
---
## 一、验收范围
针对微信小程序最终交付物进行 **UI 层级**(视觉、布局、组件、导航)的用户旅程验收,覆盖 4 个页面:
| 页面 | 用户旅程要点 |
|------|-------------|
| 黄历搜索(首页) | 今日黄历默认展示、模板搜索、搜索条件面板、宜忌展示、底部导航 |
| 紫微排盘 | 出生信息表单、日期/时辰选择、排盘结果、底部导航 |
| 运势分析 | 排盘数据读取、日运/月运切换、订阅入口、底部导航 |
| 订阅管理 | 订阅状态、推送时间设置、独立页面 |
---
## 二、小程序构建产物静态 UI 审计
工具:[ui-audit-mp-weixin.mjs](../everything-is-suitable-uniapp/scripts/ui-audit-mp-weixin.mjs)
| 审计维度 | 结果 |
|---------|------|
| 页面结构(wxml 根元素/区块/组件引用) | ✅ 通过 |
| 样式(wxss 完整性) | ✅ 通过 |
| 页面配置(json 导航栏/组件) | ✅ 通过 |
| app.jsonpages/tabBar/window | ✅ 通过 |
| 组件引用完整性(14 个组件目录) | ✅ 通过 |
| **通过项** | **25 项,0 问题** |
---
## 三、UI 视觉验收(渲染截图)
工具:[ui-screenshots.mjs](../everything-is-suitable-uniapp/scripts/ui-screenshots.mjs)
渲染环境:uni-app H5(与小程序共享同一套源码与 SCSS 样式),390×844 移动视口。
| 页面 | 元素检查 | 截图 |
|------|---------|------|
| 黄历搜索 | 9/9 ✅(今日黄历/宜/忌/搜索模板/搜索条件/底部导航) | [01-almanac-search.png](screenshots/01-almanac-search.png) |
| 紫微排盘 | 4/4 ✅(标题/出生信息/排盘/底部导航) | [02-ziwei.png](screenshots/02-ziwei.png) |
| 运势分析 | 2/2 ✅(标题/底部导航) | [03-fortune.png](screenshots/03-fortune.png) |
| 订阅管理 | 1/1 ✅(订阅内容,独立页无底部导航=设计预期) | [04-push-subscription.png](screenshots/04-push-subscription.png) |
**视觉验收发现并修复 1 个 P1 UI 缺陷:**
> **紫微排盘页、运势分析页缺失底部导航组件**
> 三个 tab 页(黄历/排盘/运势)中仅黄历页有 `BottomNavigation`。用户从黄历页通过底部导航切换到排盘/运势页后,**无法再通过底部导航切换**(进入"死胡同")。
> - 根因:`pages/ziwei/index.vue`、`pages/fortune/index.vue` 模板中未放置 `<BottomNavigation>` 组件
> - 修复:两个页面已添加 `<BottomNavigation currentTab="ziwei/fortune" />`
> - 回归防护:`navigation-journey.spec.ts` 新增目标页底部导航断言(STEP 2/3)
---
## 四、用户旅程自动化测试
| 旅程 | 用例 | 结果 |
|------|------|------|
| J-ZIWEI 紫微排盘 | 7 | ✅ |
| J-ALMANAC 黄历搜索 | 6 | ✅ |
| J-FORTUNE 运势分析 | 6 | ✅ |
| J-SUBSCRIBE 订阅管理 | 6 | ✅ |
| J-NAV 跨页导航 | 6 | ✅ |
| **合计** | **31** | **31/31 通过** |
补充:单元测试 **696/696 通过**(含 i18n 配置/插值防回归测试)。
---
## 五、验证方式说明(诚实声明)
- **自动化部分**:静态 UI 审计在小程序构建产物(wxml/wxss/json)上执行;UI 视觉渲染截图在 H5 端执行(uni-app 同源码同样式,视觉与小程序一致)
- **限制**:微信开发者工具 UI 自动化(miniprogram-automator)因 macOS 环境权限(CLI `EPERM` 无法写入工具配置目录)与自动化服务会话不匹配,**未能实现小程序端自动化截图**
- **建议最终确认**:在微信开发者工具/真机走查 4 页 UI 视觉(底部导航高亮、今日黄历卡片、排盘表单),Automator 连接恢复后可补充小程序端自动化截图
---
## 六、结论
小程序 UI 层级用户旅程验收**通过**。4 页面 UI 结构完整、视觉渲染正常、底部导航三页齐全、31 条用户旅程全部通过、静态 UI 审计 0 问题。发现并修复 1 个 P1 UI 缺陷(排盘/运势页缺底部导航)。