@longhongguo/form-create-ant-design-vue 3.2.63 → 3.2.65

package/package.json

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

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

package/src/core/maker.js

@@ -102,6 +102,10 @@ function useFlex(maker) {
   maker.flex = creatorFactory('flex')
 }
 
+function useSpace(maker) {
+  maker.space = creatorFactory('space')
+}
+
 useAlias(maker)
 useSlider(maker)
 useFrame(maker)
@@ -111,5 +115,6 @@ useCusStoreSelect(maker)
 useCusUserSelect(maker)
 useText(maker)
 useFlex(maker)
+useSpace(maker)
 
 export default maker

package/src/core/manager.js

@@ -84,7 +84,7 @@ export default {
       )
     })
 
-    // 检查父容器是否是 flex 类型，如果是，自动设置 col: false 避免被 a-col 包装
+    // 检查父容器是否是 flex 或 space 类型，如果是，自动设置 col: false 避免被 a-col 包装
     // 需要在合并完 col 后再检查，确保能覆盖默认值
     if (ctx.parent && ctx.parent.rule) {
       const parentType = ctx.parent.rule.type
@@ -92,9 +92,12 @@ export default {
       if (
         parentType === 'flex' ||
         parentType === 'a-flex' ||
-        parentMenu?.name === 'flex'
+        parentMenu?.name === 'flex' ||
+        parentType === 'space' ||
+        parentType === 'a-space' ||
+        parentMenu?.name === 'space'
       ) {
-        // 如果父容器是 flex，强制设置 col 为 false，禁用 col 包装
+        // 如果父容器是 flex 或 space，强制设置 col 为 false，禁用 col 包装
         ctx.prop.col = false
         // 同时设置 rule.col 以确保在 makeWrap 中也能识别
         if (ctx.rule) {
@@ -225,7 +228,7 @@ export default {
     delete rule.wrap.class
     delete rule.wrap.title
 
-    // 检查父容器是否是 flex 类型，如果是，强制禁用 col 包装
+    // 检查父容器是否是 flex 或 space 类型，如果是，强制禁用 col 包装
     let shouldDisableCol = false
     if (ctx.parent && ctx.parent.rule) {
       const parentType = ctx.parent.rule.type
@@ -233,7 +236,10 @@ export default {
       if (
         parentType === 'flex' ||
         parentType === 'a-flex' ||
-        parentMenu?.name === 'flex'
+        parentMenu?.name === 'flex' ||
+        parentType === 'space' ||
+        parentType === 'a-space' ||
+        parentMenu?.name === 'space'
       ) {
         shouldDisableCol = true
       }

package/src/parsers/flex.js

@@ -143,21 +143,34 @@ export default {
       prop.type = 'a-flex'
     }
 
-    // 读取 childFlex 配置
-    const childFlex = ctx.rule.props?.childFlex ?? ctx.rule.childFlex
-    if (childFlex !== undefined && childFlex !== null && childFlex !== '') {
-      // 给 flex 容器添加自定义 class 和 CSS 变量，用于 CSS 选择器
-      if (!prop.props) {
-        prop.props = {}
-      }
-      // 添加自定义 class
+    // 读取 flexDirection 来判断是否是垂直方向
+    const props = ctx.rule.props || {}
+    const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
+    const isVertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+
+    // 初始化 prop.props 和 prop.class（如果需要的话）
+    if (!prop.props) {
+      prop.props = {}
+    }
+
+    // 添加自定义 class 的辅助函数
+    const ensureClass = () => {
       if (!prop.class) {
         prop.class = []
       }
       if (!Array.isArray(prop.class)) {
         prop.class = [prop.class]
       }
-      prop.class.push('_fc-flex-container')
+    }
+
+    // 读取 childFlex 配置
+    const childFlex = ctx.rule.props?.childFlex ?? ctx.rule.childFlex
+    if (childFlex !== undefined && childFlex !== null && childFlex !== '') {
+      ensureClass()
+      if (!prop.class.includes('_fc-flex-container')) {
+        prop.class.push('_fc-flex-container')
+      }
 
       // 通过 CSS 变量传递 flex 值
       const flexValue = String(childFlex).trim()
@@ -174,6 +187,32 @@ export default {
       prop.style['--fc-child-flex'] = flexValue
     }
 
+    // 如果是垂直方向，读取 childWidth 配置（默认 100%）
+    if (isVertical) {
+      const childWidth =
+        ctx.rule.props?.childWidth ?? ctx.rule.childWidth ?? '100%'
+
+      ensureClass()
+      if (!prop.class.includes('_fc-flex-container')) {
+        prop.class.push('_fc-flex-container')
+      }
+      if (!prop.class.includes('_fc-flex-vertical')) {
+        prop.class.push('_fc-flex-vertical')
+      }
+
+      // 通过 CSS 变量传递宽度值
+      const widthValue = String(childWidth).trim()
+      if (!prop.props.style) {
+        prop.props.style = {}
+      }
+      prop.props.style['--fc-child-width'] = widthValue
+
+      if (!prop.style) {
+        prop.style = {}
+      }
+      prop.style['--fc-child-width'] = widthValue
+    }
+
     // children 会通过 form-create 的机制自动渲染
     const childrenNodes = children || []
 

package/src/parsers/index.js

@@ -14,6 +14,7 @@ import timeRangePicker from './timeRangePicker'
 import cusStoreSelect from './cusStoreSelect'
 import cusUserSelect from './cusUserSelect'
 import flex from './flex'
+import space from './space'
 
 export default [
   checkbox,
@@ -31,5 +32,6 @@ export default [
   row,
   cusStoreSelect,
   cusUserSelect,
-  flex
+  flex,
+  space
 ]

package/src/parsers/space.js

@@ -0,0 +1,92 @@
+export default {
+  name: 'space',
+  mergeProp(ctx) {
+    // 从 props 中读取 Space 组件配置
+    const props = ctx.rule.props || {}
+    const direction = props.direction || ctx.rule.direction || 'horizontal'
+    const size = props.size || ctx.rule.size || 'small'
+    const align = props.align || ctx.rule.align
+    const wrap = props.wrap || ctx.rule.wrap || false
+
+    // 设置到 prop.props，用于传递给 a-space 组件
+    if (!ctx.prop.props) {
+      ctx.prop.props = {}
+    }
+
+    // 映射 Ant Design Vue Space 组件的 props
+    ctx.prop.props.direction = direction
+    ctx.prop.props.size = size
+    if (align !== undefined && align !== null && align !== '') {
+      ctx.prop.props.align = align
+    }
+    ctx.prop.props.wrap = wrap
+
+    // 合并样式，确保 Space 容器占满整行
+    const existingStyle = ctx.rule.style || {}
+    const spaceStyles = {
+      width: '100%',
+      ...existingStyle
+    }
+
+    // 同时设置到 ctx.prop.style 和 ctx.prop.props.style
+    if (!ctx.prop.style) {
+      ctx.prop.style = {}
+    }
+    ctx.prop.style = { ...ctx.prop.style, ...spaceStyles }
+
+    if (!ctx.prop.props.style) {
+      ctx.prop.props.style = {}
+    }
+    ctx.prop.props.style = { ...ctx.prop.props.style, ...spaceStyles }
+
+    // 确保 children 存在
+    if (!ctx.rule.children) {
+      ctx.rule.children = []
+    }
+
+    // 为 space 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // Space 组件会自动处理子项间距，不需要 col 包装
+    if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
+      ctx.rule.children.forEach((child) => {
+        if (
+          child &&
+          typeof child === 'object' &&
+          child.type !== 'DragTool' &&
+          child.type !== 'DragBox'
+        ) {
+          // 只有当 col 未设置或为默认值时才设置
+          if (child.col === undefined || child.col === null) {
+            child.col = false
+          } else if (
+            child.col &&
+            typeof child.col === 'object' &&
+            child.col.show !== false
+          ) {
+            child.col.show = false
+          }
+        }
+      })
+    }
+  },
+  render(children, ctx) {
+    // 使用 Ant Design Vue 的 Space 组件
+    const prop = { ...ctx.prop }
+
+    // 将 type 设置为 'a-space'，form-create 会自动识别
+    if (prop.type === 'space') {
+      prop.type = 'a-space'
+    }
+
+    // children 会通过 form-create 的机制自动渲染
+    const childrenNodes = children || []
+
+    // 将 space 容器包装在 col 中，确保它占满整行（span: 24）
+    // 这样 space 容器才能有足够的宽度
+    return ctx.vNode.col(
+      { props: { span: 24 } },
+      {
+        default: () => [ctx.vNode.make('a-space', prop, childrenNodes)]
+      }
+    )
+  }
+}

package/src/style/index.css

@@ -496,3 +496,8 @@
 .ant-flex._fc-flex-container > .ant-form-item {
   flex: var(--fc-child-flex) !important;
 }
+
+/* 垂直方向的 Flex 容器子项宽度样式 */
+.ant-flex._fc-flex-vertical > .ant-form-item {
+  width: var(--fc-child-width, 100%) !important;
+}

package/types/maker.d.ts

@@ -65,7 +65,8 @@ declare enum MakerName {
   'storeSelect',
   'cusUserSelect',
   'userSelect',
-  'flex'
+  'flex',
+  'space'
 }
 
 type Maker = {