@whitesev/pops 3.3.0 → 3.3.2

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

@@ -100,6 +100,7 @@ declare class Pops {
             formatTime(text?: string | number | Date, formatType?: "yyyy-MM-dd HH:mm:ss" | "yyyy/MM/dd HH:mm:ss" | "yyyy_MM_dd_HH_mm_ss" | "yyyy\u5E74MM\u6708dd\u65E5 HH\u65F6mm\u5206ss\u79D2" | "yyyy\u5E74MM\u6708dd\u65E5 hh:mm:ss" | "yyyy\u5E74MM\u6708dd\u65E5 HH:mm:ss" | "yyyy-MM-dd" | "yyyyMMdd" | "HH:mm:ss"): string;
             formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T | undefined): T extends true ? string : number;
             AnyTouch: () => typeof import("any-touch").default;
+            AnyTouchDoubleTapPlugin: () => typeof import("@any-touch/doubletap").default;
             isPhone(userAgent?: string): boolean;
             setTimeout(callback: (...args: any[]) => any, timeout?: number): number;
             clearTimeout(timeId: number | undefined): void;
@@ -284,6 +285,7 @@ declare class Pops {
                     init(): void;
                     onClick(): void;
                     setStatus(isChecked?: boolean): void;
+                    getReverseStatus(): boolean;
                     getStatus(): boolean;
                     disable(): void;
                     notDisable(): void;
@@ -709,6 +711,8 @@ declare class Pops {
             animation?: import("./types/animation").PopsAnimation | undefined;
             mask?: import("./types/mask").PopsMaskConfig | undefined;
             forbiddenScroll?: boolean | undefined;
+            lightStyle?: string | undefined;
+            darkStyle?: string | undefined;
             beforeAppendToPageCallBack?: void;
             drag?: boolean | undefined;
             dragLimit?: boolean | undefined;
@@ -775,6 +779,8 @@ declare class Pops {
             only: boolean;
             zIndex: IFunction<number>;
             style: string | null;
+            lightStyle: string | null;
+            darkStyle: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;

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

@@ -24,4 +24,4 @@ declare const PopsCore: {
     readonly clearTimeout: typeof clearTimeout;
     readonly clearInterval: typeof clearInterval;
 };
-export { PopsCore, OriginPrototype };
+export { OriginPrototype, PopsCore };

package/dist/types/src/components/panel/handlerComponents.d.ts

@@ -1,14 +1,14 @@
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsTooltip } from "../tooltip";
+import type { PopsPanelBottomContentConfig, PopsPanelConfig, PopsPanelContentConfig, PopsPanelViewConfig } from "./types";
 import type { PopsPanelButtonConfig } from "./types/components-button";
 import type { PopsPanelGeneralConfig, PopsPanelRightAsideContainerConfig } from "./types/components-common";
-import type { PopsPanelDeepViewConfig } from "./types/components-deepMenu";
 import type { PopsPanelContainerConfig } from "./types/components-container";
-import type { PopsPanelBottomContentConfig, PopsPanelContentConfig, PopsPanelConfig, PopsPanelViewConfig } from "./types";
+import type { PopsPanelDeepViewConfig } from "./types/components-deepMenu";
 import type { PopsPanelInputConfig, PopsPanelInputType } from "./types/components-input";
 import type { PopsPanelOwnConfig } from "./types/components-own";
-import type { PopsPanelSelectMultipleDataOption, PopsPanelSelectMultipleConfig } from "./types/components-selectMultiple";
 import type { PopsPanelSelectConfig, PopsPanelSelectDataOption } from "./types/components-select";
+import type { PopsPanelSelectMultipleConfig, PopsPanelSelectMultipleDataOption } from "./types/components-selectMultiple";
 import type { PopsPanelSliderConfig } from "./types/components-slider";
 import type { PopsPanelSwitchConfig } from "./types/components-switch";
 import type { PopsPanelTextAreaConfig } from "./types/components-textarea";
@@ -152,7 +152,11 @@ export declare const PanelHandlerComponents: () => {
              */
             setStatus(isChecked?: boolean): void;
             /**
-             * 根据className来获取逆反值
+             * 获取开/关的逆反状态
+             */
+            getReverseStatus(): boolean;
+            /**
+             * 获取开/关的状态
              */
             getStatus(): boolean;
             /**

package/dist/types/src/components/panel/types/components-switch.d.ts

@@ -26,7 +26,17 @@ export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelS
      */
     getValue(): boolean;
     /**
-     * switch开启/关闭触发的回调函数
+     * switch`开启`/`关闭`前触发的回调函数
+     * @param event 事件
+     * @param value switch的状态(开关前)
+     * @returns
+     * + `false`: 阻止switch的开启/关闭
      */
-    callback(event: MouseEvent | PointerEvent, value: boolean): void;
+    beforeSwitchStatusChangeCallBack?(event: MouseEvent | PointerEvent, value: boolean): IPromise<void | boolean>;
+    /**
+     * switch`开启`/`关闭`后触发的回调函数
+     * @param event 事件
+     * @param value switch的状态(开关后)
+     */
+    callback(event: MouseEvent | PointerEvent, value: boolean): IPromise<void>;
 }

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

@@ -60,7 +60,7 @@ export interface PopsRightClickMenuDataConfig {
 /**
  * pops.rightClickMenu
  */
-export interface PopsRightClickMenuConfig extends Pick<PopsGeneralConfig, "useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "only"> {
+export interface PopsRightClickMenuConfig extends Pick<PopsGeneralConfig, "useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "lightStyle" | "darkStyle" | "only"> {
     /**
      * 目标元素
      * @default document.documentElement

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

@@ -1,4 +1,4 @@
-import type { PopsSearchSuggestionData, PopsSearchSuggestionConfig } from "./types/index";
+import type { PopsSearchSuggestionConfig, PopsSearchSuggestionData } from "./types/index";
 export declare const PopsSearchSuggestion: {
     init<T>(__config__: PopsSearchSuggestionConfig<T>): {
         /**

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

@@ -99,7 +99,7 @@ export type PopsSearchSuggestionData<T> = {
  * 搜索建议悬浮窗
  * pops.searchSuggestion
  */
-export interface PopsSearchSuggestionConfig<T = any> extends Pick<PopsGeneralConfig, "useShadowRoot" | "zIndex" | "style"> {
+export interface PopsSearchSuggestionConfig<T = any> extends Pick<PopsGeneralConfig, "useShadowRoot" | "zIndex" | "style" | "lightStyle" | "darkStyle"> {
     /**
      * 当前的环境，可以是document，可以是shadowroot，默认是document
      *

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

@@ -208,6 +208,8 @@ export declare const PopsTooltip: {
             only: boolean;
             zIndex: IFunction<number>;
             style: string | null;
+            lightStyle: string | null;
+            darkStyle: string | null;
             beforeAppendToPageCallBack: ($shadowRoot: ShadowRoot | HTMLElement, $shadowContainer: HTMLDivElement) => void;
         };
         $shadowContainer: HTMLDivElement;

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

@@ -5,7 +5,7 @@ export type PopsTooltipPosition = "top" | "right" | "bottom" | "left" | "follow"
 /**
  * pops.tooltip
  */
-export interface PopsToolTipConfig extends Pick<PopsGeneralConfig, "useShadowRoot" | "only" | "zIndex" | "style" | "beforeAppendToPageCallBack"> {
+export interface PopsToolTipConfig extends Pick<PopsGeneralConfig, "useShadowRoot" | "only" | "zIndex" | "style" | "lightStyle" | "darkStyle" | "beforeAppendToPageCallBack"> {
     /**
      * 目标元素
      */

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

@@ -25,6 +25,8 @@ export declare const GlobalConfig: {
         animation?: import("../types/animation").PopsAnimation | undefined;
         mask?: import("../types/mask").PopsMaskConfig | undefined;
         forbiddenScroll?: boolean | undefined;
+        lightStyle?: string | undefined;
+        darkStyle?: string | undefined;
         beforeAppendToPageCallBack?: void;
         drag?: boolean | undefined;
         dragLimit?: boolean | undefined;

package/dist/types/src/handler/PopsElementHandler.d.ts

@@ -1,4 +1,4 @@
-import type { PopsSupportAnimConfig, PopsSupportBottomButtonConfig, PopsSupportContentConfig, PopsSupportHeaderTitleConfig, PopsSupportAnimConfigType, PopsSupportBottomButtonConfigType, PopsSupportContentConfigType, PopsSupportHeaderTitleConfigType } from "../types/main";
+import type { PopsSupportAnimConfig, PopsSupportAnimConfigType, PopsSupportBottomButtonConfig, PopsSupportBottomButtonConfigType, PopsSupportContentConfig, PopsSupportContentConfigType, PopsSupportHeaderTitleConfig, PopsSupportHeaderTitleConfigType } from "../types/main";
 export declare const PopsElementHandler: {
     /**
      * 获取遮罩层HTML
@@ -52,4 +52,16 @@ export declare const PopsElementHandler: {
      * @param html
      */
     parseElement<T extends HTMLElement>(html: string): T;
+    /**
+     * 添加样式元素
+     */
+    addStyle($parent: HTMLElement | ShadowRoot, style?: string | null): HTMLStyleElement | undefined;
+    /**
+     * 添加在浅色模式下生效的style元素
+     */
+    addLightStyle($parent: HTMLElement | ShadowRoot, style?: string | null): HTMLStyleElement | undefined;
+    /**
+     * 添加在深色模式下生效的style元素
+     */
+    addDarkStyle($parent: HTMLElement | ShadowRoot, style?: string | null): HTMLStyleElement | undefined;
 };

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

@@ -202,6 +202,18 @@ export interface PopsGeneralConfig {
    * @default ""
    */
   style?: string | null;
+  /**
+   * （可选）自定义浅色模式的style
+   *
+   * 传入的css都在dark内
+   */
+  lightStyle?: string | null;
+  /**
+   * （可选）自定义深色模式的style
+   *
+   * 传入的css都在dark内
+   */
+  darkStyle?: string | null;
   /**
    * 在元素添加到页面前的事件
    * @param $shadowRoot 根元素

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

@@ -1,4 +1,5 @@
 import AnyTouch from "any-touch";
+import doubletap from "@any-touch/doubletap";
 declare class PopsUtils {
     /**
      * 判断是否是window，例如window、self、globalThis
@@ -112,7 +113,14 @@ declare class PopsUtils {
      * > 793.27
      **/
     formatByteToSize<T extends boolean>(byteSize: number | string, addType?: T): T extends true ? string : number;
+    /**
+     * https://github.com/any86/any-touch/blob/master/README.CN.md
+     */
     AnyTouch: () => typeof AnyTouch;
+    /**
+     * `any-touch`的`doubletap`事件插件
+     */
+    AnyTouchDoubleTapPlugin: () => typeof doubletap;
     /**
      * 通过navigator.userAgent判断是否是手机访问
      * @param userAgent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whitesev/pops",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "弹窗库，包含了alert、confirm、prompt、drawer、folder、loading、iframe、panel、tooltip、searchSuggestion、rightClickMenu组件",
   "keywords": [
     "ScriptCat",
@@ -40,6 +40,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@any-touch/doubletap": "^2.2.0",
     "any-touch": "^2.2.0"
   },
   "devDependencies": {
@@ -56,8 +57,8 @@
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-prettier": "^5.5.4",
     "globals": "^16.5.0",
-    "oxfmt": "^0.32.0",
-    "oxlint": "1.46.0",
+    "oxfmt": "^0.35.0",
+    "oxlint": "1.50.0",
     "rollup": "^4.54.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-import-css": "^4.1.2",

package/src/PopsCore.ts

@@ -50,4 +50,4 @@ const PopsCore = {
   },
 };
 
-export { PopsCore, OriginPrototype };
+export { OriginPrototype, PopsCore };

package/src/components/alert/defaultConfig.ts

@@ -57,6 +57,8 @@ export const PopsAlertDefaultConfig = (): DeepRequired<PopsAlertConfig> => {
     dragEndCallBack() {},
     forbiddenScroll: false,
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   } as DeepRequired<PopsAlertConfig>;
 };

package/src/components/alert/index.ts

@@ -1,13 +1,13 @@
 import { GlobalConfig } from "../../config/GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertDefaultConfig } from "./defaultConfig";
-import type { PopsType } from "../../types/main";
 import type { PopsAlertConfig } from "./types";
-import { PopsCSS } from "../../PopsCSS";
 
 export const PopsAlert = {
   init(__config__: PopsAlertConfig) {

package/src/components/confirm/defaultConfig.ts

@@ -85,6 +85,8 @@ export const PopsConfirmDefaultConfig = (): DeepRequired<PopsConfirmConfig> => {
     forbiddenScroll: false,
 
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   } as DeepRequired<PopsConfirmConfig>;
 };

package/src/components/drawer/defaultConfig.ts

@@ -83,6 +83,8 @@ export const PopsDrawerDefaultConfig = (): DeepRequired<PopsDrawerConfig> => {
     borderRadius: 0,
 
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
     forbiddenScroll: false,
   };

package/src/components/folder/defaultConfig.ts

@@ -146,6 +146,8 @@ export const PopsFolderDefaultConfig = (): DeepRequired<PopsFolderConfig> => {
     dragEndCallBack() {},
     forbiddenScroll: false,
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   };
 };

package/src/components/iframe/defaultConfig.ts

@@ -55,6 +55,8 @@ export const PopsIframeDefaultConfig = (): DeepRequired<PopsIframeConfig> => {
     },
 
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   };
 };

package/src/components/loading/defaultConfig.ts

@@ -24,6 +24,8 @@ export const PopsLoadingDefaultConfig = (): DeepRequired<PopsLoadingConfig> => {
     forbiddenScroll: false,
     isAbsolute: false,
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     addIndexCSS: true,
   };
 };

package/src/components/panel/defaultConfig.ts

@@ -863,6 +863,8 @@ export const PopsPanelDefaultConfig = (): DeepRequired<PopsPanelConfig> => {
     dragEndCallBack() {},
     forbiddenScroll: false,
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   };
 };

package/src/components/panel/handlerComponents.ts

@@ -1,3 +1,5 @@
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
@@ -5,31 +7,29 @@ import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlert } from "../alert";
-import { PopsTooltip } from "../tooltip";
-import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 import type { PopsAlertConfig } from "../alert/types";
-import type { PopsPanelButtonConfig } from "./types/components-button";
-import type { PopsPanelGeneralConfig, PopsPanelRightAsideContainerConfig } from "./types/components-common";
-import type { PopsPanelDeepViewConfig } from "./types/components-deepMenu";
-import type { PopsPanelContainerConfig } from "./types/components-container";
+import { PopsTooltip } from "../tooltip";
 import type {
   PopsPanelBottomContentConfig,
-  PopsPanelContentConfig,
   PopsPanelConfig,
+  PopsPanelContentConfig,
   PopsPanelEventType,
   PopsPanelViewConfig,
 } from "./types";
+import type { PopsPanelButtonConfig } from "./types/components-button";
+import type { PopsPanelGeneralConfig, PopsPanelRightAsideContainerConfig } from "./types/components-common";
+import type { PopsPanelContainerConfig } from "./types/components-container";
+import type { PopsPanelDeepViewConfig } from "./types/components-deepMenu";
 import type { PopsPanelInputConfig, PopsPanelInputType } from "./types/components-input";
 import type { PopsPanelOwnConfig } from "./types/components-own";
+import type { PopsPanelSelectConfig, PopsPanelSelectDataOption } from "./types/components-select";
 import type {
-  PopsPanelSelectMultipleDataOption,
   PopsPanelSelectMultipleConfig,
+  PopsPanelSelectMultipleDataOption,
 } from "./types/components-selectMultiple";
-import type { PopsPanelSelectConfig, PopsPanelSelectDataOption } from "./types/components-select";
 import type { PopsPanelSliderConfig } from "./types/components-slider";
 import type { PopsPanelSwitchConfig } from "./types/components-switch";
 import type { PopsPanelTextAreaConfig } from "./types/components-textarea";
-import { PopsCSS } from "../../PopsCSS";
 /**
  * 处理组件（把组件配置转为组件元素）
  */
@@ -395,15 +395,22 @@ export const PanelHandlerComponents = () => {
          * 设置点击事件
          */
         onClick() {
-          const that = this;
-          popsDOMUtils.on(this.$ele.core, "click", function (event) {
-            if (that.$ele.input.disabled || that.$ele.switch.hasAttribute("data-disabled")) {
+          popsDOMUtils.on(this.$ele.core, "click", async (event) => {
+            if (this.$ele.input.disabled || this.$ele.switch.hasAttribute("data-disabled")) {
               return;
             }
-            that.$data.value = that.getStatus();
-            that.setStatus(that.$data.value);
+            const status = this.getStatus();
+            if (typeof viewConfig.beforeSwitchStatusChangeCallBack === "function") {
+              const flag = await viewConfig.beforeSwitchStatusChangeCallBack(event, status);
+              if (typeof flag === "boolean" && !flag) {
+                return;
+              }
+            }
+            // 设置为逆反状态
+            this.$data.value = !status;
+            this.setStatus(this.$data.value);
             if (typeof viewConfig.callback === "function") {
-              viewConfig.callback(event, that.$data.value);
+              await viewConfig.callback(event, this.$data.value);
             }
           });
         },
@@ -420,11 +427,17 @@ export const PanelHandlerComponents = () => {
           }
         },
         /**
-         * 根据className来获取逆反值
+         * 获取开/关的逆反状态
+         */
+        getReverseStatus() {
+          return !this.getStatus();
+        },
+        /**
+         * 获取开/关的状态
          */
         getStatus() {
           let checkedValue = false;
-          if (!popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
+          if (popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
             checkedValue = true;
           }
           return checkedValue;
@@ -1896,7 +1909,7 @@ export const PanelHandlerComponents = () => {
                 return;
               }
               /** 当前已选中的值 */
-              const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
+              const { style, lightStyle, darkStyle, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
               /**
                * 弹窗关闭的回调
                */
@@ -1966,7 +1979,9 @@ export const PanelHandlerComponents = () => {
                   ${PopsCSS.panelCSS}
 
 								  ${style || ""}
-								`,
+								  `,
+                  lightStyle: lightStyle,
+                  darkStyle: darkStyle,
                 },
                 userConfirmConfig
               );
@@ -3119,7 +3134,7 @@ export const PanelHandlerComponents = () => {
             }
             /** 当前已选中的值 */
             const selectInfo = this.$data.selectedDataList;
-            const { style, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
+            const { style, lightStyle, darkStyle, ...userConfirmConfig } = viewConfig.selectConfirmDialogConfig || {};
             const dialogCloseCallback = () => {
               this.$data.selectedDataList = [...selectInfo];
               this.updateTagItem();
@@ -3168,6 +3183,8 @@ export const PanelHandlerComponents = () => {
 
 								  ${style || ""}
 								`,
+                lightStyle: lightStyle,
+                darkStyle: darkStyle,
               },
               userConfirmConfig
             );

package/src/components/panel/index.css

@@ -1383,6 +1383,7 @@ section.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-pa
     --pops-panel-components-input-hover-bd-color: #6f7175;
     --pops-panel-components-input-focus-bd-color: #409eff;
     --pops-panel-components-input-suffix-color: #a8abb2;
+    --pops-panel-components-input-suffix-bg-color: var(--pops-dark-color);
   }
   /* textarea的CSS */
   .pops-panel-textarea {

package/src/components/panel/types/components-switch.ts

@@ -27,7 +27,17 @@ export interface PopsPanelSwitchConfig extends PopsPanelGeneralConfig<PopsPanelS
    */
   getValue(): boolean;
   /**
-   * switch开启/关闭触发的回调函数
+   * switch`开启`/`关闭`前触发的回调函数
+   * @param event 事件
+   * @param value switch的状态(开关前)
+   * @returns
+   * + `false`: 阻止switch的开启/关闭
    */
-  callback(event: MouseEvent | PointerEvent, value: boolean): void;
+  beforeSwitchStatusChangeCallBack?(event: MouseEvent | PointerEvent, value: boolean): IPromise<void | boolean>;
+  /**
+   * switch`开启`/`关闭`后触发的回调函数
+   * @param event 事件
+   * @param value switch的状态(开关后)
+   */
+  callback(event: MouseEvent | PointerEvent, value: boolean): IPromise<void>;
 }

package/src/components/prompt/defaultConfig.ts

@@ -89,6 +89,8 @@ export const PopsPromptDefaultConfig = (): DeepRequired<PopsPromptConfig> => {
     forbiddenScroll: false,
 
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   };
 };

package/src/components/rightClickMenu/defaultConfig.ts

@@ -95,6 +95,8 @@ export const PopsRightClickMenuDefaultConfig = (): DeepRequired<PopsRightClickMe
     zIndex: 10000,
     preventDefault: true,
     style: null,
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
     limitPositionXInView: true,
     limitPositionYInView: true,

package/src/components/rightClickMenu/index.ts

@@ -15,6 +15,7 @@ import type {
 import { PopsCSS } from "../../PopsCSS";
 import { PopsIcon } from "../../PopsIcon";
 import type { PopsType } from "../../types/main";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
 
 export const PopsRightClickMenu = {
   init(__config__: PopsRightClickMenuConfig) {
@@ -47,18 +48,12 @@ export const PopsRightClickMenu = {
       },
     ]);
 
-    if (config.style != null) {
-      const $css = popsDOMUtils.createElement(
-        "style",
-        {
-          innerHTML: config.style,
-        },
-        {
-          type: "text/css",
-        }
-      );
-      $shadowRoot.appendChild($css);
-    }
+    // 添加自定义style
+    PopsElementHandler.addStyle($shadowRoot, config.style);
+    // 添加自定义浅色style
+    PopsElementHandler.addLightStyle($shadowRoot, config.lightStyle);
+    // 添加自定义深色style
+    PopsElementHandler.addDarkStyle($shadowRoot, config.darkStyle);
 
     const PopsContextMenu = {
       $data: {

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

@@ -70,7 +70,7 @@ export interface PopsRightClickMenuDataConfig {
  */
 export interface PopsRightClickMenuConfig extends Pick<
   PopsGeneralConfig,
-  "useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "only"
+  "useShadowRoot" | "beforeAppendToPageCallBack" | "zIndex" | "style" | "lightStyle" | "darkStyle" | "only"
 > {
   /**
    * 目标元素

package/src/components/searchSuggestion/defaultConfig.ts

@@ -59,5 +59,7 @@ export const PopsSearchSuggestionDefaultConfig = (): DeepRequired<PopsSearchSugg
       return data.filter((it) => it.value.includes(value));
     },
     style: "",
+    lightStyle: null,
+    darkStyle: null,
   };
 };

package/src/components/searchSuggestion/index.ts

@@ -1,13 +1,14 @@
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsSearchSuggestionDefaultConfig } from "./defaultConfig";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
-import type { PopsSearchSuggestionData, PopsSearchSuggestionConfig } from "./types/index";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+import type { PopsSearchSuggestionConfig, PopsSearchSuggestionData } from "./types/index";
 
 export const PopsSearchSuggestion = {
   init<T>(__config__: PopsSearchSuggestionConfig<T>) {
@@ -39,13 +40,12 @@ export const PopsSearchSuggestion = {
       },
     ]);
 
-    if (config.style != null) {
-      const $css = popsDOMUtils.createElement("style", {
-        type: "text/css",
-        innerHTML: config.style,
-      });
-      $shadowRoot.appendChild($css);
-    }
+    // 添加自定义style
+    PopsElementHandler.addStyle($shadowRoot, config.style);
+    // 添加自定义浅色style
+    PopsElementHandler.addLightStyle($shadowRoot, config.lightStyle);
+    // 添加自定义深色style
+    PopsElementHandler.addDarkStyle($shadowRoot, config.darkStyle);
     /**
      * 监听器的默认配置
      */

package/src/components/searchSuggestion/types/index.ts

@@ -106,7 +106,7 @@ export type PopsSearchSuggestionData<T> = {
  */
 export interface PopsSearchSuggestionConfig<T = any> extends Pick<
   PopsGeneralConfig,
-  "useShadowRoot" | "zIndex" | "style"
+  "useShadowRoot" | "zIndex" | "style" | "lightStyle" | "darkStyle"
 > {
   /**
    * 当前的环境，可以是document，可以是shadowroot，默认是document

package/src/components/tooltip/defaultConfig.ts

@@ -28,6 +28,8 @@ export const PopsTooltipDefaultConfig = (): DeepRequired<PopsToolTipConfig> => {
     arrowDistance: 12.5,
     otherDistance: 0,
     style: "",
+    lightStyle: null,
+    darkStyle: null,
     beforeAppendToPageCallBack() {},
   };
 };