@whitesev/pops 1.9.7 → 2.0.0

package/dist/index.iife.js

@@ -313,6 +313,31 @@ var pops = (function () {
     }
     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) {
             /**
@@ -1250,7 +1275,7 @@ var pops = (function () {
         attributes) {
             let tempElement = PopsCore.document.createElement(tagName);
             if (typeof property === "string") {
-                tempElement.innerHTML = property;
+                PopsSafeUtils.setSafeHTML(tempElement, property);
                 return tempElement;
             }
             if (property == null) {
@@ -1261,6 +1286,11 @@ var pops = (function () {
             }
             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) => {
@@ -1463,7 +1493,7 @@ var pops = (function () {
             }
             function parseHTMLByCreateDom() {
                 let tempDIV = PopsCore.document.createElement("div");
-                tempDIV.innerHTML = html;
+                PopsSafeUtils.setSafeHTML(tempDIV, html);
                 if (isComplete) {
                     return tempDIV;
                 }
@@ -4859,26 +4889,29 @@ var pops = (function () {
                 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,
@@ -4939,17 +4972,18 @@ var pops = (function () {
                 }
                 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,
@@ -4969,7 +5003,7 @@ var pops = (function () {
              * 清空每行的元素
              */
             function clearFolerRow() {
-                folderListBodyElement.innerHTML = "";
+                PopsSafeUtils.setSafeHTML(folderListBodyElement, "");
             }
             function getArrowIconElement() {
                 let iconArrowElement = popsDOMUtils.createElement("div", {
@@ -5968,8 +6002,8 @@ var pops = (function () {
              * 清空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());
@@ -6055,8 +6089,9 @@ var pops = (function () {
             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);
@@ -6079,18 +6114,19 @@ var pops = (function () {
                 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: {
@@ -6180,14 +6216,16 @@ var pops = (function () {
                 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());
@@ -6243,19 +6281,20 @@ var pops = (function () {
                 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",
                     /**
@@ -6805,15 +6844,16 @@ var pops = (function () {
                 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: {
@@ -6856,11 +6896,12 @@ var pops = (function () {
                     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 =
@@ -6895,7 +6936,7 @@ var pops = (function () {
                     },
                     /**
                      * 设置input元素的type
-                     * @param {string} [typeValue="text"] type值
+                     * @param [typeValue="text"] type值
                      */
                     setInputType(typeValue = "text") {
                         this.$ele.input.setAttribute("type", typeValue);
@@ -6904,14 +6945,14 @@ var pops = (function () {
                      * 删除图标按钮
                      */
                     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);
                     },
                     /**
                      * 添加图标按钮的点击事件
@@ -7000,16 +7041,17 @@ var pops = (function () {
                 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: {
@@ -7074,15 +7116,16 @@ var pops = (function () {
                 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: {
@@ -7269,33 +7312,34 @@ var pops = (function () {
                 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: {
@@ -7420,7 +7464,7 @@ var pops = (function () {
                         /** 关闭图标 */
                         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;
@@ -7827,18 +7871,19 @@ var pops = (function () {
                 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: {
@@ -7908,7 +7953,7 @@ var pops = (function () {
                      * 设置icon图标的svg
                      */
                     setIconSVG(svgHTML) {
-                        this.$ele.icon.innerHTML = svgHTML;
+                        PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
                     },
                     /**
                      * 设置icon图标是否旋转
@@ -7947,7 +7992,7 @@ var pops = (function () {
                      * @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) => {
@@ -7993,16 +8038,17 @@ var pops = (function () {
                 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: {
@@ -8032,19 +8078,19 @@ var pops = (function () {
                             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")) {
@@ -8242,18 +8288,18 @@ var pops = (function () {
                     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")) {
@@ -8339,7 +8385,7 @@ var pops = (function () {
                         let containerHeaderTitleLIElement = document.createElement("li");
                         containerHeaderTitleLIElement["__asideConfig__"] =
                             asideConfig;
-                        containerHeaderTitleLIElement.innerHTML = headerTitleText;
+                        PopsSafeUtils.setSafeHTML(containerHeaderTitleLIElement, headerTitleText);
                         this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
                     }
                     let __forms__ = asideLiElement["__forms__"];
@@ -8628,9 +8674,11 @@ var pops = (function () {
                 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 = {
@@ -9112,8 +9160,11 @@ var pops = (function () {
             ]);
             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 = {
@@ -9490,7 +9541,7 @@ var pops = (function () {
                  * 清空所有的搜索结果
                  */
                 clearAllSearchItemLi() {
-                    SearchSuggestion.$el.$hintULContainer.innerHTML = "";
+                    PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$hintULContainer, "");
                 },
                 /**
                  * 更新搜索建议框的位置(top、left)
@@ -9572,7 +9623,8 @@ var pops = (function () {
                  * 动态更新CSS
                  */
                 updateDynamicCSS() {
-                    this.$el.$dynamicCSS.innerHTML = this.getDynamicCSS();
+                    let cssText = this.getDynamicCSS();
+                    PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
                 },
                 /**
                  * 更新页面显示的搜索结果
@@ -9762,7 +9814,7 @@ var pops = (function () {
             if (text == null) {
                 text = this.getContent();
             }
-            this.$el.$content.innerHTML = text;
+            PopsSafeUtils.setSafeHTML(this.$el.$content, text);
         }
         /**
          * 获取z-index
@@ -10134,7 +10186,7 @@ var pops = (function () {
         /** 配置 */
         config = {
             /** 版本号 */
-            version: "2025.1.1",
+            version: "2025.3.2",
             cssText: {
                 /** 主CSS */
                 index: indexCSS,
@@ -10239,7 +10291,7 @@ var pops = (function () {
                 /* 处理获取当前所有的动画名 */
                 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);