@longhongguo/form-create-ant-design-vue 3.2.56 → 3.2.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.56",
+  "version": "3.2.59",
   "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,6 +84,25 @@ export default {
       )
     })
 
+    // 检查父容器是否是 flex 类型，如果是，自动设置 col: false 避免被 a-col 包装
+    // 需要在合并完 col 后再检查，确保能覆盖默认值
+    if (ctx.parent && ctx.parent.rule) {
+      const parentType = ctx.parent.rule.type
+      const parentMenu = ctx.parent.rule._menu
+      if (
+        parentType === 'flex' ||
+        parentType === 'a-flex' ||
+        parentMenu?.name === 'flex'
+      ) {
+        // 如果父容器是 flex，强制设置 col 为 false，禁用 col 包装
+        ctx.prop.col = false
+        // 同时设置 rule.col 以确保在 makeWrap 中也能识别
+        if (ctx.rule) {
+          ctx.rule.col = false
+        }
+      }
+    }
+
     // 为 upload 组件自动添加 onPreview，确保始终向父窗口发送预览通知
     if (ctx.rule.type === 'upload' && !ctx.prop.props.onPreview) {
       const sendPreviewMessage = function (file) {
@@ -205,6 +224,21 @@ export default {
     const cls = rule.wrap.class
     delete rule.wrap.class
     delete rule.wrap.title
+
+    // 检查父容器是否是 flex 类型，如果是，强制禁用 col 包装
+    let shouldDisableCol = false
+    if (ctx.parent && ctx.parent.rule) {
+      const parentType = ctx.parent.rule.type
+      const parentMenu = ctx.parent.rule._menu
+      if (
+        parentType === 'flex' ||
+        parentType === 'a-flex' ||
+        parentMenu?.name === 'flex'
+      ) {
+        shouldDisableCol = true
+      }
+    }
+
     const item = isFalse(rule.wrap.show)
       ? children
       : this.$r(
@@ -234,7 +268,11 @@ export default {
             ...(isTitle ? { label: () => this.makeInfo(rule, uni, ctx) } : {})
           }
         )
-    return layout === 'inline' || isFalse(_col) || isFalse(col.show)
+    // 如果父容器是 flex，或者 layout 是 inline，或者 col 被显式禁用，则不使用 col 包装
+    return layout === 'inline' ||
+      isFalse(_col) ||
+      isFalse(col.show) ||
+      shouldDisableCol
       ? item
       : this.makeCol(rule, uni, [item])
   },

package/src/parsers/flex.js

@@ -62,14 +62,45 @@ export default {
       alignItems: _ai,
       ...otherStyles
     } = existingStyle
-    if (Object.keys(otherStyles).length > 0) {
-      ctx.prop.props.style = otherStyles
+
+    // 确保 flex 容器占满整行，设置 width: 100%
+    if (!ctx.prop.props.style) {
+      ctx.prop.props.style = {}
+    }
+    ctx.prop.props.style = {
+      width: '100%',
+      ...otherStyles,
+      ...ctx.prop.props.style
     }
 
     // 确保 children 存在
     if (!ctx.rule.children) {
       ctx.rule.children = []
     }
+
+    // 为 flex 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // 这样可以确保子组件直接作为 flex 子项，而不是占满整行
+    if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
+      ctx.rule.children.forEach((child) => {
+        if (
+          child &&
+          typeof child === 'object' &&
+          !child.type === 'DragTool' &&
+          !child.type === 'DragBox'
+        ) {
+          // 只有当 col 未设置或为默认值时才设置
+          if (child.col === undefined || child.col === null) {
+            child.col = false
+          } else if (
+            child.col &&
+            typeof child.col === 'object' &&
+            child.col.show !== false
+          ) {
+            child.col.show = false
+          }
+        }
+      })
+    }
   },
   render(children, ctx) {
     // 使用 Ant Design Vue 的 Flex 组件
@@ -83,6 +114,13 @@ export default {
     // children 会通过 form-create 的机制自动渲染
     const childrenNodes = children || []
 
-    return ctx.vNode.make('a-flex', prop, childrenNodes)
+    // 将 flex 容器包装在 col 中，确保它占满整行（span: 24）
+    // 这样 flex 容器才能有足够的宽度，子项才能自适应展示
+    return ctx.vNode.col(
+      { props: { span: 24 } },
+      {
+        default: () => [ctx.vNode.make('a-flex', prop, childrenNodes)]
+      }
+    )
   }
 }