@longhongguo/form-create-ant-design-vue 3.3.31 → 3.3.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.31",
+  "version": "3.3.34",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/core/manager.js

@@ -84,19 +84,12 @@ export default {
       )
     })
 
-    // 应用 componentStyle 到组件元素本身（不受父容器影响）
-    // 注意：这个样式需要在 parser.mergeProp 之后应用才能确保不被覆盖
-    // 但由于执行顺序限制，我们先在这里设置，parser 应该使用合并方式而不是覆盖
+    // 应用 componentStyle 到包裹组件的最顶层父容器（如 .fc-form-col）
+    // 这样在 Flex 或 Space 布局中，可以给子元素设置 flex: 1 等样式
     if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
-      // 确保 props 存在
-      if (!ctx.prop.props) {
-        ctx.prop.props = {}
-      }
-      
-      // 将 componentStyle 合并到 props.style，直接应用到组件元素本身
-      // 这样即使 parser 使用 {...existing, ...new} 的方式合并，componentStyle 也会被保留
-      const existingStyle = ctx.prop.props.style || {}
-      ctx.prop.props.style = {
+      // 将 componentStyle 合并到 prop.style，这会应用到包裹组件的容器上
+      const existingStyle = ctx.prop.style || {}
+      ctx.prop.style = {
         ...existingStyle,
         ...ctx.rule.componentStyle
       }
@@ -469,7 +462,7 @@ export default {
       isFalse(col.show) ||
       shouldDisableCol
       ? item
-      : this.makeCol(rule, uni, [item])
+      : this.makeCol(rule, uni, [item], ctx)
   },
   isTitle(rule) {
     if (this.options.form.title === false) return false
@@ -551,13 +544,16 @@ export default {
 
     return this.$r(_prop, children)
   },
-  makeCol(rule, uni, children) {
+  makeCol(rule, uni, children, ctx) {
     const col = rule.col
+    // 将 componentStyle 应用到 col 容器上
+    const style = ctx?.prop?.style || {}
     return this.$r(
       {
         class: this.$render.mergeClass(col.class, 'fc-form-col'),
         type: 'col',
         props: col || { span: 24 },
+        style: style,
         key: `${uni}col`
       },
       children

package/src/parsers/flex.js

@@ -97,16 +97,20 @@ export default {
     }
 
     // 同时也合并到 props.style，确保样式生效
-    // 注意：保留 componentStyle（如果存在），它应该在最后应用，优先级最高
     if (!ctx.prop.props) {
       ctx.prop.props = {}
     }
-    const componentStyle = ctx.rule.componentStyle || {}
     ctx.prop.props.style = {
       ...existingPropsStyle,
-      ...flexStyles,
-      // componentStyle 最后合并，确保优先级最高
-      ...componentStyle
+      ...flexStyles
+    }
+    
+    // componentStyle 应用到 prop.style（包裹容器），最后合并确保优先级最高
+    if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
+      ctx.prop.style = {
+        ...ctx.prop.style,
+        ...ctx.rule.componentStyle
+      }
     }
 
     // 确保 children 存在
@@ -245,8 +249,13 @@ export default {
 
     // 将 flex 容器包装在 col 中，确保它占满整行（span: 24）
     // 这样 flex 容器才能有足够的宽度，子项才能自适应展示
+    // 应用 componentStyle 到 col 容器（如果存在）
+    const componentStyle = ctx.rule.componentStyle || {}
     return ctx.vNode.col(
-      { props: { span: 24 } },
+      { 
+        props: { span: 24 },
+        style: componentStyle
+      },
       {
         default: () => [ctx.vNode.make('a-flex', prop, childrenNodes)]
       }

package/src/parsers/space.js

@@ -37,13 +37,14 @@ export default {
     if (!ctx.prop.props.style) {
       ctx.prop.props.style = {}
     }
-    // 保留 componentStyle（如果存在），它应该在最后应用，优先级最高
-    const componentStyle = ctx.rule.componentStyle || {}
-    ctx.prop.props.style = {
-      ...ctx.prop.props.style,
-      ...spaceStyles,
-      // componentStyle 最后合并，确保优先级最高
-      ...componentStyle
+    ctx.prop.props.style = { ...ctx.prop.props.style, ...spaceStyles }
+    
+    // componentStyle 应用到 prop.style（包裹容器），最后合并确保优先级最高
+    if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
+      ctx.prop.style = {
+        ...ctx.prop.style,
+        ...ctx.rule.componentStyle
+      }
     }
 
     // 确保 children 存在
@@ -121,8 +122,13 @@ export default {
 
     // 将 space 容器包装在 col 中，确保它占满整行（span: 24）
     // 这样 space 容器才能有足够的宽度
+    // 应用 componentStyle 到 col 容器（如果存在）
+    const componentStyle = ctx.rule.componentStyle || {}
     return ctx.vNode.col(
-      { props: { span: 24 } },
+      { 
+        props: { span: 24 },
+        style: componentStyle
+      },
       {
         default: () => [ctx.vNode.make(prop.type, prop, childrenNodes)]
       }