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