From 25636f81332a5c10bbb1fa9b6834e44282763959 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Thu, 11 Jun 2026 15:55:11 +0800
Subject: [PATCH] =?UTF-8?q?style(ns-newform,=20diy-form):=20=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E5=90=8E=E7=AB=AF=E6=A0=B7=E5=BC=8F=E8=A7=84=E8=8C=83?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 调整ns-newform的图片上传框样式，匹配后端design.css的.img-box样式参数
2. 简化diy-form的样式变量绑定，移除冗余的cssVars计算属性
3. 重构diy-form提交按钮样式，支持宽度百分比和尺寸预设，对齐后端设计规范
4. 优化表单布局类名逻辑，简化样式绑定代码
---
 components-diy/diy-form.vue          | 71 +++++++++++-----------------
 components/ns-newform/ns-newform.vue | 36 +++++++-------
 2 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/components-diy/diy-form.vue b/components-diy/diy-form.vue
index 3b293a7..d950bad 100644
--- a/components-diy/diy-form.vue
+++ b/components-diy/diy-form.vue
@@ -1,5 +1,5 @@
 <template>
-	<view data-component-name="diy-form" class="diy-from" :class="[formLayoutClass]" :style="[diyFormStyle, cssVars]">
+	<view data-component-name="diy-form" class="diy-from" :style="diyFormStyle">
 		<!-- Banner -->
 		<view v-if="value.show_banner && value.form_banner" class="form-banner" :style="bannerStyle">
 			<image :src="$util.img(value.form_banner)" mode="widthFix" class="banner-img" />
@@ -67,40 +67,6 @@ export default {
 		diyFormStyle() {
 			return this.style;
 		},
-		// 将后端 formConfig 写入 CSS 变量：与后端 design.css :root 对齐，
-		// 让 banner / tip / submit 与 ns-newform 子组件共享同一套样式变量
-		cssVars() {
-			const cfg = this.mergedFormConfig || {};
-			const rpx = (v) => {
-				if (v === '' || v === null || v === undefined) return '';
-				return typeof v === 'number' ? `${v}rpx` : `${v}`;
-			};
-			const showDivider = this._coerceBool(cfg.showRowDivider);
-			return {
-				'--form-padding-x': rpx(cfg.formPaddingX || 14),
-				'--banner-padding-x': rpx(cfg.bannerPaddingX || 0),
-				'--tip-padding-x': rpx(cfg.tipPaddingX || 14),
-				'--tip-font-size': rpx(cfg.tipFontSize || 24),
-				'--tip-color': cfg.tipColor || '#666666',
-				'--tip-bg-color': cfg.tipBgColor || '#ffffff',
-				'--row-padding-y': rpx(cfg.rowPaddingY || 4),
-				'--row-min-height': rpx(cfg.rowMinHeight || 60),
-				'--label-gap': rpx(cfg.labelGap || 16),
-				'--form-bg-color': cfg.formBgColor || '#ffffff',
-				'--row-divider-color': cfg.rowDividerColor || '#f0f0f0',
-				'--input-height': rpx(cfg.inputHeight || 60),
-				'--input-radius': rpx(cfg.inputRadius || 10),
-				'--label-fixed-width': rpx(cfg.labelFixedWidth || 180),
-				'--label-font-size': rpx(cfg.labelFontSize || 28),
-				'--label-color': cfg.labelColor || '#1f2937',
-				'--required-color': cfg.requiredColor || '#ef4444',
-				'--checked-color': cfg.checkedColor || '#ff4544',
-				'--submit-color': cfg.submitColor || '#ffffff',
-				'--submit-bg-color': cfg.submitBgColor || '#ff4544',
-				'--placeholder-color': '#ddd',
-				'--show-row-divider': showDivider ? '1' : '0'
-			};
-		},
 		// Banner 容器左右内边距（与后端 .form-preview-banner padding-x 对齐）
 		bannerStyle() {
 			return {
@@ -125,13 +91,24 @@ export default {
 				'background-color': cfg.formBgColor || '#ffffff'
 			};
 		},
-		// 提交按钮样式：颜色 / 背景色 / 高度 / 圆角 / 字号（与后端 .form-preview-submit button 对齐）
+		// 提交按钮样式：颜色 / 背景色 / 宽度（百分比）/ 上下内边距（控制高度）/ 圆角 / 字号
+		// 与后端 design.css .form-preview-submit button 对齐：
+		//  - 高度由 --submit-padding-y + 字号决定，避免硬编码 line-height
+		//  - 宽度由 --submit-width-percent 控制（10-100，clamp）
 		submitStyle() {
 			const cfg = this.mergedFormConfig || {};
+			// 宽度百分比：clamp 到 10-100
+			const widthPct = Math.min(100, Math.max(10, this._num(cfg.submitWidthPercent, 100)));
+			// 上下内边距：与后端 design.js submitSizeMap 对齐（small/medium/large → 8/16/28 rpx）
+			const submitPaddingMap = { small: 8, medium: 16, large: 28 };
+			const submitPaddingY = submitPaddingMap[cfg.submitSize] != null
+				? submitPaddingMap[cfg.submitSize]
+				: submitPaddingMap.medium;
 			return {
+				width: widthPct + '%',
+				padding: `${submitPaddingY}rpx 0`,
 				color: cfg.submitColor || '#ffffff',
 				'background-color': cfg.submitBgColor || '#ff4544',
-				'line-height': `${this._num(cfg.inputHeight, 60)}rpx`,
 				'border-radius': `${this._num(cfg.inputRadius, 10)}rpx`,
 				'font-size': `${this._num(cfg.labelFontSize, 28)}rpx`
 			};
@@ -140,9 +117,6 @@ export default {
 		submitText() {
 			return this.formCfg.submit_text || '提交';
 		},
-		formLayoutClass() {
-			return this.formCfg.form_layout === 'vertical' ? 'form-vertical' : 'form-horizontal';
-		},
 		// 后端把表单样式配置统一存放在 data.formConfig 子对象中（与后端 design.js getDefaultFormData().formConfig 字段名一致）。
 		// 这里做一次归一化：优先取 formConfig；如果历史数据是扁平结构（直接挂在 value 上），也做兼容。
 		formCfg() {
@@ -177,6 +151,10 @@ export default {
 				checkedColor: fc.checked_color,
 				submitColor: fc.submit_color,
 				submitBgColor: fc.submit_bg_color,
+				// 提交按钮尺寸：宽度百分比 + 尺寸预设（与后端 design.js 对齐）
+				submitWidthPercent: fc.submit_width_percent,
+				submitSize: fc.submit_size,
+				// 提示语
 				tipFontSize: fc.tip_font_size,
 				tipColor: fc.tip_color,
 				tipBgColor: fc.tip_bg_color
@@ -316,18 +294,23 @@ export default {
 	}
 
 	.form-submit-wrap {
-		// 外层：与后端 .form-preview-submit 对齐（padding-y + form-padding-x + form-bg-color）
-		// 全部由 submitWrapStyle 内联写入
+		// 外层：与后端 .form-preview-submit 对齐（padding-y + form-padding-x + form-bg-color + flex 居中）
+		// padding/background 由 submitWrapStyle 内联写入
+		// display: flex + justify-content: center 是让宽度小于 100% 的按钮水平居中的关键
 		box-sizing: border-box;
 		width: 100%;
+		display: flex;
+		justify-content: center;
 	}
 
 	.form-submit {
-		// 提交按钮：颜色 / 背景色 / 行高 / 圆角 / 字号 全部由 submitStyle 内联写入
+		// 提交按钮：颜色 / 背景色 / 宽度（百分比）/ 上下内边距（控制高度）/ 圆角 / 字号
+		// 全部由 submitStyle 内联写入
+		// 宽度不再写死 100%，由内联 style 的 width: <pct>% 决定；max-width: 100% 防止溢出
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
+		max-width: 100%;
 		font-weight: 500;
 		letter-spacing: 1rpx;
 		transition: opacity 0.2s ease;
diff --git a/components/ns-newform/ns-newform.vue b/components/ns-newform/ns-newform.vue
index 13a0014..10d3cc5 100644
--- a/components/ns-newform/ns-newform.vue
+++ b/components/ns-newform/ns-newform.vue
@@ -1302,43 +1302,47 @@ export default {
 				align-items: center;
 				flex-wrap: wrap;
 				gap: 16rpx;
-				
+
+				// 与后端 design.css .form-preview-wrap .img-box 对齐：
+				// 100rpx (≈ 50px) + 1rpx solid #E6E6E6 + 4rpx radius
 				.img-box {
 					margin: 0;
 					display: flex;
 					justify-content: center;
 					align-items: center;
-					width: 120rpx;
-					height: 120rpx;
-					border: 2rpx dashed #d1d5db;
-					border-radius: 8rpx;
+					width: 100rpx;
+					height: 100rpx;
+					border: 1rpx solid #E6E6E6;
+					border-radius: 4rpx;
 					position: relative;
-					background: #f9fafb;
+					background: transparent;
+					box-sizing: border-box;
 					transition: all 0.3s ease;
 					overflow: hidden;
-					
+
 					&:active {
-						background: #f3f4f6;
 						border-color: var(--checked-color, #ff4544);
 					}
-					
+
+					// 关闭按钮：与后端 .form-preview-wrap .img-box .close 对齐
+					// top/right = -14rpx (≈ -7px)，size = 28rpx (≈ 14px)，背景 #999
 					.icon-guanbi {
 						position: absolute;
-						top: -10rpx;
-						right: -10rpx;
+						top: -14rpx;
+						right: -14rpx;
 						display: flex;
 						align-items: center;
 						justify-content: center;
-						width: 40rpx;
-						height: 40rpx;
+						width: 28rpx;
+						height: 28rpx;
 						line-height: 1;
 						color: #fff;
-						background: var(--required-color, #ef4444);
+						background: #999;
 						border-radius: 50%;
-						font-size: 20rpx;
+						font-size: 28rpx;
 						z-index: 10;
 					}
-					
+
 					.icon-add1 {
 						font-size: 48rpx;
 						color: #9ca3af;