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

package/dist/src/page-designer/widget-tree/Tree.js

@@ -0,0 +1,855 @@
+import '../../../style.css';
+import { getWidgetChildren } from "../designer.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, withModifiers, createCommentVNode, createVNode, withCtx, createTextVNode } from "vue";
+/* empty css         */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  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 {
+          this.placeholder = null;
+        }
+      }
+    }
+  },
+  methods: {
+    onPlaceholderDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.isDraggingFromLibrary(e)) {
+        const isDraggingWidget = this.designer.dragState.dragSource === "preview";
+        e.dataTransfer.dropEffect = isDraggingWidget ? "move" : "copy";
+      }
+    },
+    onPlaceholderDragEnter(e) {
+      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 (_) {
+        }
+        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() {
+      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;
+      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";
+      this.libraryDragActive = true;
+      this.dropHint = null;
+      this.placeholder = {
+        parentId: null,
+        index: this.getRootInsertIndex(e)
+      };
+    },
+    onTreeDragLeave(e) {
+      if (!this.isDraggingFromLibrary(e)) return;
+      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();
+        return;
+      }
+      if (payload.isTemplate) {
+        this.insertTemplateByPlaceholder(payload);
+      } else if (payload.code) {
+        this.insertLibraryWidgetByPlaceholder(payload);
+      }
+      this.resetLibraryDragState();
+    },
+    /**
+     * 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;
+      const invalid = this.isIdInSubtree(this.dragState.widget, widget.id);
+      this.dragState.invalid = !!invalid;
+      this.dropHint = { widgetId: widget.id, invalid: !!invalid };
+      if (invalid) return;
+      this.dragState.hasMoved = true;
+      if (isContainer && position === "inside") {
+        this.placeholder = {
+          parentId: widget.id,
+          index: 0
+        };
+        return;
+      }
+      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;
+      }
+      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;
+      }
+      if (targetParent && !targetParent.items) {
+        this.designer.updateWidget(targetParent.id, { items: [] });
+      }
+      const targetList = targetParent ? targetParent.items : this.widgetList;
+      let targetIndex = this.placeholder.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) {
+      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);
+      this.libraryDragActive = true;
+      this.dropHint = { widgetId: ctx.widget && ctx.widget.id, invalid: false };
+      let newPlaceholder;
+      if (ctx.isContainer && ctx.position === "inside") {
+        newPlaceholder = { parentId: ctx.widget.id, index: 0 };
+      } else {
+        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;
+      }
+      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();
+        return;
+      }
+      if (payload.isTemplate) {
+        this.insertTemplateByPlaceholder(payload);
+      } else if (payload.code) {
+        this.insertLibraryWidgetByPlaceholder(payload);
+      }
+      this.resetLibraryDragState();
+    },
+    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;
+        }
+      }
+      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;
+        }
+      }
+      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);
+      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);
+        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) {
+        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;
+        }
+      }
+      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;
+      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;
+        }
+      }
+      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();
+      });
+    }
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer-widget-tree__header" };
+const _hoisted_2 = {
+  ref: "rootList",
+  class: "epx-page-designer-widget-tree__list"
+};
+const _hoisted_3 = { class: "epx-page-designer__template-form-item" };
+const _hoisted_4 = { class: "epx-page-designer__template-form-item" };
+const _hoisted_5 = { class: "epx-page-designer__template-form-item" };
+const _hoisted_6 = {
+  key: 0,
+  class: "epx-page-designer__template-form-item"
+};
+const _hoisted_7 = { class: "dialog-footer" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_page_designer_widget_tree_item = resolveComponent("epx-page-designer-widget-tree-item");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_epx_visual_component_library_dialog = resolveComponent("epx-visual-component-library-dialog");
+  const _component_el_dialog = resolveComponent("el-dialog");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_epx_photo = resolveComponent("epx-photo");
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["epx-page-designer-widget-tree", { "is-dragging": $data.dragState && !!$data.dragState.widget }])
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("span", null, toDisplayString(_ctx.$t("Outline of the component")), 1),
+      createElementVNode("i", {
+        class: "el-icon-close",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+      })
+    ]),
+    createElementVNode("div", {
+      class: "epx-page-designer-widget-tree__container",
+      onDragenter: _cache[8] || (_cache[8] = (...args) => $options.onTreeDragEnter && $options.onTreeDragEnter(...args)),
+      onDragover: _cache[9] || (_cache[9] = (...args) => $options.onTreeDragOver && $options.onTreeDragOver(...args)),
+      onDragleave: _cache[10] || (_cache[10] = (...args) => $options.onTreeDragLeave && $options.onTreeDragLeave(...args)),
+      onDrop: _cache[11] || (_cache[11] = (...args) => $options.onTreeDrop && $options.onTreeDrop(...args))
+    }, [
+      createElementVNode("ul", _hoisted_2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.widgetList, (widget, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: widget.id
+          }, [
+            $options.showRootPlaceholderAt(index) ? (openBlock(), createElementBlock("li", {
+              key: 0,
+              class: "epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder",
+              onDragover: _cache[1] || (_cache[1] = withModifiers((...args) => $options.onPlaceholderDragOver && $options.onPlaceholderDragOver(...args), ["prevent"])),
+              onDragenter: _cache[2] || (_cache[2] = (...args) => $options.onPlaceholderDragEnter && $options.onPlaceholderDragEnter(...args)),
+              onDrop: _cache[3] || (_cache[3] = withModifiers((...args) => $options.onTreeDrop && $options.onTreeDrop(...args), ["prevent"]))
+            }, [..._cache[19] || (_cache[19] = [
+              createElementVNode("div", { class: "epx-page-designer-widget-tree-item__placeholder-box" }, null, -1)
+            ])], 32)) : createCommentVNode("", true),
+            createVNode(_component_epx_page_designer_widget_tree_item, {
+              designer: $props.designer,
+              widget,
+              level: 0,
+              "parent-widget": null,
+              index,
+              "dragging-id": $data.dragState && $data.dragState.widget && $data.dragState.widget.id,
+              placeholder: $data.placeholder,
+              "drop-hint": $data.dropHint,
+              onAdd: $options.openAddDialog,
+              onAddTemplate: $options.openTemplateDialog,
+              onDragStart: $options.handleItemDragStart,
+              onHoverForDrop: $options.handleItemHoverForDrop,
+              onDragEnd: $options.handleItemDragEnd,
+              onLibraryHoverForDrop: $options.handleLibraryHoverForDrop,
+              onLibraryDrop: $options.handleLibraryDrop
+            }, null, 8, ["designer", "widget", "index", "dragging-id", "placeholder", "drop-hint", "onAdd", "onAddTemplate", "onDragStart", "onHoverForDrop", "onDragEnd", "onLibraryHoverForDrop", "onLibraryDrop"])
+          ], 64);
+        }), 128)),
+        $options.showRootPlaceholderAt($options.widgetList.length) ? (openBlock(), createElementBlock("li", {
+          key: "root-placeholder-end",
+          class: "epx-page-designer-widget-tree-item epx-page-designer-widget-tree-item--placeholder",
+          onDragover: _cache[4] || (_cache[4] = withModifiers((...args) => $options.onPlaceholderDragOver && $options.onPlaceholderDragOver(...args), ["prevent"])),
+          onDragenter: _cache[5] || (_cache[5] = (...args) => $options.onPlaceholderDragEnter && $options.onPlaceholderDragEnter(...args)),
+          onDrop: _cache[6] || (_cache[6] = withModifiers((...args) => $options.onTreeDrop && $options.onTreeDrop(...args), ["prevent"]))
+        }, [..._cache[20] || (_cache[20] = [
+          createElementVNode("div", { class: "epx-page-designer-widget-tree-item__placeholder-box" }, null, -1)
+        ])], 32)) : createCommentVNode("", true)
+      ], 512),
+      createVNode(_component_el_button, {
+        class: "epx-page-designer-widget-tree__add root",
+        type: "primary",
+        size: "default",
+        onClick: _cache[7] || (_cache[7] = withModifiers(($event) => $options.openAddDialog(null), ["stop"]))
+      }, {
+        default: withCtx(() => [
+          createTextVNode("+ " + toDisplayString(_ctx.$t("new add component")), 1)
+        ]),
+        _: 1
+      })
+    ], 32),
+    createVNode(_component_el_dialog, {
+      title: _ctx.$t("Page Component Query"),
+      "model-value": !!$data.showModal,
+      width: "960px",
+      "append-to-body": "",
+      onClose: _cache[12] || (_cache[12] = ($event) => {
+        $data.showModal = false;
+        _ctx.addToParentWidget = null;
+      })
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_epx_visual_component_library_dialog, { onClick: $options.addComponent }, null, 8, ["onClick"])
+      ]),
+      _: 1
+    }, 8, ["title", "model-value"]),
+    createVNode(_component_el_dialog, {
+      title: "保存模板",
+      "model-value": !!$data.showTemplateModal,
+      width: "520px",
+      "append-to-body": "",
+      onClose: _cache[18] || (_cache[18] = ($event) => $data.showTemplateModal = false)
+    }, {
+      footer: withCtx(() => [
+        createElementVNode("div", _hoisted_7, [
+          createVNode(_component_el_button, {
+            onClick: _cache[17] || (_cache[17] = ($event) => $data.showTemplateModal = false)
+          }, {
+            default: withCtx(() => [..._cache[27] || (_cache[27] = [
+              createTextVNode("取 消", -1)
+            ])]),
+            _: 1
+          }),
+          createVNode(_component_el_button, {
+            type: "primary",
+            onClick: $options.saveAsTemplate
+          }, {
+            default: withCtx(() => [..._cache[28] || (_cache[28] = [
+              createTextVNode("确 定", -1)
+            ])]),
+            _: 1
+          }, 8, ["onClick"])
+        ])
+      ]),
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_3, [
+          _cache[21] || (_cache[21] = createElementVNode("label", { for: "" }, "模板编号:", -1)),
+          createVNode(_component_el_input, {
+            size: "default",
+            modelValue: $data.template.ID,
+            "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => $data.template.ID = $event)
+          }, null, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          _cache[22] || (_cache[22] = createElementVNode("label", { for: "" }, "模板名称:", -1)),
+          createVNode(_component_el_input, {
+            size: "default",
+            modelValue: $data.template.NAME,
+            "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => $data.template.NAME = $event)
+          }, null, 8, ["modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          _cache[23] || (_cache[23] = createElementVNode("label", { for: "" }, "缩略图:", -1)),
+          createVNode(_component_epx_photo, {
+            modelValue: $data.template.PICTURE,
+            "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => $data.template.PICTURE = $event),
+            fieldConfigs: { attriName: "PICTURE", attriLabel: "缩略图", state: "EDIT" }
+          }, null, 8, ["modelValue"])
+        ]),
+        _ctx.clientConfig.CODE === "frame" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          _cache[26] || (_cache[26] = createElementVNode("label", { for: "" }, "应用级别:", -1)),
+          createVNode(_component_el_radio_group, {
+            modelValue: $data.template.LEVEL,
+            "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => $data.template.LEVEL = $event)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_radio, {
+                label: "01",
+                value: "01"
+              }, {
+                default: withCtx(() => [..._cache[24] || (_cache[24] = [
+                  createTextVNode("平台级", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_el_radio, {
+                label: "03",
+                value: "03"
+              }, {
+                default: withCtx(() => [..._cache[25] || (_cache[25] = [
+                  createTextVNode("系统级", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }, 8, ["model-value"])
+  ], 2);
+}
+const WidgetTree = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  WidgetTree as default
+};