@longhongguo/form-create-ant-design-vue 3.2.54 → 3.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.54",
+  "version": "3.2.55",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/core/alias.js

@@ -27,6 +27,7 @@ export default {
   frame: 'fcFrame',
   col: PRE + 'Col',
   row: PRE + 'Row',
+  flex: PRE + 'Flex',
   tree: PRE + 'Tree',
   autoComplete: PRE + 'AutoComplete',
   transfer: PRE + 'Transfer',

package/src/parsers/flex.js

@@ -3,38 +3,68 @@ export default {
   mergeProp(ctx) {
     // 从 props 中读取 flex 布局配置
     const props = ctx.rule.props || {}
-
-    // 获取 flex 布局相关配置
     const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
     const flexWrap = props.flexWrap || ctx.rule.flexWrap || 'nowrap'
     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'
 
-    // 将 flex 样式设置到 ctx.prop.props.style，而不是直接修改 ctx.rule.style
-    // 这样可以避免触发递归更新
+    // 映射 CSS flexbox 值到 Ant Design Vue Flex 组件的 props
+    const vertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+    const wrap = flexWrap === 'wrap'
+
+    // 映射 justifyContent 到 justify
+    const justifyMap = {
+      'flex-start': 'start',
+      'flex-end': 'end',
+      center: 'center',
+      'space-between': 'space-between',
+      'space-around': 'space-around',
+      'space-evenly': 'space-evenly'
+    }
+    const justify = justifyMap[justifyContent] || 'start'
+
+    // 映射 alignItems 到 align
+    const alignMap = {
+      'flex-start': 'start',
+      'flex-end': 'end',
+      center: 'center',
+      baseline: 'baseline',
+      stretch: 'stretch'
+    }
+    const align = alignMap[alignItems] || 'start'
+
+    // 设置到 prop.props，用于传递给 a-flex 组件
     if (!ctx.prop.props) {
       ctx.prop.props = {}
     }
 
-    // 获取现有的 style（来自 rule.style 或 prop.props.style）
-    const existingStyle = ctx.rule.style || ctx.prop.props.style || {}
-
-    // 合并 flex 样式和现有样式
-    const flexStyle = {
-      display: 'flex',
-      flexDirection,
-      flexWrap,
-      justifyContent,
-      alignItems,
-      alignContent,
-      ...existingStyle
+    // 映射 Ant Design Vue Flex 组件的 props
+    ctx.prop.props.vertical = vertical
+    ctx.prop.props.wrap = wrap
+    ctx.prop.props.justify = justify
+    ctx.prop.props.align = align
+
+    // 如果设置了 gap，也传递
+    if (props.gap !== undefined) {
+      ctx.prop.props.gap = props.gap
     }
 
-    // 设置到 prop.props.style，这样不会触发 rule 的响应式更新
-    ctx.prop.props.style = flexStyle
+    // 合并其他样式到 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
+    }
 
     // 确保 children 存在
     if (!ctx.rule.children) {
@@ -42,18 +72,17 @@ export default {
     }
   },
   render(children, ctx) {
-    // 复制 prop，避免修改原始对象
+    // 使用 Ant Design Vue 的 Flex 组件
     const prop = { ...ctx.prop }
 
-    // 确保 type 是 'div'
+    // 将 type 设置为 'a-flex'，form-create 会自动识别
     if (prop.type === 'flex') {
-      prop.type = 'div'
+      prop.type = 'a-flex'
     }
 
-    // style 已经在 mergeProp 中设置到 prop.props.style 了，直接使用
     // children 会通过 form-create 的机制自动渲染
     const childrenNodes = children || []
 
-    return ctx.vNode.make('div', prop, childrenNodes)
+    return ctx.vNode.make('a-flex', prop, childrenNodes)
   }
 }