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:
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user