fix(diy-card): 审计修复——corner 档头部水平让位动态化 + self 首载骨架屏

- 修复 P1: corner 档自定义 qrSize>120 时静态 padding-right:180rpx
  让位不足, 浮层压住头部姓名区 → 新增 cornerHeadStyle 按浮层实际
  宽度(尺寸+衬底+右偏移20+呼吸20)动态反算, 与 cornerClearStyle
  垂直让位同口径; 废弃静态 CSS 值(负断言锁定)
- 修复: self.vue 已登录首次加载三分支都不渲染(loading 且无 card)
  → 白屏闪烁; 改 v-else-if="loading || card" 挂上 mini 骨架屏
- 契约测试: 新增 cornerHeadStyle 断言 + resolveQrSize 三处口径 +
  静态让位废弃负断言; 3 项变异验证全抓住; 四文件 67 项全绿
This commit is contained in:
2026-10-21 14:09:56 +08:00
parent 805bbb9598
commit f1bd606e0b
4 changed files with 34 additions and 11 deletions

View File

@@ -45,7 +45,7 @@
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
</view>
<view class="mini-head">
<view class="mini-head" :style="cornerHeadStyle">
<view v-if="showAvatarBlock" class="mini-avatar" :style="avatarStyle">
<image v-if="card.avatar" class="avatar-img" :src="$util.img(card.avatar)" mode="aspectFill" />
<text v-else class="avatar-initial">{{ initialOf(card.name) }}</text>
@@ -177,6 +177,17 @@ export default {
showAvatarBlock() {
return flagOn(this.c.showAvatar, true);
},
/**
* corner 档头部水平让位: 按浮层实际宽度反算(浮层宽[尺寸+衬底] + 右偏移20 + 呼吸20),
* 自定义大尺寸时自动跟随 —— 修复静态 180rpx 在 qrSize>120 时让位不足压住姓名区;
* 非 corner 档 / 二维码未启用时输出空对象(浮层不存在无需让位)
*/
cornerHeadStyle() {
if (this.qrPos !== 'corner' || !this.showQrBase) return {};
const size = resolveQrSize(this.qrPos, this.c.qrSize);
const pad = this.qrStyle === 'plain' ? 0 : (this.qrStyle === 'gradient' ? 12 : 20);
return { paddingRight: (size + pad + 40) + 'rpx' };
},
/**
* corner 档资料行/操作区让位量: 按二维码实际占高反算
* (浮层 top 20 + 块高[尺寸+样式衬底+tip] - 头部 104 + 间隙 10), 防遮挡;
@@ -587,12 +598,12 @@ export default {
}
}
/* corner 档: 头部右侧留出浮层宽度: WXSS 不支持 calc(), 用固定 padding-right
(浮层 120rpx + 右偏移 20rpx + 呼吸 20rpx ≈ 160, 取 180 富余);
资料行/操作区让位改由 cornerClearStyle 按实际尺寸动态算 */
/* corner 档: 头部右侧让位由 cornerHeadStyle 按浮层实际宽度动态给出
(静态 180rpx 在自定义大尺寸 qrSize 下不足, 已废弃); WXSS 不支持 calc() */
&.qr-at-corner {
.mini-head {
padding-right: 180rpx;
position: relative;
z-index: 2;
}
}

View File

@@ -8,9 +8,9 @@
</view>
</view>
<!-- 名片卡(已登录=本人名片 / 未登录=兜底名片) -->
<!-- 名片卡(已登录=本人名片 / 未登录=兜底名片); loading 时基件出骨架屏 -->
<diy-card-mini
v-else-if="card"
v-else-if="loading || card"
:card="card"
:config="miniConfig"
:loading="loading"