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;

miniapp/pages/activity/activity.ts

@@ -10,6 +10,9 @@
  */
 import { activityStore, appStore, authStore } from '../../stores';
 import { to } from '../../constants';
+// 顶部安全区：实测右上角胶囊按钮矩形，避免分类胶囊与日历入口被胶囊压住（见 utils/nav-metrics.js）
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { navSafeData } = require('../../utils/nav-metrics');
 
 interface ActivityCategory {
   code: string;
@@ -46,6 +49,7 @@ interface ActivityPageData {
 
 Page({
   data: {
+    navVars: '',
     activities: [] as ActivityListItem[],
     loading: false,
     loadingMore: false,
@@ -84,6 +88,8 @@ Page({
   } as ActivityPageData,
 
   onLoad() {
+    // 顶部安全区先算：onLoad 早于首次渲染，避免出现「先压住胶囊再跳开」的闪动
+    this.setData(navSafeData());
     if (!authStore.state.isLoggedIn) return;
     (this as any)._unsub = activityStore.bindToPage(this, {
       activities: 'activities',

miniapp/pages/activity/activity.wxml

@@ -1,5 +1,5 @@
 <!-- 公益活动列表页：仅展示与报名，不在列表创建 Match 或聊天 -->
-<view class="act-page app-page reference-page">
+<view class="act-page app-page reference-page" style="{{navVars}}">
   <view class="activity-hero">
     <view class="activity-nav">
       <text class="activity-title">公益活动</text>

miniapp/pages/activity/activity.wxss

@@ -1 +1,2 @@
-.act-page{min-height:100vh;padding-bottom:40rpx;background:var(--color-bg-page)}.activity-hero{padding:env(safe-area-inset-top) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx}.activity-title{color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}.activity-category.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:var(--color-text-strong);font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.my-activity-link{color:var(--color-primary-strong);font-size:24rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:var(--color-text-tertiary);font-size:24rpx}.act-empty{padding-top:70rpx}
+/* --nav-status / --nav-h / --nav-right 由 activity.ts 经 utils/nav-metrics 实测胶囊按钮后注入 */
+.act-page{min-height:100vh;padding-bottom:40rpx;background:var(--color-bg-page)}.activity-hero{padding:var(--nav-status, 44px) 24rpx 26rpx;border-radius:0 0 36rpx 36rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.activity-nav{position:relative;display:flex;align-items:center;justify-content:center;height:var(--nav-h, 80rpx)}.activity-title{color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.activity-calendar{position:absolute;right:var(--nav-right, 102px);display:flex;align-items:center;justify-content:center;width:62rpx;height:62rpx;border:1rpx solid rgba(255,255,255,.18);border-radius:31rpx;background:rgba(255,255,255,.1)}.activity-calendar image{width:34rpx;height:34rpx;filter:brightness(0) invert(1)}.activity-categories{white-space:nowrap}.activity-category-row{display:inline-flex;gap:12rpx}.activity-category{padding:11rpx 22rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}.activity-category.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}.activity-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:32rpx 28rpx 16rpx}.activity-heading>view{display:flex;flex-direction:column}.heading-title{color:var(--color-text-strong);font-size:30rpx;font-weight:700}.heading-subtitle{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.my-activity-link{color:var(--color-primary-strong);font-size:24rpx}.act-loading{padding:12rpx 24rpx}.act-list{display:flex;flex-direction:column;gap:20rpx;padding:8rpx 24rpx 0}.act-list__more{display:flex;justify-content:center;padding:24rpx 0}.act-list__end{text-align:center;padding:24rpx 0;color:var(--color-text-tertiary);font-size:24rpx}.act-empty{padding-top:70rpx}

miniapp/pages/discover/discover.ts

@@ -14,6 +14,9 @@ import { recommendationService } from '../../services';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { to } from '../../constants';
 import type { RecommendationCandidate } from '../../types';
+// 顶部安全区：实测右上角胶囊按钮矩形，避免筛选条与搜索图标被胶囊压住（见 utils/nav-metrics.js）
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { navSafeData } = require('../../utils/nav-metrics');
 
 interface AppliedFilter {
   keyword: string;
@@ -55,6 +58,7 @@ const PAGE_SIZE = 20;
 
 Page({
   data: {
+    navVars: '',
     users: [],
     loading: false,
     loadingMore: false,
@@ -97,6 +101,8 @@ Page({
   } as DiscoverData,
 
   onLoad() {
+    // 顶部安全区先算：onLoad 早于首次渲染，避免出现「先压住胶囊再跳开」的闪动
+    this.setData(navSafeData());
     if (!authStore.state.isLoggedIn) return;
     this.fetchDiscover(true);
   },

miniapp/pages/discover/discover.wxml

@@ -1,4 +1,4 @@
-<view class="page app-page reference-page">
+<view class="page app-page reference-page" style="{{navVars}}">
   <view class="discover-hero">
     <view class="discover-nav">
       <text class="nav-title">找对象</text>

miniapp/pages/discover/discover.wxss

@@ -1,8 +1,9 @@
 .page{min-height:100vh;background:var(--color-bg-page)}
-.discover-hero{padding:env(safe-area-inset-top) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow);position:relative;z-index:1}
-.discover-nav{height:88rpx;display:flex;align-items:center;justify-content:center;position:relative;color:var(--color-text-inverse)}
+/* --nav-status / --nav-h / --nav-right 由 discover.ts 经 utils/nav-metrics 实测胶囊按钮后注入 */
+.discover-hero{padding:var(--nav-status, 44px) 24rpx 24rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));border-radius:0 0 34rpx 34rpx;box-shadow:var(--mini-shadow);position:relative;z-index:1}
+.discover-nav{height:var(--nav-h, 80rpx);display:flex;align-items:center;justify-content:center;position:relative;color:var(--color-text-inverse)}
 .nav-title{font-size:31rpx;font-weight:700}
-.nav-search{position:absolute;right:0;width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}
+.nav-search{position:absolute;right:var(--nav-right, 102px);width:64rpx;height:64rpx;display:flex;align-items:center;justify-content:center;border:1rpx solid rgba(255,255,255,.18);border-radius:32rpx;background:rgba(255,255,255,.08)}
 .nav-search image{width:38rpx;height:38rpx;filter:brightness(0) invert(1)}
 .search-bar{display:flex;align-items:center}
 .search-input{height:70rpx;flex:1;display:flex;align-items:center;padding:0 20rpx;border-radius:35rpx;background:rgba(255,255,255,.12);border:1rpx solid rgba(255,255,255,.14)}

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));

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;
 }

miniapp/pages/mine/mine.ts

@@ -8,6 +8,9 @@
  */
 import { userStore, authStore, matchStore, appStore } from '../../stores';
 import { ROUTE, DANGER_ACTION, RELATIONSHIP_STATUS, PROFILE_REVIEW } from '../../constants';
+// 顶部安全区：实测右上角胶囊按钮矩形，避免「编辑资料」与设置入口被胶囊压住（见 utils/nav-metrics.js）
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { navSafeData } = require('../../utils/nav-metrics');
 
 const RELATIONSHIP_TEXT: Record<string, string> = {
   [RELATIONSHIP_STATUS.SEARCHING]: '正在寻找',
@@ -19,6 +22,7 @@ const RELATIONSHIP_TEXT: Record<string, string> = {
 
 Page({
   data: {
+    navVars: '',
     isLoggedIn: false,
     profile: null as any,
     userState: null as any,
@@ -40,6 +44,8 @@ Page({
   },
 
   onLoad() {
+    // 顶部安全区先算：onLoad 早于首次渲染，避免出现「先压住胶囊再跳开」的闪动
+    this.setData(navSafeData());
     (this as any)._unsubUser = userStore.subscribe((state: any) => this._syncFromUserStore(state));
     this._syncFromUserStore(userStore.state);
     (this as any)._unsubMatch = matchStore.subscribe((state: any) => {

miniapp/pages/mine/mine.wxml

@@ -1,4 +1,4 @@
-<view class="page app-page reference-page">
+<view class="page app-page reference-page" style="{{navVars}}">
   <view wx:if="{{!isLoggedIn}}" class="mine-guest">
     <view class="guest-brand"><image src="/assets/brand/logo-mark.png" mode="aspectFit" /><text>善缘丹阳</text><text class="guest-subtitle">公益婚恋服务平台</text></view>
     <ui-empty illustration="default" title="登录后查看我的服务" description="管理资料、缘分与公益服务记录" actions="{{loginActions}}" bind:action="onLoginAction" />

miniapp/pages/mine/mine.wxss

@@ -1 +1,2 @@
-.page{min-height:100vh;padding-bottom:48rpx;background:var(--color-bg-page)}.mine-guest{min-height:100vh;background:linear-gradient(160deg,var(--mini-night-start) 0,var(--mini-night-end) 34%,var(--color-bg-page) 34%)}.guest-brand{display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 70rpx) 0 80rpx;color:var(--color-text-inverse)}.guest-brand image{width:92rpx;height:92rpx}.guest-brand>text{margin-top:12rpx;font-size:34rpx;font-weight:700}.guest-brand .guest-subtitle{margin-top:5rpx;color:rgba(255,255,255,.72);font-size:24rpx;font-weight:400;letter-spacing:4rpx}.profile-hero{padding:env(safe-area-inset-top) 24rpx 54rpx;border-radius:0 0 42rpx 42rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.mine-nav{position:relative;display:flex;align-items:center;justify-content:center;height:88rpx;color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.mine-nav image{position:absolute;right:12rpx;width:36rpx;height:36rpx;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:20rpx;color:var(--color-text-inverse)}.profile-name-row{display:flex;align-items:center;gap:12rpx}.profile-name{font-size:31rpx;font-weight:700}.profile-status{padding:5rpx 10rpx;border-radius:15rpx;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:24rpx}.profile-meta{display:block;margin-top:8rpx;color:rgba(255,255,255,.72);font-size:24rpx}.profile-progress{width:78%;height:7rpx;margin:10rpx 0 13rpx;overflow:hidden;border-radius:8rpx;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:8rpx;background:linear-gradient(90deg,var(--color-primary-light),var(--color-primary-light))}.profile-badges{display:flex;gap:8rpx}.edit-profile{position:absolute;right:0;top:4rpx;color:rgba(255,255,255,.82);font-size:24rpx}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-24rpx 24rpx 0;padding:24rpx 8rpx;border-radius:28rpx;background:var(--color-bg-card);box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:1rpx solid var(--color-divider)}.profile-stat:last-child{border-right:0}.stat-value{color:var(--color-text-strong);font-size:29rpx;font-weight:700}.stat-value--text{font-size:24rpx}.stat-label{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.public-identity-card{display:flex;align-items:center;margin:24rpx;padding:22rpx;border-radius:26rpx;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-purple-light));box-shadow:0 8rpx 26rpx rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:72rpx;height:72rpx}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:16rpx}.identity-title{color:var(--color-primary-strong);font-size:26rpx;font-weight:700}.identity-desc{margin-top:5rpx;color:var(--color-accent-purple-strong);font-size:24rpx}.public-identity-card .identity-arrow{width:26rpx;height:26rpx}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 24rpx 28rpx;padding:24rpx 8rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:var(--color-text-strong);font-size:24rpx}.service-icon{display:flex;align-items:center;justify-content:center;width:64rpx;height:64rpx;margin-bottom:10rpx;border-radius:20rpx}.service-icon image{width:42rpx;height:42rpx}.service-icon.rose{background:var(--color-primary-light)}.service-icon.blue{background:var(--color-info-light)}.service-icon.amber{background:var(--color-warning-light)}.service-icon.green{background:var(--color-success-light)}.list-group{overflow:hidden;margin:0 24rpx 22rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:88rpx;padding:0 24rpx;border-bottom:1rpx solid var(--color-divider)}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:var(--color-text-strong);font-size:24rpx}.list-value{margin-right:12rpx;color:var(--color-text-tertiary);font-size:24rpx}.list-arrow{width:24rpx;height:24rpx}.secondary-list{margin-top:0}.logout-row{margin:26rpx 24rpx 0;padding:24rpx;text-align:center;color:var(--color-danger-strong);font-size:24rpx;background:var(--color-bg-card);border-radius:26rpx}
+.page{min-height:100vh;padding-bottom:48rpx;background:var(--color-bg-page)}.mine-guest{min-height:100vh;background:linear-gradient(160deg,var(--mini-night-start) 0,var(--mini-night-end) 34%,var(--color-bg-page) 34%)}.guest-brand{display:flex;flex-direction:column;align-items:center;padding:calc(var(--nav-top, 84px) + 70rpx) 0 80rpx;color:var(--color-text-inverse)}.guest-brand image{width:92rpx;height:92rpx}.guest-brand>text{margin-top:12rpx;font-size:34rpx;font-weight:700}.guest-brand .guest-subtitle{margin-top:5rpx;color:rgba(255,255,255,.72);font-size:24rpx;font-weight:400;letter-spacing:4rpx}/* --nav-status / --nav-h / --nav-right 由 mine.ts 经 utils/nav-metrics 实测胶囊按钮后注入 */
+.profile-hero{padding:var(--nav-status, 44px) 24rpx 54rpx;border-radius:0 0 42rpx 42rpx;background:linear-gradient(160deg,var(--mini-night-start),var(--mini-night-end));box-shadow:var(--mini-shadow)}.mine-nav{position:relative;display:flex;align-items:center;justify-content:center;height:var(--nav-h, 80rpx);color:var(--color-text-inverse);font-size:31rpx;font-weight:700}.mine-nav image{position:absolute;right:var(--nav-right, 102px);width:36rpx;height:36rpx;filter:brightness(0) invert(1)}.profile-main{position:relative;display:flex;align-items:center}.profile-copy{flex:1;min-width:0;margin-left:20rpx;color:var(--color-text-inverse)}.profile-name-row{display:flex;align-items:center;gap:12rpx}.profile-name{font-size:31rpx;font-weight:700}.profile-status{padding:5rpx 10rpx;border-radius:15rpx;background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:24rpx}.profile-meta{display:block;margin-top:8rpx;color:rgba(255,255,255,.72);font-size:24rpx}.profile-progress{width:78%;height:7rpx;margin:10rpx 0 13rpx;overflow:hidden;border-radius:8rpx;background:rgba(255,255,255,.14)}.profile-progress view{height:100%;border-radius:8rpx;background:linear-gradient(90deg,var(--color-primary-light),var(--color-primary-light))}.profile-badges{display:flex;gap:8rpx}.edit-profile{position:absolute;right:0;top:4rpx;color:rgba(255,255,255,.82);font-size:24rpx}.profile-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-24rpx 24rpx 0;padding:24rpx 8rpx;border-radius:28rpx;background:var(--color-bg-card);box-shadow:var(--mini-shadow)}.profile-stat{display:flex;flex-direction:column;align-items:center;border-right:1rpx solid var(--color-divider)}.profile-stat:last-child{border-right:0}.stat-value{color:var(--color-text-strong);font-size:29rpx;font-weight:700}.stat-value--text{font-size:24rpx}.stat-label{margin-top:5rpx;color:var(--color-text-tertiary);font-size:24rpx}.public-identity-card{display:flex;align-items:center;margin:24rpx;padding:22rpx;border-radius:26rpx;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent-purple-light));box-shadow:0 8rpx 26rpx rgba(87,62,145,.08)}.public-identity-card>image:first-child{width:72rpx;height:72rpx}.public-identity-card>view{flex:1;display:flex;flex-direction:column;margin-left:16rpx}.identity-title{color:var(--color-primary-strong);font-size:26rpx;font-weight:700}.identity-desc{margin-top:5rpx;color:var(--color-accent-purple-strong);font-size:24rpx}.public-identity-card .identity-arrow{width:26rpx;height:26rpx}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 24rpx 28rpx;padding:24rpx 8rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.07)}.service-entry{display:flex;flex-direction:column;align-items:center;color:var(--color-text-strong);font-size:24rpx}.service-icon{display:flex;align-items:center;justify-content:center;width:64rpx;height:64rpx;margin-bottom:10rpx;border-radius:20rpx}.service-icon image{width:42rpx;height:42rpx}.service-icon.rose{background:var(--color-primary-light)}.service-icon.blue{background:var(--color-info-light)}.service-icon.amber{background:var(--color-warning-light)}.service-icon.green{background:var(--color-success-light)}.list-group{overflow:hidden;margin:0 24rpx 22rpx;border-radius:26rpx;background:var(--color-bg-card);box-shadow:0 8rpx 28rpx rgba(35,35,95,.06)}.list-row{display:flex;align-items:center;min-height:88rpx;padding:0 24rpx;border-bottom:1rpx solid var(--color-divider)}.list-row:last-child{border-bottom:0}.list-label{flex:1;color:var(--color-text-strong);font-size:24rpx}.list-value{margin-right:12rpx;color:var(--color-text-tertiary);font-size:24rpx}.list-arrow{width:24rpx;height:24rpx}.secondary-list{margin-top:0}.logout-row{margin:26rpx 24rpx 0;padding:24rpx;text-align:center;color:var(--color-danger-strong);font-size:24rpx;background:var(--color-bg-card);border-radius:26rpx}

miniapp/utils/nav-metrics.js

@@ -0,0 +1,159 @@
+/**
+ * 顶部安全区几何（状态栏 + 右上角胶囊按钮）——全站唯一事实源
+ *
+ * 为什么需要它（2026-09-23 真实缺陷）：
+ *   五个自定义导航页（index / discover / messages / activity / mine）此前用
+ *   `padding-top: env(safe-area-inset-top)` 顶开状态栏。这个值在微信里**只反映设备的
+ *   物理安全区**（刘海/挖孔），且安卓上常为 0，更关键的是它**完全不反映右上角胶囊按钮
+ *   （「••• ⊙」）的位置**。于是出现两类重合：
+ *     ① 竖向：导航行落在胶囊所在的横带里（消息页四个快捷入口、活动页分类胶囊被压住）；
+ *     ② 横向：右对齐元素（首页「消息」、找对象页搜索、活动页日历、我的页「编辑资料」、
+ *        聊天页「⋯」）直接压在胶囊下面，点不到。
+ *   正确做法是用 `wx.getMenuButtonBoundingClientRect()` 实测胶囊矩形，反推：
+ *     - navBarHeight：与胶囊同高并垂直居中的导航行高度 = 胶囊高 + 上下间距 ×2
+ *     - reserve     ：屏幕右边缘到胶囊左边缘的距离 + 余量，即右对齐元素必须让出的宽度
+ *     - navTop      ：状态栏 + 导航行高度，即页面内容「可以开始」的 y 坐标
+ *
+ * 用法（页面）：
+ *   const { navSafeData } = require('../../utils/nav-metrics')
+ *   Page({ data: { navVars: '' }, onLoad() { this.setData(navSafeData()) } })
+ *   <view class="page" style="{{navVars}}">     <!-- wxss 里用 var(--nav-top) 等 -->
+ *
+ * 单位一律 px（inline style 与 rpx 混用会算错），rpx 换算交给 wxss 侧的 var()。
+ */
+
+/** 胶囊左侧再留出的余量，避免右对齐文字与胶囊贴边（px） */
+var CAPSULE_GAP_PX = 8;
+/** 导航行高度合理区间：过小会压字，过大会把内容推太远（px） */
+var MIN_NAV_BAR_HEIGHT = 40;
+var MAX_NAV_BAR_HEIGHT = 56;
+/** 拿不到胶囊信息时的兜底（按带刘海的 iPhone 取，宁可多留不可少留） */
+var FALLBACK = {
+  windowWidth: 375,
+  statusBarHeight: 20,
+  navBarHeight: 44,
+  reserve: 102,
+  navTop: 64,
+};
+
+var cache = null;
+
+function toPositiveNumber(value, fallback) {
+  var n = Number(value);
+  if (!isFinite(n) || n <= 0) return fallback;
+  return n;
+}
+
+function clamp(value, min, max) {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
+/**
+ * 纯函数：只做几何计算，不碰 wx。便于在 Node 侧用多机型样本做断言。
+ * @param {{windowWidth?:number, statusBarHeight?:number, capsule?:{top:number,left:number,width:number,height:number,right?:number}}} input
+ */
+function computeNavMetrics(input) {
+  var source = input || {};
+  var windowWidth = toPositiveNumber(source.windowWidth, FALLBACK.windowWidth);
+  var statusBarHeight = toPositiveNumber(source.statusBarHeight, FALLBACK.statusBarHeight);
+  var capsule = source.capsule;
+  var hasCapsule = !!(capsule && Number(capsule.width) > 0 && Number(capsule.height) > 0);
+  var navBarHeight = FALLBACK.navBarHeight;
+  var reserve = FALLBACK.reserve;
+  if (hasCapsule) {
+    // 胶囊在状态栏下方通常还有一点间距，导航行取「胶囊高 + 上下对称间距」，视觉上正好居中对齐
+    var gap = Math.max(Number(capsule.top || 0) - statusBarHeight, 0);
+    navBarHeight = clamp(
+      Number(capsule.height) + gap * 2,
+      MIN_NAV_BAR_HEIGHT,
+      MAX_NAV_BAR_HEIGHT,
+    );
+    // 右对齐元素要整体避开胶囊：从右边缘到胶囊左边 + 余量，且不超过半屏（避免极端机型把内容挤没）
+    reserve = clamp(windowWidth - Number(capsule.left || 0) + CAPSULE_GAP_PX, 0, windowWidth * 0.5);
+  }
+  navBarHeight = Math.round(navBarHeight);
+  reserve = Math.round(reserve);
+  return {
+    windowWidth: windowWidth,
+    statusBarHeight: Math.round(statusBarHeight),
+    navBarHeight: navBarHeight,
+    reserve: reserve,
+    navTop: Math.round(statusBarHeight) + navBarHeight,
+    source: hasCapsule ? 'capsule' : 'fallback',
+  };
+}
+
+function readWindowInfo() {
+  try {
+    if (typeof wx !== 'undefined' && typeof wx.getWindowInfo === 'function') {
+      return wx.getWindowInfo() || {};
+    }
+  } catch (e) { /* 低版本基础库无此接口 */ }
+  try {
+    if (typeof wx !== 'undefined' && typeof wx.getSystemInfoSync === 'function') {
+      return wx.getSystemInfoSync() || {};
+    }
+  } catch (e) { /* 接口异常时走兜底 */ }
+  return {};
+}
+
+function readCapsuleRect() {
+  try {
+    if (typeof wx !== 'undefined' && typeof wx.getMenuButtonBoundingClientRect === 'function') {
+      return wx.getMenuButtonBoundingClientRect();
+    }
+  } catch (e) { /* 同上 */ }
+  return null;
+}
+
+/**
+ * 带缓存的取值：同一进程内胶囊几何不会变，避免每页 onLoad 重复调用系统接口。
+ * @param {boolean} [force] 强制重新读取（机型/窗口变化时可用）
+ */
+function getNavMetrics(force) {
+  if (cache && !force) return cache;
+  var win = readWindowInfo();
+  cache = computeNavMetrics({
+    windowWidth: win.windowWidth,
+    statusBarHeight: win.statusBarHeight,
+    capsule: readCapsuleRect(),
+  });
+  return cache;
+}
+
+/**
+ * 页面 data 片段：同时给出 CSS 变量串（给 wxml 根节点 inline style）与 px 数值。
+ * wxss 侧约定（四个变量各司其职，别混用）：
+ *   --nav-status 状态栏高度：把「导航行」顶到胶囊所在横带的起点
+ *   --nav-h      导航行高度：与胶囊垂直居中对齐，导航行高就写它
+ *   --nav-right  右对齐元素必须让出的宽度（胶囊安全区）
+ *   --nav-top    状态栏 + 导航行 = 内容真正可以开始的 y（导航行之后的第一个区块用）
+ */
+function navSafeData(force) {
+  var m = getNavMetrics(force);
+  return {
+    navVars: '--nav-status:' + m.statusBarHeight + 'px;'
+      + '--nav-h:' + m.navBarHeight + 'px;'
+      + '--nav-right:' + m.reserve + 'px;'
+      + '--nav-top:' + m.navTop + 'px;',
+    navTopPx: m.navTop,
+    navStatusPx: m.statusBarHeight,
+    navBarHeightPx: m.navBarHeight,
+    capsuleReservePx: m.reserve,
+  };
+}
+
+/** 仅测试用：清空缓存 */
+function clearNavMetricsCache() {
+  cache = null;
+}
+
+module.exports = {
+  computeNavMetrics: computeNavMetrics,
+  getNavMetrics: getNavMetrics,
+  navSafeData: navSafeData,
+  clearNavMetricsCache: clearNavMetricsCache,
+  FALLBACK: FALLBACK,
+};

scripts/audit-image-height.mjs

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+/**
+ * 审计：找出「挂在 <image> 上、只写 width 不写 height」的样式类。
+ *
+ * 为什么值得单独审计（2026-09-23 真实缺陷）：
+ *   小程序 <image> 在未指定高度时取**默认 240px（=480rpx）**。首页「善缘公益服务」
+ *   「善缘安全提醒」两张卡只给封面写了 width，卡片因此被撑到约 480rpx 高 —— 用户反馈的
+ *   「这两栏占用过大」即此。此类写法没有任何编译/类型报错，只能靠约定的静态审计抓。
+ *
+ * 判据（两道过滤，避免误报）：
+ *   1) 规则体里有 width 但没有 height（min-height 不算 —— 它是下限，挡不住 240px 默认值）；
+ *   2) 选择器里的类名**确实出现在某个 `<image class="...">` 上**（只在 .wxss 里找会把
+ *      容器类、`<text>` 图标类一起算进来，实测误报率极高）。
+ *
+ * 用法：node scripts/audit-image-height.mjs
+ * 退出码：0 = 无命中；1 = 命中（可接 CI，但目前故意只作为审计工具，不挂进门禁 ——
+ *         门禁侧只锁「首页两张卡」这一处已确认的缺陷，见 ui-tests/miniapp-capsule-safe-contracts.mjs）
+ */
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { join, relative, resolve } from 'node:path'
+
+const root = resolve(import.meta.dirname, '..')
+
+function walk(dir, extensions, out = []) {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules') continue
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) walk(full, extensions, out)
+    else if (extensions.some((ext) => entry.endsWith(ext))) out.push(full)
+  }
+  return out
+}
+
+/** 收集所有出现在 <image> 上的静态类名 */
+function collectImageClasses() {
+  const classes = new Set()
+  for (const file of walk(resolve(root, 'miniapp'), ['.wxml'])) {
+    const src = readFileSync(file, 'utf8')
+    for (const tag of src.matchAll(/<image\b[^>]*>/g)) {
+      const classAttr = tag[0].match(/\sclass="([^"]*)"/)
+      if (!classAttr) continue
+      // 动态类名（含 {{}}）无法静态判断，跳过
+      if (classAttr[1].includes('{{')) continue
+      for (const name of classAttr[1].split(/\s+/).filter(Boolean)) classes.add(name)
+    }
+  }
+  return classes
+}
+
+const imageClasses = collectImageClasses()
+const ROLE = /([^{}]+)\{([^{}]*)\}/g
+
+/** 按声明拆分并精确比对属性名 —— 不能用 /\bheight:/：`min-height` 里的 "height" 前是连字符，
+ *  同样满足 \b，会把「只写 min-height」的缺陷写成合法（首版就踩了这个坑，自检立刻报出来）。 */
+function declaresProp(body, prop) {
+  return body
+    .split(';')
+    .map((d) => d.split(':')[0].trim())
+    .some((name) => name === prop)
+}
+
+/** 纯函数：在给定 CSS 文本里找出「挂在 <image> 上、有 width 无 height」的规则 */
+function analyze(css, imageClassSet) {
+  const hits = []
+  for (const m of css.matchAll(ROLE)) {
+    const selector = m[1].split('\n').pop().trim().replace(/\s+/g, ' ')
+    const body = m[2]
+    const classes = [...selector.matchAll(/\.([A-Za-z0-9_-]+)/g)].map((x) => x[1])
+    if (!classes.some((name) => imageClassSet.has(name))) continue
+    if (!declaresProp(body, 'width')) continue
+    if (declaresProp(body, 'height')) continue
+    hits.push(`${selector}  {${body.trim().replace(/\s+/g, ' ')}}`)
+  }
+  return hits
+}
+
+// ---- 自检：证明这条审计真的有判别力（含修复前真实写法）----
+const SELF_CHECK = [
+  {
+    name: '正向：修复前的真实写法（只写 width + min-height，挡不住 image 默认 240px）',
+    css: '.service-cover { width: 210rpx; min-height: 160rpx; flex: none; }',
+    classes: new Set(['service-cover']),
+    expect: 1,
+  },
+  {
+    name: '反向：写了显式 height 就不算问题',
+    css: '.mini-card-cover { width: 100%; height: 100%; display: block; }',
+    classes: new Set(['mini-card-cover']),
+    expect: 0,
+  },
+  {
+    name: '反向：类名没出现在 <image> 上（容器类 / <text> 图标类）不算',
+    css: '.list-icon { width: 48rpx; text-align: center; }',
+    classes: new Set(['service-cover']),
+    expect: 0,
+  },
+]
+for (const c of SELF_CHECK) {
+  const got = analyze(c.css, c.classes).length
+  if (got !== c.expect) {
+    console.error(`自检失败 —— ${c.name}\n期望 ${c.expect} 条，实得 ${got} 条`)
+    process.exit(1)
+  }
+}
+
+const hits = []
+for (const file of walk(resolve(root, 'miniapp'), ['.wxss'])) {
+  const found = analyze(readFileSync(file, 'utf8'), imageClasses)
+  for (const hit of found) hits.push(`${relative(root, file).replace(/\\/g, '/')}  ${hit}`)
+}
+
+console.log(`<image> 类共 ${imageClasses.size} 个；命中「有 width 无 height」${hits.length} 条`)
+for (const hit of hits) console.log(' -', hit)
+if (hits.length) process.exitCode = 1

scripts/preview-miniapp.mjs

@@ -155,6 +155,9 @@ const MOCK = {
   },
   mine: {
     // 字段对齐 mine.wxml
+    // 注意：必须显式给 isLoggedIn: true，否则预览只会渲染「未登录」分支（guest-brand），
+    // 而个人头部（profile-hero / 编辑资料 / 四项统计）才是这页真正要目视走查的版式。
+    isLoggedIn: true,
     loadStatus: 'ready',
     isRealNameVerified: true,
     isProfileApproved: true,

scripts/run-ui-contracts.mjs

@@ -42,7 +42,7 @@ const UI_TESTS_DIR = resolve(root, 'ui-tests')
 // 新增/删减守卫时同步修改本默认值。
 // 可用环境变量 UI_GUARDS_MIN 覆盖 —— 唯一目的是让「数量下限」这条分支本身可被自检
 // （`UI_GUARDS_MIN=99 node scripts/run-ui-contracts.mjs` 必须拒绝报绿）。
-const MIN_GUARDS = Number(process.env.UI_GUARDS_MIN ?? 20)
+const MIN_GUARDS = Number(process.env.UI_GUARDS_MIN ?? 21)
 
 const cliArgs = process.argv.slice(2)
 const explicit = cliArgs.length > 0

ui-tests/miniapp-capsule-safe-contracts.mjs

@@ -0,0 +1,240 @@
+// 契约：自定义导航页必须为右上角「胶囊按钮」留出安全区
+//
+// 由来（2026-09-23，用户在微信开发者工具实测反馈）：
+//   首页顶部、以及找对象/消息/活动/我的四个 Tab 页顶部的内容与微信胶囊按钮（「••• ⊙」）重合：
+//     - 竖直方向：消息页四个快捷入口、活动页分类胶囊整体落在胶囊所在横带里被压住；
+//     - 水平方向：首页「消息」、找对象「搜索」、活动「日历」、我的「设置 / 编辑资料」、
+//       聊天页「⋯」（ui-nav-bar 的右侧 slot）被压在胶囊下面，点不到。
+//   根因不是「padding 写小了」，而是**取值来源错了**：五个页面都写
+//   `padding-top: env(safe-area-inset-top)`。该值只反映设备物理安全区（刘海/挖孔），
+//   安卓上常为 0，且**完全不反映胶囊按钮的位置**；右对齐元素更是从未让出胶囊宽度。
+//   ⇒ 唯一可靠来源是 `wx.getMenuButtonBoundingClientRect()` 实测。
+//
+// 本守卫锁三层（都是「改回旧写法就会复发」的部分）：
+//   A. 几何算法：胶囊必须落在导航行内垂直居中，右对齐元素必须整体落在胶囊左侧；
+//   B. 页面覆盖：每个自定义导航页要么用 ui-nav-bar（组件统一处理），要么注入 navVars
+//      并在 wxss 里用 var(--nav-status/--nav-h/--nav-right)，且不得只依赖 env()；
+//   C. 首页两张卡片的尺寸契约：宽度 1/3 + **显式 height**。
+//      （同一批反馈的第二个问题：封面图只写 width 不写 height，小程序 <image> 会取默认
+//       240px = 480rpx，卡片被撑到约 480rpx 高。脚本 scripts/audit-image-height.mjs
+//       对修复前版本实测命中 .service-cover / .safety-cover 两条规则。）
+//
+// 自检：A/B/C 各带正反样例，防止守卫自己变哑（本项目已有三次「守卫全绿但缺陷在」的教训）。
+
+import assert from 'node:assert/strict'
+import { existsSync, readFileSync, readdirSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import navMetrics from '../miniapp/utils/nav-metrics.js'
+
+const root = resolve(import.meta.dirname, '..')
+const read = (path) => readFileSync(resolve(root, path), 'utf8')
+/**
+ * 分析前剥离注释 —— 本项目已有一次教训：守卫被**自己的说明注释**误伤
+ * （注释里写了示例代码，被当成真实代码断言）。本文件里就写了 `env(safe-area-inset-top)`
+ * 作为反例说明，不剥离会立刻假红。
+ * 注意保留换行，避免后续若按行定位时行号漂移（wxss-selectors.mjs 曾因此偏 68 行）。
+ */
+const stripComments = (css) => css.replace(/\/\*[\s\S]*?\*\//g, (block) => block.replace(/[^\n]/g, ' '))
+const readWxss = (path) => stripComments(read(path))
+const { computeNavMetrics } = navMetrics
+
+// ────────────────────────────── A. 几何算法 ──────────────────────────────
+
+// 本守卫不得自己维护一份机型表当成事实源：真值必须来自胶囊实测。
+const metricSource = read('miniapp/utils/nav-metrics.js')
+assert.match(
+  metricSource,
+  /getMenuButtonBoundingClientRect/,
+  '顶部安全区必须由 wx.getMenuButtonBoundingClientRect() 实测胶囊位置，不得写死机型常量',
+)
+
+const DEVICE_SAMPLES = [
+  { name: 'iPhone SE/8（无刘海）', windowWidth: 375, statusBarHeight: 20, capsule: { top: 24, left: 281, width: 87, height: 32 } },
+  { name: 'iPhone 13（刘海）', windowWidth: 390, statusBarHeight: 47, capsule: { top: 51, left: 292, width: 87, height: 32 } },
+  { name: 'Android 常见', windowWidth: 360, statusBarHeight: 24, capsule: { top: 32, left: 267, width: 87, height: 32 } },
+  { name: '小屏 Android', windowWidth: 320, statusBarHeight: 20, capsule: { top: 28, left: 228, width: 87, height: 32 } },
+]
+
+for (const device of DEVICE_SAMPLES) {
+  const m = computeNavMetrics(device)
+  assert.equal(m.source, 'capsule', `${device.name}: 有胶囊信息时必须走实测分支`)
+
+  // 1) 胶囊在导航行内垂直居中 —— 导航行的上边缘 = 状态栏高度
+  const capsuleCenter = device.capsule.top + device.capsule.height / 2
+  const navBarCenter = m.statusBarHeight + m.navBarHeight / 2
+  assert.ok(
+    Math.abs(capsuleCenter - navBarCenter) <= 1,
+    `${device.name}: 导航行与胶囊未垂直对齐（胶囊中心 ${capsuleCenter} vs 导航行中心 ${navBarCenter}）`,
+  )
+
+  // 2) 内容起点 = 状态栏 + 导航行
+  assert.equal(m.navTop, m.statusBarHeight + m.navBarHeight, `${device.name}: navTop 必须等于状态栏 + 导航行`)
+
+  // 3) 右对齐元素让出的宽度必须真正覆盖胶囊：右边缘 ≤ 胶囊左边缘 - 余量
+  const contentRightEdge = device.windowWidth - m.reserve
+  assert.ok(
+    contentRightEdge <= device.capsule.left,
+    `${device.name}: 右对齐元素右边缘 ${contentRightEdge} 仍在胶囊（左边缘 ${device.capsule.left}）右侧，会被压住`,
+  )
+  assert.ok(m.reserve <= device.windowWidth / 2, `${device.name}: 安全区不得超过半屏，否则内容区被挤没`)
+
+  // 4) 导航行高度落在合理区间，不能退化成 0/NaN
+  assert.ok(m.navBarHeight >= 40 && m.navBarHeight <= 56, `${device.name}: 导航行高度异常 ${m.navBarHeight}`)
+}
+
+// 拿不到胶囊信息（低版本基础库 / 接口异常）时必须退回兜底值，且宁可多留不可少留
+const fallback = computeNavMetrics({ windowWidth: 375, statusBarHeight: 44 })
+assert.equal(fallback.source, 'fallback', '无胶囊信息时应标记为兜底取值')
+assert.ok(fallback.navTop >= 64, `无胶囊信息时也必须留足顶部空间，实得 ${fallback.navTop}`)
+
+// 极端输入：胶囊 tops 落在状态栏内（gap 为负）时不得产出 NaN / 负值
+const degenerate = computeNavMetrics({ windowWidth: 375, statusBarHeight: 44, capsule: { top: 40, left: 281, width: 87, height: 32 } })
+assert.ok(Number.isFinite(degenerate.navBarHeight) && degenerate.navBarHeight >= 40, '胶囊与状态栏重叠时仍须给出合法导航行高度')
+
+// ─────────────────────── B. 页面覆盖：自定义导航页 ───────────────────────
+
+/** 纯函数：审计一个「自带导航行」的自定义导航页，返回问题清单
+ *  （并入参已剥离注释：见 stripComments 注释）*/
+function auditTabHeader({ wxml = '', ts = '', wxss = '' } = {}) {
+  const issues = []
+  const rootTag = (wxml.match(/<view[^>]*reference-page[^>]*>/) || [''])[0]
+  if (!/style="\{\{navVars\}\}"/.test(rootTag)) {
+    issues.push('根节点未注入 style="{{navVars}}"（拿不到实测安全区）')
+  }
+  if (!/navVars\s*:\s*''/.test(ts)) issues.push('data 里缺少 navVars 初始值')
+  if (!/require\(['"]\.\.\/\.\.\/utils\/nav-metrics['"]\)/.test(ts)) issues.push('未引入 utils/nav-metrics')
+  if (!/setData\(\s*navSafeData\(\)\s*\)/.test(ts)) issues.push('未在 onLoad 里 setData(navSafeData())')
+  // env(safe-area-inset-top) 本身不是非法 API，但它只反映设备物理安全区、不反映胶囊位置，
+  // 单独使用即本次缺陷的原始写法 —— 出现即判红，改用 var(--nav-status)。
+  if (/env\(safe-area-inset-top\)/.test(wxss)) issues.push('仍在用 env(safe-area-inset-top)（不反映胶囊位置）')
+  if (!/var\(--nav-status/.test(wxss)) issues.push('顶部未用 var(--nav-status) 顶开状态栏')
+  if (!/var\(--nav-h/.test(wxss)) issues.push('导航行高度未用 var(--nav-h)，无法与胶囊垂直对齐')
+  if (!/var\(--nav-right/.test(wxss)) issues.push('右对齐元素未让出 var(--nav-right) 胶囊安全区')
+  return issues
+}
+
+// 自检：正向样例（修好之后的样子）必须 0 问题；反向样例（本次缺陷的原始写法）必须全部命中
+const SELF_CHECK = [
+  {
+    name: '正向：注入 navVars + 用 var(--nav-status/--nav-h/--nav-right)',
+    sample: {
+      wxml: '<view class="page app-page reference-page" style="{{navVars}}">',
+      ts: "const { navSafeData } = require('../../utils/nav-metrics')\nnavVars: ''\nthis.setData(navSafeData())",
+      wxss: '.hero{padding:var(--nav-status, 44px) 24rpx 24rpx}.nav{height:var(--nav-h, 80rpx)}.act{right:var(--nav-right, 102px)}',
+    },
+    expect: 0,
+  },
+  {
+    name: '反向：本次缺陷的原始写法（只用 env(safe-area-inset-top)，无 navVars）',
+    sample: {
+      wxml: '<view class="page app-page reference-page">',
+      ts: 'Page({ data: {}, onLoad() {} })',
+      wxss: '.hero{padding:env(safe-area-inset-top) 24rpx 24rpx}.nav{height:88rpx}.act{right:0}',
+    },
+    expect: 8,
+  },
+]
+for (const c of SELF_CHECK) {
+  const issues = auditTabHeader(c.sample)
+  assert.equal(
+    issues.length,
+    c.expect,
+    `守卫自检失败 —— ${c.name}\n期望 ${c.expect} 条问题，实得 ${issues.length} 条：\n  ${issues.join('\n  ')}`,
+  )
+}
+
+// 从文件系统推导清单（不写死），新增自定义导航页会被自动纳入
+const pagesRoot = resolve(root, 'miniapp/pages')
+const pageNames = readdirSync(pagesRoot, { withFileTypes: true })
+  .filter((entry) => entry.isDirectory())
+  .map((entry) => entry.name)
+
+const customNavPages = pageNames.filter((name) => {
+  const jsonPath = join(pagesRoot, name, `${name}.json`)
+  if (!existsSync(jsonPath)) return false
+  try {
+    return JSON.parse(readFileSync(jsonPath, 'utf8')).navigationStyle === 'custom'
+  } catch {
+    return false
+  }
+})
+
+assert.ok(customNavPages.length >= 20, `自定义导航页只找到 ${customNavPages.length} 个 —— 扫描清单可能失配，拒绝报绿`)
+
+const selfNavPages = customNavPages.filter((name) => {
+  const wxmlPath = join(pagesRoot, name, `${name}.wxml`)
+  return existsSync(wxmlPath) && !readFileSync(wxmlPath, 'utf8').includes('ui-nav-bar')
+})
+
+const EXPECTED_SELF_NAV = ['index', 'discover', 'messages', 'activity', 'mine']
+for (const name of EXPECTED_SELF_NAV) {
+  assert.ok(selfNavPages.includes(name), `${name} 应自带导航行（未用 ui-nav-bar）但未被识别 —— 清单失配`)
+}
+
+const failures = []
+for (const name of selfNavPages) {
+  const issues = auditTabHeader({
+    wxml: read(`miniapp/pages/${name}/${name}.wxml`),
+    ts: read(`miniapp/pages/${name}/${name}.ts`),
+    wxss: readWxss(`miniapp/pages/${name}/${name}.wxss`),
+  })
+  if (issues.length) failures.push(`${name}: ${issues.join('；')}`)
+}
+assert.deepEqual(failures, [], `以下自定义导航页仍会让内容与胶囊按钮重合：\n  ${failures.join('\n  ')}`)
+
+// 右侧 slot 的使用者（聊天页「⋯」）依赖 ui-nav-bar 的胶囊安全区，必须仍走组件
+for (const name of pageNames) {
+  const wxmlPath = join(pagesRoot, name, `${name}.wxml`)
+  if (!existsSync(wxmlPath)) continue
+  if (readFileSync(wxmlPath, 'utf8').includes('slot="right"')) {
+    assert.ok(
+      read(`miniapp/pages/${name}/${name}.wxml`).includes('ui-nav-bar'),
+      `${name} 用了导航栏右侧 slot 但未使用 ui-nav-bar，右侧操作会落在胶囊下面`,
+    )
+  }
+}
+
+// ui-nav-bar 组件自身必须处理胶囊（20 个非 Tab 页共用它）
+const navBarJs = read('miniapp/components/nav-bar/index.js')
+const navBarWxss = read('miniapp/components/nav-bar/index.wxss')
+assert.match(navBarJs, /getNavMetrics/, 'ui-nav-bar 必须实测胶囊位置（见 utils/nav-metrics.js）')
+assert.match(navBarJs, /--nav-right/, 'ui-nav-bar 必须把胶囊安全区注入 wxss')
+assert.match(
+  navBarWxss,
+  /\.ui-nav__title\s*\{[^}]*max-width:\s*calc\(100% - 2 \* var\(--nav-right/,
+  'ui-nav-bar 标题必须让开胶囊（左右对称留白，才能既居中又不被压住）',
+)
+assert.match(
+  navBarWxss,
+  /\.ui-nav__right\s*\{[^}]*padding-right:\s*var\(--nav-right/,
+  'ui-nav-bar 右侧 slot 必须整体左移到胶囊左侧',
+)
+assert.match(navBarWxss, /\.ui-nav__bar\s*\{[^}]*height:\s*var\(--nav-h/, 'ui-nav-bar 导航行高度必须与胶囊对齐')
+
+// ─────────────────── C. 首页两张卡片：1/3 尺寸 + 显式高度 ───────────────────
+
+const indexWxss = readWxss('miniapp/pages/index/index.wxss')
+
+const cardRule = (indexWxss.match(/\.mini-card\s*\{([^}]*)\}/) || [])[1] || ''
+assert.ok(cardRule, '首页必须保留 .mini-card 规则（公益服务 / 安全提醒的 1/3 小卡）')
+assert.match(cardRule, /width:\s*calc\(\(100% - var\(--spacing-2\) \* 2\) \/ 3\)/, '小卡宽度必须是三分一行（原尺寸的 1/3）')
+assert.match(cardRule, /(?:^|;)\s*height:\s*\d+rpx/, '小卡必须写死高度（约 1/3），否则会被内容或默认高度撑开')
+
+const coverRule = (indexWxss.match(/\.mini-card-cover\s*\{([^}]*)\}/) || [])[1] || ''
+assert.ok(coverRule, '首页必须保留 .mini-card-cover 规则')
+assert.match(coverRule, /(?:^|;)\s*width\s*:/, '封面必须有显式宽度')
+assert.match(
+  coverRule,
+  /(?:^|;)\s*height\s*:/,
+  '封面必须写显式 height —— 小程序 <image> 未指定高度时取默认 240px(=480rpx)，卡片会被撑到约 480rpx',
+)
+
+// 回归钉：本次缺陷的两条「只写 width / min-height」的封面规则不得复活
+for (const legacy of ['.service-cover', '.safety-cover']) {
+  assert.ok(
+    !new RegExp(`\\${legacy}\\s*\\{`).test(indexWxss),
+    `首页不得恢复「只写 width 不写 height」的 ${legacy} 规则（该写法会把卡片撑到约 480rpx）`,
+  )
+}
+
+console.log(`胶囊安全区契约通过（实测机型 ${DEVICE_SAMPLES.length} 组 + 自带导航行页面 ${selfNavPages.length} 个）`)

ui-tests/phase03-verification-contracts.mjs

@@ -1,6 +1,10 @@
 import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
 import vm from 'node:vm'
+// 首页会 require 顶部安全区工具（utils/nav-metrics.js）。这里直接注入**真实模块**而不是手写桩：
+// 沙箱里没有 getWindowInfo / getMenuButtonBoundingClientRect，正好走它的兜底分支，
+// 等于顺带验证了「系统接口不可用时也能给出安全值」。
+import navMetrics from '../miniapp/utils/nav-metrics.js'
 
 const source = readFileSync(new URL('../miniapp/pages/index/index.ts', import.meta.url), 'utf8')
 let page
@@ -16,6 +20,9 @@ const sandbox = {
     if (request === '../../utils/api') {
       return { get: async () => { throw new Error('未登录时不应请求首页接口') } }
     }
+    if (request === '../../utils/nav-metrics') {
+      return navMetrics
+    }
     throw new Error(`未预期依赖：${request}`)
   },
   Page(config) { page = config },
@@ -41,4 +48,13 @@ await page.checkAuthAndLoad.call({
 assert.equal(pageState.isOnboarding, true, '未登录时应进入登录引导状态')
 assert.equal(pageState.userState, null, '未登录状态不得伪造实名用户，实名状态必须来自服务端数据库')
 
+// 顶部安全区：无系统接口时必须退回兜底值（宁可多留不可少留），且四个 CSS 变量齐备
+const fallbackVars = navMetrics.navSafeData(true)
+assert.match(
+  fallbackVars.navVars,
+  /--nav-status:\d+px;--nav-h:\d+px;--nav-right:\d+px;--nav-top:\d+px;/,
+  '顶部安全区必须给出四个 CSS 变量（状态栏 / 导航行 / 胶囊安全区 / 内容起点）',
+)
+assert.ok(fallbackVars.navTopPx >= 64, '拿不到胶囊信息时也要留足顶部空间，避免压住操作按钮')
+
 console.log('Phase 03 verification contracts passed')