chore：我的名片快捷按钮样式

2026-10-22 16:01:32 +08:00
parent df9db2e2ed
commit 31f67c109b
4 changed files with 77 additions and 32 deletions
--- a/components-diy/diy-card-mini.vue
+++ b/components-diy/diy-card-mini.vue
@@ -23,7 +23,7 @@
 			</view>
 		</view>

-		<!-- 名片卡 -->
+		<!-- 名片卡(白卡平铺; 「我的名片」角标压在左上) -->
 		<view v-else class="mini-card fade-up" :style="wrapStyle" :class="{ 'qr-at-corner': qrPos === 'corner' }">
 			<!-- 角标插槽(如 self 组件的「我的名片」) -->
 			<view class="mini-badge-slot">
@@ -84,11 +84,12 @@
 				<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
 			</view>

-			<!-- 快捷操作(芯片, 最小触达 72rpx; 首个为主动作) -->
+			<!-- 快捷操作(芯片; 2026-10-22 参考图定稿: 全部实心主题色胶囊(「打电话」同款);
+		     尺寸/圆角走 .act-chip CSS 类, 内联只给背景色 —— 避免内联样式锁死导致 CSS 改动不生效) -->
 			<view v-if="showActs && acts.length" class="mini-acts" :style="cornerClearStyle">
 				<view v-for="(act, i) in acts" :key="i" class="act-chip"
-					:style="i === 0 ? actPrimaryStyle : actGhostStyle" hover-class="btn-press" @tap.stop="onAct(act)">
-					<text class="act-text" :style="i === 0 ? actPrimaryTextStyle : actGhostTextStyle">{{ act.label }}</text>
+					:style="actStyle" hover-class="btn-press" @tap.stop="onAct(act)">
+					<text class="act-text" :style="actTextStyle">{{ act.label }}</text>
 				</view>
 			</view>

@@ -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;
 				}
 			}
--- a/components-diy/diy-card-self.vue
+++ b/components-diy/diy-card-self.vue
@@ -8,7 +8,8 @@
 			</view>
 		</view>

-		<!-- 名片卡(已登录=本人名片 / 未登录=兜底名片); loading 时基件出骨架屏 -->
+		<!-- 名片卡(已登录=本人名片 / 未登录=兜底名片); loading 时基件出骨架屏;
+		     「我的名片」角标恒显(参考图 2026-10-22: 兜底名片也带角标) -->
 		<diy-card-mini
 			v-else-if="loading || card"
 			:card="card"
@@ -18,13 +19,20 @@
 			@row-act="doAct"
 			@detail="goDetail"
 		>
-			<template v-if="isSelf" slot="badge">
+			<template slot="badge">
 				<view class="self-badge" :style="badgeStyle">
 					<text class="badge-text">我的名片</text>
 				</view>
 			</template>
 		</diy-card-mini>

+		<!-- 未登录提示条(参考图 2026-10-22): 兜底名片下方灰条, 左文案右链接 -->
+		<view v-if="!hasToken && fallbackMode !== 'none' && !loading && card"
+			class="self-login-bar" hover-class="btn-press">
+			<text class="login-bar-text" :style="subTextStyle" @tap="goLogin">{{ value.loginBarTip || '登录后即可展示我的名片' }}</text>
+			<text class="login-bar-link" :style="loginLinkStyle" @tap="goCardList">{{ value.loginBarBtnText || '去看看名片' }}</text>
+		</view>
+
 		<!-- 已登录但没有任何名片可显示 -->
 		<view v-else-if="!loading" class="self-empty" :style="boxStyle">
 			<text class="empty-icon">🪪</text>
@@ -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%;
--- 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;
--- 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, /<view v-else class="mini-card fade-up" :style="wrapStyle"/);
+    // 反例: 顶带版式禁止回归(2026-10-22 上午曾引入, 参考图定稿后撤销)
+    assert.ok(!miniSrc.includes('mini-band') && !miniSrc.includes('mini-block'));
+});
+
+test('mini: 企业徽标固定红底(参考图口径, 与头像底色解耦)', () => {
+    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, /<template slot="badge">/);
+    assert.match(selfSrc, /<text class="badge-text">我的名片<\/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, /<view v-if="showAvatarBlock" class="card-avatar" :style="avatarStyle">/);