From 0f24f470483ffc7eb024d90e73f7a873714be3a2 Mon Sep 17 00:00:00 2001 From: jing <1683105490@qq.com> Date: Fri, 18 Sep 2026 15:26:05 +0800 Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E6=BB=91=E5=8A=A8=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E7=9A=84=E4=B8=8A=E4=B8=8B=E5=B7=A6=E9=97=B4=E8=B7=9D?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E5=90=8E=E5=8F=B0=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E8=B0=83=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .local.config.js | 2 +- components-diy/diy-image-nav.vue | 90 +++++++++++++++++++++++--------- 2 files changed, 66 insertions(+), 26 deletions(-) diff --git a/.local.config.js b/.local.config.js index 564de8a..d571fd9 100644 --- a/.local.config.js +++ b/.local.config.js @@ -243,7 +243,7 @@ const localDevConfig = ({ // })['local-11']; // 选择要使用的环境配置 // })['2811']; // 本地 //})['5g-317']; // 电磁兼容 -})['5g-351']; // +})['5g-312']; // // })['local-2']; // 本地 // })['local-11']; // 本地 // })['1-test']; // test diff --git a/components-diy/diy-image-nav.vue b/components-diy/diy-image-nav.vue index 999a736..37fcd4d 100644 --- a/components-diy/diy-image-nav.vue +++ b/components-diy/diy-image-nav.vue @@ -100,9 +100,47 @@ export default { } }, computed: { + // PR-FRONTEND-DIY-IMAGE-NAV-SPACING (2026-09-18): 组件背景色 + // 后台"组件背景"面板下发的字段是 componentBgColor(与图片轮播/搜索等组件一致); + // 兼容别名/数组形态/嵌套容器(避免后台换名或存成数组时前端读不到而完全不上色), + // 最后兜底组件级 pageBgColor(部分组件后台把组件背景存在这里)。 + // 空值/非法值(图片URL等)返回空串, 此时不输出 background-color, 保持历史透明视觉。 + componentBgColor() { + const v = this.value || {}; + const norm = k => String(k).toLowerCase().replace(/[\s_-]/g, ''); + const asColor = val => { + if (Array.isArray(val)) val = val[0]; + if (typeof val !== 'string') return ''; + const s = val.trim(); + if (!s) return ''; + // 排除图片/URL 等非颜色值 + if (/^(url\(|https?:|data:|upload\/|addon\/|\/)/i.test(s)) return ''; + return s; + }; + const sources = [v]; + ['style', 'config', 'setting', 'data'].forEach(k => { + if (v[k] && typeof v[k] === 'object' && !Array.isArray(v[k])) sources.push(v[k]); + }); + const candidates = [ + 'componentbgcolor', 'componentbackgroundcolor', 'componentcolor', 'componentbg', + 'bgcolor', 'backgroundcolor', 'background', + 'pagebgcolor' + ]; + for (let c = 0; c < candidates.length; c++) { + for (let s = 0; s < sources.length; s++) { + for (const key in sources[s]) { + if (norm(key) === candidates[c]) { + const color = asColor(sources[s][key]); + if (color) return color; + } + } + } + } + return ''; + }, componentStyle() { let style = ''; - style += 'background-color:' + this.value.componentBgColor + ';'; + if (this.componentBgColor) style += 'background-color:' + this.componentBgColor + ';'; if (this.value.componentAngle == 'round') { style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;'; @@ -203,14 +241,14 @@ export default { }, // ========== PR-FRONTEND-DIY-IMAGE-NAV-SPACING (2026-09-18): 图片自定义间距 ========== - // 后台"滑动图片"组件新增 3 项间距配置: - // 1) 图片横向间距: 相邻图片项之间的横向间隔 - // 2) 图片上间距 : 图片区域内侧的上内边距 - // 3) 图片下间距 : 图片区域内侧的下内边距 - // 单位: 按项目惯例(与商品 goodsMarginNum 一致)换算 rpx = 后台数值 × 2 - // 字段名兼容: 后台各端命名未统一, 这里对常见命名做归一化匹配(忽略大小写/下划线/中划线), - // 并向下探测 value.imageSpacing / value.margin / value.padding 等嵌套容器, - // 保证后端用哪种命名都能生效。 + // 后台"滑动图片"组件(componentName = ImageNav)的 3 项间距配置。 + // 字段名已用线上接口 POST /api/diyview/info(uniacid=312, DIY_VIEW_INDEX) 核对, 实际为: + // imageSpacing 图片横向间距: 相邻图片项之间的横向间隔 + // imageSpacingTop 图片上间距 : 图片区域内侧的上内边距 + // imageSpacingBottom 图片下间距 : 图片区域内侧的下内边距 + // 单位: 按项目惯例(与 diy-group 的 margin.top、图片轮播的 margin.both 一致)换算 rpx = 后台数值 × 2 + // 容错: 除后台现用命名外, 仍按归一化(忽略大小写/下划线/中划线)兼容其它命名, + // 并向下探测 value.imageSpacing / value.margin / value.padding 等嵌套容器。 // 兜底: 字段缺失/非法时返回 null, 由 imageSpacingStyle / imageItemStyle 回退历史视觉 // (横向 28rpx, 上/下沿用 CSS 的 16rpx), 老装修数据不受影响。 imageSpacingConfig() { @@ -227,10 +265,11 @@ export default { }; // 查找源: value 自身 + 常见嵌套容器(顶层优先) + // 注意: 后端偶发把 margin 存成数组(线上该组件 margin: []), 数组不能当容器取裸键, 直接跳过 const sources = [v]; ['imageSpacing', 'imageSpace', 'spacing', 'space', 'margin', 'padding', 'style', 'config', 'setting'] .forEach(k => { - if (v[k] && typeof v[k] === 'object') sources.push(v[k]); + if (v[k] && typeof v[k] === 'object' && !Array.isArray(v[k])) sources.push(v[k]); }); // 三级查找: ① 全源精确名 → ② 全源模糊包含名 → ③ 嵌套容器内的裸键 @@ -269,26 +308,27 @@ export default { }; return { - // 图片横向间距 + // 图片横向间距 —— 后台现用命名 imageSpacing(首项命中即可, 后面都是兼容别名) horizontal: pick( - ['imagemargin', 'imagemarginnum', 'imagespace', 'imagespacenum', 'imagehorizontalspace', - 'horizontalspace', 'horizontalspacenum', 'imagegap', 'space', 'spacenum', 'marginnum', 'gap'], - ['horizontalspace', 'imagespace', 'imagemargin', 'spacenum', 'marginnum', 'imagegap', 'gap'], - ['horizontal', 'horizontalnum', 'lr', 'leftright', 'both', 'bothnum', 'num', 'margin', 'space', 'gap'] + ['imagespacing', 'imagespacinghorizontal', 'imagehorizontalspacing', 'imagespacingboth', 'imagespacenum', + 'imagemargin', 'imagemarginnum', 'imagespace', 'horizontalspacing', 'horizontalspacenum', 'imagegap', + 'spacenum', 'marginnum', 'imageverticalspace', 'space', 'gap'], + ['horizontalspacing', 'imagespacing', 'imagespace', 'imagemargin', 'spacenum', 'marginnum', 'imagegap', 'gap'], + ['horizontal', 'horizontalnum', 'lr', 'leftright', 'both', 'bothnum', 'imagespacing', 'num', 'margin', 'space', 'gap'] ), - // 图片上间距 + // 图片上间距 —— 后台现用命名 imageSpacingTop paddingTop: pick( - ['imagepaddingtop', 'imagespacingtop', 'imagespacetop', 'imagetopspace', 'paddingtop', - 'spacingtop', 'topspace', 'margintop'], - ['paddingtop', 'spacingtop', 'topspace', 'margintop'], - ['top', 'topnum', 'paddingtop', 'margintop', 'spacetop'] + ['imagespacingtop', 'imagetopspacing', 'imagespacetop', 'imagetopspace', 'imagepaddingtop', + 'paddingtop', 'spacingtop', 'topspace', 'margintop'], + ['imagespacingtop', 'paddingtop', 'spacingtop', 'topspacing', 'topspace', 'margintop'], + ['top', 'topnum', 'paddingtop', 'margintop', 'spacetop', 'spacingtop'] ), - // 图片下间距 + // 图片下间距 —— 后台现用命名 imageSpacingBottom paddingBottom: pick( - ['imagepaddingbottom', 'imagespacingbottom', 'imagespacebottom', 'imagebottomspace', 'paddingbottom', - 'spacingbottom', 'bottomspace', 'marginbottom'], - ['paddingbottom', 'spacingbottom', 'bottomspace', 'marginbottom'], - ['bottom', 'bottomnum', 'paddingbottom', 'marginbottom', 'spacebottom'] + ['imagespacingbottom', 'imagebottomspacing', 'imagespacebottom', 'imagebottomspace', 'imagepaddingbottom', + 'paddingbottom', 'spacingbottom', 'bottomspace', 'marginbottom'], + ['imagespacingbottom', 'paddingbottom', 'spacingbottom', 'bottomspacing', 'bottomspace', 'marginbottom'], + ['bottom', 'bottomnum', 'paddingbottom', 'marginbottom', 'spacebottom', 'spacingbottom'] ) }; },