@longhongguo/form-create-ant-design-vue 3.2.69 → 3.2.71

package/package.json

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

package/src/parsers/spin.js

@@ -8,27 +8,31 @@ export default {
       ctx.rule.wrap = {}
     }
     ctx.rule.wrap.title = false
-    
+
     const props = ctx.prop.props || {}
-    
+
     // 读取 containerMode 配置
-    const containerMode = 
-      ctx.rule.containerMode ?? 
-      ctx.rule.props?.containerMode ?? 
-      ctx.prop.props?.containerMode ?? 
+    const containerMode =
+      ctx.rule.containerMode ??
+      ctx.rule.props?.containerMode ??
+      ctx.prop.props?.containerMode ??
       true
-    
+
     // 如果不是容器模式，清空 children
     if (!containerMode) {
       ctx.rule.children = []
     }
-    
+
     if (!hasProperty(props, 'spinning')) {
-      props.spinning = ctx.prop.props?.spinning ?? ctx.rule.props?.spinning ?? false
+      props.spinning =
+        ctx.prop.props?.spinning ?? ctx.rule.props?.spinning ?? false
     }
-    
+
     // 如果没有子组件且不是容器模式，spinning 不应该为 true（避免显示空加载状态）
-    const hasChildren = ctx.rule.children && Array.isArray(ctx.rule.children) && ctx.rule.children.length > 0
+    const hasChildren =
+      ctx.rule.children &&
+      Array.isArray(ctx.rule.children) &&
+      ctx.rule.children.length > 0
     if (!containerMode && !hasChildren && props.spinning) {
       // 独立模式下如果没有内容，不建议显示加载状态
       // 但这里不强制修改，让用户自己控制
@@ -36,7 +40,9 @@ export default {
 
     // 支持从多个位置读取配置
     const bindField =
-      ctx.rule.bindField || ctx.rule.props?.bindField || ctx.prop.props?.bindField
+      ctx.rule.bindField ||
+      ctx.rule.props?.bindField ||
+      ctx.prop.props?.bindField
     let bindMode =
       ctx.rule.bindMode || ctx.rule.props?.bindMode || ctx.prop.props?.bindMode
 
@@ -86,28 +92,62 @@ export default {
         ctx.rule.children = []
       }
 
+      // 检查是否有真实的子组件（用于判断是否需要自适应）
+      const hasRealChildren =
+        ctx.rule.children &&
+        Array.isArray(ctx.rule.children) &&
+        ctx.rule.children.some((child) => {
+          if (!child || typeof child !== 'object') return false
+          return child.type !== 'DragTool' && child.type !== 'DragBox'
+        })
+
+      // 如果有子组件，设置 wrap 的 class 和样式让整个布局自适应内容
+      if (hasRealChildren) {
+        // 添加 class 用于样式控制
+        if (!ctx.rule.wrap.class) {
+          ctx.rule.wrap.class = ''
+        }
+        const wrapClass =
+          typeof ctx.rule.wrap.class === 'string'
+            ? ctx.rule.wrap.class.split(' ').filter(Boolean)
+            : Array.isArray(ctx.rule.wrap.class)
+            ? ctx.rule.wrap.class
+            : []
+        if (!wrapClass.includes('_fc-spin-wrap-fit')) {
+          wrapClass.push('_fc-spin-wrap-fit')
+          ctx.rule.wrap.class = wrapClass.join(' ')
+        }
+
+        // 设置样式
+        if (!ctx.rule.wrap.style) {
+          ctx.rule.wrap.style = {}
+        }
+        ctx.rule.wrap.style.width = 'fit-content'
+        ctx.rule.wrap.style.display = 'inline-block'
+      }
+
       // 确保子组件不被 a-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
+        ctx.rule.children.forEach((child) => {
+          if (
+            child &&
+            typeof child === 'object' &&
+            child.type !== 'DragTool' &&
+            child.type !== 'DragBox'
           ) {
-            child.col.show = false
+            // 只有当 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) {
@@ -130,7 +170,8 @@ export default {
     }
 
     // 如果有 delay，设置 delay prop
-    const delay = ctx.rule.delay || ctx.rule.props?.delay || ctx.prop.props?.delay
+    const delay =
+      ctx.rule.delay || ctx.rule.props?.delay || ctx.prop.props?.delay
     if (delay != null) {
       ctx.prop.props.delay = delay
     }
@@ -147,31 +188,55 @@ export default {
     }
 
     // 读取 containerMode 配置
-    const containerMode = 
-      ctx.rule.containerMode ?? 
-      ctx.rule.props?.containerMode ?? 
-      ctx.prop.props?.containerMode ?? 
+    const containerMode =
+      ctx.rule.containerMode ??
+      ctx.rule.props?.containerMode ??
+      ctx.prop.props?.containerMode ??
       true
-    
-    // children 会通过 form-create 的机制自动渲染
-    // 容器模式下，始终渲染 children（即使为空，也会显示拖拽区域）
-    // 独立模式下，不渲染 children
-    let spinChildren
-    if (containerMode) {
-      // 容器模式：总是渲染 children，即使为空
-      spinChildren = children && Array.isArray(children) ? children : []
-    } else {
-      // 独立模式：不渲染 children
-      spinChildren = undefined
+
+    // 如果不是容器模式，不渲染 children，直接使用 defaultRender
+    if (!containerMode) {
+      return ctx.$render.defaultRender(ctx, undefined)
     }
 
-    // 将 spin 容器包装在 col 中，确保它占满整行（span: 24）
+    // 容器模式：使用传入的 children 参数
+    // children 参数已经是渲染好的 vnodes，直接传递给 a-spin
+    const childrenNodes =
+      children && Array.isArray(children) ? children : children || []
+
+    // 检查是否有子组件（排除设计器内部组件）
+    const hasRealChildren =
+      childrenNodes &&
+      Array.isArray(childrenNodes) &&
+      childrenNodes.some((node) => {
+        if (!node || typeof node !== 'object') return false
+        const nodeType = node.type?.name || node.type
+        return nodeType !== 'DragTool' && nodeType !== 'DragBox'
+      })
+
+    // 添加 class 标识，用于样式控制（当有子组件时）
+    if (hasRealChildren) {
+      if (!ctx.prop.class) {
+        ctx.prop.class = []
+      }
+      if (!Array.isArray(ctx.prop.class)) {
+        ctx.prop.class = [ctx.prop.class]
+      }
+      if (!ctx.prop.class.includes('_fc-spin-container')) {
+        ctx.prop.class.push('_fc-spin-container')
+      }
+    }
+
+    // 始终包装在 col 中
+    // 通过 CSS 类让有子组件时自适应内容
     return ctx.vNode.col(
-      { props: { span: 24 } },
       {
-        default: () => [ctx.vNode.make('a-spin', ctx.prop, spinChildren)]
+        props: { span: 24 },
+        class: hasRealChildren ? '_fc-spin-col-fit' : ''
+      },
+      {
+        default: () => [ctx.vNode.make('a-spin', ctx.prop, childrenNodes)]
       }
     )
   }
 }
-

package/src/style/index.css

@@ -501,3 +501,45 @@
 .ant-flex._fc-flex-vertical > .ant-form-item {
   width: var(--fc-child-width, 100%) !important;
 }
+
+/* Spin 容器自适应子组件尺寸 - 让整个布局链自适应 */
+/* 通过 form-item 的 class 控制整个布局 */
+.ant-form-item._fc-spin-wrap-fit {
+  width: fit-content !important;
+  display: inline-block !important;
+}
+
+.ant-form-item._fc-spin-wrap-fit .ant-form-item-control {
+  width: fit-content !important;
+  flex: none !important;
+}
+
+.ant-form-item._fc-spin-wrap-fit .ant-form-item-control-input {
+  width: fit-content !important;
+}
+
+.ant-form-item._fc-spin-wrap-fit .ant-form-item-control-input-content {
+  width: fit-content !important;
+  display: inline-block !important;
+}
+
+/* col 自适应 */
+.ant-form-item._fc-spin-wrap-fit .ant-col._fc-spin-col-fit {
+  width: fit-content !important;
+  flex: 0 0 auto !important;
+  max-width: 100% !important;
+}
+
+/* Spin 组件自适应 */
+.ant-form-item._fc-spin-wrap-fit .ant-spin._fc-spin-container {
+  display: inline-block !important;
+  width: fit-content !important;
+  height: fit-content !important;
+}
+
+/* 确保 Spin 容器内的内容决定容器大小 */
+.ant-form-item._fc-spin-wrap-fit .ant-spin._fc-spin-container .ant-spin-container {
+  display: inline-block !important;
+  width: fit-content !important;
+  height: fit-content !important;
+}