WorkBuddy
1fc34f1bcd
问题 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 行生成产物），以免淹没代码评审视线。
49 lines
4.6 KiB
Plaintext
49 lines
4.6 KiB
Plaintext
.page{min-height:100vh;background:var(--color-bg-page)}
|
|
/* --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: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)}
|
|
.search-label{margin-right:14rpx;padding-right:14rpx;border-right:1rpx solid rgba(255,255,255,.2);font-size:24rpx;color:var(--color-text-inverse)}
|
|
.search-field{flex:1;font-size:24rpx;color:var(--color-text-inverse)}
|
|
.search-placeholder{font-size:24rpx;color:rgba(255,255,255,.52)}
|
|
.filter-scroll{margin-top:16rpx;white-space:nowrap}
|
|
.filter-chips{display:inline-flex;gap:12rpx}
|
|
.filter-chip{padding:11rpx 20rpx;border-radius:25rpx;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:24rpx}
|
|
.filter-chip.active{background:var(--color-bg-card);color:var(--color-primary-strong);font-weight:600}
|
|
|
|
/* 遮罩层 + 底部抽屉样式 */
|
|
.filter-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:10}
|
|
.filter-panel-wrap{position:fixed;left:0;right:0;bottom:0;z-index:11;background:var(--color-bg-card);border-radius:28rpx 28rpx 0 0;max-height:78vh;box-shadow:0 -10rpx 40rpx rgba(31,32,89,.15);display:flex;flex-direction:column;padding:24rpx 28rpx 28rpx}
|
|
.filter-scroll-wrap{flex:1;max-height:calc(78vh - 140rpx);padding:8rpx 0 0}
|
|
.filter-section{margin-bottom:28rpx;padding:16rpx 20rpx;border-radius:16rpx;transition:background .2s,box-shadow .2s}
|
|
.filter-section.hl{background:var(--color-primary-light);box-shadow:inset 0 0 0 2rpx var(--mini-accent-pink)}
|
|
.filter-heading{display:flex;justify-content:space-between}
|
|
.filter-label{display:block;font-size:24rpx;font-weight:600;color:var(--color-text-strong)}
|
|
.filter-value{font-size:24rpx;color:var(--color-text-tertiary)}
|
|
.range-slider{margin:8rpx 0}
|
|
.tag-group{display:flex;flex-wrap:wrap;gap:14rpx;margin-top:16rpx}
|
|
.tag{padding:10rpx 22rpx;border-radius:22rpx;background:var(--color-bg-subtle);color:var(--color-text-secondary);font-size:24rpx}
|
|
.tag.selected{background:var(--color-primary-light);color:var(--color-primary-strong)}
|
|
.filter-actions{display:flex;gap:18rpx;margin-top:8rpx}
|
|
|
|
.result-head{padding:30rpx 26rpx 16rpx;display:flex;align-items:flex-end;justify-content:space-between}
|
|
.result-head>view{display:flex;flex-direction:column}
|
|
.result-title{font-size:30rpx;font-weight:700;color:var(--color-text-strong)}
|
|
.result-subtitle{margin-top:5rpx;font-size:24rpx;color:var(--color-text-tertiary)}
|
|
.result-count{font-size:20rpx;color:var(--color-text-tertiary)}
|
|
.user-list{margin:0 24rpx;padding:4rpx 0;background:var(--color-bg-card);border-radius:28rpx;overflow:hidden;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
|
|
.card-action{display:flex;align-items:center}
|
|
.like-button{width:var(--tap-min);min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary-light);box-shadow:0 6rpx 18rpx rgba(255,79,145,.16);}
|
|
.like-button image{width:42rpx;height:42rpx}
|
|
.like-button.loading{opacity:.45}
|
|
.list-end-hint{text-align:center;padding:24rpx;font-size:24rpx;color:var(--color-text-tertiary)}
|
|
.discover-empty{margin:70rpx 40rpx 0;padding:34rpx;display:flex;flex-direction:column;align-items:center;background:var(--color-bg-card);border-radius:28rpx;box-shadow:0 10rpx 32rpx rgba(34,35,91,.08)}
|
|
.discover-empty image{width:112rpx;height:112rpx}
|
|
.empty-title{margin-top:12rpx;font-size:28rpx;font-weight:600;color:var(--color-text-strong)}
|
|
.empty-desc{margin-top:10rpx;text-align:center;font-size:24rpx;line-height:1.55;color:var(--color-text-tertiary)}
|
|
.empty-action{margin-top:24rpx;min-width:180rpx;min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;border-radius:32rpx;background:var(--gradient-brand-solid);color:var(--color-text-inverse);font-size:24rpx;font-weight:600}
|