@whitesev/pops 1.9.6 → 2.0.0

package/dist/index.esm.js

@@ -310,6 +310,31 @@ class PopsUtils {
 }
 const popsUtils = new PopsUtils();
 
+const PopsSafeUtils = {
+    /**
+     * 设置安全的html
+     */
+    setSafeHTML($el, text) {
+        // 创建 TrustedHTML 策略（需 CSP 允许）
+        try {
+            $el.innerHTML = text;
+        }
+        catch (error) {
+            // @ts-ignore
+            if (globalThis.trustedTypes) {
+                // @ts-ignore
+                const policy = globalThis.trustedTypes.createPolicy("safe-innerHTML", {
+                    createHTML: (html) => html,
+                });
+                $el.innerHTML = policy.createHTML(text);
+            }
+            else {
+                throw new Error("trustedTypes is not defined");
+            }
+        }
+    },
+};
+
 class PopsDOMUtilsEvent {
     on(element, eventType, selector, callback, option) {
         /**
@@ -1247,7 +1272,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
     attributes) {
         let tempElement = PopsCore.document.createElement(tagName);
         if (typeof property === "string") {
-            tempElement.innerHTML = property;
+            PopsSafeUtils.setSafeHTML(tempElement, property);
             return tempElement;
         }
         if (property == null) {
@@ -1258,6 +1283,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         }
         Object.keys(property).forEach((key) => {
             let value = property[key];
+            if (key === "innerHTML") {
+                PopsSafeUtils.setSafeHTML(tempElement, value);
+                return;
+            }
+            // @ts-ignore
             tempElement[key] = value;
         });
         Object.keys(attributes).forEach((key) => {
@@ -1460,7 +1490,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         }
         function parseHTMLByCreateDom() {
             let tempDIV = PopsCore.document.createElement("div");
-            tempDIV.innerHTML = html;
+            PopsSafeUtils.setSafeHTML(tempDIV, html);
             if (isComplete) {
                 return tempDIV;
             }
@@ -4856,26 +4886,29 @@ class PopsFolder {
             fileNameElement.className = "pops-folder-list-table__body-td";
             fileTimeElement.className = "pops-folder-list-table__body-td";
             fileFormatSize.className = "pops-folder-list-table__body-td";
-            fileNameElement.innerHTML = `
-            <div class="pops-folder-list-file-name cursor-p">
-                <div>
-                    <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
-                    <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
-                    ${fileName}
-                    </a>
-                </div>
-            </div>
-            `;
-            fileTimeElement.innerHTML = `
-            <div class="pops-folder-list__time">
-                <span>${latestTime}</span>
-            </div>
-            `;
-            fileFormatSize.innerHTML = `
-            <div class="pops-folder-list-format-size">
-                <span>${fileSize}</span>
-            </div>
-            `;
+            PopsSafeUtils.setSafeHTML(fileNameElement, 
+            /*html*/ `
+				<div class="pops-folder-list-file-name cursor-p">
+					<div>
+						<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
+						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
+						${fileName}
+						</a>
+					</div>
+				</div>
+            `);
+            PopsSafeUtils.setSafeHTML(fileTimeElement, 
+            /*html*/ `
+				<div class="pops-folder-list__time">
+					<span>${latestTime}</span>
+				</div>
+				`);
+            PopsSafeUtils.setSafeHTML(fileFormatSize, 
+            /*html*/ `
+				<div class="pops-folder-list-format-size">
+					<span>${fileSize}</span>
+				</div>
+				`);
             /* 存储原来的值 */
             let __value__ = {
                 fileName: origin_fileName,
@@ -4936,17 +4969,18 @@ class PopsFolder {
             }
             folderELement.className = "pops-folder-list-table__body-row";
             fileNameElement.className = "pops-folder-list-table__body-td";
-            fileNameElement.innerHTML = `
-            <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
-                <img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
-                <div>
-                    <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
-                        ${fileName}
-                    </a>
-                    <span>${latestTime} ${fileSize}</span>
-                </div>
-            </div>
-            `;
+            PopsSafeUtils.setSafeHTML(fileNameElement, 
+            /*html*/ `
+				<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
+					<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
+					<div>
+						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
+							${fileName}
+						</a>
+						<span>${latestTime} ${fileSize}</span>
+					</div>
+				</div>
+			`);
             /* 存储原来的值 */
             let __value__ = {
                 fileName: origin_fileName,
@@ -4966,7 +5000,7 @@ class PopsFolder {
          * 清空每行的元素
          */
         function clearFolerRow() {
-            folderListBodyElement.innerHTML = "";
+            PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
         }
         function getArrowIconElement() {
             let iconArrowElement = popsDOMUtils.createElement("div", {
@@ -5540,6 +5574,7 @@ const PopsPanelConfig = () => {
                                 disable() {
                                     return false;
                                 },
+                                forms: [],
                             },
                             {
                                 value: "text",
@@ -5547,6 +5582,7 @@ const PopsPanelConfig = () => {
                                 disable() {
                                     return false;
                                 },
+                                forms: [],
                             },
                             {
                                 value: "html",
@@ -5554,6 +5590,7 @@ const PopsPanelConfig = () => {
                                 disable() {
                                     return false;
                                 },
+                                forms: [],
                             },
                         ],
                     },
@@ -5962,8 +5999,8 @@ const PanelHandleContentDetails = () => {
          * 清空container容器的元素
          */
         clearContainer() {
-            this.sectionContainerHeaderULElement.innerHTML = "";
-            this.sectionContainerULElement.innerHTML = "";
+            PopsSafeUtils.setSafeHTML(this.sectionContainerHeaderULElement, "");
+            PopsSafeUtils.setSafeHTML(this.sectionContainerULElement, "");
             this.$el.$content
                 ?.querySelectorAll("section.pops-panel-deepMenu-container")
                 .forEach((ele) => ele.remove());
@@ -6049,8 +6086,9 @@ const PanelHandleContentDetails = () => {
         createAsideItem(asideConfig) {
             let liElement = document.createElement("li");
             liElement.id = asideConfig.id;
+            // @ts-ignore
             liElement["__forms__"] = asideConfig.forms;
-            liElement.innerHTML = asideConfig.title;
+            PopsSafeUtils.setSafeHTML(liElement, asideConfig.title);
             /* 处理className */
             this.setElementClassName(liElement, asideConfig.className);
             this.setElementAttributes(liElement, asideConfig.attributes);
@@ -6073,18 +6111,19 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = /*html*/ `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-			</div>
-			<div class="pops-panel-switch">
-				<input class="pops-panel-switch__input" type="checkbox">
-				<span class="pops-panel-switch__core">
-					<div class="pops-panel-switch__action">
-					</div>
-				</span>
-			</div>`;
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+					${leftDescriptionText}
+				</div>
+				<div class="pops-panel-switch">
+					<input class="pops-panel-switch__input" type="checkbox">
+					<span class="pops-panel-switch__core">
+						<div class="pops-panel-switch__action">
+						</div>
+					</span>
+				</div>`);
             const PopsPanelSwitch = {
                 [Symbol.toStringTag]: "PopsPanelSwitch",
                 $data: {
@@ -6174,14 +6213,16 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-			</div>
-			<div class="pops-panel-slider">
-				<input type="range" min="${formConfig.min}" max="${formConfig.max}">
-			</div>`;
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+					${leftDescriptionText}
+				</div>
+				<div class="pops-panel-slider">
+					<input type="range" min="${formConfig.min}" max="${formConfig.max}">
+				</div>
+			`);
             let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
             if (formConfig.step) {
                 rangeInputElement.setAttribute("step", formConfig.step.toString());
@@ -6237,19 +6278,20 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = /*html*/ `
-			<div class="pops-panel-item-left-text" style="flex: 1;">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-			</div>
-			<div class="pops-slider pops-slider-width">
-				<div class="pops-slider__runway">
-					<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
-					<div class="pops-slider__button-wrapper" style="left: 0%">
-						<div class="pops-slider__button"></div>
-					</div>
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text" style="flex: 1;">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+					${leftDescriptionText}
 				</div>
-			</div>`;
+				<div class="pops-slider pops-slider-width">
+					<div class="pops-slider__runway">
+						<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
+						<div class="pops-slider__button-wrapper" style="left: 0%">
+							<div class="pops-slider__button"></div>
+						</div>
+					</div>
+				</div>`);
             const PopsPanelSlider = {
                 [Symbol.toStringTag]: "PopsPanelSlider",
                 /**
@@ -6799,15 +6841,16 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-			${leftDescriptionText}
-			</div>
-			<div class="pops-panel-input pops-user-select-none">
-				<input type="${inputType}" placeholder="${formConfig.placeholder}">
-			</div>
-			`;
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+				</div>
+				<div class="pops-panel-input pops-user-select-none">
+					<input type="${inputType}" placeholder="${formConfig.placeholder}">
+				</div>
+				`);
             const PopsPanelInput = {
                 [Symbol.toStringTag]: "PopsPanelInput",
                 $ele: {
@@ -6850,11 +6893,12 @@ const PanelHandleContentDetails = () => {
                 initEle() {
                     this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
                     this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
-                    this.$ele.inputSpanIcon.innerHTML = `
-					<span class="pops-panel-input__suffix-inner">
-						<i class="pops-panel-icon"></i>
-					</span>
-					`;
+                    PopsSafeUtils.setSafeHTML(this.$ele.inputSpanIcon, 
+                    /*html*/ `
+						<span class="pops-panel-input__suffix-inner">
+							<i class="pops-panel-icon"></i>
+						</span>
+					`);
                     this.$ele.inputSpanIconInner =
                         this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
                     this.$ele.icon =
@@ -6889,7 +6933,7 @@ const PanelHandleContentDetails = () => {
                 },
                 /**
                  * 设置input元素的type
-                 * @param {string} [typeValue="text"] type值
+                 * @param [typeValue="text"] type值
                  */
                 setInputType(typeValue = "text") {
                     this.$ele.input.setAttribute("type", typeValue);
@@ -6898,14 +6942,14 @@ const PanelHandleContentDetails = () => {
                  * 删除图标按钮
                  */
                 removeCircleIcon() {
-                    this.$ele.icon.innerHTML = "";
+                    PopsSafeUtils.setSafeHTML(this.$ele.icon, "");
                 },
                 /**
                  * 添加清空图标按钮
-                 * @param {string} [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
+                 * @param [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
                  */
                 setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
-                    this.$ele.icon.innerHTML = svgHTML;
+                    PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
                 },
                 /**
                  * 添加图标按钮的点击事件
@@ -6994,16 +7038,17 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-			${leftDescriptionText}
-			</div>
-			<div class="pops-panel-textarea">
-				<textarea placeholder="${formConfig.placeholder ?? ""}">
-			</textarea>
-			</div>
-			`;
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+				</div>
+				<div class="pops-panel-textarea">
+					<textarea placeholder="${formConfig.placeholder ?? ""}">
+				</textarea>
+				</div>
+			`);
             const PopsPanelTextArea = {
                 [Symbol.toStringTag]: "PopsPanelTextArea",
                 $ele: {
@@ -7057,6 +7102,7 @@ const PanelHandleContentDetails = () => {
          * @param formConfig
          */
         createSectionContainerItem_select(formConfig) {
+            const that = this;
             let liElement = document.createElement("li");
             liElement["__formConfig__"] = formConfig;
             this.setElementClassName(liElement, formConfig.className);
@@ -7067,15 +7113,16 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = /*html*/ `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-			${leftDescriptionText}
-			</div>
-			<div class="pops-panel-select pops-user-select-none">
-				<select></select>
-			</div>
-			`;
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+				</div>
+				<div class="pops-panel-select pops-user-select-none">
+					<select></select>
+				</div>
+				`);
             const PopsPanelSelect = {
                 [Symbol.toStringTag]: "PopsPanelSelect",
                 $ele: {
@@ -7085,6 +7132,7 @@ const PanelHandleContentDetails = () => {
                 $eleKey: {
                     disable: "__disable__",
                     value: "__value__",
+                    forms: "__forms__",
                 },
                 $data: {
                     defaultValue: formConfig.getValue(),
@@ -7115,31 +7163,50 @@ const PanelHandleContentDetails = () => {
                 getNodeValue($ele, key) {
                     return Reflect.get($ele, key);
                 },
+                /**
+                 * 禁用选项
+                 */
                 disable() {
                     this.$ele.select.setAttribute("disabled", "true");
                     this.$ele.panelSelect.classList.add("pops-panel-select-disable");
                 },
+                /**
+                 * 取消禁用
+                 */
                 notDisable() {
                     this.$ele.select.removeAttribute("disabled");
                     this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
                 },
+                /**
+                 * 判断是否禁用
+                 */
                 isDisabled() {
                     return (this.$ele.select.hasAttribute("disabled") ||
                         this.$ele.panelSelect.classList.contains("pops-panel-select-disable"));
                 },
+                /**
+                 * 初始化选项
+                 */
                 initOption() {
                     formConfig.data.forEach((dataItem) => {
                         // 初始化默认选中
                         let optionElement = document.createElement("option");
                         this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
                         this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
+                        this.setNodeValue(optionElement, this.$eleKey.forms, dataItem.forms);
                         if (dataItem.value === this.$data.defaultValue) {
-                            optionElement.setAttribute("selected", "true");
+                            this.setOptionSelected(optionElement);
                         }
                         optionElement.innerText = dataItem.text;
                         this.$ele.select.appendChild(optionElement);
                     });
                 },
+                /**
+                 * 设置选项选中
+                 */
+                setOptionSelected($option) {
+                    $option.setAttribute("selected", "true");
+                },
                 /** 检测所有option并设置禁用状态 */
                 setSelectOptionsDisableStatus() {
                     if (this.$ele.select.options && this.$ele.select.options.length) {
@@ -7167,9 +7234,11 @@ const PanelHandleContentDetails = () => {
                 getSelectOptionInfo($option) {
                     let optionValue = this.getNodeValue($option, this.$eleKey.value);
                     let optionText = $option.innerText || $option.textContent;
+                    let optionForms = this.getNodeValue($option, this.$eleKey.forms);
                     return {
                         value: optionValue,
                         text: optionText,
+                        forms: optionForms,
                         $option: $option,
                     };
                 },
@@ -7178,12 +7247,34 @@ const PanelHandleContentDetails = () => {
                  */
                 setChangeEvent() {
                     popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
+                        let $isSelectedElement = event.target[event.target.selectedIndex];
+                        let selectInfo = this.getSelectOptionInfo($isSelectedElement);
                         this.setSelectOptionsDisableStatus();
                         if (typeof formConfig.callback === "function") {
-                            let $isSelectedElement = event.target[event.target.selectedIndex];
-                            let selectInfo = this.getSelectOptionInfo($isSelectedElement);
                             formConfig.callback(event, selectInfo.value, selectInfo.text);
                         }
+                        let forms = typeof selectInfo.forms === "function"
+                            ? selectInfo.forms()
+                            : selectInfo.forms;
+                        if (Array.isArray(forms)) {
+                            /* 如果成功创建，加入到中间容器中 */
+                            let childUListClassName = "pops-panel-select-child-forms";
+                            // 移除旧的元素
+                            while (liElement.nextElementSibling) {
+                                if (liElement.nextElementSibling.classList.contains(childUListClassName)) {
+                                    liElement.nextElementSibling.remove();
+                                }
+                                else {
+                                    break;
+                                }
+                            }
+                            let $childUList = document.createElement("ul");
+                            $childUList.className = childUListClassName;
+                            popsDOMUtils.after(liElement, $childUList);
+                            that.uListContainerAddItem(formConfig, {
+                                ulElement: $childUList,
+                            });
+                        }
                     });
                 },
                 /**
@@ -7218,33 +7309,34 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = /*html*/ `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-			${leftDescriptionText}
-			</div>
-			<div class="pops-panel-select-multiple">
-				<div class="el-select__wrapper">
-					<div class="el-select__selection">
-						<!-- 这个是用于手动输入的，这里暂不适配 -->
-						<div class="el-select__selected-item el-select__input-wrapper">
-	
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+				</div>
+				<div class="pops-panel-select-multiple">
+					<div class="el-select__wrapper">
+						<div class="el-select__selection">
+							<!-- 这个是用于手动输入的，这里暂不适配 -->
+							<div class="el-select__selected-item el-select__input-wrapper">
+		
+							</div>
+							<!-- 这个是placeholder -->
+							<div class="el-select__selected-item el-select__placeholder">
+							</div>
 						</div>
-						<!-- 这个是placeholder -->
-						<div class="el-select__selected-item el-select__placeholder">
+						<!-- 下拉箭头 -->
+						<div class="el-select__suffix">
+							<i class="el-icon el-select__caret el-select__icon">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+									<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
+								</svg>
+							</i>
 						</div>
 					</div>
-					<!-- 下拉箭头 -->
-					<div class="el-select__suffix">
-						<i class="el-icon el-select__caret el-select__icon">
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-								<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
-							</svg>
-						</i>
-					</div>
 				</div>
-			</div>
-			`;
+				`);
             const PopsPanelSelectMultiple = {
                 [Symbol.toStringTag]: "PopsPanelSelectMultiple",
                 $el: {
@@ -7369,7 +7461,7 @@ const PanelHandleContentDetails = () => {
                     /** 关闭图标 */
                     const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
                     if (data.isHTML) {
-                        $tagText.innerHTML = data.text;
+                        PopsSafeUtils.setSafeHTML($tagText, data.text);
                     }
                     else {
                         $tagText.innerText = data.text;
@@ -7522,12 +7614,28 @@ const PanelHandleContentDetails = () => {
                             Reflect.set($item, "data-info", dataInfo);
                             return $item;
                         }
+                        /**
+                         * 设置选择项的禁用状态
+                         */
+                        function setSelectItemDisabled($el) {
+                            $el.setAttribute("aria-disabled", "true");
+                        }
+                        /**
+                         * 移除选择项的禁用状态
+                         */
+                        function removeSelectItemDisabled($el) {
+                            $el.removeAttribute("aria-disabled");
+                            $el.removeAttribute("disabled");
+                        }
                         /**
                          * 设置选择项的点击事件
                          */
                         function setSelectElementClickEvent($ele) {
                             popsDOMUtils.on($ele, "click", (event) => {
                                 popsDOMUtils.preventEvent(event);
+                                if ($ele.hasAttribute("disabled") || $ele.ariaDisabled) {
+                                    return;
+                                }
                                 if (typeof formConfig.clickCallBack === "function") {
                                     let clickResult = formConfig.clickCallBack(event, getAllSelectedInfo());
                                     if (typeof clickResult === "boolean" && !clickResult) {
@@ -7593,7 +7701,6 @@ const PanelHandleContentDetails = () => {
 									--el-fill-color-light: #f5f7fa;
 								}
 								.select-item{
-									cursor: pointer;
 									cursor: pointer;
 									font-size: var(--el-font-size-base);
 									padding: 0 32px 0 20px;
@@ -7606,6 +7713,12 @@ const PanelHandleContentDetails = () => {
 									line-height: 34px;
 									box-sizing: border-box;
 								}
+								.select-item[aria-disabled],
+								.select-item[disabled]{
+									cursor: not-allowed;
+									color: #a8abb2;
+									background: unset;
+								}
 								.select-item:hover{
 									background-color: var(--el-fill-color-light);
 								}
@@ -7643,6 +7756,15 @@ const PanelHandleContentDetails = () => {
                             $selectContainer.appendChild($select);
                             // 设置每一项的点击事件
                             setSelectElementClickEvent($select);
+                            // 设置禁用状态
+                            if (typeof item.disable === "function" &&
+                                item.disable(item.value)) {
+                                setSelectItemDisabled($select);
+                                // 后续不设置元素的选中状态
+                                return;
+                            }
+                            // 移除禁用状态
+                            removeSelectItemDisabled($select);
                             let findValue = selectedInfo.find((value) => value.value === item.value);
                             if (findValue) {
                                 setItemSelected($select);
@@ -7746,18 +7868,19 @@ const PanelHandleContentDetails = () => {
             if (Boolean(formConfig.description)) {
                 leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
             }
-            liElement.innerHTML = /*html*/ `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-			</div>
-			<div class="pops-panel-button">
-				<button class="pops-panel-button_inner">
-					<i class="pops-bottom-icon"></i>
-					<span class="pops-panel-button-text"></span>
-				</button>
-			</div>
-			`;
+            PopsSafeUtils.setSafeHTML(liElement, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+					${leftDescriptionText}
+				</div>
+				<div class="pops-panel-button">
+					<button class="pops-panel-button_inner">
+						<i class="pops-bottom-icon"></i>
+						<span class="pops-panel-button-text"></span>
+					</button>
+				</div>
+				`);
             const PopsPanelButton = {
                 [Symbol.toStringTag]: "PopsPanelButton",
                 $ele: {
@@ -7827,7 +7950,7 @@ const PanelHandleContentDetails = () => {
                  * 设置icon图标的svg
                  */
                 setIconSVG(svgHTML) {
-                    this.$ele.icon.innerHTML = svgHTML;
+                    PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
                 },
                 /**
                  * 设置icon图标是否旋转
@@ -7866,7 +7989,7 @@ const PanelHandleContentDetails = () => {
                  * @param text
                  */
                 setButtonText(text) {
-                    this.$ele.spanText.innerHTML = text;
+                    PopsSafeUtils.setSafeHTML(this.$ele.spanText, text);
                 },
                 setClickEvent() {
                     popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
@@ -7912,16 +8035,17 @@ const PanelHandleContentDetails = () => {
             if (formConfig.rightText) {
                 rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
             }
-            $li.innerHTML = /*html*/ `
-			<div class="pops-panel-item-left-text">
-				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-				${leftDescriptionText}
-			</div>
-			<div class="pops-panel-deepMenu">
-				${rightText}
-				${arrowRightIconHTML}
-			</div>
-			`;
+            PopsSafeUtils.setSafeHTML($li, 
+            /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+					${leftDescriptionText}
+				</div>
+				<div class="pops-panel-deepMenu">
+					${rightText}
+					${arrowRightIconHTML}
+				</div>
+				`);
             const PopsPanelDeepMenu = {
                 [Symbol.toStringTag]: "PopsPanelDeepMenu",
                 $ele: {
@@ -7951,19 +8075,19 @@ const PanelHandleContentDetails = () => {
                         let formHeaderDivElement = popsDOMUtils.createElement("div", {
                             className: "pops-panel-forms-container-item-header-text",
                         });
-                        formHeaderDivElement.innerHTML = formConfig_forms["text"];
+                        PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
                         if (formConfig_forms.isFold) {
                             /* 添加第一个 */
                             /* 加进容器内 */
-                            formHeaderDivElement.innerHTML = /*html*/ `
+                            PopsSafeUtils.setSafeHTML(formHeaderDivElement, 
+                            /*html*/ `
 								<p>${formConfig_forms.text}</p>
 								<i class="pops-panel-forms-fold-container-icon">
 									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
 										<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
 									</svg>
 								</i>
-								
-							`;
+							`);
                             // 添加点击事件
                             popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
                                 if (formContainerListElement.hasAttribute("data-fold-enable")) {
@@ -8161,18 +8285,18 @@ const PanelHandleContentDetails = () => {
                 let formHeaderDivElement = popsDOMUtils.createElement("div", {
                     className: "pops-panel-forms-container-item-header-text",
                 });
-                formHeaderDivElement.innerHTML = formConfig_forms["text"];
+                PopsSafeUtils.setSafeHTML(formHeaderDivElement, formConfig_forms["text"]);
                 if (formConfig_forms.isFold) {
                     /* 加进容器内 */
-                    formHeaderDivElement.innerHTML = /*html*/ `
+                    PopsSafeUtils.setSafeHTML(formHeaderDivElement, 
+                    /*html*/ `
 						<p>${formConfig_forms.text}</p>
 						<i class="pops-panel-forms-fold-container-icon">
 							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
 								<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
 							</svg>
 						</i>
-						
-					`;
+					`);
                     // 添加点击事件
                     popsDOMUtils.on(formHeaderDivElement, "click", (event) => {
                         if (formContainerListElement.hasAttribute("data-fold-enable")) {
@@ -8258,7 +8382,7 @@ const PanelHandleContentDetails = () => {
                     let containerHeaderTitleLIElement = document.createElement("li");
                     containerHeaderTitleLIElement["__asideConfig__"] =
                         asideConfig;
-                    containerHeaderTitleLIElement.innerHTML = headerTitleText;
+                    PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
                     this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
                 }
                 let __forms__ = asideLiElement["__forms__"];
@@ -8547,9 +8671,11 @@ class PopsRightClickMenu {
             pops.config.cssText.rightClickMenu,
         ]);
         if (config.style != null) {
-            let cssNode = document.createElement("style");
-            cssNode.setAttribute("type", "text/css");
-            cssNode.innerHTML = config.style;
+            let cssNode = popsDOMUtils.createElement("style", {
+                innerHTML: config.style,
+            }, {
+                type: "text/css",
+            });
             $shadowRoot.appendChild(cssNode);
         }
         const PopsContextMenu = {
@@ -9031,8 +9157,11 @@ class PopsSearchSuggestion {
         ]);
         if (config.style != null) {
             let cssNode = document.createElement("style");
-            cssNode.setAttribute("type", "text/css");
-            cssNode.innerHTML = config.style;
+            popsDOMUtils.createElement("style", {
+                innerHTML: config.style,
+            }, {
+                type: "text/css",
+            });
             $shadowRoot.appendChild(cssNode);
         }
         const SearchSuggestion = {
@@ -9409,7 +9538,7 @@ class PopsSearchSuggestion {
              * 清空所有的搜索结果
              */
             clearAllSearchItemLi() {
-                SearchSuggestion.$el.$hintULContainer.innerHTML = "";
+                PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
             },
             /**
              * 更新搜索建议框的位置(top、left)
@@ -9491,7 +9620,8 @@ class PopsSearchSuggestion {
              * 动态更新CSS
              */
             updateDynamicCSS() {
-                this.$el.$dynamicCSS.innerHTML = this.getDynamicCSS();
+                let cssText = this.getDynamicCSS();
+                PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
             },
             /**
              * 更新页面显示的搜索结果
@@ -9681,7 +9811,7 @@ class ToolTip {
         if (text == null) {
             text = this.getContent();
         }
-        this.$el.$content.innerHTML = text;
+        PopsSafeUtils.setSafeHTML(this.$el.$content, text);
     }
     /**
      * 获取z-index
@@ -10053,7 +10183,7 @@ class Pops {
     /** 配置 */
     config = {
         /** 版本号 */
-        version: "2024.12.8",
+        version: "2025.3.2",
         cssText: {
             /** 主CSS */
             index: indexCSS,
@@ -10158,7 +10288,7 @@ class Pops {
             /* 处理获取当前所有的动画名 */
             this.config.isInit = true;
             let animationStyle = document.createElement("style");
-            animationStyle.innerHTML = this.config.cssText.anim;
+            PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
             popsDOMUtils.appendHead(animationStyle);
             this.config.animation = null;
             this.config.animation = PopsInstanceUtils.getKeyFrames(animationStyle.sheet);