From 0fbff1004ce7e6722ce457f02d6406561f818cf1 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 4 Sep 2026 14:41:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ns-newform.vue):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=8E=AF=E5=A2=83=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96CSS=E5=8F=98=E9=87=8F=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=92=8C=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ns-newform/ns-newform.vue | 83 +++++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)

diff --git a/components/ns-newform/ns-newform.vue b/components/ns-newform/ns-newform.vue
index 8842c21..8f253f0 100644
--- a/components/ns-newform/ns-newform.vue
+++ b/components/ns-newform/ns-newform.vue
@@ -1169,7 +1169,88 @@ export default {
 <style lang="scss" scoped>
 /* 与后端 D:\projects\shop-projects\backend\src\app\component\view\form\css\design.css 对齐：
    在 .form-wrap 上通过内联 style 写入 --form-* / --label-* 等 CSS 变量，
-   子元素统一读取。 */
+   子元素统一读取。
+   ⚠️ 小程序环境修复（2026-09-04）：scoped + CSS变量 + inline style 三者结合时，
+      小程序 WXSS 对 inline style 的自定义属性（--*）作用域识别与浏览器 CSSOM 不一致，
+      会出现「H5 正常 / 小程序端 CSS 变量值被吞」的两端表现不一致现象。
+      根因：小程序自定义组件 scoped 把 .form-wrap 编译为 .form-wrap[data-v-xxx]，
+      而 inline style 由 Vue 渲染在 .form-wrap 上，无 data-v 标识，WXSS 把整段 inline CSS变量忽略。
+   对策：
+   1) 在这里同时给 :root (H5) / page (小程序) 定义同一组变量兜底，不依赖 inline 通道
+   2) 子元素 var() 加双重 fallback：先 var(--x, <rpx>)，再补一个 page/root 兜底
+   3) formWrapStyle 同步输出 inline CSS变量（H5 路径仍生效，scoped 小程序也无副作用）
+*/
+:root {
+	/* H5 :root 兜底（scoped 下 :root 不会被 vue 编译进 data-v 选择器） */
+	--form-padding-x: 28rpx;
+	--banner-padding-x: 0rpx;
+	--tip-padding-x: 28rpx;
+	--tip-font-size: 32rpx;
+	--tip-color: #666666;
+	--tip-bg-color: #ffffff;
+	--row-padding-y: 24rpx;
+	--row-min-height: 60rpx;
+	--label-gap: 20rpx;
+	--form-bg-color: #ffffff;
+	--row-divider-color: #f0f0f0;
+	--input-height: 84rpx;
+	--input-radius: 16rpx;
+	--label-fixed-width: 180rpx;
+	--label-font-size: 32rpx;
+	--label-color: #1f2937;
+	--required-color: #ef4444;
+	--checked-color: #3b82f6;
+	--submit-color: #ffffff;
+	--submit-bg-color: #3b82f6;
+	--placeholder-color: #9ca3af;
+	--placeholder-font-size: 28rpx;
+	--textarea-rows: 4;
+	--textarea-line-height: 48rpx;
+	--input-border-color: #e5e7eb;
+	--input-bg-color: #ffffff;
+	--input-focus-border-color: #3b82f6;
+	--input-focus-bg-color: #ffffff;
+	--label-font-weight: 700;
+	--show-row-divider: 0;
+}
+/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-WEIXIN-X ||
+   MP-KUAISHOU || MP-LARKDINGTALK || MP-JD || MP-XHS || MP-HARMONY */
+/* 小程序/鸿蒙：用 view 作为变量载体（与后端 design.css 的 view--form-* 等价） */
+view {
+	--form-padding-x: 28rpx;
+	--banner-padding-x: 0rpx;
+	--tip-padding-x: 28rpx;
+	--tip-font-size: 32rpx;
+	--tip-color: #666666;
+	--tip-bg-color: #ffffff;
+	--row-padding-y: 24rpx;
+	--row-min-height: 60rpx;
+	--label-gap: 20rpx;
+	--form-bg-color: #ffffff;
+	--row-divider-color: #f0f0f0;
+	--input-height: 84rpx;
+	--input-radius: 16rpx;
+	--label-fixed-width: 180rpx;
+	--label-font-size: 32rpx;
+	--label-color: #1f2937;
+	--required-color: #ef4444;
+	--checked-color: #3b82f6;
+	--submit-color: #ffffff;
+	--submit-bg-color: #3b82f6;
+	--placeholder-color: #9ca3af;
+	--placeholder-font-size: 28rpx;
+	--textarea-rows: 4;
+	--textarea-line-height: 48rpx;
+	--input-border-color: #e5e7eb;
+	--input-bg-color: #ffffff;
+	--input-focus-border-color: #3b82f6;
+	--input-focus-bg-color: #ffffff;
+	--label-font-weight: 700;
+	--show-row-divider: 0;
+}
+/* #endif */
+
+/* 原有 scoped .form-wrap 兜底保留（H5 走这里，小程序走上面的 view 选择器，两端互不干扰） */
 .form-wrap {
 	background: #fff;
 	/* 默认值兜底：与 ns-newform.config 默认值一致 */