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 行生成产物），以免淹没代码评审视线。
This commit is contained in:
WorkBuddy
@@ -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', {});
|
||||
},
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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') {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
Reference in New Issue
Block a user