feat(card-diy): 四组件字号定制化消费 + 契约测试(12 项)

- entry: 主/副标题与按钮字号内联消费(titleSize/subSize/btnSize, px→rpx ×2),
  文字箭头拆 btnArrowStyle(比按钮大一档=28rpx)
- list: 拆 gridNameStyle/scrollNameStyle/metaStyle/scrollMetaStyle, 横滑与
  人数徽标按 -1px 派生保持历史渲染; infoStyle 保持纯色(箭头/空态共用)
- mini(Show/Self 基件): name/cardTitle/sub/label/value/act/btn 七项字号内联,
  拆 cardTitleStyle/rowLabelStyle/detailTextStyle; labelStyle 保持纯色给图标/qr tip
- self: miniConfig 透传 7 个字号字段
- 新增 tests/diy-card-font-size.test.js: 三层口径契约(diy_view 默认值 ↔
  design.html 面板/重置 ↔ vue 消费) + 派生关系 + 颜色 value 兜底 + 反例自测

验证: 契约 12/12 绿; diy-card 全套测试 0 失败; E2E 截图目检通过
This commit is contained in:
2026-10-23 14:21:36 +08:00
parent d64e989c25
commit 0c0a6a1cb8
5 changed files with 334 additions and 26 deletions

View File

@@ -55,7 +55,7 @@
<text class="mini-name" :style="nameStyle">{{ card.name || '未命名名片' }}</text>
<text v-if="isEnterprise" class="mini-badge" :style="badgeStyle">企业</text>
</view>
<text v-if="card.card_title" class="mini-card-title" :style="subTextStyle">{{ card.card_title }}</text>
<text v-if="card.card_title" class="mini-card-title" :style="cardTitleStyle">{{ card.card_title }}</text>
<text v-if="subLine" class="mini-sub" :style="subTextStyle">{{ subLine }}</text>
</view>
<!-- 二维码·头部右侧(head 档: 头像|信息|二维码 三段 flex, 零遮挡) -->
@@ -70,7 +70,7 @@
<view v-for="(row, i) in shownRows" :key="i" class="mini-row"
:class="{ 'row-tappable': rowTapable(row) }" :hover-class="rowTapable(row) ? 'btn-press' : 'none'" @tap="onRowTap(row)">
<text v-if="rowIcon(row)" class="row-icon iconfont" :class="rowIcon(row)" :style="labelStyle"></text>
<text v-else class="row-label" :style="labelStyle">{{ row.label }}</text>
<text v-else class="row-label" :style="rowLabelStyle">{{ row.label }}</text>
<text class="row-value" :style="valueStyle">{{ row.value }}</text>
</view>
<view v-if="hasMoreRows" class="row-toggle" hover-class="btn-press" @tap="expanded = !expanded">
@@ -100,7 +100,7 @@
<!-- 发送名片 -->
<view v-if="showDetailBtn" class="mini-detail" :style="detailBtnStyle" hover-class="btn-press" @tap.stop="onDetail">
<text class="detail-text">{{ detailBtnText || '发送名片' }}</text>
<text class="detail-text" :style="detailTextStyle">{{ detailBtnText || '发送名片' }}</text>
</view>
</view>
</view>
@@ -272,16 +272,41 @@ export default {
return this.$util.objToStyle({ background: avatarBg(this.card) });
},
nameStyle() {
return this.$util.objToStyle({ color: this.c.nameColor || CardTokens.color.text });
return this.$util.objToStyle({
color: this.c.nameColor || CardTokens.color.text,
fontSize: px2rpx(num(this.c.nameSize, 17)) + 'rpx',
});
},
/** 名片头衔(设计器 card_title): 默认 13px = 26rpx, 与副行 24rpx 区分 */
cardTitleStyle() {
return this.$util.objToStyle({
color: this.c.infoColor || CardTokens.color.textSub,
fontSize: px2rpx(num(this.c.cardTitleSize, 13)) + 'rpx',
});
},
/** 副行(公司/职位)与空态提示共用: 默认 12px = 24rpx */
subTextStyle() {
return this.$util.objToStyle({ color: this.c.infoColor || CardTokens.color.textSub });
return this.$util.objToStyle({
color: this.c.infoColor || CardTokens.color.textSub,
fontSize: px2rpx(num(this.c.subSize, 12)) + 'rpx',
});
},
/** labelColor 纯色(资料行图标/二维码提示用, 不带字号) */
labelStyle() {
return this.$util.objToStyle({ color: this.c.labelColor || CardTokens.color.textLabel });
},
/** 资料行文字标签: 默认 12px = 24rpx */
rowLabelStyle() {
return this.$util.objToStyle({
color: this.c.labelColor || CardTokens.color.textLabel,
fontSize: px2rpx(num(this.c.labelSize, 12)) + 'rpx',
});
},
valueStyle() {
return this.$util.objToStyle({ color: this.c.infoColor || CardTokens.color.textSub });
return this.$util.objToStyle({
color: this.c.infoColor || CardTokens.color.textSub,
fontSize: px2rpx(num(this.c.valueSize, 12)) + 'rpx',
});
},
badgeStyle() {
return this.$util.objToStyle({ background: avatarBg(this.card) });
@@ -299,7 +324,10 @@ export default {
});
},
actPrimaryTextStyle() {
return this.$util.objToStyle({ color: '#FFFFFF' });
return this.$util.objToStyle({
color: '#FFFFFF',
fontSize: px2rpx(num(this.c.actSize, 12)) + 'rpx',
});
},
actGhostStyle() {
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
@@ -312,7 +340,17 @@ export default {
});
},
actGhostTextStyle() {
return this.$util.objToStyle({ color: (this.card && this.card.theme_color) || CardTokens.color.primary });
return this.$util.objToStyle({
color: (this.card && this.card.theme_color) || CardTokens.color.primary,
fontSize: px2rpx(num(this.c.actSize, 12)) + 'rpx',
});
},
/** 发送名片按钮文字: 默认 13px = 26rpx */
detailTextStyle() {
return this.$util.objToStyle({
color: '#FFFFFF',
fontSize: px2rpx(num(this.c.btnSize, 13)) + 'rpx',
});
},
detailBtnStyle() {
return this.$util.objToStyle({