Files
danyang-match/miniapp/pages/messages/messages.ts
T
WorkBuddy 1fc34f1bcd 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 行生成产物),以免淹没代码评审视线。
2026-09-23 09:55:40 +08:00

80 lines
2.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 消息列表页 U23
*
* 不变量(AGENTS.md):
* - 第 3 条:Mutual Match 后才能聊天
* - 第 4 条:Block/Unmatch 后会话立即停用
* - 第 6 条:单向活动意向不泄露
* - 第 9 条:DB 是 Source of Truth
*/
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,
emptyActions: [{ text: '去今日推荐', event: 'home', variant: 'primary' }],
},
onLoad() {
// 顶部安全区先算:onLoad 早于首次渲染,避免出现「先压住胶囊再跳开」的闪动
this.setData(navSafeData());
(this as any)._unsubMsg = messageStore.bindToPage(this, {
conversations: 'conversations',
totalUnreadCount: 'unreadTotal',
});
(this as any)._unsubLoading = messageStore.subscribe((state: any) => {
if (state.conversationsLoading !== this.data.loading) {
this.setData({ loading: state.conversationsLoading });
}
});
this.setData({ loading: messageStore.state.conversationsLoading });
},
onShow() {
if (!authStore.state.isLoggedIn) return;
messageStore.fetchConversations().catch((err: any) => appStore.toastError(err));
},
onUnload() {
if ((this as any)._unsubMsg) (this as any)._unsubMsg();
if ((this as any)._unsubLoading) (this as any)._unsubLoading();
},
onPullDownRefresh() {
messageStore.fetchConversations().finally(() => wx.stopPullDownRefresh());
},
onReachBottom() {
if (messageStore.state.conversationsHasMore) {
messageStore.loadMoreConversations().catch(() => {});
}
},
onGoChat(e: any) {
const { conversationId, canSendMessage } = e.detail;
if (!canSendMessage) {
appStore.toastError('当前会话已停用,无法继续聊天');
return;
}
wx.navigateTo({ url: to.chat(conversationId) });
},
onShortcutTap(e: any) {
const key = e.currentTarget.dataset.key;
if (key === 'new-friends') { wx.switchTab({ url: ROUTE.TAB.DISCOVER }); return; }
if (key === 'system') { wx.navigateTo({ url: ROUTE.SETTINGS.NOTIFICATIONS }); return; }
wx.navigateTo({ url: ROUTE.MAIN.FATE_CENTER });
},
onEmptyAction(e: any) {
if (e.detail.event === 'home') wx.switchTab({ url: ROUTE.TAB.HOME });
},
});