问题 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 行生成产物),以免淹没代码评审视线。
53 lines
2.3 KiB
Plaintext
53 lines
2.3 KiB
Plaintext
<!-- 消息列表页:仅服务端允许的 Mutual Match 会话可进入聊天 -->
|
|
<view class="page app-page reference-page" style="{{navVars}}">
|
|
<view class="messages-hero">
|
|
<view class="messages-nav">
|
|
<text class="messages-title">消息</text>
|
|
<image class="messages-search" src="/assets/icons/ui/search.png" mode="aspectFit" />
|
|
</view>
|
|
<view class="message-shortcuts">
|
|
<view class="message-shortcut" bindtap="onShortcutTap" data-key="new-friends">
|
|
<view class="shortcut-icon shortcut-icon--blue"><image src="/assets/icons/home/find-object.png" mode="aspectFit" /></view>
|
|
<text>新朋友</text>
|
|
</view>
|
|
<view class="message-shortcut" bindtap="onShortcutTap" data-key="likes">
|
|
<view class="shortcut-icon shortcut-icon--pink"><image src="/assets/brand/logo-mark.png" mode="aspectFit" /></view>
|
|
<text>互动喜欢</text>
|
|
</view>
|
|
<view class="message-shortcut" bindtap="onShortcutTap" data-key="following">
|
|
<view class="shortcut-icon shortcut-icon--purple"><image src="/assets/icons/home/matchmaker.png" mode="aspectFit" /></view>
|
|
<text>我的关注</text>
|
|
</view>
|
|
<view class="message-shortcut" bindtap="onShortcutTap" data-key="system">
|
|
<view class="shortcut-icon shortcut-icon--coral"><image src="/assets/icons/ui/warning.png" mode="aspectFit" /></view>
|
|
<text>系统通知</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="messages-content">
|
|
<ui-section-header title="最近联系" subtitle="{{unreadTotal > 0 ? unreadTotal + ' 条未读' : '全部已读'}}" />
|
|
|
|
<ui-loading wx:if="{{loading && conversations.length === 0}}" mode="skeleton" rows="4" />
|
|
|
|
<view wx:elif="{{conversations.length > 0}}" class="conversation-list">
|
|
<ui-conversation-item
|
|
wx:for="{{conversations}}"
|
|
wx:key="conversationId"
|
|
conversation="{{item}}"
|
|
bind:tap="onGoChat"
|
|
/>
|
|
<ui-loading wx:if="{{loading}}" mode="spinner" text="加载更多会话" inline />
|
|
</view>
|
|
|
|
<ui-empty
|
|
wx:elif="{{!loading}}"
|
|
illustration="message"
|
|
title="还没有消息"
|
|
description="互相喜欢后可以开始聊天。去看看今天为你推荐的人吧。"
|
|
actions="{{emptyActions}}"
|
|
bind:action="onEmptyAction"
|
|
/>
|
|
</view>
|
|
</view>
|