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/components/nav-bar/index.js

@@ -2,30 +2,64 @@
  * NavBar 自定义导航栏（规范 §17）
  *
  * 用于非 tabBar 页面：返回按钮 + 标题 + 右侧操作 slot。
- * statusBarHeight / navBarHeight 由调用方 app.js 通过 wx.getSystemInfoSync 注入。
+ *
+ * 顶部几何（2026-09-23 修正）：
+ *   此前 statusBarHeight / navBarHeight 由调用方各自用 wx.getSystemInfoSync 估算
+ *   （`platform === 'android' ? 48 : 44`），**从未读取右上角胶囊按钮的真实位置**。
+ *   后果：导航行与胶囊不在同一水平带；右侧 slot 内容（如 chat 页的「⋯」）直接压在
+ *   胶囊下面点不到。现改为组件自己调 utils/nav-metrics 实测胶囊矩形：
+ *     - 导航行高度与胶囊垂直居中对齐；
+ *     - 标题居中且用 max-width 让开胶囊（左右对称，仍精确居中于屏幕）；
+ *     - 右侧 slot 内缩 --nav-right，整体落在胶囊左侧。
+ *   调用方传入的 statusBarHeight / navBarHeight 仅作为「拿不到胶囊信息」时的兜底，
+ *   不再作为唯一事实源（旧页面无需改动）。
+ *
  * 用法：
  *   <ui-nav-bar title="编辑资料" show-back bind:back="onBack" />
+ *   <ui-nav-bar title="聊天"><view slot="right">⋯</view></ui-nav-bar>
  */
+const { getNavMetrics } = require('../../utils/nav-metrics');
+
 Component({
   options: { addGlobalClass: true, multipleSlots: true },
   properties: {
     title: { type: String, value: '' },
     showBack: { type: Boolean, value: true },
-    statusBarHeight: { type: Number, value: 20 },
-    navBarHeight: { type: Number, value: 44 },
+    statusBarHeight: { type: Number, value: 0 },
+    navBarHeight: { type: Number, value: 0 },
     bg: { type: String, value: 'card' },     // card | transparent
   },
   data: {
     containerStyle: '',
+    navVars: '',
+  },
+  lifetimes: {
+    attached() {
+      this.applyNavMetrics();
+    },
   },
   observers: {
-    'statusBarHeight, navBarHeight'(s, n) {
-      this.setData({
-        containerStyle: `padding-top: ${s}px; height: ${s + n}px;`,
-      });
+    // 调用方 setData 后重算（旧页面习惯在 onLoad 里注入，可能晚于组件初次渲染）
+    'statusBarHeight, navBarHeight'() {
+      this.applyNavMetrics();
     },
   },
   methods: {
+    applyNavMetrics() {
+      const metrics = getNavMetrics();
+      const measured = metrics.source === 'capsule';
+      // 实测到胶囊时以实测为准；否则回落到调用方传入值，再回落到兜底值
+      const statusBar = measured
+        ? metrics.statusBarHeight
+        : (this.properties.statusBarHeight || metrics.statusBarHeight);
+      const navBar = measured
+        ? metrics.navBarHeight
+        : (this.properties.navBarHeight || metrics.navBarHeight);
+      this.setData({
+        containerStyle: `padding-top: ${statusBar}px; height: ${statusBar + navBar}px;`,
+        navVars: `--nav-h: ${navBar}px; --nav-right: ${metrics.reserve}px;`,
+      });
+    },
     onBack() {
       this.triggerEvent('back', {});
     },

miniapp/components/nav-bar/index.wxml

@@ -1,4 +1,4 @@
-<view class="ui-nav ui-nav--{{bg}}" style="{{containerStyle}}">
+<view class="ui-nav ui-nav--{{bg}}" style="{{containerStyle}} {{navVars}}">
   <view class="ui-nav__bar">
     <view wx:if="{{showBack}}" class="ui-nav__back" bindtap="onBack">
       <image class="ui-nav__back-icon" src="/assets/icons/ui/back.png" mode="aspectFit" />

miniapp/components/nav-bar/index.wxss

@@ -1,3 +1,4 @@
+/* --nav-h / --nav-right 由 index.js 实测胶囊按钮矩形后注入（见 utils/nav-metrics.js） */
 .ui-nav {
   position:sticky;
   top:0;
@@ -14,9 +15,11 @@
   background:transparent;
 }
 .ui-nav__bar {
+  position:relative;
   display:flex;
   align-items:center;
-  height:88rpx;
+  justify-content:space-between;
+  height:var(--nav-h, 88rpx);
   padding:0 var(--spacing-2);
 }
 .ui-nav__back,
@@ -32,8 +35,17 @@ min-width:var(--tap-min);}
   width:36rpx;
   height:36rpx;
 }
+/* 标题绝对居中：max-width 左右各让开一个胶囊安全区，因此
+   （1）文字精确居中于屏幕，不受返回键/右侧操作宽度影响；
+   （2）不会伸到胶囊下面；
+   （3）盒子只覆盖文字自身，不会挡住返回键与右侧 slot 的点击。 */
 .ui-nav__title {
-  flex:1;
+  position:absolute;
+  left:50%;
+  top:50%;
+  transform:translate(-50%, -50%);
+  max-width:calc(100% - 2 * var(--nav-right, 192rpx));
+  box-sizing:border-box;
   text-align:center;
   font-size:var(--font-size-lg);
   font-weight:var(--font-weight-semibold);
@@ -45,6 +57,8 @@ min-width:var(--tap-min);}
 .ui-nav__right {
   flex-shrink:0;
   min-width:64rpx;
+  /* 右侧操作整体左移到胶囊左侧，否则会被胶囊盖住点不到 */
+  padding-right:var(--nav-right, 0);
   display:flex;
   align-items:center;
   justify-content:flex-end;