@whitesev/pops 2.1.7 → 2.1.9

package/src/components/panel/handlerComponents.ts

@@ -34,9 +34,13 @@ import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
 export const PanelHandlerComponents = () => {
 	return {
 		/**
-		 * 左侧的ul容器
+		 * 左侧上方的的ul容器
 		 */
 		asideULElement: null as any as HTMLUListElement,
+		/**
+		 * 左侧下方的ul容器
+		 */
+		asideBottomULElement: null as any as HTMLUListElement,
 		/**
 		 * 右侧主内容的顶部文字ul容器
 		 */
@@ -71,31 +75,48 @@ export const PanelHandlerComponents = () => {
 				$contentSectionContainer: HTMLElement;
 			};
 		}) {
+			const PopsType = "panel";
 			this.$el = {
 				...details.$el,
 			};
 
 			this.asideULElement =
-				this.$el.$contentAside.querySelector<HTMLUListElement>("ul")!;
+				this.$el.$contentAside.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-aside-top-container`
+				)!;
+			this.asideBottomULElement =
+				this.$el.$contentAside.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-aside-bottom-container`
+				)!;
 			this.sectionContainerHeaderULElement =
-				this.$el.$contentSectionContainer.querySelectorAll<HTMLUListElement>(
-					"ul"
-				)[0];
+				this.$el.$contentSectionContainer.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-container-header-ul`
+				)!;
 			this.sectionContainerULElement =
-				this.$el.$contentSectionContainer.querySelectorAll<HTMLUListElement>(
-					"ul"
-				)[1];
+				this.$el.$contentSectionContainer.querySelector<HTMLUListElement>(
+					`ul.pops-${PopsType}-container-main-ul`
+				)!;
 			/**
 			 * 默认点击的左侧容器项
 			 */
-			let $asideDefaultItemElement: HTMLLIElement | null = null;
+			let $defaultAsideItem: HTMLLIElement | null = null;
 			/** 是否滚动到默认位置（第一个项） */
 			let isScrollToDefaultView = false;
+			// 初始化配置
 			details.config.content.forEach((asideItemConfig) => {
 				let $asideLiElement = this.createAsideItem(asideItemConfig);
 				this.setAsideItemClickEvent($asideLiElement, asideItemConfig);
-				this.asideULElement.appendChild($asideLiElement);
-				if ($asideDefaultItemElement == null) {
+				// 是否处于底部
+				let isBottom =
+					typeof asideItemConfig.isBottom === "function"
+						? asideItemConfig.isBottom()
+						: asideItemConfig.isBottom;
+				if (isBottom) {
+					this.asideBottomULElement.appendChild($asideLiElement);
+				} else {
+					this.asideULElement.appendChild($asideLiElement);
+				}
+				if ($defaultAsideItem == null) {
 					let flag = false;
 					if (typeof asideItemConfig.isDefault === "function") {
 						flag = Boolean(asideItemConfig.isDefault());
@@ -103,7 +124,7 @@ export const PanelHandlerComponents = () => {
 						flag = Boolean(asideItemConfig.isDefault);
 					}
 					if (flag) {
-						$asideDefaultItemElement = $asideLiElement;
+						$defaultAsideItem = $asideLiElement;
 						isScrollToDefaultView = Boolean(
 							asideItemConfig.scrollToDefaultView
 						);
@@ -119,19 +140,15 @@ export const PanelHandlerComponents = () => {
 			});
 
 			/* 点击左侧列表 */
-			if (
-				$asideDefaultItemElement == null &&
-				this.asideULElement.children.length
-			) {
+			if ($defaultAsideItem == null && this.asideULElement.children.length) {
 				/* 默认第一个 */
-				$asideDefaultItemElement = this.asideULElement
-					.children[0] as HTMLLIElement;
+				$defaultAsideItem = <HTMLLIElement>this.asideULElement.children[0];
 			}
-			if ($asideDefaultItemElement) {
+			if ($defaultAsideItem) {
 				/* 点击选择的那一项 */
-				$asideDefaultItemElement.click();
+				$defaultAsideItem.click();
 				if (isScrollToDefaultView) {
-					$asideDefaultItemElement?.scrollIntoView();
+					$defaultAsideItem?.scrollIntoView();
 				}
 			} else {
 				console.error("pops.panel：左侧容器没有项");
@@ -239,11 +256,28 @@ export const PanelHandlerComponents = () => {
 			let $li = document.createElement("li");
 			$li.id = asideConfig.id;
 			Reflect.set($li, "__forms__", asideConfig.forms);
-			PopsSafeUtils.setSafeHTML($li, asideConfig.title);
+			let title =
+				typeof asideConfig.title === "function"
+					? asideConfig.title()
+					: asideConfig.title;
+			PopsSafeUtils.setSafeHTML($li, title);
 			/* 处理className */
 			this.setElementClassName($li, asideConfig.className);
 			this.setElementAttributes($li, asideConfig.attributes);
 			this.setElementProps($li, asideConfig.props);
+			/** 禁用左侧项的hover的CSS样式的类名 */
+			const disableAsideItemHoverCSSClassName =
+				"pops-panel-disabled-aside-hover-css";
+			/** 是否禁用左侧项的hover的CSS样式 */
+			let disableAsideItemHoverCSS =
+				typeof asideConfig.disableAsideItemHoverCSS === "function"
+					? asideConfig.disableAsideItemHoverCSS()
+					: asideConfig.disableAsideItemHoverCSS;
+			if (disableAsideItemHoverCSS) {
+				$li.classList.add(disableAsideItemHoverCSSClassName);
+			} else {
+				$li.classList.remove(disableAsideItemHoverCSSClassName);
+			}
 			return $li;
 		},
 		/**
@@ -2977,28 +3011,47 @@ export const PanelHandlerComponents = () => {
 			asideLiElement: HTMLElement,
 			asideConfig: PopsPanelContentConfig
 		) {
-			const that = this;
 			popsDOMUtils.on<MouseEvent | PointerEvent>(
 				asideLiElement,
 				"click",
-				void 0,
-				(event) => {
+				async (event) => {
+					if (typeof asideConfig.clickFirstCallback === "function") {
+						let clickFirstCallbackResult = await asideConfig.clickFirstCallback(
+							event,
+							this.sectionContainerHeaderULElement,
+							this.sectionContainerULElement
+						);
+						if (
+							typeof clickFirstCallbackResult === "boolean" &&
+							!clickFirstCallbackResult
+						) {
+							return;
+						}
+					}
 					this.clearContainer();
-					let rightContainerFormConfig = Reflect.get(
+					let rightContainerFormConfig: PopsPanelContentConfig[] = Reflect.get(
 						asideLiElement,
 						"__forms__"
-					) as PopsPanelContentConfig[];
+					);
 
 					Reflect.set(
-						that.$el.$contentSectionContainer,
+						this.$el.$contentSectionContainer,
 						"__formConfig__",
 						rightContainerFormConfig
 					);
-					popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
+					popsDOMUtils.cssShow(this.$el.$contentSectionContainer);
 					this.clearAsideItemIsVisited();
 					this.setAsideItemIsVisited(asideLiElement);
 					/* 顶部标题栏，存在就设置 */
-					let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
+					let title =
+						typeof asideConfig.title === "function"
+							? asideConfig.title()
+							: asideConfig.title;
+					let headerTitleText =
+						typeof asideConfig.headerTitle === "function"
+							? asideConfig.headerTitle()
+							: asideConfig.headerTitle;
+					headerTitleText = headerTitleText ?? title;
 					if (
 						typeof headerTitleText === "string" &&
 						headerTitleText.trim() !== ""
@@ -3015,15 +3068,21 @@ export const PanelHandlerComponents = () => {
 						this.createSectionContainerItem_forms(formConfig);
 					});
 
-					if (typeof asideConfig.callback === "function") {
+					if (typeof asideConfig.clickCallback === "function") {
 						/* 执行回调 */
-						asideConfig.callback(
+						let asideClickCallbackResult = await asideConfig.clickCallback(
 							event,
 							this.sectionContainerHeaderULElement,
 							this.sectionContainerULElement
 						);
+						if (
+							typeof asideClickCallbackResult === "boolean" &&
+							!asideClickCallbackResult
+						) {
+							return;
+						}
 					}
-					that.triggerRenderRightContainer(that.$el.$contentSectionContainer);
+					this.triggerRenderRightContainer(this.$el.$contentSectionContainer);
 				}
 			);
 		},

package/src/components/panel/index.css

@@ -1,13 +1,11 @@
 .pops[type-value="panel"] {
-	--el-disabled-text-color: #a8abb2;
-	--el-disabled-bg-color: #f5f7fa;
-	--el-disabled-border-color: #e4e7ed;
 	--pops-bg-color: #f2f2f2;
 	--pops-color: #333333;
-	--title-bg-color: #ffffff;
-	--aside-bg-color: #ffffff;
-	--aside-hover-color: rgb(64, 158, 255);
-	--aside-hover-bg-color: rgba(64, 158, 255, 0.1);
+	--panel-title-bg-color: #ffffff;
+
+	--panel-aside-bg-color: #ffffff;
+	--panel-aside-hover-color: rgb(64, 158, 255);
+	--panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);
 
 	--pops-panel-forms-margin-top-bottom: 10px;
 	--pops-panel-forms-margin-left-right: 20px;
@@ -32,42 +30,13 @@
 	);
 	--pops-panel-forms-container-li-padding-top-bottom: 12px;
 	--pops-panel-forms-container-li-padding-left-right: 16px;
-
-	--pops-panel-components-input-text-color: #000000;
-	--pops-panel-components-input-text-bg-color: transparent;
-	--pops-panel-components-input-bd-color: #dcdfe6;
-	--pops-panel-components-input-bg-color: #ffffff;
-	--pops-panel-components-input-hover-bd-color: #c0c4cc;
-	--pops-panel-components-input-focus-bd-color: #409eff;
-	--pops-panel-components-input-suffix-color: #a8abb2;
-
-	--pops-panel-components-textarea-text-color: #000000;
-	--pops-panel-components-textarea-text-bg-color: #ffffff;
-	--pops-panel-components-textarea-bd-color: #dcdfe6;
-	--pops-panel-components-textarea-hover-bd-color: #c0c4cc;
-	--pops-panel-components-textarea-focus-bd-color: #409eff;
-
-	--pops-panel-components-select-text-color: #000000;
-	--pops-panel-components-select-bd-color: rgb(
-		184,
-		184,
-		184,
-		var(--pops-bd-opacity)
-	);
-	--pops-panel-components-select-bg-color: rgb(
-		255,
-		255,
-		255,
-		var(--pops-bg-opacity)
-	);
-	--pops-panel-components-select-hover-bd-color: #c0c4cc;
 }
 .pops[type-value="panel"] {
 	color: var(--pops-color);
 	background: var(--pops-bg-color);
 }
 .pops[type-value] .pops-panel-title {
-	background: var(--title-bg-color);
+	background: var(--panel-title-bg-color);
 }
 
 /* ↓panel的CSS↓ */
@@ -78,9 +47,12 @@ aside.pops-panel-aside {
 	max-width: 200px;
 	min-width: 100px;
 	height: 100%;
-	background: var(--aside-bg-color);
-	border-right: 1px solid var(--aside-bg-color);
+	background: var(--panel-aside-bg-color);
+	border-right: 1px solid var(--panel-aside-bg-color);
 	font-size: 0.9em;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 aside.pops-panel-aside {
 	user-select: none;
@@ -134,9 +106,9 @@ aside.pops-panel-aside ul li {
 	justify-content: flex-start;
 }
 aside.pops-panel-aside .pops-is-visited,
-aside.pops-panel-aside ul li:hover {
-	color: var(--aside-hover-color);
-	background: var(--aside-hover-bg-color);
+aside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {
+	color: var(--panel-aside-hover-color);
+	background: var(--panel-aside-hover-bg-color);
 }
 section.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {
 	display: flex;
@@ -197,9 +169,9 @@ section.pops-panel-container .pops-panel-item-left-text {
 }
 
 /* 左侧的主文字 */
-section.pops-panel-container .pops-panel-item-left-main-text {
-	/*line-height: 2;*/
-}
+/*section.pops-panel-container .pops-panel-item-left-main-text {
+	
+}*/
 /* 左侧的描述文字 */
 section.pops-panel-container .pops-panel-item-left-desc-text {
 	font-size: var(--pops-panel-forms-container-item-left-desc-text-size);
@@ -316,6 +288,25 @@ section.pops-panel-container
 	}
 }
 /* switch的CSS */
+.pops-panel-switch {
+	--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
+	--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
+	--panel-switch-circle-color: #dcdfe6;
+	--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+	--panel-switch-checked-circle-color: #409eff;
+	--panel-switch-checked-core-bd-color: rgb(
+		64,
+		158,
+		255,
+		var(--pops-bd-opacity)
+	);
+	--panel-switch-checked-core-bg-color: rgb(
+		64,
+		158,
+		255,
+		var(--pops-bg-opacity)
+	);
+}
 .pops-panel-switch {
 	display: inline-flex;
 	flex-direction: row-reverse;
@@ -353,11 +344,11 @@ section.pops-panel-container
 	align-items: center;
 	min-width: 40px;
 	height: 20px;
-	border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));
+	border: 1px solid var(--panel-switch-core-bd-color);
 	outline: 0;
 	border-radius: 10px;
 	box-sizing: border-box;
-	background: rgb(220, 223, 230, var(--pops-bg-opacity));
+	background: var(--panel-switch-core-bg-color);
 	cursor: pointer;
 	transition: border-color 0.3s, background-color 0.3s;
 }
@@ -368,19 +359,19 @@ section.pops-panel-container
 	transition: all 0.3s;
 	width: 16px;
 	height: 16px;
-	background-color: rgb(255, 255, 255, var(--pops-bg-opacity));
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	color: rgb(220, 223, 230);
+	background-color: var(--panel-switch-circle-bg-color);
+	color: var(--panel-switch-circle-color);
 }
 .pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {
-	border-color: rgb(64, 158, 255, var(--pops-bd-opacity));
-	background-color: rgb(64, 158, 255, var(--pops-bg-opacity));
+	border-color: var(--panel-switch-checked-core-bd-color);
+	background-color: var(--panel-switch-checked-core-bg-color);
 }
 .pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {
 	left: calc(100% - 17px);
-	color: rgb(64, 158, 255);
+	color: var(--panel-switch-checked-circle-color);
 }
 /* switch的CSS */
 
@@ -661,6 +652,19 @@ section.pops-panel-container
 /* slider的CSS */
 
 /* input的CSS */
+.pops-panel-input {
+	--el-disabled-text-color: #a8abb2;
+	--el-disabled-bg-color: #f5f7fa;
+	--el-disabled-border-color: #e4e7ed;
+
+	--pops-panel-components-input-text-color: #000000;
+	--pops-panel-components-input-text-bg-color: transparent;
+	--pops-panel-components-input-bd-color: #dcdfe6;
+	--pops-panel-components-input-bg-color: #ffffff;
+	--pops-panel-components-input-hover-bd-color: #c0c4cc;
+	--pops-panel-components-input-focus-bd-color: #409eff;
+	--pops-panel-components-input-suffix-color: #a8abb2;
+}
 .pops-panel-input {
 	display: flex;
 	align-items: center;
@@ -778,6 +782,13 @@ section.pops-panel-container
 /* input的CSS */
 
 /* textarea的CSS */
+.pops-panel-textarea {
+	--pops-panel-components-textarea-text-color: #000000;
+	--pops-panel-components-textarea-text-bg-color: #ffffff;
+	--pops-panel-components-textarea-bd-color: #dcdfe6;
+	--pops-panel-components-textarea-hover-bd-color: #c0c4cc;
+	--pops-panel-components-textarea-focus-bd-color: #409eff;
+}
 .pops-panel-textarea textarea {
 	width: 100%;
 	/*vertical-align: bottom;*/
@@ -817,6 +828,22 @@ section.pops-panel-container
 /* textarea的CSS */
 
 /* select的CSS */
+.pops-panel-select {
+	--pops-panel-components-select-text-color: #000000;
+	--pops-panel-components-select-bd-color: rgb(
+		184,
+		184,
+		184,
+		var(--pops-bd-opacity)
+	);
+	--pops-panel-components-select-bg-color: rgb(
+		255,
+		255,
+		255,
+		var(--pops-bg-opacity)
+	);
+	--pops-panel-components-select-hover-bd-color: #c0c4cc;
+}
 .pops-panel-select {
 	border: 0;
 }
@@ -1099,8 +1126,8 @@ section.pops-panel-container
 	.pops[type-value="panel"] {
 		--pops-bg-color: #000000;
 		--pops-color: #f2f2f2;
-		--title-bg-color: #000000;
-		--aside-bg-color: #262626;
+		--panel-title-bg-color: #000000;
+		--panel-aside-bg-color: #262626;
 		--pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;
 		--pops-panel-forms-container-item-bg-color: #262626;
 		--pops-panel-forms-container-item-title-color: #c1c1c1;
@@ -1111,20 +1138,35 @@ section.pops-panel-container
 			51,
 			var(--pops-bd-opacity)
 		);
+	}
+	.pops[type-value="panel"]
+		.pops-panel-deepMenu-container
+		.pops-panel-deepMenu-container-left-arrow-icon {
+		fill: #f2f2f2;
+	}
 
-		--pops-panel-components-input-text-color: #f2f2f2;
-		--pops-panel-components-input-bd-color: #4f5052;
-		--pops-panel-components-input-bg-color: #141414;
-		--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-textarea-text-color: #f2f2f2;
-		--pops-panel-components-textarea-text-bg-color: #141414;
-		--pops-panel-components-textarea-bd-color: #4f5052;
-		--pops-panel-components-textarea-hover-bd-color: #6f7175;
-		--pops-panel-components-textarea-focus-bd-color: #409eff;
-
+	/* switch的CSS */
+	.pops-panel-switch {
+		--panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));
+		--panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));
+		--panel-switch-circle-color: #dcdfe6;
+		--panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+		--panel-switch-checked-circle-color: #409eff;
+		--panel-switch-checked-core-bd-color: rgb(
+			64,
+			158,
+			255,
+			var(--pops-bd-opacity)
+		);
+		--panel-switch-checked-core-bg-color: rgb(
+			64,
+			158,
+			255,
+			var(--pops-bg-opacity)
+		);
+	}
+	/* select的CSS */
+	.pops-panel-select {
 		--pops-panel-components-select-text-color: #f2f2f2;
 		--pops-panel-components-select-bd-color: rgb(
 			51,
@@ -1134,12 +1176,7 @@ section.pops-panel-container
 		);
 		--pops-panel-components-select-bg-color: #141414;
 	}
-	.pops[type-value="panel"]
-		.pops-panel-deepMenu-container
-		.pops-panel-deepMenu-container-left-arrow-icon {
-		fill: #f2f2f2;
-	}
-
+	/* select-multiple的CSS*/
 	.pops-panel-select-multiple {
 		--el-fill-color-blank: #141414;
 		--el-border-color: #4c4d4f;
@@ -1153,7 +1190,29 @@ section.pops-panel-container
 		--el-color-primary: #409eff;
 		--el-color-white: #ffffff;
 	}
+	/* select-multiple的CSS*/
 	.pops-panel-select-multiple .el-tag {
 		--el-color-info-light-9: #202121;
 	}
+	/* slider的CSS */
+	.pops-slider {
+		--pops-slider-border-color-light: #414243;
+	}
+	/* input的CSS */
+	.pops-panel-input {
+		--pops-panel-components-input-text-color: #f2f2f2;
+		--pops-panel-components-input-bd-color: #4f5052;
+		--pops-panel-components-input-bg-color: #141414;
+		--pops-panel-components-input-hover-bd-color: #6f7175;
+		--pops-panel-components-input-focus-bd-color: #409eff;
+		--pops-panel-components-input-suffix-color: #a8abb2;
+	}
+	/* textarea的CSS */
+	.pops-panel-textarea {
+		--pops-panel-components-textarea-text-color: #f2f2f2;
+		--pops-panel-components-textarea-text-bg-color: #141414;
+		--pops-panel-components-textarea-bd-color: #4f5052;
+		--pops-panel-components-textarea-hover-bd-color: #6f7175;
+		--pops-panel-components-textarea-focus-bd-color: #409eff;
+	}
 }

package/src/components/panel/index.ts

@@ -25,13 +25,34 @@ export const PopsPanel = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			PopsCSS.index,
-			PopsCSS.ninePalaceGridPosition,
-			PopsCSS.scrollbar,
-			PopsCSS.button,
-			PopsCSS.anim,
-			PopsCSS.common,
-			PopsCSS.panelCSS,
+			{
+				name: "index",
+				css: PopsCSS.index,
+			},
+			{
+				name: "ninePalaceGridPosition",
+				css: PopsCSS.ninePalaceGridPosition,
+			},
+			{
+				name: "scrollbar",
+				css: PopsCSS.scrollbar,
+			},
+			{
+				name: "button",
+				css: PopsCSS.button,
+			},
+			{
+				name: "anim",
+				css: PopsCSS.anim,
+			},
+			{
+				name: "common",
+				css: PopsCSS.common,
+			},
+			{
+				name: "panelCSS",
+				css: PopsCSS.panelCSS,
+			},
 		]);
 
 		// 先把z-index提取出来
@@ -54,15 +75,16 @@ export const PopsPanel = {
 			};${headerStyle}">${
 				config.title.html
 					? config.title.text
-					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
+					: `<p pops class="pops-${PopsType}-title-text" class="pops-${PopsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
 			<div class="pops-content pops-${PopsType}-content">
 				<aside class="pops-${PopsType}-aside">
-					<ul></ul>
+					<ul class="pops-${PopsType}-aside-top-container"></ul>
+					<ul class="pops-${PopsType}-aside-bottom-container"></ul>
 				</aside>
 				<section class="pops-${PopsType}-container">
-					<ul class="pops-panel-container-header-ul"></ul>
-					<ul></ul>
+					<ul class="pops-${PopsType}-container-header-ul"></ul>
+					<ul class="pops-${PopsType}-container-main-ul"></ul>
 				</section>
 			</div>`,
 			"",

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

@@ -13,9 +13,13 @@ export interface PopsPanelButtonDetails
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

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

@@ -17,9 +17,13 @@ export interface PopsPanelDeepMenuDetails
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

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

@@ -13,9 +13,13 @@ export interface PopsPanelFormsDetails
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

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

@@ -12,9 +12,13 @@ export interface PopsPanelInputDetails
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */

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

@@ -14,9 +14,13 @@ export interface PopsPanelSelectDetails<T = any>
 	/**
 	 * （可选）自定义元素属性
 	 */
-	attributes?: {
-		[key: string]: any;
-	};
+	attributes?:
+		| {
+				[key: string]: any;
+		  }
+		| {
+				[key: string]: any;
+		  }[];
 	/**
 	 * （可选）自定义属性
 	 */