chore：精选名片组件可以支持头像开启关闭

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;

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\)/);