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

package/dist/src/page-designer/PageDesigner.js

@@ -0,0 +1,843 @@
+import { __vitePreload as __epxPackagePreload } from "../../_virtual/preload-helper.js";
+import { mapGetters, mapState } from "vuex";
+import { createDesigner, getWidgetChildren } from "./designer.js";
+import TemplateAttributePanel from "./template-attribute-panel/TemplateAttributePanel.js";
+import "@epxing/core/src/runtime-utils/util";
+import "@epxing/core/src/app";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, createTextVNode, createBlock, withDirectives, vShow, normalizeStyle } from "vue";
+/* empty css                            */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+/* empty css                           */
+/* empty css                               */
+/* empty css                             */
+/* empty css                               */
+/* empty css                                 */
+import HoverOverlay from "./widget-preview/HoverOverlay.js";
+import SelectedOverlay from "./widget-preview/SelectedOverlay.js";
+import DropZoneOverlay from "./widget-preview/DropZoneOverlay.js";
+import DragGhost from "./widget-preview/DragGhost.js";
+/* empty css                 */
+const _sfc_main = {
+  name: "epx-page-designer",
+  components: {
+    TemplateAttributePanel,
+    "epx-page-designer-selected-overlay": SelectedOverlay,
+    "epx-page-designer-hover-overlay": HoverOverlay,
+    "epx-page-designer-drag-zone-overlay": DropZoneOverlay,
+    "epx-page-designer-drag-ghost": DragGhost
+  },
+  props: {
+    newWindow: Boolean,
+    inline: Boolean,
+    initConfig: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      designer: createDesigner(this),
+      showPanel: "",
+      allWidgets: [],
+      loadVisualComponent: false,
+      templateInfo: {},
+      componentInfo: {},
+      relationList: [],
+      screenWidth: 1920,
+      scaleRatio: 1,
+      terminal: "pc",
+      selectedWidgetData: {
+        widget: null,
+        element: null,
+        parentWidget: null
+      },
+      hoverWidgetData: {
+        widget: null,
+        element: null,
+        parentWidget: null
+      },
+      // 悬浮窗位置更新节流
+      dragGhostUpdateTimer: null
+    };
+  },
+  computed: {
+    ...mapState({
+      showMenu: (state) => state.config.showMenu,
+      showAppNav: (state) => state.config.showAppNav,
+      mobileWidth: (state) => state.config.mobileWidth
+    }),
+    ...mapGetters([
+      "getPageById"
+    ]),
+    currentPage() {
+      if (this.initConfig) {
+        return this._initPageObj || {};
+      }
+      const page = this.getPageById(this.$query.id);
+      return page || {};
+    },
+    previewStyle() {
+      if (this.terminal === "mobile") {
+        return {
+          width: "375px",
+          height: "calc(100% - 32px)",
+          margin: "16px auto",
+          boxShadow: "0 2px 10px 0 rgba(31,56,88,.15)"
+        };
+      }
+      return {
+        flexShrink: 0,
+        width: this.screenWidth + "px",
+        transform: `scale(${this.scaleRatio})`,
+        transformOrigin: "top left",
+        height: (100 / this.scaleRatio).toFixed(4) + "%"
+      };
+    },
+    insertLineStyle() {
+      const line = this.designer.dragInsertLine;
+      if (!line) return {};
+      return {
+        position: "fixed",
+        top: line.top - 2 + "px",
+        left: line.left + "px",
+        width: line.width + "px",
+        height: "4px",
+        pointerEvents: "none",
+        zIndex: 10001
+      };
+    },
+    // 从 designer 获取拖拽状态
+    dragGhost() {
+      const state = this.designer.dragState;
+      return {
+        visible: state.ghostVisible,
+        title: state.ghostTitle,
+        icon: state.ghostIcon,
+        position: state.ghostPosition
+      };
+    }
+  },
+  watch: {
+    terminal: {
+      handler(val) {
+        this.designer.terminal = val;
+      },
+      immediate: true
+    },
+    "designer.selectedWidget"(newWidget) {
+      if (!newWidget) {
+        this.selectedWidgetData = {
+          widget: null,
+          element: null,
+          parentWidget: null
+        };
+        return;
+      }
+      this.$nextTick(() => {
+        const element = document.querySelector(`[data-widget-id="${newWidget.id}"]`);
+        if (element) {
+          const parentWidget = this.designer.findParentWidget(newWidget.id);
+          this.selectedWidgetData = {
+            widget: newWidget,
+            element,
+            parentWidget: parentWidget || null
+          };
+        } else {
+          this.selectedWidgetData = {
+            widget: null,
+            element: null,
+            parentWidget: null
+          };
+        }
+      });
+    }
+  },
+  methods: {
+    // 统一响应 designer 发出的 hover-change 事件
+    handleDesignerHoverChange(data) {
+      const { widget, parentWidget } = data || {};
+      if (!widget) {
+        this.hoverWidgetData = {
+          widget: null,
+          element: null,
+          parentWidget: null
+        };
+        return;
+      }
+      this.$nextTick(() => {
+        const element = document.querySelector(`[data-widget-id="${widget.id}"]`);
+        if (element) {
+          this.hoverWidgetData = {
+            widget,
+            element,
+            parentWidget: parentWidget || null
+          };
+        } else {
+          this.hoverWidgetData = {
+            widget: null,
+            element: null,
+            parentWidget: null
+          };
+        }
+      });
+    },
+    handleWidgetClick(data) {
+      this.selectedWidgetData = {
+        widget: data.widget,
+        element: data.element,
+        parentWidget: data.parentWidget
+      };
+    },
+    handleDragStart(data) {
+      const { widget, title, icon, x, y, source } = data || {};
+      if (widget || title) {
+        this.designer.startDrag({
+          source: source || "library",
+          data: widget,
+          title: title || (widget == null ? void 0 : widget.title) || "",
+          icon: icon || "",
+          x: x || 0,
+          y: y || 0,
+          isNative: true
+        });
+      }
+    },
+    handleDragMove(data) {
+      if (this.designer.dragState.isDragging && data) {
+        this.designer.updateDragGhostPosition(data.x || 0, data.y || 0);
+      }
+    },
+    handleDragEnd() {
+      this.designer.endDrag();
+    },
+    handleDocumentDragOver(e) {
+      if (e && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+      if (this.designer.dragState.isDragging && !this.dragGhostUpdateTimer) {
+        this.dragGhostUpdateTimer = requestAnimationFrame(() => {
+          this.designer.updateDragGhostPosition(e.clientX, e.clientY);
+          this.dragGhostUpdateTimer = null;
+        });
+      }
+    },
+    handleDocumentDragEnd() {
+      this.handleDragEnd();
+    },
+    handleDocumentDrop(e) {
+      if (this.designer.dragState.isDragging) {
+        this.handleDragEnd();
+      }
+    },
+    // 使用鼠标事件模拟拖拽移动和结束，避免依赖原生 drag 事件
+    handleDocumentMouseMove(e) {
+      if (!this.designer.dragState.isDragging) return;
+      this.designer.updateDragGhostPosition(e.clientX, e.clientY);
+    },
+    handleDocumentMouseUp() {
+      if (this.designer.dragState.isNativeDragging) return;
+      if (!this.designer.dragState.isDragging) return;
+      this.handleDragEnd();
+    },
+    getPage() {
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage);
+      }
+      return this.$store.dispatch({
+        type: "ADD_PAGE",
+        pageId: this.$query.id
+      });
+    },
+    getTemplate() {
+      return this.$http.get({
+        entityId: "FM_TEMPLATE",
+        id: this.$query.id
+      });
+    },
+    async initDesigner() {
+      this.designer.openPanel = (v) => {
+        this.showPanel = v;
+      };
+      if (this.initConfig) {
+        const { config, title, metaId } = this.initConfig;
+        this._initPageObj = { config, title, metaId, pageId: "_preview_" };
+        this.designer.loadFormJson({ config, title, metaId });
+        if (metaId) this.getEntityRelation();
+        return;
+      }
+      if (this.$query.configType === "component") {
+        await this.getComponentListPromise;
+        const component = this.designer.allWidgets.find((item) => item.ID === this.$query.id);
+        if (component) {
+          this.componentInfo = component;
+          const config = component.CONTENT ? JSON.parse(component.CONTENT) : {};
+          this.designer.loadFormJson({ isComponent: true, config });
+        }
+      } else if (this.$query.template === "1") {
+        this.getTemplate().then((data) => {
+          const template = data.data;
+          this.templateInfo = template;
+          const config = JSON.parse(template.CONTENT || "{}");
+          if (!config.version) config.version = this.designer.version;
+          this.designer.loadFormJson({ isTemplate: true, config });
+        });
+      } else {
+        this.getPage().then((page) => {
+          this.designer.loadFormJson(this.$_.cloneDeep(page));
+          this.getEntityRelation();
+        });
+      }
+    },
+    getComponentList() {
+      this.getComponentListPromise = this.$http.list({
+        action: "listWithVariables",
+        entityId: "FM_PAGE",
+        "scope.TYPE": "01",
+        order_field: "ORDER_NUM",
+        order_mode: "asc",
+        scopeParams: JSON.stringify([{ lb: "(", field: "LEVEL", values: "01", link: "or" }, { field: "SYSTEM", values: this.SYSTEM || this.appConfig["SYSTEM|ID"], rb: ")" }])
+      }).then((data) => {
+        const componentList = data.entitys;
+        componentList.forEach((item) => {
+          const visualComponentName = this.getVisualComponent(item);
+          item.visualComponentName = visualComponentName;
+        });
+        this.designer.initWidgetList(componentList);
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    getTemplateLibrary() {
+      const scopeParams = [
+        {
+          field: "TYPE",
+          values: "01"
+        },
+        {
+          lb: "(",
+          field: "LEVEL",
+          values: "01",
+          link: "or"
+        },
+        {
+          field: "SYSTEM",
+          values: this.SYSTEM,
+          rb: ")"
+        }
+      ];
+      this.$http.$post({
+        action: "list",
+        entityId: "FM_TEMPLATE",
+        scopeParams: JSON.stringify(scopeParams)
+      }).then((data) => {
+        this.designer.initTemplateLibrary(data.entitys);
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    getVisualComponent(component) {
+      if (component && component.VISUAL_CONFIG_PATH) {
+        let pathName = "";
+        const pagePath = component.VISUAL_CONFIG_PATH;
+        const rootMatch = pagePath.match(/^@\/(frame\/|product\/|project\/)?/);
+        if (rootMatch) {
+          pathName = pagePath.split(rootMatch[0])[1].replace(".vue", "");
+        }
+        const componentPath = pathName.replace("views/", "").replace("components/", "").replace("packages/", "").replace(/\//g, "-").replace(/(\w)([A-Z])/g, "$1-$2").toLowerCase();
+        const componentName = componentPath;
+        return componentName;
+      }
+      return null;
+    },
+    getEntityRelation() {
+      this.$http.$get({
+        entityId: "FM_ENTITY_RELATION",
+        action: "getEntityRelationTree",
+        mainEntity: this.currentPage.metaId
+      }).then((data) => {
+        data.forEach((relation) => {
+          relation.label = relation.title;
+          relation.value = relation.flag;
+          relation.children = relation.childrens;
+          if (relation.childrens) {
+            relation.childrens.forEach((childRelation) => {
+              childRelation.value = relation.flag + "#" + childRelation.flag;
+              childRelation.label = childRelation.title;
+            });
+          }
+        });
+        this.relationList = data;
+      });
+    },
+    openContnetWidthObserver() {
+      const getEl = () => {
+        const ref = this.$refs.previewContainer;
+        if (!ref) return null;
+        return ref.$el || (ref.nodeType === 1 ? ref : null);
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        const el = getEl();
+        if (!el) return;
+        this.screenWidth = document.documentElement.offsetWidth;
+        this.scaleRatio = el.clientWidth / document.documentElement.offsetWidth;
+      });
+      let tries = 0;
+      const attach = () => {
+        if (this.observerDetached) return;
+        const el = getEl();
+        if (el) {
+          resizeObserver.observe(el);
+          return;
+        }
+        if (tries++ < 300) requestAnimationFrame(attach);
+      };
+      attach();
+      return resizeObserver;
+    },
+    back() {
+      if (this.initConfig) {
+        this.$emit("close");
+        return;
+      }
+      if (this.newWindow) {
+        window.close();
+      } else if (this.$query.isObjectDetail) {
+        this.backPage();
+      } else {
+        this.backPage({ reload: true });
+      }
+    },
+    pageSetting() {
+      this.designer.clearSelected();
+    },
+    saveTemplate(config) {
+      this.isSavePage = true;
+      this.$http.update({
+        entityId: "FM_TEMPLATE",
+        "bean.ID": this.$query.id,
+        "bean.CONTENT": JSON.stringify(config, null, "	")
+      }).then((data) => {
+        this.isSavePage = false;
+        this.$message.success(this.$t("save successfully"));
+      }).catch((err) => {
+        this.isSavePage = false;
+        this.$message.error(err.message || this.$t("fail to save"));
+      });
+    },
+    saveCustomComponent(config) {
+      this.isSavePage = true;
+      this.$http.update({
+        entityId: "FM_PAGE",
+        "bean.ID": this.$query.id,
+        "bean.CONTENT": JSON.stringify(config, null, "	")
+      }).then((data) => {
+        this.isSavePage = false;
+        this.$message.success(this.$t("save successfully"));
+      }).catch((err) => {
+        this.isSavePage = false;
+        this.$message.error(err.message || this.$t("fail to save"));
+      });
+    },
+    async saveConfigs() {
+      if (this.isSavePage) return;
+      const { version, pageConfig: globalConfig, widgetList, widgetConfig } = this.designer;
+      for (const key in globalConfig) {
+        if (globalConfig[key] === null) delete globalConfig[key];
+      }
+      for (const key in widgetConfig) {
+        const config = widgetConfig[key];
+        for (const configKey in config) {
+          if (configKey === "span" || configKey === "componentName" || configKey === "flex") {
+            delete config[configKey];
+          }
+        }
+      }
+      const formatWidget = (arr) => {
+        arr.forEach((item) => {
+          for (const key in item) {
+            if (item[key] === null) delete item[key];
+          }
+          const children = getWidgetChildren(item);
+          if (children.length > 0) {
+            formatWidget(children);
+          }
+        });
+      };
+      formatWidget(widgetList);
+      const pageConfig = {
+        version,
+        ...globalConfig,
+        items: widgetList,
+        itemConfigs: widgetConfig
+      };
+      if (pageConfig.JS) {
+        await __epxPackagePreload(() => import(
+          /* webpackChunkName: "standalone" */
+          "@babel/standalone"
+        ), true ? [] : void 0, import.meta.url).then((babel) => {
+          const es5 = babel.transform(pageConfig.JS, {
+            presets: ["es2015"]
+          });
+          pageConfig.compileJS = es5.code;
+          for (const key in pageConfig) {
+            if (pageConfig[key] === null) {
+              delete pageConfig[key];
+            }
+          }
+        });
+      }
+      if (this.designer.mode === "template") {
+        return this.saveTemplate(pageConfig);
+      } else if (this.designer.mode === "component") {
+        return this.saveCustomComponent(pageConfig);
+      }
+      this.savePageConfigs(pageConfig);
+    },
+    savePageConfigs(pageConfig) {
+      if (this.initConfig) {
+        this.$emit("save", pageConfig);
+        this.$message.success(this.$t("save successfully"));
+        return;
+      }
+      this.isSavePage = true;
+      this.$http.update({
+        entityId: "FM_PAGE_CONFIG",
+        "bean.ID": this.$query.id,
+        "bean.CONTENT": JSON.stringify(pageConfig, null, "	")
+      }).then((data) => {
+        this.isSavePage = false;
+        this.$message.success(this.$t("save successfully"));
+        if (this.newWindow) {
+          if (window.opener) window.opener.postMessage({ pageId: this.$query.id, type: "configPage" }, "/");
+        } else {
+          this.$store.commit("DELETE_PAGE", { pageId: this.$query.id });
+          this.$store.dispatch("ADD_PAGE", { pageId: this.$query.id });
+        }
+      }).catch((err) => {
+        this.isSavePage = false;
+        this.$message.error(err.message || this.$t("fail to save"));
+      });
+    }
+  },
+  created() {
+    this.initMobileWidth = this.mobileWidth;
+    if (this.showMenu) {
+      this.changeMenuFlag = true;
+      this.$store.commit("SWITCH_MENU_SHOW", false);
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true;
+      this.$store.commit("SWITCH_APP_NAV_SHOW", false);
+    }
+    __epxPackagePreload(() => import("../visual/index.js"), true ? [] : void 0, import.meta.url).then(() => {
+      this.loadVisualComponent = true;
+    });
+    this.getComponentList();
+    this.initDesigner();
+    if (this.designer && typeof this.designer.handleEvent === "function") {
+      this.designer.handleEvent("hover-change", this.handleDesignerHoverChange);
+      this.designer.handleEvent("close-left-panel", () => {
+        this.showPanel = "";
+      });
+    }
+    this.getTemplateLibrary();
+  },
+  mounted() {
+    if (this.designer && this.designer.vueInstance) {
+      this.designer.handleEvent("widget-click", this.handleWidgetClick);
+      this.designer.handleEvent("drag-start", this.handleDragStart);
+      this.designer.handleEvent("drag-move", this.handleDragMove);
+      this.designer.handleEvent("drag-end", this.handleDragEnd);
+    }
+    document.addEventListener("mousemove", this.handleDocumentMouseMove);
+    document.addEventListener("mouseup", this.handleDocumentMouseUp);
+    document.addEventListener("dragover", this.handleDocumentDragOver);
+    document.addEventListener("dragend", this.handleDocumentDragEnd);
+    document.addEventListener("drop", this.handleDocumentDrop);
+    if (window.opener) {
+      this._openerMessageHandler = (event) => {
+        if (event.data === "CLOSE_WINDOW") window.close();
+      };
+      window.opener.addEventListener("message", this._openerMessageHandler);
+    }
+    this.resizeObserver = this.openContnetWidthObserver();
+    if (this.$route.query.terminal === "mobile") {
+      this.terminal = "mobile";
+    }
+  },
+  beforeUnmount() {
+    if (this.designer && this.designer.vueInstance) {
+      this.designer.offEvent("widget-click", this.handleWidgetClick);
+      this.designer.offEvent("drag-start", this.handleDragStart);
+      this.designer.offEvent("drag-move", this.handleDragMove);
+      this.designer.offEvent("drag-end", this.handleDragEnd);
+    }
+    document.removeEventListener("mousemove", this.handleDocumentMouseMove);
+    document.removeEventListener("mouseup", this.handleDocumentMouseUp);
+    document.removeEventListener("dragover", this.handleDocumentDragOver);
+    document.removeEventListener("dragend", this.handleDocumentDragEnd);
+    document.removeEventListener("drop", this.handleDocumentDrop);
+    if (this.changeMenuFlag) {
+      this.$store.commit("SWITCH_MENU_SHOW", true);
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit("SWITCH_APP_NAV_SHOW", true);
+    }
+    this.observerDetached = true;
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+    if (window.opener && this._openerMessageHandler) window.opener.removeEventListener("message", this._openerMessageHandler);
+    if (this.designer && typeof this.designer.dispose === "function") this.designer.dispose();
+    this.$store.commit("SET_MOBILE_WIDTH", this.initMobileWidth);
+  }
+};
+const _hoisted_1 = { class: "epx-page-designer__header" };
+const _hoisted_2 = { class: "epx-page-designer__header-left" };
+const _hoisted_3 = { class: "epx-page-designer__header-content" };
+const _hoisted_4 = { class: "epx-page-designer__header-subtitle" };
+const _hoisted_5 = { class: "epx-page-designer__header-title" };
+const _hoisted_6 = { class: "epx-page-designer__header-center" };
+const _hoisted_7 = { class: "epx-page-designer__header-operate" };
+const _hoisted_8 = { class: "epx-page-designer__function-panel" };
+const _hoisted_9 = { class: "epx-page-designer__function-tabs" };
+const _hoisted_10 = { class: "epx-page-designer__setting-panel" };
+const _hoisted_11 = {
+  key: 0,
+  class: "epx-page-designer__floating-tree"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_epx_page_designer_widget_tree = resolveComponent("epx-page-designer-widget-tree");
+  const _component_epx_page_designer_widget_library_base = resolveComponent("epx-page-designer-widget-library-base");
+  const _component_epx_page_designer_widget_library = resolveComponent("epx-page-designer-widget-library");
+  const _component_epx_page_designer_template_library = resolveComponent("epx-page-designer-template-library");
+  const _component_epx_js_panel = resolveComponent("epx-js-panel");
+  const _component_el_drawer = resolveComponent("el-drawer");
+  const _component_epx_page_designer_page_variable_panel = resolveComponent("epx-page-designer-page-variable-panel");
+  const _component_template_attribute_panel = resolveComponent("template-attribute-panel");
+  const _component_epx_page_designer_widget_preview = resolveComponent("epx-page-designer-widget-preview");
+  const _component_epx_page_designer_selected_overlay = resolveComponent("epx-page-designer-selected-overlay");
+  const _component_epx_page_designer_hover_overlay = resolveComponent("epx-page-designer-hover-overlay");
+  const _component_epx_page_designer_drag_zone_overlay = resolveComponent("epx-page-designer-drag-zone-overlay");
+  const _component_epx_page_designer_drag_ghost = resolveComponent("epx-page-designer-drag-ghost");
+  const _component_el_container = resolveComponent("el-container");
+  const _component_epx_page_designer_setting_panel = resolveComponent("epx-page-designer-setting-panel");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["epx-page-designer", { "epx-page-designer--new-window": $props.newWindow || $props.inline }])
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("i", {
+          class: "el-icon-arrow-left",
+          onClick: _cache[0] || (_cache[0] = (...args) => $options.back && $options.back(...args))
+        }),
+        createElementVNode("p", _hoisted_3, [
+          createElementVNode("span", _hoisted_4, toDisplayString($data.designer.mode === "component" ? "正在编辑自定义组件" : $data.designer.mode === "template" ? "正在编辑模板" : _ctx.$t("Editing the page")) + "：", 1),
+          createElementVNode("span", _hoisted_5, toDisplayString($options.currentPage.title || $data.templateInfo.NAME || $data.componentInfo.TITLE), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_6, [
+        createElementVNode("i", {
+          class: normalizeClass(["el-icon-monitor", { "is-active": $data.terminal === "pc" }]),
+          onClick: _cache[1] || (_cache[1] = ($event) => $data.terminal = "pc")
+        }, null, 2),
+        createElementVNode("i", {
+          class: normalizeClass(["el-icon-mobile", { "is-active": $data.terminal === "mobile" }]),
+          onClick: _cache[2] || (_cache[2] = ($event) => $data.terminal = "mobile")
+        }, null, 2)
+      ]),
+      createElementVNode("div", _hoisted_7, [
+        $data.designer.mode === "page" ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          class: "epx-page-designer__header-operate-item",
+          onClick: _cache[3] || (_cache[3] = (...args) => $options.pageSetting && $options.pageSetting(...args))
+        }, toDisplayString(_ctx.$t("page setup")), 1)) : createCommentVNode("", true),
+        createVNode(_component_el_button, {
+          type: "primary",
+          size: "default",
+          onClick: $options.saveConfigs
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.$t("save")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ])
+    ]),
+    createVNode(_component_el_container, { class: "epx-page-designer__container" }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_8, [
+          createElementVNode("ul", _hoisted_9, [
+            createElementVNode("li", {
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "baseComponentLibrary" }),
+              onClick: _cache[4] || (_cache[4] = ($event) => $data.showPanel = "baseComponentLibrary")
+            }, [..._cache[19] || (_cache[19] = [
+              createElementVNode("i", { class: "epx-icon-yingyong" }, null, -1),
+              createElementVNode("span", null, "组件库", -1)
+            ])], 2),
+            createElementVNode("li", {
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "componentLibrary" }),
+              onClick: _cache[5] || (_cache[5] = ($event) => $data.showPanel = "componentLibrary")
+            }, [..._cache[20] || (_cache[20] = [
+              createElementVNode("i", { class: "el-icon-files" }, null, -1),
+              createElementVNode("span", null, "其它组件", -1)
+            ])], 2),
+            $data.designer.mode !== "template" ? (openBlock(), createElementBlock("li", {
+              key: 0,
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "templateLibrary" }),
+              onClick: _cache[6] || (_cache[6] = ($event) => $data.showPanel = "templateLibrary")
+            }, [..._cache[21] || (_cache[21] = [
+              createElementVNode("i", { class: "epx-icon-moban" }, null, -1),
+              createElementVNode("span", null, "模板库", -1)
+            ])], 2)) : createCommentVNode("", true),
+            createElementVNode("li", {
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "selectComponent" }),
+              onClick: _cache[7] || (_cache[7] = ($event) => $data.showPanel = "selectComponent")
+            }, [..._cache[22] || (_cache[22] = [
+              createElementVNode("i", { class: "epx-icon-dagang" }, null, -1),
+              createElementVNode("span", null, "大纲", -1)
+            ])], 2),
+            createElementVNode("li", {
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "jsPanel" }),
+              onClick: _cache[8] || (_cache[8] = ($event) => $data.showPanel = "jsPanel")
+            }, [..._cache[23] || (_cache[23] = [
+              createElementVNode("i", { class: "epx-icon-js" }, null, -1),
+              createElementVNode("span", null, "页面JS", -1)
+            ])], 2),
+            $data.designer.mode === "page" ? (openBlock(), createElementBlock("li", {
+              key: 1,
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "pageVariable" }),
+              onClick: _cache[9] || (_cache[9] = ($event) => $data.showPanel = "pageVariable")
+            }, [..._cache[24] || (_cache[24] = [
+              createElementVNode("i", { class: "el-icon-document" }, null, -1),
+              createElementVNode("span", null, "变量", -1)
+            ])], 2)) : createCommentVNode("", true),
+            $data.designer.mode === "template" || $data.designer.mode === "component" ? (openBlock(), createElementBlock("li", {
+              key: 2,
+              class: normalizeClass({ "epx-page-designer__function-tabs-item": true, "is-active": $data.showPanel === "templateAttribute" }),
+              onClick: _cache[10] || (_cache[10] = ($event) => $data.showPanel = "templateAttribute")
+            }, [..._cache[25] || (_cache[25] = [
+              createElementVNode("i", { class: "el-icon-setting" }, null, -1),
+              createElementVNode("span", null, "参数", -1)
+            ])], 2)) : createCommentVNode("", true)
+          ]),
+          $data.showPanel === "selectComponent" ? (openBlock(), createBlock(_component_epx_page_designer_widget_tree, {
+            key: 0,
+            designer: $data.designer,
+            onClose: _cache[11] || (_cache[11] = ($event) => $data.showPanel = null)
+          }, null, 8, ["designer"])) : createCommentVNode("", true),
+          withDirectives(createVNode(_component_epx_page_designer_widget_library_base, {
+            designer: $data.designer,
+            onClose: _cache[12] || (_cache[12] = ($event) => $data.showPanel = null)
+          }, null, 8, ["designer"]), [
+            [vShow, $data.showPanel === "baseComponentLibrary"]
+          ]),
+          withDirectives(createVNode(_component_epx_page_designer_widget_library, {
+            designer: $data.designer,
+            onClose: _cache[13] || (_cache[13] = ($event) => $data.showPanel = null)
+          }, null, 8, ["designer"]), [
+            [vShow, $data.showPanel === "componentLibrary"]
+          ]),
+          withDirectives(createVNode(_component_epx_page_designer_template_library, {
+            designer: $data.designer,
+            onClose: _cache[14] || (_cache[14] = ($event) => $data.showPanel = null)
+          }, null, 8, ["designer"]), [
+            [vShow, $data.showPanel === "templateLibrary"]
+          ]),
+          createVNode(_component_el_drawer, {
+            title: _ctx.$t("Page JS"),
+            class: "epx-page-designer__js-drawer",
+            "model-value": $data.showPanel === "jsPanel",
+            "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => $data.showPanel = null),
+            direction: "ltr",
+            size: "600px",
+            modal: false
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_epx_js_panel, {
+                value: $data.designer.pageConfig.JS,
+                onChange: _cache[15] || (_cache[15] = (v) => $data.designer.updatePageConfig({ JS: v }))
+              }, null, 8, ["value"])
+            ]),
+            _: 1
+          }, 8, ["title", "model-value"]),
+          $data.showPanel === "pageVariable" ? (openBlock(), createBlock(_component_epx_page_designer_page_variable_panel, {
+            key: 1,
+            designer: $data.designer,
+            onClose: _cache[17] || (_cache[17] = ($event) => $data.showPanel = null)
+          }, null, 8, ["designer"])) : createCommentVNode("", true),
+          $data.designer.mode === "template" || $data.designer.mode === "component" ? withDirectives((openBlock(), createBlock(_component_template_attribute_panel, {
+            key: 2,
+            designer: $data.designer,
+            templateInfo: $data.designer.mode === "component" ? $data.componentInfo : $data.templateInfo,
+            onClose: _cache[18] || (_cache[18] = ($event) => $data.showPanel = null)
+          }, null, 8, ["designer", "templateInfo"])), [
+            [vShow, $data.showPanel === "templateAttribute"]
+          ]) : createCommentVNode("", true)
+        ]),
+        createVNode(_component_el_container, {
+          ref: "previewContainer",
+          class: "epx-page-designer__content"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_epx_page_designer_widget_preview, {
+              style: normalizeStyle($options.previewStyle),
+              designer: $data.designer,
+              pageRelationList: $data.relationList,
+              terminal: $data.terminal
+            }, null, 8, ["style", "designer", "pageRelationList", "terminal"]),
+            createVNode(_component_epx_page_designer_selected_overlay, {
+              designer: $data.designer,
+              widget: $data.selectedWidgetData.widget,
+              "target-element": $data.selectedWidgetData.element,
+              visible: !!$data.selectedWidgetData.widget,
+              "parent-widget": $data.selectedWidgetData.parentWidget
+            }, null, 8, ["designer", "widget", "target-element", "visible", "parent-widget"]),
+            createVNode(_component_epx_page_designer_hover_overlay, {
+              designer: $data.designer,
+              widget: $data.hoverWidgetData.widget,
+              "target-element": $data.hoverWidgetData.element,
+              visible: !!$data.hoverWidgetData.widget
+            }, null, 8, ["designer", "widget", "target-element", "visible"]),
+            createVNode(_component_epx_page_designer_drag_zone_overlay, {
+              designer: $data.designer,
+              "target-element": $data.designer.dragOverTargetElement,
+              visible: !!$data.designer.dragOverTarget
+            }, null, 8, ["designer", "target-element", "visible"]),
+            createVNode(_component_epx_page_designer_drag_ghost, {
+              visible: $options.dragGhost.visible,
+              "widget-title": $options.dragGhost.title,
+              "widget-icon": $options.dragGhost.icon,
+              position: $options.dragGhost.position
+            }, null, 8, ["visible", "widget-title", "widget-icon", "position"]),
+            $data.designer.dragInsertLine ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "epx-page-designer-insert-line",
+              style: normalizeStyle($options.insertLineStyle)
+            }, null, 4)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 512),
+        createElementVNode("div", _hoisted_10, [
+          $data.loadVisualComponent ? (openBlock(), createBlock(_component_epx_page_designer_setting_panel, {
+            key: 0,
+            designer: $data.designer,
+            "selected-widget": $data.designer.selectedWidget,
+            "form-config": $data.designer.formConfig,
+            relationList: $data.relationList
+          }, null, 8, ["designer", "selected-widget", "form-config", "relationList"])) : createCommentVNode("", true)
+        ])
+      ]),
+      _: 1
+    }),
+    $options.dragGhost.visible ? (openBlock(), createElementBlock("div", _hoisted_11, [
+      createVNode(_component_epx_page_designer_widget_tree, {
+        designer: $data.designer,
+        "is-floating": true
+      }, null, 8, ["designer"])
+    ])) : createCommentVNode("", true)
+  ], 2);
+}
+const PageDesigner = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  PageDesigner as default
+};