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

package/dist/src/visual/config-page/ComponentList.vue.js

@@ -0,0 +1,292 @@
+import { createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
+import draggable from "@epxing/core/src/components/draggable";
+import { ensureIcons, collectIconNames } from "@epxing/icons/src/runtime.mjs";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-visual-config-component-list",
+  components: {
+    draggable
+  },
+  props: {
+    componentList: Array,
+    allComponentList: Array,
+    component: Object
+  },
+  inject: ["getItemConfigs", "changeItemConfigs", "deleteItemConfigs"],
+  data() {
+    return {
+      foldMap: {},
+      showModal: false,
+      beforeMoveUpId: null,
+      afterMoveUpId: null,
+      componentType: [],
+      componentTypeList: [],
+      collapseList: [],
+      searchKey: "",
+      TERMINAL: "pc",
+      LEVEL: "01",
+      selectComponent: {},
+      loadInfo: true,
+      activeType: "common"
+    };
+  },
+  computed: {
+    itemConfigs() {
+      return this.getItemConfigs();
+    },
+    componentImage() {
+      return (v) => {
+        if ("PICTURE" in v) {
+          return v.PICTURE ? this.$util.getFileUrl(v.PICTURE) : "";
+        }
+        const component = this.allComponentList.find((item) => item.ID === v.id) || {};
+        return component.PICTURE ? this.$util.getFileUrl(component.PICTURE) : "";
+      };
+    },
+    commonComponentList() {
+      return this.allComponentList.filter((item) => item.IS_FRE_USE === "1" && item.TITLE.includes(this.searchKey) && item.TERMINAL.includes(this.TERMINAL) && item.LEVEL.includes(this.LEVEL));
+    },
+    activeComponentList() {
+      if (this.activeType === "common") {
+        return this.commonComponentList;
+      } else {
+        const active = this.componentTypeList.find((item) => item.componentType === this.activeType) || {};
+        return active.children || [];
+      }
+    }
+  },
+  watch: {
+    // 图标按需：组件类型图标（componentInfo.ICON）来自组件元数据，既不在页面配置里、
+    // 也不走 <epx-icon>，两个接入点都够不着。接在收到清单这一刻**批量**补一次，
+    // 而不是在 render 里逐个调 —— 后者每个名字一次请求，白白拆散批量。
+    // allComponentList 是 prop，不管上游从哪个 fetch 来的都会到这儿。
+    allComponentList: {
+      immediate: true,
+      handler(list) {
+        if (list && list.length) ensureIcons(collectIconNames(list));
+      }
+    },
+    selectComponent() {
+      this.loadInfo = false;
+      this.$nextTick(() => {
+        this.loadInfo = true;
+      });
+    }
+  },
+  methods: {
+    getComponentInfo(component) {
+      return this.allComponentList.find((item) => (item.componentName || item.CODE) === component.contentType) || {};
+    },
+    foldComponent(id, e) {
+      e.stopPropagation();
+      this.foldMap[id] = !this.foldMap[id];
+    },
+    closeModal() {
+      this.showModal = false;
+      this.selectComponent = {};
+    },
+    addComponent(component) {
+      const compId = (/* @__PURE__ */ new Date()).getTime() + "";
+      this.$emit("add", [{
+        id: compId,
+        ...component
+      }, this.showModal]);
+      this.showModal = false;
+    },
+    selectComponentFn(id) {
+      const component = this.allComponentList.find((comp) => comp.ID === id);
+      this.selectComponent = component;
+    },
+    renderItem(component, upId, upComponent, level) {
+      const componentInfo = this.getComponentInfo(component);
+      const componentId = upId === "root" ? component.id : upId + "-" + component.id;
+      if (componentInfo.COMPONENT_TYPE === "page" || componentInfo.COMPONENT_TYPE === "container" || componentInfo.CONTAINER === "1") {
+        if (!component.items) {
+          component.items = [];
+        }
+      }
+      return createVNode("li", {
+        "class": ["select-component-item", {
+          active: this.component && this.component.id === componentId
+        }, {
+          fold: this.foldMap[componentId]
+        }],
+        "component-id": componentId
+      }, [createVNode("p", {
+        "class": "select-component-item__header",
+        "style": {
+          paddingLeft: level * 16 + 8 + "px"
+        },
+        "onClick": () => this.$emit("click", componentId, componentInfo, component, upId)
+      }, [createVNode("span", null, [(componentInfo.CONTAINER === "1" || component.items && component.items.length > 0) && createVNode("i", {
+        "style": {
+          left: (level - 1) * 16 + 8 + "px"
+        },
+        "class": ["fold-icon", "el-icon-arrow-down"],
+        "onClick": this.foldComponent.bind(this, componentId)
+      }, null), createVNode("i", {
+        "class": ["component-icon", "fa", componentInfo.ICON || "el-icon-box"]
+      }, null), createVNode("span", null, [component.title]), componentInfo.STATUS === "deprecated" && createVNode(resolveComponent("el-tooltip"), {
+        "placement": "top",
+        "content": componentInfo.REMARK
+      }, {
+        default: () => [createVNode("i", {
+          "class": "component__warning-icon el-icon-warning-outline"
+        }, null)]
+      }), componentInfo.STATUS === "abandon" && createVNode(resolveComponent("el-tooltip"), {
+        "placement": "top",
+        "content": componentInfo.REMARK || "此组件已经废除，请替换新的组件使用"
+      }, {
+        default: () => [createVNode("span", {
+          "class": "component__abandon-icon"
+        }, [createTextVNode("废")])]
+      })]), createVNode("span", {
+        "class": "select-component__operate",
+        "onClick": (e) => e.stopPropagation()
+      }, [componentInfo.CONTAINER === "1" && createVNode("i", {
+        "class": "el-icon-plus",
+        "onClick": (e) => {
+          e.stopPropagation();
+          this.showModal = componentId;
+        }
+      }, null), createVNode("i", {
+        "class": "el-icon-copy-document",
+        "onClick": this.$emit.bind(this, "copy", component, upId)
+      }, null), createVNode("i", {
+        "class": "el-icon-close",
+        "onClick": this.$emit.bind(this, "delete", componentId)
+      }, null)])]), createVNode("div", {
+        "class": "select-component-child"
+      }, [(componentInfo.COMPONENT_TYPE === "page" || componentInfo.COMPONENT_TYPE === "container" || componentInfo.CONTAINER === "1" || component.items && component.items.length > 0) && !component.fold && this.renderList(component.items || [], componentId, component.contentType, level)])]);
+    },
+    /**
+     * @param { Array } componentList 组件列表
+     * @param { String } upId 上级组件id
+     * @param { upComponent } 上级组件 epx-xxxx
+     */
+    renderList(componentList = [], upId = "root", upComponent, level = 0) {
+      let _slot;
+      if (!componentList) return;
+      return createVNode("div", {
+        "class": "select-component-container"
+      }, [createVNode(draggable, {
+        "class": "select-component-list",
+        "tag": "ul",
+        "draggable-id": upId,
+        "list": componentList,
+        "componentData": {
+          attrs: {
+            "up-id": upId
+          }
+        },
+        "group": {
+          name: "g1"
+        },
+        "ghostClass": "drag-component__ghost",
+        "move": this.move.bind(this),
+        "onChange": this.change.bind(this)
+      }, _isSlot(_slot = componentList.map((component) => {
+        return this.renderItem(component, upId, upComponent, level + 1);
+      })) ? _slot : {
+        default: () => [_slot]
+      }), upId === "root" && createVNode(resolveComponent("el-button"), {
+        "class": "add-component-add root",
+        "type": "primary",
+        "size": "default",
+        "onClick": (e) => {
+          e.stopPropagation();
+          this.showModal = upId;
+        }
+      }, {
+        default: () => [createTextVNode("+ "), this.$t("new add component")]
+      })]);
+    },
+    renderModal() {
+      return createVNode(resolveComponent("el-dialog"), {
+        "title": this.$t("Page Component Query"),
+        "modelValue": !!this.showModal,
+        "width": "960px",
+        "append-to-body": true,
+        "onClick": (e) => e.stopPropagation(),
+        "onClose": () => {
+          this.showModal = false;
+          this.selectComponent = {};
+        }
+      }, {
+        default: () => [createVNode(resolveComponent("epx-visual-component-library-dialog"), {
+          "onClick": this.addComponent.bind(this)
+        }, null)]
+      });
+    },
+    getChildrenById(id, componentList = this.componentList, upId) {
+      for (const item of componentList) {
+        const itemId = upId ? upId + "-" + item.id : item.id;
+        if (itemId === id) {
+          return item.items;
+        } else if (item.items) {
+          const children = this.getChildrenById(id, item.items, itemId);
+          if (children) return children;
+        }
+      }
+    },
+    move(evt, orginEvt) {
+      this.beforeMoveUpId = evt.from.getAttribute("up-id");
+      this.afterMoveUpId = evt.to.getAttribute("up-id");
+    },
+    change(e) {
+      if (e.removed || e.added) {
+        const {
+          element = {}
+        } = e.added || e.removed;
+        if (this.beforeMoveUpId !== null && element.id && this.beforeMoveUpId !== this.afterMoveUpId) {
+          const beforeElementId = this.beforeMoveUpId !== "root" ? this.beforeMoveUpId + "-" + element.id : element.id;
+          const afterElementId = this.afterMoveUpId !== "root" ? this.afterMoveUpId + "-" + element.id : element.id;
+          const beforeMoveConfig = this.itemConfigs[beforeElementId];
+          if (beforeMoveConfig) {
+            this.changeItemConfigs(afterElementId, beforeMoveConfig);
+            this.deleteItemConfigs(beforeElementId);
+          }
+          const children = this.getChildrenById(afterElementId);
+          if (children) {
+            const changeConfigs = (arr, beforeElementId2, afterElementId2) => {
+              arr.forEach((item) => {
+                const beforeMoveConfig2 = this.itemConfigs[beforeElementId2 + "-" + item.id];
+                if (beforeMoveConfig2) {
+                  this.changeItemConfigs(afterElementId2 + "-" + item.id, beforeMoveConfig2);
+                  this.deleteItemConfigs(beforeElementId2 + "-" + item.id);
+                }
+                if (item.items) {
+                  changeConfigs(item.items, beforeElementId2 + "-" + item.id, afterElementId2 + "-" + item.id);
+                }
+              });
+            };
+            changeConfigs(children, beforeElementId, afterElementId);
+          }
+        }
+        this.beforeMoveUpId = null;
+        this.afterMoveUpId = null;
+      }
+    }
+  },
+  render() {
+    return createVNode("div", {
+      "class": "config-select-container"
+    }, [createVNode("div", {
+      "class": "select-container__header"
+    }, [createVNode("span", null, [this.$t("Outline of the component")]), createVNode("i", {
+      "class": "el-icon-close",
+      "onClick": () => this.$emit("close")
+    }, null)]), this.renderList(this.componentList), this.renderModal()]);
+  },
+  created() {
+    window.addEventListener("click", this.closeModal, false);
+  },
+  unmounted() {
+    window.removeEventListener("click", this.closeModal, false);
+  }
+};
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,8 @@
+import '../../../style.css';
+import _sfc_main from "./ComponentPreview.vue.js";
+/* empty css                      */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const VisualConfigComponentPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-733a6827"]]);
+export {
+  VisualConfigComponentPreview as default
+};

package/dist/src/visual/config-page/ComponentPreview.vue.js

@@ -0,0 +1,151 @@
+import { createVNode, resolveComponent, mergeProps } from "vue";
+import { resolveComponent as resolveComponent$1 } from "@epxing/core/src/app";
+import draggable from "@epxing/core/src/components/draggable";
+const _sfc_main = {
+  name: "epx-visual-config-component-preview",
+  components: {
+    draggable
+  },
+  props: {
+    component: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    upId: {
+      type: String
+    },
+    selectComponent: {
+      type: Object
+    }
+  },
+  inject: ["getAllComponentList", "getItemConfigs", "changeItemConfigs"],
+  computed: {
+    componentId() {
+      return this.upId ? this.upId + "-" + this.component.id : this.component.id;
+    },
+    componentInfo() {
+      const componentInfo = this.allComponentList.find((item) => item.CODE === this.component.contentType) || {
+        CODE: this.component.contentType
+      };
+      return componentInfo || {};
+    },
+    itemConfigs() {
+      return this.getItemConfigs();
+    },
+    allComponentList() {
+      return this.getAllComponentList();
+    },
+    compConfigs() {
+      const {
+        configs = {},
+        id,
+        title,
+        contentType,
+        ...otherConfigs
+      } = this.component;
+      const itemConfig = this.itemConfigs[this.componentId] || {};
+      const _configs = {
+        ...otherConfigs,
+        ...configs,
+        ...itemConfig
+      };
+      if (title) {
+        _configs.componentName = title;
+      }
+      return _configs;
+    },
+    childComponents: {
+      get() {
+        const {
+          items = []
+        } = this.compConfigs;
+        return items;
+      },
+      set(v) {
+        this.changeItemConfigs(this.componentId, {
+          items: v
+        });
+      }
+    }
+  },
+  methods: {
+    clickComponent(event) {
+      event.stopPropagation();
+      const configs = this.compConfigs;
+      this.$emit("click", this.componentId, this.componentInfo, configs, this.upId);
+    },
+    renderPreviewComponent() {
+      let previewCompName = this.componentInfo.CODE + "--preview";
+      let hasPreview = resolveComponent$1("epx-" + previewCompName);
+      if (!hasPreview && this.componentInfo.UP_PAGE) {
+        const parent = this.allComponentList.find((item) => item.ID === this.componentInfo.UP_PAGE);
+        if (parent) {
+          previewCompName = parent.CODE + "--preview";
+          hasPreview = resolveComponent$1("epx-" + previewCompName);
+        }
+      }
+      if (hasPreview) {
+        return createVNode(resolveComponent("epx-component"), mergeProps({
+          "name": previewCompName,
+          "compId": this.componentId,
+          "itemConfigs": this.itemConfigs,
+          "component": this.component,
+          "comp-configs": this.compConfigs,
+          "upId": this.upId,
+          "selectComponent": this.selectComponent
+        }, this.$forwardAttrs(this.$attrs)), null);
+      } else if (this.componentInfo.CONTAINER === "1") {
+        return createVNode(draggable, {
+          "class": {
+            "layout-placeholder": true,
+            "has-component": this.childComponents.length > 0
+          },
+          "modelValue": this.childComponents,
+          "onUpdate:modelValue": ($event) => this.childComponents = $event,
+          "group": "library",
+          "ghostClass": "drag-component__ghost"
+        }, {
+          default: () => [this.childComponents.length > 0 && createVNode("div", null, [this.childComponents.map((component) => createVNode(resolveComponent("epx-visual-config-component-preview"), mergeProps({
+            "key": component.id,
+            "component": component,
+            "upId": this.componentId
+          }, this.$forwardAttrs(this.$attrs), {
+            "selectComponent": this.selectComponent
+          }), null))])]
+        });
+      } else if (this.componentInfo.PICTURE) {
+        return createVNode("img", {
+          "class": "component-preview__icon",
+          "src": this.$util.getFileUrl(this.componentInfo.PICTURE)
+        }, null);
+      } else {
+        return createVNode("div", null, [this.componentInfo.TITLE]);
+      }
+    }
+  },
+  render() {
+    return createVNode("div", {
+      "class": {
+        "component-preview": true,
+        active: this.selectComponent && this.componentId === this.selectComponent.id
+      },
+      "onClick": this.clickComponent
+    }, [this.renderPreviewComponent(), createVNode("div", {
+      "class": "component-preview__operate"
+    }, [createVNode(resolveComponent("el-popconfirm"), {
+      "title": `${this.$t("Confirm to delete the component")} ?`,
+      "onConfirm": this.$emit.bind(this, "delete", this.componentId)
+    }, {
+      reference: () => createVNode("span", {
+        "class": "component-preview__del"
+      }, [createVNode("i", {
+        "class": "el-icon-close"
+      }, null)])
+    })])]);
+  }
+};
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,13 @@
+import '../../../style.css';
+import { openBlock, createElementBlock } from "vue";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-visual-config-option"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div");
+}
+const ConfigOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  ConfigOption as default
+};