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

package/package.json

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

package/src/components/index.js

@@ -1,4 +1,4 @@
-import upload from '@form-create/component-antdv-upload/src/index'
+import upload from '@longhongguo/component-antdv-upload/src/index'
 import frame from '@form-create/component-antdv-frame/src/index'
 import group from '@form-create/component-antdv-group/src/index'
 import subForm from '@form-create/component-subform/src/index'

package/src/core/alias.js

@@ -37,5 +37,7 @@ export default {
   group: 'fcGroup',
   array: 'fcGroup',
   subForm: 'fcSubForm',
-  object: 'fcSubForm'
+  object: 'fcSubForm',
+  image: PRE + 'Image',
+  aImage: PRE + 'Image'
 }

package/src/core/index.js

@@ -6,6 +6,7 @@ import FormCreateFactory from '@longhongguo/form-create-core/src/index'
 import makers from './maker'
 import '../style/index.css'
 import '../style/icon.css'
+import '@longhongguo/component-antdv-upload/dist/index.css'
 import extendApi from './api'
 import modelFields from './modelFields'
 import required from './provider'

package/src/core/manager.js

@@ -158,6 +158,86 @@ export default {
         }
       }
     }
+
+    // 为 aImage 组件自动添加预览拦截，确保始终向父窗口发送预览通知
+    if (
+      (ctx.rule.type === 'image' || ctx.rule.type === 'aImage') &&
+      !ctx.prop.props.preview
+    ) {
+      const sendImagePreviewMessage = function (src) {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: 'upload-preview',
+              file: {
+                url: src || ctx.prop.props.src || ''
+              },
+              timestamp: Date.now()
+            },
+            '*'
+          )
+        }
+      }
+
+      // 拦截 Image 组件的预览，发送消息给父窗口并阻止默认预览
+      const imageSrc = ctx.prop.props.src || ''
+      ctx.prop.props.preview = {
+        visible: false,
+        src: imageSrc,
+        onVisibleChange: (visible, prevVisible) => {
+          if (visible && !prevVisible) {
+            // 发送预览通知给父窗口
+            sendImagePreviewMessage(imageSrc)
+            // 返回 false 阻止默认预览显示
+            return false
+          }
+        }
+      }
+    } else if (
+      (ctx.rule.type === 'image' || ctx.rule.type === 'aImage') &&
+      ctx.prop.props.preview
+    ) {
+      // 如果用户已经设置了 preview，包装它以确保先发送消息
+      const originalPreview = ctx.prop.props.preview
+      const sendImagePreviewMessage = function (src) {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: 'upload-preview',
+              file: {
+                url: src || ctx.prop.props.src || ''
+              },
+              timestamp: Date.now()
+            },
+            '*'
+          )
+        }
+      }
+
+      const imageSrc = ctx.prop.props.src || ''
+      const originalOnVisibleChange = originalPreview?.onVisibleChange
+
+      ctx.prop.props.preview = {
+        ...originalPreview,
+        visible: originalPreview.visible || false,
+        src: originalPreview.src || imageSrc,
+        onVisibleChange: (visible, prevVisible) => {
+          if (visible && !prevVisible) {
+            // 先发送消息给父窗口
+            sendImagePreviewMessage(originalPreview.src || imageSrc)
+          }
+          // 执行用户自定义的 onVisibleChange
+          if (
+            originalOnVisibleChange &&
+            typeof originalOnVisibleChange === 'function'
+          ) {
+            return originalOnVisibleChange.apply(this, arguments)
+          }
+          // 默认阻止预览显示
+          return false
+        }
+      }
+    }
   },
   getDefaultOptions() {
     return getConfig()

package/src/parsers/spin.js

@@ -92,40 +92,6 @@ 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) => {
@@ -204,36 +170,10 @@ export default {
     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 类让有子组件时自适应内容
+    // 将 spin 容器包装在 col 中，确保它占满整行（span: 24）
+    // 直接使用 vNode.make 来渲染 a-spin，并传入 childrenNodes（类似 flex 组件的处理方式）
     return ctx.vNode.col(
-      {
-        props: { span: 24 },
-        class: hasRealChildren ? '_fc-spin-col-fit' : ''
-      },
+      { props: { span: 24 } },
       {
         default: () => [ctx.vNode.make('a-spin', ctx.prop, childrenNodes)]
       }

package/src/style/index.css

@@ -501,45 +501,3 @@
 .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;
-}