@epxing/designer 5.3.0-beta.2 → 5.3.0-beta.3

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

@@ -1,258 +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
-  }
-}
+// 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
+  }
+}