From 31f67c109bfdd556cf0ecf5ee72fa4cb28ad6e0d Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Thu, 22 Oct 2026 16:01:32 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E6=88=91=E7=9A=84=E5=90=8D?=
=?UTF-8?q?=E7=89=87=E5=BF=AB=E6=8D=B7=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components-diy/diy-card-mini.vue | 44 ++++++++++++--------------------
components-diy/diy-card-self.vue | 37 +++++++++++++++++++++++++--
components-diy/diy-card-show.vue | 7 ++---
tests/diy-card-qr-style.test.js | 21 +++++++++++++++
4 files changed, 77 insertions(+), 32 deletions(-)
diff --git a/components-diy/diy-card-mini.vue b/components-diy/diy-card-mini.vue
index 67a9019..775fc5d 100644
--- a/components-diy/diy-card-mini.vue
+++ b/components-diy/diy-card-mini.vue
@@ -23,7 +23,7 @@
-
+
@@ -84,11 +84,12 @@
{{ qrTip || '扫码查看完整名片' }}
-
+
- {{ act.label }}
+ :style="actStyle" hover-class="btn-press" @tap.stop="onAct(act)">
+ {{ act.label }}
@@ -304,36 +305,20 @@ export default {
return this.$util.objToStyle({ color: this.c.infoColor || CardTokens.color.textSub });
},
badgeStyle() {
- return this.$util.objToStyle({ background: avatarBg(this.card) });
+ // 企业徽标固定红底(参考图 2026-10-22 口径), 与头像底色解耦
+ return this.$util.objToStyle({ background: '#FA5151' });
},
toggleStyle() {
return this.$util.objToStyle({ color: (this.card && this.card.theme_color) || CardTokens.color.primary });
},
- actPrimaryStyle() {
+ actStyle() {
+ // 快捷芯片统一实心主题色(「打电话」同款); 尺寸/圆角由 .act-chip CSS 类控制
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
- return this.$util.objToStyle({
- background: theme,
- height: px2rpx(CardTokens.touch.chipHeight) + 'rpx',
- padding: '0 ' + px2rpx(CardTokens.space.xl) + 'rpx',
- borderRadius: px2rpx(CardTokens.radius.pill) + 'rpx',
- });
+ return this.$util.objToStyle({ background: theme });
},
- actPrimaryTextStyle() {
+ actTextStyle() {
return this.$util.objToStyle({ color: '#FFFFFF' });
},
- actGhostStyle() {
- const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
- return this.$util.objToStyle({
- background: 'transparent',
- border: '2rpx solid ' + theme,
- height: px2rpx(CardTokens.touch.chipHeight) + 'rpx',
- padding: '0 ' + px2rpx(CardTokens.space.lg) + 'rpx',
- borderRadius: px2rpx(CardTokens.radius.pill) + 'rpx',
- });
- },
- actGhostTextStyle() {
- return this.$util.objToStyle({ color: (this.card && this.card.theme_color) || CardTokens.color.primary });
- },
detailBtnStyle() {
return this.$util.objToStyle({
background: themeGradient(this.card),
@@ -574,10 +559,15 @@ export default {
align-items: center;
justify-content: center;
box-sizing: border-box;
+ /* 小胶囊(2026-10-22 定稿): 显式给高/内距/圆角(内联只出背景色, 尺寸走本类);
+ 72rpx 触达标准, 按用户反馈放大一档 */
+ height: 72rpx;
+ padding: 0 32rpx;
margin: 0 16rpx 16rpx 0;
+ border-radius: 36rpx;
.act-text {
- font-size: 24rpx;
+ font-size: 26rpx;
font-weight: 500;
}
}
diff --git a/components-diy/diy-card-self.vue b/components-diy/diy-card-self.vue
index d0539e3..63f452c 100644
--- a/components-diy/diy-card-self.vue
+++ b/components-diy/diy-card-self.vue
@@ -8,7 +8,8 @@
-
+
-
+
我的名片
+
+
+ {{ value.loginBarTip || '登录后即可展示我的名片' }}
+ {{ value.loginBarBtnText || '去看看名片' }}
+
+
🪪
@@ -117,6 +125,9 @@ export default {
badgeStyle() {
return this.$util.objToStyle({ background: (this.card || {}).theme_color || '#2F6BFF' });
},
+ loginLinkStyle() {
+ return this.$util.objToStyle({ color: (this.card || {}).theme_color || '#2F6BFF' });
+ },
loginBtnStyle() {
return this.$util.objToStyle({
background: (this.card || {}).theme_color || '#2F6BFF',
@@ -235,6 +246,28 @@ export default {
}
}
+ /* 未登录提示条(参考图 2026-10-22): 兜底名片下方, 浅灰圆角条 左文案右链接 */
+ .self-login-bar {
+ margin-top: 20rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #F5F6F8;
+ border-radius: 12rpx;
+ padding: 20rpx 24rpx;
+
+ .login-bar-text {
+ font-size: 24rpx;
+ }
+
+ .login-bar-link {
+ font-size: 24rpx;
+ font-weight: 600;
+ flex-shrink: 0;
+ margin-left: 16rpx;
+ }
+ }
+
.self-login,
.self-empty {
width: 100%;
diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue
index c9216d2..f618af8 100644
--- a/components-diy/diy-card-show.vue
+++ b/components-diy/diy-card-show.vue
@@ -696,10 +696,11 @@ export default {
align-items: center;
justify-content: center;
box-sizing: border-box;
- height: 64rpx;
- padding: 0 30rpx;
+ /* 小胶囊(2026-10-22 参考图定稿): 矮一点/收窄内距, 内容短时不再近似圆形 */
+ height: 56rpx;
+ padding: 0 24rpx;
margin: 0 16rpx 16rpx 0;
- border-radius: 32rpx;
+ border-radius: 28rpx;
.act-text {
font-size: 24rpx;
diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js
index a2a3d97..062a1ad 100644
--- a/tests/diy-card-qr-style.test.js
+++ b/tests/diy-card-qr-style.test.js
@@ -156,6 +156,17 @@ test('common: qrTransform 位移(任一轴非零才输出; WXSS 支持 translate
// 2. mini.vue 基件契约
// =============================================================
+test('mini: 白卡平铺版式(2026-10-22 参考图定稿, 顶带方案已废弃)', () => {
+ // 名片卡分支直接渲染, 不再包 mini-block/mini-band
+ assert.match(miniSrc, / {
+ assert.match(miniSrc, /badgeStyle\(\)\s*\{\s*return this\.\$util\.objToStyle\(\{\s*background: '#FA5151'\s*\}\);/);
+});
+
test('mini: 头像开关(默认显示, 关掉只留姓名/职位)', () => {
assert.match(miniSrc, /showAvatarBlock\(\)\s*\{\s*return flagOn\(this\.c\.showAvatar,\s*true\)/);
// 模板头像块受开关控制(无 v-else 占位 —— 关掉即消失, 头部信息自然左移)
@@ -234,6 +245,16 @@ test('self: miniConfig 透传头像+二维码新六字段', () => {
assert.match(selfSrc, /qrTipShow:\s*v\.qrTipShow/);
});
+test('self: 「我的名片」角标恒显 + 未登录提示条(2026-10-22 参考图定稿)', () => {
+ // 角标不再依赖 isSelf(兜底名片也带「我的名片」角标)
+ assert.match(selfSrc, //);
+ assert.match(selfSrc, /我的名片<\/text>/);
+ // 未登录提示条: 兜底名片下方, 左文案(点去登录)右链接(点去看看名片)
+ assert.match(selfSrc, /v-if="!hasToken && fallbackMode !== 'none' && !loading && card"\s+class="self-login-bar"/);
+ assert.match(selfSrc, /class="login-bar-text" :style="subTextStyle" @tap="goLogin"/);
+ assert.match(selfSrc, /class="login-bar-link" :style="loginLinkStyle" @tap="goCardList"/);
+});
+
test('show: 头像开关(面板「显示头像」, 默认显示, 关后头部只留姓名/职位)', () => {
assert.match(showSrc, /showAvatarBlock\(\)\s*\{\s*return flagOn\(this\.c\.showAvatar,\s*true\)/);
assert.match(showSrc, //);