diff --git a/miniapp/components/nav-bar/index.js b/miniapp/components/nav-bar/index.js index e33423e..2d38d2a 100644 --- a/miniapp/components/nav-bar/index.js +++ b/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 仅作为「拿不到胶囊信息」时的兜底， + * 不再作为唯一事实源（旧页面无需改动）。 + * * 用法： * + * ⋯ */ +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', {}); }, diff --git a/miniapp/components/nav-bar/index.wxml b/miniapp/components/nav-bar/index.wxml index 88d9e53..c336d39 100644 --- a/miniapp/components/nav-bar/index.wxml +++ b/miniapp/components/nav-bar/index.wxml @@ -1,4 +1,4 @@ - + diff --git a/miniapp/components/nav-bar/index.wxss b/miniapp/components/nav-bar/index.wxss index 0047f1f..f43f10a 100644 --- a/miniapp/components/nav-bar/index.wxss +++ b/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; diff --git a/miniapp/pages/activity/activity.ts b/miniapp/pages/activity/activity.ts index 6ebba71..ba3db93 100644 --- a/miniapp/pages/activity/activity.ts +++ b/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', diff --git a/miniapp/pages/activity/activity.wxml b/miniapp/pages/activity/activity.wxml index 30a8dfd..892543a 100644 --- a/miniapp/pages/activity/activity.wxml +++ b/miniapp/pages/activity/activity.wxml @@ -1,5 +1,5 @@ - + 公益活动 diff --git a/miniapp/pages/activity/activity.wxss b/miniapp/pages/activity/activity.wxss index 085f357..2972f53 100644 --- a/miniapp/pages/activity/activity.wxss +++ b/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} diff --git a/miniapp/pages/discover/discover.ts b/miniapp/pages/discover/discover.ts index 1400b98..1727f7c 100644 --- a/miniapp/pages/discover/discover.ts +++ b/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); }, diff --git a/miniapp/pages/discover/discover.wxml b/miniapp/pages/discover/discover.wxml index 9a5bc88..03dcb46 100644 --- a/miniapp/pages/discover/discover.wxml +++ b/miniapp/pages/discover/discover.wxml @@ -1,4 +1,4 @@ - + 找对象 diff --git a/miniapp/pages/discover/discover.wxss b/miniapp/pages/discover/discover.wxss index f1fa978..b26c76f 100644 --- a/miniapp/pages/discover/discover.wxss +++ b/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)} diff --git a/miniapp/pages/index/index.ts b/miniapp/pages/index/index.ts index 2cde0bb..0d24756 100644 --- a/miniapp/pages/index/index.ts +++ b/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') { diff --git a/miniapp/pages/index/index.wxml b/miniapp/pages/index/index.wxml index c474413..305cf9c 100644 --- a/miniapp/pages/index/index.wxml +++ b/miniapp/pages/index/index.wxml @@ -1,4 +1,4 @@ - + @@ -77,7 +77,20 @@ - {{item.title}}{{item.description}}{{item.ctaText}}暂无待推荐的公益服务 + + + + + + + + {{item.title}} + {{item.ctaText}} + + + 暂无待推荐的公益服务 + 公益活动{{item.title}}{{item.locationName}}近期暂无可报名活动 @@ -85,7 +98,21 @@ {{item.title}}善缘课堂 · 公益内容暂无新内容，稍后再来看看 - 善缘安全提醒{{safetyNotice.text}}{{safetyNotice.ctaText}} + + + + + + + 善缘安全提醒 + + + {{safetyNotice.text}} + {{safetyNotice.ctaText}} + + + diff --git a/miniapp/pages/index/index.wxss b/miniapp/pages/index/index.wxss index f4346da..9608dcd 100644 --- a/miniapp/pages/index/index.wxss +++ b/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」： + 小程序 在未指定高度时会取默认 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)); diff --git a/miniapp/pages/messages/messages.ts b/miniapp/pages/messages/messages.ts index c6d3b23..b978bc7 100644 --- a/miniapp/pages/messages/messages.ts +++ b/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', diff --git a/miniapp/pages/messages/messages.wxml b/miniapp/pages/messages/messages.wxml index 7fa5c2b..e14da89 100644 --- a/miniapp/pages/messages/messages.wxml +++ b/miniapp/pages/messages/messages.wxml @@ -1,5 +1,5 @@ - + 消息 diff --git a/miniapp/pages/messages/messages.wxss b/miniapp/pages/messages/messages.wxss index 190ebc5..d58146c 100644 --- a/miniapp/pages/messages/messages.wxss +++ b/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; } diff --git a/miniapp/pages/mine/mine.ts b/miniapp/pages/mine/mine.ts index 3e51567..ee6aaaa 100644 --- a/miniapp/pages/mine/mine.ts +++ b/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 = { [RELATIONSHIP_STATUS.SEARCHING]: '正在寻找', @@ -19,6 +22,7 @@ const RELATIONSHIP_TEXT: Record = { 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) => { diff --git a/miniapp/pages/mine/mine.wxml b/miniapp/pages/mine/mine.wxml index 7bbd752..f77d913 100644 --- a/miniapp/pages/mine/mine.wxml +++ b/miniapp/pages/mine/mine.wxml @@ -1,4 +1,4 @@ - + 善缘丹阳公益婚恋服务平台 diff --git a/miniapp/pages/mine/mine.wxss b/miniapp/pages/mine/mine.wxss index e0708d3..dca7350 100644 --- a/miniapp/pages/mine/mine.wxss +++ b/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} diff --git a/miniapp/utils/nav-metrics.js b/miniapp/utils/nav-metrics.js new file mode 100644 index 0000000..2d4a9e8 --- /dev/null +++ b/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()) } }) + * + * + * 单位一律 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, +}; diff --git a/scripts/audit-image-height.mjs b/scripts/audit-image-height.mjs new file mode 100644 index 0000000..e1a2b8e --- /dev/null +++ b/scripts/audit-image-height.mjs @@ -0,0 +1,114 @@ +#!/usr/bin/env node +/** + * 审计：找出「挂在 上、只写 width 不写 height」的样式类。 + * + * 为什么值得单独审计（2026-09-23 真实缺陷）： + * 小程序 在未指定高度时取**默认 240px（=480rpx）**。首页「善缘公益服务」 + * 「善缘安全提醒」两张卡只给封面写了 width，卡片因此被撑到约 480rpx 高 —— 用户反馈的 + * 「这两栏占用过大」即此。此类写法没有任何编译/类型报错，只能靠约定的静态审计抓。 + * + * 判据（两道过滤，避免误报）： + * 1) 规则体里有 width 但没有 height（min-height 不算 —— 它是下限，挡不住 240px 默认值）； + * 2) 选择器里的类名**确实出现在某个 `` 上**（只在 .wxss 里找会把 + * 容器类、`` 图标类一起算进来，实测误报率极高）。 + * + * 用法：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 +} + +/** 收集所有出现在 上的静态类名 */ +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(/]*>/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 文本里找出「挂在 上、有 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: '反向：类名没出现在 上（容器类 / 图标类）不算', + 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(` 类共 ${imageClasses.size} 个；命中「有 width 无 height」${hits.length} 条`) +for (const hit of hits) console.log(' -', hit) +if (hits.length) process.exitCode = 1 diff --git a/scripts/preview-miniapp.mjs b/scripts/preview-miniapp.mjs index 6fa4c49..3259219 100644 --- a/scripts/preview-miniapp.mjs +++ b/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, diff --git a/scripts/run-ui-contracts.mjs b/scripts/run-ui-contracts.mjs index 3a9a6b9..a909045 100644 --- a/scripts/run-ui-contracts.mjs +++ b/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 diff --git a/ui-tests/miniapp-capsule-safe-contracts.mjs b/ui-tests/miniapp-capsule-safe-contracts.mjs new file mode 100644 index 0000000..0fe1d20 --- /dev/null +++ b/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，小程序 会取默认 +// 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(/]*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: '', + 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: '', + 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 —— 小程序 未指定高度时取默认 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} 个）`) diff --git a/ui-tests/phase03-verification-contracts.mjs b/ui-tests/phase03-verification-contracts.mjs index a31e1c3..5b2c6ec 100644 --- a/ui-tests/phase03-verification-contracts.mjs +++ b/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')