@whitesev/pops 3.3.5 → 4.0.0

package/src/components/drawer/index.ts

@@ -1,8 +1,10 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsHandlerEventConfig } from "../../types/event";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -14,12 +16,12 @@ export const PopsDrawer = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "drawer";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsDrawerDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, __config__);
     config = PopsHandler.handleOnly(popsType, config);
-
     const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
     PopsHandler.handleInit($shadowRoot, [
       {
@@ -53,7 +55,7 @@ export const PopsDrawer = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -126,6 +128,7 @@ export const PopsDrawer = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -155,13 +158,16 @@ export const PopsDrawer = {
 
     // 按下Esc键触发关闭
     if (config.closeOnPressEscape) {
-      PopsHandler.handleKeyboardEvent("Escape", [], function () {
+      const listener = PopsHandler.handleKeyboardEvent("Escape", [], function () {
         evtConfig.close();
       });
+      emitter.on("pops:destory", () => {
+        listener.off();
+      });
     }
     // 待处理的点击事件列表
     const needHandleClickEventList: {
-      type: PopsHandlerEventConfig["type"];
+      type: PopsHandlerEventConfig<typeof emitter>["type"];
       ele: HTMLElement;
     }[] = [
       {
@@ -215,10 +221,7 @@ export const PopsDrawer = {
     // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     popsUtils.setTimeout(() => {
       popsUtils.setTimeout(() => {
@@ -238,7 +241,7 @@ export const PopsDrawer = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter: emitter,
     });
     return result;
   },

package/src/components/folder/index.ts

@@ -1,10 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoading } from "../loading";
@@ -17,6 +19,7 @@ export const PopsFolder = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "folder";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsFolderDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -110,7 +113,7 @@ export const PopsFolder = {
     }
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -278,6 +281,7 @@ export const PopsFolder = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -288,10 +292,7 @@ export const PopsFolder = {
     // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     if ($mask != null) {
       $anim.after($mask);
@@ -955,7 +956,7 @@ export const PopsFolder = {
     Reflect.set($pops, "data-pops-folder", popsFolder);
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops, {
+      PopsInstHandler.drag($pops, {
         dragElement: $title,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,
@@ -971,7 +972,7 @@ export const PopsFolder = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     return result;
   },

package/src/components/iframe/index.ts

@@ -1,11 +1,12 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsInstData } from "../../PopsInst";
 import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsIframeDefaultConfig } from "./defaultConfig";
 import type { PopsIframeClickEventConfig, PopsIframeConfig } from "./types";
@@ -15,7 +16,11 @@ export const PopsIframe = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "iframe";
-
+    const emitter = new EventEmiter<{
+      "pops:iframe-min": (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+      "pops:iframe-mise": (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+      "pops:iframe-max": (eventConfig: PopsIframeClickEventConfig, event: MouseEvent | PointerEvent) => void;
+    }>(popsType);
     let config = PopsIframeDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, __config__);
@@ -55,7 +60,7 @@ export const PopsIframe = {
     const maskExtraStyle = config.animation != null && <string>config.animation != "" ? "position:absolute;" : "";
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex, maskExtraStyle);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -140,10 +145,11 @@ export const PopsIframe = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
-    ) as PopsIframeClickEventConfig;
+    ) as PopsIframeClickEventConfig<typeof emitter>;
     // 赋值额外的$iframe参数
-    evtConfig.$iframe = $iframe!;
+    evtConfig.$iframe = $iframe;
 
     const result = PopsHandler.handleResultConfig(evtConfig);
 
@@ -172,17 +178,14 @@ export const PopsIframe = {
     // 创建到页面中
 
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
-
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     $iframeContainer.appendChild($shadowContainer);
     if ($mask != null) {
       $anim.after($mask);
     }
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops!, {
+      PopsInstHandler.drag($pops!, {
         dragElement: $title!,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,
@@ -217,6 +220,7 @@ export const PopsIframe = {
         if (typeof config?.btn?.min?.callback === "function") {
           config.btn.min.callback(evtConfig, event);
         }
+        emitter.emit("pops:iframe-min", evtConfig, event);
       },
       {
         capture: true,
@@ -251,6 +255,7 @@ export const PopsIframe = {
         if (typeof config?.btn?.max?.callback === "function") {
           config.btn.max.callback(evtConfig, event);
         }
+        emitter.emit("pops:iframe-max", evtConfig, event);
       },
       {
         capture: true,
@@ -293,6 +298,7 @@ export const PopsIframe = {
         if (typeof config?.btn?.mise?.callback === "function") {
           config.btn.mise.callback(evtConfig, event);
         }
+        emitter.emit("pops:iframe-mise", evtConfig, event);
       },
       {
         capture: true,
@@ -305,7 +311,7 @@ export const PopsIframe = {
       async (event) => {
         event.preventDefault();
         event.stopPropagation();
-        await PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
+        await PopsInstHandler.removeInstance([PopsInstData.iframe], guid, false);
         if (typeof config?.btn?.close?.callback === "function") {
           config.btn.close.callback(evtConfig, event);
         }
@@ -323,7 +329,7 @@ export const PopsIframe = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     return result;
   },

package/src/components/iframe/types/index.ts

@@ -1,16 +1,18 @@
-import type { PopsTitleConfig, PopsDragConfig, PopsGeneralConfig } from "../../../types/components";
-
+import type { EventEmiter } from "../../../event/EventEmiter";
+import type { PopsDragConfig, PopsGeneralConfig, PopsTitleConfig } from "../../../types/components";
 import type { PopsEventConfig } from "../../../types/event";
+import type { CustomEventMap } from "../../../types/EventEmitter";
 
 /**
  * pops.iframe的按钮点击事件回调的配置参数
  */
-export type PopsIframeClickEventConfig = PopsEventConfig & {
-  /**
-   * iframe元素
-   */
-  $iframe: HTMLIFrameElement;
-};
+export type PopsIframeClickEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>> =
+  PopsEventConfig<E> & {
+    /**
+     * iframe元素
+     */
+    $iframe: HTMLIFrameElement;
+  };
 
 /**
  * pops.iframe

package/src/components/loading/index.ts

@@ -1,7 +1,9 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
+import type { EventMap } from "../../types/EventEmitter";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoadingDefaultConfig } from "./defaultConfig";
@@ -12,14 +14,15 @@ export const PopsLoading = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const PopsType = "loading";
+    const emitter = new EventEmiter<EventMap>(PopsType);
+
     let config = PopsLoadingDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
     config = popsUtils.assign(config, __config__);
-
     config = PopsHandler.handleOnly(PopsType, config);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
@@ -76,17 +79,20 @@ export const PopsLoading = {
       $mask = handleMask.maskElement;
       $elList.push($mask);
     }
-    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, $mask);
+    const evtConfig = PopsHandler.handleLoadingEventConfig(config, guid, PopsType, $anim, $pops, emitter, $mask);
     popsDOMUtils.append(config.$parent, $elList);
     if ($mask != null) {
       $anim.after($mask);
     }
-    // @ts-ignore
     PopsHandler.handlePush(PopsType, {
+      $shadowContainer: $pops,
+      $shadowRoot: $pops,
       guid: guid,
       $anim: $anim,
-      $pops: $pops!,
-      $mask: $mask!,
+      $pops: $pops,
+      $mask: $mask,
+      emitter: emitter,
+      config: config,
     });
 
     if (config.isAbsolute) {

package/src/components/panel/defaultConfig.ts

@@ -867,5 +867,6 @@ export const PopsPanelDefaultConfig = (): DeepRequired<PopsPanelConfig> => {
     darkStyle: null,
     beforeAppendToPageCallBack() {},
     stopKeyDownEventPropagation: true,
+    listenEscapeKeyUpToExitDeepMenu: true,
   };
 };

package/src/components/panel/handlerComponents.ts

@@ -1,8 +1,9 @@
 import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+import type { EventEmiter } from "../../event/EventEmiter";
+import { PopsAnimation } from "../../PopsAnimation";
 import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -74,6 +75,7 @@ export const PanelHandlerComponents = () => {
       nodeStoreConfigKey: "data-view-config",
     },
     $config: {} as Required<PopsPanelConfig>,
+    emitter: null as any as EventEmiter<PopsPanelEventType>,
     /**
      * 初始化
      * @param data
@@ -91,12 +93,14 @@ export const PanelHandlerComponents = () => {
         $panelBottomLeftContainer: HTMLElement;
         $panelBottomRightContainer: HTMLElement;
       };
+      emitter: EventEmiter<PopsPanelEventType>;
     }) {
       const PopsType = "panel";
       this.$el = {
         ...data.$el,
       };
       this.$config = data.config;
+      this.emitter = data.emitter;
 
       this.asideULElement = this.$el.$panelLeftAside.querySelector<HTMLUListElement>(
         `ul.pops-${PopsType}-aside-top-container`
@@ -1022,7 +1026,8 @@ export const PanelHandlerComponents = () => {
             $target: this.$ele.button,
             content: getToolTipContent,
             zIndex: () => {
-              return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+              // return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+              return popsUtils.getMaxZIndexNodeInfoFromPoint(this.$ele.button)[0].zIndex;
             },
             isFixed: true,
             className: "github-tooltip",
@@ -3654,104 +3659,37 @@ export const PanelHandlerComponents = () => {
             className: "pops-panel-deepMenu-container-left-arrow-icon",
             innerHTML: PopsIcon.getIcon("arrowLeft")!,
           });
-          // 动画配置
-          const animOptions: KeyframeAnimationOptions = {
-            // 150 220 300
-            duration: 220,
-            easing: "ease-in-out",
-          };
-          // 进入动画
-          const enterViewTransition = () => {
-            // 隐藏旧的容器
-            popsDOMUtils.cssHide($currentSection, true);
-            popsDOMUtils.on(
-              $headerLeftArrow,
-              "click",
-              async (event) => {
-                popsDOMUtils.preventEvent(event);
-                // 返回动画
-                const leaveViewTransition = () => {
-                  const $prev = $currentSection;
-                  popsDOMUtils.cssShow($prev);
-                  $deepMenuSection.remove();
-                };
-                // 返回上一层菜单
-                if (that.$config.useDeepMenuSwtichAnimation && document.startViewTransition) {
-                  const leaveTransition = document.startViewTransition(leaveViewTransition);
-                  await leaveTransition.ready;
-                  // 向右移出
-                  await Promise.all([
-                    $deepMenuSection.animate(
-                      [
-                        {
-                          // from
-                          transform: "translateX(0)",
-                        },
-                        {
-                          // to
-                          transform: "translateX(100%)",
-                        },
-                      ],
-                      animOptions
-                    ).finished,
-                    // 向右移入
-                    $currentSection.animate(
-                      [
-                        {
-                          // from
-                          transform: "translateX(-100%)",
-                        },
-                        {
-                          // to
-                          transform: "translateX(0)",
-                        },
-                      ],
-                      animOptions
-                    ).finished,
-                  ]);
-                  await leaveTransition.finished;
-                } else {
-                  leaveViewTransition();
+          const switchAnim = PopsAnimation.createSwitchElementWithAnimation($currentSection, $deepMenuSection, {
+            useAnimation: that.$config.useDeepMenuSwtichAnimation,
+            enterToAddElementCallback: () => {
+              popsDOMUtils.on(
+                $headerLeftArrow,
+                "click",
+                async (event) => {
+                  popsDOMUtils.preventEvent(event);
+                  // 返回动画
+                  await switchAnim.exit();
+                  that.emitRenderRightContainer($currentSection);
+                },
+                {
+                  once: true,
                 }
-                that.emitRenderRightContainer($currentSection);
-              },
-              {
-                once: true,
-              }
-            );
-            popsDOMUtils.before($header.firstElementChild!, $headerLeftArrow);
-            $deepMenuHeaderUL.appendChild($header);
-            $deepMenuSection.appendChild($deepMenuHeaderUL);
-            $deepMenuSection.appendChild($deepMenuMain);
+              );
+              popsDOMUtils.before($header.firstElementChild!, $headerLeftArrow);
+              $deepMenuHeaderUL.appendChild($header);
+              $deepMenuSection.appendChild($deepMenuHeaderUL);
+              $deepMenuSection.appendChild($deepMenuMain);
 
-            if (viewConfig.views && Array.isArray(viewConfig.views)) {
-              for (let index = 0; index < viewConfig.views.length; index++) {
-                const formItemConfig = viewConfig.views[index];
-                this.initContainerItem($deepMenuMain, formItemConfig);
+              if (viewConfig.views && Array.isArray(viewConfig.views)) {
+                for (let index = 0; index < viewConfig.views.length; index++) {
+                  const formItemConfig = viewConfig.views[index];
+                  this.initContainerItem($deepMenuMain, formItemConfig);
+                }
               }
-            }
-            that.$el.$panelRightSectionWrapper.appendChild($deepMenuSection);
-          };
-          if (that.$config.useDeepMenuSwtichAnimation && document.startViewTransition) {
-            const transition = document.startViewTransition(enterViewTransition);
-            await transition.ready;
-            await $deepMenuSection.animate(
-              [
-                {
-                  // from
-                  transform: "translateX(100%)",
-                },
-                {
-                  // to
-                  transform: "translateX(0)",
-                },
-              ],
-              animOptions
-            ).finished;
-            await transition.finished;
-          } else {
-            enterViewTransition();
-          }
+              that.$el.$panelRightSectionWrapper.appendChild($deepMenuSection);
+            },
+          });
+          await switchAnim.enter();
           if (typeof viewConfig.afterEnterDeepMenuCallBack === "function") {
             viewConfig.afterEnterDeepMenuCallBack(viewConfig, {
               $sectionContainer: $deepMenuSection,
@@ -3916,20 +3854,12 @@ export const PanelHandlerComponents = () => {
      * @param $container 容器
      */
     emitRenderRightContainer($container: HTMLElement) {
-      const dataViewConfig: PopsPanelEventType["pops:renderRightContainer"]["viewConfig"] = Reflect.get(
-        $container,
-        this.$data.nodeStoreConfigKey
-      );
-      this.$el.$pops.dispatchEvent(
-        new CustomEvent<PopsPanelEventType["pops:renderRightContainer"]>(
-          <keyof PopsPanelEventType>"pops:renderRightContainer",
-          {
-            detail: {
-              viewConfig: dataViewConfig,
-            },
-          }
-        )
-      );
+      const dataViewConfig: Parameters<PopsPanelEventType["pops:renderRightContainer"]>["0"]["viewConfig"] =
+        Reflect.get($container, this.$data.nodeStoreConfigKey);
+
+      this.emitter.emit("pops:renderRightContainer", {
+        viewConfig: dataViewConfig,
+      });
     },
     /**
      *

package/src/components/panel/index.ts

@@ -1,20 +1,22 @@
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsInstHandler } from "../../handler/PopsInstHandler";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
-import type { PopsPanelConfig, PopsPanelEventType } from "./types";
 import { PopsPanelDefaultConfig } from "./defaultConfig";
 import { PanelHandlerComponents } from "./handlerComponents";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
+import type { PopsPanelConfig, PopsPanelEventType } from "./types";
 
 export const PopsPanel = {
   init(__config__: PopsPanelConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "panel";
+    const emitter = new EventEmiter<PopsPanelEventType>(popsType);
 
     let config: Required<PopsPanelConfig> = PopsPanelDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -54,7 +56,7 @@ export const PopsPanel = {
     ]);
 
     // 先把z-index提取出来
-    const zIndex = PopsHandler.handleZIndex(config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(config.zIndex);
     const maskHTML = PopsElementHandler.createMask(guid, zIndex);
 
     const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
@@ -144,6 +146,7 @@ export const PopsPanel = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -152,9 +155,7 @@ export const PopsPanel = {
 
     // 创建到页面中
     popsDOMUtils.append($shadowRoot, $elList);
-    if (typeof config.beforeAppendToPageCallBack === "function") {
-      config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-    }
+    emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
     popsDOMUtils.appendBody($shadowContainer);
     // 追加遮罩层元素
     if ($mask != null) {
@@ -177,6 +178,7 @@ export const PopsPanel = {
         $panelBottomLeftContainer,
         $panelBottomRightContainer,
       },
+      emitter,
     });
 
     PopsHandler.handlePush(popsType, {
@@ -187,11 +189,11 @@ export const PopsPanel = {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
       config: config,
-      destory: result.close,
+      emitter,
     });
     // 拖拽
     if (config.drag) {
-      PopsInstanceUtils.drag($pops, {
+      PopsInstHandler.drag($pops, {
         dragElement: $title,
         limit: config.dragLimit,
         extraDistance: config.dragExtraDistance,
@@ -199,23 +201,27 @@ export const PopsPanel = {
         endCallBack: config.dragEndCallBack,
       });
     }
+    if (config.listenEscapeKeyUpToExitDeepMenu) {
+      const escapeListener = popsDOMUtils.onKeyup(
+        globalThis,
+        (evt) => {
+          if (evt.key === "Escape" && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
+            // Esc
+            const $exitBtn = $panelRightSectionWrapper.querySelector<HTMLLIElement>(
+              ".pops-panel-deepMenu-container-left-arrow-icon"
+            );
+            if ($exitBtn) {
+              $exitBtn.click();
+            }
+          }
+        },
+        { capture: true }
+      );
+      emitter.on("pops:before-destory", () => {
+        escapeListener?.off();
+      });
+    }
 
-    return {
-      ...result,
-      addEventListener: <K extends keyof PopsPanelEventType>(
-        event: K,
-        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-        options?: boolean | EventListenerOptions
-      ) => {
-        $pops.addEventListener(event, listener as any, options);
-      },
-      removeEventListener: <K extends keyof PopsPanelEventType>(
-        event: K,
-        listener: (evt: CustomEvent<PopsPanelEventType[K]>) => void,
-        options?: boolean | EventListenerOptions
-      ) => {
-        $pops.removeEventListener(event, listener as any, options);
-      },
-    };
+    return result;
   },
 };