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

package/src/page-designer/widget-tree/Item.vue

@@ -0,0 +1,719 @@
+<template>
+  <li
+    :class="[
+      'epx-page-designer-widget-tree-item',
+      { 'is-active': selected },
+      { 'is-fold': fold },
+      { 'is-drop-over': isDragOver },
+      // 大纲内部拖拽时的“拖拽中”样式
+      { 'is-dragging': draggingId === widget.id },
+      // 不可放置目标标红
+      { 'is-drop-invalid': dropHint && dropHint.invalid && dropHint.widgetId === widget.id }
+    ]"
+    :data-tree-widget-id="widget.id"
+  >
+    <div class="epx-page-designer-widget-tree-item__container">
+      <p
+        class="epx-page-designer-widget-tree-item__header"
+        :style="{ paddingLeft: (level + 1) * 16 + 8 + 'px' }"
+        @click="designer.setSelected(widget)"
+        @dragenter="onHeaderDragEnter"
+        @dragover="onHeaderDragOver"
+        @dragleave="onHeaderDragLeave"
+        @drop="onHeaderDrop"
+        @mousedown.left.stop.prevent="onHeaderMouseDown"
+        @mouseup.left.stop="onHeaderMouseUp"
+        @mouseleave="onHeaderMouseLeave"
+        @mousemove="onHeaderMouseMove"
+      >
+        <span class="epx-page-designer-widget-tree-item__name">
+          <i v-if="widgetInfo.CONTAINER==='1' || slotEntries.length>0 || (widget.items && widget.items.length>0 && widget.contentType!=='dashboard-widget')"
+            :style="{ left: level * 16 + 8 + 'px' }"
+            :class="['epx-page-designer-widget-tree-item__fold-icon', 'el-icon-arrow-down']"
+            @click.stop="fold=!fold"></i>
+          <i :class="['epx-page-designer-widget-tree-item__icon', 'fa', widgetInfo.ICON || 'el-icon-box']"></i>
+          <span :title="widget.title">{{widget.title}}</span>
+          <span v-if="slotName" class="epx-page-designer-widget-tree-item__slot-tag">插槽</span>
+          <el-tooltip v-if="widgetInfo.STATUS === 'deprecated'" placement="top" :content="widgetInfo.REMARK">
+            <i class="epx-page-designer-widget-tree-item__warning-icon el-icon-warning-outline" ></i>
+          </el-tooltip>
+          <el-tooltip v-else-if="widgetInfo.STATUS === 'abandon'" placement="top" :content="widgetInfo.REMARK || '此组件已经废除，请替换新的组件使用'">
+            <span class="epx-page-designer-widget-tree-item__abandon-icon">废</span>
+          </el-tooltip>
+        </span>
+        <span class="epx-page-designer-widget-tree-item__operate" @click.stop>
+          <el-tooltip placement="top" content="添加" v-if="widgetInfo.CONTAINER === '1'">
+            <i class="el-icon-plus" @click.stop="addComponent"></i>
+          </el-tooltip>
+          <!-- 插槽只放一个组件，复制没有落点 -->
+          <el-tooltip placement="top" content="复制" v-if="!slotName">
+            <i class="el-icon-copy-document" @click="copyComponent"></i>
+          </el-tooltip>
+          <el-tooltip placement="top" content="保存为模板" v-if="designer.mode!=='template'">
+            <i class="epx-icon-save" @click="saveAsTemplate"></i>
+          </el-tooltip>
+          <el-tooltip placement="top" content="删除">
+            <i class="el-icon-close" @click="deleteComponent"></i>
+          </el-tooltip>
+        </span>
+      </p>
+      <div class="epx-page-designer-widget-tree-item__child">
+        <!-- 插槽子节点：插槽是固定位置，不参与大纲拖拽排序 -->
+        <ul
+          v-if="slotEntries.length > 0"
+          class="epx-page-designer-widget-tree__list epx-page-designer-widget-tree__list--drag-disable"
+        >
+          <epx-page-designer-widget-tree-item
+            v-for="slot in slotEntries"
+            :key="slot.widget.id"
+            :designer="designer"
+            :widget="slot.widget"
+            :slot-name="slot.name"
+            :level="level + 1"
+            :parent-widget="widget"
+            :dragging-id="draggingId"
+            :placeholder="placeholder"
+            :drop-hint="dropHint"
+            @add="v=>$emit('add', v)"
+            @add-template="v=>$emit('add-template', v)"
+            @drag-start="v=>$emit('drag-start', v)"
+            @hover-for-drop="v=>$emit('hover-for-drop', v)"
+            @drag-end="v=>$emit('drag-end', v)"
+            @library-hover-for-drop="v=>$emit('library-hover-for-drop', v)"
+            @library-drop="v=>$emit('library-drop', v)"
+          />
+        </ul>
+        <!-- 容器子节点列表 -->
+        <ul
+          v-if="widgetInfo.CONTAINER === '1'"
+          class="epx-page-designer-widget-tree__list"
+        >
+          <template v-for="(child, idx) in widget.items || []" :key="child.id">
+            <!-- 容器内部：在每个子元素前根据占位信息显示虚线框 -->
+            <li
+              v-if="showChildPlaceholderAt(idx)"
+
+              class="epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder"
+              @dragover.prevent="onPlaceholderDragOver"
+              @dragenter="onPlaceholderDragEnter"
+              @drop="onPlaceholderDrop"
+            >
+              <div class="epx-page-designer-widget-tree-item__placeholder-box"></div>
+            </li>
+            <epx-page-designer-widget-tree-item
+
+              :designer="designer"
+              :widget="child"
+              :level="level + 1"
+              :parent-widget="widget"
+              :index="idx"
+              :dragging-id="draggingId"
+              :placeholder="placeholder"
+              :drop-hint="dropHint"
+              @add="v=>$emit('add', v)"
+              @add-template="v=>$emit('add-template', v)"
+              @drag-start="v=>$emit('drag-start', v)"
+              @hover-for-drop="v=>$emit('hover-for-drop', v)"
+              @drag-end="v=>$emit('drag-end', v)"
+              @library-hover-for-drop="v=>$emit('library-hover-for-drop', v)"
+              @library-drop="v=>$emit('library-drop', v)"
+            />
+          </template>
+          <!-- 容器内部末尾占位 -->
+          <li
+            v-if="showChildPlaceholderAt((widget.items || []).length)"
+            :key="`placeholder-${widget.id}-end`"
+            class="epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder"
+            @dragover.prevent="onPlaceholderDragOver"
+            @dragenter="onPlaceholderDragEnter"
+            @drop="onPlaceholderDrop"
+          >
+            <div class="epx-page-designer-widget-tree-item__placeholder-box"></div>
+          </li>
+        </ul>
+        <!-- 非容器但有子节点（如特殊组件） -->
+        <ul
+          class="epx-page-designer-widget-tree__list epx-page-designer-widget-tree__list--drag-disable"
+          v-else-if="(widget.items && widget.items.length > 0 && widget.contentType!=='dashboard-widget')"
+        >
+          <epx-page-designer-widget-tree-item
+            v-for="(child, idx) in widget.items"
+            :key="child.id"
+            :designer="designer"
+            :widget="child"
+            :level="level + 1"
+            :parent-widget="widget"
+            :index="idx"
+            :dragging-id="draggingId"
+            :placeholder="placeholder"
+            :drop-hint="dropHint"
+            @add="v=>$emit('add', v)"
+            @add-template="v=>$emit('add-template', v)"
+            @drag-start="v=>$emit('drag-start', v)"
+            @hover-for-drop="v=>$emit('hover-for-drop', v)"
+            @drag-end="v=>$emit('drag-end', v)"
+            @library-hover-for-drop="v=>$emit('library-hover-for-drop', v)"
+            @library-drop="v=>$emit('library-drop', v)"
+          />
+        </ul>
+      </div>
+    </div>
+  </li>
+</template>
+<script>
+import { getWidgetSlots, getWidgetChildren } from '../designer'
+
+export default {
+  name: 'epx-page-designer-widget-tree-item',
+  props: {
+    designer: {
+      type: Object
+    },
+    widget: {
+      type: Object
+    },
+    parentWidget: {
+      type: Object
+    },
+    // 组件放在父组件的哪个插槽里（不在插槽里则为空）
+    slotName: {
+      type: String,
+      default: ''
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    // 当前正在拖拽的组件 id（来自 Tree）
+    draggingId: {
+      type: String,
+      default: null
+    },
+    // 当前占位信息（来自 Tree）
+    placeholder: {
+      type: Object,
+      default: () => null
+    },
+    // hover 提示（来自 Tree）
+    dropHint: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    return {
+      fold: false,
+      isDragOver: false,
+      // 长按触发拖拽
+      pressTimer: null,
+      pressStart: null,
+      pressTriggered: false,
+      // 上一次的 position，用于防抖动
+      lastEmitPosition: null
+    }
+  },
+  computed: {
+    selected () {
+      return this.widget.id === this.designer.selectedId
+    },
+    widgetInfo () {
+      return this.designer.getWidgetByType(this.widget.contentType) || {}
+    },
+    slotEntries () {
+      return getWidgetSlots(this.widget)
+    },
+    widgetList: {
+      get () {
+        return this.widget.items || []
+      },
+      set (v) {
+        this.designer.updateWidget(this.widget.id, { items: v })
+      }
+    }
+  },
+  methods: {
+    clearPressTimer () {
+      if (this.pressTimer) {
+        clearTimeout(this.pressTimer)
+        this.pressTimer = null
+      }
+      this.pressStart = null
+      this.pressTriggered = false
+    },
+    onPlaceholderDragOver (e) {
+      // 占位符上的 dragover 事件，保持拖拽状态
+      e.preventDefault()
+      e.stopPropagation()
+      const isDraggingWidget = this.designer.dragState.dragSource === 'preview'
+      e.dataTransfer.dropEffect = isDraggingWidget ? 'move' : 'copy'
+    },
+    onPlaceholderDragEnter (e) {
+      // 占位符上的 dragenter 事件，防止触发 dragleave
+      e.stopPropagation()
+    },
+    onPlaceholderDrop (e) {
+      // 占位符上的 drop 事件，转发到父容器处理
+      e.preventDefault()
+      e.stopPropagation()
+
+      if (!this.isDraggingFromLibrary(e)) {
+        return
+      }
+
+      // 转发到 library-drop 事件，让 Tree 处理
+      this.$emit('library-drop', {
+        widget: this.widget,
+        parentWidget: this.parentWidget,
+        index: this.index,
+        isContainer: this.widgetInfo.CONTAINER === '1',
+        event: e
+      })
+    },
+    isDraggingFromLibrary (e) {
+      return e && e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes('text/plain')
+    },
+    onHeaderDragEnter (e) {
+      // 插槽节点位置固定，不作为大纲里的放置目标（在画布的插槽区拖放）
+      if (this.slotName) return
+      if (!this.isDraggingFromLibrary(e)) {
+        return
+      }
+      // 避免事件冒泡到 Tree 的根级 dragover 覆盖占位位置
+      e.stopPropagation()
+      this.isDragOver = true
+    },
+    onHeaderDragOver (e) {
+      if (this.slotName) return
+      if (!this.isDraggingFromLibrary(e)) {
+        return
+      }
+
+      // 必须先调用 preventDefault，确保元素可以接收 drop
+      e.preventDefault()
+
+      // 在 stopPropagation 之前手动更新悬浮窗位置
+      if (this.designer && this.designer.updateDragGhostPosition) {
+        this.designer.updateDragGhostPosition(e.clientX, e.clientY)
+      }
+
+      e.stopPropagation() // 避免事件冒泡到 Tree 的根级 dragover 覆盖占位位置
+
+      // 根据拖拽类型设置 dropEffect
+      const isDraggingWidget = this.designer.dragState.dragSource === 'preview'
+      e.dataTransfer.dropEffect = isDraggingWidget ? 'move' : 'copy'
+
+      const rect = e.currentTarget.getBoundingClientRect()
+      const offsetY = e.clientY - rect.top
+      const ratio = rect.height > 0 ? offsetY / rect.height : 0.5
+      const isContainer = this.widgetInfo.CONTAINER === '1'
+
+      let position
+      if (isContainer) {
+        if (ratio <= 0.3) {
+          position = 'before'
+        } else if (ratio >= 0.7) {
+          position = 'after'
+        } else {
+          position = 'inside'
+        }
+      } else {
+        // 非容器：上/下分区即可（与内部拖拽的 before/after 一致）
+        position = ratio <= 0.5 ? 'before' : 'after'
+      }
+
+      // 防抖动：只有 position 改变时才触发事件
+      if (this.lastEmitPosition !== position) {
+        this.lastEmitPosition = position
+        this.$emit('library-hover-for-drop', {
+          widget: this.widget,
+          parentWidget: this.parentWidget,
+          index: this.index,
+          isContainer,
+          position,
+          event: e,
+          // 传递元素位置信息用于计算占位符线
+          rect: {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height
+          }
+        })
+      }
+    },
+    onHeaderDragLeave () {
+      this.isDragOver = false
+      this.lastEmitPosition = null
+    },
+    onHeaderDrop (e) {
+      if (this.slotName) return
+      e.preventDefault()
+      e.stopPropagation() // 避免事件冒泡到 Tree 的根级 drop
+
+      if (!this.isDraggingFromLibrary(e)) {
+        this.isDragOver = false
+        return
+      }
+
+      this.isDragOver = false
+      this.$emit('library-drop', {
+        widget: this.widget,
+        parentWidget: this.parentWidget,
+        index: this.index,
+        isContainer: this.widgetInfo.CONTAINER === '1',
+        event: e
+      })
+    },
+    // 以下为大纲树内部拖拽排序相关
+    onHeaderMouseDown (e) {
+      // 插槽节点不支持大纲内拖拽排序（插槽只有一个固定落点）
+      if (this.slotName) return
+      // 点击时不要立即进入拖拽：长按触发（或移动超过阈值触发）
+      this.clearPressTimer()
+      this.pressStart = { x: e.clientX, y: e.clientY, time: Date.now() }
+      this.pressTimer = setTimeout(() => {
+        // 如果已经开始拖拽了就不重复触发
+        if (this.draggingId) return
+        this.pressTriggered = true
+        this.$emit('drag-start', {
+          widget: this.widget,
+          parentWidget: this.parentWidget
+        })
+      }, 220)
+    },
+    onHeaderMouseUp (e) {
+      // 如果当前已经处于大纲拖拽中，则无论是否可放置，松手都应结束拖拽
+      if (this.draggingId) {
+        this.$emit('drag-end', { event: e })
+      }
+      // mouseup 前如果没有触发拖拽，则视为一次普通点击
+      if (!this.pressTriggered) {
+        this.clearPressTimer()
+      }
+    },
+    onHeaderMouseLeave () {
+      // 离开头部区域未触发拖拽则取消
+      if (!this.draggingId) this.clearPressTimer()
+    },
+    // 判断当前容器在某个 index 位置是否显示占位虚线框
+    showChildPlaceholderAt (index) {
+      if (!this.placeholder) return false
+      if (this.placeholder.parentId !== this.widget.id) return false
+      return this.placeholder.index === index
+    },
+    onHeaderMouseMove (e) {
+      if (this.slotName) return
+      // 未进入拖拽前：如果移动超过阈值，立即触发拖拽（更像原生体验）
+      if (!this.draggingId && this.pressStart && this.pressTimer) {
+        const dx = e.clientX - this.pressStart.x
+        const dy = e.clientY - this.pressStart.y
+        if (Math.abs(dx) + Math.abs(dy) >= 6) {
+          this.pressTriggered = true
+          this.clearPressTimer()
+          this.$emit('drag-start', {
+            widget: this.widget,
+            parentWidget: this.parentWidget
+          })
+          // 触发后本次 move 不做 hover，下一次 move 再计算，减少抖动
+          return
+        }
+      }
+
+      // 仅在有拖拽中的组件时响应（来自 Tree 的 draggingId）
+      if (!this.draggingId) return
+
+      const rect = e.currentTarget.getBoundingClientRect()
+      const offsetY = e.clientY - rect.top
+      const ratio = rect.height > 0 ? offsetY / rect.height : 0.5
+      const isContainer = this.widgetInfo.CONTAINER === '1'
+
+      let position
+      if (isContainer) {
+        // 容器：上 20% 视为“之前”，下 20% 视为“之后”，中间 60% 视为“放入容器”
+        if (ratio <= 0.2) {
+          position = 'before'
+        } else if (ratio >= 0.8) {
+          position = 'after'
+        } else {
+          position = 'inside'
+        }
+      } else {
+        // 非容器：上 30% / 下 30%，中间 40% 保持当前位置，避免抖动
+        if (ratio <= 0.3) {
+          position = 'before'
+        } else if (ratio >= 0.7) {
+          position = 'after'
+        } else {
+          // 中间区域不改变占位，直接返回
+          return
+        }
+      }
+
+      this.$emit('hover-for-drop', {
+        widget: this.widget,
+        parentWidget: this.parentWidget,
+        index: this.index,
+        isContainer,
+        position
+      })
+    },
+    copyComponent () {
+      this.designer.copyWidget(this.widget, this.parentWidget)
+    },
+    deleteComponent () {
+      this.designer.deleteWidget(this.widget, this.parentWidget)
+    },
+    addComponent () {
+      this.$emit('add', this.widget)
+    },
+    saveAsTemplate () {
+      // 获取组件及子组件配置
+      const eventNameMap = {}
+      const widgetIds = [this.widget.id]
+      const events = []
+      const widgetConfigs = {}
+      const js = this.designer.pageConfig.JS
+      let widgetJs = ''
+      const getAllWidgetIds = (widgets) => {
+        if (!widgets) return
+        for (const item of widgets) {
+          widgetIds.push(item.id)
+          getAllWidgetIds(getWidgetChildren(item))
+        }
+      }
+      getAllWidgetIds(getWidgetChildren(this.widget))
+      // 获取组件对应的配置
+      for (const widgetId of widgetIds) {
+        if (this.designer.widgetConfig[widgetId]) {
+          // 获取对应的JS
+          const config = this.$_.cloneDeep(this.designer.widgetConfig[widgetId])
+          // 将JS切分
+          widgetConfigs[widgetId] = config
+          if (config.componentEvents) {
+            for (const key in config.componentEvents) {
+              const arr = config.componentEvents[key]
+              events.push(...arr)
+              config.componentEvents[key] = arr.map(item => {
+                const newEventName = `${item}_${this.$util.genId()}`
+                eventNameMap[item] = newEventName
+                return newEventName
+              })
+            }
+          }
+          if (config.fields) {
+            for (const field of config.fields) {
+              if (field.events) {
+                for (const key in field.events) {
+                  const arr = field.events[key]
+                  events.push(...arr)
+                  field.events[key] = arr.map(item => {
+                    const newEventName = `${item}_${this.$util.genId()}`
+                    eventNameMap[item] = newEventName
+                    return newEventName
+                  })
+                }
+              }
+            }
+          }
+        }
+        if (js) {
+          const result = js.split(/export\s+function\s+/)
+          result.forEach(item => {
+            const funtionStr = item.replace(/\/\*(\n|.)+?\*\/[\n\s]+$/, '')
+            if (funtionStr.replace(/[\n\s]+/g, '').length > 0) {
+              const funtionName = funtionStr.split(/\s+\(/)[0]
+              if (events.includes(funtionName)) {
+                widgetJs += 'export function ' + funtionStr.replace(/^\w+/, eventNameMap[funtionName])
+              }
+            }
+          })
+        }
+      }
+      this.$emit('add-template', {
+        version: this.designer.version,
+        items: [this.widget],
+        itemConfigs: widgetConfigs,
+        JS: widgetJs
+      })
+    }
+  }
+
+}
+</script>
+<style lang="scss">
+@include b(page-designer-widget-tree-item) {
+  // padding: 4px 0;
+  font-weight: 500;
+  cursor: pointer;
+  position: relative;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  @include when(fold) {
+    @include e(child) {
+      display: none;
+    }
+    @include e(fold-icon){
+      transform: rotate(-90deg);
+      transform-origin: 50%;
+    }
+  }
+  @include when(drop-over) {
+    >.epx-page-designer-widget-tree-item__container>.epx-page-designer-widget-tree-item__header{
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        @include bg_color_primary(.12);
+      }
+    }
+  }
+  @include when(dragging) {
+    opacity: .7;
+    >.epx-page-designer-widget-tree-item__container>.epx-page-designer-widget-tree-item__header{
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        border: 1px dashed;
+        @include border_color_primary;
+        @include bg_color_primary(.12);
+      }
+    }
+  }
+  @include when(drop-invalid) {
+    >.epx-page-designer-widget-tree-item__container>.epx-page-designer-widget-tree-item__header{
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        background: rgba(245, 108, 108, 0.14);
+        border: 1px dashed rgba(245, 108, 108, 0.85);
+      }
+      >span {
+        z-index: 1;
+      }
+    }
+  }
+  @include when(active) {
+    >.epx-page-designer-widget-tree-item__container>.epx-page-designer-widget-tree-item__header{
+       &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        @include bg_color_primary(.2);
+      }
+    }
+  }
+  @include e(fold-icon) {
+    position: absolute;
+    left: 0px;
+    top: 20px;
+    margin-right: 2px;
+    transition: all .5s;
+  }
+  @include e(header){
+    cursor: pointer;
+    font-weight: 500;
+    padding: 0 20px;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &:hover {
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        @include bg_color_primary(.2);
+      }
+      @include e(operate) {
+        display: block;
+      }
+      >span {
+        z-index: 1;
+      }
+    }
+    &.active {
+      @include bg_color_primary(.2);
+      @include font_color_primary;
+    }
+  }
+
+  @include e(icon) {
+    font-weight: 500;
+    color: #666;
+    margin-right: 6px;
+  }
+  @include e(name) {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  @include e(operate) {
+    display: none;
+    &> i {
+      cursor: pointer;
+      margin: 0 5px;
+      color: #666;
+    }
+  }
+  @include e(warning-icon) {
+    color: #E6A23C;
+    margin-left: 4px;
+  }
+  @include e(abandon-icon) {
+    color:#fff;
+    font-size: 13px;
+    padding: 0 6px;
+    background: #AAAAAA;
+    border-radius: 10px;
+    line-height: 18px;
+    margin-left: 4px;
+  }
+  // 插槽子节点标记
+  @include e(slot-tag) {
+    font-size: 12px;
+    padding: 0 6px;
+    line-height: 18px;
+    border-radius: 10px;
+    margin-left: 4px;
+    @include bg_color_primary(.12);
+    @include font_color_primary;
+  }
+  // 拖拽占位虚线框样式
+  .epx-page-designer-widget-tree-item--placeholder &__placeholder-box {
+    height: 32px;
+    margin: 4px 20px;
+    border-radius: var(--epx-radius-s);
+    border: 1px dashed;
+    @include border_color_primary;
+    @include bg_color_primary(.04);
+  }
+}
+</style>