@whitesev/pops 2.1.3 → 2.1.5

package/dist/index.system.js

@@ -3,14 +3,18 @@ System.register('pops', [], (function (exports) {
     return {
         execute: (function () {
 
+            /**
+             * 存储在元素属性上的事件名
+             */
             const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
 
-            const PopsCoreEnv = {
+            const PopsCoreDefaultEnv = {
                 document: document,
                 window: window,
                 globalThis: globalThis,
                 self: self,
             };
+            const PopsCoreEnv = Object.assign({}, PopsCoreDefaultEnv);
             const PopsCore = {
                 get document() {
                     return PopsCoreEnv.document;
@@ -332,8 +336,7 @@ System.register('pops', [], (function (exports) {
                     if (target === PopsCore.self) {
                         return true;
                     }
-                    if (typeof unsafeWindow !== "undefined" &&
-                        target === unsafeWindow) {
+                    if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
                         return true;
                     }
                     if (target?.Math?.toString() !== "[object Math]") {
@@ -2231,17 +2234,18 @@ System.register('pops', [], (function (exports) {
             }
             const popsDOMUtils = new PopsDOMUtils();
 
-            const PopsLayer = {
+            const PopsLayerData = {
                 alert: [],
                 confirm: [],
-                prompt: [],
-                loading: [],
-                iframe: [],
-                tooltip: [],
                 drawer: [],
                 folder: [],
+                iframe: [],
+                loading: [],
                 panel: [],
+                prompt: [],
                 rightClickMenu: [],
+                // 没有 searchSuggestion
+                tooltip: [],
             };
 
             var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n\t-webkit-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t/* 代替::-webkit-scrollbar */\r\n\tscrollbar-width: thin;\r\n}\r\n.pops {\r\n\t--pops-bg-opacity: 1;\r\n\t--pops-bd-opacity: 1;\r\n\t--pops-font-size: 16px;\r\n\tinterpolate-size: allow-keywords;\r\n}\r\n.pops-mask {\r\n\t--pops-mask-bg-opacity: 0.4;\r\n}\r\n.pops {\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\tborder-radius: 4px;\r\n\tborder: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));\r\n\tfont-size: var(--pops-font-size);\r\n\tline-height: normal;\r\n\tbox-shadow: 0 0 12px rgba(0, 0, 0, 0.12);\r\n\tbox-sizing: border-box;\r\n\toverflow: hidden;\r\n\ttransition: all 0.35s;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n.pops-anim {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n\ttop: unset;\r\n\tright: unset;\r\n\tbottom: unset;\r\n\tleft: unset;\r\n\twidth: unset;\r\n\theight: unset;\r\n\ttransition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n\tanimation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n\theight: 1em;\r\n\twidth: 1em;\r\n\tline-height: normal;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n\tcolor: inherit;\r\n\tfont-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tborder: 0;\r\n\tborder-radius: 0;\r\n\tbackground-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n\tbox-shadow: none;\r\n\ttransition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n\tfloat: right;\r\n\tmargin: 0 0;\r\n\toutline: 0;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: #888;\r\n\tcursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type=\"max\"],\r\n.pops-header-controls button.pops-header-control[type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[type=\"min\"] {\r\n\toutline: 0 !important;\r\n\tborder: 0;\r\n\tborder-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n\tbackground-color: transparent;\r\n\tcolor: rgb(136, 136, 136);\r\n\tcursor: pointer;\r\n\ttransition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n\tcolor: rgb(144, 147, 153);\r\n\tfont-size: inherit;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\tfill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n\theight: 1.25em;\r\n\twidth: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n\tright: 15px;\r\n\tpadding: 0;\r\n\tborder: none;\r\n\toutline: 0;\r\n\tbackground: 0 0;\r\n\tcursor: pointer;\r\n\tposition: unset;\r\n\tline-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n\tcolor: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n\tmargin: 0 6px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n\tdisplay: flex;\r\n\tgap: 6px;\r\n}\r\n\r\n/* 标题禁止选中文字 */\r\n.pops [class^=\"pops\"][class*=\"-title\"] p[pops] {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n/* <code> */\r\n.pops code {\r\n\tfont-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\r\n\tfont-size: 0.85em;\r\n\tcolor: #000;\r\n\tbackground-color: #f0f0f0;\r\n\tborder-radius: 3px;\r\n\tborder: 0;\r\n\tpadding: 0.2em 0;\r\n\twhite-space: normal;\r\n\tbackground: #f5f5f5;\r\n\ttext-wrap: wrap;\r\n\ttext-align: left;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n\tline-height: 1.4;\r\n\t-moz-tab-size: 8;\r\n\t-o-tab-size: 8;\r\n\ttab-size: 8;\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n\tdirection: ltr;\r\n}\r\n\r\n.pops code::before,\r\n.pops code::after {\r\n\tletter-spacing: -0.2em;\r\n\tcontent: \"\\00a0\";\r\n}\r\n";
@@ -2436,8 +2440,8 @@ System.register('pops', [], (function (exports) {
                     function isVisibleNode($css) {
                         return $css.position !== "static" && $css.display !== "none";
                     }
-                    Object.keys(PopsLayer).forEach((layerName) => {
-                        let layerList = PopsLayer[layerName];
+                    Object.keys(PopsLayerData).forEach((layerName) => {
+                        let layerList = PopsLayerData[layerName];
                         for (let index = 0; index < layerList.length; index++) {
                             const layer = layerList[index];
                             let nodeStyle = window.getComputedStyle(layer.animElement);
@@ -2985,8 +2989,7 @@ System.register('pops', [], (function (exports) {
                             let style = configValue == null
                                 ? ""
                                 : typeof configValue === "function"
-                                    ? // @ts-ignore
-                                        configValue()
+                                    ? configValue()
                                     : configValue;
                             if (typeof style === "string") {
                                 result.style = style;
@@ -3000,7 +3003,7 @@ System.register('pops', [], (function (exports) {
                                     ? configValue()
                                     : configValue;
                             if (typeof zIndex === "string") {
-                                let newIndex = (zIndex = parseInt(zIndex));
+                                let newIndex = (zIndex = Number(zIndex));
                                 if (!isNaN(newIndex)) {
                                     result.zIndex = newIndex;
                                 }
@@ -3081,37 +3084,38 @@ System.register('pops', [], (function (exports) {
 
             var SVG_arrowLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\r\n\t<path\r\n\t\td=\"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z\"></path>\r\n</svg>\r\n";
 
+            const PopsIconData = {
+                min: SVG_min,
+                mise: SVG_mise,
+                max: SVG_max,
+                close: SVG_close,
+                edit: SVG_edit,
+                share: SVG_share,
+                delete: SVG_delete,
+                search: SVG_search,
+                upload: SVG_upload,
+                loading: SVG_loading,
+                next: SVG_next,
+                prev: SVG_prev,
+                eleme: SVG_eleme,
+                elemePlus: SVG_elemePlus,
+                chromeFilled: SVG_chromeFilled,
+                cpu: SVG_cpu,
+                videoPlay: SVG_videoPlay,
+                videoPause: SVG_videoPause,
+                headset: SVG_headset,
+                monitor: SVG_monitor,
+                documentCopy: SVG_documentCopy,
+                picture: SVG_picture,
+                circleClose: SVG_circleClose,
+                view: SVG_view,
+                hide: SVG_hide,
+                keyboard: SVG_keyboard,
+                arrowRight: SVG_arrowRight,
+                arrowLeft: SVG_arrowLeft,
+            };
             const PopsIcon = {
-                $data: {
-                    min: SVG_min,
-                    mise: SVG_mise,
-                    max: SVG_max,
-                    close: SVG_close,
-                    edit: SVG_edit,
-                    share: SVG_share,
-                    delete: SVG_delete,
-                    search: SVG_search,
-                    upload: SVG_upload,
-                    loading: SVG_loading,
-                    next: SVG_next,
-                    prev: SVG_prev,
-                    eleme: SVG_eleme,
-                    elemePlus: SVG_elemePlus,
-                    chromeFilled: SVG_chromeFilled,
-                    cpu: SVG_cpu,
-                    videoPlay: SVG_videoPlay,
-                    videoPause: SVG_videoPause,
-                    headset: SVG_headset,
-                    monitor: SVG_monitor,
-                    documentCopy: SVG_documentCopy,
-                    picture: SVG_picture,
-                    circleClose: SVG_circleClose,
-                    view: SVG_view,
-                    hide: SVG_hide,
-                    keyboard: SVG_keyboard,
-                    arrowRight: SVG_arrowRight,
-                    arrowLeft: SVG_arrowLeft,
-                },
+                $data: PopsIconData,
                 /**
                  * 判断是否存在某个icon
                  * @param iconName 图标名
@@ -3475,7 +3479,7 @@ System.register('pops', [], (function (exports) {
                     function clickEvent(event) {
                         popsDOMUtils.preventEvent(event);
                         // 获取该类型实例存储列表
-                        let targetLayer = PopsLayer[details.type];
+                        let targetLayer = PopsLayerData[details.type];
                         function originalRun() {
                             if (details.config.mask.clickEvent.toClose) {
                                 /* 关闭 */
@@ -3662,13 +3666,13 @@ System.register('pops', [], (function (exports) {
                         mode: mode,
                         guid: guid,
                         close() {
-                            return PopsInstanceUtils.close(mode, PopsLayer[mode], guid, config, animElement);
+                            return PopsInstanceUtils.close(mode, PopsLayerData[mode], guid, config, animElement);
                         },
                         hide() {
-                            return PopsInstanceUtils.hide(mode, PopsLayer[mode], guid, config, animElement, maskElement);
+                            return PopsInstanceUtils.hide(mode, PopsLayerData[mode], guid, config, animElement, maskElement);
                         },
                         show() {
-                            return PopsInstanceUtils.show(mode, PopsLayer[mode], guid, config, animElement, maskElement);
+                            return PopsInstanceUtils.show(mode, PopsLayerData[mode], guid, config, animElement, maskElement);
                         },
                     };
                 },
@@ -3690,13 +3694,13 @@ System.register('pops', [], (function (exports) {
                         mode: mode,
                         guid: guid,
                         close() {
-                            return PopsInstanceUtils.close(mode, PopsLayer[mode], guid, config, animElement);
+                            return PopsInstanceUtils.close(mode, PopsLayerData[mode], guid, config, animElement);
                         },
                         hide() {
-                            return PopsInstanceUtils.hide(mode, PopsLayer[mode], guid, config, animElement, maskElement);
+                            return PopsInstanceUtils.hide(mode, PopsLayerData[mode], guid, config, animElement, maskElement);
                         },
                         show() {
-                            return PopsInstanceUtils.show(mode, PopsLayer[mode], guid, config, animElement, maskElement);
+                            return PopsInstanceUtils.show(mode, PopsLayerData[mode], guid, config, animElement, maskElement);
                         },
                     };
                 },
@@ -3808,20 +3812,20 @@ System.register('pops', [], (function (exports) {
                         if (type === "loading" ||
                             type === "tooltip" ||
                             type === "rightClickMenu") {
-                            let layer = PopsLayer[type];
+                            let layer = PopsLayerData[type];
                             if (layer) {
                                 PopsInstanceUtils.removeInstance([layer], "", true);
                             }
                         }
                         else {
                             PopsInstanceUtils.removeInstance([
-                                PopsLayer.alert,
-                                PopsLayer.confirm,
-                                PopsLayer.prompt,
-                                PopsLayer.iframe,
-                                PopsLayer.drawer,
-                                PopsLayer.folder,
-                                PopsLayer.panel,
+                                PopsLayerData.alert,
+                                PopsLayerData.confirm,
+                                PopsLayerData.prompt,
+                                PopsLayerData.iframe,
+                                PopsLayerData.drawer,
+                                PopsLayerData.folder,
+                                PopsLayerData.panel,
                             ], "", true);
                         }
                     }
@@ -3842,7 +3846,7 @@ System.register('pops', [], (function (exports) {
                  * @param value
                  */
                 handlePush(type, value) {
-                    PopsLayer[type].push(value);
+                    PopsLayerData[type].push(value);
                 },
             };
 
@@ -4764,7 +4768,7 @@ System.register('pops', [], (function (exports) {
                     popsDOMUtils.on(headerCloseBtnElement, "click", (event) => {
                         event.preventDefault();
                         event.stopPropagation();
-                        PopsInstanceUtils.removeInstance([PopsLayer.iframe], guid, false);
+                        PopsInstanceUtils.removeInstance([PopsLayerData.iframe], guid, false);
                         if (typeof config?.btn?.close?.callback === "function") {
                             config.btn.close.callback(eventDetails, event);
                         }
@@ -7062,7 +7066,10 @@ System.register('pops', [], (function (exports) {
                 },
             };
 
-            const PanelHandleContentDetails = () => {
+            /**
+             * 处理组件（把组件配置转为组件元素）
+             */
+            const PanelHandlerComponents = () => {
                 return {
                     /**
                      * 左侧的ul容器
@@ -7080,6 +7087,8 @@ System.register('pops', [], (function (exports) {
                      * 元素
                      */
                     $el: {
+                        /** pops主元素 */
+                        $pops: null,
                         /** 内容 */
                         $content: null,
                         /** 左侧容器 */
@@ -7092,8 +7101,6 @@ System.register('pops', [], (function (exports) {
                      * @param details
                      */
                     init(details) {
-                        // @ts-ignore
-                        this.$el = null;
                         this.$el = {
                             ...details.$el,
                         };
@@ -7156,11 +7163,12 @@ System.register('pops', [], (function (exports) {
                      * 清空container容器的元素
                      */
                     clearContainer() {
+                        Reflect.deleteProperty(this.$el.$contentSectionContainer, "__formConfig__");
                         PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
                         PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
                         this.$el.$content
                             ?.querySelectorAll("section.pops-panel-deepMenu-container")
-                            .forEach((ele) => ele.remove());
+                            .forEach(($el) => $el.remove());
                     },
                     /**
                      * 清空左侧容器已访问记录
@@ -7168,8 +7176,8 @@ System.register('pops', [], (function (exports) {
                     clearAsideItemIsVisited() {
                         this.$el.$contentAside
                             .querySelectorAll(".pops-is-visited")
-                            .forEach((element) => {
-                            popsDOMUtils.removeClassName(element, "pops-is-visited");
+                            .forEach(($el) => {
+                            popsDOMUtils.removeClassName($el, "pops-is-visited");
                         });
                     },
                     /**
@@ -7246,34 +7254,33 @@ System.register('pops', [], (function (exports) {
                      * @param  asideConfig
                      */
                     createAsideItem(asideConfig) {
-                        let liElement = document.createElement("li");
-                        liElement.id = asideConfig.id;
-                        // @ts-ignore
-                        liElement["__forms__"] = asideConfig.forms;
-                        PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
+                        let $li = document.createElement("li");
+                        $li.id = asideConfig.id;
+                        Reflect.set($li, "__forms__", asideConfig.forms);
+                        PopsSafeUtils.setSafeHTML($li, asideConfig.title);
                         /* 处理className */
-                        this.setElementClassName(liElement, asideConfig.className);
-                        this.setElementAttributes(liElement, asideConfig.attributes);
-                        this.setElementProps(liElement, asideConfig.props);
-                        return liElement;
+                        this.setElementClassName($li, asideConfig.className);
+                        this.setElementAttributes($li, asideConfig.attributes);
+                        this.setElementProps($li, asideConfig.props);
+                        return $li;
                     },
                     /**
-                     * 创建中间容器的元素<li>
                      * type ==> switch
+                     * 创建中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_switch(formConfig) {
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7290,9 +7297,9 @@ System.register('pops', [], (function (exports) {
                                 value: Boolean(formConfig.getValue()),
                             },
                             $ele: {
-                                switch: liElement.querySelector(".pops-panel-switch"),
-                                input: liElement.querySelector(".pops-panel-switch__input"),
-                                core: liElement.querySelector(".pops-panel-switch__core"),
+                                switch: $li.querySelector(".pops-panel-switch"),
+                                input: $li.querySelector(".pops-panel-switch__input"),
+                                core: $li.querySelector(".pops-panel-switch__core"),
                             },
                             init() {
                                 this.setStatus(this.$data.value);
@@ -7354,26 +7361,26 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelSwitch.init();
-                        liElement["data-switch"] = PopsPanelSwitch;
-                        return liElement;
+                        Reflect.set($li, "data-switch", PopsPanelSwitch);
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> slider
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_slider(formConfig) {
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7381,11 +7388,11 @@ System.register('pops', [], (function (exports) {
 					<input type="range" min="${formConfig.min}" max="${formConfig.max}">
 				</div>
 			`);
-                        let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
+                        let $rangeInput = $li.querySelector(".pops-panel-slider input[type=range]");
                         if (formConfig.step) {
-                            rangeInputElement.setAttribute("step", formConfig.step.toString());
+                            $rangeInput.setAttribute("step", formConfig.step.toString());
                         }
-                        rangeInputElement.value = formConfig.getValue().toString();
+                        $rangeInput.value = formConfig.getValue().toString();
                         /**
                          * 获取提示的内容
                          * @param value
@@ -7399,9 +7406,9 @@ System.register('pops', [], (function (exports) {
                             }
                         };
                         let tooltip = PopsTooltip.init({
-                            target: rangeInputElement.parentElement,
+                            target: $rangeInput.parentElement,
                             content: () => {
-                                return getToolTipContent(rangeInputElement.value);
+                                return getToolTipContent($rangeInput.value);
                             },
                             zIndex: () => {
                                 return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
@@ -7412,32 +7419,31 @@ System.register('pops', [], (function (exports) {
                             position: "top",
                             arrowDistance: 10,
                         });
-                        popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
-                            tooltip.toolTip.changeContent(getToolTipContent(rangeInputElement.value));
+                        popsDOMUtils.on($rangeInput, ["input", "propertychange"], void 0, function (event) {
+                            tooltip.toolTip.changeContent(getToolTipContent($rangeInput.value));
                             if (typeof formConfig.callback === "function") {
-                                formConfig.callback(event, event.target.value);
+                                formConfig.callback(event, $rangeInput.valueAsNumber);
                             }
                         });
-                        return liElement;
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> slider
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_slider_new(formConfig) {
-                        let liElement = document.createElement("li");
-                        // @ts-ignore
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text" style="flex: 1;">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -7512,11 +7518,11 @@ System.register('pops', [], (function (exports) {
                                 tooltip: null,
                             },
                             $ele: {
-                                slider: liElement.querySelector(".pops-slider"),
-                                runAway: liElement.querySelector(".pops-slider__runway"),
-                                bar: liElement.querySelector(".pops-slider__bar"),
-                                buttonWrapper: liElement.querySelector(".pops-slider__button-wrapper"),
-                                button: liElement.querySelector(".pops-slider__button"),
+                                slider: $li.querySelector(".pops-slider"),
+                                runAway: $li.querySelector(".pops-slider__runway"),
+                                bar: $li.querySelector(".pops-slider__bar"),
+                                buttonWrapper: $li.querySelector(".pops-slider__button-wrapper"),
+                                button: $li.querySelector(".pops-slider__button"),
                             },
                             $interval: {
                                 isCheck: false,
@@ -7582,14 +7588,10 @@ System.register('pops', [], (function (exports) {
                                 this.$ele.slider.setAttribute("data-max", this.max.toString());
                                 this.$ele.slider.setAttribute("data-value", this.value.toString());
                                 this.$ele.slider.setAttribute("data-step", this.step.toString());
-                                // @ts-ignore
-                                this.$ele.slider["data-min"] = this.min;
-                                // @ts-ignore
-                                this.$ele.slider["data-max"] = this.max;
-                                // @ts-ignore
-                                this.$ele.slider["data-value"] = this.value;
-                                // @ts-ignore
-                                this.$ele.slider["data-step"] = this.step;
+                                Reflect.set(this.$ele.slider, "data-min", this.min);
+                                Reflect.set(this.$ele.slider, "data-max", this.max);
+                                Reflect.set(this.$ele.slider, "data-value", this.value);
+                                Reflect.set(this.$ele.slider, "data-step", this.step);
                             },
                             /**
                              * 初始化滑块的总长度的数据(px)
@@ -7609,7 +7611,7 @@ System.register('pops', [], (function (exports) {
                                 let widthPx = 0;
                                 for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
                                     let value = this.formatValue(stepValue);
-                                    let info = {};
+                                    let info;
                                     if (value === this.min) {
                                         /* 起始 */
                                         info = {
@@ -7652,7 +7654,7 @@ System.register('pops', [], (function (exports) {
                                 let widthPx = 0;
                                 for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
                                     let value = this.formatValue(stepValue);
-                                    let info = {};
+                                    let info;
                                     if (value === this.min) {
                                         /* 起始 */
                                         info = {
@@ -7810,7 +7812,7 @@ System.register('pops', [], (function (exports) {
                                         event.target !== this.$ele.bar) {
                                         return;
                                     }
-                                    let clickX = parseFloat(event.offsetX);
+                                    let clickX = parseFloat(event.offsetX.toString());
                                     this.dragStartCallBack();
                                     this.dragMoveCallBack(event, clickX, this.value);
                                     this.dragEndCallBack(clickX);
@@ -7963,7 +7965,7 @@ System.register('pops', [], (function (exports) {
                                         return formConfig.getToolTipContent(PopsPanelSlider.value);
                                     }
                                     else {
-                                        return PopsPanelSlider.value;
+                                        return PopsPanelSlider.value.toString();
                                     }
                                 }
                                 let tooltip = PopsTooltip.init({
@@ -8007,20 +8009,20 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelSlider.init();
-                        liElement["data-slider"] = PopsPanelSlider;
-                        return liElement;
+                        Reflect.set($li, "data-slider", PopsPanelSlider);
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> input
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_input(formConfig) {
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         let inputType = "text";
                         if (formConfig.isPassword) {
                             inputType = "password";
@@ -8033,7 +8035,7 @@ System.register('pops', [], (function (exports) {
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8044,8 +8046,8 @@ System.register('pops', [], (function (exports) {
                         const PopsPanelInput = {
                             [Symbol.toStringTag]: "PopsPanelInput",
                             $ele: {
-                                panelInput: liElement.querySelector(".pops-panel-input"),
-                                input: liElement.querySelector("input"),
+                                panelInput: $li.querySelector(".pops-panel-input"),
+                                input: $li.querySelector("input"),
                                 inputSpanIcon: document.createElement("span"),
                                 inputSpanIconInner: null,
                                 icon: null,
@@ -8074,7 +8076,7 @@ System.register('pops', [], (function (exports) {
                                     this.disable();
                                 }
                                 if (typeof formConfig.handlerCallBack === "function") {
-                                    formConfig.handlerCallBack(liElement, this.$ele.input);
+                                    formConfig.handlerCallBack($li, this.$ele.input);
                                 }
                             },
                             /**
@@ -8209,26 +8211,26 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelInput.init();
-                        liElement["data-input"] = PopsPanelInput;
-                        return liElement;
+                        Reflect.set($li, "data-input", PopsPanelInput);
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> textarea
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_textarea(formConfig) {
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8239,8 +8241,8 @@ System.register('pops', [], (function (exports) {
                         const PopsPanelTextArea = {
                             [Symbol.toStringTag]: "PopsPanelTextArea",
                             $ele: {
-                                panelTextarea: liElement.querySelector(".pops-panel-textarea"),
-                                textarea: liElement.querySelector(".pops-panel-textarea textarea"),
+                                panelTextarea: $li.querySelector(".pops-panel-textarea"),
+                                textarea: $li.querySelector(".pops-panel-textarea textarea"),
                             },
                             $data: {
                                 value: formConfig.getValue(),
@@ -8272,35 +8274,36 @@ System.register('pops', [], (function (exports) {
                              */
                             setChangeEvent() {
                                 popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
-                                    this.$data.value = event.target.value;
+                                    let value = this.$ele.textarea.value;
+                                    this.$data.value = value;
                                     if (typeof formConfig.callback === "function") {
-                                        formConfig.callback(event, event.target.value);
+                                        formConfig.callback(event, value);
                                     }
                                 });
                             },
                         };
                         PopsPanelTextArea.init();
-                        liElement["data-textarea"] = PopsPanelTextArea;
-                        return liElement;
+                        Reflect.set($li, "data-textarea", PopsPanelTextArea);
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> select
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_select(formConfig) {
                         const that = this;
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8311,8 +8314,8 @@ System.register('pops', [], (function (exports) {
                         const PopsPanelSelect = {
                             [Symbol.toStringTag]: "PopsPanelSelect",
                             $ele: {
-                                panelSelect: liElement.querySelector(".pops-panel-select"),
-                                select: liElement.querySelector(".pops-panel-select select"),
+                                panelSelect: $li.querySelector(".pops-panel-select"),
+                                select: $li.querySelector(".pops-panel-select select"),
                             },
                             $eleKey: {
                                 disable: "__disable__",
@@ -8432,7 +8435,7 @@ System.register('pops', [], (function (exports) {
                              */
                             setChangeEvent() {
                                 popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
-                                    let $isSelectedElement = event.target[event.target.selectedIndex];
+                                    let $isSelectedElement = this.$ele.select[this.$ele.select.selectedIndex];
                                     let selectInfo = this.getSelectOptionInfo($isSelectedElement);
                                     this.setSelectOptionsDisableStatus();
                                     if (typeof formConfig.callback === "function") {
@@ -8445,9 +8448,9 @@ System.register('pops', [], (function (exports) {
                                         /* 如果成功创建，加入到中间容器中 */
                                         let childUListClassName = "pops-panel-select-child-forms";
                                         // 移除旧的元素
-                                        while (liElement.nextElementSibling) {
-                                            if (liElement.nextElementSibling.classList.contains(childUListClassName)) {
-                                                liElement.nextElementSibling.remove();
+                                        while ($li.nextElementSibling) {
+                                            if ($li.nextElementSibling.classList.contains(childUListClassName)) {
+                                                $li.nextElementSibling.remove();
                                             }
                                             else {
                                                 break;
@@ -8455,7 +8458,7 @@ System.register('pops', [], (function (exports) {
                                         }
                                         let $childUList = document.createElement("ul");
                                         $childUList.className = childUListClassName;
-                                        popsDOMUtils.after(liElement, $childUList);
+                                        popsDOMUtils.after($li, $childUList);
                                         that.uListContainerAddItem(formConfig, {
                                             ulElement: $childUList,
                                         });
@@ -8475,26 +8478,26 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelSelect.init();
-                        Reflect.set(liElement, "data-select", PopsPanelSelect);
-                        return liElement;
+                        Reflect.set($li, "data-select", PopsPanelSelect);
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> select-multiple
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_select_multiple_new(formConfig) {
-                        let liElement = document.createElement("li");
-                        Reflect.set(liElement, "__formConfig__", formConfig);
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -8569,15 +8572,14 @@ System.register('pops', [], (function (exports) {
                             },
                             /** 初始化$el变量 */
                             inintEl() {
-                                this.$el.$container = liElement.querySelector(".pops-panel-select-multiple");
-                                this.$el.$wrapper = liElement.querySelector(".el-select__wrapper");
-                                this.$el.$section = liElement.querySelector(".el-select__selection");
-                                this.$el.$selectedInputWrapper = liElement.querySelector(".el-select__selected-item.el-select__input-wrapper");
-                                this.$el.$selectedPlaceHolderWrapper =
-                                    liElement.querySelector(".el-select__selected-item.el-select__placeholder");
+                                this.$el.$container = $li.querySelector(".pops-panel-select-multiple");
+                                this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
+                                this.$el.$section = $li.querySelector(".el-select__selection");
+                                this.$el.$selectedInputWrapper = $li.querySelector(".el-select__selected-item.el-select__input-wrapper");
+                                this.$el.$selectedPlaceHolderWrapper = $li.querySelector(".el-select__selected-item.el-select__placeholder");
                                 this.$el.$suffix =
-                                    liElement.querySelector(".el-select__suffix");
-                                this.$el.$suffixIcon = liElement.querySelector(".el-select__suffix .el-icon");
+                                    $li.querySelector(".el-select__suffix");
+                                this.$el.$suffixIcon = $li.querySelector(".el-select__suffix .el-icon");
                                 // 先把手动输入框隐藏
                                 this.hideInputWrapper();
                             },
@@ -9135,26 +9137,26 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelSelectMultiple.init();
-                        Reflect.set(liElement, "data-select-multiple", PopsPanelSelectMultiple);
-                        return liElement;
+                        Reflect.set($li, "data-select-multiple", PopsPanelSelectMultiple);
+                        return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ==> button
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_button(formConfig) {
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
-                        this.setElementClassName(liElement, formConfig.className);
-                        this.setElementAttributes(liElement, formConfig.attributes);
-                        this.setElementProps(liElement, formConfig.props);
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
+                        this.setElementClassName($li, formConfig.className);
+                        this.setElementAttributes($li, formConfig.attributes);
+                        this.setElementProps($li, formConfig.props);
                         /* 左边底部的描述的文字 */
                         let leftDescriptionText = "";
                         if (Boolean(formConfig.description)) {
                             leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                         }
-                        PopsSafeUtils.setSafeHTML(liElement, 
+                        PopsSafeUtils.setSafeHTML($li, 
                         /*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
@@ -9168,10 +9170,10 @@ System.register('pops', [], (function (exports) {
                         const PopsPanelButton = {
                             [Symbol.toStringTag]: "PopsPanelButton",
                             $ele: {
-                                panelButton: liElement.querySelector(".pops-panel-button"),
-                                button: liElement.querySelector(".pops-panel-button .pops-panel-button_inner"),
-                                icon: liElement.querySelector(".pops-panel-button .pops-bottom-icon"),
-                                spanText: liElement.querySelector(".pops-panel-button .pops-panel-button-text"),
+                                panelButton: $li.querySelector(".pops-panel-button"),
+                                button: $li.querySelector(".pops-panel-button .pops-panel-button_inner"),
+                                icon: $li.querySelector(".pops-panel-button .pops-bottom-icon"),
+                                spanText: $li.querySelector(".pops-panel-button .pops-panel-button-text"),
                             },
                             $data: {},
                             init() {
@@ -9284,10 +9286,11 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelButton.init();
-                        liElement["data-button"] = PopsPanelButton;
-                        return liElement;
+                        Reflect.set($li, "data-button", PopsPanelButton);
+                        return $li;
                     },
                     /**
+                     * type ==> deepMenu
                      * 获取深层容器的元素<li>
                      * @param formConfig
                      */
@@ -9295,7 +9298,7 @@ System.register('pops', [], (function (exports) {
                         let that = this;
                         let $li = document.createElement("li");
                         $li.classList.add("pops-panel-deepMenu-nav-item");
-                        $li["__formConfig__"] = formConfig;
+                        Reflect.set($li, "__formConfig__", formConfig);
                         this.setElementClassName($li, formConfig.className);
                         // 设置属性
                         this.setElementAttributes($li, formConfig.attributes);
@@ -9431,6 +9434,7 @@ System.register('pops', [], (function (exports) {
                                 let $deepMenuContainer = popsDOMUtils.createElement("section", {
                                     className: "pops-panel-container pops-panel-deepMenu-container",
                                 });
+                                Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
                                 let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
                                     className: "pops-panel-deepMenu-container-header-ul",
                                 });
@@ -9445,13 +9449,13 @@ System.register('pops', [], (function (exports) {
                                     className: "pops-panel-deepMenu-container-left-arrow-icon",
                                     innerHTML: PopsIcon.getIcon("arrowLeft"),
                                 });
-                                popsDOMUtils.on($headerLeftArrow, "click", void 0, (event) => {
-                                    event?.preventDefault();
-                                    event?.stopPropagation();
+                                popsDOMUtils.on($headerLeftArrow, "click", (event) => {
+                                    popsDOMUtils.preventEvent(event);
                                     // 返回上一层菜单
-                                    let $prev = $deepMenuContainer.previousElementSibling;
+                                    let $prev = ($deepMenuContainer.previousElementSibling);
                                     popsDOMUtils.cssShow($prev);
                                     $deepMenuContainer.remove();
+                                    that.triggerRenderRightContainer($prev);
                                 }, {
                                     once: true,
                                 });
@@ -9474,6 +9478,7 @@ System.register('pops', [], (function (exports) {
                                         sectionBodyContainer: $deepMenuBodyUL,
                                     });
                                 }
+                                that.triggerRenderRightContainer($deepMenuContainer);
                             },
                             /** 设置项的点击事件 */
                             setLiClickEvent() {
@@ -9489,22 +9494,22 @@ System.register('pops', [], (function (exports) {
                             },
                         };
                         PopsPanelDeepMenu.init();
-                        $li["data-deepMenu"] = PopsPanelDeepMenu;
+                        Reflect.set($li, "data-deepMenu", PopsPanelDeepMenu);
                         return $li;
                     },
                     /**
-                     * 获取中间容器的元素<li>
                      * type ===> own
+                     * 获取中间容器的元素<li>
                      * @param formConfig
                      */
                     createSectionContainerItem_own(formConfig) {
-                        let liElement = document.createElement("li");
-                        liElement["__formConfig__"] = formConfig;
+                        let $li = document.createElement("li");
+                        Reflect.set($li, "__formConfig__", formConfig);
                         if (formConfig.className) {
-                            liElement.className = formConfig.className;
+                            $li.className = formConfig.className;
                         }
-                        liElement = formConfig.getLiElementCallBack(liElement);
-                        return liElement;
+                        $li = formConfig.getLiElementCallBack($li);
+                        return $li;
                     },
                     /**
                      * 获取中间容器的元素<li>
@@ -9625,6 +9630,17 @@ System.register('pops', [], (function (exports) {
                             });
                         }
                     },
+                    /**
+                     * 触发触发渲染右侧容器的事件
+                     */
+                    triggerRenderRightContainer($container) {
+                        let __formConfig__ = Reflect.get($container, "__formConfig__");
+                        this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
+                            detail: {
+                                formConfig: __formConfig__,
+                            },
+                        }));
+                    },
                     /**
                      *
                      * @param formConfig
@@ -9651,6 +9667,8 @@ System.register('pops', [], (function (exports) {
                         const that = this;
                         popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
                             this.clearContainer();
+                            let rightContainerFormConfig = Reflect.get(asideLiElement, "__forms__");
+                            Reflect.set(that.$el.$contentSectionContainer, "__formConfig__", rightContainerFormConfig);
                             popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
                             this.clearAsideItemIsVisited();
                             this.setAsideItemIsVisited(asideLiElement);
@@ -9658,20 +9676,19 @@ System.register('pops', [], (function (exports) {
                             let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
                             if (typeof headerTitleText === "string" &&
                                 headerTitleText.trim() !== "") {
-                                let containerHeaderTitleLIElement = document.createElement("li");
-                                containerHeaderTitleLIElement["__asideConfig__"] =
-                                    asideConfig;
-                                PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
-                                this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
-                            }
-                            let __forms__ = asideLiElement["__forms__"];
-                            __forms__.forEach((formConfig) => {
+                                let $containerHeaderTitle = document.createElement("li");
+                                Reflect.set($containerHeaderTitle, "__asideConfig__", asideConfig);
+                                PopsSafeUtils.setSafeHTML($containerHeaderTitle, headerTitleText);
+                                this.sectionContainerHeaderULElement.appendChild($containerHeaderTitle);
+                            }
+                            rightContainerFormConfig.forEach((formConfig) => {
                                 this.createSectionContainerItem_forms(formConfig);
                             });
                             if (typeof asideConfig.callback === "function") {
                                 /* 执行回调 */
                                 asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
                             }
+                            that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
                         });
                     },
                 };
@@ -9761,13 +9778,14 @@ System.register('pops', [], (function (exports) {
                     if ($mask != null) {
                         $anim.after($mask);
                     }
-                    let panelHandleContentDetails = PanelHandleContentDetails();
+                    let panelHandlerComponents = PanelHandlerComponents();
                     /**
                      * 处理内部配置
                      */
-                    panelHandleContentDetails.init({
+                    panelHandlerComponents.init({
                         config: config,
                         $el: {
+                            $pops: $pops,
                             $content: $content,
                             $contentAside: $contentAside,
                             $contentSectionContainer: $contentSectionContainer,
@@ -9792,7 +9810,15 @@ System.register('pops', [], (function (exports) {
                         });
                     }
                     let result = PopsHandler.handleResultDetails(eventDetails);
-                    return result;
+                    return {
+                        ...result,
+                        addEventListener: (event, listener, options) => {
+                            $pops.addEventListener(event, listener, options);
+                        },
+                        removeEventListener: (event, listener, options) => {
+                            $pops.removeEventListener(event, listener, options);
+                        },
+                    };
                 },
             };
 
@@ -11036,14 +11062,14 @@ System.register('pops', [], (function (exports) {
                 /** 配置 */
                 config = {
                     /** 版本号 */
-                    version: "2025.6.18",
+                    version: "2025.7.1",
                     cssText: PopsCSS,
                     /** icon图标的svg代码 */
                     iconSVG: PopsIcon.$data,
                     /** 当前已配置的动画@keyframes名字映射(初始化时生成) */
                     animation: PopsAnimation.$data,
                     /** 存储已创建的元素 */
-                    layer: PopsLayer,
+                    layer: PopsLayerData,
                     /** 禁止滚动 */
                     forbiddenScroll: {
                         event(event) {
@@ -11059,7 +11085,7 @@ System.register('pops', [], (function (exports) {
                     /** pops处理float类型使用的工具类 */
                     MathFloatUtils: PopsMathFloatUtils,
                     /** pops.panel中用于处理各个类型的工具 */
-                    panelHandleContentUtils: PanelHandleContentDetails,
+                    PanelHandlerComponents: PanelHandlerComponents,
                 };
                 init() { }
                 /**