@whitesev/pops 2.0.10 → 2.0.12

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

@@ -1,5 +1,4 @@
-import type { ParseHTMLReturnType, PopsDOMUtilsCreateElementAttributesMap } from "../types/PopsDOMUtilsEventType";
-import type { PopsDOMUtils_Event, PopsDOMUtils_EventType, PopsDOMUtilsElementEventType, PopsDOMUtilsEventListenerOptionsAttribute } from "../types/PopsDOMUtilsEventType";
+import type { ParseHTMLReturnType, PopsDOMUtils_EventType, PopsDOMUtilsCreateElementAttributesMap, PopsDOMUtilsEventListenerOption, PopsDOMUtilsEventListenerOptionsAttribute, PopsDOMUtils_Event, PopsDOMUtilsElementEventType } from "../types/PopsDOMUtilsEventType";
 declare class PopsDOMUtilsEvent {
     /**
      * 绑定事件
@@ -19,8 +18,7 @@ declare class PopsDOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback: (event: Event) => void, option?: boolean | AddEventListenerOptions): void;
-    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void;
+    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: PopsDOMUtils_Event[T]) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -39,7 +37,7 @@ declare class PopsDOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
+    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -52,20 +50,19 @@ declare class PopsDOMUtilsEvent {
      * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
      * @example
      * // 监听元素a.xx的click、tap、hover事件
-     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
-     * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      * @example
      * // 监听全局document下的子元素a.xx的click事件
-     * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | undefined | null, callback: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions): void;
-    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
+    on<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -78,19 +75,19 @@ declare class PopsDOMUtilsEvent {
      * + passive 表示事件监听器是否不会调用preventDefault()。默认为false
      * @example
      * // 监听元素a.xx的click、tap、hover事件
-     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document.querySelector("a.xx"),"click tap hover",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
-     * DOMUtils.on("a.xx",["click","tap","hover"],(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on("a.xx",["click","tap","hover"],(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      * @example
      * // 监听全局document下的子元素a.xx的click事件
-     * DOMUtils.on(document,"click tap hover","a.xx",(event)=>{
-     *    console.log("事件触发",event)
+     * DOMUtils.on(document,"click tap hover","a.xx",(event, selectorTarget)=>{
+     *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string, selector: string | undefined | null, callback: (event: T) => void, option?: boolean | AddEventListenerOptions): void;
+    on<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: PopsDOMUtilsEventListenerOption | boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -100,12 +97,11 @@ declare class PopsDOMUtilsEvent {
      * + capture 如果在添加事件监听器时指定了useCapture为true，则在移除事件监听器时也必须指定为true
      * @param filter (可选)过滤函数，对元素属性上的事件进行过滤出想要删除的事件
      * @example
-     * // 取消监听元素a.xx的click事件
+     * // 取消监听元素a.xx所有的click事件
      * DOMUtils.off(document.querySelector("a.xx"),"click")
      * DOMUtils.off("a.xx","click")
      */
-    off(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback?: (event: Event) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
-    off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback?: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], callback?: (this: HTMLElement, event: PopsDOMUtils_Event[T]) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -119,7 +115,7 @@ declare class PopsDOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click")
      * DOMUtils.off("a.xx","click")
      */
-    off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string, callback?: (event: T) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], callback?: (this: HTMLElement, event: T) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -134,7 +130,7 @@ declare class PopsDOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.off("a.xx",["click","tap","hover"])
      */
-    off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector?: string | undefined, callback?: (event: PopsDOMUtils_Event[T]) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends PopsDOMUtils_EventType>(element: PopsDOMUtilsElementEventType, eventType: T | T[], selector?: string | string[] | undefined | null, callback?: (this: HTMLElement, event: PopsDOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -149,7 +145,7 @@ declare class PopsDOMUtilsEvent {
      * DOMUtils.off(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.off("a.xx",["click","tap","hover"])
      */
-    off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | undefined, callback?: (event: T) => void, option?: boolean | AddEventListenerOptions, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
+    off<T extends Event>(element: PopsDOMUtilsElementEventType, eventType: string | string[], selector?: string | string[] | undefined | null, callback?: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: EventListenerOptions | boolean, filter?: (value: PopsDOMUtilsEventListenerOptionsAttribute, index: number, array: PopsDOMUtilsEventListenerOptionsAttribute[]) => boolean): void;
     /**
      * 取消绑定所有的事件
      * @param element 需要取消绑定的元素|元素数组
@@ -331,6 +327,92 @@ declare class PopsDOMUtilsEvent {
      * Utils.preventEvent(event);
      */
     preventEvent(element: HTMLElement, eventNameList?: string | string[], capture?: boolean): boolean;
+    /**
+     * 选择器，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.selector("div:contains('测试')")
+     * > div.xxx
+     * @example
+     * DOMUtils.selector("div:empty")
+     * > div.xxx
+     * @example
+     * DOMUtils.selector("div:regexp('^xxxx$')")
+     * > div.xxx
+     */
+    selector<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | undefined;
+    selector<E extends Element = Element>(selector: string): E | undefined;
+    /**
+     * 选择器，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.selectorAll("div:contains('测试')")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:empty")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:regexp('^xxxx$')")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:regexp(/^xxx/ig)")
+     * > [div.xxx]
+     */
+    selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K][];
+    selectorAll<E extends Element = Element>(selector: string): E[];
+    /**
+     * 匹配元素，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param $el 元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.matches("div:contains('测试')")
+     * > true
+     * @example
+     * DOMUtils.matches("div:empty")
+     * > true
+     * @example
+     * DOMUtils.matches("div:regexp('^xxxx$')")
+     * > true
+     * @example
+     * DOMUtils.matches("div:regexp(/^xxx/ig)")
+     * > false
+     */
+    matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
+    /**
+     * 根据选择器获取上层元素，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param $el 元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.closest("div:contains('测试')")
+     * > div.xxx
+     * @example
+     * DOMUtils.closest("div:empty")
+     * > div.xxx
+     * @example
+     * DOMUtils.closest("div:regexp('^xxxx$')")
+     * > div.xxxx
+     * @example
+     * DOMUtils.closest("div:regexp(/^xxx/ig)")
+     * > null
+     */
+    closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
 }
 declare class PopsDOMUtils extends PopsDOMUtilsEvent {
     /** 获取 animationend 在各个浏览器的兼容名 */
@@ -520,6 +602,12 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
     }) | string, 
     /** 自定义属性 */
     attributes?: PopsDOMUtilsCreateElementAttributesMap): HTMLElementTagNameMap[K];
+    /**
+     * 字符串转HTMLElement
+     * @param elementString
+     * @returns
+     */
+    parseTextToDOM<R extends HTMLElement>(elementString: string): R;
     /**
      * 获取文字的位置信息
      * @param input 输入框
@@ -635,6 +723,12 @@ declare class PopsDOMUtils extends PopsDOMUtilsEvent {
      * DOMUtils.after("a.xx","'<b class="xx"></b>")
      * */
     after(element: HTMLElement | Element | string, content: HTMLElement | string): void;
+    /**
+     * 获取CSS Rule
+     * @param sheet
+     * @returns
+     */
+    getKeyFrames(sheet: CSSStyleSheet): {};
 }
 declare const popsDOMUtils: PopsDOMUtils;
 export { popsDOMUtils };

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

@@ -42,12 +42,6 @@ export declare const PopsInstanceUtils: {
      * > 1001
      **/
     getMaxZIndex(deviation?: number): number;
-    /**
-     * 获取CSS Rule
-     * @param sheet
-     * @returns
-     */
-    getKeyFrames(sheet: CSSStyleSheet): {};
     /**
      * 删除配置中对应的对象
      * @param moreLayerConfigList 配置实例列表

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

@@ -42,12 +42,6 @@ declare class PopsUtils {
      * 生成uuid
      */
     getRandomGUID(): string;
-    /**
-     * 字符串转HTMLElement
-     * @param elementString
-     * @returns
-     */
-    parseTextToDOM<R extends HTMLElement>(elementString: string): R;
     /**
      * 判断元素/页面中是否包含该元素
      * @param target 需要判断的元素
@@ -119,6 +113,11 @@ declare class PopsUtils {
      **/
     formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T): T extends true ? string : number;
     AnyTouch: () => typeof AnyTouch;
+    /**
+     * 通过navigator.userAgent判断是否是手机访问
+     * @param userAgent
+     */
+    isPhone(userAgent?: string): boolean;
     /**
      * 自动使用 Worker 执行 setTimeout
      */

package/package.json

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

package/src/Pops.ts

@@ -1,57 +1,11 @@
 import { popsDOMUtils } from "./utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "./utils/PopsInstanceUtils";
 import { popsUtils } from "./utils/PopsUtils";
-import indexCSS from "./css/index.css";
-import ninePalaceGridPositionCSS from "./css/ninePalaceGridPosition.css";
-import scrollbarCSS from "./css/scrollbar.css";
-import buttonCSS from "./css/button.css";
-import commonCSS from "./css/common.css";
-import animCSS from "./css/animation.css";
-import alertCSS from "./components/alert/index.css";
-import confirmCSS from "./components/confirm/index.css";
-import promptCSS from "./components/prompt/index.css";
-import loadingCSS from "./components/loading/index.css";
-import iframeCSS from "./components/iframe/index.css";
-import tooltipCSS from "./components/tooltip/index.css";
-import drawerCSS from "./components/drawer/index.css";
-import folderCSS from "./components/folder/index.css";
-import panelCSS from "./components/panel/index.css";
-import rightClickMenuCSS from "./components/rightClickMenu/index.css";
-import SVG_min from "./svg/min.svg";
-import SVG_mise from "./svg/mise.svg";
-import SVG_max from "./svg/max.svg";
-import SVG_close from "./svg/close.svg";
-import SVG_edit from "./svg/edit.svg";
-import SVG_share from "./svg/share.svg";
-import SVG_delete from "./svg/delete.svg";
-import SVG_search from "./svg/search.svg";
-import SVG_upload from "./svg/upload.svg";
-import SVG_loading from "./svg/loading.svg";
-import SVG_next from "./svg/next.svg";
-import SVG_prev from "./svg/prev.svg";
-import SVG_eleme from "./svg/eleme.svg";
-import SVG_elemePlus from "./svg/elemePlus.svg";
-import SVG_chromeFilled from "./svg/chromeFilled.svg";
-import SVG_cpu from "./svg/cpu.svg";
-import SVG_videoPlay from "./svg/videoPlay.svg";
-import SVG_videoPause from "./svg/videoPause.svg";
-import SVG_headset from "./svg/headset.svg";
-import SVG_monitor from "./svg/monitor.svg";
-import SVG_documentCopy from "./svg/documentCopy.svg";
-import SVG_picture from "./svg/picture.svg";
-import SVG_circleClose from "./svg/circleClose.svg";
-import SVG_view from "./svg/view.svg";
-import SVG_hide from "./svg/hide.svg";
-import SVG_keyboard from "./svg/keyboard.svg";
-import SVG_arrowRight from "./svg/arrowRight.svg";
-import SVG_arrowLeft from "./svg/arrowLeft.svg";
 import { PopsCore } from "./Core";
-import { PopsLayerMode } from "./types/main";
 import { PopsAlert } from "./components/alert";
 import type { PopsAlertDetails } from "./components/alert/indexType";
 import { PopsConfirm } from "./components/confirm";
 import type { PopsConfirmDetails } from "./components/confirm/indexType";
-import type { PopsLayerCommonConfig } from "./types/layer";
 import type { PopsPromptDetails } from "./components/prompt/indexType";
 import { PopsPrompt } from "./components/prompt";
 import type { PopsLoadingDetails } from "./components/loading/indexType";
@@ -67,108 +21,29 @@ import type { PopsPanelDetails } from "./components/panel/indexType";
 import { PopsPanel } from "./components/panel";
 import { PopsRightClickMenu } from "./components/rightClickMenu";
 import type { PopsRightClickMenuDetails } from "./components/rightClickMenu/indexType";
-import type { PopsIcon } from "./types/icon";
 import type { PopsSearchSuggestionDetails } from "./components/searchSuggestion/indexType";
 import { PopsSearchSuggestion } from "./components/searchSuggestion";
 import { PopsMathFloatUtils } from "./utils/PopsMathUtils";
 import { PanelHandleContentDetails } from "./components/panel/PanelHandleContentDetails";
 import { GlobalConfig } from "./GlobalConfig";
 import { PopsTooltip } from "./components/tooltip";
-import { PopsSafeUtils } from "./utils/PopsSafeUtils";
+import { PopsCSS } from "./PopsCSS";
+import { PopsIcon } from "./PopsIcon";
+import { PopsLayer } from "./PopsLayer";
+import { PopsAnimation } from "./PopsAnimation";
 
 class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.5.26",
-		cssText: {
-			/** 主CSS */
-			index: indexCSS,
-			/** 九宫格位置CSS */
-			ninePalaceGridPosition: ninePalaceGridPositionCSS,
-			/** 滚动条CSS */
-			scrollbar: scrollbarCSS,
-			/** 按钮CSS */
-			button: buttonCSS,
-			/** 通用的CSS */
-			common: commonCSS,
-			/** 动画 */
-			anim: animCSS,
-			/** pops.alert */
-			alertCSS: alertCSS,
-			/** pops.cponfirm */
-			confirmCSS: confirmCSS,
-			/** pops.prompt */
-			promptCSS: promptCSS,
-			/** pops.loading */
-			loadingCSS: loadingCSS,
-			/** pops.iframe */
-			iframeCSS: iframeCSS,
-			/** pops.tooltip */
-			tooltipCSS: tooltipCSS,
-			/** pops.drawer */
-			drawerCSS: drawerCSS,
-			/** pops.folder */
-			folderCSS: folderCSS,
-			/** pops.folder */
-			panelCSS: panelCSS,
-			/** pops.rightClickMenu */
-			rightClickMenu: rightClickMenuCSS,
-		},
+		version: "2025.6.6",
+		cssText: PopsCSS,
 		/** icon图标的svg代码 */
-		iconSVG: {
-			min: SVG_min,
-			mise: SVG_mise,
-			max: SVG_max,
-			close: SVG_close,
-			edit: SVG_edit,
-			share: SVG_share,
-			delete: SVG_delete,
-			search: SVG_search,
-			upload: SVG_upload,
-			loading: SVG_loading,
-			next: SVG_next,
-			prev: SVG_prev,
-			eleme: SVG_eleme,
-			elemePlus: SVG_elemePlus,
-			chromeFilled: SVG_chromeFilled,
-			cpu: SVG_cpu,
-			videoPlay: SVG_videoPlay,
-			videoPause: SVG_videoPause,
-			headset: SVG_headset,
-			monitor: SVG_monitor,
-			documentCopy: SVG_documentCopy,
-			picture: SVG_picture,
-			circleClose: SVG_circleClose,
-			view: SVG_view,
-			hide: SVG_hide,
-			keyboard: SVG_keyboard,
-			arrowRight: SVG_arrowRight,
-			arrowLeft: SVG_arrowLeft,
-		} as {
-			[key in PopsIcon]: string;
-		},
+		iconSVG: PopsIcon.$data,
 		/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
-		animation: {} as {
-			[key: string]: CSSKeyframesRule;
-		},
-		/** 是否初始化 */
-		isInit: false,
+		animation: PopsAnimation.$data,
 		/** 存储已创建的元素 */
-		layer: {
-			alert: [],
-			confirm: [],
-			prompt: [],
-			loading: [],
-			iframe: [],
-			tooltip: [],
-			drawer: [],
-			folder: [],
-			panel: [],
-			rightClickMenu: [],
-		} as {
-			[key in PopsLayerMode]: PopsLayerCommonConfig[];
-		},
+		layer: PopsLayer,
 		/** 禁止滚动 */
 		forbiddenScroll: {
 			event(event: Event) {
@@ -186,22 +61,7 @@ class Pops {
 		/** pops.panel中用于处理各个类型的工具 */
 		panelHandleContentUtils: PanelHandleContentDetails,
 	};
-	init() {
-		if (!this.config.isInit) {
-			/* 处理获取当前所有的动画名 */
-			this.config.isInit = true;
-			let animationStyle = document.createElement("style");
-			PopsSafeUtils.setSafeHTML(animationStyle, this.config.cssText.anim);
-			popsDOMUtils.appendHead(animationStyle);
-			this.config.animation = null as any;
-			this.config.animation = PopsInstanceUtils.getKeyFrames(
-				animationStyle.sheet!
-			);
-			popsUtils.setTimeout(() => {
-				animationStyle.remove();
-			}, 50);
-		}
-	}
+	init() {}
 	/**
 	 * 释放原有的pops控制权
 	 * @example
@@ -224,8 +84,8 @@ class Pops {
 	 * 通过navigator.userAgent判断是否是手机访问
 	 * @param userAgent
 	 */
-	isPhone(userAgent = PopsCore.globalThis.navigator.userAgent): boolean {
-		return Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(userAgent));
+	isPhone(userAgent?: string) {
+		return popsUtils.isPhone(userAgent);
 	}
 	/**
 	 * 为所有弹窗设置全局属性

package/src/PopsAnimation.ts

@@ -0,0 +1,32 @@
+import { PopsCSS } from "./PopsCSS";
+import { popsDOMUtils } from "./utils/PopsDOMUtils";
+import { PopsSafeUtils } from "./utils/PopsSafeUtils";
+import { popsUtils } from "./utils/PopsUtils";
+
+export const PopsAnimation = {
+	$data: {} as { [key: string]: CSSKeyframesRule },
+	$flag: {
+		/** 是否初始化 */
+		isInit: false,
+	},
+	init() {
+		if (!this.$flag.isInit) {
+			this.$flag.isInit = true;
+			/* 处理获取当前所有的动画名 */
+			let animationStyle = document.createElement("style");
+			PopsSafeUtils.setSafeHTML(animationStyle, PopsCSS.anim);
+			popsDOMUtils.appendHead(animationStyle);
+			this.$data = null as any;
+			this.$data = popsDOMUtils.getKeyFrames(animationStyle.sheet!);
+			popsUtils.setTimeout(() => {
+				animationStyle.remove();
+			}, 50);
+		}
+	},
+	/**
+	 * 判断是否存在某个动画名
+	 */
+	hasAnim(name: string) {
+		return this.$data.hasOwnProperty(name);
+	},
+};

package/src/PopsCSS.ts

@@ -0,0 +1,51 @@
+import indexCSS from "./css/index.css";
+import ninePalaceGridPositionCSS from "./css/ninePalaceGridPosition.css";
+import scrollbarCSS from "./css/scrollbar.css";
+import buttonCSS from "./css/button.css";
+import commonCSS from "./css/common.css";
+import animCSS from "./css/animation.css";
+import alertCSS from "./components/alert/index.css";
+import confirmCSS from "./components/confirm/index.css";
+import promptCSS from "./components/prompt/index.css";
+import loadingCSS from "./components/loading/index.css";
+import iframeCSS from "./components/iframe/index.css";
+import tooltipCSS from "./components/tooltip/index.css";
+import drawerCSS from "./components/drawer/index.css";
+import folderCSS from "./components/folder/index.css";
+import panelCSS from "./components/panel/index.css";
+import rightClickMenuCSS from "./components/rightClickMenu/index.css";
+
+export const PopsCSS = {
+	/** 主CSS */
+	index: indexCSS,
+	/** 九宫格位置CSS */
+	ninePalaceGridPosition: ninePalaceGridPositionCSS,
+	/** 滚动条CSS */
+	scrollbar: scrollbarCSS,
+	/** 按钮CSS */
+	button: buttonCSS,
+	/** 通用的CSS */
+	common: commonCSS,
+	/** 动画 */
+	anim: animCSS,
+	/** pops.alert */
+	alertCSS: alertCSS,
+	/** pops.cponfirm */
+	confirmCSS: confirmCSS,
+	/** pops.prompt */
+	promptCSS: promptCSS,
+	/** pops.loading */
+	loadingCSS: loadingCSS,
+	/** pops.iframe */
+	iframeCSS: iframeCSS,
+	/** pops.tooltip */
+	tooltipCSS: tooltipCSS,
+	/** pops.drawer */
+	drawerCSS: drawerCSS,
+	/** pops.folder */
+	folderCSS: folderCSS,
+	/** pops.folder */
+	panelCSS: panelCSS,
+	/** pops.rightClickMenu */
+	rightClickMenu: rightClickMenuCSS,
+};