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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.59",
+  "version": "3.2.61",
   "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 =
@@ -42,7 +44,8 @@ export default {
 
     // 映射 Ant Design Vue Flex 组件的 props
     ctx.prop.props.vertical = vertical
-    ctx.prop.props.wrap = wrap
+    // 注意：不设置 wrap prop，因为 Ant Design Vue 的 Flex 组件的 wrap prop 类型可能不匹配
+    // 换行功能完全通过 CSS 样式来实现
     ctx.prop.props.justify = justify
     ctx.prop.props.align = align
 
@@ -51,26 +54,56 @@ export default {
       ctx.prop.props.gap = props.gap
     }
 
-    // 合并其他样式到 props.style（用于非 Flex 组件控制的样式，如 padding, margin 等）
+    // 合并样式（不要直接修改 ctx.rule.style，避免响应式循环）
     const existingStyle = ctx.rule.style || {}
     // 排除已经被 Flex 组件处理的样式
     const {
-      display,
+      display: userDisplay,
       flexDirection: _fd,
       flexWrap: _fw,
       justifyContent: _jc,
       alignItems: _ai,
+      alignContent: _ac,
       ...otherStyles
     } = existingStyle
 
-    // 确保 flex 容器占满整行，设置 width: 100%
-    if (!ctx.prop.props.style) {
-      ctx.prop.props.style = {}
+    // 构建样式对象，确保从 props 读取的配置能够应用到样式中
+    const flexStyles = {
+      // 保留用户设置的 display，如果没有则设置为 'flex'
+      display: userDisplay || 'flex',
+      // 确保 flex 容器占满整行
+      width: '100%',
+      // 在样式中设置 flexWrap，确保从 props 读取的配置能够生效
+      // 这是关键的：将 props.flexWrap 的值（'wrap' 或 'nowrap'）应用到样式中
+      flexWrap: flexWrap,
+      // 合并其他用户自定义样式
+      ...otherStyles
+    }
+
+    // 如果设置了 alignContent，添加到样式中
+    if (alignContent && alignContent !== 'flex-start') {
+      flexStyles.alignContent = alignContent
+    }
+
+    // 同时设置到 ctx.prop.style 和 ctx.prop.props.style
+    // form-create 会将 prop.style 应用到组件上，但有时也需要 prop.props.style
+    // 保留已有的 prop.style 和 prop.props.style，然后合并新的样式
+    const existingPropStyle = ctx.prop.style || {}
+    const existingPropsStyle = ctx.prop.props?.style || {}
+
+    // 合并样式到 ctx.prop.style（保留已有样式，新的样式优先）
+    ctx.prop.style = {
+      ...existingPropStyle,
+      ...flexStyles
+    }
+
+    // 同时也合并到 props.style，确保样式生效
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
     }
     ctx.prop.props.style = {
-      width: '100%',
-      ...otherStyles,
-      ...ctx.prop.props.style
+      ...existingPropsStyle,
+      ...flexStyles
     }
 
     // 确保 children 存在