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

package/src/page-designer/widget-preview/DragGhost.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    v-if="visible"
+    ref="dragGhost"
+    class="epx-page-designer-drag-ghost"
+    :style="ghostStyle"
+  >
+    <div class="epx-page-designer-drag-ghost__content">
+      <i :class="widgetIcon || 'epx-icon-component'"></i>
+      <span>{{ widgetTitle }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-page-designer-drag-ghost',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    widgetTitle: {
+      type: String,
+      default: ''
+    },
+    widgetIcon: {
+      type: String,
+      default: ''
+    },
+    position: {
+      type: Object,
+      default: () => ({ x: 0, y: 0 })
+    }
+  },
+  computed: {
+    ghostStyle () {
+      return {
+        left: this.position.x + 'px',
+        top: this.position.y + 'px',
+        transform: 'translate(-50%, -50%)'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include b(page-designer-drag-ghost) {
+  position: fixed;
+  z-index: 100001;
+  pointer-events: none;
+  padding: 4px 10px;
+  background: var(--epx-bg-card);
+  border: 1px solid #e3e3e3;
+  border-radius: var(--epx-radius-base);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--epx-font-size-base);
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    > i {
+      font-size: var(--epx-font-size-l);
+      flex-shrink: 0;
+    }
+
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

package/src/page-designer/widget-preview/DropZoneOverlay.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-if="visible && targetElement"
+    ref="overlay"
+    class="epx-page-designer-drop-zone-overlay"
+    :style="overlayStyle"
+  >
+  </div>
+</template>
+
+<script>
+import overlayPositionMixin from './overlayPositionMixin'
+
+export default {
+  name: 'epx-page-designer-drop-zone-overlay',
+  // 定位改为事件驱动（见 overlayPositionMixin），不再每帧 rAF 轮询
+  mixins: [overlayPositionMixin],
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    },
+    targetElement: {
+      type: HTMLElement,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 放置区浮层压在选中 / 悬停浮层之下
+      overlayZIndex: 99
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include b(page-designer-drop-zone-overlay) {
+  position: fixed;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 2px dashed;
+  @include border_color_primary;
+  @include bg_color_primary(0.08);
+  border-radius: var(--epx-radius-base);
+}
+</style>

package/src/page-designer/widget-preview/HoverOverlay.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="visible && targetElement && widget"
+    ref="overlay"
+    class="epx-page-designer-hover-overlay"
+    :style="overlayStyle"
+    @click.stop
+  >
+    <div class="epx-page-designer-hover-overlay__label">
+      {{ widgetInfo.TITLE || widgetInfo.NAME }}
+    </div>
+  </div>
+</template>
+
+<script>
+import overlayPositionMixin from './overlayPositionMixin'
+
+export default {
+  name: 'epx-page-designer-hover-overlay',
+  // 定位改为事件驱动（见 overlayPositionMixin），不再每帧 rAF 轮询
+  mixins: [overlayPositionMixin],
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    },
+    widget: {
+      type: Object,
+      default: null
+    },
+    targetElement: {
+      type: HTMLElement,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isCovered: false
+    }
+  },
+  computed: {
+    widgetInfo () {
+      if (!this.widget) return {}
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {}
+    }
+  },
+  watch: {
+    widget () {
+      this.scheduleOverlayUpdate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include b(page-designer-hover-overlay) {
+  position: fixed;
+  pointer-events: none;
+  border: 1px dashed;
+  @include border_color_primary;
+  box-sizing: border-box;
+
+  @include e(label) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 2px 8px;
+    font-size: var(--epx-font-size-s);
+    line-height: 20px;
+    color: #fff;
+    pointer-events: none;
+    z-index: 10001;
+    @include bg_color_primary(.8);
+    border-bottom-right-radius: 4px;
+    white-space: nowrap;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

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

@@ -0,0 +1,285 @@
+import PreviewItem from './PreviewItem.vue'
+import util from '@epxing/core/src/runtime-utils/util'
+import { createDropCache, clearDropCache, insertIndex, insertLineRect } from './dropPosition'
+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)
+}
+
+export default {
+  props: {
+    designer: {
+      type: Object
+    },
+    widget: {
+      type: Object
+    },
+    pageRelationList: {
+      type: Array
+    },
+    templateInfo: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  components: {
+    'widget-preview': PreviewItem
+  },
+  computed: {
+    $isMobile () {
+      return this.designer.terminal === 'mobile' ? true : this.$store.state.config.isMobile
+    },
+    selectedWidget () {
+      return this.designer.selectedWidget
+    },
+    widgetInfo () {
+      return this.designer.getWidgetByType(this.widget.contentType) || {}
+    },
+    childWidgetList: {
+      get () {
+        return this.widget.items || []
+      },
+      set (v) {
+        this.designer.updateWidget(this.widget.id, { items: v })
+      }
+    },
+    style () {
+      const { style = {} } = this.widget
+      const _style = { ...style }
+      if (this.$configs.height && !style.height) {
+        const height = this.$configs.height.includes('%') ? this.$configs.height : this.$configs.height + 'px'
+        _style.height = height
+      }
+      if (_style.backgroundImage) {
+        _style.backgroundImage = _style.backgroundImage.replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+          return `url(${util.getFileUrl($1)})`
+        })
+      }
+      return _style
+    },
+    widgetStyle () {
+      const { style = {} } = this.widget
+      return style
+    },
+    $configs () {
+      const { id, configs = {} } = this.widget
+      if (this.templateInfo) {
+        // 获取当前组件的配置  获取模板的配置
+        const templateConfig = this.designer.widgetConfig[this.templateInfo.id] || {}
+        const { itemConfigs } = this.templateInfo.content
+        const _configs = { ...configs, ...(itemConfigs[id] || {}) }
+        for (const key in _configs) {
+          const item = _configs[key]
+          if (typeof item === 'string') {
+            _configs[key] = item.replace(/@\[([\w-.|$#]+)\]/g, (macth, key) => templateConfig[key] || '')
+              .replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key) => `⌊${key}⌉`)
+              .replace(/\$\[([\w-.|$#]+)\]/g, (macth, key) => `⌊${key}⌉`)
+          }
+        }
+        return _configs
+      } else {
+        const widgetConfig = this.designer.widgetConfig[id] || {}
+        // 将变量转为⌊⌉『』
+        const allConfigs = { ...widgetConfig, ...configs }
+        const _configs = {}
+        for (const key in allConfigs) {
+          const item = allConfigs[key]
+          if (typeof item === 'string') {
+            _configs[key] = item.replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key) => `⌊${key}⌉`).replace(/\$\[([\w-.|$#]+)\]/g, (macth, key) => `⌊${key}⌉`)
+          } else {
+            _configs[key] = item
+          }
+        }
+        return _configs
+      }
+    },
+    $metaId () {
+      const { metaId } = this.$configs
+      return metaId || this.designer.page.metaId
+    }
+  },
+  watch: {
+    'widget.css' (v) {
+      appendCss(this.widget.id, this.widget.css)
+    }
+  },
+  mounted () {
+    if (this.widget.css) {
+      appendCss(this.widget.id, this.widget.css)
+    }
+    if (this.$el) {
+      if (this.$el.classList) {
+        this.$el.classList.add('css_' + this.widget.id)
+      } else {
+        this.$el.className += ' css_' + this.widget.id
+      }
+    }
+
+    // 自动为容器组件绑定拖拽事件
+    const isContainer = this.widgetInfo.CONTAINER === '1' || (this.widget.items !== undefined)
+    if (isContainer && this.$el) {
+      // 保存事件处理器引用，用于销毁时移除
+      this._dragEnterHandler = this.onContainerDragEnter.bind(this)
+      this._dragOverHandler = (e) => {
+        e.preventDefault()
+        this.onContainerDragOver(e)
+      }
+      this._dragLeaveHandler = this.onContainerDragLeave.bind(this)
+      this._dropHandler = (e) => {
+        e.preventDefault()
+        e.stopPropagation() // 阻止事件继续冒泡到父容器
+        this.onContainerDrop(e)
+      }
+
+      // 使用 capture 阶段捕获事件，优先于子元素处理
+      this.$el.addEventListener('dragenter', this._dragEnterHandler, false)
+      this.$el.addEventListener('dragover', this._dragOverHandler, false)
+      this.$el.addEventListener('dragleave', this._dragLeaveHandler, false)
+      this.$el.addEventListener('drop', this._dropHandler, false)
+    }
+  },
+  unmounted () {
+    removeCss(this.widget.id)
+
+    // 清除可能存在的离开定时器
+    if (this._dragLeaveTimer) {
+      clearTimeout(this._dragLeaveTimer)
+      this._dragLeaveTimer = null
+    }
+    if (this._dragFrame) {
+      cancelAnimationFrame(this._dragFrame)
+      this._dragFrame = null
+    }
+
+    // 移除拖拽事件监听
+    if (this._dragEnterHandler && this.$el) {
+      this.$el.removeEventListener('dragenter', this._dragEnterHandler)
+      this.$el.removeEventListener('dragover', this._dragOverHandler)
+      this.$el.removeEventListener('dragleave', this._dragLeaveHandler)
+      this.$el.removeEventListener('drop', this._dropHandler)
+    }
+  },
+  methods: {
+    // ========== 容器拖拽通用方法 ==========
+    // 判断是否是从组件库或模板库拖拽
+    isDraggingFromLibrary (e) {
+      const hasData = e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes('text/plain')
+      if (!hasData) return false
+
+      // 尝试获取数据判断类型（注意：在 dragover 中无法获取数据，只能在 drop 中获取）
+      // 所以这里只能做基本判断
+      return true
+    },
+
+    // 是否在拖画布上已有的组件（否则是组件库 / 模板库）：读拖拽状态，不再每次 querySelector
+    isDraggingWidget () {
+      return this.designer.dragState.dragSource === 'preview'
+    },
+
+    // 是否容器组件：有 CONTAINER 标记或有 items
+    isContainerWidget () {
+      return this.widgetInfo.CONTAINER === '1' || (this.widget.items !== undefined)
+    },
+
+    // 容器拖拽进入：重新测量一次 children，之后的 dragover 复用缓存
+    onContainerDragEnter (e) {
+      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return
+      e.preventDefault()
+      e.stopPropagation()
+      if (this._dragLeaveTimer) {
+        clearTimeout(this._dragLeaveTimer)
+        this._dragLeaveTimer = null
+      }
+      if (!this._dropCache) this._dropCache = createDropCache()
+      clearDropCache(this._dropCache)
+      this.designer.setDragOverTarget({ type: 'container', widgetId: this.widget.id })
+      this.designer.setDragOverTargetElement(this.$el)
+      this.designer.setPreviewDragTarget({ widgetId: this.widget.id, position: 'inside' })
+    },
+
+    // 容器拖拽悬停：只记坐标 + 允许放置；插入位置的计算与状态更新合并到下一帧
+    onContainerDragOver (e) {
+      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return
+      e.preventDefault()
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = this.isDraggingWidget() ? 'move' : 'copy'
+      this._dragClientX = e.clientX
+      this._dragClientY = e.clientY
+      this.scheduleDragFrame()
+    },
+
+    scheduleDragFrame () {
+      if (this._dragFrame) return
+      this._dragFrame = requestAnimationFrame(() => {
+        this._dragFrame = null
+        if (this._dragClientY === undefined || !this.designer.dragState.isDragging) return
+        // 事件被 stopPropagation 后到不了 document，悬浮窗位置在这里更新
+        this.designer.updateDragGhostPosition(this._dragClientX, this._dragClientY)
+        // 列表元素（子类可以覆盖 getDropListElement 方法自定义）
+        const listEl = this.getDropListElement ? this.getDropListElement() : this.$el
+        if (!this._dropCache) this._dropCache = createDropCache()
+        const lineRect = insertLineRect(this._dropCache, listEl, this._dragClientY)
+        if (lineRect) this.designer.setDragInsertLine(lineRect)
+        this.designer.setPreviewDragTarget({ widgetId: this.widget.id, index: insertIndex(this._dropCache, listEl, this._dragClientY), position: 'inside' })
+      })
+    },
+
+    // 容器拖拽离开：relatedTarget 为空（离开窗口）或不在当前元素内才算真正离开
+    onContainerDragLeave (e) {
+      if (!this.isContainerWidget()) return
+      const relatedTarget = e.relatedTarget
+      if (!relatedTarget || !this.$el.contains(relatedTarget)) {
+        // 小延迟避免在子元素之间快速移动时误判
+        if (this._dragLeaveTimer) clearTimeout(this._dragLeaveTimer)
+        this._dragLeaveTimer = setTimeout(() => {
+          if (this.designer.dragOverTarget?.widgetId === this.widget.id) {
+            this.designer.clearDragOverTarget()
+            this.designer.clearDragInsertLine()
+            this.designer.clearPreviewDragTarget()
+          }
+          if (this._dropCache) clearDropCache(this._dropCache)
+          this._dragLeaveTimer = null
+        }, 30)
+      }
+    },
+
+    // 容器放置
+    onContainerDrop (e) {
+      if (!this.isContainerWidget()) return
+      e.preventDefault()
+      e.stopPropagation()
+      if (this._dragLeaveTimer) {
+        clearTimeout(this._dragLeaveTimer)
+        this._dragLeaveTimer = null
+      }
+      this.designer.clearDragOverTarget()
+      this.designer.clearDragInsertLine()
+      this.designer.clearPreviewDragTarget()
+      const listEl = this.getDropListElement ? this.getDropListElement() : this.$el
+      if (!this._dropCache) this._dropCache = createDropCache()
+      const index = insertIndex(this._dropCache, listEl, e.clientY)
+      clearDropCache(this._dropCache)
+      // 使用 designer 的统一拖拽处理方法；不在这里发 drag-end，让 dragend 事件自然触发
+      this.designer.handleDrop({ dataTransfer: e.dataTransfer, target: { type: 'container', widgetId: this.widget.id, index } })
+    }
+  }
+}

package/src/page-designer/widget-preview/Placeholder.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="epx-page-designer-widget-preview-placeholder">
+    <img v-if="widgetInfo.PICTURE" class="epx-page-designer-widget-preview-placeholder__img" :src="$util.getFileUrl(widgetInfo.PICTURE)" />
+    <span v-else class="epx-page-designer-widget-preview-placeholder__text">{{widgetInfo.TITLE}}</span>
+  </div>
+</template>
+<script>
+import PreviewMixin from './Mixin'
+export default {
+  name: 'epx-page-designer-widget-preview-placeholder',
+  mixins: [PreviewMixin]
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-widget-preview-placeholder) {
+  overflow: auto;
+  @include e(img) {
+    width: 100%;
+  }
+}
+</style>