@whitesev/pops 3.3.4 → 4.0.0

package/dist/index.esm.js

@@ -1,3 +1,5 @@
+const version = "4.0.0";
+
 const GlobalConfig = {
     config: {},
     /**
@@ -51,6 +53,72 @@ const GlobalConfig = {
     },
 };
 
+class EventEmiter {
+    #type;
+    #data = new Map();
+    constructor(type) {
+        this.#type = type;
+    }
+    on(eventName, callback) {
+        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, callback);
+            },
+            emit: (...args) => {
+                this.emit(eventName, ...args);
+            },
+        };
+    }
+    off(eventName, callback) {
+        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);
+            }
+        }
+    }
+    async emit(eventName, ...args) {
+        const eventList = this.#data.get(eventName) ?? [];
+        for (const item of eventList) {
+            await item.callback(...args);
+        }
+    }
+    offAll(eventName) {
+        if (typeof eventName === "string") {
+            this.#data.delete(eventName);
+        }
+        else {
+            this.#data.clear();
+        }
+    }
+    /**
+     * 获取所有添加的事件
+     */
+    getAllEvents(eventName) {
+        if (typeof eventName === "string") {
+            return this.#data.get(eventName);
+        }
+        else {
+            return Array.from(this.#data.values());
+        }
+    }
+}
+
 var SVG_min = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" data-type=\"min\">\r\n  <path fill=\"currentColor\" d=\"M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z\"></path>\r\n</svg>\r\n";
 
 var SVG_mise = "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" data-type=\"mise\">\r\n  <path\r\n    fill=\"currentColor\"\r\n    d=\"M885.333333 85.333333H330.410667a53.333333 53.333333 0 0 0-53.333334 53.333334v106.666666H138.666667A53.333333 53.333333 0 0 0 85.333333 298.666667v586.666666a53.333333 53.333333 0 0 0 53.333334 53.333334H725.333333a53.333333 53.333333 0 0 0 53.333334-53.333334V746.154667h106.666666c29.44 0 53.333333-23.893333 53.333334-53.333334V138.666667A53.333333 53.333333 0 0 0 885.333333 85.333333zM725.333333 692.821333v192.512H138.666667V298.666667H725.333333v394.154666z m157.866667 0H778.666667V298.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H330.410667v-106.666666h554.922666l-2.133333 554.154666z\"></path>\r\n</svg>\r\n";
@@ -251,6 +319,16 @@ function e(e){e.use(r$2,{name:"doubletap",tapTimes:2});const a=e.get("doubletap"
 class i extends l$1{constructor(t,u$1){super(t,u$1),this.use(r$2),this.use(u),this.use(a),this.use(c),this.use(r),this.use(i$1);}}i.STATE_POSSIBLE=0,i.STATE_START=4,i.STATE_MOVE=5,i.STATE_END=1,i.STATE_CANCELLED=3,i.STATE_FAILED=2,i.STATE_RECOGNIZED=1,i.tap=r$2,i.pan=u,i.swipe=a,i.press=c,i.rotate=i$1,i.pinch=r,i.doubletap=e;
 
 class PopsUtils {
+    /**
+     * 超时时间
+     */
+    sleep(timeout) {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(true);
+            }, timeout);
+        });
+    }
     /**
      * 判断是否是window，例如window、self、globalThis
      * @param target
@@ -542,6 +620,127 @@ class PopsUtils {
         }
         target[key] = newArr;
     }
+    getMaxZIndexNodeInfoFromPoint($el, deviation) {
+        if (typeof $el === "function") {
+            $el = $el();
+        }
+        if (typeof $el === "number") {
+            deviation = $el;
+            $el = void 0;
+        }
+        if (typeof deviation !== "number" || Number.isNaN(deviation)) {
+            deviation = 10;
+        }
+        const leftTop = {
+            x: globalThis.innerWidth * (1 / 8),
+            y: globalThis.innerHeight * (1 / 8),
+        };
+        const leftBottom = {
+            x: globalThis.innerWidth * (1 / 8),
+            y: globalThis.innerHeight * (7 / 8),
+        };
+        const rightTop = {
+            x: globalThis.innerWidth * (7 / 8),
+            y: globalThis.innerHeight * (1 / 8),
+        };
+        const rightBottom = {
+            x: globalThis.innerWidth * (7 / 8),
+            y: globalThis.innerHeight * (7 / 8),
+        };
+        const center = {
+            x: globalThis.innerWidth / 2,
+            y: globalThis.innerHeight / 2,
+        };
+        const delayHandlerElementPostionList = [
+            leftTop,
+            leftBottom,
+            rightTop,
+            rightBottom,
+            center,
+        ];
+        if ($el) {
+            delayHandlerElementPostionList.length = 0;
+            if (Array.isArray($el)) {
+                delayHandlerElementPostionList.push(...$el);
+            }
+            else {
+                delayHandlerElementPostionList.push($el);
+            }
+        }
+        const positionInfoList = delayHandlerElementPostionList
+            .map((position) => {
+            let positionNode;
+            let positionX;
+            let positionY;
+            if (position instanceof HTMLElement) {
+                positionNode = position;
+                const nodeRect = position.getBoundingClientRect();
+                positionX = nodeRect.x + nodeRect.width / 2;
+                positionY = nodeRect.y + nodeRect.height / 2;
+            }
+            else {
+                positionNode = document.elementFromPoint(position.x, position.y);
+                positionX = position.x;
+                positionY = position.y;
+            }
+            const shadowRoot = positionNode?.shadowRoot;
+            if (shadowRoot) {
+                positionNode = shadowRoot.elementFromPoint(positionX, positionY);
+            }
+            if (positionNode instanceof HTMLStyleElement)
+                return;
+            if (positionNode instanceof HTMLScriptElement)
+                return;
+            if (positionNode instanceof HTMLMetaElement)
+                return;
+            if (positionNode instanceof HTMLHeadElement)
+                return;
+            if (!(positionNode instanceof HTMLElement))
+                return;
+            let parent = positionNode;
+            let zIndex = 0;
+            let maxZIndexNode = null;
+            while (parent) {
+                const nodeStyle = globalThis.getComputedStyle(parent);
+                const nodeZIndex = parseInt(nodeStyle.zIndex);
+                if (nodeStyle.position !== "static" && !isNaN(nodeZIndex)) {
+                    if (nodeZIndex > zIndex) {
+                        zIndex = nodeZIndex;
+                        maxZIndexNode = parent;
+                    }
+                }
+                parent = parent.parentElement;
+            }
+            return {
+                /** 处理了偏移量后的z-index值 */
+                zIndex: zIndex + deviation,
+                /** 原始z-index值 */
+                originZIndex: zIndex,
+                /** 拥有最大z-index的元素 */
+                node: maxZIndexNode,
+                /** 目标坐标元素 */
+                positionNode: positionNode,
+                /** x坐标 */
+                positionX: positionX,
+                /** y坐标 */
+                positionY: positionY,
+            };
+        })
+            .filter((it) => it != null);
+        // 降序排序
+        positionInfoList.sort((a, b) => {
+            if (a.zIndex < b.zIndex) {
+                return 1;
+            }
+            else if (a.zIndex > b.zIndex) {
+                return -1;
+            }
+            else {
+                return 0;
+            }
+        });
+        return positionInfoList;
+    }
 }
 const popsUtils = new PopsUtils();
 
@@ -832,16 +1031,6 @@ class PopsDOMUtilsEvent {
             // 这是存在selector的情况
             listenerOption = getOption(args, 4, listenerOption);
         }
-        // 是否移除所有事件
-        let isRemoveAll = false;
-        if (args.length === 2) {
-            // 目标函数、事件名
-            isRemoveAll = true;
-        }
-        else if ((args.length === 3 && typeof args[2] === "string") || Array.isArray(args[2])) {
-            // 目标函数、事件名、子元素选择器
-            isRemoveAll = true;
-        }
         if (args.length === 5 && typeof args[4] === "function" && typeof filter !== "function") {
             // 目标函数、事件名、回调函数、事件配置、过滤函数
             filter = option;
@@ -871,7 +1060,7 @@ class PopsDOMUtilsEvent {
                         // 事件的配置项不同
                         flag = false;
                     }
-                    if (flag || isRemoveAll) {
+                    if (flag) {
                         elementItem.removeEventListener(eventName, handler.callback, handler.option);
                         const findIndex = handlers.findIndex((item) => item === handler);
                         if (findIndex !== -1) {
@@ -1263,31 +1452,6 @@ class PopsDOMUtilsEvent {
         const listener = this.on(target, "keydown", handler, option);
         return listener;
     }
-    /**
-     * 当按键按下时触发事件
-     * keydown - > keypress - > keyup
-     * @param target 目标
-     * @param handler 事件处理函数
-     * @param option 配置
-     * @example
-     * // 监听a.xx元素的按键按下
-     * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
-     *   console.log("按键按下");
-     * })
-     * DOMUtils.keypress("a.xx",()=>{
-     *   console.log("按键按下");
-     * })
-     */
-    onKeypress(target, handler, option) {
-        if (target == null) {
-            return;
-        }
-        if (typeof target === "string") {
-            target = this.selector(target);
-        }
-        const listener = this.on(target, "keypress", handler, option);
-        return listener;
-    }
     preventEvent(...args) {
         /**
          * 阻止事件的默认行为发生，并阻止事件传播
@@ -2458,7 +2622,7 @@ 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};`;
@@ -2467,11 +2631,15 @@ 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>`;
     },
     /**
@@ -2837,6 +3005,105 @@ const PopsAnimation = {
     hasAnim(name) {
         return Object.prototype.hasOwnProperty.call(this.$data, name);
     },
+    /**
+     * 带动画的进入元素
+     * @param $el 当前元素
+     * @param $next 切换的元素
+     * @param option 配置
+     */
+    createSwitchElementWithAnimation($el, $next, option) {
+        const animOptions = {
+            // 150 220 300
+            duration: 220,
+            easing: "ease-in-out",
+            ...(option.animOptions ?? {}),
+        };
+        if (option.useAnimation == null) {
+            option.useAnimation = true;
+        }
+        return {
+            /**
+             * 进入
+             */
+            async enter() {
+                const transitionEndCallback = async () => {
+                    // 先直接隐藏旧的容器
+                    popsDOMUtils.cssHide($el, true);
+                    // 添加元素
+                    await option.enterToAddElementCallback();
+                };
+                // 进入下一层
+                if (option.useAnimation && typeof document.startViewTransition == "function") {
+                    // 处理添加的元素的动画
+                    const transition = document.startViewTransition(transitionEndCallback);
+                    await transition.ready;
+                    await $next.animate(
+                    // 从右向左移入（进入动画）
+                    [
+                        {
+                            // from
+                            transform: "translateX(100%)",
+                        },
+                        {
+                            // to
+                            transform: "translateX(0)",
+                        },
+                    ], animOptions).finished;
+                    await transition.finished;
+                }
+                else {
+                    await transitionEndCallback();
+                }
+            },
+            /**
+             * 退出
+             */
+            async exit() {
+                // 返回上一层菜单
+                const transitionEndCallback = async () => {
+                    // 显示上层菜单
+                    popsDOMUtils.cssShow($el);
+                    // 移除下一层的菜单
+                    $next.remove();
+                    if (typeof option.exitToRemoveElementCallback === "function") {
+                        await option.exitToRemoveElementCallback();
+                    }
+                };
+                if (option.useAnimation && typeof document.startViewTransition == "function") {
+                    const leaveTransition = document.startViewTransition(transitionEndCallback);
+                    await leaveTransition.ready;
+                    await Promise.all([
+                        // 从原位置向右移出
+                        $next.animate([
+                            {
+                                // from
+                                transform: "translateX(0)",
+                            },
+                            {
+                                // to
+                                transform: "translateX(100%)",
+                            },
+                        ], animOptions).finished,
+                        // 从最左边向右移入
+                        $el.animate([
+                            {
+                                // from
+                                transform: "translateX(-100%)",
+                            },
+                            {
+                                // to
+                                transform: "translateX(0)",
+                            },
+                        ], animOptions).finished,
+                    ]);
+                    await leaveTransition.finished;
+                }
+                else {
+                    await transitionEndCallback();
+                }
+            },
+        };
+    },
 };
 
 /**
@@ -2856,137 +3123,7 @@ const PopsInstData = {
     tooltip: [],
 };
 
-const PopsInstanceUtils = {
-    /**
-     * 获取页面中最大的z-index的元素信息
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @param node 进行判断的元素，默认是document
-     * @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
-     * @example
-     * Utils.getMaxZIndexNodeInfo();
-     * > {
-     *   node: ...,
-     *   zIndex: 1001
-     * }
-     **/
-    getMaxZIndexNodeInfo(deviation = 1, target = PopsCore.document, ignoreCallBack) {
-        deviation = Number.isNaN(deviation) ? 1 : deviation;
-        // 最大值 2147483647
-        // const maxZIndex = Math.pow(2, 31) - 1;
-        // 比较值 2000000000
-        const maxZIndexCompare = 2 * Math.pow(10, 9);
-        // 当前页面最大的z-index
-        let zIndex = 0;
-        // 当前的最大z-index的元素，调试使用
-        let maxZIndexNode = null;
-        /**
-         * 元素是否可见
-         * @param $css
-         */
-        function isVisibleNode($css) {
-            return $css.position !== "static" && $css.display !== "none";
-        }
-        /**
-         * 查询元素的z-index
-         * 并比较值是否是已获取的最大值
-         * @param $ele
-         */
-        function queryMaxZIndex($ele) {
-            if (typeof ignoreCallBack === "function") {
-                const ignoreResult = ignoreCallBack($ele);
-                if (typeof ignoreResult === "boolean" && !ignoreResult) {
-                    return;
-                }
-            }
-            /** 元素的样式 */
-            const nodeStyle = PopsCore.window.getComputedStyle($ele);
-            // 不对position为static和display为none的元素进行获取它们的z-index
-            if (isVisibleNode(nodeStyle)) {
-                const nodeZIndex = parseInt(nodeStyle.zIndex);
-                if (!isNaN(nodeZIndex)) {
-                    if (nodeZIndex > zIndex) {
-                        // 赋值到全局
-                        zIndex = nodeZIndex;
-                        maxZIndexNode = $ele;
-                    }
-                }
-                // 判断shadowRoot
-                if ($ele.shadowRoot != null && $ele instanceof ShadowRoot) {
-                    $ele.shadowRoot.querySelectorAll("*").forEach(($shadowEle) => {
-                        queryMaxZIndex($shadowEle);
-                    });
-                }
-            }
-        }
-        target.querySelectorAll("*").forEach(($ele) => {
-            queryMaxZIndex($ele);
-        });
-        zIndex += deviation;
-        if (zIndex >= maxZIndexCompare) {
-            // 最好不要超过最大值
-            zIndex = maxZIndexCompare;
-        }
-        return {
-            node: maxZIndexNode,
-            zIndex: zIndex,
-        };
-    },
-    /**
-     * 获取pops所有弹窗中的最大的z-index
-     * @param deviation
-     */
-    getPopsMaxZIndex(deviation = 1) {
-        deviation = Number.isNaN(deviation) ? 1 : deviation;
-        // 最大值 2147483647
-        // const browserMaxZIndex = Math.pow(2, 31) - 1;
-        // 比较值 2000000000
-        const maxZIndex = 2 * Math.pow(10, 9);
-        // 当前页面最大的z-index
-        let zIndex = 0;
-        // 当前的最大z-index的元素，调试使用
-        let maxZIndexNode = null;
-        /**
-         * 元素是否可见
-         * @param $css
-         */
-        function isVisibleNode($css) {
-            return $css.position !== "static" && $css.display !== "none";
-        }
-        Object.keys(PopsInstData).forEach((instKeyName) => {
-            const instData = PopsInstData[instKeyName];
-            for (let index = 0; index < instData.length; index++) {
-                const inst = instData[index];
-                const nodeStyle = window.getComputedStyle(inst.$anim);
-                // 不对position为static和display为none的元素进行获取它们的z-index
-                if (isVisibleNode(nodeStyle)) {
-                    const nodeZIndex = parseInt(nodeStyle.zIndex);
-                    if (!isNaN(nodeZIndex)) {
-                        if (nodeZIndex > zIndex) {
-                            zIndex = nodeZIndex;
-                            maxZIndexNode = inst.$anim;
-                        }
-                    }
-                }
-            }
-        });
-        zIndex += deviation;
-        const isOverMaxZIndex = zIndex >= maxZIndex;
-        if (isOverMaxZIndex) {
-            // 超出z-index最大值
-            zIndex = maxZIndex;
-        }
-        return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
-    },
-    /**
-     * 获取页面中最大的z-index
-     * @param deviation 获取最大的z-index值的偏移，默认是+1
-     * @example
-     * getMaxZIndex();
-     * > 1001
-     **/
-    getMaxZIndex(deviation = 1) {
-        return this.getMaxZIndexNodeInfo(deviation).zIndex;
-    },
+const PopsInstHandler = {
     /**
      * 删除配置中对应的对象
      * @param totalInstConfigList 配置实例列表
@@ -2998,21 +3135,21 @@ const PopsInstanceUtils = {
          * 移除元素实例
          * @param instCommonConfig
          */
-        const removeInst = function (instCommonConfig) {
-            if (typeof instCommonConfig.beforeRemoveCallBack === "function") {
-                // 调用移除签的回调
-                instCommonConfig.beforeRemoveCallBack(instCommonConfig);
-            }
+        const removeInst = async (instCommonConfig) => {
+            await instCommonConfig.emitter.emit("pops:before-destory", instCommonConfig);
             instCommonConfig?.$anim?.remove();
             instCommonConfig?.$pops?.remove();
             instCommonConfig?.$mask?.remove();
             instCommonConfig?.$shadowContainer?.remove();
+            await instCommonConfig.emitter.emit("pops:destory");
+            // 再清空全部监听的事件
+            await instCommonConfig.emitter.offAll();
         };
         const asyncInstTask = [];
         // [ inst[], inst[],...]
-        totalInstConfigList.forEach((instConfigList) => {
-            //  inst[]
-            instConfigList.forEach(async (instConfigItem, index) => {
+        for (const instConfigList of totalInstConfigList) {
+            for (let index = 0; index < instConfigList.length; index++) {
+                const instConfigItem = instConfigList[index];
                 // 移除全部或者guid相同
                 if (isAll || (typeof guid === "string" && instConfigItem.guid === guid)) {
                     // 判断是否有动画
@@ -3024,8 +3161,8 @@ const PopsInstanceUtils = {
                         popsDOMUtils.css(instConfigItem.$anim, "animation-name", reverseAnimName);
                         if (PopsAnimation.hasAnim(popsDOMUtils.css(instConfigItem.$anim, "animation-name"))) {
                             asyncInstTask.push(new Promise((resolve) => {
-                                popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), function () {
-                                    removeInst(instConfigItem);
+                                popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), async () => {
+                                    await removeInst(instConfigItem);
                                     resolve();
                                 }, {
                                     capture: true,
@@ -3033,16 +3170,17 @@ const PopsInstanceUtils = {
                             }));
                         }
                         else {
-                            removeInst(instConfigItem);
+                            asyncInstTask.push(removeInst(instConfigItem));
                         }
                     }
                     else {
-                        removeInst(instConfigItem);
+                        asyncInstTask.push(removeInst(instConfigItem));
                     }
                     instConfigList.splice(index, 1);
+                    index--;
                 }
-            });
-        });
+            }
+        }
         await Promise.all(asyncInstTask);
         return totalInstConfigList;
     },
@@ -3056,60 +3194,71 @@ const PopsInstanceUtils = {
      * @param $mask
      */
     hide(config, popsType, instConfigList, guid, $anim, $mask) {
-        return new Promise((resolve) => {
+        // oxlint-disable-next-line no-async-promise-executor
+        return new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
-            if (popsType === "drawer") {
-                const drawerConfig = config;
-                popsUtils.setTimeout(() => {
-                    if ($mask) {
-                        popsDOMUtils.css($mask, "display", "none");
-                    }
-                    if (["top", "bottom"].includes(drawerConfig.direction)) {
-                        $pops.style.setProperty("height", "0");
-                    }
-                    else if (["left", "right"].includes(drawerConfig.direction)) {
-                        $pops.style.setProperty("width", "0");
+            const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
+            if (fintInst) {
+                // 存在实例
+                const startAnim = async () => {
+                    if (popsType === "drawer") {
+                        // drawer是抽屉
+                        // 单独处理动画
+                        const drawerConfig = config;
+                        await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+                        if ($mask) {
+                            popsDOMUtils.css($mask, "display", "none");
+                        }
+                        const direction = drawerConfig.direction;
+                        const size = "0";
+                        if (["top", "bottom"].includes(direction)) {
+                            $pops.style.setProperty("height", size);
+                        }
+                        else if (["left", "right"].includes(direction)) {
+                            $pops.style.setProperty("width", size);
+                        }
+                        else {
+                            console.error("未知direction: ", direction);
+                        }
                     }
                     else {
-                        console.error("未知direction：", drawerConfig.direction);
+                        instConfigItem.$anim.style.width = "100%";
+                        instConfigItem.$anim.style.height = "100%";
+                        Reflect.set(instConfigItem.$anim.style, "animation-name", instConfigItem.$anim.getAttribute("anim") + "-reverse");
                     }
-                    resolve();
-                }, drawerConfig.closeDelay);
-            }
-            else {
-                const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
-                if (fintInst) {
-                    // 存在动画
-                    const instConfigItem = fintInst;
-                    instConfigItem.$anim.style.width = "100%";
-                    instConfigItem.$anim.style.height = "100%";
-                    Reflect.set(instConfigItem.$anim.style, "animation-name", instConfigItem.$anim.getAttribute("anim") + "-reverse");
-                    if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
-                        /**
-                         * 动画结束的回调
-                         */
-                        function animationendCallBack() {
-                            instConfigItem.$anim.style.display = "none";
-                            if (instConfigItem.$mask) {
-                                instConfigItem.$mask.style.display = "none";
-                            }
-                            popsDOMUtils.off(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
-                                capture: true,
-                            });
-                            resolve();
-                        }
-                        popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
-                            capture: true,
-                        });
+                };
+                const endCallback = () => {
+                    instConfigItem.$anim.style.display = "none";
+                    if (instConfigItem.$mask) {
+                        instConfigItem.$mask.style.display = "none";
                     }
-                    else {
-                        instConfigItem.$anim.style.display = "none";
-                        if (instConfigItem.$mask) {
-                            instConfigItem.$mask.style.display = "none";
-                        }
+                    fintInst.emitter.emit("pops:hide", instConfigItem);
+                };
+                const instConfigItem = fintInst;
+                fintInst.emitter.emit("pops:before-hide", instConfigItem);
+                await startAnim();
+                if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+                    /**
+                     * 动画结束的回调
+                     */
+                    const animationendCallBack = () => {
+                        listener.off();
+                        endCallback();
                         resolve();
-                    }
+                    };
+                    const listener = popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
+                        capture: true,
+                        once: true,
+                    });
                 }
+                else {
+                    endCallback();
+                    resolve();
+                }
+            }
+            else {
+                console.error("hide-error: 该实例未存储");
+                resolve();
             }
         });
     },
@@ -3123,97 +3272,128 @@ const PopsInstanceUtils = {
      * @param $mask
      */
     show(config, popsType, instConfigList, guid, $anim, $mask) {
-        return new Promise((resolve) => {
+        // oxlint-disable-next-line no-async-promise-executor
+        return new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
-            if (popsType === "drawer") {
-                const drawerConfig = config;
-                popsUtils.setTimeout(() => {
-                    if ($mask) {
-                        popsDOMUtils.css($mask, "display", "");
-                    }
-                    const direction = drawerConfig.direction;
-                    const size = drawerConfig.size.toString();
-                    if (["top", "bottom"].includes(direction)) {
-                        $pops.style.setProperty("height", size);
-                    }
-                    else if (["left", "right"].includes(direction)) {
-                        $pops.style.setProperty("width", size);
+            const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
+            if (fintInst) {
+                const startAnim = async () => {
+                    if (popsType === "drawer") {
+                        // drawer是抽屉
+                        // 单独处理动画
+                        const drawerConfig = config;
+                        await popsUtils.sleep(drawerConfig.openDelay ?? 0);
+                        if ($mask) {
+                            popsDOMUtils.css($mask, "display", "");
+                        }
+                        const direction = drawerConfig.direction;
+                        const size = drawerConfig.size.toString();
+                        if (["top", "bottom"].includes(direction)) {
+                            $pops.style.setProperty("height", size);
+                        }
+                        else if (["left", "right"].includes(direction)) {
+                            $pops.style.setProperty("width", size);
+                        }
+                        else {
+                            console.error("未知direction：", direction);
+                        }
                     }
                     else {
-                        console.error("未知direction：", direction);
+                        instConfigItem.$anim.style.width = "";
+                        instConfigItem.$anim.style.height = "";
+                        Reflect.set(instConfigItem.$anim.style, "animation-name", instConfigItem.$anim.getAttribute("anim").replace("-reverse", ""));
+                    }
+                };
+                const endCallback = () => {
+                    instConfigItem.$anim.style.display = "";
+                    if (instConfigItem.$mask) {
+                        instConfigItem.$mask.style.display = "";
                     }
+                    fintInst.emitter.emit("pops:show", instConfigItem);
+                };
+                const instConfigItem = fintInst;
+                fintInst.emitter.emit("pops:before-show", instConfigItem);
+                await startAnim();
+                if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
+                    /**
+                     * 动画结束的回调
+                     */
+                    const animationendCallBack = () => {
+                        listener.off();
+                        endCallback();
+                        resolve();
+                    };
+                    const listener = popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
+                        capture: true,
+                    });
+                }
+                else {
+                    endCallback();
                     resolve();
-                }, drawerConfig.openDelay ?? 0);
+                }
             }
             else {
-                const fintInst = instConfigList.find((instConfigItem) => instConfigItem.guid === guid);
-                if (fintInst) {
-                    const instConfigItem = fintInst;
-                    instConfigItem.$anim.style.width = "";
-                    instConfigItem.$anim.style.height = "";
-                    Reflect.set(instConfigItem.$anim.style, "animation-name", instConfigItem.$anim.getAttribute("anim").replace("-reverse", ""));
-                    if (PopsAnimation.hasAnim(Reflect.get(instConfigItem.$anim.style, "animation-name"))) {
-                        /**
-                         * 动画结束的回调
-                         */
-                        function animationendCallBack() {
-                            popsDOMUtils.off(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
-                                capture: true,
-                            });
-                            resolve();
-                        }
-                        instConfigItem.$anim.style.display = "";
-                        if (instConfigItem.$mask) {
-                            instConfigItem.$mask.style.display = "";
-                        }
-                        popsDOMUtils.on(instConfigItem.$anim, popsDOMUtils.getAnimationEndNameList(), animationendCallBack, {
-                            capture: true,
-                        });
-                    }
-                    else {
-                        instConfigItem.$anim.style.display = "";
-                        if (instConfigItem.$mask) {
-                            instConfigItem.$mask.style.display = "";
-                        }
-                        resolve();
-                    }
+                console.error("show-error: 该实例未存储");
+                resolve();
+            }
+        });
+    },
+    /**
+     * 关闭
+     * @param popsType
+     * @param instConfigList
+     * @param guid
+     * @param config
+     * @param $anim
+     */
+    async close(config, popsType, instConfigList, guid, $anim) {
+        // 判断组件内部是否有rightClickMenu、tooltip、searchSuggestion组件
+        // 有的话也需要关闭
+        PopsInstData.rightClickMenu.forEach((itemConfig) => {
+            const config = itemConfig.config;
+            if (config.$target instanceof HTMLElement) {
+                const $root = config.$target.getRootNode();
+                if ($root instanceof HTMLElement && $root.parentElement == null) {
+                    // 触发销毁元素
+                    itemConfig.emitter.emit("pops:before-destory", itemConfig);
+                }
+            }
+        });
+        PopsInstData.tooltip.forEach((itemConfig) => {
+            const config = itemConfig.config;
+            if (config.$target instanceof HTMLElement) {
+                const $root = config.$target.getRootNode();
+                if ($root instanceof HTMLElement && $root.parentElement == null) {
+                    // 触发销毁元素
+                    itemConfig.emitter.emit("pops:before-destory", itemConfig);
                 }
             }
         });
-    },
-    /**
-     * 关闭
-     * @param popsType
-     * @param instConfigList
-     * @param guid
-     * @param config
-     * @param $anim
-     */
-    async close(config, popsType, instConfigList, guid, $anim) {
         // eslint-disable-next-line no-async-promise-executor
         await new Promise(async (resolve) => {
             const $pops = $anim.querySelector(".pops[type-value]");
             const drawerConfig = config;
-            /**
-             * 动画结束事件
-             */
-            function transitionendEvent() {
+            const start = () => {
                 /**
                  * 弹窗已关闭的回调
                  */
-                async function closeCallBack(event) {
+                const transtionEndCallback = async (event) => {
                     if (event.propertyName !== "transform") {
                         return;
                     }
-                    popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
-                    await PopsInstanceUtils.removeInstance([instConfigList], guid);
+                    listener.off();
+                    await PopsInstHandler.removeInstance([instConfigList], guid);
                     resolve();
-                }
+                };
                 // 监听过渡结束
-                popsDOMUtils.on($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
-                const popsTransForm = getComputedStyle($pops).transform;
+                const listener = popsDOMUtils.on($pops, popsDOMUtils.getTransitionEndNameList(), transtionEndCallback, {
+                    once: true,
+                });
+                const popsTransForm = globalThis.getComputedStyle($pops).transform;
                 if (popsTransForm !== "none") {
-                    popsDOMUtils.emit($pops, popsDOMUtils.getTransitionEndNameList(), void 0, true);
+                    // 不存在动画
+                    // 直接移除实例
+                    listener.emit({ propertyName: "transform" });
                     return;
                 }
                 if (["top"].includes(drawerConfig.direction)) {
@@ -3229,41 +3409,18 @@ const PopsInstanceUtils = {
                     $pops.style.setProperty("transform", "translateX(100%)");
                 }
                 else {
-                    console.error("未知direction：", drawerConfig.direction);
+                    console.error("未知direction: ", drawerConfig.direction);
                 }
-            }
+            };
             if (popsType === "drawer") {
-                popsUtils.setTimeout(() => {
-                    transitionendEvent();
-                }, drawerConfig.closeDelay);
+                await popsUtils.sleep(drawerConfig.closeDelay ?? 0);
+                start();
             }
             else {
-                await PopsInstanceUtils.removeInstance([instConfigList], guid);
+                await PopsInstHandler.removeInstance([instConfigList], guid);
                 resolve();
             }
         });
-        // 判断组件内是否有rightClickMenu、tooltip、searchSuggestion组件
-        // 有的话也需要关闭
-        PopsInstData.rightClickMenu.forEach((itemConfig) => {
-            const config = itemConfig.config;
-            if (config.$target instanceof HTMLElement) {
-                const $root = config.$target.getRootNode();
-                if ($root instanceof HTMLElement && $root.parentElement == null) {
-                    // 触发销毁元素
-                    itemConfig.destory();
-                }
-            }
-        });
-        PopsInstData.tooltip.forEach((itemConfig) => {
-            const config = itemConfig.config;
-            if (config.$target instanceof HTMLElement) {
-                const $root = config.$target.getRootNode();
-                if ($root instanceof HTMLElement && $root.parentElement == null) {
-                    // 触发销毁元素
-                    itemConfig.destory();
-                }
-            }
-        });
     },
     /**
      * 拖拽元素
@@ -3351,17 +3508,10 @@ const PopsInstanceUtils = {
                 clickElementLeftOffset = event.x - rect.left;
                 clickElementTopOffset = event.y - rect.top;
                 transformInfo = popsDOMUtils.getTransform($move);
-                //if (event.nativeEvent.offsetX) {
-                //  clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
-                //} else {
-                //  clickElementLeftOffset = parseInt(event.getOffset().x);
-                //}
-                //if (event.nativeEvent.offsetY) {
-                //  clickElementTopOffset = parseInt(event.nativeEvent.offsetY);
-                //} else {
-                //  clickElementTopOffset = parseInt(event.getOffset().y);
-                //}
                 resumeMoveElementStyle = changeMoveElementStyle($move);
+                if (typeof options.startCallBack === "function") {
+                    options.startCallBack($move, clickElementLeftOffset, clickElementTopOffset);
+                }
             }
             /** 当前移动的left偏移 */
             let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformInfo.transformLeft;
@@ -3438,46 +3588,6 @@ const PopsInstanceUtils = {
             });
         }
     },
-    /**
-     * 排序数组
-     * @param getBeforeValueFun
-     * @param getAfterValueFun
-     * @param sortByDesc 排序是否降序，默认降序
-     */
-    sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
-        if (typeof sortByDesc !== "boolean") {
-            throw new TypeError("参数 sortByDesc 必须为boolean类型");
-        }
-        if (getBeforeValueFun == null || getAfterValueFun == null) {
-            throw new Error("获取前面的值或后面的值的方法不能为空");
-        }
-        return function (after_obj, before_obj) {
-            const beforeValue = getBeforeValueFun(before_obj); //  前
-            const afterValue = getAfterValueFun(after_obj); // 后
-            if (sortByDesc) {
-                if (afterValue > beforeValue) {
-                    return -1;
-                }
-                else if (afterValue < beforeValue) {
-                    return 1;
-                }
-                else {
-                    return 0;
-                }
-            }
-            else {
-                if (afterValue < beforeValue) {
-                    return -1;
-                }
-                else if (afterValue > beforeValue) {
-                    return 1;
-                }
-                else {
-                    return 0;
-                }
-            }
-        };
-    },
 };
 
 const PopsHandler = {
@@ -3488,19 +3598,37 @@ const PopsHandler = {
         const $shadowContainer = popsDOMUtils.createElement("div", {
             className: "pops-shadow-container",
         });
+        let $shadowRoot;
         if (config.useShadowRoot) {
-            const $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
-            return {
-                $shadowContainer,
-                $shadowRoot,
-            };
+            $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
         }
         else {
-            return {
-                $shadowContainer,
-                $shadowRoot: $shadowContainer,
-            };
+            $shadowRoot = $shadowContainer;
+        }
+        // 添加键盘监听
+        // rightClickMenu
+        // searchSuggestion
+        // tooltip
+        // 以上都不需要添加该事件监听
+        if (config.stopKeyDownEventPropagation) {
+            popsDOMUtils.on($shadowRoot, "keydown", [
+                'input[type="text"]',
+                'input[type="password"]',
+                'input[type="number"]',
+                'input[type="email"]',
+                'input[type="url"]',
+                'input[type="search"]',
+                "input:not([type])",
+                "textarea",
+            ], (evt) => {
+                evt.stopImmediatePropagation();
+                evt.stopPropagation();
+            }, { capture: true });
         }
+        return {
+            $shadowContainer,
+            $shadowRoot,
+        };
     },
     /**
      * 处理初始化
@@ -3573,11 +3701,11 @@ 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(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
+                    return PopsInstHandler.hide(config.config, config.type, targetInst, config.guid, config.animElement, result.maskElement);
                 }
             }
             if (typeof config.config.mask.clickCallBack === "function") {
@@ -3764,7 +3892,7 @@ const PopsHandler = {
      * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleEventConfig(config, guid, $shadowContainer, $shadowRoot, type, $anim, $pops, $mask) {
+    handleEventConfig(config, guid, $shadowContainer, $shadowRoot, type, $anim, $pops, emitter, $mask) {
         return {
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
@@ -3774,17 +3902,18 @@ 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) {
                 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);
             },
         };
     },
@@ -3797,7 +3926,7 @@ const PopsHandler = {
      * @param $mask 遮罩层
      * @param config 当前配置
      */
-    handleLoadingEventConfig(config, guid, type, $anim, $pops, $mask) {
+    handleLoadingEventConfig(config, guid, type, $anim, $pops, emitter, $mask) {
         return {
             $el: $anim,
             $anim: $anim,
@@ -3805,14 +3934,15 @@ 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);
             },
         };
     },
@@ -3836,7 +3966,7 @@ const PopsHandler = {
     handleClickEvent(type, $btn, eventConfig, callback) {
         if (typeof callback !== "function")
             return;
-        popsDOMUtils.on($btn, "click", (event) => {
+        return popsDOMUtils.on($btn, "click", (event) => {
             const extraParam = {
                 type: type,
             };
@@ -3874,16 +4004,10 @@ 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的点击事件
@@ -3906,15 +4030,16 @@ const PopsHandler = {
         });
     },
     /**
-     * 把配置的z-index配置转为数字
-     * @param zIndex
+     * 获取数值
+     * @param target
      */
-    handleZIndex(zIndex) {
-        if (typeof zIndex === "function") {
-            return zIndex();
+    getTargerOrFunctionValue(target) {
+        if (typeof target === "function") {
+            const result = target();
+            return result;
         }
         else {
-            return zIndex;
+            return target;
         }
     },
     /**
@@ -3931,11 +4056,11 @@ const PopsHandler = {
             if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
                 const inst = PopsInstData[type];
                 if (inst) {
-                    PopsInstanceUtils.removeInstance([inst], "", true);
+                    PopsInstHandler.removeInstance([inst], "", true);
                 }
             }
             else {
-                PopsInstanceUtils.removeInstance([
+                PopsInstHandler.removeInstance([
                     PopsInstData.alert,
                     PopsInstData.confirm,
                     PopsInstData.drawer,
@@ -3946,15 +4071,30 @@ 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(config) {
+        // 对配置进行处理
+        // 选择配置的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;
     },
     /**
@@ -4027,6 +4167,7 @@ const PopsAlertDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         beforeAppendToPageCallBack() { },
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -4035,6 +4176,7 @@ const PopsAlert = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "alert";
+        const emitter = new EventEmiter(popsType);
         let config = PopsAlertDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -4071,7 +4213,7 @@ const PopsAlert = {
             },
         ]);
         // 先把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);
         const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -4107,7 +4249,7 @@ const PopsAlert = {
             $elList.push($mask);
         }
         // 处理返回的配置
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         const result = PopsHandler.handleResultConfig(evtConfig);
         // 为顶部右边的关闭按钮添加点击事件
         PopsHandler.handleClickEvent("close", $headerCloseBtn, evtConfig, config.btn.close?.callback);
@@ -4115,9 +4257,7 @@ const PopsAlert = {
         PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok?.callback);
         // 创建到页面中
         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) {
             // 添加遮罩层
@@ -4132,11 +4272,11 @@ const PopsAlert = {
             $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,
@@ -4235,6 +4375,7 @@ const PopsConfirmDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         beforeAppendToPageCallBack() { },
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -4243,6 +4384,7 @@ const PopsConfirm = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "confirm";
+        const emitter = new EventEmiter(popsType);
         let config = PopsConfirmDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -4279,7 +4421,7 @@ const PopsConfirm = {
             },
         ]);
         // 先把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);
         const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -4318,7 +4460,7 @@ const PopsConfirm = {
             $mask = handleMask.maskElement;
             $elList.push($mask);
         }
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         const result = PopsHandler.handleResultConfig(evtConfig);
         PopsHandler.handleClickEvent("close", $btnClose, evtConfig, config.btn.close.callback);
         PopsHandler.handleClickEvent("ok", $btnOk, evtConfig, config.btn.ok.callback);
@@ -4326,9 +4468,7 @@ const PopsConfirm = {
         PopsHandler.handleClickEvent("other", $btnOther, evtConfig, config.btn.other.callback);
         // 创建到页面中
         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);
@@ -4341,11 +4481,11 @@ const PopsConfirm = {
             $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,
@@ -4443,6 +4583,7 @@ const PopsDrawerDefaultConfig = () => {
         darkStyle: null,
         beforeAppendToPageCallBack() { },
         forbiddenScroll: false,
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -4451,6 +4592,7 @@ const PopsDrawer = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "drawer";
+        const emitter = new EventEmiter(popsType);
         let config = PopsDrawerDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -4487,7 +4629,7 @@ 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);
         const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -4532,7 +4674,7 @@ const PopsDrawer = {
             $mask = handleMask.maskElement;
             $elList.push($mask);
         }
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         const result = PopsHandler.handleResultConfig(evtConfig);
         // 处理方向
         $pops.setAttribute("direction", config.direction);
@@ -4556,9 +4698,12 @@ 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 = [
@@ -4610,9 +4755,7 @@ 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(() => {
@@ -4630,7 +4773,7 @@ const PopsDrawer = {
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
             config: config,
-            destory: result.close,
+            emitter: emitter,
         });
         return result;
     },
@@ -4663,6 +4806,7 @@ const PopsLoadingDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         addIndexCSS: true,
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -4671,12 +4815,13 @@ const PopsLoading = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const PopsType = "loading";
+        const emitter = new EventEmiter(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);
         const animHTML = PopsElementHandler.createAnim(guid, PopsType, config, 
@@ -4719,17 +4864,20 @@ 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,
+            emitter: emitter,
+            config: config,
         });
         if (config.isAbsolute) {
             // 遮罩层必须是跟随主内容
@@ -4891,6 +5039,7 @@ const PopsFolderDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         beforeAppendToPageCallBack() { },
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -4927,6 +5076,7 @@ const PopsFolder = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "folder";
+        const emitter = new EventEmiter(popsType);
         let config = PopsFolderDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -5010,7 +5160,7 @@ const PopsFolder = {
             Reflect.set(config, "folder", config.folder);
         }
         // 先把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);
         const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -5143,7 +5293,7 @@ const PopsFolder = {
             $elList.push($mask);
         }
         // 事件
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         const result = PopsHandler.handleResultConfig(evtConfig);
         PopsHandler.handleClickEvent("close", $btnCloseBtn, evtConfig, config.btn.close.callback);
         PopsHandler.handleClickEvent("ok", btnOkElement, evtConfig, config.btn.ok.callback);
@@ -5151,9 +5301,7 @@ const PopsFolder = {
         PopsHandler.handleClickEvent("other", btnOtherElement, evtConfig, config.btn.other.callback);
         // 创建到页面中
         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);
@@ -5777,7 +5925,7 @@ 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,
@@ -5793,7 +5941,7 @@ const PopsFolder = {
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
             config: config,
-            destory: result.close,
+            emitter,
         });
         return result;
     },
@@ -5856,6 +6004,7 @@ const PopsIframeDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         beforeAppendToPageCallBack() { },
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -5864,6 +6013,7 @@ const PopsIframe = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "iframe";
+        const emitter = new EventEmiter(popsType);
         let config = PopsIframeDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -5900,7 +6050,7 @@ const PopsIframe = {
         ]);
         const maskExtraStyle = config.animation != null && 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);
         const iframeLoadingHTML = /*html*/ '<div class="pops-loading"></div>';
@@ -5949,7 +6099,7 @@ const PopsIframe = {
             $mask = handleMask.maskElement;
             $elList.push($mask);
         }
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         // 赋值额外的$iframe参数
         evtConfig.$iframe = $iframe;
         const result = PopsHandler.handleResultConfig(evtConfig);
@@ -5974,16 +6124,14 @@ 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,
@@ -6014,6 +6162,7 @@ const PopsIframe = {
             if (typeof config?.btn?.min?.callback === "function") {
                 config.btn.min.callback(evtConfig, event);
             }
+            emitter.emit("pops:iframe-min", evtConfig, event);
         }, {
             capture: true,
         });
@@ -6043,6 +6192,7 @@ const PopsIframe = {
             if (typeof config?.btn?.max?.callback === "function") {
                 config.btn.max.callback(evtConfig, event);
             }
+            emitter.emit("pops:iframe-max", evtConfig, event);
         }, {
             capture: true,
         });
@@ -6080,6 +6230,7 @@ const PopsIframe = {
             if (typeof config?.btn?.mise?.callback === "function") {
                 config.btn.mise.callback(evtConfig, event);
             }
+            emitter.emit("pops:iframe-mise", evtConfig, event);
         }, {
             capture: true,
         });
@@ -6087,7 +6238,7 @@ const PopsIframe = {
         popsDOMUtils.on(headerCloseBtnElement, "click", 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);
             }
@@ -6102,7 +6253,7 @@ const PopsIframe = {
             $shadowContainer: $shadowContainer,
             $shadowRoot: $shadowRoot,
             config: config,
-            destory: result.close,
+            emitter,
         });
         return result;
     },
@@ -6979,6 +7130,8 @@ const PopsPanelDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         beforeAppendToPageCallBack() { },
+        stopKeyDownEventPropagation: true,
+        listenEscapeKeyUpToExitDeepMenu: true,
     };
 };
 
@@ -7102,13 +7255,15 @@ class ToolTip {
         $content: null,
         $arrow: null,
     };
+    emitter;
     $data = {
         config: null,
         guid: null,
         timeId_close_TouchEvent: [],
         timeId_close_MouseEvent: [],
     };
-    constructor(config, guid, ShadowInfo) {
+    constructor(config, guid, ShadowInfo, emitter) {
+        this.emitter = emitter;
         this.$data.config = config;
         this.$data.guid = guid;
         this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
@@ -7154,7 +7309,7 @@ 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
@@ -7202,7 +7357,7 @@ class ToolTip {
      * 获取z-index
      */
     getZIndex() {
-        const zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex);
+        const zIndex = PopsHandler.getTargerOrFunctionValue(this.$data.config.zIndex);
         return zIndex;
     }
     /**
@@ -7385,9 +7540,7 @@ 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);
         }
         // 更新内容
@@ -7558,6 +7711,7 @@ const PopsTooltip = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "tooltip";
+        const emitter = new EventEmiter(popsType);
         let config = PopsTooltipDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -7596,7 +7750,7 @@ const PopsTooltip = {
         const toolTip = new ToolTip(config, guid, {
             $shadowContainer,
             $shadowRoot,
-        });
+        }, emitter);
         if (config.alwaysShow) {
             // 总是显示
             // 直接显示
@@ -7608,6 +7762,7 @@ const PopsTooltip = {
             $shadowContainer,
             $shadowRoot,
             toolTip,
+            emitter,
         };
     },
 };
@@ -7656,6 +7811,7 @@ const PanelHandlerComponents = () => {
             nodeStoreConfigKey: "data-view-config",
         },
         $config: {},
+        emitter: null,
         /**
          * 初始化
          * @param data
@@ -7666,6 +7822,7 @@ const PanelHandlerComponents = () => {
                 ...data.$el,
             };
             this.$config = data.config;
+            this.emitter = data.emitter;
             this.asideULElement = this.$el.$panelLeftAside.querySelector(`ul.pops-${PopsType}-aside-top-container`);
             this.asideBottomULElement = this.$el.$panelLeftAside.querySelector(`ul.pops-${PopsType}-aside-bottom-container`);
             this.sectionContainerHeaderULElement = this.$el.$panelContentSectionContainer.querySelector(`ul.pops-${PopsType}-container-header-ul`);
@@ -8576,7 +8733,8 @@ 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",
@@ -11167,91 +11325,31 @@ const PanelHandlerComponents = () => {
                         className: "pops-panel-deepMenu-container-left-arrow-icon",
                         innerHTML: PopsIcon.getIcon("arrowLeft"),
                     });
-                    // 动画配置
-                    const animOptions = {
-                        // 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();
-                            }
-                            that.emitRenderRightContainer($currentSection);
-                        }, {
-                            once: true,
-                        });
-                        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);
+                    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,
+                            });
+                            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);
+                                }
                             }
-                        }
-                        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,
@@ -11423,11 +11521,9 @@ const PanelHandlerComponents = () => {
          */
         emitRenderRightContainer($container) {
             const dataViewConfig = Reflect.get($container, this.$data.nodeStoreConfigKey);
-            this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
-                detail: {
-                    viewConfig: dataViewConfig,
-                },
-            }));
+            this.emitter.emit("pops:renderRightContainer", {
+                viewConfig: dataViewConfig,
+            });
         },
         /**
          *
@@ -11497,6 +11593,7 @@ const PopsPanel = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "panel";
+        const emitter = new EventEmiter(popsType);
         let config = PopsPanelDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -11533,7 +11630,7 @@ 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);
         const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
@@ -11591,15 +11688,13 @@ const PopsPanel = {
             $elList.push($mask);
         }
         // 处理返回的配置
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         const result = PopsHandler.handleResultConfig(evtConfig);
         // 为顶部右边的关闭按钮添加点击事件
         PopsHandler.handleClickEvent("close", $headerBtnClose, evtConfig, config.btn?.close?.callback);
         // 创建到页面中
         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) {
@@ -11622,6 +11717,7 @@ const PopsPanel = {
                 $panelBottomLeftContainer,
                 $panelBottomRightContainer,
             },
+            emitter,
         });
         PopsHandler.handlePush(popsType, {
             guid: guid,
@@ -11631,11 +11727,11 @@ 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,
@@ -11643,15 +11739,21 @@ const PopsPanel = {
                 endCallBack: config.dragEndCallBack,
             });
         }
-        return {
-            ...result,
-            addEventListener: (event, listener, options) => {
-                $pops.addEventListener(event, listener, options);
-            },
-            removeEventListener: (event, listener, options) => {
-                $pops.removeEventListener(event, listener, options);
-            },
-        };
+        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(".pops-panel-deepMenu-container-left-arrow-icon");
+                    if ($exitBtn) {
+                        $exitBtn.click();
+                    }
+                }
+            }, { capture: true });
+            emitter.on("pops:before-destory", () => {
+                escapeListener?.off();
+            });
+        }
+        return result;
     },
 };
 
@@ -11746,6 +11848,7 @@ const PopsPromptDefaultConfig = () => {
         lightStyle: null,
         darkStyle: null,
         beforeAppendToPageCallBack() { },
+        stopKeyDownEventPropagation: true,
     };
 };
 
@@ -11754,6 +11857,7 @@ const PopsPrompt = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "prompt";
+        const emitter = new EventEmiter(popsType);
         let config = PopsPromptDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -11790,7 +11894,7 @@ 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);
         const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
@@ -11835,7 +11939,7 @@ const PopsPrompt = {
             $mask = handleMask.maskElement;
             $elList.push($mask);
         }
-        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, $mask);
+        const evtConfig = PopsHandler.handleEventConfig(config, guid, $shadowContainer, $shadowRoot, popsType, $anim, $pops, emitter, $mask);
         const result = PopsHandler.handleResultConfig(evtConfig);
         // 输入框赋值初始值
         $input.value = config.content.text;
@@ -11845,9 +11949,7 @@ const PopsPrompt = {
         PopsHandler.handlePromptClickEvent("other", $input, $btnOther, evtConfig, config.btn.other.callback);
         // 创建到页面中
         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);
@@ -11860,11 +11962,11 @@ 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,
@@ -11992,6 +12094,7 @@ const PopsRightClickMenu = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "rightClickMenu";
+        const emitter = new EventEmiter(popsType);
         let config = PopsRightClickMenuDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -12120,13 +12223,14 @@ 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);
                     });
                 }
             },
@@ -12214,6 +12318,7 @@ const PopsRightClickMenu = {
                 });
                 const zIndex = this.getMenuZIndex();
                 if (zIndex > 10000) {
+                    // 大于默认值
                     $menu.style.zIndex = zIndex.toString();
                 }
                 if (isChildren) {
@@ -12234,7 +12339,7 @@ const PopsRightClickMenu = {
              * 动态获取配的z-index
              */
             getMenuZIndex() {
-                return PopsHandler.handleZIndex(config.zIndex);
+                return PopsHandler.getTargerOrFunctionValue(config.zIndex);
             },
             /**
              * 获取left、top偏移
@@ -12348,9 +12453,7 @@ 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);
@@ -12625,6 +12728,7 @@ const PopsSearchSuggestion = {
         const guid = popsUtils.getRandomGUID();
         // 设置当前类型
         const popsType = "searchSuggestion";
+        const emitter = new EventEmiter(popsType);
         let config = PopsSearchSuggestionDefaultConfig();
         config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
         config = popsUtils.assign(config, __config__);
@@ -12661,6 +12765,7 @@ const PopsSearchSuggestion = {
             passive: true,
         };
         const SearchSuggestion = {
+            emitter: emitter,
             /**
              * 当前的环境，可以是document，可以是shadowroot，默认是document
              */
@@ -12876,7 +12981,7 @@ 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};
@@ -13399,7 +13504,110 @@ const PopsSearchSuggestion = {
     },
 };
 
-const version = "3.3.4";
+const PopsInstanceUtils = {
+    /**
+     * 获取pops所有弹窗中的最大的z-index
+     * @param deviation
+     */
+    getPopsMaxZIndex(deviation = 1) {
+        deviation = Number.isNaN(deviation) ? 1 : deviation;
+        // 最大值 2147483647
+        // const browserMaxZIndex = Math.pow(2, 31) - 1;
+        // 比较值 2000000000
+        const maxZIndex = 2 * Math.pow(10, 9);
+        // 当前页面最大的z-index
+        let zIndex = 0;
+        // 当前的最大z-index的元素，调试使用
+        let maxZIndexNode = null;
+        /**
+         * 元素是否可见
+         * @param $el
+         * @param $css
+         */
+        function isVisibleNode($el, $css) {
+            let flag = true;
+            if (typeof $el.checkVisibility === "function") {
+                flag = $el.checkVisibility();
+            }
+            else {
+                flag =
+                    $css.position !== "static" && $css.display !== "none" && $css.visibility !== "hidden" && $css.opacity !== "0";
+            }
+            if (flag) {
+                // css样式上可见
+                // 再判断宽高
+                const rect = $el.getBoundingClientRect();
+                // 确保该元素的中心点在屏幕内
+                flag = rect.width > 0 && rect.height > 0 && rect.x > 0 && rect.y > 0;
+            }
+            return flag;
+        }
+        Object.keys(PopsInstData).forEach((instKeyName) => {
+            const instData = PopsInstData[instKeyName];
+            for (let index = 0; index < instData.length; index++) {
+                const inst = instData[index];
+                const nodeStyle = window.getComputedStyle(inst.$anim);
+                // 不对position为static和display为none的元素进行获取它们的z-index
+                if (isVisibleNode(inst.$anim, nodeStyle)) {
+                    const nodeZIndex = parseInt(nodeStyle.zIndex);
+                    if (!isNaN(nodeZIndex)) {
+                        if (nodeZIndex > zIndex) {
+                            zIndex = nodeZIndex;
+                            maxZIndexNode = inst.$anim;
+                        }
+                    }
+                }
+            }
+        });
+        zIndex += deviation;
+        const isOverMaxZIndex = zIndex >= maxZIndex;
+        if (isOverMaxZIndex) {
+            // 超出z-index最大值
+            zIndex = maxZIndex;
+        }
+        return { zIndex: zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
+    },
+    /**
+     * 排序数组
+     * @param getBeforeValueFun
+     * @param getAfterValueFun
+     * @param sortByDesc 排序是否降序，默认降序
+     */
+    sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
+        if (typeof sortByDesc !== "boolean") {
+            throw new TypeError("参数 sortByDesc 必须为boolean类型");
+        }
+        if (getBeforeValueFun == null || getAfterValueFun == null) {
+            throw new Error("获取前面的值或后面的值的方法不能为空");
+        }
+        return function (after_obj, before_obj) {
+            const beforeValue = getBeforeValueFun(before_obj); //  前
+            const afterValue = getAfterValueFun(after_obj); // 后
+            if (sortByDesc) {
+                if (afterValue > beforeValue) {
+                    return -1;
+                }
+                else if (afterValue < beforeValue) {
+                    return 1;
+                }
+                else {
+                    return 0;
+                }
+            }
+            else {
+                if (afterValue < beforeValue) {
+                    return -1;
+                }
+                else if (afterValue > beforeValue) {
+                    return 1;
+                }
+                else {
+                    return 0;
+                }
+            }
+        };
+    },
+};
 
 class Pops {
     /** 配置 */
@@ -13428,7 +13636,11 @@ class Pops {
         /** pops处理float类型使用的工具类 */
         MathFloatUtils: PopsMathFloatUtils,
         /** pops.panel中用于处理各个类型的工具 */
-        PanelHandlerComponents: PanelHandlerComponents,
+        PanelHandlerComponents,
+        /** pops.panel中的动画 */
+        PopsAnimation,
+        /** 事件类 */
+        EventEmiter,
     };
     init() { }
     /**