@whitesev/pops 1.8.0 → 1.8.2

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

@@ -214,7 +214,7 @@ declare class Pops {
             createSectionContainerItem_deepMenu(formConfig: import("./components/panel/deepMenuType").PopsPanelDeepMenuDetails): HTMLLIElement;
             createSectionContainerItem_own(formConfig: import("./components/panel/ownType").PopsPanelOwnDetails): HTMLLIElement;
             createSectionContainerItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails): HTMLLIElement | undefined;
-            initFormItem(formConfig: import("./components/panel/indexType").PopsPanelContentConfig | import("./components/panel/formsType").PopsPanelFormsDetails): void;
+            createSectionContainerItem_forms(formConfig: import("./components/panel/indexType").PopsPanelContentConfig | import("./components/panel/formsType").PopsPanelFormsDetails): void;
             uListContainerAddItem(formConfig: import("./components/panel/indexType").PopsPanelFormsTotalDetails, containerOptions: Omit<import("./components/panel/commonType").PopsPanelRightAsideContainerOptions, "target">): void;
             setAsideItemClickEvent(asideLiElement: HTMLElement, asideConfig: import("./components/panel/indexType").PopsPanelContentConfig): void;
         };

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

@@ -147,10 +147,11 @@ export declare const PanelHandleContentDetails: () => {
      */
     createSectionContainerItem(formConfig: PopsPanelFormsTotalDetails): HTMLLIElement | undefined;
     /**
+     * 生成配置项forms
      * 生成配置每一项的元素
      * @param formConfig
      */
-    initFormItem(formConfig: PopsPanelContentConfig | PopsPanelFormsDetails): void;
+    createSectionContainerItem_forms(formConfig: PopsPanelContentConfig | PopsPanelFormsDetails): void;
     /**
      *
      * @param formConfig

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

@@ -4,7 +4,7 @@ import type { PopsIcon } from "../../types/icon";
 /**
  * pops.panel的 button
  */
-export interface PopsPanelButtonDetails extends PopsPanelCommonDetails {
+export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
     /**
      * （可选）className属性
      */

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

@@ -1,3 +1,4 @@
+import type { PopsPanelFormsDetails } from "./formsType";
 import { PopsPanelFormsTotalDetails } from "./indexType";
 /**
  * 右侧容器的配置
@@ -17,7 +18,7 @@ export interface PopsPanelRightAsideContainerOptions {
 /**
  * 通用配置
  */
-export interface PopsPanelCommonDetails {
+export interface PopsPanelCommonDetails<T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails> {
     /**
      * 在添加到<ul>元素后触发该回调
      * @param formConfig 配置
@@ -44,5 +45,5 @@ export interface PopsPanelCommonDetails {
      * // 例如在type为forms时
      * container内只有container.ulElement这个属性
      */
-    afterAddToUListCallBack?: (formConfig: PopsPanelFormsTotalDetails, container: PopsPanelRightAsideContainerOptions) => void;
+    afterAddToUListCallBack?: (formConfig: T, container: PopsPanelRightAsideContainerOptions) => void;
 }

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

@@ -4,7 +4,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 深层菜单
  */
-export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails {
+export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails<PopsPanelDeepMenuDetails> {
     /**
      * 类型
      */
@@ -48,7 +48,7 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails {
      * + true 表示阻止进入深层菜单
      * + false （默认）表示允许进入深层菜单
      */
-    clickCallBack?: (event: MouseEvent | PointerEvent, formConfig: PopsPanelDeepMenuDetails) => boolean | void;
+    clickCallBack?: (event: MouseEvent | PointerEvent, formConfig: PopsPanelDeepMenuDetails) => boolean | void | Promise<boolean | void>;
     /**
      * 菜单配置
      */

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

@@ -3,7 +3,7 @@ import type { PopsPanelFormsTotalDetails } from "./indexType";
 /**
  * pops.panel的 forms
  */
-export interface PopsPanelFormsDetails extends PopsPanelCommonDetails {
+export interface PopsPanelFormsDetails extends PopsPanelCommonDetails<PopsPanelFormsDetails> {
     /**
      * （可选）className属性
      */

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

@@ -2,7 +2,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 input
  */
-export interface PopsPanelInputDetails extends PopsPanelCommonDetails {
+export interface PopsPanelInputDetails extends PopsPanelCommonDetails<PopsPanelInputDetails> {
     /**
      * （可选）className属性
      */

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

@@ -3,7 +3,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
  * pops.panel的 own
  * 自定义的
  */
-export interface PopsPanelOwnDetails extends PopsPanelCommonDetails {
+export interface PopsPanelOwnDetails extends PopsPanelCommonDetails<PopsPanelOwnDetails> {
     /**
      * （可选）className属性
      */

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

@@ -24,7 +24,7 @@ export interface PopsPanelSelectMultipleDataOption<T> {
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommonDetails {
+export interface PopsPanelSelectMultipleDetails<T = any> extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
     /**
      * （可选）className属性
      */

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

@@ -2,7 +2,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 select
  */
-export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails {
+export interface PopsPanelSelectDetails<T = any> extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
     /**
      * （可选）className属性
      */

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

@@ -2,7 +2,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 slider
  */
-export interface PopsPanelSliderDetails extends PopsPanelCommonDetails {
+export interface PopsPanelSliderDetails extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
     /**
      * （可选）className属性
      */

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

@@ -2,7 +2,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 switch
  */
-export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails {
+export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
     /**
      * （可选）className属性
      */

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

@@ -2,7 +2,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 textarea
  */
-export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails {
+export interface PopsPanelTextAreaDetails extends PopsPanelCommonDetails<PopsPanelTextAreaDetails> {
     /**
      * （可选）className属性
      */

package/package.json

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

package/src/Pops.ts

@@ -83,7 +83,7 @@ class Pops {
 	/** 配置 */
 	config = {
 		/** 版本号 */
-		version: "2024.10.27",
+		version: "2024.11.1",
 		cssText: {
 			/** 主CSS */
 			index: indexCSS,

package/src/components/panel/PanelHandleContentDetails.ts

@@ -1045,7 +1045,7 @@ export const PanelHandleContentDetails = () => {
 				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
 			${leftDescriptionText}
 			</div>
-			<div class="pops-panel-input">
+			<div class="pops-panel-input pops-user-select-none">
 				<input type="${inputType}" placeholder="${formConfig.placeholder}">
 			</div>
 			`;
@@ -1347,7 +1347,7 @@ export const PanelHandleContentDetails = () => {
 				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
 			${leftDescriptionText}
 			</div>
-			<div class="pops-panel-select">
+			<div class="pops-panel-select pops-user-select-none">
 				<select></select>
 			</div>
 			`;
@@ -2393,6 +2393,17 @@ export const PanelHandleContentDetails = () => {
 						});
 						formContainerListElement.appendChild(formContainerULElement);
 						$container.appendChild(formContainerListElement);
+						if (
+							typeof formConfig_forms.afterAddToUListCallBack === "function"
+						) {
+							formConfig_forms.afterAddToUListCallBack(formConfig as any, {
+								target: formContainerListElement,
+								ulElement: formContainerULElement,
+								sectionContainerULElement: that.sectionContainerULElement,
+								formContainerListElement: formContainerListElement,
+								formHeaderDivElement: formHeaderDivElement,
+							});
+						}
 					} else {
 						/* 如果成功创建，加入到中间容器中 */
 						that.uListContainerAddItem(formConfig, {
@@ -2411,7 +2422,7 @@ export const PanelHandleContentDetails = () => {
 						"section.pops-panel-container"
 					) as HTMLElement | null;
 					if (currentSection) {
-						popsDOMUtils.cssHide(currentSection);
+						popsDOMUtils.cssHide(currentSection,true);
 					}
 					// 子菜单的容器
 					let $deepMenuContainer = popsDOMUtils.createElement("section", {
@@ -2462,19 +2473,6 @@ export const PanelHandleContentDetails = () => {
 						}
 					}
 					that.$el.$content?.appendChild($deepMenuContainer);
-
-					/* 根据标题的高度来自适应内容高度，默认开启 */
-					/* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
-					let contentContainerOffset = 0;
-					/* 获取标题的<ul>元素的高度 */
-					let sectionContainerHeaderULElementHeight =
-						popsDOMUtils.height($deepMenuHeaderUL);
-					$deepMenuChildMenuUL.style.setProperty(
-						"height",
-						`calc( 100% - ${
-							sectionContainerHeaderULElementHeight + contentContainerOffset
-						}px )`
-					);
 				},
 				/** 设置项的点击事件 */
 				setLiClickEvent() {
@@ -2558,10 +2556,13 @@ export const PanelHandleContentDetails = () => {
 			}
 		},
 		/**
+		 * 生成配置项forms
 		 * 生成配置每一项的元素
 		 * @param formConfig
 		 */
-		initFormItem(formConfig: PopsPanelContentConfig | PopsPanelFormsDetails) {
+		createSectionContainerItem_forms(
+			formConfig: PopsPanelContentConfig | PopsPanelFormsDetails
+		) {
 			let that = this;
 			let formConfig_forms = formConfig as PopsPanelFormsDetails;
 			if (formConfig_forms["type"] === "forms") {
@@ -2628,6 +2629,16 @@ export const PanelHandleContentDetails = () => {
 				});
 				formContainerListElement.appendChild(formContainerULElement);
 				that.sectionContainerULElement.appendChild(formContainerListElement);
+
+				if (typeof formConfig_forms.afterAddToUListCallBack === "function") {
+					formConfig_forms.afterAddToUListCallBack(formConfig_forms, {
+						target: formContainerListElement,
+						ulElement: formContainerULElement,
+						sectionContainerULElement: that.sectionContainerULElement,
+						formContainerListElement: formContainerListElement,
+						formHeaderDivElement: formHeaderDivElement,
+					});
+				}
 			} else {
 				/* 如果成功创建，加入到中间容器中 */
 				that.uListContainerAddItem(formConfig as any, {
@@ -2649,7 +2660,7 @@ export const PanelHandleContentDetails = () => {
 				containerOptions["ulElement"].appendChild(itemLiElement);
 			}
 			if (typeof formConfig.afterAddToUListCallBack === "function") {
-				formConfig.afterAddToUListCallBack(formConfig, {
+				formConfig.afterAddToUListCallBack(formConfig as any, {
 					...containerOptions,
 					target: itemLiElement,
 				});
@@ -2694,28 +2705,9 @@ export const PanelHandleContentDetails = () => {
 					] as PopsPanelContentConfig[];
 
 					__forms__.forEach((formConfig) => {
-						this.initFormItem(formConfig);
+						this.createSectionContainerItem_forms(formConfig);
 					});
 
-					let autoAdaptionContentHeight =
-						asideConfig.autoAdaptionContentHeight ?? true;
-					if (autoAdaptionContentHeight) {
-						/* 根据标题的高度来自适应内容高度，默认开启 */
-						/* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
-						let contentContainerOffset =
-							(asideConfig as any).contentContainerOffset ?? 0;
-						/* 获取标题的<ul>元素的高度 */
-						let sectionContainerHeaderULElementHeight = popsDOMUtils.height(
-							this.sectionContainerHeaderULElement
-						);
-						this.sectionContainerULElement.style.setProperty(
-							"height",
-							`calc( 100% - ${
-								sectionContainerHeaderULElementHeight + contentContainerOffset
-							}px )`
-						);
-					}
-
 					if (typeof asideConfig.callback === "function") {
 						/* 执行回调 */
 						asideConfig.callback(

package/src/components/panel/buttonType.ts

@@ -4,7 +4,7 @@ import type { PopsIcon } from "../../types/icon";
 /**
  * pops.panel的 button
  */
-export interface PopsPanelButtonDetails extends PopsPanelCommonDetails {
+export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanelButtonDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/commonType.ts

@@ -1,3 +1,4 @@
+import type { PopsPanelFormsDetails } from "./formsType";
 import { PopsPanelFormsTotalDetails } from "./indexType";
 
 /**
@@ -18,7 +19,9 @@ export interface PopsPanelRightAsideContainerOptions {
 /**
  * 通用配置
  */
-export interface PopsPanelCommonDetails {
+export interface PopsPanelCommonDetails<
+	T extends PopsPanelFormsTotalDetails | PopsPanelFormsDetails
+> {
 	/**
      * 在添加到<ul>元素后触发该回调
      * @param formConfig 配置
@@ -46,7 +49,7 @@ export interface PopsPanelCommonDetails {
      * container内只有container.ulElement这个属性
      */
 	afterAddToUListCallBack?: (
-		formConfig: PopsPanelFormsTotalDetails,
+		formConfig: T,
 		container: PopsPanelRightAsideContainerOptions
 	) => void;
 }

package/src/components/panel/config.ts

@@ -229,6 +229,9 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 								description: "二级菜单",
 								rightText: "自定义配置",
 								arrowRightIcon: true,
+								afterAddToUListCallBack(formConfig, container) {
+									console.log(formConfig, container);
+								},
 								clickCallBack(event, formConfig) {
 									console.log("进入子配置", event, formConfig);
 								},
@@ -314,6 +317,9 @@ export const PopsPanelConfig = (): Required<PopsPanelDetails> => {
 						type: "forms",
 						isFold: true,
 						text: "折叠菜单",
+						afterAddToUListCallBack(formConfig, container) {
+							console.log(formConfig, container);
+						},
 						forms: [
 							{
 								className: "panel-switch",

package/src/components/panel/deepMenuType.ts

@@ -4,7 +4,8 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 深层菜单
  */
-export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails {
+export interface PopsPanelDeepMenuDetails
+	extends PopsPanelCommonDetails<PopsPanelDeepMenuDetails> {
 	/**
 	 * 类型
 	 */
@@ -51,7 +52,7 @@ export interface PopsPanelDeepMenuDetails extends PopsPanelCommonDetails {
 	clickCallBack?: (
 		event: MouseEvent | PointerEvent,
 		formConfig: PopsPanelDeepMenuDetails
-	) => boolean | void;
+	) => boolean | void | Promise<boolean | void>;
 	/**
 	 * 菜单配置
 	 */

package/src/components/panel/formsType.ts

@@ -4,7 +4,8 @@ import type { PopsPanelFormsTotalDetails } from "./indexType";
 /**
  * pops.panel的 forms
  */
-export interface PopsPanelFormsDetails extends PopsPanelCommonDetails {
+export interface PopsPanelFormsDetails
+	extends PopsPanelCommonDetails<PopsPanelFormsDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/index.css

@@ -8,8 +8,21 @@
 	--aside-bg-color: #ffffff;
 	--aside-hover-color: rgb(64, 158, 255);
 	--aside-hover-bg-color: rgba(64, 158, 255, 0.1);
-	--container-item-bg-color: #ffffff;
-	--container-title-color: #333;
+
+	--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-padding-top-bottom: 15px;
+	--pops-panel-forms-header-padding-left-right: 10px;
+	--pops-panel-forms-container-item-bg-color: #ffffff;
+	--pops-panel-forms-container-item-title-color: #333;
+	--pops-panel-forms-container-item-border-radius: 6px;
+	--pops-panel-forms-container-item-margin-top-bottom: 10px;
+	--pops-panel-forms-container-item-margin-left-right: var(
+		--pops-panel-forms-margin-left-right
+	);
+	--pops-panel-forms-container-li-padding-top-bottom: 12px;
+	--pops-panel-forms-container-li-padding-left-right: 16px;
 }
 .pops[type-value="panel"] {
 	color: var(--pops-color);
@@ -87,21 +100,29 @@ aside.pops-panel-aside {
 }
 section.pops-panel-container {
 	width: 100%;
-	padding: 10px;
 	overflow: hidden;
+	display: flex;
+	flex-direction: column;
 }
 section.pops-panel-container .pops-panel-container-header-ul,
 section.pops-panel-container .pops-panel-deepMenu-container-header-ul {
 	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	flex: 0 auto;
 }
 section.pops-panel-container .pops-panel-container-header-ul li {
+	text-align: left;
 	display: flex;
 	justify-content: flex-start !important;
-	text-align: left;
+	margin: 0px !important;
+	padding: var(--pops-panel-forms-header-padding-top-bottom)
+		calc(
+			var(--pops-panel-forms-margin-left-right) +
+				var(--pops-panel-forms-container-li-padding-left-right)
+		);
 }
 section.pops-panel-container > ul:last-child {
 	overflow: auto;
-	height: calc(100% - 45px);
+	flex: 1;
 }
 aside.pops-panel-aside ul li {
 	margin: 6px 8px;
@@ -117,31 +138,42 @@ aside.pops-panel-aside ul li:hover {
 	color: var(--aside-hover-color);
 	background: var(--aside-hover-bg-color);
 }
-section.pops-panel-container > ul li {
+section.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin: 10px 20px;
+	margin: var(--pops-panel-forms-margin-top-bottom)
+		calc(
+			var(--pops-panel-forms-margin-left-right) +
+				var(--pops-panel-forms-margin-left-right)
+		);
 	gap: 10px;
 }
 section.pops-panel-container .pops-panel-forms-container-item-header-text {
-	color: var(--container-title-color);
+	margin: 10px;
+	margin-left: calc(
+		var(--pops-panel-forms-margin-left-right) +
+			var(--pops-panel-forms-container-li-padding-left-right)
+	);
+	font-size: 0.9em;
+	text-align: left;
+	color: var(--pops-panel-forms-container-item-title-color);
 }
 section.pops-panel-container li.pops-panel-forms-container-item {
 	display: block;
-	margin-top: 20px;
 }
 section.pops-panel-container .pops-panel-forms-container-item ul {
-	border-radius: 6px;
-	background: var(--container-item-bg-color);
-	margin: 10px;
+	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 {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 12px 0px;
-	margin: 0px 16px;
+	padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;
+	margin: 0px var(--pops-panel-forms-container-li-padding-left-right);
 	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
 	text-align: left;
 }
@@ -149,19 +181,14 @@ section.pops-panel-container
 	.pops-panel-forms-container-item
 	ul
 	li.pops-panel-deepMenu-nav-item {
-	padding: 12px 16px;
+	padding: var(--pops-panel-forms-container-li-padding-top-bottom)
+		var(--pops-panel-forms-container-li-padding-left-right);
 	margin: 0px;
 	border-bottom: 0;
 }
 section.pops-panel-container .pops-panel-forms-container-item ul li:last-child {
 	border: 0;
 }
-section.pops-panel-container .pops-panel-forms-container-item > div {
-	margin: 10px;
-	margin-left: 20px;
-	font-size: 0.9em;
-	text-align: left;
-}
 /* 主文字 */
 /*section.pops-panel-container
 	.pops-panel-forms-container-item
@@ -183,9 +210,10 @@ section.pops-panel-container
 /* 折叠面板 */
 
 section.pops-panel-container .pops-panel-forms-fold {
-	border-radius: 6px;
-	background: var(--container-item-bg-color);
-	margin: 10px 30px;
+	border-radius: var(--pops-panel-forms-container-item-border-radius);
+	background: var(--pops-panel-forms-container-item-bg-color);
+	margin: var(--pops-panel-forms-margin-top-bottom)
+		var(--pops-panel-forms-margin-left-right);
 }
 section.pops-panel-container
 	.pops-panel-forms-fold
@@ -194,8 +222,8 @@ section.pops-panel-container
 	align-items: center;
 	fill: #6c6c6c;
 	justify-content: space-between;
-	margin: 0px 16px !important;
-	padding: 12px 0px !important;
+	margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;
+	padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;
 }
 section.pops-panel-container
 	.pops-panel-forms-fold[data-fold-enable]
@@ -233,22 +261,23 @@ section.pops-panel-container
 /* 姑且认为小于600px的屏幕为移动端 */
 @media (max-width: 600px) {
 	/* 兼容移动端CSS */
+	.pops[type-value="panel"] {
+		--pops-panel-forms-margin-left-right: 10px;
+	}
 	.pops[type-value="panel"] {
 		width: 92%;
 		width: 92vw;
-	}
-	.pops[type-value="panel"] section.pops-panel-container {
-		padding: 10px 0px;
+		width: 92dvw;
 	}
 	.pops[type-value="panel"] .pops-panel-content aside.pops-panel-aside {
-		width: 20%;
+		max-width: 20%;
 	}
 	.pops[type-value="panel"]
 		section.pops-panel-container
 		.pops-panel-forms-container-item
 		> div {
-		margin: 5px 10px;
 		text-align: left;
+		--pops-panel-forms-margin-left-right: 0px;
 	}
 	.pops[type-value="panel"]
 		section.pops-panel-container
@@ -1022,11 +1051,16 @@ section.pops-panel-container
 	align-items: center;
 	width: -webkit-fill-available;
 	width: -moz-available;
-	padding: 10px 10px 10px 5px;
+	padding: var(--pops-panel-forms-header-padding-top-bottom)
+		calc(
+			var(--pops-panel-forms-margin-left-right) +
+				var(--pops-panel-forms-container-li-padding-left-right) -
+				var(--pops-panel-forms-header-icon-size)
+		);
 }
 .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {
-	width: 20px;
-	height: 20px;
+	width: var(--pops-panel-forms-header-icon-size);
+	height: var(--pops-panel-forms-header-icon-size);
 	display: flex;
 	align-items: center;
 	cursor: pointer;

package/src/components/panel/inputType.ts

@@ -3,7 +3,8 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 input
  */
-export interface PopsPanelInputDetails extends PopsPanelCommonDetails {
+export interface PopsPanelInputDetails
+	extends PopsPanelCommonDetails<PopsPanelInputDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/ownType.ts

@@ -4,7 +4,8 @@ import type { PopsPanelCommonDetails } from "./commonType";
  * pops.panel的 own
  * 自定义的
  */
-export interface PopsPanelOwnDetails extends PopsPanelCommonDetails {
+export interface PopsPanelOwnDetails
+	extends PopsPanelCommonDetails<PopsPanelOwnDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/selectMultipleType.ts

@@ -26,7 +26,7 @@ export interface PopsPanelSelectMultipleDataOption<T> {
  * pops.panel的 select
  */
 export interface PopsPanelSelectMultipleDetails<T = any>
-	extends PopsPanelCommonDetails {
+	extends PopsPanelCommonDetails<PopsPanelSelectMultipleDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/selectType.ts

@@ -4,7 +4,7 @@ import type { PopsPanelCommonDetails } from "./commonType";
  * pops.panel的 select
  */
 export interface PopsPanelSelectDetails<T = any>
-	extends PopsPanelCommonDetails {
+	extends PopsPanelCommonDetails<PopsPanelSelectDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/sliderType.ts

@@ -3,7 +3,8 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 slider
  */
-export interface PopsPanelSliderDetails extends PopsPanelCommonDetails {
+export interface PopsPanelSliderDetails
+	extends PopsPanelCommonDetails<PopsPanelSliderDetails> {
 	/**
 	 * （可选）className属性
 	 */

package/src/components/panel/switchType.ts

@@ -3,7 +3,8 @@ import type { PopsPanelCommonDetails } from "./commonType";
 /**
  * pops.panel的 switch
  */
-export interface PopsPanelSwitchDetails extends PopsPanelCommonDetails {
+export interface PopsPanelSwitchDetails
+	extends PopsPanelCommonDetails<PopsPanelSwitchDetails> {
 	/**
 	 * （可选）className属性
 	 */