From 724e7ac1347f2a55cc3e484a3ea657b7a4d2e9f9 Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Wed, 21 Oct 2026 16:05:59 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E7=B2=BE=E9=80=89=E5=90=8D?=
 =?UTF-8?q?=E7=89=87=E7=BB=84=E4=BB=B6=E5=8F=AF=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E5=BC=80=E5=90=AF=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-card-show.vue | 48 ++++++++++++++++++++++++++++++--
 tests/diy-card-qr-style.test.js  |  7 +++++
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue
index 6bc8406..363f37c 100644
--- a/components-diy/diy-card-show.vue
+++ b/components-diy/diy-card-show.vue
@@ -20,9 +20,13 @@
 			<view class="show-band" :style="bandStyle"></view>
 
 			<view class="show-card" :style="cardShellStyle">
-				<!-- 头部: 姓名/职位 左, 小二维码"预览名片" 右 -->
+				<!-- 头部: 头像(面板可关, 关后只留姓名/职位) + 姓名/职位 左, 小二维码"预览名片" 右 -->
 				<view class="card-head">
-					<view class="head-info">
+					<view v-if="showAvatarBlock" class="card-avatar" :style="avatarStyle">
+						<image v-if="card.avatar" class="avatar-img" :src="$util.img(card.avatar)" mode="aspectFill" />
+						<text v-else class="avatar-initial">{{ initialOf(card.name) }}</text>
+					</view>
+					<view class="head-info" :class="{ 'with-avatar': showAvatarBlock }">
 						<text class="card-name" :style="nameStyle">{{ card.name || '未命名名片' }}</text>
 						<text v-if="jobLine" class="card-job" :style="subStyle">{{ jobLine }}</text>
 					</view>
@@ -62,7 +66,7 @@
 // 自绘参考图版式 —— 主题色顶栏衬底 + 白卡压边 + 右上小二维码(预览名片) +
 // 图标资料行 + 卡外「发名片」胶囊。面板仅颜色/底色/圆角/阴影/行数继续生效。
 import {
-	CardTokens, px2rpx, num, themeGradient, visibleRows, rowIconFor, rowActOf,
+	CardTokens, px2rpx, num, flagOn, initialOf, avatarBg, themeGradient, visibleRows, rowIconFor, rowActOf,
 } from './diy-card-common.js';
 
 export default {
@@ -94,6 +98,13 @@ export default {
 		bandStyle() {
 			return this.$util.objToStyle({ background: themeGradient(this.card) });
 		},
+		/** 头像开关: 面板「显示头像」(历史配置无此字段默认显示; 关后头部只留姓名/职位) */
+		showAvatarBlock() {
+			return flagOn(this.c.showAvatar, true);
+		},
+		avatarStyle() {
+			return this.$util.objToStyle({ background: avatarBg(this.card) });
+		},
 		/** 职位行: 职位优先, 缺失退公司/名片标题(参考图只显一行) */
 		jobLine() {
 			const card = this.card || {};
@@ -158,6 +169,8 @@ export default {
 		this.fetchData();
 	},
 	methods: {
+		// 模板无法访问模块导入, 需挂到实例(diy-card-mini 同款写法); 头像缺图时显示姓氏首字
+		initialOf,
 		fetchData() {
 			const cardId = String((this.value || {}).cardId || '').trim();
 			if (cardId === '') {
@@ -280,12 +293,41 @@ export default {
 				align-items: flex-start;
 				justify-content: space-between;
 
+				/* 头像(面板「显示头像」可关): 圆形, 底色主题色, 缺图显示姓名首字 */
+				.card-avatar {
+					flex-shrink: 0;
+					width: 104rpx;
+					height: 104rpx;
+					border-radius: 50%;
+					overflow: hidden;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.avatar-img {
+						width: 100%;
+						height: 100%;
+						display: block;
+					}
+
+					.avatar-initial {
+						font-size: 42rpx;
+						font-weight: 700;
+						color: #ffffff;
+					}
+				}
+
 				.head-info {
 					flex: 1;
 					min-width: 0;
 					display: flex;
 					flex-direction: column;
 
+					/* 与头像的间距只在头像显示时存在(关闭后姓名列与资料行左缘对齐) */
+					&.with-avatar {
+						margin-left: 24rpx;
+					}
+
 					.card-name {
 						font-size: 38rpx;
 						font-weight: 700;
diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js
index 9f3f77d..59badc9 100644
--- a/tests/diy-card-qr-style.test.js
+++ b/tests/diy-card-qr-style.test.js
@@ -182,6 +182,13 @@ test('self: miniConfig 透传头像+二维码新六字段', () => {
     assert.match(selfSrc, /qrTipShow:\s*v\.qrTipShow/);
 });
 
+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">/);
+    // 反例形态: 不允许出现常显头像(绕过开关)
+    assert.ok(!showSrc.includes('<view class="card-avatar"'));
+});
+
 test('show: 自绘版式自带小二维码(预览名片 + 点击进详情, 尺寸面板可调)', () => {
     assert.match(showSrc, /class="card-qr"/);
     assert.match(showSrc, /\$util\.img\(card\.qr_url\)/);