@whitesev/pops 2.2.3 → 2.2.4

package/dist/types/src/Pops.d.ts

@@ -35,10 +35,10 @@ declare class Pops {
         /** icon图标的svg代码 */
         iconSVG: {
             loading: string;
+            close: string;
             min: string;
-            max: string;
             mise: string;
-            close: string;
+            max: string;
             edit: string;
             share: string;
             delete: string;
@@ -71,12 +71,12 @@ declare class Pops {
         instData: {
             iframe: import("./types/inst").PopsInstCommonConfig[];
             loading: import("./types/inst").PopsInstCommonConfig[];
-            folder: import("./types/inst").PopsInstCommonConfig[];
             alert: import("./types/inst").PopsInstCommonConfig[];
             confirm: import("./types/inst").PopsInstCommonConfig[];
             prompt: import("./types/inst").PopsInstCommonConfig[];
             tooltip: import("./types/inst").PopsInstCommonConfig[];
             drawer: import("./types/inst").PopsInstCommonConfig[];
+            folder: import("./types/inst").PopsInstCommonConfig[];
             panel: import("./types/inst").PopsInstCommonConfig[];
             rightClickMenu: import("./types/inst").PopsInstCommonConfig[];
         };
@@ -112,9 +112,9 @@ declare class Pops {
             height(element: HTMLElement | string | Window | Document | typeof globalThis, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             outerWidth(element: HTMLElement | string | Window | Document, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
             outerHeight(element: HTMLElement | string | Window, isShow?: boolean, parent?: HTMLElement | ShadowRoot): number;
-            addClassName(element: HTMLElement, className: string): void;
-            removeClassName(element: HTMLElement, className: string): void;
-            containsClassName(element: HTMLElement, className: string): boolean;
+            addClassName(element: Element | undefined | null, className: string): void;
+            removeClassName(element: Element | undefined | null, className: string): void;
+            containsClassName(element: HTMLElement | undefined | null, className: string): boolean;
             css(element: HTMLElement | string, property: keyof CSSStyleDeclaration): string;
             css(element: HTMLElement | string, property: string): string;
             css(element: HTMLElement | string, property: keyof CSSStyleDeclaration & string, value: string | number): string;
@@ -372,14 +372,14 @@ declare class Pops {
             showArrow: boolean;
             arrowDistance: number;
             otherDistance: number;
+            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
             zIndex: number | (() => number);
-            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement | ShadowRoot;
+        $shadowRoot: ShadowRoot | HTMLDivElement;
         toolTip: import("./components/tooltip").ToolTip;
     };
     /**
@@ -418,7 +418,7 @@ declare class Pops {
     rightClickMenu: (details: PopsRightClickMenuDetails) => {
         guid: string;
         config: {
-            target: HTMLElement | Node | {
+            target: Node | HTMLElement | {
                 addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
                 dispatchEvent: (event: Event) => boolean;
                 removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
@@ -21064,10 +21064,10 @@ declare class Pops {
             className: string;
             isAnimation: boolean;
             preventDefault: boolean;
+            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
             zIndex: number | (() => number);
-            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         removeWindowCheckClickListener: () => void;

package/dist/types/src/PopsIcon.d.ts

@@ -1,10 +1,10 @@
 export declare const PopsIcon: {
     $data: {
         loading: string;
+        close: string;
         min: string;
-        max: string;
         mise: string;
-        close: string;
+        max: string;
         edit: string;
         share: string;
         delete: string;

package/dist/types/src/components/rightClickMenu/index.d.ts

@@ -3,7 +3,7 @@ export declare const PopsRightClickMenu: {
     init(details: PopsRightClickMenuDetails): {
         guid: string;
         config: {
-            target: HTMLElement | Node | {
+            target: Node | HTMLElement | {
                 addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
                 dispatchEvent: (event: Event) => boolean;
                 removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
@@ -20649,10 +20649,10 @@ export declare const PopsRightClickMenu: {
             className: string;
             isAnimation: boolean;
             preventDefault: boolean;
+            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
             zIndex: number | (() => number);
-            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         removeWindowCheckClickListener: () => void;

package/dist/types/src/components/tooltip/index.d.ts

@@ -219,14 +219,14 @@ export declare const PopsTooltip: {
             showArrow: boolean;
             arrowDistance: number;
             otherDistance: number;
+            style: string | null;
             useShadowRoot: boolean;
             only: boolean;
             zIndex: number | (() => number);
-            style: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;
-        $shadowRoot: HTMLDivElement | ShadowRoot;
+        $shadowRoot: ShadowRoot | HTMLDivElement;
         toolTip: ToolTip;
     };
 };

package/dist/types/src/config/CommonCSSClassName.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 通用的CSS类名
+ */
+export declare const PopsCommonCSSClassName: {
+    flexCenter: string;
+    flexYCenter: string;
+    flexXCenter: string;
+    hide: string;
+    hideImportant: string;
+    noBorder: string;
+    noBorderImportant: string;
+    userSelectNone: string;
+    lineHeightCenter: string;
+    widthFill: string;
+    textIsDisabled: string;
+    textIsDisabledImportant: string;
+};

package/dist/types/src/{GlobalConfig.d.ts → config/GlobalConfig.d.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig, PopsDragConfig } from "./types/components";
+import type { PopsCommonConfig, PopsDragConfig } from "../types/components";
 type EnterReturnType<T> = null | T | (() => T);
 type GlobalConfigOption = {
     style?: EnterReturnType<string>;
@@ -21,9 +21,9 @@ export declare const GlobalConfig: {
         only?: boolean | undefined;
         width?: string | undefined;
         height?: string | undefined;
-        position?: import("./types/position").PopsPosition | undefined;
-        animation?: import("./types/animation").PopsAnimation | undefined;
-        mask?: import("./types/mask").PopsMaskDetails | undefined;
+        position?: import("../types/position").PopsPosition | undefined;
+        animation?: import("../types/animation").PopsAnimation | undefined;
+        mask?: import("../types/mask").PopsMaskDetails | undefined;
         forbiddenScroll?: boolean | undefined;
         beforeAppendToPageCallBack?: void;
         drag?: boolean | undefined;

package/dist/types/src/utils/PopsDOMUtils.d.ts

@@ -502,19 +502,19 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
      * @param element 目标元素
      * @param className className属性
      */
-    addClassName(element: HTMLElement, className: string): void;
+    addClassName(element: Element | undefined | null, className: string): void;
     /**
      * 删除className
      * @param element 目标元素
      * @param className className属性
      */
-    removeClassName(element: HTMLElement, className: string): void;
+    removeClassName(element: Element | undefined | null, className: string): void;
     /**
      * 判断元素是否包含某个className
      * @param element 目标元素
      * @param className className属性
      */
-    containsClassName(element: HTMLElement, className: string): boolean;
+    containsClassName(element: HTMLElement | undefined | null, className: string): boolean;
     /**
      * 获取元素的样式属性值
      * @param element 目标元素

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "type": "module",
   "description": "弹窗库",
   "main": "dist/index.cjs.js",

package/src/Pops.ts

@@ -25,7 +25,7 @@ import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/
 import { PopsSearchSuggestion } from "./components/searchSuggestion";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
 import { PanelHandlerComponents } from "./components/panel/handlerComponents";
-import { GlobalConfig } from "./GlobalConfig";
+import { GlobalConfig } from "./config/GlobalConfig";
 import { PopsTooltip } from "./components/tooltip";
 import { PopsCSS } from "./PopsCSS";
 import { PopsIcon } from "./PopsIcon";
@@ -36,7 +36,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.7.15",
+		version: "2025.7.16",
 		cssText: PopsCSS,
 		/** icon图标的svg代码 */
 		iconSVG: PopsIcon.$data,

package/src/components/alert/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";

package/src/components/confirm/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/drawer/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/folder/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/iframe/index.ts

@@ -1,5 +1,5 @@
 import { PopsCore } from "../../PopsCore";
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/loading/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/panel/handlerComponents.ts

@@ -27,6 +27,7 @@ import type { PopsPanelSelectDetails } from "./types/components-select";
 import type { PopsPanelSliderDetails } from "./types/components-slider";
 import type { PopsPanelSwitchDetails } from "./types/components-switch";
 import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 
 /**
  * 处理组件（把组件配置转为组件元素）
@@ -321,6 +322,9 @@ export const PanelHandlerComponents = () => {
 						".pops-panel-switch__input"
 					)!,
 					core: $li.querySelector<HTMLSpanElement>(".pops-panel-switch__core")!,
+					itemLeftTextContainer: $li.querySelector<HTMLDivElement>(
+						".pops-panel-item-left-text"
+					),
 				},
 				init() {
 					this.setStatus(this.$data.value);
@@ -333,9 +337,12 @@ export const PanelHandlerComponents = () => {
 					}
 					this.setClickEvent();
 				},
+				/**
+				 * 设置点击事件
+				 */
 				setClickEvent() {
 					let that = this;
-					popsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
+					popsDOMUtils.on(this.$ele.core, "click", function (event) {
 						if (
 							that.$ele.input.disabled ||
 							that.$ele.switch.hasAttribute("data-disabled")
@@ -388,13 +395,21 @@ export const PanelHandlerComponents = () => {
 				disable() {
 					this.$ele.input.disabled = true;
 					this.$ele.switch.setAttribute("data-disabled", "true");
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
-				 * 启用复选框
+				 * 取消禁用复选框
 				 */
 				notDisable() {
 					this.$ele.input.disabled = false;
 					this.$ele.switch.removeAttribute("data-disabled");
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 			};
 
@@ -1116,7 +1131,7 @@ export const PanelHandlerComponents = () => {
 					<p class="pops-panel-item-left-main-text">${
 						formConfig.text
 					}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-input pops-user-select-none">
+				<div class="pops-panel-input">
 					<input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
 				</div>
 				`
@@ -1187,6 +1202,10 @@ export const PanelHandlerComponents = () => {
 						this.$ele.inputSpanIcon.querySelector<HTMLElement>(
 							".pops-panel-icon"
 						)!;
+					popsDOMUtils.addClassName(
+						this.$ele.panelInput,
+						PopsCommonCSSClassName.userSelectNone
+					);
 				},
 				/**
 				 * 禁用
@@ -1439,7 +1458,7 @@ export const PanelHandlerComponents = () => {
 				/*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">
+				<div class="pops-panel-select">
 					<select></select>
 				</div>
 				`
@@ -1462,6 +1481,10 @@ export const PanelHandlerComponents = () => {
 					defaultValue: formConfig.getValue(),
 				},
 				init() {
+					popsDOMUtils.addClassName(
+						this.$ele.panelSelect,
+						PopsCommonCSSClassName.userSelectNone
+					);
 					this.initOption();
 					this.setChangeEvent();
 					this.setClickEvent();
@@ -2672,12 +2695,19 @@ export const PanelHandlerComponents = () => {
 									formContainerListElement.setAttribute("data-fold-enable", "");
 								}
 							});
-							formHeaderDivElement.classList.add(
+							popsDOMUtils.addClassName(
+								formHeaderDivElement,
 								"pops-panel-forms-fold-container"
 							);
-							formHeaderDivElement.classList.add("pops-user-select-none");
+							popsDOMUtils.addClassName(
+								formHeaderDivElement,
+								PopsCommonCSSClassName.userSelectNone
+							);
 							formContainerListElement.setAttribute("data-fold-enable", "");
-							formContainerListElement.classList.add("pops-panel-forms-fold");
+							popsDOMUtils.addClassName(
+								formHeaderDivElement,
+								"pops-panel-forms-fold"
+							);
 							formContainerListElement.appendChild(formHeaderDivElement);
 						} else {
 							/* 加进容器内 */
@@ -2938,10 +2968,19 @@ export const PanelHandlerComponents = () => {
 							formContainerListElement.setAttribute("data-fold-enable", "");
 						}
 					});
-					formHeaderDivElement.classList.add("pops-panel-forms-fold-container");
-					formHeaderDivElement.classList.add("pops-user-select-none");
+					popsDOMUtils.addClassName(
+						formHeaderDivElement,
+						"pops-panel-forms-fold-container"
+					);
+					popsDOMUtils.addClassName(
+						formHeaderDivElement,
+						PopsCommonCSSClassName.userSelectNone
+					);
 					formContainerListElement.setAttribute("data-fold-enable", "");
-					formContainerListElement.classList.add("pops-panel-forms-fold");
+					popsDOMUtils.addClassName(
+						formHeaderDivElement,
+						"pops-panel-forms-fold"
+					);
 					formContainerListElement.appendChild(formHeaderDivElement);
 				} else {
 					/* 加进容器内 */

package/src/components/panel/index.ts

@@ -6,7 +6,7 @@ import { popsUtils } from "../../utils/PopsUtils";
 import type { PopsPanelDetails, PopsPanelEventType } from "./types";
 import { PopsPanelConfig } from "./config";
 import { PanelHandlerComponents } from "./handlerComponents";
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";
 

package/src/components/prompt/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";

package/src/components/rightClickMenu/index.ts

@@ -1,5 +1,5 @@
 import { OriginPrototype } from "../../PopsCore";
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";

package/src/components/searchSuggestion/index.ts

@@ -2,11 +2,12 @@ import { PopsHandler } from "../../handler/PopsHandler";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { searchSuggestionConfig as PopsSearchSuggestionConfig } from "./config";
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import type { PopsSearchSuggestionDetails } from "./types/index";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 
 export const PopsSearchSuggestion = {
 	init(details: PopsSearchSuggestionDetails) {
@@ -209,14 +210,17 @@ export const PopsSearchSuggestion = {
 			 * @param index 当前项的下标
 			 */
 			getSearchItemLiElement(data: any, index: number) {
-				return popsDOMUtils.createElement("li", {
-					className: `pops-${popsType}-search-suggestion-hint-item pops-flex-items-center pops-flex-y-center`,
+				let $li = popsDOMUtils.createElement("li", {
+					className: `pops-${popsType}-search-suggestion-hint-item`,
 					"data-index": index,
 					"data-value": SearchSuggestion.getItemDataValue(data),
 					innerHTML: `${config.getItemHTML(data)}${
 						config.deleteIcon.enable ? SearchSuggestion.getDeleteIconHTML() : ""
 					}`,
 				});
+				popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
+				popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexYCenter);
+				return $li;
 			},
 			/**
 			 * 获取data-value值

package/src/components/tooltip/index.ts

@@ -1,4 +1,4 @@
-import { GlobalConfig } from "../../GlobalConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
 import type { PopsType } from "../../types/main";

package/src/config/CommonCSSClassName.ts

@@ -0,0 +1,17 @@
+/**
+ * 通用的CSS类名
+ */
+export const PopsCommonCSSClassName = {
+	flexCenter: "pops-flex-items-center",
+	flexYCenter: "pops-flex-y-center",
+	flexXCenter: "pops-flex-x-center",
+	hide: "pops-hide",
+	hideImportant: "pops-hide-important",
+	noBorder: "pops-no-border",
+	noBorderImportant: "pops-no-border-important",
+	userSelectNone: "pops-user-select-none",
+	lineHeightCenter: "pops-line-height-center",
+	widthFill: "pops-width-fill",
+	textIsDisabled: "pops-text-is-disabled",
+	textIsDisabledImportant: "pops-text-is-disabled-important",
+};

package/src/{GlobalConfig.ts → config/GlobalConfig.ts}

@@ -1,4 +1,4 @@
-import type { PopsCommonConfig, PopsDragConfig } from "./types/components";
+import type { PopsCommonConfig, PopsDragConfig } from "../types/components";
 
 type EnterReturnType<T> = null | T | (() => T);
 

package/src/css/common.css

@@ -36,3 +36,17 @@
 	width: -webkit-fill-available;
 	width: -moz-available;
 }
+.pops-text-is-disabled {
+	--pops-text-is-disabled-color: #a8abb2;
+	color: var(--pops-text-is-disabled-color);
+	--pops-panel-forms-container-item-left-desc-text-color: var(
+		--pops-text-is-disabled-color
+	);
+}
+.pops-text-is-disabled-important {
+	--pops-text-is-disabled-color: #a8abb2;
+	color: var(--pops-text-is-disabled-color) !important;
+	--pops-panel-forms-container-item-left-desc-text-color: var(
+		--pops-text-is-disabled-color
+	) !important;
+}

package/src/utils/PopsDOMUtils.ts

@@ -11,6 +11,7 @@ import { SymbolEvents } from "./PopsDOMUtilsEventsConfig";
 import { OriginPrototype, PopsCore } from "../PopsCore";
 import { popsUtils } from "./PopsUtils";
 import { PopsSafeUtils } from "./PopsSafeUtils";
+import { PopsCommonCSSClassName } from "../config/CommonCSSClassName";
 
 class PopsDOMUtilsEvent {
 	/**
@@ -1783,7 +1784,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	 * @param element 目标元素
 	 * @param className className属性
 	 */
-	addClassName(element: HTMLElement, className: string) {
+	addClassName(element: Element | undefined | null, className: string) {
+		if (element == null) {
+			return;
+		}
 		if (typeof className !== "string") {
 			return;
 		}
@@ -1797,7 +1801,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	 * @param element 目标元素
 	 * @param className className属性
 	 */
-	removeClassName(element: HTMLElement, className: string) {
+	removeClassName(element: Element | undefined | null, className: string) {
+		if (element == null) {
+			return;
+		}
 		if (typeof className !== "string") {
 			return;
 		}
@@ -1811,7 +1818,13 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 	 * @param element 目标元素
 	 * @param className className属性
 	 */
-	containsClassName(element: HTMLElement, className: string): boolean {
+	containsClassName(
+		element: HTMLElement | undefined | null,
+		className: string
+	): boolean {
+		if (element == null) {
+			return false;
+		}
 		if (typeof className !== "string") {
 			return false;
 		}
@@ -2226,9 +2239,9 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 			return;
 		}
 		if (isImportant) {
-			ele.classList.add("pops-hide-important");
+			popsDOMUtils.addClassName(ele, PopsCommonCSSClassName.hideImportant);
 		} else {
-			ele.classList.add("pops-hide");
+			popsDOMUtils.addClassName(ele, PopsCommonCSSClassName.hide);
 		}
 	}
 	/**
@@ -2239,8 +2252,8 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 		if (ele == null) {
 			return;
 		}
-		ele.classList.remove("pops-hide-important");
-		ele.classList.remove("pops-hide");
+		popsDOMUtils.removeClassName(ele, PopsCommonCSSClassName.hide);
+		popsDOMUtils.removeClassName(ele, PopsCommonCSSClassName.hideImportant);
 	}
 	/**
 	 * 将字符串转为Element元素
@@ -2575,7 +2588,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 				return `#${hexs.join("")}`;
 			};
 
-			/** 
+			/**
 			 * 获取深色
 			 */
 			const getDarkColor = (
@@ -2598,7 +2611,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
 				return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
 			};
 
-			/** 
+			/**
 			 * 获取颜色变浅后的颜色值
 			 */
 			const getLightColor = (