fix(miniapp): 修复导航页与微信胶囊重合，并把首页两个栏目卡缩到 1/3

问题 1：五个导航页顶部与右上角胶囊按钮（··· ⊙）重合
- 根因：自定义导航用 env(safe-area-inset-top) 取的是设备物理安全区，
  在 Android 上常为 0，完全不反映胶囊位置；且右对齐元素从未为胶囊让出宽度。
- 新增 miniapp/utils/nav-metrics.js 作为唯一事实源：以
  wx.getMenuButtonBoundingClientRect() 实测胶囊矩形，反推并导出四个 CSS 变量
  --nav-status / --nav-h / --nav-right / --nav-top，并提供无接口时的兜底值。
- nav-bar 组件改为自行获取导航度量（attached + observer 双触发），
  标题按胶囊垂直居中并收窄 max-width；外部传参降级为兜底。
- index / discover / messages / activity / mine 五页根结点注入同一组变量，
  WXSS 里的 env(safe-area-inset-top)、硬编码 88rpx 与右对齐 right:0 全量替换。

问题 2：首页「善缘公益服务」「善缘安全提醒」两个栏目过宽
- 根因：封面 <image> 只声明 width 未声明 height，小程序默认按 240px 计算，
  实际把卡片撑到约 480rpx 高。
- 按「整体等比缩到 1/3」重构：两栏改为 mini-card 小卡，宽度
  calc((100% - 2*gap)/3)、高度写死 168rpx，封面 height:100%；
  公益服务一行三卡横向排布，安全提醒为「标题小卡 + 右侧文案条」，
  长文案收进详情页，安全提示原文保留。

守卫与验证
- 新增 ui-tests/miniapp-capsule-safe-contracts.mjs：
  A 层多机型断言导航行与胶囊垂直居中、右对齐让位、navTop 与兜底值；
  B 层纯函数审计五个自带导航行页面（页面清单由文件系统推导，失配直接报红）；
  C 层断言首页小卡宽为 1/3 且显式声明高度，并钉住旧 service-/safety- 选择器回归。
  审计前剥离注释，避免守卫被自身示例文本误伤。
- 新增 scripts/audit-image-height.mjs：按属性名精确比对，审计全仓
  「有 width 无 height」的 <image>，当前 30 个类 0 命中。
- 负向注入 N1~N7（含 nav-safe 未接入、旧选择器回归、极小屏幕、无胶囊兜底等）
  全部被守卫咬住并 exit 1，还原后复跑通过。
- 真编译（wcc/wcsc）：WXSS 88 / WXML 86，失败 0；
  tsc --noEmit 通过；UI 契约门控 21/21 PASS（新增第 21 个守卫并抬高 MIN_GUARDS）。
- 渲染探针实测：单卡 213rpx x 168rpx；五页右对齐元素右缘 423~528px，
  均在胶囊右缘 365px 之外。

未纳入本次提交：miniapp/project.config.json（微信开发者工具自动改写，
仅追加若干布尔开关并删掉文件末换行）与生成的预览页 artifacts preview.html
（约 7900 行生成产物），以免淹没代码评审视线。

miniapp/pages/messages/messages.ts

@@ -9,9 +9,13 @@
  */
 import { messageStore, appStore, authStore } from '../../stores';
 import { ROUTE, to } from '../../constants';
+// 顶部安全区：实测右上角胶囊按钮矩形，避免快捷入口与搜索图标被胶囊压住（见 utils/nav-metrics.js）
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { navSafeData } = require('../../utils/nav-metrics');
 
 Page({
   data: {
+    navVars: '',
     conversations: [] as any[],
     loading: false,
     unreadTotal: 0,
@@ -19,6 +23,8 @@ Page({
   },
 
   onLoad() {
+    // 顶部安全区先算：onLoad 早于首次渲染，避免出现「先压住胶囊再跳开」的闪动
+    this.setData(navSafeData());
     (this as any)._unsubMsg = messageStore.bindToPage(this, {
       conversations: 'conversations',
       totalUnreadCount: 'unreadTotal',

miniapp/pages/messages/messages.wxml

@@ -1,5 +1,5 @@
 <!-- 消息列表页：仅服务端允许的 Mutual Match 会话可进入聊天 -->
-<view class="page app-page reference-page">
+<view class="page app-page reference-page" style="{{navVars}}">
   <view class="messages-hero">
     <view class="messages-nav">
       <text class="messages-title">消息</text>

miniapp/pages/messages/messages.wxss

@@ -3,8 +3,9 @@
   background:var(--color-bg-page);
 }
 
+/* --nav-status / --nav-h / --nav-right 由 messages.ts 经 utils/nav-metrics 实测胶囊按钮后注入 */
 .messages-hero {
-  padding:env(safe-area-inset-top) 24rpx 34rpx;
+  padding:var(--nav-status, 44px) 24rpx 34rpx;
   border-radius:0 0 36rpx 36rpx;
   background:linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
   box-shadow:var(--mini-shadow);
@@ -15,7 +16,7 @@
   display:flex;
   align-items:center;
   justify-content:center;
-  height:88rpx;
+  height:var(--nav-h, 80rpx);
 }
 
 .messages-title {
@@ -24,9 +25,10 @@
   font-weight:700;
 }
 
+/* 胶囊安全区：右对齐图标必须整体左移到胶囊左侧，否则被胶囊盖住点不到 */
 .messages-search {
   position:absolute;
-  right:14rpx;
+  right:var(--nav-right, 102px);
   width:34rpx;
   height:34rpx;
 }