@whitesev/pops 2.1.13 → 2.2.1

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

@@ -68,17 +68,17 @@ declare class Pops {
             [key: string]: CSSKeyframesRule;
         };
         /** 存储已创建的元素 */
-        layer: {
-            iframe: import("./types/layer").PopsLayerCommonConfig[];
-            loading: import("./types/layer").PopsLayerCommonConfig[];
-            folder: import("./types/layer").PopsLayerCommonConfig[];
-            alert: import("./types/layer").PopsLayerCommonConfig[];
-            confirm: import("./types/layer").PopsLayerCommonConfig[];
-            prompt: import("./types/layer").PopsLayerCommonConfig[];
-            drawer: import("./types/layer").PopsLayerCommonConfig[];
-            panel: import("./types/layer").PopsLayerCommonConfig[];
-            tooltip: import("./types/layer").PopsLayerCommonConfig[];
-            rightClickMenu: import("./types/layer").PopsLayerCommonConfig[];
+        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[];
+            panel: import("./types/inst").PopsInstCommonConfig[];
+            rightClickMenu: import("./types/inst").PopsInstCommonConfig[];
         };
         /** 禁止滚动 */
         forbiddenScroll: {
@@ -189,10 +189,10 @@ declare class Pops {
                 isOverMaxZIndex: boolean;
             };
             getMaxZIndex(deviation?: number): number;
-            removeInstance(moreLayerConfigList: import("./types/layer").PopsLayerCommonConfig[][], guid: string, isAll?: boolean): import("./types/layer").PopsLayerCommonConfig[][];
-            hide(popsType: import("./types/main").PopsLayerMode, layerConfigList: import("./types/layer").PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
-            show(popsType: import("./types/main").PopsLayerMode, layerConfigList: import("./types/layer").PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
-            close(popsType: string, layerConfigList: import("./types/layer").PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
+            removeInstance(instConfigList: import("./types/inst").PopsInstCommonConfig[][], guid: string, isAll?: boolean): import("./types/inst").PopsInstCommonConfig[][];
+            hide(popsType: import("./types/main").PopsInstStoreType, instConfigList: import("./types/inst").PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
+            show(popsType: import("./types/main").PopsInstStoreType, instConfigList: import("./types/inst").PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
+            close(popsType: string, instConfigList: import("./types/inst").PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
             drag(moveElement: HTMLElement, options: {
                 dragElement: HTMLElement;
                 limit: boolean;
@@ -409,7 +409,7 @@ declare class Pops {
         animElement: HTMLDivElement;
         popsElement: HTMLDivElement;
         maskElement?: HTMLDivElement | undefined;
-        mode: import("./types/main").PopsMode;
+        mode: import("./types/main").PopsType;
     };
     /**
      * 右键菜单

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

@@ -0,0 +1,8 @@
+import type { PopsInstCommonConfig } from "./types/inst";
+import type { PopsInstStoreType } from "./types/main";
+/**
+ * 弹窗实例数据
+ */
+export declare const PopsInstData: {
+    [key in PopsInstStoreType]: PopsInstCommonConfig[];
+};

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

@@ -13,6 +13,6 @@ export declare const PopsPanel: {
         animElement: HTMLDivElement;
         popsElement: HTMLDivElement;
         maskElement?: HTMLDivElement | undefined;
-        mode: import("../../types/main").PopsMode;
+        mode: import("../../types/main").PopsType;
     };
 };

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

@@ -61,7 +61,7 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPan
         /** 右侧的总容器的标题头容器 */
         sectionContainerHeaderContainer: HTMLUListElement;
         /** 右侧的总容器的标题头 */
-        sectionContainerHeader: HTMLDivElement;
+        sectionContainerHeader: HTMLLIElement;
         /** 右侧的内容容器 */
         sectionBodyContainer: HTMLUListElement;
     }) => void;

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

@@ -1,4 +1,4 @@
-import type { PopsSupportAnim, PopsSupportBottomBtn, PopsSupportContent, PopsSupportHeaderTitle, PopsTypeSupportAnim, PopsTypeSupportBottomBtn, PopsTypeSupportContent, PopsTypeSupportHeaderTitle } from "../types/main";
+import type { PopsSupportAnim, PopsSupportBottomBtn, PopsSupportContent, PopsSupportHeaderTitle, PopsSupportAnimType, PopsTypeSupportBottomBtn, PopsTypeSupportContent, PopsTypeSupportHeaderTitle } from "../types/main";
 export declare const PopsElementHandler: {
     /**
      * 获取遮罩层HTML
@@ -16,7 +16,7 @@ export declare const PopsElementHandler: {
      * @param bottomBtnHTML
      * @param zIndex
      */
-    getAnimHTML(guid: string, type: PopsTypeSupportAnim, config: PopsSupportAnim[keyof PopsSupportAnim], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
+    getAnimHTML(guid: string, type: PopsSupportAnimType, config: PopsSupportAnim[keyof PopsSupportAnim], html: string | undefined, bottomBtnHTML: string | undefined, zIndex: number): string;
     /**
      * 获取顶部按钮层HTML
      * @param type

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

@@ -8,8 +8,8 @@ import type { PopsPanelDetails } from "../components/panel/types";
 import type { PopsPromptDetails } from "../components/prompt/types/index";
 import type { PopsCommonConfig } from "../types/components";
 import { PopsEventDetails, PopsHandlerEventDetails } from "../types/event";
-import { PopsLayerCommonConfig } from "../types/layer";
-import type { PopsAllDetails, PopsLayerMode, PopsMode, PopsType } from "../types/main";
+import { PopsInstCommonConfig } from "../types/inst";
+import type { PopsDetails, PopsInstStoreType, PopsType, PopsSupportAnimType } from "../types/main";
 export declare const PopsHandler: {
     /**
      * 创建shadow
@@ -50,7 +50,7 @@ export declare const PopsHandler: {
      * @param animElement
      * @param type
      */
-    handleQueryElement(animElement: HTMLDivElement, type: PopsType): {
+    handleQueryElement(animElement: HTMLDivElement, type: PopsSupportAnimType): {
         /**
          * 主元素
          */
@@ -163,7 +163,7 @@ export declare const PopsHandler: {
      * @param maskElement 遮罩层
      * @param config 当前配置
      */
-    handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, mode: PopsLayerMode, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
+    handleEventDetails(guid: string, $shadowContainer: HTMLDivElement, $shadowRoot: ShadowRoot | HTMLElement, mode: PopsInstStoreType, animElement: HTMLDivElement, popsElement: HTMLDivElement, maskElement: HTMLDivElement, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails): PopsEventDetails;
     /**
      * 获取loading的事件配置
      * @param guid
@@ -217,11 +217,11 @@ export declare const PopsHandler: {
      * @param type 当前弹窗类型
      * @param config 配置
      */
-    handleOnly<T extends Required<PopsAllDetails[keyof PopsAllDetails]>>(type: PopsMode, config: T): T;
+    handleOnly<T extends Required<PopsDetails[keyof PopsDetails]>>(type: PopsType, config: T): T;
     /**
      * 处理把已创建的元素保存到内部环境中
      * @param type 当前弹窗类型
      * @param value
      */
-    handlePush(type: PopsLayerMode, value: PopsLayerCommonConfig): void;
+    handlePush(type: PopsInstStoreType, value: PopsInstCommonConfig): void;
 };

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

@@ -1,6 +1,6 @@
 import { PopsEventDetails, PopsHandlerEventDetails } from "./event";
 import type { PopsIconType } from "./icon";
-import type { PopsMode } from "./main";
+import type { PopsType } from "./main";
 
 /**
  * 按钮类型
@@ -51,7 +51,7 @@ export interface PopsBtnCallBackEvent {
 	/**
 	 * 调用的方法
 	 */
-	mode: PopsMode;
+	mode: PopsType;
 	/**
 	 * 唯一id
 	 */

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

@@ -1,5 +1,5 @@
 import type { PopsIframeDetails } from "../components/iframe/types";
-import type { PopsMode } from "./main";
+import type { PopsType } from "./main";
 
 /**
  * 事件配置
@@ -12,7 +12,7 @@ export interface PopsIframeEventDetails {
 	/**
 	 * 当前弹窗类型
 	 */
-	mode: PopsMode;
+	mode: PopsType;
 	/**
 	 * 动画层
 	 */
@@ -47,7 +47,7 @@ export interface PopsEventDetails {
 	/** 遮罩层 */
 	maskElement?: HTMLDivElement;
 	/** 当前弹窗类型 */
-	mode: PopsMode;
+	mode: PopsType;
 	guid: string;
 	close: () => Promise<void>;
 	hide: () => Promise<void>;

package/dist/types/src/types/{layer.d.ts → inst.d.ts}

@@ -1,7 +1,7 @@
 /**
- * config内存储饿实例配置
+ * config实例配置
  */
-export interface PopsLayerConfig {
+export interface PopsInstConfig {
 	/** 固定id */
 	guid: string;
 	/** 动画元素 */
@@ -11,12 +11,14 @@ export interface PopsLayerConfig {
 	/** 遮罩层元素 */
 	maskElement?: HTMLDivElement;
 }
-
-export interface PopsLayerCommonConfig extends PopsLayerConfig {
+/**
+ * config实例通用配置
+ */
+export interface PopsInstCommonConfig extends PopsInstConfig {
 	/** shadow容器 */
 	$shadowContainer: HTMLDivElement;
 	/** shadow容器的shandowRoot */
 	$shadowRoot: ShadowRoot | HTMLElement;
 	/** 移除实例前的回调函数 */
-	beforeRemoveCallBack?: (layerCommonConfig: PopsLayerCommonConfig) => void;
+	beforeRemoveCallBack?: (instCommonConfig: PopsInstCommonConfig) => void;
 }

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

@@ -22,7 +22,7 @@ export interface PopsUtilsOwnObject<V extends any> {
 }
 
 /** pops的所有类型配置 10个 */
-export interface PopsAllDetails {
+export interface PopsDetails {
 	alert: PopsAlertDetails;
 	confirm: PopsConfirmDetails;
 	prompt: PopsPromptDetails;
@@ -35,42 +35,17 @@ export interface PopsAllDetails {
 	rightClickMenu: PopsRightClickMenuDetails;
 }
 
-/** pops的类型配置 8个 */
-export interface PopsTypeDetails {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	loading: PopsLoadingDetails;
-	iframe: PopsIframeDetails;
-	// tooltip: PopsToolTipDetails;
-	drawer: PopsDrawerDetails;
-	folder: PopsFolderDetails;
-	panel: PopsPanelDetails;
-	// rightClickMenu: PopsRightClickMenuDetails;
-}
-
-/** pops的类型 8个 */
-export type PopsType = keyof PopsTypeDetails;
-
 /** pops所有的类型 10个 */
-export type PopsMode = PopsType | "tooltip" | "rightClickMenu";
+export type PopsType = keyof PopsDetails;
 
-/** 存储实例的类型 9个 */
-export type PopsLayerMode = PopsType | "tooltip" | "rightClickMenu";
+/** 存储实例的类型 10个 */
+export type PopsInstStoreType = PopsType;
+
+/** pops弹窗支持动画元素的配置 8个 */
+export type PopsSupportAnim = Omit<PopsDetails, "tooltip" | "rightClickMenu">;
 
-/** pops弹窗支持动画元素的配置 */
-export interface PopsSupportAnim {
-	alert: PopsAlertDetails;
-	confirm: PopsConfirmDetails;
-	prompt: PopsPromptDetails;
-	loading: PopsLoadingDetails;
-	iframe: PopsIframeDetails;
-	drawer: PopsDrawerDetails;
-	folder: PopsFolderDetails;
-	panel: PopsPanelDetails;
-}
 /** pops弹窗支持动画元素的类型 */
-export type PopsTypeSupportAnim = keyof PopsSupportAnim;
+export type PopsSupportAnimType = keyof PopsSupportAnim;
 
 /** pops弹窗支持标题栏的配置 */
 export interface PopsSupportHeaderTitle {

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

@@ -6,8 +6,8 @@ import type { PopsIframeDetails } from "../components/iframe/types";
 import type { PopsLoadingDetails } from "../components/loading/types";
 import type { PopsPanelDetails } from "../components/panel/types";
 import type { PopsPromptDetails } from "../components/prompt/types/index";
-import type { PopsLayerCommonConfig } from "../types/layer";
-import type { PopsLayerMode } from "../types/main";
+import type { PopsInstCommonConfig } from "../types/inst";
+import type { PopsInstStoreType } from "../types/main";
 export declare const PopsInstanceUtils: {
     /**
      * 获取页面中最大的z-index的元素信息
@@ -44,40 +44,40 @@ export declare const PopsInstanceUtils: {
     getMaxZIndex(deviation?: number): number;
     /**
      * 删除配置中对应的对象
-     * @param moreLayerConfigList 配置实例列表
+     * @param instConfigList 配置实例列表
      * @param  guid 唯一标识
      * @param isAll 是否全部删除
      */
-    removeInstance(moreLayerConfigList: PopsLayerCommonConfig[][], guid: string, isAll?: boolean): PopsLayerCommonConfig[][];
+    removeInstance(instConfigList: PopsInstCommonConfig[][], guid: string, isAll?: boolean): PopsInstCommonConfig[][];
     /**
      * 隐藏
      * @param popsType
-     * @param layerConfigList
+     * @param instConfigList
      * @param guid
      * @param config
      * @param animElement
      * @param maskElement
      */
-    hide(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
+    hide(popsType: PopsInstStoreType, instConfigList: PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement: HTMLElement): Promise<void>;
     /**
      * 显示
      * @param popsType
-     * @param layerConfigList
+     * @param instConfigList
      * @param guid
      * @param config
      * @param animElement
      * @param maskElement
      */
-    show(popsType: PopsLayerMode, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
+    show(popsType: PopsInstStoreType, instConfigList: PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement, maskElement?: HTMLElement): Promise<void>;
     /**
      * 关闭
      * @param popsType
-     * @param layerConfigList
+     * @param instConfigList
      * @param guid
      * @param config
      * @param animElement
      */
-    close(popsType: string, layerConfigList: PopsLayerCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
+    close(popsType: string, instConfigList: PopsInstCommonConfig[], guid: string, config: PopsAlertDetails | PopsDrawerDetails | PopsPromptDetails | PopsConfirmDetails | PopsIframeDetails | PopsLoadingDetails | PopsPanelDetails | PopsFolderDetails, animElement: HTMLElement): Promise<void>;
     /**
      * 拖拽元素
      * 说明：

package/package.json

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

package/src/Pops.ts

@@ -29,21 +29,21 @@ import { GlobalConfig } from "./GlobalConfig";
 import { PopsTooltip } from "./components/tooltip";
 import { PopsCSS } from "./PopsCSS";
 import { PopsIcon } from "./PopsIcon";
-import { PopsLayerData } from "./PopsLayer";
+import { PopsInstData } from "./PopsInst";
 import { PopsAnimation } from "./PopsAnimation";
 
 class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2025.7.12",
+		version: "2025.7.13",
 		cssText: PopsCSS,
 		/** icon图标的svg代码 */
 		iconSVG: PopsIcon.$data,
 		/** 当前已配置的动画@keyframes名字映射(初始化时生成) */
 		animation: PopsAnimation.$data,
 		/** 存储已创建的元素 */
-		layer: PopsLayerData,
+		instData: PopsInstData,
 		/** 禁止滚动 */
 		forbiddenScroll: {
 			event(event: Event) {

package/src/PopsInst.ts

@@ -0,0 +1,21 @@
+import type { PopsInstCommonConfig } from "./types/inst";
+import type { PopsInstStoreType } from "./types/main";
+
+/**
+ * 弹窗实例数据
+ */
+export const PopsInstData: {
+	[key in PopsInstStoreType]: PopsInstCommonConfig[];
+} = {
+	alert: [],
+	confirm: [],
+	drawer: [],
+	folder: [],
+	iframe: [],
+	loading: [],
+	panel: [],
+	prompt: [],
+	rightClickMenu: [],
+	// 没有 searchSuggestion
+	tooltip: [],
+};

package/src/components/alert/index.ts

@@ -5,7 +5,7 @@ import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertConfig } from "./config";
-import type { PopsMode } from "../../types/main";
+import type { PopsType } from "../../types/main";
 import type { PopsAlertDetails } from "./types";
 import { PopsCSS } from "../../PopsCSS";
 
@@ -13,7 +13,7 @@ export const PopsAlert = {
 	init(details: PopsAlertDetails) {
 		const guid = popsUtils.getRandomGUID();
 		// 设置当前类型
-		const PopsType: PopsMode = "alert";
+		const PopsType: PopsType = "alert";
 		let config = PopsAlertConfig();
 		config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
 		config = popsUtils.assign(config, details);

package/src/components/iframe/index.ts

@@ -3,7 +3,7 @@ import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
 import { PopsCSS } from "../../PopsCSS";
-import { PopsLayerData } from "../../PopsLayer";
+import { PopsInstData } from "../../PopsInst";
 import type { PopsEventDetails } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
@@ -323,7 +323,7 @@ export const PopsIframe = {
 			(event) => {
 				event.preventDefault();
 				event.stopPropagation();
-				PopsInstanceUtils.removeInstance([PopsLayerData.iframe], guid, false);
+				PopsInstanceUtils.removeInstance([PopsInstData.iframe], guid, false);
 				if (typeof config?.btn?.close?.callback === "function") {
 					config.btn.close.callback(eventDetails, event);
 				}

package/src/components/panel/handlerComponents.ts

@@ -2727,14 +2727,18 @@ export const PanelHandlerComponents = () => {
 					});
 					Reflect.set($deepMenuContainer, "__formConfig__", formConfig);
 					let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
-						className: "pops-panel-deepMenu-container-header-ul",
+						className:
+							"pops-panel-container-header-ul pops-panel-deepMenu-container-header-ul",
+					});
+					let $deepMenuMain = popsDOMUtils.createElement("ul", {
+						className: "pops-panel-container-main-ul",
 					});
-					let $deepMenuBodyUL = popsDOMUtils.createElement("ul");
 					// 标题文字
 					let headerTitleText = formConfig.headerTitle ?? formConfig.text;
-					let $header = popsDOMUtils.createElement("div", {
-						className: "pops-panel-deepMenu-container-header",
-						innerHTML: `<p>${headerTitleText}</p>`,
+					let $header = popsDOMUtils.createElement("li", {
+						className:
+							"pops-panel-container-header-title-text pops-panel-deepMenu-container-header",
+						innerHTML: /*html*/ `<p class="pops-panel-deepMenu-container-header-title-text">${headerTitleText}</p>`,
 					});
 					let $headerLeftArrow = popsDOMUtils.createElement("i", {
 						className: "pops-panel-deepMenu-container-left-arrow-icon",
@@ -2763,12 +2767,12 @@ export const PanelHandlerComponents = () => {
 					);
 					$deepMenuHeaderUL.appendChild($header);
 					$deepMenuContainer.appendChild($deepMenuHeaderUL);
-					$deepMenuContainer.appendChild($deepMenuBodyUL);
+					$deepMenuContainer.appendChild($deepMenuMain);
 
 					if (formConfig.forms && Array.isArray(formConfig.forms)) {
 						for (let index = 0; index < formConfig.forms.length; index++) {
 							let formItemConfig = formConfig.forms[index];
-							this.initFormItem($deepMenuBodyUL, formItemConfig);
+							this.initFormItem($deepMenuMain, formItemConfig);
 						}
 					}
 					that.$el.$content?.appendChild($deepMenuContainer);
@@ -2778,7 +2782,7 @@ export const PanelHandlerComponents = () => {
 							sectionContainer: $deepMenuContainer,
 							sectionContainerHeaderContainer: $deepMenuHeaderUL,
 							sectionContainerHeader: $header,
-							sectionBodyContainer: $deepMenuBodyUL,
+							sectionBodyContainer: $deepMenuMain,
 						});
 					}
 					that.triggerRenderRightContainer($deepMenuContainer);

package/src/components/panel/index.css

@@ -9,7 +9,9 @@
 
 	--pops-panel-forms-margin-top-bottom: 10px;
 	--pops-panel-forms-margin-left-right: 20px;
-	--pops-panel-forms-header-icon-size: 20px;
+	--pops-panel-forms-header-icon-size: calc(
+		var(--pops-panel-forms-container-li-padding-left-right) + 1px
+	);
 	--pops-panel-forms-header-padding-top-bottom: 15px;
 	--pops-panel-forms-header-padding-left-right: 10px;
 	--pops-panel-forms-container-item-left-text-gap: 6px;
@@ -139,13 +141,18 @@ section.pops-panel-container .pops-panel-forms-container-item-header-text {
 section.pops-panel-container li.pops-panel-forms-container-item {
 	display: block;
 }
-section.pops-panel-container .pops-panel-forms-container-item ul {
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul.pops-panel-forms-container-item-formlist {
 	border-radius: var(--pops-panel-forms-container-item-border-radius);
 	background: var(--pops-panel-forms-container-item-bg-color);
 	margin: var(--pops-panel-forms-container-item-margin-top-bottom)
 		var(--pops-panel-forms-margin-left-right);
 }
-section.pops-panel-container .pops-panel-forms-container-item ul li {
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul.pops-panel-forms-container-item-formlist
+	li {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -163,7 +170,10 @@ section.pops-panel-container
 	margin: 0px;
 	border-bottom: 0;
 }
-section.pops-panel-container .pops-panel-forms-container-item ul li:last-child {
+section.pops-panel-container
+	.pops-panel-forms-container-item
+	ul.pops-panel-forms-container-item-formlist
+	li:last-child {
 	border: 0;
 }
 /* 左侧的文字 */
@@ -1093,7 +1103,9 @@ section.pops-panel-container
 	display: flex;
 	align-items: center;
 }
-.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {
+section.pops-panel-deepMenu-container
+	.pops-panel-container-header-ul
+	li.pops-panel-deepMenu-container-header {
 	display: flex;
 	align-items: center;
 	width: -webkit-fill-available;
@@ -1104,6 +1116,7 @@ section.pops-panel-container
 				var(--pops-panel-forms-container-li-padding-left-right) -
 				var(--pops-panel-forms-header-icon-size)
 		);
+	gap: 0px;
 }
 .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {
 	width: var(--pops-panel-forms-header-icon-size);

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

@@ -69,7 +69,7 @@ export interface PopsPanelDeepMenuDetails
 			/** 右侧的总容器的标题头容器 */
 			sectionContainerHeaderContainer: HTMLUListElement;
 			/** 右侧的总容器的标题头 */
-			sectionContainerHeader: HTMLDivElement;
+			sectionContainerHeader: HTMLLIElement;
 			/** 右侧的内容容器 */
 			sectionBodyContainer: HTMLUListElement;
 		}

package/src/components/rightClickMenu/index.ts

@@ -184,8 +184,8 @@ export const PopsRightClickMenu = {
 						guid: guid,
 						animElement: rootElement,
 						popsElement: rootElement,
-						beforeRemoveCallBack(layerCommonConfig) {
-							PopsContextMenu.closeAllMenu(layerCommonConfig.popsElement);
+						beforeRemoveCallBack(instCommonConfig) {
+							PopsContextMenu.closeAllMenu(instCommonConfig.popsElement);
 						},
 					});
 				}

package/src/css/scrollbar.css

@@ -1,18 +1,22 @@
-/* firefox上暂不支持::-webkit-scrollbar */
+/* ::-webkit-scrollbar 是非标准的css */
+/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */
 .pops ::-webkit-scrollbar {
 	width: 6px;
 	height: 0;
 }
 
+/* 滚动条轨道 */
 .pops ::-webkit-scrollbar-track {
 	width: 0;
 }
-.pops ::-webkit-scrollbar-thumb:hover {
-	background: rgb(178, 178, 178, var(--pops-bg-opacity));
-}
+/* 滚动条滑块 */
 .pops ::-webkit-scrollbar-thumb {
 	min-height: 28px;
 	border-radius: 2em;
-	background: rgb(204, 204, 204, var(--pops-bg-opacity));
+	background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));
 	background-clip: padding-box;
 }
+/* 滚动条滑块 */
+.pops ::-webkit-scrollbar-thumb:hover {
+	background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));
+}

package/src/handler/PopsElementHandler.ts

@@ -7,7 +7,7 @@ import type {
 	PopsSupportBottomBtn,
 	PopsSupportContent,
 	PopsSupportHeaderTitle,
-	PopsTypeSupportAnim,
+	PopsSupportAnimType,
 	PopsTypeSupportBottomBtn,
 	PopsTypeSupportContent,
 	PopsTypeSupportHeaderTitle,
@@ -40,7 +40,7 @@ export const PopsElementHandler = {
 	 */
 	getAnimHTML(
 		guid: string,
-		type: PopsTypeSupportAnim,
+		type: PopsSupportAnimType,
 		config: PopsSupportAnim[keyof PopsSupportAnim],
 		html = "",
 		bottomBtnHTML = "",