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

package/package.json

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

@@ -72,7 +72,6 @@ export default {
       // 保留用户设置的 display，如果没有则设置为 'flex'
       display: userDisplay || 'flex',
       // 确保 flex 容器占满整行
-      width: '100%',
       // 在样式中设置 flexWrap，确保从 props 读取的配置能够生效
       // 这是关键的：将 props.flexWrap 的值（'wrap' 或 'nowrap'）应用到样式中
       flexWrap: flexWrap,
@@ -144,6 +143,37 @@ 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
+      if (!prop.class) {
+        prop.class = []
+      }
+      if (!Array.isArray(prop.class)) {
+        prop.class = [prop.class]
+      }
+      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
+    }
+
     // children 会通过 form-create 的机制自动渲染
     const childrenNodes = children || []
 

package/src/style/index.css

@@ -491,3 +491,8 @@
 ._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;
+}