feat(card-diy): band/卡片容器/head 样式属性可配置(2.19.11)

mini.vue: bandShow/bandBg/bandHeight + wrapMarginTop/Bottom + headBg/headPadV/headPadH
show/self: miniConfig 透传 8 字段
qr-style 测试: bandStyle 断言适配新实现(自定义背景+高度)

前端 7 套 123 项全绿

components-diy/diy-card-mini.vue

@@ -25,7 +25,7 @@
 
 		<!-- 名片卡(精品名片 show 同款版式: 蓝底顶带 + 白卡压边; 角标压在左上) -->
 		<view v-else class="mini-card-wrap">
-			<view class="mini-band" :style="bandStyle"></view>
+			<view v-if="bandShow" class="mini-band" :style="bandStyle"></view>
 			<view class="mini-card fade-up" :style="wrapStyle" :class="{ 'qr-at-corner': qrPos === 'corner' }">
 			<!-- 角标插槽(如 self 组件的「我的名片」) -->
 			<view class="mini-badge-slot">
@@ -267,12 +267,18 @@ export default {
 		},
 		wrapStyle() {
 			const c = this.c;
-			return this.$util.objToStyle({
+			const style = {
 				background: flagOn(c.useCover, false) && this.card && this.card.cover ? 'transparent' : (c.bgColor || CardTokens.color.bg),
 				borderRadius: px2rpx(num(c.borderRadius, CardTokens.radius.md)) + 'rpx',
 				padding: px2rpx(num(c.padding, CardTokens.space.lg)) + 'rpx',
 				boxShadow: flagOn(c.showShadow, true) ? CardTokens.shadow.card : 'none',
-			});
+			};
+			// 2.19.11: 外边距可配
+			const mt = num(c.wrapMarginTop, 0);
+			const mb = num(c.wrapMarginBottom, 0);
+			if (mt > 0) style.marginTop = px2rpx(mt) + 'rpx';
+			if (mb > 0) style.marginBottom = px2rpx(mb) + 'rpx';
+			return this.$util.objToStyle(style);
 		},
 		showCover() {
 			return flagOn(this.c.useCover, false) && !!(this.card && this.card.cover);
@@ -413,11 +419,16 @@ export default {
 		 */
 		headThemeStyle() {
 			const pad = px2rpx(num(this.c.padding, CardTokens.space.lg));
-			return this.$util.objToStyle({
+			const style = {
-				background: themeGradient(this.card),
 				margin: '-' + pad + 'rpx -' + pad + 'rpx 0',
-				padding: '32rpx ' + pad + 'rpx 28rpx',
+			};
-			});
+			// 2.19.11: headBg 自定义或主题渐变; headPadV/headPadH 可配
+			const bg = String(this.c.headBg || '').trim();
+			style.background = bg || themeGradient(this.card);
+			const padV = num(this.c.headPadV, 32);
+			const padH = num(this.c.headPadH, 0) || num(this.c.padding, CardTokens.space.lg);
+			style.padding = px2rpx(padV) + 'rpx ' + px2rpx(padH) + 'rpx';
+			return this.$util.objToStyle(style);
 		},
 		/** 资料区标题(2.17): 默认关(历史配置无此字段时不出标题) */
 		rowsTitleShow() {
@@ -559,9 +570,18 @@ export default {
 		gradientStyle() {
 			return this.$util.objToStyle({ background: themeGradient(this.card) });
 		},
+		/** 2.19.11: 顶带显隐(默认关) */
+		bandShow() {
+			return flagOn(this.c.bandShow, false);
+		},
 		bandStyle() {
-			// 蓝色顶带底色: 名片主题渐变(精选名片 show 同款)
+			// 2.19.11: bandBg 自定义或名片主题渐变; bandHeight 控高度
-			return this.$util.objToStyle({ background: themeGradient(this.card) });
+			const bg = String(this.c.bandBg || '').trim();
+			 const h = num(this.c.bandHeight, 8);
+			return this.$util.objToStyle({
+				background: bg || themeGradient(this.card),
+				height: px2rpx(h) + 'rpx',
+			});
 		},
 		shareBtnStyle() {
 			// 分享抽屉主按钮(复制链接): 主题色

components-diy/diy-card-self.vue

@@ -140,6 +140,14 @@ export default {
 				qrBlockBg: v.qrBlockBg,
 				qrBlockRadius: v.qrBlockRadius,
 				qrBlockPad: v.qrBlockPad,
+				bandShow: v.bandShow,
+				bandBg: v.bandBg,
+				bandHeight: v.bandHeight,
+				wrapMarginTop: v.wrapMarginTop,
+				wrapMarginBottom: v.wrapMarginBottom,
+				headBg: v.headBg,
+				headPadV: v.headPadV,
+				headPadH: v.headPadH,
 			};
 		},
 		boxStyle() {

components-diy/diy-card-show.vue

@@ -105,6 +105,14 @@ export default {
 				qrBlockBg: v.qrBlockBg,
 				qrBlockRadius: v.qrBlockRadius,
 				qrBlockPad: v.qrBlockPad,
+				bandShow: v.bandShow,
+				bandBg: v.bandBg,
+				bandHeight: v.bandHeight,
+				wrapMarginTop: v.wrapMarginTop,
+				wrapMarginBottom: v.wrapMarginBottom,
+				headBg: v.headBg,
+				headPadV: v.headPadV,
+				headPadH: v.headPadH,
 			};
 		},
 	},

tests/diy-card-qr-style.test.js

@@ -177,8 +177,8 @@ test('mini: 蓝色顶带版式(2026-10-23 与精选名片 show 同款: 自适应
     assert.match(miniSrc, /class="mini-card-wrap"/);
     assert.match(miniSrc, /class="mini-band" :style="bandStyle"/);
     assert.match(miniSrc, /class="mini-card fade-up" :style="wrapStyle"/);
-    // 计算属性: 顶带底色走主题渐变(与 show bandStyle 同口径)
+    // 计算属性: 顶带底色可自定义(bandBg)或回落主题渐变; 高度可配(bandHeight)
-    assert.match(miniSrc, /bandStyle\(\)\s*\{\s*return this\.\$util\.objToStyle\(\{\s*background: themeGradient\(this\.card\)\s*\}\);/);
+    assert.match(miniSrc, /bandStyle\(\)\s*\{[\s\S]*?bandBg[\s\S]*?themeGradient\(this\.card\)/);
     // CSS: wrap 撑露沿 + band 拉伸(top:-40rpx / bottom:88rpx) + 圆角(顶直底弧)
     assert.match(miniSrc, /\.mini-card-wrap \{\s*position: relative;\s*margin-top: 40rpx;/);
     assert.match(miniSrc, /\.mini-band \{\s*position: absolute;[\s\S]*?top: -40rpx;[\s\S]*?bottom: 88rpx;[\s\S]*?border-radius: 0 0 28rpx 28rpx;/);