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

package/src/page-designer/widget-preview/directive.js

@@ -0,0 +1,258 @@
+// import util from '@epxing/core/src/runtime-utils/util'
+
+// function appendCss (id, css) {
+//   const formatCss = css.replace(/:current/g, '.css_' + id).replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+//     return `url(${util.getFileUrl($1)})`
+//   })
+//   const element = document.getElementById('style_' + id)
+//   if (element) {
+//     element.textContent = formatCss
+//   } else {
+//     const style = document.createElement('style')
+//     style.id = 'style_' + id
+//     style.textContent = formatCss
+//     style.setAttribute('type', 'text/css')
+//     document.head.appendChild(style)
+//   }
+// }
+
+// function removeCss (id) {
+//   const element = document.getElementById('style_' + id)
+//   if (element) document.head.removeChild(element)
+// }
+
+// 卸掉 el 上一次 apply 绑的全部监听（beforeMount 与 mounted 会各 apply 一次，不先卸就会双份触发）
+function detach (el) {
+  const targetEl = el._widgetTargetEl || el
+  const pairs = [['mouseenter', '_widgetMouseEnter'], ['mouseleave', '_widgetMouseLeave'], ['click', '_widgetClick'], ['dragstart', '_widgetDragStart'], ['dragend', '_widgetDragEnd']]
+  for (const [type, key] of pairs) {
+    if (el[key]) {
+      targetEl.removeEventListener(type, el[key])
+      delete el[key]
+    }
+  }
+  delete el._widgetTargetEl
+}
+
+// 全局指令：在组件上添加设计器相关属性和事件
+export default {
+  beforeMount (el, binding) {
+    const { widget, designer, parentWidget, templateInfo } = binding.value || {}
+    if (!widget || !designer) return
+
+    // 等待组件挂载后再操作（Vue 组件可能需要等待）
+    const applyDirective = () => {
+      detach(el)
+      // Vue3 里指令挂在组件上时 el 就是组件根元素（等价于 Vue2 的 el.__vue__.$el），直接用。
+      // 迁移前遗留的「el.__vue__ 不存在就取唯一子元素」启发式在 Vue3 下恒命中，会把 data-widget-id
+      // 与点击 / 悬停 / 拖拽监听挂到内部子元素上（表单项挂在头部 <p>、占位组件挂在 <span>），
+      // 导致点组件身体选不中、选中浮层只框住头部。
+      if (el.nodeType !== 1) return
+      const targetEl = el
+
+      // 添加 data-widget-id 属性
+      targetEl.setAttribute('data-widget-id', widget.id)
+
+      // 使组件可拖拽（但不改变鼠标样式）
+      targetEl.setAttribute('draggable', 'true')
+
+      // 获取组件名称并添加到 data 属性
+      const widgetInfo = designer.getWidgetByType(widget.contentType, widget.type) || {}
+      const widgetTitle = widgetInfo.TITLE || widgetInfo.NAME || widget.title || ''
+      if (widgetTitle) {
+        targetEl.setAttribute('data-widget-title', widgetTitle)
+      }
+
+      // 添加 css_ 类名
+      // if (targetEl.classList) {
+      //   targetEl.classList.add('css_' + widget.id)
+      // } else {
+      //   targetEl.className += ' css_' + widget.id
+      // }
+
+      // 如果不是容器组件，添加布局类（el-col）
+      if (!parentWidget) {
+        if (targetEl.classList) {
+          targetEl.classList.add('el-col')
+          targetEl.classList.add(`el-col-${widget.span || 24}`)
+        } else {
+          targetEl.className += ` el-col el-col-${widget.span || 24}`
+        }
+      }
+
+      // 应用组件的 CSS 样式
+      // if (widget.css) {
+      //   appendCss(widget.id, widget.css)
+      // }
+
+      // 添加事件监听器
+      const handleMouseEnter = (event) => {
+        if (!templateInfo) {
+          // 阻止事件冒泡，防止触发外层组件的悬停
+          event.stopPropagation()
+          // 通过 designer 统一管理悬浮组件状态
+          if (typeof designer.setHoverById === 'function') {
+            designer.setHoverById(widget.id)
+          } else if (designer.emitEvent) {
+            // 兼容旧逻辑
+            designer.emitEvent('widget-hover', widget.id)
+          }
+        }
+      }
+
+      const handleMouseLeave = (event) => {
+        if (!templateInfo) {
+          const relatedTarget = event.relatedTarget
+
+          // 1. 鼠标仍在当前组件内部（含子元素），不处理
+          if (relatedTarget && targetEl.contains(relatedTarget)) {
+            return
+          }
+
+          event.stopPropagation()
+
+          // 2. 鼠标移动到了另一个挂了 data-widget-id 的组件上，直接把 hover 切换到该组件
+          if (relatedTarget && relatedTarget.closest) {
+            const nextWidgetEl = relatedTarget.closest('[data-widget-id]')
+            if (nextWidgetEl) {
+              const nextId = nextWidgetEl.getAttribute('data-widget-id')
+              if (nextId && typeof designer.setHoverById === 'function') {
+                designer.setHoverById(nextId)
+                return
+              } else if (nextId && designer.emitEvent) {
+                // 兼容旧逻辑
+                designer.emitEvent('widget-hover', nextId)
+                return
+              }
+            }
+          }
+
+          // 3. 否则认为鼠标离开了所有组件区域，清理悬浮状态
+          if (typeof designer.clearHover === 'function') {
+            designer.clearHover()
+          } else if (designer.emitEvent) {
+            designer.emitEvent('widget-hover', null)
+          }
+        }
+      }
+
+      const handleClick = (event) => {
+        if (!templateInfo) {
+          const widgetInfo = designer.getWidgetByType(widget.contentType, widget.type) || {}
+          if (widgetInfo.ID) {
+            designer.setSelected(widget)
+            event.stopPropagation()
+            // 触发全局事件
+            if (designer.emitEvent) {
+              designer.emitEvent('widget-click', {
+                widget: widget,
+                element: targetEl,
+                parentWidget: parentWidget
+              })
+            }
+          }
+        }
+      }
+
+      // 组件拖拽开始
+      const handleDragStart = (event) => {
+        event.stopPropagation()
+
+        // 设置拖拽数据
+        const dragData = {
+          type: 'widget-reorder',
+          widgetId: widget.id,
+          parentWidgetId: parentWidget?.id || null
+        }
+        const dragDataStr = JSON.stringify(dragData)
+
+        event.dataTransfer.setData('text/plain', dragDataStr)
+        event.dataTransfer.effectAllowed = 'move'
+
+        // 设置自定义拖拽图像（空元素），避免浏览器默认拖拽行为干扰
+        const emptyEl = document.createElement('div')
+        emptyEl.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none'
+        document.body.appendChild(emptyEl)
+        event.dataTransfer.setDragImage(emptyEl, 0, 0)
+        setTimeout(() => { if (emptyEl.parentNode) emptyEl.parentNode.removeChild(emptyEl) }, 0)
+
+        // 添加拖拽样式和标记类
+        targetEl.style.opacity = '0.5'
+        targetEl.classList.add('epx-widget-dragging')
+
+        // 注意：不要设置 pointer-events: none，否则会阻止 drop 事件
+        // 使用 CSS 类来控制样式即可
+
+        // 通知 designer 开始拖拽（使用统一的拖拽状态管理）
+        if (designer.startDrag) {
+          designer.startDrag({
+            source: 'preview',
+            data: dragData,
+            title: widgetInfo.TITLE || widget.title,
+            icon: widgetInfo.ICON,
+            x: event.clientX,
+            y: event.clientY,
+            isNative: true
+          })
+        }
+      }
+
+      // 组件拖拽结束
+      const handleDragEnd = (event) => {
+        event.stopPropagation()
+
+        // 恢复样式
+        targetEl.style.opacity = '1'
+        targetEl.classList.remove('epx-widget-dragging')
+
+        // 预览区域组件拖拽结束，需要关闭悬浮窗
+        // 与组件库不同，预览区域的组件不会在拖拽开始时关闭/销毁，
+        // 所以可以安全地发送 'drag-end' 事件来关闭悬浮窗
+        if (designer.emitEvent) {
+          designer.emitEvent('drag-end')
+        }
+      }
+
+      // 保存事件处理函数和元素引用，以便后续移除
+      el._widgetTargetEl = targetEl
+      el._widgetMouseEnter = handleMouseEnter
+      el._widgetMouseLeave = handleMouseLeave
+      el._widgetClick = handleClick
+      el._widgetDragStart = handleDragStart
+      el._widgetDragEnd = handleDragEnd
+
+      targetEl.addEventListener('mouseenter', handleMouseEnter)
+      targetEl.addEventListener('mouseleave', handleMouseLeave)
+      targetEl.addEventListener('click', handleClick)
+      targetEl.addEventListener('dragstart', handleDragStart)
+      targetEl.addEventListener('dragend', handleDragEnd)
+    }
+
+    // 立即执行，如果组件还没挂载，在 inserted 钩子中再执行一次
+    applyDirective()
+    el._applyDirective = applyDirective
+  },
+  mounted (el, binding) {
+    // 组件插入后再次应用，确保找到正确的根元素；
+    // 组件在同一 tick 内挂载又卸载时 unmounted 已删掉该引用，回调里要再判一次
+    if (el._applyDirective) {
+      setTimeout(() => {
+        if (typeof el._applyDirective === 'function') el._applyDirective()
+      }, 0)
+    }
+  },
+  updated (el, binding) {
+    // console.log('update', binding.value)
+    // const { widget } = binding.value || {}
+    // if (!widget) return
+
+    // // 更新 CSS 样式
+    // if (widget.css) {
+    //   appendCss(widget.id, widget.css)
+    // }
+  },
+  unmounted (el) {
+    detach(el)
+    delete el._applyDirective
+  }
+}

package/src/page-designer/widget-preview/dropPosition.js

@@ -0,0 +1,51 @@
+// 拖拽插入位置计算。children 的 rect 在一次拖拽悬停期间只测量一次（dragenter 时），dragover 高频复用；
+// 画布滚动时用 scrollTop 差值修正，dragleave / drop 时清缓存。此前每次 dragover 都遍历三遍 children 并强制布局。
+const SKIP_CLASSES = ['epx-page-designer-widget-preview__no-widget', 'epx-widget-dragging']
+
+export function createDropCache () {
+  return { listEl: null, scrollTop: 0, listRect: null, rects: [] }
+}
+
+export function clearDropCache (cache) {
+  cache.listEl = null
+  cache.rects = []
+  cache.listRect = null
+}
+
+function scrollerOf (listEl) {
+  return listEl.closest('.epx-page-designer-widget-preview') || document.scrollingElement || document.documentElement
+}
+
+function measure (cache, listEl) {
+  const scrollTop = scrollerOf(listEl).scrollTop || 0
+  if (cache.listEl !== listEl) {
+    const children = [...listEl.children].filter(el => !SKIP_CLASSES.some(cls => el.classList.contains(cls)))
+    cache.listEl = listEl
+    cache.scrollTop = scrollTop
+    cache.listRect = listEl.getBoundingClientRect()
+    cache.rects = children.map(el => el.getBoundingClientRect())
+  }
+  return { listRect: cache.listRect, rects: cache.rects, delta: cache.scrollTop - scrollTop }
+}
+
+export function insertIndex (cache, listEl, clientY) {
+  if (!listEl || !listEl.children || !listEl.children.length) return 0
+  const { rects, delta } = measure(cache, listEl)
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i]
+    if (rect.top + delta + rect.height / 2 > clientY) return i
+  }
+  return rects.length
+}
+
+export function insertLineRect (cache, listEl, clientY) {
+  if (!listEl) return null
+  const { listRect, rects, delta } = measure(cache, listEl)
+  const index = insertIndex(cache, listEl, clientY)
+  let top
+  if (rects.length === 0) top = listRect.top + delta + listRect.height / 2
+  else if (index === 0) top = rects[0].top + delta
+  else if (index >= rects.length) top = rects[rects.length - 1].bottom + delta
+  else top = rects[index - 1].bottom + delta
+  return { top, left: listRect.left, width: listRect.width }
+}

package/src/page-designer/widget-preview/index.js

@@ -0,0 +1,23 @@
+import WidgetPreview from './Preview.vue'
+import WidgetPreviewItem from './PreviewItem.vue'
+import WidgetPreviewContainer from './Container.vue'
+import WidgetPreviewPlaceholder from './Placeholder.vue'
+import WidgetPreviewMixin from './Mixin'
+import WidgetPreviewTemplate from './Template'
+import WidgetWrapper from './WidgetWrapper.vue'
+import HoverOverlay from './HoverOverlay.vue'
+import SelectedOverlay from './SelectedOverlay.vue'
+import DropZoneOverlay from './DropZoneOverlay.vue'
+
+export {
+  WidgetPreview,
+  WidgetPreviewItem,
+  WidgetPreviewContainer,
+  WidgetPreviewPlaceholder,
+  WidgetPreviewMixin,
+  WidgetPreviewTemplate,
+  WidgetWrapper,
+  HoverOverlay,
+  SelectedOverlay,
+  DropZoneOverlay
+}

package/src/page-designer/widget-preview/overlayPositionMixin.js

@@ -0,0 +1,88 @@
+// 选中 / 悬停 / 放置区三个浮层共用的定位逻辑：事件驱动，不用 rAF 轮询。
+// 此前三个浮层各跑一个 requestAnimationFrame 死循环，每帧 getBoundingClientRect（强制布局）
+// 并赋新 style 对象触发 patch，什么都不做也在烧 CPU，页面越大越卡。
+// 触发源：visible / targetElement 变化、window 滚动与缩放、目标与画布内层的尺寸变化（ResizeObserver）、
+// 画布子树的结构与 style/class 变化（MutationObserver）；多次触发合并到一帧，rect 没变不写 style。
+export default {
+  data () {
+    return {
+      overlayStyle: {}
+    }
+  },
+  watch: {
+    visible (v) {
+      if (v) this.attachOverlayWatchers()
+      else this.detachOverlayWatchers()
+    },
+    targetElement () {
+      this.attachOverlayWatchers()
+    }
+  },
+  mounted () {
+    window.addEventListener('scroll', this.scheduleOverlayUpdate, true)
+    window.addEventListener('resize', this.scheduleOverlayUpdate)
+    if (this.visible) this.attachOverlayWatchers()
+  },
+  beforeUnmount () {
+    window.removeEventListener('scroll', this.scheduleOverlayUpdate, true)
+    window.removeEventListener('resize', this.scheduleOverlayUpdate)
+    this.detachOverlayWatchers()
+  },
+  methods: {
+    attachOverlayWatchers () {
+      this.detachOverlayWatchers()
+      if (!this.visible || !this.targetElement) return
+      if (typeof ResizeObserver !== 'undefined') {
+        this._overlayResize = new ResizeObserver(() => this.scheduleOverlayUpdate())
+        this._overlayResize.observe(this.targetElement)
+        const inner = document.querySelector('.epx-page-designer-widget-preview__draggable')
+        if (inner) this._overlayResize.observe(inner)
+      }
+      const canvas = document.querySelector('.epx-page-designer-widget-preview')
+      if (canvas && typeof MutationObserver !== 'undefined') {
+        this._overlayMutation = new MutationObserver(() => this.scheduleOverlayUpdate())
+        this._overlayMutation.observe(canvas, { subtree: true, childList: true, attributes: true, attributeFilter: ['style', 'class'] })
+      }
+      this._overlayRect = null
+      this.scheduleOverlayUpdate()
+    },
+    detachOverlayWatchers () {
+      if (this._overlayResize) {
+        this._overlayResize.disconnect()
+        this._overlayResize = null
+      }
+      if (this._overlayMutation) {
+        this._overlayMutation.disconnect()
+        this._overlayMutation = null
+      }
+      if (this._overlayFrame) {
+        cancelAnimationFrame(this._overlayFrame)
+        this._overlayFrame = null
+      }
+    },
+    scheduleOverlayUpdate () {
+      if (this._overlayFrame) return
+      this._overlayFrame = requestAnimationFrame(() => {
+        this._overlayFrame = null
+        this.updatePosition()
+      })
+    },
+    updatePosition () {
+      if (!this.visible || !this.targetElement || !this.targetElement.isConnected) return
+      const rect = this.targetElement.getBoundingClientRect()
+      const last = this._overlayRect
+      if (last && last.top === rect.top && last.left === rect.left && last.width === rect.width && last.height === rect.height) return
+      this._overlayRect = { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
+      if ('isCovered' in this.$data) this.isCovered = rect.top < 14
+      this.overlayStyle = {
+        position: 'fixed',
+        top: rect.top + 'px',
+        left: rect.left + 'px',
+        width: rect.width + 'px',
+        height: rect.height + 'px',
+        pointerEvents: 'none',
+        zIndex: this.overlayZIndex || 100
+      }
+    }
+  }
+}

package/src/page-designer/widget-preview/resolvePreviewName.js

@@ -0,0 +1,33 @@
+// 画布组件 → 预览组件名。此前 Preview / Container / Template / PreviewItem / WidgetWrapper 各写一份
+// 「返回函数的 computed」，每个子项每次渲染都查一遍组件库 + 组件注册表；这里统一并缓存命中的结果。
+// 只缓存命中的：未注册的组件可能稍后由 $loadComponent 异步注册，miss 不能记死。
+import { resolveComponent } from '@epxing/core/src/app'
+
+const cache = new Map()
+
+export function resolvePreviewName (designer, widget) {
+  const { contentType, type } = widget
+  const cacheKey = contentType + '|' + (type || '')
+  const hit = cache.get(cacheKey)
+  if (hit) return hit
+  const widgetInfo = designer.getWidgetByType(contentType, type) || {}
+  let previewCompName = contentType + '--preview'
+  let hasPreview = resolveComponent('epx-' + previewCompName)
+  if (!hasPreview && widgetInfo.UP_PAGE) {
+    const parent = designer.allWidgets.find(item => item.ID === widgetInfo.UP_PAGE)
+    if (parent) {
+      previewCompName = parent.CODE + '--preview'
+      hasPreview = resolveComponent('epx-' + previewCompName)
+    }
+  }
+  if (hasPreview) {
+    const name = 'epx-' + previewCompName
+    cache.set(cacheKey, name)
+    return name
+  }
+  return widgetInfo.CONTAINER === '1' ? 'epx-page-designer-widget-preview-container' : 'epx-page-designer-widget-preview-placeholder'
+}
+
+export function clearPreviewNameCache () {
+  cache.clear()
+}