@longhongguo/form-create-ant-design-vue 3.3.34 → 3.3.36

package/src/core/manager.js

@@ -1,671 +1,674 @@
-import getConfig from './config'
-import mergeProps from '@form-create/utils/lib/mergeprops'
-import is, { hasProperty } from '@form-create/utils/lib/type'
-import extend from '@form-create/utils/lib/extend'
-
-function isTooltip(info) {
-  return info.type === 'tooltip'
-}
-
-function tidy(props, name) {
-  if (!hasProperty(props, name)) return
-  if (is.String(props[name])) {
-    props[name] = { [name]: props[name], show: true }
-  }
-}
-
-function isFalse(val) {
-  return val === false
-}
-
-function tidyBool(opt, name) {
-  if (hasProperty(opt, name) && !is.Object(opt[name])) {
-    opt[name] = { show: !!opt[name] }
-  }
-}
-
-function tidyRule(rule) {
-  const _rule = { ...rule }
-  delete _rule.children
-  return _rule
-}
-
-export default {
-  validate() {
-    const form = this.form()
-    if (form) {
-      return form.validate()
-    } else {
-      return new Promise((v) => v())
-    }
-  },
-  validateField(field) {
-    const form = this.form()
-    if (form) {
-      return form.validateFields(field)
-    } else {
-      return new Promise((v) => v())
-    }
-  },
-  clearValidateState(ctx) {
-    const fItem = this.vm.refs[ctx.wrapRef]
-    if (fItem) {
-      fItem.clearValidate()
-    }
-  },
-  tidyOptions(options) {
-    ;['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col', 'title'].forEach(
-      (name) => {
-        tidyBool(options, name)
-      }
-    )
-    return options
-  },
-  tidyRule({ prop }) {
-    tidy(prop, 'title')
-    tidy(prop, 'info')
-    return prop
-  },
-  mergeProp(ctx) {
-    const def = {
-      info: {
-        type: 'popover',
-        placement: 'topLeft',
-        icon: 'QuestionCircleOutlined'
-      },
-      title: {},
-      col: { span: 24 },
-      wrap: {}
-    }
-    ;['info', 'wrap', 'col', 'title'].forEach((name) => {
-      ctx.prop[name] = mergeProps(
-        [this.options[name] || {}, ctx.prop[name] || {}],
-        def[name]
-      )
-    })
-
-    // 应用 componentStyle 到包裹组件的最顶层父容器（如 .fc-form-col）
-    // 这样在 Flex 或 Space 布局中，可以给子元素设置 flex: 1 等样式
-    if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
-      // 将 componentStyle 合并到 prop.style，这会应用到包裹组件的容器上
-      const existingStyle = ctx.prop.style || {}
-      ctx.prop.style = {
-        ...existingStyle,
-        ...ctx.rule.componentStyle
-      }
-    }
-
-    // 预览模式下：对 upload 组件设置 disabled
-    // wangEditor 组件使用只读模式（readOnly），允许复制和点击链接
-    // textarea 组件使用只读模式（readOnly），允许复制和自适应高度
-    // select 组件使用 disabled 实现只读效果（通过 CSS 样式来保持外观）
-    // 如果组件单独设置了 readOnly 属性，也应用相同的预览模式逻辑
-    const isPreviewMode = this.$handle.preview === true
-    // 从 rule.props 或 ctx.prop.props 中读取 readOnly 属性
-    const isReadOnly =
-      ctx.rule.props?.readOnly === true || ctx.prop.props?.readOnly === true
-    const shouldApplyPreviewStyle = isPreviewMode || isReadOnly
-
-    if (shouldApplyPreviewStyle) {
-      if (ctx.rule.type === 'upload') {
-        if (ctx.prop.props) {
-          ctx.prop.props.disabled = true
-        }
-      } else if (ctx.rule.type === 'fcEditor') {
-        // wangEditor 使用只读模式，不设置 disabled
-        // 只读模式允许复制和点击链接，但禁止编辑
-        if (ctx.prop.props) {
-          ctx.prop.props.readOnly = true
-          // 预览模式和只读模式下隐藏 placeholder
-          delete ctx.prop.props.placeholder
-          // 预览模式和只读模式下移除固定高度，使用自适应
-          delete ctx.prop.props.height
-        }
-      } else if (
-        ctx.rule.type === 'input' &&
-        ctx.prop.props?.type === 'textarea'
-      ) {
-        // textarea 使用只读模式，不设置 disabled
-        // 只读模式允许复制，但禁止编辑
-        if (ctx.prop.props) {
-          ctx.prop.props.readOnly = true
-          // 完全自适应高度，不限制最大高度
-          ctx.prop.props.autoSize = true
-          // 移除 rows 属性，让 autoSize 完全控制高度
-          delete ctx.prop.props.rows
-          // 预览模式和只读模式下隐藏 placeholder
-          delete ctx.prop.props.placeholder
-          // 预览模式和只读模式下隐藏字符计数
-          ctx.prop.props.showCount = false
-        }
-      } else if (ctx.rule.type === 'select') {
-        // select 组件在预览模式下使用 disabled 实现只读效果
-        // 注意：Ant Design Vue 的 Select 组件不支持 readOnly 属性
-        // 所以在预览模式下使用 disabled，并通过 CSS 样式来保持外观
-        // 强制设置 disabled = true，覆盖用户可能设置的 disabled: false
-        if (ctx.prop.props) {
-          ctx.prop.props.disabled = true
-          // 预览模式和只读模式下隐藏 placeholder
-          delete ctx.prop.props.placeholder
-          // 如果原本设置了 readOnly，保留这个标记以便 CSS 识别
-          if (isReadOnly) {
-            // 可以在这里添加一个标记，但 Select 组件不支持 readOnly
-            // 所以我们通过 disabled 来实现，CSS 会处理样式
-          }
-        }
-      } else if (ctx.rule.type === 'input') {
-        // input 组件支持 readOnly 属性
-        // 如果设置了 readOnly，直接使用组件的 readOnly 属性
-        if (ctx.prop.props && isReadOnly) {
-          ctx.prop.props.readOnly = true
-          // 预览模式和只读模式下隐藏 placeholder
-          delete ctx.prop.props.placeholder
-          // 预览模式和只读模式下隐藏字符计数
-          ctx.prop.props.showCount = false
-        } else if (ctx.prop.props && isPreviewMode) {
-          // 全局预览模式下也隐藏 placeholder
-          delete ctx.prop.props.placeholder
-          // 全局预览模式下隐藏字符计数
-          ctx.prop.props.showCount = false
-        }
-      } else if (
-        ctx.rule.type === 'datePicker' ||
-        ctx.rule.type === 'timePicker' ||
-        ctx.rule.type === 'timeRangePicker' ||
-        ctx.rule.type === 'rangePicker' ||
-        ctx.rule.type === 'cascader'
-      ) {
-        // 日期选择器、时间选择器、级联选择器等组件
-        // 预览模式和只读模式下隐藏 placeholder
-        if (ctx.prop.props) {
-          if (ctx.rule.type === 'cascader') {
-            ctx.prop.props.disabled = true
-          }
-          delete ctx.prop.props.placeholder
-        }
-      }
-    }
-
-    // 检查父容器是否是 flex 或 space 类型，如果是，自动设置 col: false 避免被 a-col 包装
-    // 需要在合并完 col 后再检查，确保能覆盖默认值
-    if (ctx.parent && ctx.parent.rule) {
-      const parentType = ctx.parent.rule.type
-      const parentMenu = ctx.parent.rule._menu
-      if (
-        parentType === 'flex' ||
-        parentType === 'a-flex' ||
-        parentMenu?.name === 'flex' ||
-        parentType === 'space' ||
-        parentType === 'a-space' ||
-        parentMenu?.name === 'space'
-      ) {
-        // 如果父容器是 flex 或 space，强制设置 col 为 false，禁用 col 包装
-        ctx.prop.col = false
-        // 同时设置 rule.col 以确保在 makeWrap 中也能识别
-        if (ctx.rule) {
-          ctx.rule.col = false
-        }
-      }
-    }
-
-    // 为 upload 组件自动添加 onPreview，确保始终向父窗口发送预览通知
-    if (ctx.rule.type === 'upload' && !ctx.prop.props.onPreview) {
-      const sendPreviewMessage = function (file) {
-        if (window.parent && window.parent !== window) {
-          window.parent.postMessage(
-            {
-              type: 'upload-preview',
-              file: {
-                url: file.url,
-                name: file.name,
-                uid: file.uid,
-                size: file.size,
-                type: file.type
-              },
-              timestamp: Date.now()
-            },
-            '*'
-          )
-        }
-      }
-      ctx.prop.props.onPreview = function (file) {
-        sendPreviewMessage(file)
-        // 不执行默认预览，只发送消息
-      }
-    } else if (ctx.rule.type === 'upload' && ctx.prop.props.onPreview) {
-      // 如果用户已经设置了 onPreview，包装它以确保先发送消息
-      const originalOnPreview = ctx.prop.props.onPreview
-      const sendPreviewMessage = function (file) {
-        if (window.parent && window.parent !== window) {
-          window.parent.postMessage(
-            {
-              type: 'upload-preview',
-              file: {
-                url: file.url,
-                name: file.name,
-                uid: file.uid,
-                size: file.size,
-                type: file.type
-              },
-              timestamp: Date.now()
-            },
-            '*'
-          )
-        }
-      }
-      ctx.prop.props.onPreview = function (file) {
-        sendPreviewMessage(file)
-        if (originalOnPreview && typeof originalOnPreview === 'function') {
-          originalOnPreview.apply(this, arguments)
-        }
-      }
-    }
-
-    // 为 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()
-  },
-  adapterValidate(validate, validator) {
-    validate.validator = (rule, value) => {
-      return new Promise((resolve, reject) => {
-        const callback = (err) => {
-          if (err) {
-            reject(err)
-          } else {
-            resolve()
-          }
-        }
-        return validator(value, callback)
-      })
-    }
-    return validate
-  },
-  update() {
-    const form = this.options.form
-    this.rule = {
-      props: { ...form },
-      on: {
-        submit: (e) => {
-          e.preventDefault()
-        }
-      },
-      style: form.style,
-      type: 'form'
-    }
-  },
-  beforeRender() {
-    const { key, ref, $handle } = this
-    const form = this.options.form
-    extend(this.rule, {
-      key,
-      ref,
-      class: [
-        form.className,
-        form.class,
-        'form-create',
-        this.$handle.preview ? 'is-preview' : ''
-      ]
-    })
-    extend(this.rule.props, {
-      model: $handle.formData
-    })
-  },
-  render(children) {
-    if (children.slotLen() && !this.$handle.preview) {
-      children.setSlot(undefined, () => this.makeFormBtn())
-    }
-    return this.$r(
-      this.rule,
-      isFalse(this.options.row.show)
-        ? children.getSlots()
-        : [this.makeRow(children)]
-    )
-  },
-  makeWrap(ctx, children) {
-    const rule = ctx.prop
-    const uni = `${this.key}${ctx.key}`
-    const col = rule.col
-    const isTitle = this.isTitle(rule) && rule.wrap.title !== false
-    const { layout, col: _col } = this.rule.props
-    const cls = rule.wrap.class
-    delete rule.wrap.class
-    delete rule.wrap.title
-
-    // 检查父容器是否是 flex 或 space 类型，如果是，强制禁用 col 包装
-    let shouldDisableCol = false
-    if (ctx.parent && ctx.parent.rule) {
-      const parentType = ctx.parent.rule.type
-      const parentMenu = ctx.parent.rule._menu
-      if (
-        parentType === 'flex' ||
-        parentType === 'a-flex' ||
-        parentMenu?.name === 'flex' ||
-        parentType === 'space' ||
-        parentType === 'a-space' ||
-        parentMenu?.name === 'space'
-      ) {
-        shouldDisableCol = true
-      }
-    }
-
-    const item = isFalse(rule.wrap.show)
-      ? children
-      : this.$r(
-          mergeProps([
-            rule.wrap,
-            {
-              props: {
-                ...tidyRule(rule.wrap || {}),
-                hasFeedback: rule.hasFeedback || false,
-                name: ctx.id,
-                rules: ctx.injectValidate(),
-                ...(layout !== 'horizontal'
-                  ? { labelCol: {}, wrapperCol: {} }
-                  : {})
-              },
-              class: this.$render.mergeClass(
-                cls || rule.className,
-                'fc-form-item'
-              ),
-              key: `${uni}fi`,
-              ref: ctx.wrapRef,
-              type: 'formItem'
-            }
-          ]),
-          {
-            default: () => children,
-            ...(isTitle ? { label: () => this.makeInfo(rule, uni, ctx) } : {})
-          }
-        )
-    // 如果父容器是 flex，或者 layout 是 inline，或者 col 被显式禁用，则不使用 col 包装
-    return layout === 'inline' ||
-      isFalse(_col) ||
-      isFalse(col.show) ||
-      shouldDisableCol
-      ? item
-      : this.makeCol(rule, uni, [item], ctx)
-  },
-  isTitle(rule) {
-    if (this.options.form.title === false) return false
-    const title = rule.title
-    return !((!title.title && !title.native) || isFalse(title.show))
-  },
-  makeInfo(rule, uni, ctx) {
-    const titleProp = { ...rule.title }
-    const infoProp = { ...rule.info }
-    if (this.options.form.title === false) return false
-    if ((!titleProp.title && !titleProp.native) || isFalse(titleProp.show))
-      return
-    const isTip = isTooltip(infoProp)
-    const titleSlot = this.getSlot('title')
-    const children = [
-      titleSlot
-        ? titleSlot({
-            title: ctx.refRule?.__$title?.value,
-            rule: ctx.rule,
-            options: this.options
-          })
-        : ctx.refRule?.__$title?.value
-    ]
-
-    if (
-      !isFalse(infoProp.show) &&
-      (infoProp.info || infoProp.native) &&
-      !isFalse(infoProp.icon)
-    ) {
-      const prop = {
-        type: infoProp.type || 'popover',
-        props: tidyRule(infoProp),
-        key: `${uni}pop`
-      }
-
-      delete prop.props.icon
-      delete prop.props.show
-      delete prop.props.info
-      delete prop.props.align
-      delete prop.props.native
-
-      const field = isTip ? 'title' : 'content'
-      if (infoProp.info && !hasProperty(prop.props, field)) {
-        prop.props[field] = ctx.refRule?.__$info?.value
-      }
-      children[infoProp.align !== 'left' ? 'unshift' : 'push'](
-        this.$r(mergeProps([infoProp, prop]), {
-          [titleProp.slot || 'default']: () =>
-            this.$r({
-              type:
-                infoProp.icon === true
-                  ? 'QuestionCircleOutlined'
-                  : infoProp.icon || '',
-              props: {
-                type:
-                  infoProp.icon === true
-                    ? 'QuestionCircleOutlined'
-                    : infoProp.icon
-              },
-              key: `${uni}i`
-            })
-        })
-      )
-    }
-
-    const _prop = mergeProps([
-      titleProp,
-      {
-        props: tidyRule(titleProp),
-        key: `${uni}tit`,
-        class: 'fc-form-title',
-        type: titleProp.type || 'span'
-      }
-    ])
-
-    delete _prop.props.show
-    delete _prop.props.title
-    delete _prop.props.native
-
-    return this.$r(_prop, children)
-  },
-  makeCol(rule, uni, children, ctx) {
-    const col = rule.col
-    // 将 componentStyle 应用到 col 容器上
-    const style = ctx?.prop?.style || {}
-    return this.$r(
-      {
-        class: this.$render.mergeClass(col.class, 'fc-form-col'),
-        type: 'col',
-        props: col || { span: 24 },
-        style: style,
-        key: `${uni}col`
-      },
-      children
-    )
-  },
-  makeRow(children) {
-    const row = this.options.row || {}
-    return this.$r(
-      {
-        type: 'row',
-        props: row,
-        class: this.$render.mergeClass(row.class, 'fc-form-row'),
-        key: `${this.key}row`
-      },
-      children
-    )
-  },
-  makeFormBtn() {
-    let vn = []
-    if (!isFalse(this.options.submitBtn.show)) {
-      vn.push(this.makeSubmitBtn())
-    }
-    if (!isFalse(this.options.resetBtn.show)) {
-      vn.push(this.makeResetBtn())
-    }
-    if (!vn.length) {
-      return
-    }
-    let { labelCol, wrapperCol, layout } = this.rule.props
-    if (layout !== 'horizontal') {
-      labelCol = wrapperCol = {}
-    }
-    const item = this.$r(
-      {
-        type: 'formItem',
-        class: 'fc-form-item fc-form-footer',
-        key: `${this.key}fb`,
-        props: {
-          labelCol,
-          wrapperCol,
-          label: ' ',
-          colon: false
-        }
-      },
-      vn
-    )
-
-    return layout === 'inline'
-      ? item
-      : this.$r(
-          {
-            type: 'col',
-            class: 'fc-form-col',
-            props: { span: 24 },
-            key: `${this.key}fc`
-          },
-          [item]
-        )
-  },
-
-  makeResetBtn() {
-    const resetBtn = { ...this.options.resetBtn }
-    const innerText =
-      resetBtn.innerText || this.$handle.api.t('reset') || '重置'
-    delete resetBtn.innerText
-    delete resetBtn.click
-    delete resetBtn.col
-    delete resetBtn.show
-    return this.$r(
-      {
-        type: 'button',
-        props: resetBtn,
-        class: 'fc-reset-btn',
-        style: { width: resetBtn.width, marginLeft: '10px' },
-        on: {
-          click: () => {
-            const fApi = this.$handle.api
-            this.options.resetBtn.click
-              ? this.options.resetBtn.click(fApi)
-              : fApi.resetFields()
-          }
-        },
-        key: `${this.key}b2`
-      },
-      [innerText]
-    )
-  },
-  makeSubmitBtn() {
-    const submitBtn = { ...this.options.submitBtn }
-    const innerText =
-      submitBtn.innerText || this.$handle.api.t('submit') || '提交'
-    delete submitBtn.innerText
-    delete submitBtn.click
-    delete submitBtn.col
-    delete submitBtn.show
-    return this.$r(
-      {
-        type: 'button',
-        props: submitBtn,
-        class: 'fc-submit-btn',
-        style: { width: submitBtn.width },
-        on: {
-          click: () => {
-            const fApi = this.$handle.api
-            this.options.submitBtn.click
-              ? this.options.submitBtn.click(fApi)
-              : fApi.submit().catch(() => {})
-          }
-        },
-        key: `${this.key}b1`
-      },
-      [innerText]
-    )
-  }
-}
+import getConfig from './config'
+import mergeProps from '@form-create/utils/lib/mergeprops'
+import is, { hasProperty } from '@form-create/utils/lib/type'
+import extend from '@form-create/utils/lib/extend'
+
+function isTooltip(info) {
+  return info.type === 'tooltip'
+}
+
+function tidy(props, name) {
+  if (!hasProperty(props, name)) return
+  if (is.String(props[name])) {
+    props[name] = { [name]: props[name], show: true }
+  }
+}
+
+function isFalse(val) {
+  return val === false
+}
+
+function tidyBool(opt, name) {
+  if (hasProperty(opt, name) && !is.Object(opt[name])) {
+    opt[name] = { show: !!opt[name] }
+  }
+}
+
+function tidyRule(rule) {
+  const _rule = { ...rule }
+  delete _rule.children
+  return _rule
+}
+
+export default {
+  validate() {
+    const form = this.form()
+    if (form) {
+      return form.validate()
+    } else {
+      return new Promise((v) => v())
+    }
+  },
+  validateField(field) {
+    const form = this.form()
+    if (form) {
+      return form.validateFields(field)
+    } else {
+      return new Promise((v) => v())
+    }
+  },
+  clearValidateState(ctx) {
+    const fItem = this.vm.refs[ctx.wrapRef]
+    if (fItem) {
+      fItem.clearValidate()
+    }
+  },
+  tidyOptions(options) {
+    ;['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col', 'title'].forEach(
+      (name) => {
+        tidyBool(options, name)
+      }
+    )
+    return options
+  },
+  tidyRule({ prop }) {
+    tidy(prop, 'title')
+    tidy(prop, 'info')
+    return prop
+  },
+  mergeProp(ctx) {
+    const def = {
+      info: {
+        type: 'popover',
+        placement: 'topLeft',
+        icon: 'QuestionCircleOutlined'
+      },
+      title: {},
+      col: { span: 24 },
+      wrap: {}
+    }
+    ;['info', 'wrap', 'col', 'title'].forEach((name) => {
+      ctx.prop[name] = mergeProps(
+        [this.options[name] || {}, ctx.prop[name] || {}],
+        def[name]
+      )
+    })
+
+    // 应用 componentStyle 到包裹组件的最顶层父容器（如 .fc-form-col）
+    // 这样在 Flex 或 Space 布局中，可以给子元素设置 flex: 1 等样式
+    if (
+      ctx.rule.componentStyle &&
+      typeof ctx.rule.componentStyle === 'object'
+    ) {
+      // 将 componentStyle 合并到 prop.style，这会应用到包裹组件的容器上
+      const existingStyle = ctx.prop.style || {}
+      ctx.prop.style = {
+        ...existingStyle,
+        ...ctx.rule.componentStyle
+      }
+    }
+
+    // 预览模式下：对 upload 组件设置 disabled
+    // wangEditor 组件使用只读模式（readOnly），允许复制和点击链接
+    // textarea 组件使用只读模式（readOnly），允许复制和自适应高度
+    // select 组件使用 disabled 实现只读效果（通过 CSS 样式来保持外观）
+    // 如果组件单独设置了 readOnly 属性，也应用相同的预览模式逻辑
+    const isPreviewMode = this.$handle.preview === true
+    // 从 rule.props 或 ctx.prop.props 中读取 readOnly 属性
+    const isReadOnly =
+      ctx.rule.props?.readOnly === true || ctx.prop.props?.readOnly === true
+    const shouldApplyPreviewStyle = isPreviewMode || isReadOnly
+
+    if (shouldApplyPreviewStyle) {
+      if (ctx.rule.type === 'upload') {
+        if (ctx.prop.props) {
+          ctx.prop.props.disabled = true
+        }
+      } else if (ctx.rule.type === 'fcEditor') {
+        // wangEditor 使用只读模式，不设置 disabled
+        // 只读模式允许复制和点击链接，但禁止编辑
+        if (ctx.prop.props) {
+          ctx.prop.props.readOnly = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下移除固定高度，使用自适应
+          delete ctx.prop.props.height
+        }
+      } else if (
+        ctx.rule.type === 'input' &&
+        ctx.prop.props?.type === 'textarea'
+      ) {
+        // textarea 使用只读模式，不设置 disabled
+        // 只读模式允许复制，但禁止编辑
+        if (ctx.prop.props) {
+          ctx.prop.props.readOnly = true
+          // 完全自适应高度，不限制最大高度
+          ctx.prop.props.autoSize = true
+          // 移除 rows 属性，让 autoSize 完全控制高度
+          delete ctx.prop.props.rows
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下隐藏字符计数
+          ctx.prop.props.showCount = false
+        }
+      } else if (ctx.rule.type === 'select') {
+        // select 组件在预览模式下使用 disabled 实现只读效果
+        // 注意：Ant Design Vue 的 Select 组件不支持 readOnly 属性
+        // 所以在预览模式下使用 disabled，并通过 CSS 样式来保持外观
+        // 强制设置 disabled = true，覆盖用户可能设置的 disabled: false
+        if (ctx.prop.props) {
+          ctx.prop.props.disabled = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 如果原本设置了 readOnly，保留这个标记以便 CSS 识别
+          if (isReadOnly) {
+            // 可以在这里添加一个标记，但 Select 组件不支持 readOnly
+            // 所以我们通过 disabled 来实现，CSS 会处理样式
+          }
+        }
+      } else if (ctx.rule.type === 'input') {
+        // input 组件支持 readOnly 属性
+        // 如果设置了 readOnly，直接使用组件的 readOnly 属性
+        if (ctx.prop.props && isReadOnly) {
+          ctx.prop.props.readOnly = true
+          // 预览模式和只读模式下隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 预览模式和只读模式下隐藏字符计数
+          ctx.prop.props.showCount = false
+        } else if (ctx.prop.props && isPreviewMode) {
+          // 全局预览模式下也隐藏 placeholder
+          delete ctx.prop.props.placeholder
+          // 全局预览模式下隐藏字符计数
+          ctx.prop.props.showCount = false
+        }
+      } else if (
+        ctx.rule.type === 'datePicker' ||
+        ctx.rule.type === 'timePicker' ||
+        ctx.rule.type === 'timeRangePicker' ||
+        ctx.rule.type === 'rangePicker' ||
+        ctx.rule.type === 'cascader'
+      ) {
+        // 日期选择器、时间选择器、级联选择器等组件
+        // 预览模式和只读模式下隐藏 placeholder
+        if (ctx.prop.props) {
+          if (ctx.rule.type === 'cascader') {
+            ctx.prop.props.disabled = true
+          }
+          delete ctx.prop.props.placeholder
+        }
+      }
+    }
+
+    // 检查父容器是否是 flex 或 space 类型，如果是，自动设置 col: false 避免被 a-col 包装
+    // 需要在合并完 col 后再检查，确保能覆盖默认值
+    if (ctx.parent && ctx.parent.rule) {
+      const parentType = ctx.parent.rule.type
+      const parentMenu = ctx.parent.rule._menu
+      if (
+        parentType === 'flex' ||
+        parentType === 'a-flex' ||
+        parentMenu?.name === 'flex' ||
+        parentType === 'space' ||
+        parentType === 'a-space' ||
+        parentMenu?.name === 'space'
+      ) {
+        // 如果父容器是 flex 或 space，强制设置 col 为 false，禁用 col 包装
+        ctx.prop.col = false
+        // 同时设置 rule.col 以确保在 makeWrap 中也能识别
+        if (ctx.rule) {
+          ctx.rule.col = false
+        }
+      }
+    }
+
+    // 为 upload 组件自动添加 onPreview，确保始终向父窗口发送预览通知
+    if (ctx.rule.type === 'upload' && !ctx.prop.props.onPreview) {
+      const sendPreviewMessage = function (file) {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: 'upload-preview',
+              file: {
+                url: file.url,
+                name: file.name,
+                uid: file.uid,
+                size: file.size,
+                type: file.type
+              },
+              timestamp: Date.now()
+            },
+            '*'
+          )
+        }
+      }
+      ctx.prop.props.onPreview = function (file) {
+        sendPreviewMessage(file)
+        // 不执行默认预览，只发送消息
+      }
+    } else if (ctx.rule.type === 'upload' && ctx.prop.props.onPreview) {
+      // 如果用户已经设置了 onPreview，包装它以确保先发送消息
+      const originalOnPreview = ctx.prop.props.onPreview
+      const sendPreviewMessage = function (file) {
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: 'upload-preview',
+              file: {
+                url: file.url,
+                name: file.name,
+                uid: file.uid,
+                size: file.size,
+                type: file.type
+              },
+              timestamp: Date.now()
+            },
+            '*'
+          )
+        }
+      }
+      ctx.prop.props.onPreview = function (file) {
+        sendPreviewMessage(file)
+        if (originalOnPreview && typeof originalOnPreview === 'function') {
+          originalOnPreview.apply(this, arguments)
+        }
+      }
+    }
+
+    // 为 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()
+  },
+  adapterValidate(validate, validator) {
+    validate.validator = (rule, value) => {
+      return new Promise((resolve, reject) => {
+        const callback = (err) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve()
+          }
+        }
+        return validator(value, callback)
+      })
+    }
+    return validate
+  },
+  update() {
+    const form = this.options.form
+    this.rule = {
+      props: { ...form },
+      on: {
+        submit: (e) => {
+          e.preventDefault()
+        }
+      },
+      style: form.style,
+      type: 'form'
+    }
+  },
+  beforeRender() {
+    const { key, ref, $handle } = this
+    const form = this.options.form
+    extend(this.rule, {
+      key,
+      ref,
+      class: [
+        form.className,
+        form.class,
+        'form-create',
+        this.$handle.preview ? 'is-preview' : ''
+      ]
+    })
+    extend(this.rule.props, {
+      model: $handle.formData
+    })
+  },
+  render(children) {
+    if (children.slotLen() && !this.$handle.preview) {
+      children.setSlot(undefined, () => this.makeFormBtn())
+    }
+    return this.$r(
+      this.rule,
+      isFalse(this.options.row.show)
+        ? children.getSlots()
+        : [this.makeRow(children)]
+    )
+  },
+  makeWrap(ctx, children) {
+    const rule = ctx.prop
+    const uni = `${this.key}${ctx.key}`
+    const col = rule.col
+    const isTitle = this.isTitle(rule) && rule.wrap.title !== false
+    const { layout, col: _col } = this.rule.props
+    const cls = rule.wrap.class
+    delete rule.wrap.class
+    delete rule.wrap.title
+
+    // 检查父容器是否是 flex 或 space 类型，如果是，强制禁用 col 包装
+    let shouldDisableCol = false
+    if (ctx.parent && ctx.parent.rule) {
+      const parentType = ctx.parent.rule.type
+      const parentMenu = ctx.parent.rule._menu
+      if (
+        parentType === 'flex' ||
+        parentType === 'a-flex' ||
+        parentMenu?.name === 'flex' ||
+        parentType === 'space' ||
+        parentType === 'a-space' ||
+        parentMenu?.name === 'space'
+      ) {
+        shouldDisableCol = true
+      }
+    }
+
+    const item = isFalse(rule.wrap.show)
+      ? children
+      : this.$r(
+          mergeProps([
+            rule.wrap,
+            {
+              props: {
+                ...tidyRule(rule.wrap || {}),
+                hasFeedback: rule.hasFeedback || false,
+                name: ctx.id,
+                rules: ctx.injectValidate(),
+                ...(layout !== 'horizontal'
+                  ? { labelCol: {}, wrapperCol: {} }
+                  : {})
+              },
+              class: this.$render.mergeClass(
+                cls || rule.className,
+                'fc-form-item'
+              ),
+              key: `${uni}fi`,
+              ref: ctx.wrapRef,
+              type: 'formItem'
+            }
+          ]),
+          {
+            default: () => children,
+            ...(isTitle ? { label: () => this.makeInfo(rule, uni, ctx) } : {})
+          }
+        )
+    // 如果父容器是 flex，或者 layout 是 inline，或者 col 被显式禁用，则不使用 col 包装
+    return layout === 'inline' ||
+      isFalse(_col) ||
+      isFalse(col.show) ||
+      shouldDisableCol
+      ? item
+      : this.makeCol(rule, uni, [item], ctx)
+  },
+  isTitle(rule) {
+    if (this.options.form.title === false) return false
+    const title = rule.title
+    return !((!title.title && !title.native) || isFalse(title.show))
+  },
+  makeInfo(rule, uni, ctx) {
+    const titleProp = { ...rule.title }
+    const infoProp = { ...rule.info }
+    if (this.options.form.title === false) return false
+    if ((!titleProp.title && !titleProp.native) || isFalse(titleProp.show))
+      return
+    const isTip = isTooltip(infoProp)
+    const titleSlot = this.getSlot('title')
+    const children = [
+      titleSlot
+        ? titleSlot({
+            title: ctx.refRule?.__$title?.value,
+            rule: ctx.rule,
+            options: this.options
+          })
+        : ctx.refRule?.__$title?.value
+    ]
+
+    if (
+      !isFalse(infoProp.show) &&
+      (infoProp.info || infoProp.native) &&
+      !isFalse(infoProp.icon)
+    ) {
+      const prop = {
+        type: infoProp.type || 'popover',
+        props: tidyRule(infoProp),
+        key: `${uni}pop`
+      }
+
+      delete prop.props.icon
+      delete prop.props.show
+      delete prop.props.info
+      delete prop.props.align
+      delete prop.props.native
+
+      const field = isTip ? 'title' : 'content'
+      if (infoProp.info && !hasProperty(prop.props, field)) {
+        prop.props[field] = ctx.refRule?.__$info?.value
+      }
+      children[infoProp.align !== 'left' ? 'unshift' : 'push'](
+        this.$r(mergeProps([infoProp, prop]), {
+          [titleProp.slot || 'default']: () =>
+            this.$r({
+              type:
+                infoProp.icon === true
+                  ? 'QuestionCircleOutlined'
+                  : infoProp.icon || '',
+              props: {
+                type:
+                  infoProp.icon === true
+                    ? 'QuestionCircleOutlined'
+                    : infoProp.icon
+              },
+              key: `${uni}i`
+            })
+        })
+      )
+    }
+
+    const _prop = mergeProps([
+      titleProp,
+      {
+        props: tidyRule(titleProp),
+        key: `${uni}tit`,
+        class: 'fc-form-title',
+        type: titleProp.type || 'span'
+      }
+    ])
+
+    delete _prop.props.show
+    delete _prop.props.title
+    delete _prop.props.native
+
+    return this.$r(_prop, children)
+  },
+  makeCol(rule, uni, children, ctx) {
+    const col = rule.col
+    // 将 componentStyle 应用到 col 容器上
+    const style = ctx?.prop?.style || {}
+    return this.$r(
+      {
+        class: this.$render.mergeClass(col.class, 'fc-form-col'),
+        type: 'col',
+        props: col || { span: 24 },
+        style: style,
+        key: `${uni}col`
+      },
+      children
+    )
+  },
+  makeRow(children) {
+    const row = this.options.row || {}
+    return this.$r(
+      {
+        type: 'row',
+        props: row,
+        class: this.$render.mergeClass(row.class, 'fc-form-row'),
+        key: `${this.key}row`
+      },
+      children
+    )
+  },
+  makeFormBtn() {
+    let vn = []
+    if (!isFalse(this.options.submitBtn.show)) {
+      vn.push(this.makeSubmitBtn())
+    }
+    if (!isFalse(this.options.resetBtn.show)) {
+      vn.push(this.makeResetBtn())
+    }
+    if (!vn.length) {
+      return
+    }
+    let { labelCol, wrapperCol, layout } = this.rule.props
+    if (layout !== 'horizontal') {
+      labelCol = wrapperCol = {}
+    }
+    const item = this.$r(
+      {
+        type: 'formItem',
+        class: 'fc-form-item fc-form-footer',
+        key: `${this.key}fb`,
+        props: {
+          labelCol,
+          wrapperCol,
+          label: ' ',
+          colon: false
+        }
+      },
+      vn
+    )
+
+    return layout === 'inline'
+      ? item
+      : this.$r(
+          {
+            type: 'col',
+            class: 'fc-form-col',
+            props: { span: 24 },
+            key: `${this.key}fc`
+          },
+          [item]
+        )
+  },
+
+  makeResetBtn() {
+    const resetBtn = { ...this.options.resetBtn }
+    const innerText =
+      resetBtn.innerText || this.$handle.api.t('reset') || '重置'
+    delete resetBtn.innerText
+    delete resetBtn.click
+    delete resetBtn.col
+    delete resetBtn.show
+    return this.$r(
+      {
+        type: 'button',
+        props: resetBtn,
+        class: 'fc-reset-btn',
+        style: { width: resetBtn.width, marginLeft: '10px' },
+        on: {
+          click: () => {
+            const fApi = this.$handle.api
+            this.options.resetBtn.click
+              ? this.options.resetBtn.click(fApi)
+              : fApi.resetFields()
+          }
+        },
+        key: `${this.key}b2`
+      },
+      [innerText]
+    )
+  },
+  makeSubmitBtn() {
+    const submitBtn = { ...this.options.submitBtn }
+    const innerText =
+      submitBtn.innerText || this.$handle.api.t('submit') || '提交'
+    delete submitBtn.innerText
+    delete submitBtn.click
+    delete submitBtn.col
+    delete submitBtn.show
+    return this.$r(
+      {
+        type: 'button',
+        props: submitBtn,
+        class: 'fc-submit-btn',
+        style: { width: submitBtn.width },
+        on: {
+          click: () => {
+            const fApi = this.$handle.api
+            this.options.submitBtn.click
+              ? this.options.submitBtn.click(fApi)
+              : fApi.submit().catch(() => {})
+          }
+        },
+        key: `${this.key}b1`
+      },
+      [innerText]
+    )
+  }
+}