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

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

@@ -0,0 +1,995 @@
+<template>
+  <div class="epx-page-designer-widget-tree" :class="{'is-dragging': dragState && !!dragState.widget}">
+    <div class="epx-page-designer-widget-tree__header">
+      <span>{{$t('Outline of the component')}}</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+    <div
+      class="epx-page-designer-widget-tree__container"
+      @dragenter="onTreeDragEnter"
+      @dragover="onTreeDragOver"
+      @dragleave="onTreeDragLeave"
+      @drop="onTreeDrop"
+    >
+      <ul ref="rootList" class="epx-page-designer-widget-tree__list">
+        <template v-for="(widget, index) in widgetList" :key="widget.id">
+          <!-- 根级占位虚线框 -->
+          <li
+            v-if="showRootPlaceholderAt(index)"
+
+            class="epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder"
+            @dragover.prevent="onPlaceholderDragOver"
+            @dragenter="onPlaceholderDragEnter"
+            @drop.prevent="onTreeDrop"
+          >
+            <div class="epx-page-designer-widget-tree-item__placeholder-box"></div>
+          </li>
+          <epx-page-designer-widget-tree-item
+
+            :designer="designer"
+            :widget="widget"
+            :level="0"
+            :parent-widget="null"
+            :index="index"
+            :dragging-id="dragState && dragState.widget && dragState.widget.id"
+            :placeholder="placeholder"
+            :drop-hint="dropHint"
+            @add="openAddDialog"
+            @add-template="openTemplateDialog"
+            @drag-start="handleItemDragStart"
+            @hover-for-drop="handleItemHoverForDrop"
+            @drag-end="handleItemDragEnd"
+            @library-hover-for-drop="handleLibraryHoverForDrop"
+            @library-drop="handleLibraryDrop"
+          />
+        </template>
+        <!-- 末尾占位虚线框 -->
+        <li
+          v-if="showRootPlaceholderAt(widgetList.length)"
+          :key="'root-placeholder-end'"
+          class="epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder"
+          @dragover.prevent="onPlaceholderDragOver"
+          @dragenter="onPlaceholderDragEnter"
+          @drop.prevent="onTreeDrop"
+        >
+          <div class="epx-page-designer-widget-tree-item__placeholder-box"></div>
+        </li>
+      </ul>
+      <el-button class="epx-page-designer-widget-tree__add root" type="primary" size="default" @click.stop="openAddDialog(null)">+ {{$t('new add component')}}</el-button>
+    </div>
+    <el-dialog
+      :title="$t('Page Component Query')"
+      :model-value="!!showModal"
+      width="960px"
+      append-to-body
+      @close="showModal = false;addToParentWidget = null"
+    >
+      <epx-visual-component-library-dialog @click="addComponent"></epx-visual-component-library-dialog>
+    </el-dialog>
+    <el-dialog
+      title="保存模板"
+      :model-value="!!showTemplateModal"
+      width="520px"
+      append-to-body
+      @close="showTemplateModal = false"
+    >
+     <div class="epx-page-designer__template-form-item">
+        <label for="">模板编号:</label>
+        <el-input size="default" v-model="template.ID"></el-input>
+      </div>
+      <div class="epx-page-designer__template-form-item">
+        <label for="">模板名称:</label>
+        <el-input size="default" v-model="template.NAME"></el-input>
+      </div>
+      <div class="epx-page-designer__template-form-item">
+        <label for="">缩略图:</label>
+        <epx-photo v-model="template.PICTURE" :fieldConfigs="{attriName: 'PICTURE', attriLabel: '缩略图', state: 'EDIT'}"></epx-photo>
+      </div>
+      <div class="epx-page-designer__template-form-item" v-if="clientConfig.CODE==='frame'">
+        <label for="">应用级别:</label>
+        <el-radio-group v-model="template.LEVEL">
+          <el-radio label="01" value="01">平台级</el-radio>
+          <el-radio label="03" value="03">系统级</el-radio>
+        </el-radio-group>
+      </div>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="showTemplateModal = false">取 消</el-button>
+        <el-button type="primary" @click="saveAsTemplate">确 定</el-button>
+      </div></template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getWidgetChildren } from '../designer'
+
+export default {
+  name: 'epx-page-designer-widget-tree',
+  components: {
+  },
+  props: {
+    designer: {
+      type: Object
+    },
+    isFloating: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      dragtInContext: null,
+      showModal: false,
+      showTemplateModal: false,
+      template: {
+        NAME: '',
+        LEVEL: '03'
+      },
+      // 拖拽状态（仅用于大纲树内部拖拽排序）
+      dragState: null,
+      // 占位符位置：{ parentId: string | null, index: number }
+      placeholder: null,
+      // hover 提示：{ widgetId: string|null, invalid: boolean }
+      dropHint: null,
+      // 组件库原生拖拽状态（仅用于显示虚线占位框并在 drop 时插入）
+      libraryDragActive: false,
+      // 上一次占位符位置，用于防抖动
+      lastPlaceholder: null,
+      // 节流定时器
+      hoverThrottleTimer: null
+    }
+  },
+  computed: {
+    widgetList: {
+      get () {
+        return this.designer.widgetList
+      },
+      set (v) {
+        this.designer.widgetList = v
+      }
+    }
+  },
+  watch: {
+    // 监听预览区域的拖拽状态，同步显示占位符
+    'designer.previewDragTarget': {
+      handler (target) {
+        if (target) {
+          if (target.widgetId) {
+            // 容器内部拖拽
+            const widget = this.designer.getWidgetItemById(target.widgetId)
+            if (widget) {
+              this.placeholder = {
+                parentId: target.widgetId,
+                index: typeof target.index === 'number' ? target.index : 0
+              }
+              this.libraryDragActive = true
+
+              // 自动滚动到目标位置
+              this.$nextTick(() => {
+                this.scrollToWidget(target.widgetId)
+              })
+            }
+          } else if (target.position === 'root') {
+            // 根级拖拽
+            this.placeholder = {
+              parentId: null,
+              index: typeof target.index === 'number' ? target.index : 0
+            }
+            this.libraryDragActive = true
+
+            // 自动滚动到根级占位符位置
+            this.$nextTick(() => {
+              this.scrollToRootPlaceholder(target.index)
+            })
+          }
+        } else {
+          // 清除占位符，但保持 libraryDragActive
+          this.placeholder = null
+        }
+      }
+    }
+  },
+  methods: {
+    onPlaceholderDragOver (e) {
+      // 占位符上的 dragover 事件，保持拖拽状态，不让占位符消失
+      e.preventDefault()
+      e.stopPropagation()
+      if (this.isDraggingFromLibrary(e)) {
+        // 根据是否有正在拖拽的组件来判断拖拽类型
+        const isDraggingWidget = this.designer.dragState.dragSource === 'preview'
+        e.dataTransfer.dropEffect = isDraggingWidget ? 'move' : 'copy'
+      }
+    },
+    onPlaceholderDragEnter (e) {
+      // 占位符上的 dragenter 事件，防止触发 dragleave
+      e.stopPropagation()
+    },
+    isDraggingFromLibrary (e) {
+      if (!e || !e.dataTransfer || !e.dataTransfer.types) return false
+      return e.dataTransfer.types.includes('text/plain')
+    },
+    parseLibraryDragPayload (e) {
+      const DRAG_PAYLOAD_PREFIX = 'page-designer-widget:'
+      const TEMPLATE_PAYLOAD_PREFIX = 'page-designer-template:'
+      if (!e || !e.dataTransfer) return null
+      try {
+        const raw = e.dataTransfer.getData('text/plain') || ''
+
+        // 检查是否是组件重排序拖拽（从预览区域拖拽）
+        try {
+          const data = JSON.parse(raw)
+          if (data && data.type === 'widget-reorder') {
+            return { isWidgetReorder: true, ...data }
+          }
+        } catch (_) {
+          // 不是 JSON 或不是重排序，继续检查其他类型
+        }
+
+        // 检查是否是模板
+        if (raw.startsWith(TEMPLATE_PAYLOAD_PREFIX)) {
+          const templateData = JSON.parse(raw.slice(TEMPLATE_PAYLOAD_PREFIX.length))
+          return { isTemplate: true, ...templateData }
+        }
+
+        // 检查是否是组件
+        if (raw.startsWith(DRAG_PAYLOAD_PREFIX)) {
+          return JSON.parse(raw.slice(DRAG_PAYLOAD_PREFIX.length))
+        }
+
+        return null
+      } catch (err) {
+        return null
+      }
+    },
+    resetLibraryDragState () {
+      // 大纲内部拖拽进行中时，不清理内部拖拽的占位状态
+      if (this.dragState) return
+      this.libraryDragActive = false
+      this.placeholder = null
+      this.dropHint = null
+      this.lastPlaceholder = null
+      // 清理节流定时器
+      if (this.hoverThrottleTimer) {
+        clearTimeout(this.hoverThrottleTimer)
+        this.hoverThrottleTimer = null
+      }
+    },
+    notifyDragEnd () {
+      // 通知 PageDesigner 拖拽结束，关闭悬浮窗
+      if (this.designer && this.designer.vueInstance) {
+        this.designer.emitEvent('drag-end')
+      }
+    },
+    isIdInSubtree (rootWidget, id) {
+      if (!rootWidget || !id) return false
+      if (rootWidget.id === id) return true
+      const items = rootWidget.items || []
+      for (const child of items) {
+        if (this.isIdInSubtree(child, id)) return true
+      }
+      return false
+    },
+    /**
+     * 判断根级是否在某个 index 位置显示占位虚线框
+     */
+    showRootPlaceholderAt (index) {
+      if (!this.placeholder || this.placeholder.parentId !== null) return false
+      return this.placeholder.index === index
+    },
+    /**
+     * 根级计算插入位置（组件库拖拽 hover 在树空白处时）
+     */
+    getRootInsertIndex (e) {
+      const listEl = this.$refs.rootList
+      if (!listEl) return 0
+      const y = e.clientY
+      const children = [...listEl.children].filter(el => el && el.dataset && el.dataset.treeWidgetId)
+      if (children.length === 0) return 0
+      for (let i = 0; i < children.length; i++) {
+        const r = children[i].getBoundingClientRect()
+        if (r.top + r.height / 2 > y) return i
+      }
+      return children.length
+    },
+    onTreeDragEnter (e) {
+      if (!this.isDraggingFromLibrary(e)) return
+      this.libraryDragActive = true
+    },
+    onTreeDragOver (e) {
+      if (!this.isDraggingFromLibrary(e)) return
+      // 允许 drop
+      e.preventDefault()
+
+      // 手动更新悬浮窗位置，确保流畅跟随
+      if (this.designer && this.designer.updateDragGhostPosition) {
+        this.designer.updateDragGhostPosition(e.clientX, e.clientY)
+      }
+
+      const isDraggingWidget = this.designer.dragState.dragSource === 'preview'
+      e.dataTransfer.dropEffect = isDraggingWidget ? 'move' : 'copy'
+      // 只有 hover 在树的“空白区域/根级列表”时才走这里；Item header 会 stopPropagation
+      this.libraryDragActive = true
+      this.dropHint = null
+      this.placeholder = {
+        parentId: null,
+        index: this.getRootInsertIndex(e)
+      }
+    },
+    onTreeDragLeave (e) {
+      if (!this.isDraggingFromLibrary(e)) return
+      // 离开整个 tree 容器则清理（进入子元素不清理）
+      if (this.$el && !this.$el.contains(e.relatedTarget)) {
+        this.resetLibraryDragState()
+      }
+    },
+    onTreeDrop (e) {
+      if (!this.isDraggingFromLibrary(e)) return
+      e.preventDefault()
+      const payload = this.parseLibraryDragPayload(e)
+      if (!payload) {
+        this.resetLibraryDragState()
+        return
+      }
+
+      // 处理组件重排序（从预览区域拖拽）
+      if (payload.isWidgetReorder) {
+        this.handleWidgetReorderToTree(payload)
+        this.resetLibraryDragState()
+        // 注意：不在这里调用 notifyDragEnd，让 dragend 事件自然触发
+        return
+      }
+
+      // 处理模板或组件
+      if (payload.isTemplate) {
+        this.insertTemplateByPlaceholder(payload)
+      } else if (payload.code) {
+        this.insertLibraryWidgetByPlaceholder(payload)
+      }
+
+      this.resetLibraryDragState()
+      // 注意：不在这里调用 notifyDragEnd，让 dragend 事件自然触发
+    },
+    /**
+     * TreeItem 发起拖拽开始
+     */
+    handleItemDragStart ({ widget, parentWidget }) {
+      if (!widget) return
+      const parentList = parentWidget ? (parentWidget.items || []) : this.widgetList
+      const sourceIndex = parentList.findIndex(item => item.id === widget.id)
+      if (sourceIndex === -1) return
+
+      this.dragState = {
+        widget,
+        parentWidget: parentWidget || null,
+        sourceIndex,
+        invalid: false,
+        // 标记本次拖拽过程中是否真正发生过“移动/hover 到目标位置”
+        hasMoved: false
+      }
+      // 初始占位位置：保持在当前索引之后，视觉上与原项目并存
+      this.placeholder = {
+        parentId: parentWidget ? parentWidget.id : null,
+        index: sourceIndex + 1
+      }
+      this.dropHint = null
+
+      document.addEventListener('mouseup', this.handleDocumentMouseUp)
+    },
+    /**
+     * TreeItem 上鼠标移动，用于更新占位位置
+     * - 如果目标是容器，则占位在该容器的第一个子元素位置
+     * - 如果是普通组件，根据鼠标在上半部分 / 下半部分，决定占位在上面还是下面
+     */
+    handleItemHoverForDrop ({ widget, parentWidget, index, isContainer, position }) {
+      if (!this.dragState || !widget) return
+      if (this.dragState.widget && this.dragState.widget.id === widget.id) return
+
+      // 不允许拖到自己或自己的子孙节点区域（包含 before/after/inside）
+      const invalid = this.isIdInSubtree(this.dragState.widget, widget.id)
+      this.dragState.invalid = !!invalid
+      this.dropHint = { widgetId: widget.id, invalid: !!invalid }
+      if (invalid) return
+
+      // 一旦进入合法的 hover 计算，认为本次拖拽已经产生了有效移动
+      this.dragState.hasMoved = true
+
+      // 容器中间区域：作为容器的第一个子元素
+      if (isContainer && position === 'inside') {
+        this.placeholder = {
+          parentId: widget.id,
+          index: 0
+        }
+        return
+      }
+
+      // 其他情况（容器的上 / 下边界 & 普通组件）：作为同级兄弟节点进行 before/after 排序
+      const baseIndex = typeof index === 'number' ? index : 0
+      const offset = position === 'before' ? 0 : 1
+      this.placeholder = {
+        parentId: parentWidget ? parentWidget.id : null,
+        index: baseIndex + offset
+      }
+    },
+    /**
+     * 文档级 mouseup：完成一次拖拽排序
+     * 如果在大纲树外部松手，则视为取消拖拽，不做任何排序变更
+     */
+    handleDocumentMouseUp (e) {
+      // 如果鼠标松手位置不在当前大纲树内部，则直接取消拖拽
+      if (e && e.target && e.target.closest && !e.target.closest('.epx-page-designer-widget-tree')) {
+        this.resetDragState()
+        return
+      }
+
+      // 如果还没产生过任何有效移动（没有 hover 到任何合法目标），认为只是“长按误触”，直接取消
+      if (this.dragState && !this.dragState.hasMoved) {
+        this.resetDragState()
+        return
+      }
+
+      if (!this.dragState || !this.placeholder || this.dragState.invalid) {
+        this.resetDragState()
+        return
+      }
+
+      const { widget, parentWidget, sourceIndex } = this.dragState
+      const sourceList = parentWidget ? (parentWidget.items || []) : this.widgetList
+
+      if (!sourceList || sourceIndex < 0 || sourceIndex >= sourceList.length) {
+        this.resetDragState()
+        return
+      }
+
+      // 目标父级
+      let targetParent = null
+      if (this.placeholder.parentId) {
+        targetParent = this.designer.getWidgetItemById
+          ? this.designer.getWidgetItemById(this.placeholder.parentId)
+          : null
+      }
+
+      // 确保容器有 items 数组（使用响应式方法）
+      if (targetParent && !targetParent.items) {
+        this.designer.updateWidget(targetParent.id, { items: [] })
+      }
+
+      const targetList = targetParent ? targetParent.items : this.widgetList
+      let targetIndex = this.placeholder.index
+
+      // 同一列表内部排序时，移除原位置后需要修正目标 index
+      const sameList = targetList === sourceList
+
+      // 先从源列表中移除
+      sourceList.splice(sourceIndex, 1)
+
+      if (sameList && targetIndex > sourceIndex) {
+        targetIndex = targetIndex - 1
+      }
+      if (targetIndex < 0) targetIndex = 0
+      if (targetIndex > targetList.length) targetIndex = targetList.length
+
+      targetList.splice(targetIndex, 0, widget)
+
+      // 更新选中 & 历史
+      this.designer.setSelected && this.designer.setSelected(widget)
+      this.designer.emitHistoryChange && this.designer.emitHistoryChange()
+
+      this.resetDragState()
+    },
+    /**
+     * TreeItem 内部触发的拖拽结束（在组件 header 区域松手）
+     */
+    handleItemDragEnd (payload) {
+      // 复用统一的 mouseup 结束逻辑
+      this.handleDocumentMouseUp(payload && payload.event)
+    },
+    resetDragState () {
+      document.removeEventListener('mouseup', this.handleDocumentMouseUp)
+      this.dragState = null
+      this.placeholder = null
+      this.dropHint = null
+    },
+    handleLibraryHoverForDrop (ctx) {
+      if (!ctx || !ctx.event || !this.isDraggingFromLibrary(ctx.event)) return
+
+      // 节流：限制更新频率
+      if (this.hoverThrottleTimer) return
+      this.hoverThrottleTimer = setTimeout(() => {
+        this.hoverThrottleTimer = null
+      }, 50) // 50ms 节流
+
+      this.libraryDragActive = true
+      this.dropHint = { widgetId: ctx.widget && ctx.widget.id, invalid: false }
+
+      let newPlaceholder
+      // inside：放入容器第一个子元素位置（与大纲内部拖拽一致）
+      if (ctx.isContainer && ctx.position === 'inside') {
+        newPlaceholder = { parentId: ctx.widget.id, index: 0 }
+      } else {
+        // before/after：同级插入
+        const baseIndex = typeof ctx.index === 'number' ? ctx.index : 0
+        const offset = ctx.position === 'before' ? 0 : 1
+        newPlaceholder = {
+          parentId: ctx.parentWidget ? ctx.parentWidget.id : null,
+          index: baseIndex + offset
+        }
+      }
+
+      // 防抖动：只有位置真正改变时才更新
+      if (!this.lastPlaceholder ||
+          this.lastPlaceholder.parentId !== newPlaceholder.parentId ||
+          this.lastPlaceholder.index !== newPlaceholder.index) {
+        this.placeholder = newPlaceholder
+        this.lastPlaceholder = { ...newPlaceholder }
+      }
+    },
+    handleLibraryDrop (ctx) {
+      if (!ctx || !ctx.event || !this.isDraggingFromLibrary(ctx.event)) return
+      ctx.event.preventDefault()
+      const payload = this.parseLibraryDragPayload(ctx.event)
+      if (!payload) {
+        this.resetLibraryDragState()
+        return
+      }
+
+      // 如果还未产生占位（极少数情况），按 drop 点给一个兜底位置
+      if (!this.placeholder) {
+        if (ctx.widget && ctx.isContainer) {
+          const items = ctx.widget.items || []
+          this.placeholder = { parentId: ctx.widget.id, index: items.length }
+        } else {
+          const baseIndex = typeof ctx.index === 'number' ? ctx.index : (this.widgetList || []).length
+          this.placeholder = { parentId: ctx.parentWidget ? ctx.parentWidget.id : null, index: baseIndex + 1 }
+        }
+      }
+
+      // 处理组件重排序（从预览区域拖拽）
+      if (payload.isWidgetReorder) {
+        this.handleWidgetReorderToTree(payload)
+        this.resetLibraryDragState()
+        // 注意：不在这里调用 notifyDragEnd，让 dragend 事件自然触发
+        return
+      }
+
+      // 处理模板或组件
+      if (payload.isTemplate) {
+        this.insertTemplateByPlaceholder(payload)
+      } else if (payload.code) {
+        this.insertLibraryWidgetByPlaceholder(payload)
+      }
+
+      this.resetLibraryDragState()
+      // 注意：不在这里调用 notifyDragEnd，让 dragend 事件自然触发
+    },
+    insertLibraryWidgetByPlaceholder (payload) {
+      const widgetInfo = this.designer.getWidgetByType(payload.code) || {}
+      const widget = {
+        id: this.designer.genId(payload.code),
+        contentType: payload.code,
+        title: payload.title || widgetInfo.TITLE
+      }
+      if (payload.custom) widget.type = 'custom'
+      if (widgetInfo.CODE === 'chart') {
+        this.designer.updateWidgetConfig(widget.id, { metaId: this.designer.page.metaId })
+      }
+
+      let targetParent = null
+      if (this.placeholder && this.placeholder.parentId) {
+        targetParent = this.designer.getWidgetItemById
+          ? this.designer.getWidgetItemById(this.placeholder.parentId)
+          : null
+        // 非容器不允许作为“放入”的父级：回退到根级
+        if (targetParent) {
+          const parentInfo = this.designer.getWidgetByType(targetParent.contentType, targetParent.type) || {}
+          if (parentInfo.CONTAINER !== '1') targetParent = null
+        }
+      }
+
+      // 确保容器有 items 数组（使用响应式方法）
+      if (targetParent && !targetParent.items) {
+        this.designer.updateWidget(targetParent.id, { items: [] })
+      }
+
+      const targetList = targetParent ? targetParent.items : this.widgetList
+      let index = this.placeholder ? this.placeholder.index : targetList.length
+      if (index < 0) index = 0
+      if (index > targetList.length) index = targetList.length
+      targetList.splice(index, 0, widget)
+
+      this.designer.setSelected && this.designer.setSelected(widget)
+      this.designer.emitHistoryChange && this.designer.emitHistoryChange()
+    },
+    insertTemplateByPlaceholder (payload) {
+      const { items, itemConfigs, templateJs } = payload
+      if (!items || !items.length) return
+
+      // 确定插入位置
+      let targetParent = null
+      if (this.placeholder && this.placeholder.parentId) {
+        targetParent = this.designer.getWidgetItemById
+          ? this.designer.getWidgetItemById(this.placeholder.parentId)
+          : null
+        // 非容器不允许作为"放入"的父级：回退到根级
+        if (targetParent) {
+          const parentInfo = this.designer.getWidgetByType(targetParent.contentType, targetParent.type) || {}
+          if (parentInfo.CONTAINER !== '1') targetParent = null
+        }
+      }
+
+      // 确保容器有 items 数组（使用响应式方法）
+      if (targetParent && !targetParent.items) {
+        this.designer.updateWidget(targetParent.id, { items: [] })
+      }
+
+      const targetList = targetParent ? targetParent.items : this.widgetList
+      let index = this.placeholder ? this.placeholder.index : targetList.length
+      if (index < 0) index = 0
+      if (index > targetList.length) index = targetList.length
+
+      // 插入模板组件
+      targetList.splice(index, 0, ...items)
+
+      // 更新组件配置
+      this.designer.mergeWidgetConfig(itemConfigs)
+
+      // 处理模板 JS
+      if (templateJs) {
+        let { JS = '' } = this.designer.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.designer.updatePageConfig({ JS })
+      }
+
+      this.designer.setSelected && this.designer.setSelected(items[0])
+      this.designer.emitHistoryChange && this.designer.emitHistoryChange()
+    },
+    openAddDialog (v) {
+      this.showModal = true
+      this.addToParentWidget = v
+    },
+    addComponent (v, type) {
+      if (type === 'template') {
+        this.addTemplate(v)
+      } else {
+        this.designer.addWidgetByInfo(v, this.addToParentWidget)
+      }
+      this.showModal = false
+    },
+    addTemplate (template) {
+      const content = template.CONTENT
+      if (content) {
+        const config = JSON.parse(content)
+        const { items, itemConfigs, JS: templateJs } = config
+        const formatConfig = (arr) => {
+          arr.forEach(compItem => {
+            const oldId = compItem.id
+            const newId = compItem.contentType + '_' + this.$util.genId()
+            if (itemConfigs[oldId]) {
+              itemConfigs[newId] = itemConfigs[oldId]
+              delete itemConfigs[oldId]
+            }
+            compItem.id = newId
+            const children = getWidgetChildren(compItem)
+            if (children.length > 0) {
+              formatConfig(children)
+            }
+          })
+        }
+        formatConfig(items)
+        this.designer.addWidgets(items, this.addToParentWidget)
+        this.designer.mergeWidgetConfig(itemConfigs)
+        // 获取原JS函数，不存在添加
+        if (templateJs) {
+          let { JS = '' } = this.designer.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.designer.updatePageConfig({ JS })
+        }
+      }
+    },
+    openTemplateDialog (v) {
+      this.showTemplateModal = true
+      this.template = {
+        NAME: '',
+        LEVEL: '03',
+        CONTENT: JSON.stringify(v)
+      }
+    },
+    saveAsTemplate () {
+      if (!this.template.ID) {
+        this.$message.error('请输入模板编号')
+        return
+      }
+      if (!this.template.NAME) {
+        this.$message.error('请输入模板名称')
+        return
+      }
+      const params = {
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ID': this.template.ID,
+        'bean.NAME': this.template.NAME,
+        'bean.TYPE': '01',
+        'bean.LEVEL': this.template.LEVEL,
+        'bean.PICTURE': this.template.PICTURE,
+        'bean.CONTENT': this.template.CONTENT
+      }
+      this.$http.save({
+        entityId: 'FM_TEMPLATE',
+        ...params
+      })
+        .then(() => {
+          this.$message.success('保存成功')
+          this.showTemplateModal = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    // 滚动到指定组件位置
+    scrollToWidget (widgetId) {
+      const treeContainer = this.$el.querySelector('.epx-page-designer-widget-tree__list')
+      if (!treeContainer) return
+
+      const targetElement = treeContainer.querySelector(`[data-tree-widget-id="${widgetId}"]`)
+      if (!targetElement) return
+
+      const containerRect = treeContainer.getBoundingClientRect()
+      const targetRect = targetElement.getBoundingClientRect()
+
+      // 检查元素是否在可视区域内
+      const isVisible = targetRect.top >= containerRect.top && targetRect.bottom <= containerRect.bottom
+
+      if (!isVisible) {
+        // 滚动到元素位置，留一些边距
+        const scrollTop = targetElement.offsetTop - treeContainer.offsetTop - 100
+        treeContainer.scrollTo({
+          top: Math.max(0, scrollTop),
+          behavior: 'smooth'
+        })
+      }
+    },
+    // 滚动到根级占位符位置
+    scrollToRootPlaceholder (index) {
+      const treeContainer = this.$el.querySelector('.epx-page-designer-widget-tree__list')
+      if (!treeContainer) return
+
+      const rootItems = treeContainer.querySelectorAll('[data-tree-widget-id]')
+      if (!rootItems || rootItems.length === 0) return
+
+      let targetElement
+      if (index >= rootItems.length) {
+        // 滚动到最后一个元素
+        targetElement = rootItems[rootItems.length - 1]
+      } else if (index > 0) {
+        // 滚动到 index 位置的元素
+        targetElement = rootItems[index]
+      } else {
+        // 滚动到第一个元素
+        targetElement = rootItems[0]
+      }
+
+      if (targetElement) {
+        const containerRect = treeContainer.getBoundingClientRect()
+        const targetRect = targetElement.getBoundingClientRect()
+
+        const isVisible = targetRect.top >= containerRect.top && targetRect.bottom <= containerRect.bottom
+
+        if (!isVisible) {
+          const scrollTop = targetElement.offsetTop - treeContainer.offsetTop - 100
+          treeContainer.scrollTo({
+            top: Math.max(0, scrollTop),
+            behavior: 'smooth'
+          })
+        }
+      }
+    },
+    /**
+     * 处理从预览区域拖拽组件到大纲树
+     */
+    handleWidgetReorderToTree (payload) {
+      const { widgetId, parentWidgetId } = payload
+      if (!widgetId) return
+
+      // 获取被拖拽的组件
+      const sourceWidget = this.designer.getWidgetItemById(widgetId)
+      if (!sourceWidget) return
+
+      // 确定目标位置
+      let targetParent = null
+      if (this.placeholder && this.placeholder.parentId) {
+        targetParent = this.designer.getWidgetItemById(this.placeholder.parentId)
+        // 非容器不允许作为"放入"的父级：回退到根级
+        if (targetParent) {
+          const parentInfo = this.designer.getWidgetByType(targetParent.contentType, targetParent.type) || {}
+          if (parentInfo.CONTAINER !== '1') targetParent = null
+        }
+      }
+
+      // 确保容器有 items 数组
+      if (targetParent && !targetParent.items) {
+        this.designer.updateWidget(targetParent.id, { items: [] })
+      }
+
+      const targetList = targetParent ? targetParent.items : this.widgetList
+      let targetIndex = this.placeholder ? this.placeholder.index : targetList.length
+
+      // 标准化 ID 比较
+      const sourceParentId = parentWidgetId || null
+      const targetParentId = targetParent ? targetParent.id : null
+
+      // 如果是同一个容器内移动，需要先找到源索引
+      let sourceIndex = -1
+      if (sourceParentId === targetParentId) {
+        sourceIndex = targetList.findIndex(w => w.id === widgetId)
+
+        // 如果目标位置在源位置之后，需要调整索引
+        if (sourceIndex !== -1 && targetIndex > sourceIndex) {
+          targetIndex = targetIndex - 1
+        }
+      }
+
+      // 从源位置删除
+      if (parentWidgetId) {
+        // 从容器中删除
+        const sourceParent = this.designer.getWidgetItemById(parentWidgetId)
+        if (sourceParent && sourceParent.items) {
+          const sourceList = [...sourceParent.items]
+          const idx = sourceList.findIndex(w => w.id === widgetId)
+          if (idx !== -1) {
+            sourceList.splice(idx, 1)
+            this.designer.updateWidget(sourceParent.id, { items: sourceList })
+          }
+        }
+      } else {
+        // 从根级删除
+        const rootList = [...this.widgetList]
+        const idx = rootList.findIndex(w => w.id === widgetId)
+        if (idx !== -1) {
+          rootList.splice(idx, 1)
+          this.widgetList = rootList
+        }
+      }
+
+      // 插入到目标位置（在删除之后重新获取 targetList，因为 this.widgetList 可能已经改变）
+      const finalTargetList = targetParent ? targetParent.items : this.widgetList
+      if (targetIndex < 0) targetIndex = 0
+      if (targetIndex > finalTargetList.length) targetIndex = finalTargetList.length
+
+      finalTargetList.splice(targetIndex, 0, sourceWidget)
+
+      // 如果是插入到容器，需要更新容器
+      if (targetParent) {
+        this.designer.updateWidget(targetParent.id, { items: [...finalTargetList] })
+      }
+
+      this.designer.setSelected && this.designer.setSelected(sourceWidget)
+      this.designer.emitHistoryChange && this.designer.emitHistoryChange()
+    }
+  },
+  created () {
+    // 组件库原生拖拽结束时，清理大纲占位状态
+    if (this.designer && this.designer.handleEvent) {
+      this.designer.handleEvent('library-drag-end', () => {
+        this.resetLibraryDragState()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-widget-tree) {
+  margin-left: 2px;
+  width: 360px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--epx-bg-card);
+  position: relative;
+  .el-dialog {
+    height: 500px
+  }
+  @include when(dragging) {
+    .epx-page-designer-widget-tree-item, .epx-page-designer-widget-tree-item__header {
+      cursor: move!important;;
+    }
+  }
+  @include e(header) {
+   height: 48px;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 0 20px;
+   border-bottom: 1px solid #e3e3e3;
+   >span {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+   }
+  >i {
+    color: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+  }
+ }
+ @include e(container) {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  >.epx-page-designer-widget-tree__list {
+    padding-bottom: 4px;
+  }
+ }
+ @include e(list) {
+  min-height: 25px;
+ }
+ @include e(drag-ghost) {
+  width: 100%!important;
+  font-size: 0;
+  height: 0px;
+  box-sizing: border-box;
+  background: $--color-primary;
+  outline-width: 0;
+  .epx-page-designer-widget-tree-item__container {
+    height: 0;
+    overflow: hidden;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    border-top: 1px solid;
+    @include border_color_primary;
+  }
+}
+@include e(drag-in-ghost) {
+  @include bg_color_primary(.2)
+}
+ @include e(add) {
+  margin: 16px 20px;
+  display: block;
+  width: calc(100% - 40px);
+ }
+}
+.epx-page-designer__template-form-item {
+  display: flex;
+  padding: 16px 0;
+  align-items: center;
+  >label {
+    width: 80px;
+    flex-shrink: 0;
+  }
+  .el-input {
+    width: 220px;
+  }
+}
+</style>