@longhongguo/form-create-ant-design-vue 3.2.70 → 3.2.72

package/package.json

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

@@ -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/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

@@ -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
 
@@ -88,26 +94,26 @@ export default {
 
       // 确保子组件不被 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 +136,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,12 +154,12 @@ 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，直接使用 defaultRender
     if (!containerMode) {
       return ctx.$render.defaultRender(ctx, undefined)
@@ -160,9 +167,11 @@ export default {
 
     // 容器模式：使用传入的 children 参数
     // children 参数已经是渲染好的 vnodes，直接传递给 a-spin
-    const childrenNodes = children && Array.isArray(children) ? children : (children || [])
+    const childrenNodes =
+      children && Array.isArray(children) ? children : children || []
 
     // 将 spin 容器包装在 col 中，确保它占满整行（span: 24）
+    // 直接使用 vNode.make 来渲染 a-spin，并传入 childrenNodes（类似 flex 组件的处理方式）
     return ctx.vNode.col(
       { props: { span: 24 } },
       {
@@ -171,4 +180,3 @@ export default {
     )
   }
 }
-