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

package/package.json

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

@@ -143,6 +143,76 @@ export default {
       prop.type = 'a-flex'
     }
 
+    // 读取 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]
+      }
+    }
+
+    // 读取 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()
+      // 合并到样式中，设置 CSS 变量
+      if (!prop.props.style) {
+        prop.props.style = {}
+      }
+      prop.props.style['--fc-child-flex'] = flexValue
+
+      // 同时也设置到 prop.style
+      if (!prop.style) {
+        prop.style = {}
+      }
+      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/style/index.css

@@ -491,3 +491,13 @@
 ._fd-tf-col:has(._fd-tf-col) {
   width: auto !important;
 }
+
+/* Flex 容器子项 flex 样式 */
+.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;
+}