@whitesev/pops 2.1.3 → 2.1.4

package/dist/index.esm.js

@@ -327,8 +327,7 @@ class PopsUtils {
         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]") {
@@ -7075,6 +7074,8 @@ const PanelHandleContentDetails = () => {
          * 元素
          */
         $el: {
+            /** pops主元素 */
+            $pops: null,
             /** 内容 */
             $content: null,
             /** 左侧容器 */
@@ -7087,8 +7088,6 @@ const PanelHandleContentDetails = () => {
          * @param details
          */
         init(details) {
-            // @ts-ignore
-            this.$el = null;
             this.$el = {
                 ...details.$el,
             };
@@ -7151,11 +7150,12 @@ const PanelHandleContentDetails = () => {
          * 清空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());
         },
         /**
          * 清空左侧容器已访问记录
@@ -7163,8 +7163,8 @@ const PanelHandleContentDetails = () => {
         clearAsideItemIsVisited() {
             this.$el.$contentAside
                 .querySelectorAll(".pops-is-visited")
-                .forEach((element) => {
-                popsDOMUtils.removeClassName(element, "pops-is-visited");
+                .forEach(($el) => {
+                popsDOMUtils.removeClassName($el, "pops-is-visited");
             });
         },
         /**
@@ -7241,34 +7241,33 @@ const PanelHandleContentDetails = () => {
          * @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>
@@ -7285,9 +7284,9 @@ const PanelHandleContentDetails = () => {
                     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);
@@ -7349,26 +7348,26 @@ const PanelHandleContentDetails = () => {
                 },
             };
             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>
@@ -7376,11 +7375,11 @@ const PanelHandleContentDetails = () => {
 					<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
@@ -7394,9 +7393,9 @@ const PanelHandleContentDetails = () => {
                 }
             };
             let tooltip = PopsTooltip.init({
-                target: rangeInputElement.parentElement,
+                target: $rangeInput.parentElement,
                 content: () => {
-                    return getToolTipContent(rangeInputElement.value);
+                    return getToolTipContent($rangeInput.value);
                 },
                 zIndex: () => {
                     return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
@@ -7407,32 +7406,31 @@ const PanelHandleContentDetails = () => {
                 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>
@@ -7507,11 +7505,11 @@ const PanelHandleContentDetails = () => {
                     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,
@@ -7577,14 +7575,10 @@ const PanelHandleContentDetails = () => {
                     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)
@@ -7604,7 +7598,7 @@ const PanelHandleContentDetails = () => {
                     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 = {
@@ -7647,7 +7641,7 @@ const PanelHandleContentDetails = () => {
                     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 = {
@@ -7805,7 +7799,7 @@ const PanelHandleContentDetails = () => {
                             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);
@@ -7958,7 +7952,7 @@ const PanelHandleContentDetails = () => {
                             return formConfig.getToolTipContent(PopsPanelSlider.value);
                         }
                         else {
-                            return PopsPanelSlider.value;
+                            return PopsPanelSlider.value.toString();
                         }
                     }
                     let tooltip = PopsTooltip.init({
@@ -8002,20 +7996,20 @@ const PanelHandleContentDetails = () => {
                 },
             };
             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";
@@ -8028,7 +8022,7 @@ const PanelHandleContentDetails = () => {
             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>
@@ -8039,8 +8033,8 @@ const PanelHandleContentDetails = () => {
             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,
@@ -8069,7 +8063,7 @@ const PanelHandleContentDetails = () => {
                         this.disable();
                     }
                     if (typeof formConfig.handlerCallBack === "function") {
-                        formConfig.handlerCallBack(liElement, this.$ele.input);
+                        formConfig.handlerCallBack($li, this.$ele.input);
                     }
                 },
                 /**
@@ -8204,26 +8198,26 @@ const PanelHandleContentDetails = () => {
                 },
             };
             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>
@@ -8234,8 +8228,8 @@ const PanelHandleContentDetails = () => {
             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(),
@@ -8267,35 +8261,36 @@ const PanelHandleContentDetails = () => {
                  */
                 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>
@@ -8306,8 +8301,8 @@ const PanelHandleContentDetails = () => {
             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__",
@@ -8427,7 +8422,7 @@ const PanelHandleContentDetails = () => {
                  */
                 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") {
@@ -8440,9 +8435,9 @@ const PanelHandleContentDetails = () => {
                             /* 如果成功创建，加入到中间容器中 */
                             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;
@@ -8450,7 +8445,7 @@ const PanelHandleContentDetails = () => {
                             }
                             let $childUList = document.createElement("ul");
                             $childUList.className = childUListClassName;
-                            popsDOMUtils.after(liElement, $childUList);
+                            popsDOMUtils.after($li, $childUList);
                             that.uListContainerAddItem(formConfig, {
                                 ulElement: $childUList,
                             });
@@ -8470,26 +8465,26 @@ const PanelHandleContentDetails = () => {
                 },
             };
             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>
@@ -8564,15 +8559,14 @@ const PanelHandleContentDetails = () => {
                 },
                 /** 初始化$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();
                 },
@@ -9130,26 +9124,26 @@ const PanelHandleContentDetails = () => {
                 },
             };
             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>
@@ -9163,10 +9157,10 @@ const PanelHandleContentDetails = () => {
             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() {
@@ -9279,10 +9273,11 @@ const PanelHandleContentDetails = () => {
                 },
             };
             PopsPanelButton.init();
-            liElement["data-button"] = PopsPanelButton;
-            return liElement;
+            Reflect.set($li, "data-button", PopsPanelButton);
+            return $li;
         },
         /**
+         * type ==> deepMenu
          * 获取深层容器的元素<li>
          * @param formConfig
          */
@@ -9290,7 +9285,7 @@ const PanelHandleContentDetails = () => {
             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);
@@ -9426,6 +9421,7 @@ const PanelHandleContentDetails = () => {
                     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",
                     });
@@ -9440,13 +9436,13 @@ const PanelHandleContentDetails = () => {
                         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,
                     });
@@ -9469,6 +9465,7 @@ const PanelHandleContentDetails = () => {
                             sectionBodyContainer: $deepMenuBodyUL,
                         });
                     }
+                    that.triggerRenderRightContainer($deepMenuContainer);
                 },
                 /** 设置项的点击事件 */
                 setLiClickEvent() {
@@ -9484,22 +9481,22 @@ const PanelHandleContentDetails = () => {
                 },
             };
             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>
@@ -9620,6 +9617,17 @@ const PanelHandleContentDetails = () => {
                 });
             }
         },
+        /**
+         * 触发触发渲染右侧容器的事件
+         */
+        triggerRenderRightContainer($container) {
+            let __formConfig__ = Reflect.get($container, "__formConfig__");
+            this.$el.$pops.dispatchEvent(new CustomEvent("pops:renderRightContainer", {
+                detail: {
+                    formConfig: __formConfig__,
+                },
+            }));
+        },
         /**
          *
          * @param formConfig
@@ -9646,6 +9654,8 @@ const PanelHandleContentDetails = () => {
             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);
@@ -9653,20 +9663,19 @@ const PanelHandleContentDetails = () => {
                 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);
             });
         },
     };
@@ -9763,6 +9772,7 @@ const PopsPanel = {
         panelHandleContentDetails.init({
             config: config,
             $el: {
+                $pops: $pops,
                 $content: $content,
                 $contentAside: $contentAside,
                 $contentSectionContainer: $contentSectionContainer,
@@ -9787,7 +9797,15 @@ const PopsPanel = {
             });
         }
         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);
+            },
+        };
     },
 };
 
@@ -11031,7 +11049,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2025.6.18",
+        version: "2025.6.25",
         cssText: PopsCSS,
         /** icon图标的svg代码 */
         iconSVG: PopsIcon.$data,