@whitesev/pops 3.3.5 → 4.0.0

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

@@ -36,12 +36,12 @@ export type PopsPanelEventType = {
   /**
    * 该事件在右侧容器内的元素改变时触发
    */
-  "pops:renderRightContainer": {
+  "pops:renderRightContainer": (data: {
     /**
      * 视图配置
      */
     viewConfig: PopsPanelContentConfig[] | PopsPanelDeepViewConfig;
-  };
+  }) => void;
 };
 
 /**
@@ -241,4 +241,9 @@ export interface PopsPanelConfig extends PopsTitleConfig, PopsDragConfig, PopsGe
    * @default true
    */
   useDeepMenuSwtichAnimation?: true;
+  /**
+   * 监听按键按下Esc来退出内部菜单
+   * @default true
+   */
+  listenEscapeKeyUpToExitDeepMenu?: boolean;
 }

package/src/components/prompt/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 { popsUtils } from "../../utils/PopsUtils";
 import { PopsPromptDefaultConfig } from "./defaultConfig";
 import type { PopsPromptConfig } from "./types/index";
@@ -14,6 +16,7 @@ export const PopsPrompt = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "prompt";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsPromptDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -53,7 +56,7 @@ export const PopsPrompt = {
     ]);
 
     // 先把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);
@@ -131,6 +134,7 @@ export const PopsPrompt = {
       popsType,
       $anim,
       $pops,
+      emitter,
       $mask
     );
     const result = PopsHandler.handleResultConfig(evtConfig);
@@ -146,10 +150,7 @@ export const PopsPrompt = {
     // 创建到页面中
 
     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);
@@ -162,11 +163,11 @@ export const PopsPrompt = {
       $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,

package/src/components/rightClickMenu/index.ts

@@ -1,6 +1,12 @@
+import { PopsCSS } from "../../PopsCSS";
 import { OriginPrototype } from "../../PopsCore";
+import { PopsIcon } from "../../PopsIcon";
 import { GlobalConfig } from "../../config/GlobalConfig";
+import { EventEmiter } from "../../event/EventEmiter";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import type { EventMap } from "../../types/EventEmitter";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -12,16 +18,13 @@ import type {
   PopsRightClickMenuItemStoreNodeValue,
   PopsRightClickMenuRootStoreNodeValue,
 } from "./types";
-import { PopsCSS } from "../../PopsCSS";
-import { PopsIcon } from "../../PopsIcon";
-import type { PopsType } from "../../types/main";
-import { PopsElementHandler } from "../../handler/PopsElementHandler";
 
 export const PopsRightClickMenu = {
   init(__config__: PopsRightClickMenuConfig) {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "rightClickMenu";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsRightClickMenuDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -154,13 +157,14 @@ export const PopsRightClickMenu = {
             guid: guid,
             $anim: rootElement,
             $pops: rootElement,
-            beforeRemoveCallBack(instCommonConfig) {
-              PopsContextMenu.closeAllMenu(instCommonConfig.$pops);
-            },
             config: config,
-            destory: () => {
-              PopsContextMenu.closeAllMenu(rootElement);
-            },
+            emitter,
+          });
+          emitter.on("pops:before-destory", () => {
+            PopsContextMenu.closeAllMenu(rootElement);
+          });
+          emitter.on("pops:destory", () => {
+            PopsContextMenu.closeAllMenu(rootElement);
           });
         }
       },
@@ -254,6 +258,7 @@ export const PopsRightClickMenu = {
         );
         const zIndex = this.getMenuZIndex();
         if (zIndex > 10000) {
+          // 大于默认值
           $menu.style.zIndex = zIndex.toString();
         }
         if (isChildren) {
@@ -274,7 +279,7 @@ export const PopsRightClickMenu = {
        * 动态获取配的z-index
        */
       getMenuZIndex() {
-        return PopsHandler.handleZIndex(config.zIndex);
+        return PopsHandler.getTargerOrFunctionValue(config.zIndex);
       },
       /**
        * 获取left、top偏移
@@ -395,9 +400,7 @@ export const PopsRightClickMenu = {
         popsDOMUtils.append($shadowRoot, menuElement);
         // 判断容器是否存在
         if (!document.contains($shadowContainer)) {
-          if (typeof config.beforeAppendToPageCallBack === "function") {
-            config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-          }
+          emitter.emit("pops:before-append-to-page", $shadowRoot, $shadowContainer);
           popsDOMUtils.appendBody($shadowContainer);
         }
         this.handlerShowMenuCSS(menuElement, menuEvent);

package/src/components/searchSuggestion/index.ts

@@ -1,8 +1,10 @@
 import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 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 type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
@@ -15,6 +17,7 @@ export const PopsSearchSuggestion = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "searchSuggestion";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsSearchSuggestionDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -54,6 +57,7 @@ export const PopsSearchSuggestion = {
       passive: true,
     };
     const SearchSuggestion = {
+      emitter: emitter,
       /**
        * 当前的环境，可以是document，可以是shadowroot，默认是document
        */
@@ -282,7 +286,7 @@ export const PopsSearchSuggestion = {
 					border: initial;
 					overflow: initial;
 					position: ${config.isAbsolute ? "absolute" : "fixed"};
-					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
+					z-index: ${PopsHandler.getTargerOrFunctionValue(config.zIndex)};
 				}
         .pops-${popsType}-search-suggestion-dropdown-wrapper{
 					max-height: ${config.maxHeight};

package/src/components/tooltip/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 type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
@@ -19,6 +21,7 @@ export class ToolTip {
     $content: null as unknown as HTMLElement,
     $arrow: null as unknown as HTMLElement,
   };
+  emitter: EventEmiter<EventMap>;
   $data = {
     config: null as any as Required<PopsToolTipConfig>,
     guid: null as any as string,
@@ -31,8 +34,10 @@ export class ToolTip {
     ShadowInfo: {
       $shadowContainer: HTMLDivElement;
       $shadowRoot: ShadowRoot | HTMLElement;
-    }
+    },
+    emitter: EventEmiter<EventMap>
   ) {
+    this.emitter = emitter;
     this.$data.config = config;
     this.$data.guid = guid;
     this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
@@ -85,7 +90,7 @@ export class ToolTip {
     // 处理className
     popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
     // 添加z-index
-    $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
+    $toolTipContainer.style.zIndex = PopsHandler.getTargerOrFunctionValue(this.$data.config.zIndex).toString();
     // 添加自定义style
     PopsElementHandler.addStyle($toolTipContainer, this.$data.config.style);
     // 添加自定义浅色style
@@ -133,7 +138,7 @@ export class ToolTip {
    * 获取z-index
    */
   getZIndex() {
-    const zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex);
+    const zIndex = PopsHandler.getTargerOrFunctionValue(this.$data.config.zIndex);
     return zIndex;
   }
   /**
@@ -328,9 +333,7 @@ export class ToolTip {
 
     if (!popsUtils.contains(this.$el.$shadowContainer)) {
       // 页面不存在Shadow，添加
-      if (typeof this.$data.config.beforeAppendToPageCallBack === "function") {
-        this.$data.config.beforeAppendToPageCallBack(this.$el.$shadowRoot, this.$el.$shadowContainer);
-      }
+      this.emitter.emit("pops:before-append-to-page", this.$el.$shadowRoot, this.$el.$shadowContainer);
       popsDOMUtils.append(document.body, this.$el.$shadowContainer);
     }
 
@@ -555,6 +558,7 @@ export const PopsTooltip = {
     const guid = popsUtils.getRandomGUID();
     // 设置当前类型
     const popsType: PopsType = "tooltip";
+    const emitter = new EventEmiter<EventMap>(popsType);
 
     let config = PopsTooltipDefaultConfig();
     config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
@@ -593,10 +597,15 @@ export const PopsTooltip = {
       },
     ]);
 
-    const toolTip = new ToolTip(config, guid, {
-      $shadowContainer,
-      $shadowRoot,
-    });
+    const toolTip = new ToolTip(
+      config,
+      guid,
+      {
+        $shadowContainer,
+        $shadowRoot,
+      },
+      emitter
+    );
     if (config.alwaysShow) {
       // 总是显示
       // 直接显示
@@ -611,6 +620,7 @@ export const PopsTooltip = {
       $shadowContainer,
       $shadowRoot,
       toolTip,
+      emitter,
     };
   },
 };

package/src/event/EventEmiter.ts

@@ -0,0 +1,95 @@
+import type { EventMap, CustomEventMap } from "../types/EventEmitter";
+import type { PopsType } from "../types/main";
+
+class EventEmiter<T extends CustomEventMap = CustomEventMap> {
+  #type: PopsType;
+  #data = new Map<
+    string,
+    {
+      type: PopsType;
+      time: number;
+      callback: (...args: any[]) => IPromise<void>;
+    }[]
+  >();
+  constructor(type: PopsType) {
+    this.#type = type;
+    document.addEventListener;
+  }
+  on<P extends keyof EventMap>(
+    eventName: P,
+    callback: EventMap[P]
+  ): {
+    off: () => IPromise<void>;
+    emit: (...args: Parameters<T[P]>) => IPromise<void>;
+  };
+  on<P extends keyof T>(
+    eventName: P,
+    callback: T[P]
+  ): {
+    off: () => IPromise<void>;
+    emit: (...args: Parameters<T[P]>) => IPromise<void>;
+  };
+  on<P extends keyof EventMap | keyof CustomEventMap>(eventName: P, callback: (EventMap & CustomEventMap)[P]) {
+    const eventList = this.#data.get(eventName) ?? [];
+    eventList.push({ type: this.#type, time: Date.now(), callback: callback });
+    this.#data.set(eventName, eventList);
+    return {
+      off: () => {
+        this.off(eventName as keyof EventMap, callback);
+      },
+      emit: (...args: Parameters<T[P]>) => {
+        this.emit(eventName, ...args);
+      },
+    };
+  }
+  off<P extends keyof EventMap>(eventName: P, callback: EventMap[P]): IPromise<void>;
+  off<P extends keyof T>(eventName: P, callback: T[P]): IPromise<void>;
+  off<P extends keyof EventMap | keyof CustomEventMap>(eventName: P, callback: (EventMap & CustomEventMap)[P]) {
+    const eventList = this.#data.get(eventName) ?? [];
+    let isOffSuccess = false;
+    for (let index = eventList.length - 1; index >= 0; index--) {
+      if (eventList[index].callback === callback) {
+        isOffSuccess = true;
+        eventList.splice(index, 1);
+      }
+    }
+    if (eventList.length === 0) {
+      // empty
+      this.#data.delete(eventName);
+    } else {
+      if (isOffSuccess) {
+        // update
+        this.#data.set(eventName, eventList);
+      }
+    }
+  }
+  emit<P extends keyof T>(eventName: P, ...args: Parameters<T[P]>): IPromise<void>;
+  emit<P extends keyof EventMap>(eventName: P, ...args: Parameters<EventMap[P]>): IPromise<void>;
+  async emit<P extends keyof EventMap | keyof CustomEventMap>(eventName: P, ...args: Parameters<T[P]>) {
+    const eventList = this.#data.get(eventName) ?? [];
+    for (const item of eventList) {
+      await item.callback(...args);
+    }
+  }
+  offAll<P extends keyof EventMap>(eventName?: P): IPromise<void>;
+  offAll<P extends keyof T>(eventName?: P): IPromise<void>;
+  offAll<P extends keyof EventMap | keyof CustomEventMap>(eventName?: P) {
+    if (typeof eventName === "string") {
+      this.#data.delete(eventName);
+    } else {
+      this.#data.clear();
+    }
+  }
+  /**
+   * 获取所有添加的事件
+   */
+  getAllEvents(eventName?: string) {
+    if (typeof eventName === "string") {
+      return this.#data.get(eventName);
+    } else {
+      return Array.from(this.#data.values());
+    }
+  }
+}
+
+export { EventEmiter };

package/src/handler/PopsElementHandler.ts

@@ -52,7 +52,7 @@ export const PopsElementHandler = {
     const popsPosition = __config__.position || "";
     if (config.zIndex != null) {
       popsAnimStyle += `z-index: ${zIndex};`;
-      popsStyle += `z-index: ${zIndex};`;
+      // popsStyle += `z-index: ${zIndex};`;
     }
     if (__config__.width != null) {
       popsStyle += `width: ${__config__.width};`;
@@ -61,15 +61,17 @@ export const PopsElementHandler = {
       popsStyle += `height: ${__config__.height};`;
     }
     const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
+    const popsClassNameList = ["pops"];
+    if (config.class) {
+      popsClassNameList.push(...config.class.split(" "));
+    }
     return /*html*/ `
 		<div class="pops-anim" anim="${__config__.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${
       config.style != null ? /*html*/ `<style tyle="text/css" data-name="style">${config.style}</style>` : ""
     }
     ${config.lightStyle != null ? /*html*/ `<style tyle="text/css" data-name="lightStyle">@media (prefers-color-scheme: light) {${config.lightStyle}}</style>` : ""}
     ${config.darkStyle != null ? /*html*/ `<style tyle="text/css" data-name="darkStyle">@media (prefers-color-scheme: dark) {${config.darkStyle}}</style>` : ""}
-			<div class="pops ${
-        config.class || ""
-      }" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
+			<div class="${popsClassNameList.join(" ")}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
 		</div>`;
   },
   /**

package/src/handler/PopsHandler.ts

@@ -6,16 +6,18 @@ import type { PopsIframeConfig } from "../components/iframe/types";
 import type { PopsLoadingConfig } from "../components/loading/types";
 import type { PopsPanelConfig } from "../components/panel/types";
 import type { PopsPromptConfig } from "../components/prompt/types/index";
-import { PopsCore } from "../PopsCore";
+import type { EventEmiter } from "../event/EventEmiter";
 import { PopsAnimation } from "../PopsAnimation";
+import { PopsCore } from "../PopsCore";
 import { PopsInstData } from "../PopsInst";
 import type { PopsGeneralConfig } from "../types/components";
 import type { PopsEventConfig, PopsHandlerEventConfig } from "../types/event";
+import type { CustomEventMap } from "../types/EventEmitter";
 import type { PopsInstGeneralConfig } from "../types/inst";
-import type { PopsInstStoreType, PopsType, PopsSupportAnimConfigType, PopsSupportOnlyConfig } from "../types/main";
+import type { PopsInstStoreType, PopsSupportAnimConfigType, PopsSupportOnlyConfig, PopsType } from "../types/main";
 import { popsDOMUtils } from "../utils/PopsDOMUtils";
-import { PopsInstanceUtils } from "../utils/PopsInstanceUtils";
 import { popsUtils } from "../utils/PopsUtils";
+import { PopsInstHandler } from "./PopsInstHandler";
 
 export const PopsHandler = {
   /**
@@ -159,10 +161,10 @@ export const PopsHandler = {
       function originalRun() {
         if (config.config.mask!.clickEvent!.toClose) {
           // 关闭
-          return PopsInstanceUtils.close(config.config, config.type, targetInst, config.guid, config.animElement);
+          return PopsInstHandler.close(config.config, config.type, targetInst, config.guid, config.animElement);
         } else if (config.config.mask!.clickEvent!.toHide) {
           // 隐藏
-          return PopsInstanceUtils.hide(
+          return PopsInstHandler.hide(
             config.config,
             config.type,
             targetInst,
@@ -373,7 +375,7 @@ export const PopsHandler = {
    * @param $mask 遮罩层
    * @param config 当前配置
    */
-  handleEventConfig(
+  handleEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -389,8 +391,9 @@ export const PopsHandler = {
     type: PopsInstStoreType,
     $anim: HTMLDivElement,
     $pops: HTMLDivElement,
+    emitter: E,
     $mask?: HTMLDivElement
-  ): PopsEventConfig {
+  ): PopsEventConfig<E> {
     return {
       $shadowContainer: $shadowContainer,
       $shadowRoot: $shadowRoot,
@@ -400,17 +403,18 @@ export const PopsHandler = {
       $mask: $mask,
       mode: type,
       guid: guid,
+      emitter: emitter,
       close() {
-        return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
+        return PopsInstHandler.close(config, type, PopsInstData[type], guid, $anim);
       },
       hide() {
-        return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.hide(config, type, PopsInstData[type], guid, $anim, $mask);
       },
       show($parent?: HTMLElement | Document | ShadowRoot) {
         if ($parent) {
           $parent.appendChild(PopsInstData[type][0].$shadowRoot);
         }
-        return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.show(config, type, PopsInstData[type], guid, $anim, $mask);
       },
     };
   },
@@ -423,7 +427,7 @@ export const PopsHandler = {
    * @param $mask 遮罩层
    * @param config 当前配置
    */
-  handleLoadingEventConfig(
+  handleLoadingEventConfig<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
     config:
       | PopsAlertConfig
       | PopsDrawerConfig
@@ -437,8 +441,9 @@ export const PopsHandler = {
     type: "loading",
     $anim: HTMLDivElement,
     $pops: HTMLDivElement,
+    emitter: E,
     $mask?: HTMLDivElement
-  ): Omit<PopsEventConfig, "$shadowContainer" | "$shadowRoot"> {
+  ): Omit<PopsEventConfig<E>, "$shadowContainer" | "$shadowRoot"> {
     return {
       $el: $anim,
       $anim: $anim,
@@ -446,14 +451,15 @@ export const PopsHandler = {
       $mask: $mask,
       mode: type,
       guid: guid,
+      emitter,
       close() {
-        return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
+        return PopsInstHandler.close(config, type, PopsInstData[type], guid, $anim);
       },
       hide() {
-        return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.hide(config, type, PopsInstData[type], guid, $anim, $mask);
       },
       show() {
-        return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
+        return PopsInstHandler.show(config, type, PopsInstData[type], guid, $anim, $mask);
       },
     };
   },
@@ -474,14 +480,14 @@ export const PopsHandler = {
    * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
    * @param callback 点击回调
    */
-  handleClickEvent(
-    type: PopsHandlerEventConfig["type"],
+  handleClickEvent<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
+    type: PopsHandlerEventConfig<E>["type"],
     $btn: HTMLElement,
-    eventConfig: PopsEventConfig,
-    callback?: (details: PopsHandlerEventConfig, event: PointerEvent | MouseEvent) => void
+    eventConfig: PopsEventConfig<E>,
+    callback?: (details: PopsHandlerEventConfig<E>, event: PointerEvent | MouseEvent) => void
   ) {
     if (typeof callback !== "function") return;
-    popsDOMUtils.on<PointerEvent | MouseEvent>(
+    return popsDOMUtils.on<PointerEvent | MouseEvent>(
       $btn,
       "click",
       (event) => {
@@ -523,16 +529,10 @@ export const PopsHandler = {
         callback && callback(event);
       }
     };
-    popsDOMUtils.on(PopsCore.globalThis, "keydown", keyboardEvent, {
+    const listener = popsDOMUtils.on(PopsCore.globalThis, "keydown", keyboardEvent, {
       capture: true,
     });
-    return {
-      removeKeyboardEvent() {
-        popsDOMUtils.off(globalThis, "keydown", keyboardEvent, {
-          capture: true,
-        });
-      },
-    };
+    return listener;
   },
   /**
    * 处理prompt的点击事件
@@ -542,13 +542,13 @@ export const PopsHandler = {
    * @param eventConfig 事件配置，由popsHandler.handleEventConfig创建的
    * @param callback 点击回调
    */
-  handlePromptClickEvent(
-    type: PopsHandlerEventConfig["type"],
+  handlePromptClickEvent<E extends EventEmiter<CustomEventMap> = EventEmiter<CustomEventMap>>(
+    type: PopsHandlerEventConfig<E>["type"],
     inputElement: HTMLInputElement | HTMLTextAreaElement,
     $btn: HTMLElement,
-    eventConfig: PopsEventConfig,
+    eventConfig: PopsEventConfig<E>,
     callback: (
-      details: PopsEventConfig & {
+      details: PopsEventConfig<E> & {
         type: any;
         text: string;
       },
@@ -572,14 +572,15 @@ export const PopsHandler = {
     );
   },
   /**
-   * 把配置的z-index配置转为数字
-   * @param zIndex
+   * 获取数值
+   * @param target
    */
-  handleZIndex(zIndex: number | (() => number)): number {
-    if (typeof zIndex === "function") {
-      return zIndex();
+  getTargerOrFunctionValue<T>(target: T | (() => T)): T {
+    if (typeof target === "function") {
+      const result = (target as () => T)();
+      return result;
     } else {
-      return zIndex;
+      return target;
     }
   },
   /**
@@ -596,10 +597,10 @@ export const PopsHandler = {
       if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
         const inst = PopsInstData[type as keyof typeof PopsInstData];
         if (inst) {
-          PopsInstanceUtils.removeInstance([inst], "", true);
+          PopsInstHandler.removeInstance([inst], "", true);
         }
       } else {
-        PopsInstanceUtils.removeInstance(
+        PopsInstHandler.removeInstance(
           [
             PopsInstData.alert,
             PopsInstData.confirm,
@@ -613,15 +614,32 @@ export const PopsHandler = {
           true
         );
       }
-    } else {
-      // 对配置进行处理
-      // 选择配置的z-index和已有的pops实例的最大z-index值
-      const originZIndex = config.zIndex;
-      config.zIndex = () => {
-        const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
-        return maxZIndex;
-      };
     }
+    config = this.handleZIndex(config);
+
+    return config;
+  },
+  /**
+   * 处理z-index
+   * @param config 配置
+   */
+  handleZIndex<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(config: T): T {
+    // 对配置进行处理
+    // 选择配置的z-index和已有的pops实例的最大z-index值
+    const originZIndex = config.zIndex;
+    const handler = () => {
+      let deviation = 100;
+      if (originZIndex.toString() !== handler.toString()) {
+        // 避免叠加覆盖
+        deviation += PopsHandler.getTargerOrFunctionValue(originZIndex) ?? 0;
+      }
+      let maxZIndex = deviation;
+      const pointZIndexInfoList = popsUtils.getMaxZIndexNodeInfoFromPoint(deviation);
+      const pointZIndexInfo = pointZIndexInfoList[0];
+      maxZIndex = Math.max(maxZIndex, pointZIndexInfo?.zIndex ?? deviation);
+      return maxZIndex;
+    };
+    config.zIndex = handler;
     return config;
   },
   /**