super-page-designer 2.0.23 → 2.0.31

package/dist/es/components/design/views/design/page-event/page-event-container.vue.js

@@ -1,26 +1,19 @@
-import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, withCtx, unref, isRef, withKeys, toDisplayString, createTextVNode } from "vue";
+import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, withCtx, unref, isRef, toDisplayString, withDirectives, withModifiers, createTextVNode, vShow } from "vue";
 import { Search } from "@element-plus/icons-vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { getComponentEventOptions } from "../../../utils/assemblys-config.js";
-import { convertToExploreTreeDatas } from "../../../utils/page-explore-util.js";
+import { ElMessageBox } from "element-plus";
+import { getDesignConfByName } from "../../../utils/assemblys-config.js";
 import _sfc_main$1 from "../view/assemblys-container-explore.vue.js";
-import { getUuidv4 } from "../../../utils/common-util.js";
+import { deepCopy } from "../../../utils/common-util.js";
 import eventBus from "../../../utils/eventBus.js";
-const _hoisted_1 = ["title"];
+import { usePageContextStore } from "../../../../../stores/page-store.js";
+const _hoisted_1 = { style: { "padding-top": "10px" } };
 const _hoisted_2 = ["title"];
 const _hoisted_3 = ["title"];
-const _hoisted_4 = ["title"];
-const _hoisted_5 = ["title"];
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = { key: 1 };
 const _hoisted_6 = ["title"];
 const _hoisted_7 = ["title"];
 const _hoisted_8 = ["title"];
-const _hoisted_9 = ["title"];
-const _hoisted_10 = ["title"];
-const _hoisted_11 = ["title"];
-const _hoisted_12 = ["title"];
-const _hoisted_13 = ["title"];
-const _hoisted_14 = ["title"];
-const _hoisted_15 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "page-event-container",
   props: {
@@ -30,364 +23,162 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["add-event", "change-event"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const emits = __emit;
-    const myComponentType = ref(null);
-    const componentInfo = ref(null);
+    const pageDesignUtil = usePageContextStore();
+    const pageDesign = ref(null);
     const eventTableHeight = ref();
+    const properVisible = ref(false);
     let eventCollapse = ref(["searchCollapse", "addCollapse", "unUseEventCollapse"]);
     let currentComponent = ref(null);
     let searchItemName = ref("");
-    let searchUnUseItemName = ref("");
-    let eventTableData = ref([]);
-    const cachePageItemMap = ref({});
-    let eventResult = ref([]);
-    const treeData = ref([]);
-    const unUseEventResult = ref([]);
-    const props = __props;
-    const configure = props.configure;
-    const configureObj = props.configureObj;
-    const editEvent = props.editEvent;
-    if (configure.items == void 0) {
-      configure.items = [];
-    }
-    const designItems = configure.items;
-    const winHeight = ref();
-    const containerHeightStyle = computed(() => {
-      return {
-        height: winHeight.value + "px"
-      };
-    });
-    onMounted(() => {
-      initEventResult();
-      if (configureObj && editEvent) {
-        selectComponent(null, configureObj, configureObj);
-        if (editEvent && editEvent.eventName) {
-          selectEvent(editEvent);
-        } else {
-          addEvent(editEvent);
+    const componentInfo = computed(() => {
+      let value = "";
+      const componentConfigure = currentComponent.value;
+      const componentType = componentConfigure && componentConfigure.name != "page" ? componentConfigure.name : "page";
+      if (componentType === "page") {
+        value = "页面";
+      } else {
+        value = componentConfigure && componentConfigure.label ? componentConfigure.label : "";
+        if (componentConfigure && componentConfigure.props && componentConfigure.props.base) {
+          const title = componentConfigure.props.base.title;
+          if (title) {
+            value = title + "(" + value + ")";
+          }
         }
       }
-      winHeight.value = window.innerHeight;
-      eventTableHeight.value = window.innerHeight - 220;
+      return value;
     });
-    eventBus.$on("changeEventInfo", (eventInfo) => {
-      if (eventInfo && eventInfo.type === "title") {
-        eventResult.value.forEach((item) => {
-          if (item.uuid === eventInfo.customEvent.uuid) {
-            item.title = eventInfo.customEvent.title;
-          }
-        });
-      } else if (eventInfo && eventInfo.type === "eventName") {
-        eventResult.value.forEach((item) => {
-          if (item.uuid === eventInfo.customEvent.uuid) {
-            item.eventName = eventInfo.customEvent.eventName;
-          }
-        });
-      } else if (eventInfo && eventInfo.type === "funcParam") {
-        eventResult.value.forEach((item) => {
-          if (item.uuid === eventInfo.customEvent.uuid) {
-            item.funcParam = eventInfo.customEvent.funcParam;
-          }
-        });
+    let eventTableData = computed(() => {
+      if (!pageDesign.value || !pageDesign.value.customEvents) {
+        return [];
       }
+      return pageDesign.value.customEvents.filter((item) => {
+        return item.name == "customFunc";
+      });
     });
-    function initEventResult() {
-      eventResult.value = [];
-      if (!configure.customEvents) {
-        configure.customEvents = [];
-      }
-      treeData.value = convertToExploreTreeDatas(
-        designItems,
-        null,
-        cachePageItemMap,
-        eventResult
-      );
-      if (eventResult.value) {
-        eventResult.value.forEach((event) => {
-          const customEvent = getCustomEventByEventName(event.eventName);
-          if (customEvent) {
-            event.title = customEvent.title;
-            event.funcParam = customEvent.funcParam;
+    const componentEvents = computed(() => {
+      let name = currentComponent.value ? currentComponent.value.name : null;
+      name = name ? name : "page";
+      const uuid = currentComponent.value ? currentComponent.value.uuid : null;
+      const existEvents = [];
+      const existNames = [];
+      if (pageDesign.value && pageDesign.value.customEvents) {
+        for (let e of pageDesign.value.customEvents) {
+          if (e.name == "customFunc") {
+            continue;
+          }
+          if (name === "page" || e.uuid === uuid) {
+            existEvents.push(e);
+            if (!existNames.includes(e.name)) {
+              existNames.push(e.name);
+            }
           }
-        });
-      }
-      getUnUseEventResult();
-    }
-    function getUnUseEventResult() {
-      const eventNames = new Set(eventResult.value.map((item) => item.eventName));
-      unUseEventResult.value = configure.customEvents.filter((item) => !eventNames.has(item.eventName));
-      doSearchUnUseEvent();
-    }
-    function getCustomEventByEventName(eventName) {
-      if (configure.customEvents) {
-        const eventList = configure.customEvents.filter((func) => func.eventName === eventName);
-        if (eventList && eventList.length > 0) {
-          return eventList[0];
         }
       }
-    }
-    const commonEventTypes = [
-      {
-        label: "自定义方法",
-        name: "customFunc",
-        tip: "自定义方法"
-      }
-    ];
-    function selectComponent(componentIndex, configureObj2, nodeData) {
-      console.log("clickNode--configureObj--", configureObj2);
-      const myCommonEventTypes = JSON.parse(JSON.stringify(commonEventTypes));
-      const componentType = nodeData.name;
-      let myComponentEventTypes;
-      if (componentType === "page") {
-        currentComponent.value = nodeData;
-        componentInfo.value = nodeData.label + "(" + nodeData.name + ")";
-        eventTableData.value = myCommonEventTypes;
+      let hisEvents = null;
+      if (name == "page") {
+        hisEvents = pageDesign.value ? pageDesign.value.events : null;
       } else {
-        if (configureObj2.name && configureObj2.name.indexOf("chart-") >= 0) {
-          myComponentType.value = "chart";
-        } else {
-          myComponentType.value = configureObj2.name;
-        }
-        currentComponent.value = configureObj2;
-        componentInfo.value = configureObj2.label + "(" + myComponentType.value + ")";
-        const componentEventTypes = getComponentEventOptions(myComponentType.value);
-        if (componentEventTypes) {
-          myComponentEventTypes = JSON.parse(JSON.stringify(componentEventTypes));
-          eventTableData.value = myCommonEventTypes.concat(myComponentEventTypes);
-        } else {
-          eventTableData.value = myCommonEventTypes;
-        }
-      }
-      searchEventResult();
-      if (myComponentEventTypes) {
-        packageEventTableDisable(myComponentEventTypes);
+        hisEvents = currentComponent.value ? currentComponent.value.events : null;
       }
-    }
-    function packageEventTableDisable(myComponentEventTypes) {
-      const componentUuid = currentComponent.value ? currentComponent.value.uuid : null;
-      const hasAddEventReusult = componentUuid ? eventResult.value.filter(
-        (event) => event.componentUuid === componentUuid
-      ) : null;
-      if (hasAddEventReusult && hasAddEventReusult.length > 0) {
-        myComponentEventTypes.forEach((element) => {
-          const eventType = element.name;
-          const events = hasAddEventReusult.filter((event) => event.name === eventType);
-          if (events && events.length > 0) {
-            element.disable = true;
-          } else {
-            element.disable = false;
+      if (hisEvents) {
+        for (let e of hisEvents) {
+          if (!e.componentUuid) {
+            e.componentUuid = currentComponent.value && currentComponent.value.uuid ? currentComponent.value.uuid : "page";
+          }
+          if (!e.componentLabel) {
+            if (name == "page") {
+              e.componentLabel = "页面";
+            } else {
+              e.componentLabel = currentComponent.value ? currentComponent.value.label : "";
+            }
+          }
+          let newTitle = "";
+          if (currentComponent.value) {
+            if (currentComponent.value.props && currentComponent.value.props.base) {
+              newTitle = currentComponent.value.props.base.title;
+            }
+          }
+          e.title = newTitle;
+          if (!existNames.includes(e.name)) {
+            existEvents.push(e);
+            existNames.push(e.name);
           }
-        });
-      } else {
-        myComponentEventTypes.forEach((element) => {
-          element.disable = false;
-        });
-      }
-    }
-    const currentTableEvent = ref(null);
-    function addEvent(row) {
-      const eventType = row.name;
-      const eventLabel = row.label;
-      if (!eventType) {
-        ElMessage({
-          type: "warning",
-          message: "请选择事件",
-          showClose: true
-        });
-        return;
-      }
-      let eventForm;
-      if (eventType === "customFunc") {
-        if (!configure.customEvents) {
-          configure.customEvents = [];
         }
-        const uuid = getUuidv4();
-        eventForm = {
-          label: eventLabel,
-          name: eventType,
-          title: eventLabel,
-          uuid
-        };
-        configure.customEvents.push(eventForm);
-        eventResult.value.push(configure.customEvents[configure.customEvents.length - 1]);
-        eventForm = configure.customEvents[configure.customEvents.length - 1];
-      } else {
-        eventForm = getEventObj(eventType);
-        if (eventForm) {
-          eventForm.title = eventLabel;
-          eventForm["componentIndex"] = currentComponent.value.componentIndex;
-          eventForm["componentLabel"] = currentComponent.value.label;
-          eventForm["componentName"] = currentComponent.value.name;
-          eventForm["componentUuid"] = currentComponent.value.uuid ? currentComponent.value.uuid : currentComponent.value.code;
-          eventForm["componentProp"] = currentComponent.value.props && currentComponent.value.props.base ? currentComponent.value.props.base.prop : null;
+        let componentConf = getDesignConfByName(name);
+        if (componentConf && componentConf.events) {
+          for (let e of componentConf.events) {
+            if (!existNames.includes(e.name)) {
+              const newEvent = deepCopy(e);
+              existEvents.push(newEvent);
+              hisEvents.push(newEvent);
+              existNames.push(e.name);
+            }
+          }
         }
-        eventResult.value.push(eventForm);
-        packageEventTableDisable(eventTableData.value);
-      }
-      currentTableEvent.value = eventForm;
-      emits("add-event", eventForm);
-    }
-    function doCreateEvent(eventForm) {
-      const customEventForm = createEvent(eventForm);
-      if (eventForm && customEventForm) {
-        eventForm.eventName = customEventForm.eventName;
-        eventForm.uuid = customEventForm.uuid;
-        eventForm.isStandard = false;
-      }
-      emits("add-event", eventForm, "handle");
-      packageEventTableDisable(eventTableData.value);
-    }
-    function createEvent(eventObj) {
-      const uuid = getUuidv4();
-      const eventForm = {
-        label: eventObj.label,
-        name: "customEvent",
-        title: eventObj.label,
-        eventName: uuid,
-        uuid
-      };
-      if (!configure.customEvents) {
-        configure.customEvents = [];
       }
-      configure.customEvents.push(eventForm);
-      return eventForm;
-    }
-    function getEventObj(eventType) {
-      let configureObj2;
-      const componentType = currentComponent.value.name;
-      if (componentType === "page") {
-        configureObj2 = currentComponent.value;
-      } else {
-        configureObj2 = cachePageItemMap.value[currentComponent.value.componentIndex];
-      }
-      return getEventObjByObj(configureObj2, eventType);
-    }
-    function getEventObjByObj(configureObj2, eventType) {
-      const events = configureObj2.events;
-      if (events) {
-        let eventObjs = events.filter((event) => event.name === eventType);
-        if (eventObjs !== null && eventObjs.length > 0) {
-          return eventObjs[0];
+      if (searchItemName.value) {
+        const _newEvents = [];
+        for (let e of existEvents) {
+          if (e.name && e.name.includes(searchItemName.value) || e.label && e.label.includes(searchItemName.value)) {
+            _newEvents.push(e);
+          }
         }
-      }
-    }
-    function selectEvent(row, column, event) {
-      currentTableEvent.value = row;
-      emits("change-event", row);
-    }
-    function deleteEvent(row, rowIndex) {
-      const eventType = row.name;
-      const eventTitle = row.title;
-      let eventName;
-      if (eventType === "customFunc") {
-        eventName = row.eventName;
-        eventResult.value.splice(rowIndex, 1);
+        return _newEvents;
       } else {
-        let componentIndex = row.componentIndex;
-        let configureObj2 = cachePageItemMap.value[componentIndex];
-        const eventForm = getEventObjByObj(configureObj2, eventType);
-        if (eventForm) {
-          eventName = eventForm.eventName;
-          eventForm.eventName = null;
-          eventForm.title = null;
-          eventForm.componentIndex = null;
-          eventForm.componentLabel = null;
-          eventForm.componentName = null;
-          eventForm.componentUuid = null;
-          eventForm.componentProp = null;
-        }
-        eventResult.value.splice(rowIndex, 1);
-        packageEventTableDisable(eventTableData.value);
-      }
-      getUnUseEventResult();
-      const unUseEvents = unUseEventResult.value.filter((item) => item.eventName === eventName);
-      if (unUseEvents && unUseEvents.length > 0) {
-        confirmDeleteEvent(eventTitle, eventName);
+        return existEvents;
       }
+    });
+    const designItems = ref([]);
+    const winHeight = ref();
+    const containerHeightStyle = computed(() => {
+      return {
+        height: winHeight.value + "px"
+      };
+    });
+    function init(pageDesignObj) {
+      pageDesign.value = pageDesignObj;
+      designItems.value = pageDesignObj && pageDesignObj.items ? pageDesignObj.items : [];
+      selectComponent(null, null);
     }
-    function confirmDeleteEvent(eventTitle, eventName) {
-      ElMessageBox.confirm("确认删除事件[" + eventTitle + "]吗?", "提示", {
+    onMounted(() => {
+      init(pageDesignUtil.pageContext);
+      winHeight.value = window.innerHeight;
+      eventTableHeight.value = window.innerHeight - 220;
+    });
+    function clearEvent(eventObj) {
+      ElMessageBox.confirm("确定要清除吗?", "确认", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        deleteCustomEvent(eventName);
-      }).catch(() => {
+        console.log("begin clearevent");
+        eventBus.$emit("clearEvent", eventObj);
       });
     }
-    function deleteCustomEvent(eventName) {
-      if (configure.customEvents) {
-        const funcIndex = configure.customEvents.findIndex((func) => func.eventName === eventName);
-        if (funcIndex !== void 0 && funcIndex !== null && funcIndex >= 0) {
-          configure.customEvents.splice(funcIndex, 1);
-          getUnUseEventResult();
-          emits("change-event");
-        }
-      }
+    function handleSelectionChange(eventObj) {
+      eventBus.$emit("editEvent", eventObj);
     }
-    function searchEventResult() {
-      const searchInfo = searchItemName.value;
-      const componentType = currentComponent.value.name;
-      initEventResult();
-      let searchResult = eventResult.value;
-      if (componentType !== "page") {
-        searchResult = eventResult.value.filter(
-          (event) => event.name && event.name === "customFunc" || componentType && componentType === event.componentName
-        );
-      }
-      if (searchInfo) {
-        searchResult = searchResult.filter(
-          (event) => event.title && event.title.indexOf(searchInfo) >= 0
-        );
-      }
-      eventResult.value = searchResult;
-      getUnUseEventResult();
-    }
-    function searchUnUseEventResult() {
-      initEventResult();
-    }
-    function doSearchUnUseEvent() {
-      const searchInfo = searchUnUseItemName.value;
-      let searchResult = unUseEventResult.value;
-      if (searchInfo) {
-        searchResult = searchResult.filter(
-          (event) => event.title && event.title.indexOf(searchInfo) >= 0
-        );
-      }
-      unUseEventResult.value = searchResult;
+    function handleSelectionChangeForEvent(eventObj) {
+      eventBus.$emit("editEvent", eventObj);
     }
-    function changeSelectEvent(eventForm) {
-      if (currentTableEvent.value) {
-        const eventName = currentTableEvent.value.eventName;
-        const eventType = currentTableEvent.value.name;
-        const tableColData = eventResult.value.filter((item) => item.eventName === eventName && item.name === eventType);
-        if (tableColData && tableColData.length > 0) {
-          tableColData[0].eventName = eventForm.eventName;
-          tableColData[0].uuid = eventForm.uuid;
-          tableColData[0].title = eventForm.title;
-          tableColData[0].funcParam = eventForm.funcParam;
-          tableColData[0].isStandard = false;
-        }
-      }
-      getUnUseEventResult();
-    }
-    function changeSelectStandardEvent(standardEventName, eventLabel) {
-      if (currentTableEvent.value) {
-        const eventName = currentTableEvent.value.eventName;
-        const eventType = currentTableEvent.value.name;
-        const tableColData = eventResult.value.filter((item) => item.eventName === eventName && item.name === eventType);
-        if (tableColData && tableColData.length > 0) {
-          tableColData[0].eventName = standardEventName;
-          tableColData[0].title = eventLabel;
-          tableColData[0].isStandard = true;
-        }
-      }
+    eventBus.$on("changePageDesign", () => {
+      init(pageDesignUtil.pageContext);
+    });
+    eventBus.$on("editComponentEvent", (obj) => {
+      currentComponent.value = obj.configureObj;
+      setTimeout(function() {
+        eventBus.$emit("editEvent", obj.event);
+      }, 100);
+    });
+    function selectComponent(componentIndex, componentConfigure) {
+      currentComponent.value = componentConfigure;
+      properVisible.value = false;
     }
-    __expose({ changeSelectEvent, doCreateEvent, changeSelectStandardEvent });
+    __expose({});
     return (_ctx, _cache) => {
       const _component_el_button = resolveComponent("el-button");
-      const _component_el_popover = resolveComponent("el-popover");
       const _component_el_input = resolveComponent("el-input");
+      const _component_el_popover = resolveComponent("el-popover");
       const _component_el_table_column = resolveComponent("el-table-column");
       const _component_el_table = resolveComponent("el-table");
       const _component_el_collapse_item = resolveComponent("el-collapse-item");
@@ -398,54 +189,59 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(containerHeightStyle.value)
       }, [
         createElementVNode("div", null, [
-          createElementVNode("div", null, [
-            createVNode(_component_el_input, {
-              modelValue: componentInfo.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => componentInfo.value = $event),
-              placeholder: "请选择组件",
-              readonly: ""
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_component_el_popover, {
+              placement: "right",
+              width: 300,
+              visible: properVisible.value,
+              trigger: "manual"
             }, {
-              append: withCtx(() => [
-                createVNode(_component_el_popover, {
-                  placement: "right",
-                  width: 300,
-                  trigger: "click"
+              reference: withCtx(() => [
+                createVNode(_component_el_input, {
+                  size: "small",
+                  modelValue: componentInfo.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => componentInfo.value = $event),
+                  placeholder: "请选择组件",
+                  readonly: "",
+                  clearable: "",
+                  onClick: _cache[2] || (_cache[2] = ($event) => properVisible.value = !properVisible.value)
                 }, {
-                  reference: withCtx(() => [
+                  append: withCtx(() => [
                     createVNode(_component_el_button, {
                       type: "info",
                       icon: unref(Search),
                       circle: "",
-                      text: ""
+                      text: "",
+                      onClick: _cache[0] || (_cache[0] = ($event) => properVisible.value = !properVisible.value)
                     }, null, 8, ["icon"])
                   ]),
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$1, {
-                      onSelectComponent: selectComponent,
-                      treeMarginTop: "",
-                      headerSearchClass: "custom",
-                      designItems: unref(designItems),
-                      selectWidget: _ctx.selectWidget
-                    }, null, 8, ["designItems", "selectWidget"])
-                  ]),
                   _: 1
-                })
+                }, 8, ["modelValue"])
+              ]),
+              default: withCtx(() => [
+                createVNode(_sfc_main$1, {
+                  onSelectComponent: selectComponent,
+                  treeMarginTop: "",
+                  headerSearchClass: "custom",
+                  designItems: designItems.value,
+                  selectWidget: _ctx.selectWidget
+                }, null, 8, ["designItems", "selectWidget"])
               ]),
               _: 1
-            }, 8, ["modelValue"])
+            }, 8, ["visible"])
           ])
         ]),
         createElementVNode("div", null, [
           createVNode(_component_el_collapse, {
             modelValue: unref(eventCollapse),
-            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(eventCollapse) ? eventCollapse.value = $event : eventCollapse = $event),
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(eventCollapse) ? eventCollapse.value = $event : eventCollapse = $event),
             style: { "margin-top": "10px" }
           }, {
             default: withCtx(() => [
               createVNode(_component_el_collapse_item, {
                 class: "amb-assembly-collapse-header",
                 name: "searchCollapse",
-                title: "查询事件"
+                title: "事件列表"
               }, {
                 default: withCtx(() => [
                   createElementVNode("div", {
@@ -453,47 +249,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, [
                     createVNode(_component_el_input, {
                       modelValue: unref(searchItemName),
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(searchItemName) ? searchItemName.value = $event : searchItemName = $event),
-                      style: { "height": "36px" },
-                      placeholder: "Search...",
+                      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(searchItemName) ? searchItemName.value = $event : searchItemName = $event),
+                      placeholder: "名称/别名...",
                       clearable: "",
                       class: "input-with-select",
-                      "suffix-icon": unref(Search),
-                      onChange: searchEventResult,
-                      onKeyup: withKeys(searchEventResult, ["enter"])
+                      style: { "margin-top": "10px", "margin-bottom": "10px" },
+                      "suffix-icon": unref(Search)
                     }, null, 8, ["modelValue", "suffix-icon"]),
                     createVNode(_component_el_table, {
-                      data: unref(eventResult),
+                      size: "small",
+                      data: componentEvents.value,
                       style: { "width": "100%" },
                       "max-height": eventTableHeight.value,
-                      onRowClick: selectEvent
+                      "highlight-current-row": "",
+                      onRowClick: handleSelectionChangeForEvent
                     }, {
                       default: withCtx(() => [
                         createVNode(_component_el_table_column, {
-                          label: "组件",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.componentLabel
-                            }, toDisplayString(scope.row.componentLabel), 9, _hoisted_1)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "事件",
-                          width: "120"
+                          label: "名称",
+                          width: "90"
                         }, {
                           default: withCtx((scope) => [
                             createElementVNode("span", {
-                              title: scope.row.title
-                            }, toDisplayString(scope.row.title), 9, _hoisted_2)
+                              title: scope.row.name
+                            }, toDisplayString(scope.row.name), 9, _hoisted_2)
                           ]),
                           _: 1
                         }),
                         createVNode(_component_el_table_column, {
-                          label: "事件类型名称",
-                          width: "120"
+                          label: "别名",
+                          width: "60"
                         }, {
                           default: withCtx((scope) => [
                             createElementVNode("span", {
@@ -503,88 +288,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           _: 1
                         }),
                         createVNode(_component_el_table_column, {
-                          label: "事件类型",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.name
-                            }, toDisplayString(scope.row.name), 9, _hoisted_4)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "方法名",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.eventName
-                            }, toDisplayString(scope.row.eventName), 9, _hoisted_5)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "方法参数",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.funcParam
-                            }, toDisplayString(scope.row.funcParam), 9, _hoisted_6)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "组件类型",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.componentName
-                            }, toDisplayString(scope.row.componentName), 9, _hoisted_7)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "组件变量",
-                          width: "120"
+                          label: "组件",
+                          width: "120",
+                          align: "left"
                         }, {
                           default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.componentProp
-                            }, toDisplayString(scope.row.componentProp), 9, _hoisted_8)
+                            scope.row.title || scope.row.componentLabel ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(scope.row.title ? scope.row.title + "(" + scope.row.componentLabel + ")" : scope.row.componentLabel), 1)) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(currentComponent) ? unref(currentComponent).label : "页面"), 1))
                           ]),
                           _: 1
                         }),
-                        createVNode(_component_el_table_column, {
-                          label: "组件uuid",
-                          width: "120"
-                        }, {
+                        createVNode(_component_el_table_column, { label: "备注" }, {
                           default: withCtx((scope) => [
                             createElementVNode("span", {
-                              title: scope.row.componentUuid
-                            }, toDisplayString(scope.row.componentUuid), 9, _hoisted_9)
+                              title: scope.row.remark
+                            }, toDisplayString(scope.row.remark), 9, _hoisted_6)
                           ]),
                           _: 1
                         }),
                         createVNode(_component_el_table_column, {
                           fixed: "right",
-                          label: "操作",
-                          width: "80"
+                          label: "",
+                          width: "40",
+                          align: "center"
                         }, {
                           default: withCtx((scope) => [
-                            createVNode(_component_el_button, {
+                            withDirectives(createVNode(_component_el_button, {
                               link: "",
                               type: "danger",
                               size: "small",
-                              onClick: ($event) => deleteEvent(scope.row, scope.$index)
+                              onClick: withModifiers(($event) => clearEvent(scope.row), ["stop"])
                             }, {
                               default: withCtx(() => [
-                                createTextVNode("删除")
+                                createTextVNode("清除")
                               ]),
                               _: 2
-                            }, 1032, ["onClick"])
+                            }, 1032, ["onClick"]), [
+                              [
+                                vShow,
+                                scope.row.isStandard && scope.row.eventName || !scope.row.isStandard && scope.row.jsContent
+                              ]
+                            ])
                           ]),
                           _: 1
                         })
@@ -598,30 +341,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(_component_el_collapse_item, {
                 class: "amb-assembly-collapse-header",
                 name: "addCollapse",
-                title: "新增事件"
+                title: "自定义方法"
               }, {
                 default: withCtx(() => [
                   createVNode(_component_el_table, {
+                    size: "small",
                     data: unref(eventTableData),
+                    "highlight-current-row": "",
                     style: { "width": "100%" },
-                    "max-height": eventTableHeight.value
+                    "max-height": eventTableHeight.value,
+                    onRowClick: handleSelectionChange
                   }, {
                     default: withCtx(() => [
                       createVNode(_component_el_table_column, {
                         prop: "label",
-                        label: "事件类型"
+                        label: "方法名",
+                        width: "90"
+                      }, {
+                        default: withCtx((scope) => [
+                          createElementVNode("span", {
+                            title: scope.row.eventName
+                          }, toDisplayString(scope.row.eventName), 9, _hoisted_7)
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_el_table_column, {
+                        prop: "label",
+                        label: "描述"
                       }, {
                         default: withCtx((scope) => [
                           createElementVNode("span", {
-                            title: scope.row.tip
-                          }, toDisplayString(scope.row.label), 9, _hoisted_10)
+                            title: scope.row.remark
+                          }, toDisplayString(scope.row.remark), 9, _hoisted_8)
                         ]),
                         _: 1
                       }),
                       createVNode(_component_el_table_column, {
                         fixed: "right",
-                        label: "操作",
-                        width: "80"
+                        label: "",
+                        width: "50",
+                        align: "center"
                       }, {
                         default: withCtx((scope) => [
                           createVNode(_component_el_button, {
@@ -629,10 +388,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             link: "",
                             type: "primary",
                             size: "small",
-                            onClick: ($event) => addEvent(scope.row)
+                            onClick: withModifiers(($event) => clearEvent(scope.row), ["stop"])
                           }, {
                             default: withCtx(() => [
-                              createTextVNode("增加")
+                              createTextVNode("清除")
                             ]),
                             _: 2
                           }, 1032, ["disabled", "onClick"])
@@ -644,115 +403,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, 8, ["data", "max-height"])
                 ]),
                 _: 1
-              }),
-              createVNode(_component_el_collapse_item, {
-                class: "amb-assembly-collapse-header",
-                name: "unUseEventCollapse",
-                title: "未使用事件"
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("div", {
-                    style: normalizeStyle("max-height:" + eventTableHeight.value + "px")
-                  }, [
-                    createVNode(_component_el_input, {
-                      modelValue: unref(searchUnUseItemName),
-                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(searchUnUseItemName) ? searchUnUseItemName.value = $event : searchUnUseItemName = $event),
-                      style: { "height": "36px" },
-                      placeholder: "Search...",
-                      clearable: "",
-                      class: "input-with-select",
-                      "suffix-icon": unref(Search),
-                      onChange: searchUnUseEventResult,
-                      onKeyup: withKeys(searchUnUseEventResult, ["enter"])
-                    }, null, 8, ["modelValue", "suffix-icon"]),
-                    createVNode(_component_el_table, {
-                      data: unUseEventResult.value,
-                      style: { "width": "100%" },
-                      "max-height": eventTableHeight.value,
-                      onRowClick: selectEvent
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_component_el_table_column, {
-                          label: "事件",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.title
-                            }, toDisplayString(scope.row.title), 9, _hoisted_11)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "事件类型名称",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.label
-                            }, toDisplayString(scope.row.label), 9, _hoisted_12)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "事件类型",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.name
-                            }, toDisplayString(scope.row.name), 9, _hoisted_13)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "方法名",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.eventName
-                            }, toDisplayString(scope.row.eventName), 9, _hoisted_14)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          label: "方法参数",
-                          width: "120"
-                        }, {
-                          default: withCtx((scope) => [
-                            createElementVNode("span", {
-                              title: scope.row.funcParam
-                            }, toDisplayString(scope.row.funcParam), 9, _hoisted_15)
-                          ]),
-                          _: 1
-                        }),
-                        createVNode(_component_el_table_column, {
-                          fixed: "right",
-                          label: "操作",
-                          width: "80"
-                        }, {
-                          default: withCtx((scope) => [
-                            createVNode(_component_el_button, {
-                              link: "",
-                              type: "danger",
-                              size: "small",
-                              onClick: ($event) => deleteCustomEvent(scope.row.eventName)
-                            }, {
-                              default: withCtx(() => [
-                                createTextVNode("删除")
-                              ]),
-                              _: 2
-                            }, 1032, ["onClick"])
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["data", "max-height"])
-                  ], 4)
-                ]),
-                _: 1
               })
             ]),
             _: 1