@longhongguo/form-create-ant-design-vue 3.2.57 → 3.2.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.57",
+  "version": "3.2.60",
   "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

@@ -8,6 +8,8 @@ export default {
     const justifyContent =
       props.justifyContent || ctx.rule.justifyContent || 'flex-start'
     const alignItems = props.alignItems || ctx.rule.alignItems || 'flex-start'
+    const alignContent =
+      props.alignContent || ctx.rule.alignContent || 'flex-start'
 
     // 映射 CSS flexbox 值到 Ant Design Vue Flex 组件的 props
     const vertical =
@@ -51,19 +53,55 @@ export default {
       ctx.prop.props.gap = props.gap
     }
 
-    // 合并其他样式到 props.style（用于非 Flex 组件控制的样式，如 padding, margin 等）
-    const existingStyle = ctx.rule.style || {}
-    // 排除已经被 Flex 组件处理的样式
-    const {
-      display,
-      flexDirection: _fd,
-      flexWrap: _fw,
-      justifyContent: _jc,
-      alignItems: _ai,
-      ...otherStyles
-    } = existingStyle
-    if (Object.keys(otherStyles).length > 0) {
-      ctx.prop.props.style = otherStyles
+    // 直接修改 ctx.rule.style，确保样式能够正确应用
+    // 因为 form-create 会将 ctx.rule.style 合并到最终的样式对象中
+    if (!ctx.rule.style) {
+      ctx.rule.style = {}
+    }
+
+    // 保留用户设置的 display: 'flex'（如果存在）
+    const userDisplay = ctx.rule.style.display
+    const existingStyle = { ...ctx.rule.style }
+
+    // 构建样式对象，确保从 props 读取的配置能够应用到样式中
+    ctx.rule.style = {
+      // 保留用户设置的 display，如果没有则设置为 'flex'
+      display: userDisplay || 'flex',
+      // 确保 flex 容器占满整行
+      width: '100%',
+      // 在样式中设置 flexWrap，确保从 props 读取的配置能够生效
+      // 这是关键的：将 props.flexWrap 的值直接应用到 style 中
+      flexWrap: flexWrap,
+      // 保留其他用户自定义样式（排除 flex 相关的，避免冲突）
+      ...Object.keys(existingStyle).reduce((acc, key) => {
+        // 排除 flex 相关的样式属性，因为我们通过 props 或新的样式设置
+        if (
+          ![
+            'flexDirection',
+            'flexWrap',
+            'justifyContent',
+            'alignItems',
+            'alignContent'
+          ].includes(key)
+        ) {
+          acc[key] = existingStyle[key]
+        }
+        return acc
+      }, {})
+    }
+
+    // 如果设置了 alignContent，添加到样式中
+    if (alignContent && alignContent !== 'flex-start') {
+      ctx.rule.style.alignContent = alignContent
+    }
+
+    // 同时也设置到 ctx.prop.props.style，作为备用
+    if (!ctx.prop.props.style) {
+      ctx.prop.props.style = {}
+    }
+    ctx.prop.props.style = {
+      ...ctx.prop.props.style,
+      ...ctx.rule.style
     }
 
     // 确保 children 存在
@@ -107,6 +145,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)]
+      }
+    )
   }
 }