chore：滑动图片的上下左间距可以后台自定义调节

.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

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 项间距配置:
+		// 后台"滑动图片"组件(componentName = ImageNav)的 3 项间距配置。
-		//   1) 图片横向间距: 相邻图片项之间的横向间隔
+		// 字段名已用线上接口 POST /api/diyview/info(uniacid=312, DIY_VIEW_INDEX) 核对, 实际为:
-		//   2) 图片上间距  : 图片区域内侧的上内边距
+		//   imageSpacing        图片横向间距: 相邻图片项之间的横向间隔
-		//   3) 图片下间距  : 图片区域内侧的下内边距
+		//   imageSpacingTop     图片上间距  : 图片区域内侧的上内边距
-		// 单位: 按项目惯例(与商品 goodsMarginNum 一致)换算 rpx = 后台数值 × 2
+		//   imageSpacingBottom  图片下间距  : 图片区域内侧的下内边距
-		// 字段名兼容: 后台各端命名未统一, 这里对常见命名做归一化匹配(忽略大小写/下划线/中划线),
+		// 单位: 按项目惯例(与 diy-group 的 margin.top、图片轮播的 margin.both 一致)换算 rpx = 后台数值 × 2
-		//   并向下探测 value.imageSpacing / value.margin / value.padding 等嵌套容器,
+		// 容错: 除后台现用命名外, 仍按归一化(忽略大小写/下划线/中划线)兼容其它命名,
-		//   保证后端用哪种命名都能生效。
+		//   并向下探测 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',
+					['imagespacing', 'imagespacinghorizontal', 'imagehorizontalspacing', 'imagespacingboth', 'imagespacenum',
-						'horizontalspace', 'horizontalspacenum', 'imagegap', 'space', 'spacenum', 'marginnum', 'gap'],
+						'imagemargin', 'imagemarginnum', 'imagespace', 'horizontalspacing', 'horizontalspacenum', 'imagegap',
-					['horizontalspace', 'imagespace', 'imagemargin', 'spacenum', 'marginnum', 'imagegap', 'gap'],
+						'spacenum', 'marginnum', 'imageverticalspace', 'space', 'gap'],
-					['horizontal', 'horizontalnum', 'lr', 'leftright', 'both', 'bothnum', 'num', 'margin', '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',
+					['imagespacingtop', 'imagetopspacing', 'imagespacetop', 'imagetopspace', 'imagepaddingtop',
-						'spacingtop', 'topspace', 'margintop'],
+						'paddingtop', 'spacingtop', 'topspace', 'margintop'],
-					['paddingtop', 'spacingtop', 'topspace', 'margintop'],
+					['imagespacingtop', 'paddingtop', 'spacingtop', 'topspacing', 'topspace', 'margintop'],
-					['top', 'topnum', 'paddingtop', 'margintop', 'spacetop']
+					['top', 'topnum', 'paddingtop', 'margintop', 'spacetop', 'spacingtop']
 				),
-				// 图片下间距
+				// 图片下间距 —— 后台现用命名 imageSpacingBottom
 				paddingBottom: pick(
-					['imagepaddingbottom', 'imagespacingbottom', 'imagespacebottom', 'imagebottomspace', 'paddingbottom',
+					['imagespacingbottom', 'imagebottomspacing', 'imagespacebottom', 'imagebottomspace', 'imagepaddingbottom',
-						'spacingbottom', 'bottomspace', 'marginbottom'],
+						'paddingbottom', 'spacingbottom', 'bottomspace', 'marginbottom'],
-					['paddingbottom', 'spacingbottom', 'bottomspace', 'marginbottom'],
+					['imagespacingbottom', 'paddingbottom', 'spacingbottom', 'bottomspacing', 'bottomspace', 'marginbottom'],
-					['bottom', 'bottomnum', 'paddingbottom', 'marginbottom', 'spacebottom']
+					['bottom', 'bottomnum', 'paddingbottom', 'marginbottom', 'spacebottom', 'spacingbottom']
 				)
 			};
 		},