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

package/package.json

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

@@ -100,6 +100,35 @@ export default {
         if (ctx.rule) {
           ctx.rule.col = false
         }
+
+        // 读取并应用子组件的 flex 配置（支持等比分配和自由控制）
+        // 可以从 props.flex 或 style.flex 读取
+        const flexValue = ctx.rule.props?.flex ?? ctx.rule.style?.flex
+        if (flexValue !== undefined && flexValue !== null && flexValue !== '') {
+          // 确保 style 对象存在
+          if (!ctx.prop.style) {
+            ctx.prop.style = {}
+          }
+          if (!ctx.prop.props) {
+            ctx.prop.props = {}
+          }
+          if (!ctx.prop.props.style) {
+            ctx.prop.props.style = {}
+          }
+
+          // 转换 flex 值为字符串（CSS flex 值应该是字符串）
+          // flex 值可以是数字（如 1, 2）或字符串（如 '1', '2', 'auto', 'none'）
+          let flexString = flexValue
+          if (typeof flexValue === 'number') {
+            flexString = String(flexValue)
+          } else if (typeof flexValue === 'string') {
+            flexString = flexValue.trim()
+          }
+
+          // 应用 flex 值到样式（同时设置到 prop.style 和 prop.props.style）
+          ctx.prop.style.flex = flexString
+          ctx.prop.props.style.flex = flexString
+        }
       }
     }
 

package/src/parsers/flex.js

@@ -44,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
 
@@ -53,55 +54,55 @@ export default {
       ctx.prop.props.gap = props.gap
     }
 
-    // 直接修改 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 }
+    // 合并样式（不要直接修改 ctx.rule.style，避免响应式循环）
+    const existingStyle = ctx.rule.style || {}
+    // 排除已经被 Flex 组件处理的样式
+    const {
+      display: userDisplay,
+      flexDirection: _fd,
+      flexWrap: _fw,
+      justifyContent: _jc,
+      alignItems: _ai,
+      alignContent: _ac,
+      ...otherStyles
+    } = existingStyle
 
     // 构建样式对象，确保从 props 读取的配置能够应用到样式中
-    ctx.rule.style = {
+    const flexStyles = {
       // 保留用户设置的 display，如果没有则设置为 'flex'
       display: userDisplay || 'flex',
       // 确保 flex 容器占满整行
-      width: '100%',
       // 在样式中设置 flexWrap，确保从 props 读取的配置能够生效
-      // 这是关键的：将 props.flexWrap 的值直接应用到 style 中
+      // 这是关键的：将 props.flexWrap 的值（'wrap' 或 'nowrap'）应用到样式中
       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
-      }, {})
+      // 合并其他用户自定义样式
+      ...otherStyles
     }
 
     // 如果设置了 alignContent，添加到样式中
     if (alignContent && alignContent !== 'flex-start') {
-      ctx.rule.style.alignContent = alignContent
+      flexStyles.alignContent = alignContent
     }
 
-    // 同时也设置到 ctx.prop.props.style，作为备用
-    if (!ctx.prop.props.style) {
-      ctx.prop.props.style = {}
+    // 同时设置到 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 = {
-      ...ctx.prop.props.style,
-      ...ctx.rule.style
+      ...existingPropsStyle,
+      ...flexStyles
     }
 
     // 确保 children 存在