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

package/dist/src/visual/config-page/VisualConfigPage.js

@@ -0,0 +1,644 @@
+import { __vitePreload as __epxPackagePreload } from "../../../_virtual/preload-helper.js";
+import { mapGetters, mapState } from "vuex";
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, withCtx, createTextVNode, normalizeClass, createBlock, createCommentVNode, withModifiers } from "vue";
+/* empty css                     */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-page",
+  navConfigs: {
+    flag: false
+  },
+  props: {
+    newWindow: Boolean
+  },
+  provide() {
+    const { id } = this.$query;
+    return {
+      pageMetaId: this.currentMetaId,
+      pageId: id,
+      pageConfigs: this.page_config,
+      getPageMetaId: () => this.currentMetaId,
+      getAllComponentList: () => this.componentList,
+      getItemConfigs: () => this.allComponentConfigs,
+      getDefaultContainerItems: () => this.defaultContainerItems,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      changeItemConfigs: this.changeItemConfigs,
+      deleteItemConfigs: this.deleteItemConfigs
+    };
+  },
+  data() {
+    return {
+      componentList: [],
+      selectComponentList: [],
+      selectComponent: null,
+      showPanel: "selectComponent",
+      pageGlobalConfigs: {},
+      allComponentConfigs: {},
+      pageMetaId: null,
+      relationList: [],
+      pageParams: [],
+      scopeConfigs: {},
+      loadComponentList: false
+    };
+  },
+  computed: {
+    ...mapState({
+      showMenu: (state) => state.config.showMenu,
+      showAppNav: (state) => state.config.showAppNav
+    }),
+    ...mapGetters([
+      "getPageById"
+    ]),
+    currentPage() {
+      const page = this.getPageById(this.$query.id);
+      return page || {};
+    },
+    currentMetaId() {
+      return this.$query.entityId || this.pageMetaId;
+    },
+    currentMeta() {
+      return this.metas[this.currentMetaId] || null;
+    },
+    page_config() {
+      const { config = "{}" } = this.$query;
+      if (typeof config === "string") {
+        try {
+          return eval("(" + config + ")");
+        } catch (error) {
+          return {};
+        }
+      }
+      return config;
+    }
+  },
+  methods: {
+    back() {
+      if (this.newWindow) {
+        window.close();
+      } else if (this.$query.isObjectDetail) {
+        this.backPage();
+      } else {
+        this.backPage({ reload: true });
+      }
+    },
+    getPageInfo() {
+      this.getPageId().then((page) => {
+        const { metaId } = page;
+        if (metaId) this.pageMetaId = metaId;
+        this.getMetaId().then(() => {
+          this.getDefaultConfig();
+          this.loadConfig = true;
+        });
+      });
+    },
+    getPageId() {
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage);
+      }
+      return this.$store.dispatch({
+        type: "ADD_PAGE",
+        pageId: this.$query.id
+      });
+    },
+    getMetaId() {
+      if (!this.currentMetaId || this.currentMeta) {
+        return Promise.resolve(this.currentMeta);
+      } else {
+        return this.$store.dispatch({
+          type: "ADD_META",
+          metaId: this.currentMetaId
+        });
+      }
+    },
+    getDefaultConfig() {
+      const { config: pageConfigs = {} } = this.currentPage || {};
+      const { itemConfigs = {}, items = [], ...globalConfigs } = pageConfigs;
+      this.allComponentConfigs = this.$_.cloneDeep(itemConfigs);
+      this.selectComponentList = this.$_.cloneDeep(items);
+      this.pageGlobalConfigs = this.$_.cloneDeep(globalConfigs);
+      this.pageSetting();
+      this.getScopeConfigs();
+      this.getEntityRelation();
+    },
+    getEntityRelation() {
+      this.$http.$get({
+        entityId: "FM_ENTITY_RELATION",
+        action: "getEntityRelationTree",
+        mainEntity: this.currentMetaId
+      }).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;
+      });
+    },
+    /**
+     * 获取查询配置
+     */
+    getScopeConfigs() {
+      this.$http.list({
+        action: "getAllSearchConfig",
+        entityId: "FM_SEARCH_CONFIG"
+      }).then((data) => {
+        this.scopeConfigs = data;
+      });
+    },
+    getComponetName(component) {
+      if (component && component.PATH) {
+        let project = "frame";
+        let pathName = "";
+        const pagePath = component.PATH;
+        const rootMatch = pagePath.match(/^@\/\w+\//);
+        if (rootMatch) {
+          project = rootMatch[0].replace(/[@|/]/g, "");
+          pathName = pagePath.split(rootMatch)[1].replace(".vue", "");
+        }
+        const componentPath = pathName.replace("views/", "").replace("components/", "").replace("packages/", "").replace(/\//g, "-").replace(/(\w)([A-Z])/g, "$1-$2").toLowerCase();
+        const componentName = (project === "frame" ? "" : project + "-") + componentPath;
+        return componentName;
+      }
+      return null;
+    },
+    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;
+    },
+    getComponentList() {
+      this.$http.list({
+        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) => {
+        this.loadComponentList = true;
+        const componentList = data.entitys;
+        componentList.forEach((item) => {
+          item.componentName = item.CODE;
+          if (item.COMPONENT_TYPE === "page") {
+            const componentName = this.getComponetName(item);
+            item.componentName = componentName;
+          }
+          const visualComponentName = this.getVisualComponent(item);
+          item.visualComponentName = visualComponentName;
+        });
+        this.componentList = [...componentList];
+      }).catch((err) => {
+        this.loadComponentList = true;
+        this.$message.error(err.message);
+      });
+    },
+    changeItemConfigs(key, configs = {}, type) {
+      if (key === "page") {
+        this.pageGlobalConfigs = { ...this.pageGlobalConfigs, ...configs };
+      } else {
+        const itemConfig = this.allComponentConfigs[key] || {};
+        let componentConfigs = {};
+        const componentAttris = ["flex", "layout", "direction", "justify", "align", "style", "componentName", "span", "xsspan", "items", "countScopeParams"];
+        let componentAttriMap = {};
+        for (const key2 in configs) {
+          const isAttri = componentAttris.find((item) => item === key2 || item + ".i18n" === key2);
+          if (isAttri || type === "component") {
+            componentAttriMap = { ...componentAttriMap, [key2.replace(/^componentName(.i18n)?$/, "title$1")]: configs[key2] };
+          } else {
+            componentConfigs = { ...componentConfigs, [key2]: configs[key2] };
+          }
+        }
+        this.allComponentConfigs[key] = { ...itemConfig, ...componentConfigs };
+        const selectComponentList = [...this.selectComponentList];
+        const ids = key.split("-");
+        ids.reduce((componentList, id, index) => {
+          const component = componentList.find((item) => item.id === id) || {};
+          if (index === ids.length - 1) {
+            for (const attri in componentAttriMap) {
+              if (componentAttriMap[attri] !== void 0) {
+                component[attri] = componentAttriMap[attri];
+                if (component[attri] === null) delete component[attri];
+              }
+            }
+            if (this.selectComponent && key === this.selectComponent.id) {
+              this.selectComponent = { ...this.selectComponent, component };
+            }
+            return null;
+          }
+          if (!component.items) component.items = [];
+          return component.items;
+        }, selectComponentList);
+        this.selectComponentList = this.$_.cloneDeep(selectComponentList);
+      }
+    },
+    deleteItemConfigs(key) {
+      delete this.allComponentConfigs[key];
+    },
+    copyComponent(component, upId) {
+      const newCompId = this.$util.genId();
+      const newComp = { ...component, id: newCompId };
+      if (newComp.items) delete newComp.items;
+      const configs = this.allComponentConfigs[upId !== "root" ? upId + "-" + component.id : component.id];
+      if (upId === "root") {
+        const index = this.selectComponentList.findIndex((item) => item.id === component.id);
+        if (index !== -1) {
+          this.selectComponentList.splice(index + 1, 0, newComp);
+          this.changeItemConfigs(newComp.id, { ...configs });
+        }
+      } else {
+        const selectComponentList = [...this.selectComponentList];
+        const ids = upId.split("-");
+        const componentList = ids.reduce((componentList2, id) => {
+          const componentItem = componentList2.find((item) => item.id === id) || {};
+          if (!componentItem.items) componentItem.items = [];
+          return componentItem.items;
+        }, selectComponentList);
+        const index = componentList.findIndex((item) => item.id === component.id);
+        if (index !== -1) {
+          componentList.splice(index + 1, 0, newComp);
+          this.selectComponentList = selectComponentList;
+          this.changeItemConfigs(upId + "-" + newComp.id, { ...configs });
+        }
+      }
+      const copyChildren = (children, oldUpId, newUpId, upComponent) => {
+        for (const child of children) {
+          const newCompId2 = this.$util.genId();
+          const newComp2 = { ...child, id: newCompId2 };
+          if (newComp2.items) delete newComp2.items;
+          const configs2 = this.allComponentConfigs[oldUpId + "-" + child.id] || {};
+          this.changeItemConfigs(newUpId + "-" + newComp2.id, { ...configs2 });
+          if (!upComponent.items) upComponent.items = [];
+          upComponent.items.push(newComp2);
+          if (child.items) copyChildren(child.items, oldUpId + "-" + child.id, newUpId + "-" + newComp2.id, newComp2);
+        }
+      };
+      if (component.items) {
+        const oldUpId = upId !== "root" ? upId + "-" + component.id : component.id;
+        const newUpId = upId !== "root" ? upId + "-" + newComp.id : newComp.id;
+        copyChildren(component.items, oldUpId, newUpId, newComp);
+      }
+      this.$forceUpdate();
+    },
+    addComponent(component, upId, configs) {
+      const title = component.TITLE;
+      const newComp = {
+        id: component.id,
+        title,
+        contentType: component.componentName || component.CODE
+      };
+      if (component.CODE === "chart") {
+        newComp.title = "未命名统计报表";
+        newComp.type = "table";
+      }
+      if (upId === "root") {
+        this.selectComponentList.push(newComp);
+        if (component.CODE === "chart") this.changeItemConfigs(newComp.id, { metaId: this.pageMetaId });
+      } else {
+        const selectComponentList = [...this.selectComponentList];
+        const ids = upId.split("-");
+        const componentList = ids.reduce((componentList2, id) => {
+          const componentItem = componentList2.find((item) => item.id === id) || {};
+          if (!componentItem.items) componentItem.items = [];
+          return componentItem.items;
+        }, selectComponentList);
+        componentList.push(newComp);
+        this.selectComponentList = selectComponentList;
+        if (component.CODE === "chart") this.changeItemConfigs(upId + "-" + newComp.id, { metaId: this.pageMetaId });
+        this.$forceUpdate();
+      }
+    },
+    deleteSelectComponent(id, e) {
+      e && e.stopPropagation();
+      const selectComponentList = [...this.selectComponentList];
+      const ids = id.split("-");
+      ids.reduce((componentList, id2, index) => {
+        if (index === ids.length - 1) {
+          const componentIndex = componentList.findIndex((item) => item.id === id2) || {};
+          const deletecomponent = componentList[componentIndex];
+          if (deletecomponent) {
+            const deleteConfigs = (arr, upId) => {
+              arr.forEach((item) => {
+                const itemId = upId ? upId + "-" + item.id : item.id;
+                this.deleteItemConfigs(itemId);
+                if (item.items) {
+                  deleteConfigs(item.items, itemId);
+                }
+              });
+            };
+            const newIds = [...ids];
+            newIds.pop();
+            const componentId = newIds.join("-");
+            deleteConfigs([deletecomponent], componentId);
+          }
+          componentList.splice(componentIndex, 1);
+        } else {
+          const componentItem = componentList.find((item) => item.id === id2) || {};
+          return componentItem.items;
+        }
+      }, selectComponentList);
+      this.selectComponentList = selectComponentList;
+      this.$forceUpdate();
+    },
+    changeConfigs(id, newConfigs) {
+      const configs = this.componentConfigs[id] || {};
+      this.componentConfigs[id] = { ...configs, ...newConfigs };
+    },
+    pageSetting() {
+      const { visualConfigPath } = this.currentPage;
+      const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath });
+      this.selectComponent = { type: "page", id: "page", ...this.currentPage, visualComponentName: name, config: this.pageGlobalConfigs };
+    },
+    clickComponent(componentId, componentInfo, component, upId) {
+      console.log(componentId, componentInfo, component, upId);
+      this.selectComponent = { id: componentId, ...componentInfo, config: component, upId };
+    },
+    scrollToConfig(componentId) {
+    },
+    setComponentConfig(componentList, itemConfigs = {}, upId) {
+      componentList.forEach((component) => {
+        const componentId = upId ? upId + "-" + component.id : component.id;
+        const configComponentOuter = this.$refs[`config-${component.id}`];
+        if (configComponentOuter) {
+          const configComponent = configComponentOuter.$refs.component;
+          if (configComponent) {
+            const configs = configComponent.getConfigs() || {};
+            const { span, flex, componentName } = configs;
+            if (span) component.span = span;
+            delete component.configs;
+            if (componentName) {
+              component.title = componentName;
+              delete configs.componentName;
+            }
+            if (flex) {
+              component.flex = flex;
+              delete configs.flex;
+            }
+            const defaulConfigs = itemConfigs[componentId] || {};
+            itemConfigs[componentId] = { ...defaulConfigs, ...configs };
+          }
+        }
+        const { items = [] } = component;
+        if (items.length > 0) {
+          this.setComponentConfig(items, itemConfigs, componentId);
+        }
+      });
+    },
+    setContainerDefaultItems(id, items) {
+      if (id === "page") {
+        const { config: pageConfigs = {} } = this.currentPage || {};
+        if (!pageConfigs.items) this.selectComponentList = items;
+      } else {
+        const selectComponentList = [...this.selectComponentList];
+        const ids = id.split("-");
+        ids.reduce((componentList, id2, index) => {
+          const componentItem = componentList.find((item) => item.id === id2) || {};
+          if (!componentItem.items) {
+            if (index === ids.length - 1) componentItem.items = items;
+            else componentItem.items = [];
+          }
+          return componentItem.items;
+        }, selectComponentList);
+        this.selectComponentList = selectComponentList;
+      }
+    },
+    saveConfigs(event, next, errorFn) {
+      const selectComponentList = [...this.selectComponentList];
+      const itemConfigs = { ...this.allComponentConfigs };
+      this.setComponentConfig(selectComponentList, itemConfigs, "");
+      for (const key in itemConfigs) {
+        const itemConfig = itemConfigs[key];
+        for (const itemKey in itemConfig) {
+          if (itemConfig[itemKey] === null || itemConfig[itemKey] === void 0) {
+            delete itemConfig[itemKey];
+          }
+        }
+        if (this.$_.isEmpty(itemConfig)) {
+          delete itemConfigs[key];
+        }
+      }
+      this.selectComponentList = [...selectComponentList];
+      const config2 = { ...this.pageGlobalConfigs };
+      config2.items = selectComponentList;
+      config2.itemConfigs = itemConfigs;
+      __epxPackagePreload(() => import(
+        /* webpackChunkName: "standalone" */
+        "@babel/standalone"
+      ), true ? [] : void 0, import.meta.url).then((babel) => {
+        const es5 = babel.transform(config2.JS, { presets: ["env"] });
+        config2.compileJS = es5.code;
+        for (const key in config2) {
+          if (config2[key] === null) {
+            delete config2[key];
+          }
+        }
+        this.savePageConfigs(config2, next, errorFn);
+      });
+    },
+    savePageConfigs(config2) {
+      let formParams = {};
+      const globalConfig = this.$refs.globalConfig;
+      if (globalConfig) {
+        const formComp = this.getComponentById("form", globalConfig);
+        if (formComp) {
+          formParams = formComp.getFormData();
+          if (!formParams) return;
+        }
+      }
+      this.$http.update({
+        entityId: this.$metaId,
+        ...formParams,
+        [`bean.${this.$metaKey}`]: this.$query.id,
+        "bean.CONTENT": JSON.stringify(config2, null, "	")
+      }).then((data) => {
+        this.$message.success(this.$t("save successfully"));
+        if (this.newWindow) ;
+        else {
+          this.$store.commit("DELETE_PAGE", { pageId: this.$query.id });
+          this.$store.dispatch("ADD_PAGE", { pageId: this.$query.id });
+        }
+      }).catch((err) => {
+        this.$message.error(err.message || this.$t("fail to save"));
+      });
+    }
+  },
+  created() {
+    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);
+    }
+    this.getPageInfo();
+    this.getDefaultConfig();
+    this.getComponentList();
+    __epxPackagePreload(() => import("../index.js"), true ? [] : void 0, import.meta.url).then(() => {
+      this.selectComponent = { ...this.selectComponent };
+      this.$forceUpdate();
+    });
+  },
+  beforeUnmount() {
+    if (this.changeMenuFlag) {
+      this.$store.commit("SWITCH_MENU_SHOW", true);
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit("SWITCH_APP_NAV_SHOW", true);
+    }
+  }
+};
+const _hoisted_1 = { class: "config-container" };
+const _hoisted_2 = { class: "page-header" };
+const _hoisted_3 = { class: "page-header__left" };
+const _hoisted_4 = { class: "page-title" };
+const _hoisted_5 = { class: "page-header__subtitle" };
+const _hoisted_6 = { class: "page-header__title" };
+const _hoisted_7 = { class: "page-header__operate" };
+const _hoisted_8 = { class: "page-content" };
+const _hoisted_9 = { class: "page-tabs" };
+const _hoisted_10 = { class: "function-panel" };
+const _hoisted_11 = { class: "js-panel-title" };
+const _hoisted_12 = { class: "page-preview" };
+const _hoisted_13 = {
+  key: 0,
+  class: "config-panel"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_button = resolveComponent("el-button");
+  const _component_epx_visual_config_component_list = resolveComponent("epx-visual-config-component-list");
+  const _component_epx_visual_config_component_library = resolveComponent("epx-visual-config-component-library");
+  const _component_epx_js_panel = resolveComponent("epx-js-panel");
+  const _component_epx_visual_config_page_preview = resolveComponent("epx-visual-config-page-preview");
+  const _component_epx_visual_config_panel = resolveComponent("epx-visual-config-panel");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createElementVNode("div", _hoisted_3, [
+        createElementVNode("i", {
+          class: "page-header__back el-icon-arrow-left",
+          onClick: _cache[0] || (_cache[0] = (...args) => $options.back && $options.back(...args))
+        }),
+        createElementVNode("p", _hoisted_4, [
+          createElementVNode("span", _hoisted_5, toDisplayString(_ctx.$t("Editing the page")) + "：", 1),
+          createElementVNode("span", _hoisted_6, toDisplayString($options.currentPage.title), 1)
+        ])
+      ]),
+      createElementVNode("div", _hoisted_7, [
+        createElementVNode("p", {
+          class: "header-operate__item",
+          onClick: _cache[1] || (_cache[1] = (...args) => this.pageSetting && this.pageSetting(...args))
+        }, toDisplayString(_ctx.$t("page setup")), 1),
+        createVNode(_component_el_button, {
+          type: "primary",
+          size: "default",
+          onClick: $options.saveConfigs
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.$t("save")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ])
+    ]),
+    createElementVNode("div", _hoisted_8, [
+      createElementVNode("ul", _hoisted_9, [
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true, "active": $data.showPanel === "selectComponent" }),
+          onClick: _cache[2] || (_cache[2] = ($event) => $data.showPanel = "selectComponent")
+        }, [..._cache[12] || (_cache[12] = [
+          createElementVNode("i", { class: "epx-icon-dagang" }, null, -1)
+        ])], 2),
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true, "active": $data.showPanel === "componentLibrary" }),
+          onClick: _cache[3] || (_cache[3] = ($event) => $data.showPanel = "componentLibrary")
+        }, [..._cache[13] || (_cache[13] = [
+          createElementVNode("i", { class: "epx-icon-yingyong" }, null, -1)
+        ])], 2),
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true, "active": $data.showPanel === "jsPanel" }),
+          onClick: _cache[4] || (_cache[4] = ($event) => $data.showPanel = "jsPanel")
+        }, [..._cache[14] || (_cache[14] = [
+          createElementVNode("i", { class: "epx-icon-js" }, null, -1)
+        ])], 2)
+      ]),
+      createElementVNode("div", _hoisted_10, [
+        $data.showPanel === "selectComponent" && $data.loadComponentList ? (openBlock(), createBlock(_component_epx_visual_config_component_list, {
+          key: 0,
+          "all-component-list": this.componentList,
+          "component-list": this.selectComponentList,
+          component: $data.selectComponent,
+          onDelete: $options.deleteSelectComponent,
+          onCopy: $options.copyComponent,
+          onAdd: _cache[5] || (_cache[5] = ([component, upId]) => $options.addComponent(component, upId)),
+          onChangeConfigs: $options.changeConfigs,
+          onClick: $options.clickComponent,
+          onClose: _cache[6] || (_cache[6] = ($event) => $data.showPanel = null)
+        }, null, 8, ["all-component-list", "component-list", "component", "onDelete", "onCopy", "onChangeConfigs", "onClick"])) : createCommentVNode("", true),
+        $data.showPanel === "componentLibrary" ? (openBlock(), createBlock(_component_epx_visual_config_component_library, {
+          key: 1,
+          "all-component-list": this.componentList,
+          "component-list": this.selectComponentList,
+          onClose: _cache[7] || (_cache[7] = ($event) => $data.showPanel = null)
+        }, null, 8, ["all-component-list", "component-list"])) : createCommentVNode("", true),
+        $data.showPanel === "jsPanel" ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: "js-panel",
+          onClick: _cache[10] || (_cache[10] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          createElementVNode("p", _hoisted_11, [
+            createElementVNode("span", null, toDisplayString(_ctx.$t("Page JS")), 1),
+            createElementVNode("i", {
+              class: "el-icon-close",
+              onClick: _cache[8] || (_cache[8] = ($event) => $data.showPanel = null)
+            })
+          ]),
+          createVNode(_component_epx_js_panel, {
+            value: $data.pageGlobalConfigs.JS,
+            onChange: _cache[9] || (_cache[9] = (v) => $options.changeItemConfigs("page", { JS: v }))
+          }, null, 8, ["value"])
+        ])) : createCommentVNode("", true)
+      ]),
+      createElementVNode("div", _hoisted_12, [
+        createVNode(_component_epx_visual_config_page_preview, {
+          globalConfigs: $data.pageGlobalConfigs,
+          itemConfigs: $data.allComponentConfigs,
+          "all-component-list": $data.componentList,
+          "component-list": this.selectComponentList,
+          onUpdateComponentList: _cache[11] || (_cache[11] = (v) => this.selectComponentList = v),
+          selectComponent: $data.selectComponent,
+          onClick: $options.clickComponent,
+          onDelete: $options.deleteSelectComponent
+        }, null, 8, ["globalConfigs", "itemConfigs", "all-component-list", "component-list", "selectComponent", "onClick", "onDelete"])
+      ]),
+      $data.selectComponent ? (openBlock(), createElementBlock("div", _hoisted_13, [
+        createVNode(_component_epx_visual_config_panel, {
+          component: $data.selectComponent,
+          metaId: $options.currentMetaId,
+          globalConfigs: $data.pageGlobalConfigs,
+          itemConfigs: $data.allComponentConfigs,
+          relationList: $data.relationList,
+          pageParams: $data.pageParams,
+          scopeConfigs: $data.scopeConfigs
+        }, null, 8, ["component", "metaId", "globalConfigs", "itemConfigs", "relationList", "pageParams", "scopeConfigs"])
+      ])) : createCommentVNode("", true)
+    ])
+  ]);
+}
+const VisualConfigPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c0a2153f"]]);
+export {
+  VisualConfigPage as default
+};