@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/page-designer/designer.js

@@ -0,0 +1,1299 @@
+import { isEmpty, cloneDeep } from 'lodash-es'
+import { reactive, markRaw, toRaw, watch, effectScope } from 'vue'
+import util from '@epxing/core/src/runtime-utils/util'
+import storage from '@epxing/utils/src/storage'
+const { genId } = util
+const defaultPageConfig = {}
+
+/**
+ * 获取组件上的插槽组件列表
+ * 插槽结构：widget.slots = { [插槽名]: 组件 }，如折叠项的 { header: {...} }
+ * 运行时由各组件自己渲染（见 packages/collapse/Collapse.vue），
+ * 设计器这边统一按这个结构识别，保证大纲、删除、复制、拖拽等链路都能覆盖到插槽里的组件。
+ * @param { Object } widget 组件
+ * @returns { Array<{ name: String, widget: Object }> }
+ */
+export function getWidgetSlots (widget) {
+  const { slots } = widget || {}
+  if (!slots || typeof slots !== 'object') return []
+  return Object.keys(slots)
+    .filter(name => slots[name] && slots[name].id)
+    .map(name => ({ name, widget: slots[name] }))
+}
+
+/**
+ * 获取组件的全部子组件（items + 插槽），用于需要遍历整棵树的场景
+ * @param { Object } widget 组件
+ * @returns { Array<Object> }
+ */
+export function getWidgetChildren (widget) {
+  const { items = [] } = widget || {}
+  return [...items, ...getWidgetSlots(widget).map(slot => slot.widget)]
+}
+export function createDesigner (vueInstance) {
+  // T25：设计器事件枢纽用内置 emitter，替代"组件实例当事件总线"（Vue3 无实例事件 API）
+  const designerEvents = new Map()
+  // 组件库 / 模板库索引：CODE → 组件信息、ID → 模板。库是只读数据，markRaw 后不再被代理与依赖收集；
+  // 此前每个画布组件的 widgetInfo 都对整个库的每个元素建依赖（N 组件 × M 库项）
+  const widgetInfoIndex = new Map()
+  const templateIndex = new Map()
+  // 组件树索引：id → { widget, parent, slotName }（存原始对象）。任何深层改动只标脏，下次查询时重建一次。
+  // 用 deep watch 标脏而不是在改动入口标脏：外部直接 splice 的入口有 7 处（Tree/Item/Preview/Setting/Overlay），漏一处就错。
+  // 重建时走 toRaw 的原始树，不会让调用方所在的 effect 意外依赖整棵树；查询时再 reactive() 回代理返回。
+  let widgetIndex = new Map()
+  let indexDirty = true
+  const rebuildIndex = () => {
+    widgetIndex = new Map()
+    const walk = (list, parent, slotName) => {
+      for (const item of toRaw(list) || []) {
+        const raw = toRaw(item)
+        if (!raw || !raw.id) continue
+        // 重复 id 取深度优先的第一个，与原递归实现一致
+        if (!widgetIndex.has(raw.id)) widgetIndex.set(raw.id, { widget: raw, parent, slotName })
+        walk(raw.items, raw, '')
+        for (const slot of getWidgetSlots(raw)) walk([slot.widget], raw, slot.name)
+      }
+    }
+    walk(state.widgetList, null, '')
+    indexDirty = false
+  }
+  const lookup = id => {
+    if (indexDirty) rebuildIndex()
+    return widgetIndex.get(id)
+  }
+  const asReactive = obj => (obj ? reactive(obj) : obj)
+  let saveTimer = null
+  const scope = effectScope(true)
+  const state = reactive({
+    version: '2.0',
+    mode: 'page',
+    terminal: 'pc',
+    page: {}, // 页面
+    widgetList: [], // 组件列表
+    widgetConfig: {}, // 组件配置
+    templateLibrary: [], // 模板列表
+    templateAttributeTree: [], // 模板配置参数
+    pageConfig: {}, // 页面配置
+    allWidgets: [],
+    formConfig: { cssCode: '' },
+    selectedId: null,
+    selectedWidget: null,
+    selectedWidgetName: null, // 选中组件名称（唯一）
+    // 悬浮组件状态
+    hoverWidgetId: null,
+    hoverWidget: null,
+    hoverParentWidget: null,
+    // 拖拽时当前悬停的放置目标 { type: 'root' | 'container', widgetId: string | null }
+    dragOverTarget: null,
+    // 当前放置目标对应的 DOM 元素，用于独立浮层定位
+    dragOverTargetElement: null,
+    vueInstance: vueInstance,
+
+    formWidget: null, // 表单设计容器
+
+    cssClassList: [], // 自定义样式列表
+
+    historyData: {
+      index: -1, // index: 0,
+      maxStep: 20,
+      steps: []
+    },
+
+    initDesigner (resetFormJson) {
+      this.widgetList = []
+      this.widgetConfig = {}
+      this.pageConfig = cloneDeep(defaultPageConfig)
+      if (!resetFormJson) {
+        this.initHistoryData()
+      }
+    },
+
+    clearDesigner (skipHistoryChange) {
+      const emptyWidgetListFlag = (this.widgetList.length === 0)
+      this.widgetList = []
+      this.widgetConfig = {}
+      this.selectedId = null
+      this.selectedWidget = {} // this.selectedWidget = null
+      this.pageConfig = cloneDeep(defaultPageConfig)
+
+      if (skipHistoryChange) {
+        // 什么也不做！！
+      } else if (!emptyWidgetListFlag) {
+        this.emitHistoryChange()
+      } else {
+        this.saveCurrentHistoryStep()
+      }
+    },
+    initWidgetList (componentList) {
+      this.allWidgets = markRaw([...componentList])
+      widgetInfoIndex.clear()
+      for (const con of this.allWidgets) {
+        if (con && con.CODE) widgetInfoIndex.set(con.CODE, con)
+      }
+    },
+    initTemplateLibrary (templateLibrary) {
+      this.templateLibrary = markRaw(templateLibrary || [])
+      templateIndex.clear()
+      for (const tpl of this.templateLibrary) {
+        if (tpl && tpl.ID) templateIndex.set(tpl.ID, tpl)
+      }
+    },
+    setTemplateAttributeTree (data) {
+      this.templateAttributeTree = data
+    },
+    loadFormJson (page) {
+      this.page = page
+      const { isComponent, isTemplate, config: formJson = {} } = page
+      if (isComponent) this.mode = 'component'
+      if (isTemplate) this.mode = 'template'
+      let modifiedFlag = false
+      if (formJson) {
+        const { items: widgetList = [], itemConfigs: widgetConfig = {}, ...pageConfig } = formJson
+
+        if (widgetList) {
+          // this.formWidget.clearWidgetRefList()
+          this.widgetList = widgetList
+          this.widgetConfig = widgetConfig
+          modifiedFlag = true
+        }
+        if (pageConfig) {
+          this.pageConfig = { ...pageConfig }
+          modifiedFlag = true
+        }
+        if (pageConfig.version !== this.version) {
+          this.upgradePageConfig()
+          this.upgradeWidgetConfig()
+        }
+      }
+      // 加载完成即存一步初始快照，首次操作后就能撤销回初始状态（此前无人调用 initHistoryData，回不去）
+      this.initHistoryData()
+      if (modifiedFlag) {
+        this.emitEvent('form-json-imported', []) // 通知其他组件
+      }
+      return modifiedFlag
+    },
+
+    setSelected (selected) {
+      if (!selected) {
+        this.clearSelected()
+        return
+      }
+
+      this.selectedWidget = selected
+      if (selected.id) {
+        this.selectedId = selected.id
+      }
+    },
+
+    // 根据组件 id 设置悬浮组件
+    setHoverById (id) {
+      if (!id) {
+        this.clearHover()
+        return
+      }
+
+      const widget = this.getWidgetItemById(id)
+      if (!widget) {
+        this.clearHover()
+        return
+      }
+
+      // 查找父组件
+      const parentWidget = this.findParentWidget(id)
+
+      this.hoverWidgetId = id
+      this.hoverWidget = widget
+      this.hoverParentWidget = parentWidget || null
+
+      // 通知外部悬浮组件发生变化
+      this.emitEvent('hover-change', {
+        widget,
+        parentWidget: this.hoverParentWidget
+      })
+    },
+
+    // 清理悬浮组件状态
+    clearHover () {
+      this.hoverWidgetId = null
+      this.hoverWidget = null
+      this.hoverParentWidget = null
+      this.emitEvent('hover-change', {
+        widget: null,
+        parentWidget: null
+      })
+    },
+
+    setDragOverTarget (target) {
+      this.dragOverTarget = target
+    },
+    setDragOverTargetElement (el) {
+      this.dragOverTargetElement = el
+    },
+    clearDragOverTarget () {
+      this.dragOverTarget = null
+      this.dragOverTargetElement = null
+    },
+
+    // 拖拽插入位置线 { top, left, width } 视口坐标，用于 fixed 定位
+    dragInsertLine: null,
+    setDragInsertLine (rect) {
+      this.dragInsertLine = rect
+    },
+    clearDragInsertLine () {
+      this.dragInsertLine = null
+    },
+
+    // 预览区域拖拽状态（用于同步到大纲树）
+    previewDragTarget: null, // { widgetId, index, position }
+    previewDragTargetThrottle: null, // 节流定时器
+    setPreviewDragTarget (target) {
+      // 防抖优化：只在目标真正改变时才更新
+      const current = this.previewDragTarget
+      const isSame = current && target &&
+        current.widgetId === target.widgetId &&
+        current.index === target.index &&
+        current.position === target.position
+
+      if (isSame) return
+
+      // 使用节流，避免频繁更新
+      if (this.previewDragTargetThrottle) {
+        clearTimeout(this.previewDragTargetThrottle)
+      }
+
+      this.previewDragTargetThrottle = setTimeout(() => {
+        this.previewDragTarget = target
+        this.previewDragTargetThrottle = null
+      }, 16) // 约 60fps
+    },
+    clearPreviewDragTarget () {
+      if (this.previewDragTargetThrottle) {
+        clearTimeout(this.previewDragTargetThrottle)
+        this.previewDragTargetThrottle = null
+      }
+      this.previewDragTarget = null
+    },
+
+    // 统一的拖拽状态管理
+    dragState: {
+      isDragging: false, // 是否正在拖拽
+      isNativeDragging: false, // 是否是原生 HTML5 拖拽
+      dragSource: null, // 拖拽来源：'library' | 'preview' | 'template' | 'tree'
+      dragData: null, // 拖拽数据
+      ghostVisible: false, // 拖拽悬浮窗是否可见
+      ghostTitle: '', // 悬浮窗标题
+      ghostIcon: '', // 悬浮窗图标
+      ghostPosition: { x: 0, y: 0 } // 悬浮窗位置
+    },
+
+    // 开始拖拽
+    startDrag (options = {}) {
+      const { source, data, title, icon, x, y, isNative = false } = options
+      this.dragState.isDragging = true
+      this.dragState.isNativeDragging = isNative
+      this.dragState.dragSource = source
+      this.dragState.dragData = data
+      this.dragState.ghostVisible = true
+      this.dragState.ghostTitle = title || ''
+      this.dragState.ghostIcon = icon || ''
+      this.dragState.ghostPosition = { x: x || 0, y: y || 0 }
+
+      // 如果是从预览区域拖拽，自动关闭左侧面板
+      if (source === 'preview' && this.vueInstance) {
+        this.emitEvent('close-left-panel')
+      }
+
+      // 触发拖拽开始事件
+      this.emitEvent('drag-state-change', { ...this.dragState })
+    },
+
+    // 更新拖拽悬浮窗位置
+    updateDragGhostPosition (x, y) {
+      if (this.dragState.isDragging) {
+        this.dragState.ghostPosition = { x, y }
+        this.emitEvent('drag-ghost-move', { x, y })
+      }
+    },
+
+    // 结束拖拽
+    endDrag () {
+      this.dragState.isDragging = false
+      this.dragState.isNativeDragging = false
+      this.dragState.dragSource = null
+      this.dragState.dragData = null
+      this.dragState.ghostVisible = false
+      this.dragState.ghostTitle = ''
+      this.dragState.ghostIcon = ''
+      this.dragState.ghostPosition = { x: 0, y: 0 }
+
+      // 清理相关状态
+      this.clearDragOverTarget()
+      this.clearDragInsertLine()
+      this.clearPreviewDragTarget()
+
+      // 触发拖拽结束事件
+      this.emitEvent('drag-state-change', { ...this.dragState })
+    },
+
+    // 获取当前拖拽状态
+    getDragState () {
+      return { ...this.dragState }
+    },
+
+    // ========== 统一的拖拽处理方法 ==========
+
+    /**
+     * 解析拖拽数据
+     * @param {DataTransfer} dataTransfer - 拖拽事件的 dataTransfer 对象
+     * @returns {Object|null} 解析后的拖拽数据 { type, payload }
+     */
+    parseDragData (dataTransfer) {
+      if (!dataTransfer || !dataTransfer.types || !dataTransfer.types.includes('text/plain')) {
+        return null
+      }
+
+      try {
+        const raw = dataTransfer.getData('text/plain')
+        if (!raw) return null
+
+        // 组件库拖拽
+        if (raw.startsWith('page-designer-widget:')) {
+          const payload = JSON.parse(raw.slice('page-designer-widget:'.length))
+          return { type: 'library', payload }
+        }
+
+        // 模板库拖拽
+        if (raw.startsWith('page-designer-template:')) {
+          const payload = JSON.parse(raw.slice('page-designer-template:'.length))
+          return { type: 'template', payload }
+        }
+
+        // 组件重排序拖拽（预览区或大纲树）
+        const data = JSON.parse(raw)
+        if (data && data.type === 'widget-reorder') {
+          return { type: 'reorder', payload: data }
+        }
+
+        return null
+      } catch (e) {
+        return null
+      }
+    },
+
+    /**
+     * 处理拖拽放置
+     * @param {Object} options - 放置选项
+     * @param {DataTransfer} options.dataTransfer - 拖拽数据
+     * @param {Object} options.target - 放置目标 { type: 'root'|'container'|'slot', widgetId, index, slotName }
+     * @returns {boolean} 是否成功处理
+     */
+    handleDrop (options = {}) {
+      const { dataTransfer, target } = options
+      if (!dataTransfer || !target) {
+        return false
+      }
+
+      const dragData = this.parseDragData(dataTransfer)
+
+      if (!dragData) {
+        return false
+      }
+
+      const { type, payload } = dragData
+
+      // 根据拖拽类型分发处理
+      switch (type) {
+        case 'library':
+          return this.handleLibraryDrop(payload, target)
+        case 'template':
+          return this.handleTemplateDrop(payload, target)
+        case 'reorder':
+          return this.handleReorderDrop(payload, target)
+        default:
+          return false
+      }
+    },
+
+    /**
+     * 处理组件库拖拽放置
+     * @param {Object} payload - 组件数据 { code, title, custom }
+     * @param {Object} target - 放置目标
+     */
+    handleLibraryDrop (payload, target) {
+      const { code, title, custom } = payload
+      if (!code) return false
+
+      const widgetInfo = this.getWidgetByType(code) || {}
+      const widget = {
+        id: this.genId(code),
+        contentType: code,
+        title: title || widgetInfo.TITLE
+      }
+      if (custom) widget.type = 'custom'
+
+      // 特殊处理：chart 组件需要设置 metaId
+      if (widgetInfo.CODE === 'chart') {
+        this.updateWidgetConfig(widget.id, { metaId: this.page.metaId })
+      }
+
+      // 插入组件
+      this.insertWidget(widget, target)
+      this.setSelected(widget)
+      this.emitHistoryChange()
+      return true
+    },
+
+    /**
+     * 处理模板库拖拽放置
+     * @param {Object} payload - 模板数据 { items, itemConfigs, templateJs }
+     * @param {Object} target - 放置目标
+     */
+    handleTemplateDrop (payload, target) {
+      const { items, itemConfigs, templateJs } = payload
+      if (!items || !items.length) return false
+
+      // 插槽只能放一个组件，多根模板拒绝放入
+      if (target.type === 'slot' && items.length > 1) {
+        this.vueInstance && this.vueInstance.$message && this.vueInstance.$message('插槽只能放置一个组件')
+        return false
+      }
+
+      // 插入模板组件
+      this.insertWidgets(items, target)
+
+      // 更新组件配置
+      this.mergeWidgetConfig(itemConfigs)
+
+      // 处理模板 JS
+      if (templateJs) {
+        this.mergeTemplateJs(templateJs)
+      }
+
+      this.setSelected(items[0])
+      this.emitHistoryChange()
+      return true
+    },
+
+    /**
+     * 处理组件重排序拖拽放置
+     * @param {Object} payload - 拖拽数据 { widgetId, parentWidgetId }
+     * @param {Object} target - 放置目标
+     */
+    handleReorderDrop (payload, target) {
+      const { widgetId, parentWidgetId } = payload
+      if (!widgetId) {
+        return false
+      }
+
+      const sourceWidget = this.getWidgetItemById(widgetId)
+      if (!sourceWidget) {
+        return false
+      }
+
+      // 标准化 ID 比较（null 和 undefined 都视为相同）
+      const sourceParentId = parentWidgetId || null
+      const targetParentId = target.widgetId || null
+
+      // 拖进插槽：不能拖自己或自己的子孙进来，否则组件树会自己套自己
+      if (target.type === 'slot') {
+        if (this.isDescendantWidget(target.widgetId, sourceWidget)) return false
+        this.removeWidgetFromParent(sourceWidget)
+        if (!this.insertWidget(sourceWidget, target)) return false
+        this.setSelected(sourceWidget)
+        this.emitHistoryChange()
+        return true
+      }
+
+      // 从插槽拖出来：先摘掉插槽再插入目标位置（即使目标就是插槽宿主本身）
+      if (this.findWidgetSlot(widgetId)) {
+        return this.moveWidgetToAnotherContainer(sourceWidget, sourceParentId, target)
+      }
+
+      // 同容器内移动
+      if (sourceParentId === targetParentId) {
+        return this.moveWidgetInSameContainer(sourceWidget, target)
+      }
+
+      // 跨容器移动
+      return this.moveWidgetToAnotherContainer(sourceWidget, sourceParentId, target)
+    },
+
+    /**
+     * 在同一容器内移动组件
+     * @param {Object} widget - 要移动的组件
+     * @param {Object} target - 目标位置
+     */
+    moveWidgetInSameContainer (widget, target) {
+      const list = target.widgetId ? this.getWidgetItemById(target.widgetId).items : this.widgetList
+      if (!list) {
+        return false
+      }
+
+      const sourceIndex = list.findIndex(w => w.id === widget.id)
+
+      if (sourceIndex === -1) {
+        return false
+      }
+
+      let targetIndex = target.index
+
+      // 关键修正：target.index 是基于过滤掉拖拽元素后的列表计算的
+      // 需要调整为完整列表中的索引
+      if (targetIndex > sourceIndex) {
+        // 如果目标位置在源位置之后，需要 +1（因为 target.index 没有计算源元素）
+        targetIndex = targetIndex + 1
+      }
+
+      // 位置没变，不需要移动
+      if (sourceIndex === targetIndex || sourceIndex + 1 === targetIndex) {
+        return false
+      }
+
+      // 移除原位置
+      list.splice(sourceIndex, 1)
+
+      // 调整目标索引（移除后列表变短了）
+      if (targetIndex > sourceIndex) {
+        targetIndex = targetIndex - 1
+      }
+
+      // 插入新位置
+      list.splice(targetIndex, 0, widget)
+
+      // 更新容器
+      if (target.widgetId) {
+        this.updateWidget(target.widgetId, { items: [...list] })
+      } else {
+        this.widgetList = [...list]
+      }
+
+      this.setSelected(widget)
+      this.emitHistoryChange()
+      return true
+    },
+
+    /**
+     * 跨容器移动组件
+     * @param {Object} widget - 要移动的组件
+     * @param {string} sourceParentId - 源容器 ID
+     * @param {Object} target - 目标位置
+     */
+    moveWidgetToAnotherContainer (widget, sourceParentId, target) {
+      const sourceSlot = this.findWidgetSlot(widget.id)
+      // 从源插槽删除
+      if (sourceSlot) {
+        this.clearWidgetSlot(sourceSlot.parent, sourceSlot.slotName)
+      } else if (sourceParentId) {
+        // 从源容器删除
+        const sourceParent = this.getWidgetItemById(sourceParentId)
+        if (sourceParent && sourceParent.items) {
+          const sourceList = [...sourceParent.items]
+          const sourceIndex = sourceList.findIndex(w => w.id === widget.id)
+          if (sourceIndex !== -1) {
+            sourceList.splice(sourceIndex, 1)
+            this.updateWidget(sourceParent.id, { items: sourceList })
+          }
+        }
+      } else {
+        // 从根级删除
+        const rootList = [...this.widgetList]
+        const sourceIndex = rootList.findIndex(w => w.id === widget.id)
+        if (sourceIndex !== -1) {
+          rootList.splice(sourceIndex, 1)
+          this.widgetList = rootList
+        }
+      }
+
+      // 插入到目标容器
+      this.insertWidget(widget, target)
+      this.setSelected(widget)
+      this.emitHistoryChange()
+      return true
+    },
+
+    /**
+     * 插入单个组件到指定位置
+     * @param {Object} widget - 要插入的组件
+     * @param {Object} target - 目标位置 { type: 'root'|'container'|'slot', widgetId, index, slotName }
+     */
+    insertWidget (widget, target) {
+      // 放进插槽：一个插槽只放一个组件，已有组件时直接替换
+      if (target.type === 'slot') {
+        return this.setWidgetSlot(target.widgetId, target.slotName, widget)
+      }
+      if (target.type === 'root' || !target.widgetId) {
+        // 插入到根级
+        const list = [...this.widgetList]
+        list.splice(target.index, 0, widget)
+        this.widgetList = list
+      } else {
+        // 插入到容器内
+        const container = this.getWidgetItemById(target.widgetId)
+        if (!container) return false
+
+        // 确保容器有响应式的 items 数组
+        if (!container.items) {
+          this.updateWidget(container.id, { items: [] })
+        }
+
+        const list = [...(container.items || [])]
+        list.splice(target.index, 0, widget)
+        this.updateWidget(container.id, { items: list })
+      }
+      return true
+    },
+
+    /**
+     * 插入多个组件到指定位置
+     * @param {Array} widgets - 要插入的组件数组
+     * @param {Object} target - 目标位置
+     */
+    insertWidgets (widgets, target) {
+      if (!widgets || !widgets.length) return false
+
+      if (target.type === 'slot') {
+        return this.insertWidget(widgets[0], target)
+      }
+      if (target.type === 'root' || !target.widgetId) {
+        // 插入到根级
+        const list = [...this.widgetList]
+        list.splice(target.index, 0, ...widgets)
+        this.widgetList = list
+      } else {
+        // 插入到容器内
+        const container = this.getWidgetItemById(target.widgetId)
+        if (!container) return false
+
+        // 确保容器有响应式的 items 数组
+        if (!container.items) {
+          this.updateWidget(container.id, { items: [] })
+        }
+
+        const list = [...(container.items || [])]
+        list.splice(target.index, 0, ...widgets)
+        this.updateWidget(container.id, { items: list })
+      }
+      return true
+    },
+
+    /**
+     * 合并模板 JS 到页面 JS
+     * @param {string} templateJs - 模板的 JS 代码
+     */
+    mergeTemplateJs (templateJs) {
+      let { JS = '' } = this.pageConfig
+      const result = JS.match(/export\sfunction\s(\w+)/g)
+      const events = []
+      if (result) {
+        result.forEach(item => {
+          events.push(item.replace(/export\sfunction\s/, ''))
+        })
+      }
+      const templateJsResult = templateJs.split(/export\s+function\s+/)
+      templateJsResult.forEach(item => {
+        const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, '')
+        if (funtionStr.replace(/[\n\s]+/g, '').length > 0) {
+          const funtionName = funtionStr.split(/\s+\(/)[0]
+          if (![...new Set(events)].includes(funtionName)) {
+            JS += 'export function ' + funtionStr.replace(/^\w+/, funtionName)
+          }
+        }
+      })
+      this.updatePageConfig({ JS })
+    },
+
+    updateSelectedWidgetNameAndLabel (selectedWidget, newName, newLabel) {
+      this.selectedWidgetName = newName
+      if (!!newLabel && (Object.keys(selectedWidget.options).indexOf('label') > -1)) {
+        selectedWidget.options.label = newLabel
+      }
+    },
+
+    clearSelected () {
+      this.selectedId = null
+      this.selectedWidgetName = null
+      this.selectedWidget = null
+    },
+
+    // 检查组件是否可以移动（只有字段组件可以拖入子表单）
+    checkWidgetMove (evt) {
+      if (evt.draggedContext?.element) {
+        const wgCategory = evt.draggedContext.element.category
+        if (evt.to?.className === 'sub-form-table' && wgCategory === 'container') {
+          return false
+        }
+      }
+      return true
+    },
+
+    // 检查字段组件是否可以移动
+    checkFieldMove (evt) {
+      if (evt.draggedContext?.element) {
+        const wgType = String(evt.draggedContext.element.type)
+        if (evt.to?.className === 'sub-form-table' && wgType === 'slot') {
+          return false
+        }
+      }
+      return true
+    },
+    // 走索引 O(1)；多个同 CODE 取最后一个（与原 forEach 覆盖语义一致），未命中返回 null
+    getWidgetByType (typeName, type) {
+      if (type === 'template') return templateIndex.get(typeName) || null
+      return widgetInfoIndex.get(typeName) || null
+    },
+    getContainerByType (typeName) {
+      let foundCon = null
+      this.allWidgets.forEach(con => {
+        if (con.CONTAINER === '1' && !!con.type && (con.type === typeName)) {
+          foundCon = con
+        }
+      })
+
+      return foundCon
+    },
+
+    getFieldWidgetByType (typeName) {
+      let foundWidget = null
+      this.allWidgets.forEach(widget => {
+        if (widget.CONTAINER !== '1' && !!widget.type && (widget.type === typeName)) {
+          foundWidget = widget
+        }
+      })
+
+      return foundWidget
+    },
+
+    hasConfig (widget, configName) {
+      let originalWidget = null
+      if (widget.CONTAINER === '1') {
+        originalWidget = this.getContainerByType(widget.type)
+      } else {
+        originalWidget = this.getFieldWidgetByType(widget.type)
+      }
+
+      if (!originalWidget || !originalWidget.options) {
+        return false
+      }
+
+      return Object.keys(originalWidget.options).indexOf(configName) > -1
+    },
+    // 走索引；未命中返回 undefined（与原递归实现一致）
+    getWidgetItemById (id) {
+      const entry = lookup(id)
+      return entry ? asReactive(entry.widget) : undefined
+    },
+
+    /**
+     * 查找组件所在的插槽位置
+     * @param { String } targetId 组件 id
+     * @returns { { parent: Object, slotName: String } | null } 不在插槽里返回 null
+     */
+    findWidgetSlot (targetId) {
+      const entry = lookup(targetId)
+      return entry && entry.slotName ? { parent: asReactive(entry.parent), slotName: entry.slotName } : null
+    },
+
+    /**
+     * 判断 targetId 是否在 widget 自身或其子孙（含插槽）里，
+     * 用于阻止把组件拖进自己的插槽造成死循环
+     */
+    isDescendantWidget (targetId, widget) {
+      if (!widget || !targetId) return false
+      if (widget.id === targetId) return true
+      return getWidgetChildren(widget).some(child => this.isDescendantWidget(targetId, child))
+    },
+
+    /**
+     * 往插槽里放组件（已有组件时替换）
+     */
+    setWidgetSlot (ownerId, slotName, widget) {
+      const owner = this.getWidgetItemById(ownerId)
+      if (!owner || !slotName) return false
+      this.updateWidget(ownerId, { slots: { ...(owner.slots || {}), [slotName]: widget } })
+      return true
+    },
+
+    /**
+     * 清空插槽（插槽全空时把 slots 一起删掉，避免配置里留空对象）
+     */
+    clearWidgetSlot (owner, slotName) {
+      if (!owner || !owner.slots) return false
+      const slots = { ...owner.slots }
+      delete slots[slotName]
+      this.updateWidget(owner.id, { slots: Object.keys(slots).length > 0 ? slots : null })
+      return true
+    },
+
+    /**
+     * 把组件从当前位置摘掉（插槽 / 容器 / 根级都支持），用于移动
+     */
+    removeWidgetFromParent (widget) {
+      const slotInfo = this.findWidgetSlot(widget.id)
+      if (slotInfo) {
+        return this.clearWidgetSlot(slotInfo.parent, slotInfo.slotName)
+      }
+      const parent = this.findParentWidget(widget.id)
+      if (parent && parent.items) {
+        const list = [...parent.items]
+        const index = list.findIndex(item => item.id === widget.id)
+        if (index === -1) return false
+        list.splice(index, 1)
+        this.updateWidget(parent.id, { items: list })
+        return true
+      }
+      const rootList = [...this.widgetList]
+      const index = rootList.findIndex(item => item.id === widget.id)
+      if (index === -1) return false
+      rootList.splice(index, 1)
+      this.widgetList = rootList
+      return true
+    },
+    updateWidget (key, property) {
+      const widget = this.getWidgetItemById(key)
+      if (widget) {
+        for (const key in property) {
+          if (property[key] === null) {
+            delete widget[key]
+          } else {
+            widget[key] = property[key]
+          }
+        }
+      }
+    },
+    updateWidgetConfig (key, configs, type) {
+      const property = {}
+      for (const configKey in configs) {
+        if (configKey.includes('componentName') || configKey === 'span' || configKey === 'flex') {
+          property[configKey.replace('componentName', 'title')] = configs[configKey]
+        }
+      }
+      this.updateWidget(key, property)
+      const entry = this.widgetConfig[key]
+      if (type === 'cover' || !entry) {
+        // 新建或整体覆盖：只换这一条 entry 的引用，其它组件的 $configs 不受影响
+        const next = { ...configs }
+        for (const k in next) {
+          if (next[k] === null) delete next[k]
+        }
+        this.widgetConfig[key] = next
+        return
+      }
+      // 原地按字段改：画布上只有这个组件的 $configs 会重算（此前整体替换 widgetConfig，全画布跟着重算）
+      for (const k in configs) {
+        if (configs[k] === null) delete entry[k]
+        else entry[k] = configs[k]
+      }
+    },
+    // 批量并入多条组件配置（模板拖入 / 复制 / 拆分模板），逐 key 新增而不整体替换 widgetConfig
+    mergeWidgetConfig (configs) {
+      for (const key in configs) {
+        if (configs[key] !== undefined) this.widgetConfig[key] = configs[key]
+      }
+    },
+    updatePageConfig (configs) {
+      this.pageConfig = { ...this.pageConfig, ...configs }
+    },
+    upgradeWidgetConfig () {
+      // 判断组件是否存在重复id，存在则重新生成，不存在则查找对应层级的配置，如果有则更新配置
+      const ids = []
+      const upgradeWidget = (arr, parentId) => {
+        arr.forEach(item => {
+          const oldId = item.id
+          if (parentId) {
+            while (ids.includes(item.id)) {
+              const code = item.contentType.replace(/-/g, '_')
+              item.id = code + '_' + util.genId()
+            }
+            ids.push(item.id)
+            item.i = item.id
+            if (!item.css && !isEmpty(item.style)) {
+              let cssStr = ':current {'
+              for (const key in item.style) {
+                const kebabCase = key.replace(/([A-Z])/g, $1 => {
+                  return '-' + $1.toLocaleLowerCase()
+                })
+                // eslint-disable-next-line no-useless-escape
+                cssStr += `\r\n  ${kebabCase}: ${item.style[key]};`
+              }
+              cssStr += '\r\n}'
+              // 更新css
+              item.css = cssStr
+              delete item.style
+            }
+            // 仅当旧版 key（parentId-id）确实存在配置时才迁移，否则会把新版 key 下的已有配置覆盖成空对象
+            const oldKey = parentId + '-' + oldId
+            const oldWidgetConifg = this.widgetConfig[oldKey]
+            if (oldWidgetConifg) {
+              delete this.widgetConfig[oldKey]
+              this.widgetConfig[item.id] = { ...this.widgetConfig[item.id], ...oldWidgetConifg }
+            } else if (item.id !== oldId && this.widgetConfig[oldId]) {
+              // id 因重复被重新生成时，把原 id 上的配置复制到新 id（原 id 仍被首个组件使用，不能删除）
+              this.widgetConfig[item.id] = { ...this.widgetConfig[oldId] }
+            }
+          }
+          const children = getWidgetChildren(item)
+          if (children.length > 0) {
+            upgradeWidget(children, parentId ? parentId + '-' + oldId : oldId)
+          }
+        })
+      }
+      upgradeWidget(this.widgetList)
+    },
+
+    upgradePageConfig () {
+      const { css, style } = this.pageConfig
+      if (!css && !isEmpty(style)) {
+        let cssStr = ':current {'
+        for (const key in style) {
+          const kebabCase = key.replace(/([A-Z])/g, $1 => {
+            return '-' + $1.toLocaleLowerCase()
+          })
+          // eslint-disable-next-line no-useless-escape
+          cssStr += `\r\n  ${kebabCase}: ${style[key]};`
+        }
+        cssStr += '\r\n}'
+        // 更新css
+        delete this.pageConfig.style
+        this.pageConfig = { ...this.pageConfig, css: cssStr }
+      }
+    },
+
+    moveUpWidget (parentList, indexOfParentList) {
+      if (parentList) {
+        if (indexOfParentList === 0) {
+          this.vueInstance.$message(this.vueInstance.i18nt('designer.hint.moveUpFirstChildHint'))
+          return
+        }
+
+        const tempWidget = parentList[indexOfParentList]
+        parentList.splice(indexOfParentList, 1)
+        parentList.splice(indexOfParentList - 1, 0, tempWidget)
+      }
+    },
+
+    moveDownWidget (parentList, indexOfParentList) {
+      if (parentList) {
+        if (indexOfParentList === parentList.length - 1) {
+          this.vueInstance.$message(this.vueInstance.i18nt('designer.hint.moveDownLastChildHint'))
+          return
+        }
+
+        const tempWidget = parentList[indexOfParentList]
+        parentList.splice(indexOfParentList, 1)
+        parentList.splice(indexOfParentList + 1, 0, tempWidget)
+      }
+    },
+
+    copyNewFieldWidget (origin) {
+      const newWidget = cloneDeep(origin)
+      const tempId = genId()
+      newWidget.id = newWidget.type.replace(/-/g, '') + tempId
+      // console.log('test id===', newWidget.id)
+      newWidget.options.name = newWidget.id
+      newWidget.options.label = newWidget.options.label || newWidget.type.toLowerCase()
+
+      delete newWidget.displayName
+      return newWidget
+    },
+
+    copyNewContainerWidget (origin) {
+      const newCon = genId(origin)
+      newCon.id = newCon.type.replace(/-/g, '') + genId()
+      newCon.options.name = newCon.id
+
+      const newTabPane = cloneDeep(this.getContainerByType('tab-pane'))
+      newTabPane.id = 'tab-pane-' + genId()
+      newTabPane.options.name = 'tab1'
+      newTabPane.options.label = 'tab 1'
+      newCon.tabs.push(newTabPane)
+
+      delete newCon.displayName
+      return newCon
+    },
+    addWidgetByInfo (widgetInfo, parentWidget) {
+      const widget = {
+        id: widgetInfo.CODE + '_' + genId(),
+        contentType: widgetInfo.CODE,
+        title: widgetInfo.TITLE
+      }
+      if (widgetInfo.COMPONENT_SOURCE === 'custom') {
+        widget.type = 'custom'
+      }
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [widget]
+        } else {
+          parentWidget.items.push(widget)
+        }
+      } else {
+        this.widgetList.push(widget)
+      }
+      if (widgetInfo.CODE === 'chart') {
+        this.updateWidgetConfig(widget.id, { metaId: this.page.metaId })
+      }
+      this.setSelected(widget)
+    },
+    addWidgets (widgets, parentWidget, option = {}) {
+      const { defaultSelected = true } = option
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [...widgets]
+        } else {
+          parentWidget.items.push(...widgets)
+        }
+      } else {
+        this.widgetList.push(...widgets)
+      }
+      if (defaultSelected) this.setSelected(widgets[widgets.length - 1])
+    },
+    addWidget (widget, parentWidget, option = {}) {
+      const { defaultSelected = true } = option
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [widget]
+        } else {
+          parentWidget.items.push(widget)
+        }
+      } else {
+        this.widgetList.push(widget)
+      }
+      if (defaultSelected) this.setSelected(widget)
+    },
+    // 查找父组件（公共方法）：插槽里的组件返回插槽宿主；根级返回 null；不存在返回 undefined
+    findParentWidget (targetId) {
+      const entry = lookup(targetId)
+      return entry ? asReactive(entry.parent) : undefined
+    },
+
+    copyWidget (widget, parentWidget) {
+      // 插槽是「一个插槽一个组件」，复制没有落点，直接提示
+      if (this.findWidgetSlot(widget.id)) {
+        this.vueInstance && this.vueInstance.$message && this.vueInstance.$message('插槽内的组件不支持复制')
+        return
+      }
+      const newWidget = cloneDeep(widget)
+      newWidget.id = widget.contentType + '_' + genId()
+      // 配置要深拷贝：配置改为原地更新后，共享同一个对象会让复制件和原件互相串改
+      const newConfigs = {
+        [newWidget.id]: cloneDeep(this.widgetConfig[widget.id])
+      }
+      // 子组件（含插槽里的组件）都要换新 id，否则复制出来的组件和原组件共用配置
+      const formatWidget = (arr) => {
+        for (const item of arr) {
+          const newId = item.contentType + '_' + genId()
+          newConfigs[newId] = cloneDeep(this.widgetConfig[item.id])
+          item.id = newId
+          formatWidget(getWidgetChildren(item))
+        }
+      }
+      formatWidget(getWidgetChildren(newWidget))
+      // 添加组件配置
+      if (parentWidget) {
+        if (!parentWidget.items) {
+          parentWidget.items = [newWidget]
+        } else {
+          parentWidget.items.push(newWidget)
+        }
+      } else {
+        this.widgetList.push(newWidget)
+      }
+      this.mergeWidgetConfig(newConfigs)
+      this.setSelected(newWidget)
+    },
+    deleteWidget (widget, parentWidget) {
+      delete this.widgetConfig[widget.id]
+      // 插槽里的组件：从 slots 上摘掉
+      const slotInfo = this.findWidgetSlot(widget.id)
+      if (slotInfo) {
+        this.clearWidgetSlot(slotInfo.parent, slotInfo.slotName)
+        if (this.selectedId === widget.id) this.clearSelected()
+        return 0
+      }
+      if (parentWidget && parentWidget.items) {
+        const index = parentWidget.items.findIndex(item => item.id === widget.id)
+        if (index !== -1) {
+          parentWidget.items.splice(index, 1)
+          return index
+        }
+      } else {
+        const index = this.widgetList.findIndex(item => item.id === widget.id)
+        if (index !== -1) {
+          this.widgetList.splice(index, 1)
+          return index
+        }
+      }
+    },
+    addContainerByDbClick (container) {
+      const newCon = this.copyNewContainerWidget(container)
+      this.widgetList.push(newCon)
+      this.setSelected(newCon)
+    },
+
+    addFieldByDbClick (widget) {
+      const newWidget = this.copyNewFieldWidget(widget)
+      if (!!this.selectedWidget && this.selectedWidget.type === 'tab') {
+        // 获取当前激活的tabPane
+        let activeTab = this.selectedWidget.tabs[0]
+        this.selectedWidget.tabs.forEach(tabPane => {
+          if (tabPane.options.active) {
+            activeTab = tabPane
+          }
+        })
+
+        !!activeTab && activeTab.widgetList.push(newWidget)
+      } else if (!!this.selectedWidget && !!this.selectedWidget.widgetList) {
+        this.selectedWidget.widgetList.push(newWidget)
+      } else {
+        this.widgetList.push(newWidget)
+      }
+
+      this.setSelected(newWidget)
+      this.emitHistoryChange()
+    },
+
+    addTabPaneOfTabs (tabsWidget) {
+      const tabPanes = tabsWidget.tabs
+      const newTabPane = cloneDeep(this.getContainerByType('tab-pane'))
+      newTabPane.id = 'tab-pane-' + genId()
+      newTabPane.options.name = newTabPane.id
+      newTabPane.options.label = 'tab ' + (tabPanes.length + 1)
+      tabPanes.push(newTabPane)
+    },
+
+    deleteTabPaneOfTabs (tabsWidget, tpIdx) {
+      tabsWidget.tabs.splice(tpIdx, 1)
+    },
+
+    emitEvent (evtName, evtData) { // 用于兄弟组件发射事件
+      const handlers = designerEvents.get(evtName)
+      if (handlers) handlers.slice().forEach(handler => handler(evtData))
+    },
+
+    handleEvent (evtName, callback) { // 用于兄弟组件接收事件
+      const handlers = designerEvents.get(evtName)
+      if (handlers) handlers.push(callback)
+      else designerEvents.set(evtName, [callback])
+    },
+
+    offEvent (evtName, callback) { // 解除接收
+      const handlers = designerEvents.get(evtName)
+      if (!handlers) return
+      if (!callback) { designerEvents.delete(evtName); return }
+      const index = handlers.indexOf(callback)
+      if (index > -1) handlers.splice(index, 1)
+    },
+
+    // 快照存三段 JSON 字符串：无响应式、内存紧凑（此前每步 cloneDeep 三份全量数据且全部深度代理）；
+    // toRaw 脱掉顶层代理，减少序列化时的 Proxy 开销
+    takeSnapshot () {
+      return {
+        widgetList: JSON.stringify(toRaw(this.widgetList)),
+        widgetConfig: JSON.stringify(toRaw(this.widgetConfig)),
+        pageConfig: JSON.stringify(toRaw(this.pageConfig))
+      }
+    },
+    applySnapshot (snapshot) {
+      this.widgetList = JSON.parse(snapshot.widgetList)
+      this.widgetConfig = JSON.parse(snapshot.widgetConfig)
+      this.pageConfig = JSON.parse(snapshot.pageConfig)
+    },
+    // 加载页面后重置为单步历史，首次操作即可撤销回初始状态
+    initHistoryData () {
+      this.historyData.index = 0
+      this.historyData.steps = [this.takeSnapshot()]
+    },
+
+    emitHistoryChange () {
+      if (this.historyData.index === this.historyData.maxStep - 1) {
+        this.historyData.steps.shift()
+      } else {
+        this.historyData.index++
+      }
+      this.historyData.steps[this.historyData.index] = this.takeSnapshot()
+      this.savePageContentToStorage()
+      if (this.historyData.index < this.historyData.steps.length - 1) {
+        this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1)
+      }
+    },
+
+    saveCurrentHistoryStep () {
+      this.historyData.steps[this.historyData.index] = this.takeSnapshot()
+      this.savePageContentToStorage()
+    },
+
+    undoHistoryStep () {
+      if (this.historyData.index !== 0) {
+        this.historyData.index--
+      }
+      this.applySnapshot(this.historyData.steps[this.historyData.index])
+    },
+
+    redoHistoryStep () {
+      if (this.historyData.index !== (this.historyData.steps.length - 1)) {
+        this.historyData.index++
+      }
+      this.applySnapshot(this.historyData.steps[this.historyData.index])
+    },
+
+    undoEnabled () {
+      return (this.historyData.index > 0) && (this.historyData.steps.length > 0)
+    },
+
+    redoEnabled () {
+      return this.historyData.index < (this.historyData.steps.length - 1)
+    },
+
+    // 300ms 防抖：连续操作只写一次 localStorage；直接复用快照字符串，不再重复 stringify
+    savePageContentToStorage () {
+      if (saveTimer) clearTimeout(saveTimer)
+      saveTimer = setTimeout(() => {
+        saveTimer = null
+        const snapshot = this.historyData.steps[this.historyData.index] || this.takeSnapshot()
+        storage.set('widget__list__backup', snapshot.widgetList)
+        storage.set('widget__config__backup', snapshot.widgetConfig)
+        storage.set('page__config__backup', snapshot.pageConfig)
+      }, 300)
+    },
+
+    loadPageContentFromStorage () {
+      const widgetListBackup = storage.get('widget__list__backup')
+      if (widgetListBackup) {
+        this.widgetList = JSON.parse(widgetListBackup)
+      }
+      const widgetConfigBackup = storage.get('widget__config__backup')
+      if (widgetConfigBackup) {
+        Object.assign(this.widgetConfig, JSON.parse(widgetConfigBackup)) /* 用=赋值，会导致inject依赖注入的formConfig属性变成非响应式 */
+      }
+      const pageConfigBackup = storage.get('page__config__backup')
+      if (pageConfigBackup) {
+        Object.assign(this.pageConfig, JSON.parse(pageConfigBackup)) /* 用=赋值，会导致inject依赖注入的formConfig属性变成非响应式 */
+      }
+    },
+
+    isExistId (id) {
+      return lookup(id) !== undefined
+    },
+
+    // 停掉索引 watch 与待写入的 storage 定时器；PageDesigner.beforeUnmount 调用
+    dispose () {
+      scope.stop()
+      if (saveTimer) {
+        clearTimeout(saveTimer)
+        saveTimer = null
+      }
+    },
+
+    genId (widgetCode) {
+      const code = widgetCode.replace(/-/g, '_')
+      let id = code + '_' + util.genId()
+      while (this.isExistId(id)) {
+        id = code + '_' + util.genId()
+      }
+      return id
+    }
+  })
+  scope.run(() => {
+    watch(() => state.widgetList, () => { indexDirty = true }, { deep: true, flush: 'sync' })
+  })
+  return state
+}