From 3d144a749201cf5a66eab2920ffef18e48333363 Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Thu, 22 Oct 2026 10:52:47 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E4=BA=8C=E7=BB=B4=E7=A0=81?=
=?UTF-8?q?=E7=9A=84=E5=B0=BA=E5=AF=B8=E5=8F=AF=E4=BB=A5=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components-diy/diy-card-show.vue | 79 +++++++++++++++++++++++++++++++-
tests/diy-card-qr-style.test.js | 25 ++++++++++
2 files changed, 103 insertions(+), 1 deletion(-)
diff --git a/components-diy/diy-card-show.vue b/components-diy/diy-card-show.vue
index dcb0e34..3a76489 100644
--- a/components-diy/diy-card-show.vue
+++ b/components-diy/diy-card-show.vue
@@ -20,6 +20,11 @@
+
+
+
+
+
@@ -35,6 +40,8 @@
{{ qrTipText }}
+
+
@@ -145,11 +152,31 @@ export default {
cardShellStyle() {
const c = this.c;
return this.$util.objToStyle({
- background: c.bgColor || CardTokens.color.bg,
+ // 封面图作背景时白底让位(封面图铺满整卡, mini 基件同口径)
+ background: this.showCover ? 'transparent' : (c.bgColor || CardTokens.color.bg),
borderRadius: px2rpx(num(c.borderRadius, 16)) + 'rpx',
boxShadow: c.showShadow === false ? 'none' : CardTokens.shadow.card,
});
},
+ /** 封面图作背景: 面板「名片设计资产 → 封面图作背景」(默认关; 名片未配封面图时不显示) */
+ showCover() {
+ return flagOn(this.c.useCover, false) && !!(this.card && this.card.cover);
+ },
+ /** 主题渐变饰条: 面板「名片设计资产 → 主题渐变饰条」(默认关) */
+ showGradBar() {
+ return flagOn(this.c.showGradient, false);
+ },
+ /** 名片 Logo: 面板「名片设计资产 → 名片 Logo」(默认关; 名片未配 Logo 不显示;
+ * 与头部档二维码同在右上, 自动避让 —— mini 基件同口径) */
+ showLogo() {
+ return flagOn(this.c.showLogo, false) && !!(this.card && this.card.logo) && !this.showQrHead;
+ },
+ /** 饰条底色: 名片主题渐变(未配渐变副色时 themeGradient 退化为纯主题色) */
+ gradBarStyle() {
+ return this.$util.objToStyle({
+ background: themeGradient(this.card),
+ });
+ },
/** 主题色顶栏: 名片主题渐变, 无主题退化默认主色 */
bandStyle() {
return this.$util.objToStyle({ background: themeGradient(this.card) });
@@ -503,6 +530,56 @@ export default {
width: auto;
overflow: hidden;
+ /* 封面图作背景(面板「封面图作背景」开 + 名片已配封面图才渲染):
+ 铺满整卡 + 半透明压暗遮罩(白字可读), mini 基件同款参数 */
+ .card-cover {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ }
+
+ .card-cover-scrim {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(15, 23, 42, 0.45);
+ z-index: 1;
+ }
+
+ /* 内容层压过封面/遮罩(绝对定位的封面默认盖住静态内容) */
+ .card-head,
+ .card-rows,
+ .card-acts,
+ .qr-center {
+ position: relative;
+ z-index: 2;
+ }
+
+ /* 主题渐变饰条: 卡片顶部横条(细高圆角, 底色走 gradBarStyle 内联主题渐变) */
+ .card-grad-bar {
+ position: relative;
+ z-index: 2;
+ height: 14rpx;
+ border-radius: 8rpx;
+ margin-bottom: 28rpx;
+ }
+
+ /* 名片 Logo: 头部右侧小图(自动推到行尾; 头部档二维码显示时不渲染, 自动避让) */
+ .card-logo {
+ position: relative;
+ z-index: 2;
+ width: 96rpx;
+ height: 96rpx;
+ border-radius: 12rpx;
+ margin-left: auto;
+ flex-shrink: 0;
+ }
+
.card-head {
display: flex;
align-items: flex-start;
diff --git a/tests/diy-card-qr-style.test.js b/tests/diy-card-qr-style.test.js
index 0d8dd13..dcd08b8 100644
--- a/tests/diy-card-qr-style.test.js
+++ b/tests/diy-card-qr-style.test.js
@@ -239,6 +239,31 @@ test('show: 二维码位置四档(与面板下拉/mini 基件同口径, 未配
assert.match(showSrc, /qrTransform\(this\.c\.qrOffsetX,\s*this\.c\.qrOffsetY\)/);
});
+test('show: 封面图作背景(面板「名片设计资产 → 封面图作背景」, 默认关, 未配封面图不显示)', () => { assert.match(showSrc, /showCover\(\)\s*\{\s*return flagOn\(this\.c\.useCover,\s*false\) && !!\(this\.card && this\.card\.cover\)/);
+ // 开启后白卡底变透明, 封面图铺满整卡 + 压暗遮罩(mini 基件同款参数)
+ assert.match(showSrc, /background:\s*this\.showCover \? 'transparent' : \(c\.bgColor \|\| CardTokens\.color\.bg\)/);
+ assert.match(showSrc, //);
+ assert.match(showSrc, /<\/view>/);
+ assert.match(showSrc, /background: rgba\(15, 23, 42, 0\.45\);/);
+});
+
+test('show: 主题渐变饰条(面板「名片设计资产 → 主题渐变饰条」, 默认关)', () => {
+ assert.match(showSrc, /showGradBar\(\)\s*\{\s*return flagOn\(this\.c\.showGradient,\s*false\)/);
+ // 饰条底色走名片主题渐变
+ assert.match(showSrc, /gradBarStyle\(\)\s*\{\s*return this\.\$util\.objToStyle\(\{\s*background: themeGradient\(this\.card\),\s*\}\);/);
+ // 模板: 卡片顶部横条 + 细高圆角样式
+ assert.match(showSrc, /<\/view>/);
+ assert.match(showSrc, /\.card-grad-bar \{[\s\S]*?height: 14rpx;[\s\S]*?border-radius: 8rpx;/);
+});
+
+test('show: 名片 Logo 开关(面板「名片设计资产 → 名片 Logo」, 默认关; 未配 Logo 不显示; 头部档二维码同位避让)', () => {
+ assert.match(showSrc, /showLogo\(\)\s*\{\s*return flagOn\(this\.c\.showLogo,\s*false\) && !!\(this\.card && this\.card\.logo\) && !this\.showQrHead;/);
+ // 模板: 头部右侧 Logo 图
+ assert.match(showSrc, //);
+ // 样式: 头部右侧小图, margin-left:auto 推到行尾
+ assert.match(showSrc, /\.card-logo \{[\s\S]*?width: 96rpx;[\s\S]*?margin-left: auto;/);
+});
+
test('show: 发名片按钮开关(面板「底部按钮 → 发送名片按钮」, 默认显示; 文案消费 detailBtnText)', () => {
assert.match(showSrc, /showSendBtn\(\)\s*\{\s*return flagOn\(this\.c\.showDetailBtn,\s*true\)/);
assert.match(showSrc, /v-if="showSendBtn" class="show-send"/);