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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.59",
+  "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/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,26 +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
-
-    // 确保 flex 容器占满整行，设置 width: 100%
+    // 直接修改 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 = {
-      width: '100%',
-      ...otherStyles,
-      ...ctx.prop.props.style
+      ...ctx.prop.props.style,
+      ...ctx.rule.style
     }
 
     // 确保 children 存在