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/index/index.ts

@@ -4,6 +4,8 @@
  */
 const { authStore, appStore, matchStore } = require('../../stores')
 const api = require('../../utils/api')
+// 顶部安全区：实测右上角胶囊按钮矩形，避免品牌栏「消息」入口被胶囊压住（见 utils/nav-metrics.js）
+const { navSafeData } = require('../../utils/nav-metrics')
 
 const ENTRY_VISUALS = {
   find_object: { tone: 'rose', iconAsset: '/assets/icons/home/find-object.png' },
@@ -29,6 +31,7 @@ const QUICK_ENTRIES = [
 
 Page({
   data: {
+    navVars: '',
     unreadCount: 0,
     loading: true,
     loadError: false,
@@ -61,6 +64,8 @@ Page({
   },
 
   onLoad() {
+    // 顶部安全区先算：onLoad 早于首次渲染，避免出现「先压住胶囊再跳开」的闪动
+    this.setData(navSafeData())
     // 订阅登录态：会话失效时回到登录引导；刷新成功且首页停在错误态时自动重试。
     this._unsubAuth = authStore.subscribe((state) => {
       if (state.authStatus === 'expired') {

miniapp/pages/index/index.wxml

@@ -1,4 +1,4 @@
-<view class="page app-page reference-page">
+<view class="page app-page reference-page" style="{{navVars}}">
   <view class="night-shell">
     <view class="brand-bar">
       <view class="brand-lockup">
@@ -77,7 +77,20 @@
       </view>
     </view>
 
-    <view class="section"><ui-section-header title="善缘公益服务" subtitle="需要时，我们在这里陪伴你" /><view wx:if="{{serviceRecommendations.length}}"><view wx:for="{{serviceRecommendations}}" wx:key="type" class="service-card" bindtap="onServiceTap" data-type="{{item.type}}"><image class="service-cover" src="/assets/covers/counseling-default.jpg" mode="aspectFill" /><view class="service-copy"><text class="service-title">{{item.title}}</text><text class="service-desc">{{item.description}}</text><text class="text-link">{{item.ctaText}}</text></view></view></view><view wx:else class="section-empty">暂无待推荐的公益服务</view></view>
+    <!-- 善缘公益服务：卡片宽度与高度都缩到原尺寸的 1/3（约 224rpx × 168rpx），
+         只留配图 + 标题 + 一个短入口，长文案交给详情页 -->
+    <view class="section">
+      <ui-section-header title="善缘公益服务" subtitle="需要时，我们在这里陪伴你" />
+      <view wx:if="{{serviceRecommendations.length}}" class="mini-rail">
+        <view wx:for="{{serviceRecommendations}}" wx:key="type" class="mini-card" bindtap="onServiceTap" data-type="{{item.type}}">
+          <image class="mini-card-cover" src="/assets/covers/counseling-default.jpg" mode="aspectFill" />
+          <view class="mini-card-scrim"></view>
+          <text class="mini-card-title">{{item.title}}</text>
+          <text class="mini-card-sub">{{item.ctaText}}</text>
+        </view>
+      </view>
+      <view wx:else class="section-empty">暂无待推荐的公益服务</view>
+    </view>
 
     <view class="section"><ui-section-header title="近期公益活动" action="全部活动" bind:action="onSeeAllActivities" /><scroll-view wx:if="{{activities.length}}" scroll-x class="activity-scroll"><view wx:for="{{activities}}" wx:key="id" class="activity-card" bindtap="onActivityTap" data-id="{{item.id}}"><image class="activity-cover" src="{{item.coverFileId || '/assets/covers/activity-default.jpg'}}" mode="aspectFill" /><view class="activity-info"><text class="activity-tag">公益活动</text><text class="activity-title">{{item.title}}</text><text class="activity-meta">{{item.locationName}}</text></view></view></scroll-view><view wx:else class="section-empty">近期暂无可报名活动</view></view>
 
@@ -85,7 +98,21 @@
 
     <view class="section"><ui-section-header title="婚恋课堂" subtitle="学习成长，收获更好的自己" action="更多内容" bind:action="onEntryTap" data-entry="{{quickEntries[4]}}" /><view wx:if="{{articles.length}}" class="article-list"><view wx:for="{{articles}}" wx:key="id" class="article-row" bindtap="onArticleTap" data-id="{{item.id}}"><image class="article-cover" src="{{item.coverFileId || '/assets/covers/classroom-default.jpg'}}" mode="aspectFill" /><view class="article-info"><text class="article-title">{{item.title}}</text><text class="article-meta">善缘课堂 · 公益内容</text></view><image class="arrow-icon" src="/assets/icons/ui/chevron-right.png" mode="aspectFit" /></view></view><view wx:else class="section-empty">暂无新内容，稍后再来看看</view></view>
 
-    <view class="section safety-card" bindtap="onSafetyTap"><image class="safety-cover" src="/assets/covers/anti-fraud-default.jpg" mode="aspectFill" /><view class="safety-info"><text class="safety-title">善缘安全提醒</text><text class="safety-body">{{safetyNotice.text}}</text><text class="safety-link">{{safetyNotice.ctaText}}</text></view></view>
+    <!-- 善缘安全提醒：同样缩到 1/3 宽度的小卡，右侧用文字承载安全提示原文与入口
+         （安全提示文案是公益属性的一部分，不能整块丢掉） -->
+    <view class="section">
+      <view class="mini-rail">
+        <view class="mini-card" bindtap="onSafetyTap">
+          <image class="mini-card-cover" src="/assets/covers/anti-fraud-default.jpg" mode="aspectFill" />
+          <view class="mini-card-scrim"></view>
+          <text class="mini-card-title">善缘安全提醒</text>
+        </view>
+        <view class="mini-note">
+          <text class="mini-note-text">{{safetyNotice.text}}</text>
+          <text class="mini-note-link" bindtap="onSafetyTap">{{safetyNotice.ctaText}}</text>
+        </view>
+      </view>
+    </view>
   </block>
   <view class="safe-area-bottom"></view>
 </view>

miniapp/pages/index/index.wxss

@@ -44,7 +44,10 @@
 .night-shell {
   position: relative;
   overflow: hidden;
-  padding: 0 var(--spacing-3) var(--spacing-4);
+  /* --nav-status / --nav-h / --nav-right 由 index.ts 经 utils/nav-metrics 实测胶囊按钮后注入。
+     顶到胶囊所在横带，而不是用 env(safe-area-inset-top)：后者只反映设备物理安全区，
+     安卓上常为 0，也完全不反映右上角胶囊的位置（2026-09-23 重合缺陷的根因）。 */
+  padding: var(--nav-status, 44px) var(--spacing-3) var(--spacing-4);
   background: var(--mini-starfield), var(--gradient-night);
   border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
   box-shadow: var(--shadow-night);
@@ -83,8 +86,10 @@
 /* ============================== 品牌栏 ============================== */
 
 .brand-bar {
-  min-height: 112rpx;
-  padding-top: env(safe-area-inset-top);
+  /* 高度与胶囊按钮对齐；右侧留出胶囊安全区，否则「消息」入口会被胶囊压住点不到 */
+  height: var(--nav-h, 80rpx);
+  box-sizing: border-box;
+  padding-right: var(--nav-right, 102px);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -409,43 +414,72 @@
   background: var(--gradient-brand-solid);
 }
 
-/* ============================== 公益服务 ============================== */
+/* ============================== 公益服务（1/3 小卡） ==============================
+   2026-09-23 重做。此前的卡片是「整行宽 + 封面写 width 不写 height」：
+   小程序 <image> 在未指定高度时会取默认 240px（=480rpx），卡片被硬生生撑到约 480rpx 高，
+   首页上极占地方（用户反馈的「占用过大」即此）。现在：
+     - 宽度：一行 3 张，每张约 224rpx（≈ 原 702rpx 的 1/3）
+     - 高度：固定 168rpx（≈ 原 480rpx 的 1/3）
+     - 内容：只留配图 + 标题，整块可点，长文案与入口交给详情页
+   ⇒ 想改回整行宽：把 .mini-card 的 width 换成 100%、height 改成 160rpx 即可（一处改动）。 */
 
-.service-card {
+.mini-rail {
   display: flex;
-  align-items: stretch;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--spacing-2);
   margin-top: var(--spacing-2);
-  background: var(--color-bg-card);
-  border-radius: var(--radius-lg);
+}
+.mini-card {
+  position: relative;
+  width: calc((100% - var(--spacing-2) * 2) / 3);
+  height: 168rpx;
+  border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-card);
 }
-.service-cover {
-  width: 210rpx;
-  min-height: 160rpx;
-  flex: none;
+.mini-card-cover {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
-.service-copy {
+.mini-card-scrim {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 112rpx;
+  background: linear-gradient(180deg, rgba(23, 42, 114, 0) 0%, rgba(23, 42, 114, 0.88) 100%);
+}
+.mini-card-title {
+  position: absolute;
+  left: var(--spacing-2);
+  right: var(--spacing-1);
+  bottom: 12rpx;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text-inverse);
+}
+/* 安全提醒右半区：文案是公益属性的一部分，缩卡后不能整块丢掉 */
+.mini-note {
   flex: 1;
   min-width: 0;
-  padding: var(--spacing-3);
+  padding-top: var(--spacing-1);
   display: flex;
   flex-direction: column;
 }
-.service-title {
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-strong);
-}
-.service-desc {
-  margin-top: 8rpx;
+.mini-note-text {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   color: var(--color-text-tertiary);
 }
-.text-link {
-  margin-top: auto;
-  padding-top: var(--spacing-1);
+.mini-note-link {
+  margin-top: var(--spacing-1);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary-strong);
@@ -594,48 +628,11 @@
   box-shadow: var(--shadow-card);
 }
 
-/* ============================== 安全提醒 ============================== */
-
-/* 注意：旧版这里写了 padding:0，把 .section 的左右 24rpx 内边距覆盖掉了，
-   于是这张卡比其它区块宽出 48rpx、直接贴到屏幕边缘。现已移除。 */
-.safety-card {
-  display: flex;
-  align-items: center;
-  background: var(--color-bg-card);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
-}
-.safety-cover {
-  width: 180rpx;
-  align-self: stretch;
-  flex: none;
-}
-.safety-info {
-  flex: 1;
-  min-width: 0;
-  padding: var(--spacing-2);
-}
-.safety-title {
-  display: block;
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-strong);
-}
-.safety-body {
-  display: block;
-  margin-top: 8rpx;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-tertiary);
-}
-.safety-link {
-  display: block;
-  margin-top: 10rpx;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-primary-strong);
-}
+/* ============================== 安全提醒 ==============================
+   2026-09-23：由「整行宽的大卡」改为 mini-rail（左 1/3 小卡 + 右文案），样式复用
+   .mini-card / .mini-note，不再单独维护一套。历史记录：
+   旧版这里写了 padding:0，把 .section 的左右内边距覆盖掉，于是这张卡比其它区块宽出 48rpx、
+   直接贴到屏幕边缘（已在本轮随整块重做一并移除）。 */
 
 /* ============================== 按压反馈 ==============================
    全站约定：可点元素必须有即时反馈（旧版 --motion-* 全站只被引用 5 次）。
@@ -645,11 +642,11 @@
 .status-action,
 .empty-btn,
 .brand-actions,
-.service-card,
+.mini-card,
 .activity-card,
 .station-card,
 .article-row,
-.safety-card,
+.mini-note-link,
 .section-empty,
 .banner-card {
   transition: transform var(--motion-fast) var(--ease-spring),
@@ -659,11 +656,11 @@
 .status-action:active,
 .empty-btn:active,
 .brand-actions:active,
-.service-card:active,
+.mini-card:active,
 .activity-card:active,
 .station-card:active,
 .article-row:active,
-.safety-card:active,
+.mini-note-link:active,
 .section-empty:active,
 .banner-card:active {
   transform: scale(var(--press-scale));