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:
@@ -27,8 +27,8 @@
|
||||
<image v-if="item.avatar" class="avatar-img" :src="$util.img(item.avatar)" mode="aspectFill" />
|
||||
<text v-else class="avatar-initial">{{ initialOf(item.name) }}</text>
|
||||
</view>
|
||||
<text class="scroll-name" :style="nameStyle">{{ item.name || '未命名名片' }}</text>
|
||||
<text v-if="infoLine(item)" class="scroll-meta" :style="infoStyle">{{ infoLine(item) }}</text>
|
||||
<text class="scroll-name" :style="scrollNameStyle">{{ item.name || '未命名名片' }}</text>
|
||||
<text v-if="infoLine(item)" class="scroll-meta" :style="scrollMetaStyle">{{ infoLine(item) }}</text>
|
||||
<text v-if="isEnterprise(item)" class="item-badge" :style="badgeStyle(item)">企业</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -46,10 +46,10 @@
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<view class="name-row">
|
||||
<text class="item-name" :style="nameStyle">{{ item.name || '未命名名片' }}</text>
|
||||
<text class="item-name" :style="gridNameStyle">{{ item.name || '未命名名片' }}</text>
|
||||
<text v-if="isEnterprise(item)" class="item-badge" :style="badgeStyle(item)">企业</text>
|
||||
</view>
|
||||
<text v-if="infoLine(item)" class="item-meta" :style="infoStyle">{{ infoLine(item) }}</text>
|
||||
<text v-if="infoLine(item)" class="item-meta" :style="metaStyle">{{ infoLine(item) }}</text>
|
||||
</view>
|
||||
<text v-if="showArrow" class="item-arrow" :style="infoStyle">›</text>
|
||||
</view>
|
||||
@@ -129,11 +129,40 @@ export default {
|
||||
});
|
||||
},
|
||||
titleStyle() {
|
||||
return this.$util.objToStyle({ color: this.v.titleColor || CardTokens.color.text });
|
||||
return this.$util.objToStyle({
|
||||
color: this.v.titleColor || CardTokens.color.text,
|
||||
fontSize: px2rpx(num(this.v.titleSize, 16)) + 'rpx',
|
||||
});
|
||||
},
|
||||
nameStyle() {
|
||||
return this.$util.objToStyle({ color: this.v.nameColor || CardTokens.color.text });
|
||||
/** 网格/列表卡片姓名: 字号可配(默认 14px = 28rpx) */
|
||||
gridNameStyle() {
|
||||
return this.$util.objToStyle({
|
||||
color: this.v.nameColor || CardTokens.color.text,
|
||||
fontSize: px2rpx(num(this.v.nameSize, 14)) + 'rpx',
|
||||
});
|
||||
},
|
||||
/** 横滑竖卡姓名: 比网格小一档(默认 13px = 26rpx, 与历史渲染一致) */
|
||||
scrollNameStyle() {
|
||||
return this.$util.objToStyle({
|
||||
color: this.v.nameColor || CardTokens.color.text,
|
||||
fontSize: px2rpx(num(this.v.nameSize, 14) - 1) + 'rpx',
|
||||
});
|
||||
},
|
||||
/** 网格/列表卡片信息行: 字号可配(默认 11px = 22rpx) */
|
||||
metaStyle() {
|
||||
return this.$util.objToStyle({
|
||||
color: this.v.infoColor || CardTokens.color.textSub,
|
||||
fontSize: px2rpx(num(this.v.infoSize, 11)) + 'rpx',
|
||||
});
|
||||
},
|
||||
/** 横滑竖卡信息行: 比网格小一档(默认 10px = 20rpx, 与历史渲染一致) */
|
||||
scrollMetaStyle() {
|
||||
return this.$util.objToStyle({
|
||||
color: this.v.infoColor || CardTokens.color.textSub,
|
||||
fontSize: px2rpx(num(this.v.infoSize, 11) - 1) + 'rpx',
|
||||
});
|
||||
},
|
||||
/** infoColor 纯色(箭头/空态用, 不带字号) */
|
||||
infoStyle() {
|
||||
return this.$util.objToStyle({ color: this.v.infoColor || CardTokens.color.textSub });
|
||||
},
|
||||
@@ -141,10 +170,15 @@ export default {
|
||||
return this.$util.objToStyle({
|
||||
color: CardTokens.color.primary,
|
||||
background: 'rgba(47,107,255,0.08)',
|
||||
// 人数徽标比信息行小一档(默认 10px = 20rpx, 与历史渲染一致)
|
||||
fontSize: px2rpx(num(this.v.infoSize, 11) - 1) + 'rpx',
|
||||
});
|
||||
},
|
||||
moreStyle() {
|
||||
return this.$util.objToStyle({ color: CardTokens.color.textLabel });
|
||||
return this.$util.objToStyle({
|
||||
color: CardTokens.color.textLabel,
|
||||
fontSize: px2rpx(num(this.v.infoSize, 11)) + 'rpx',
|
||||
});
|
||||
},
|
||||
itemStyle() {
|
||||
const gap = num(this.v.gap, 10);
|
||||
|
||||
Reference in New Issue
Block a user