添加cl-form-card

packages/crud/src/components/form-card.tsx

@@ -0,0 +1,43 @@
+import { defineComponent, ref } from "vue";
+import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+
+export default defineComponent({
+	name: "cl-form-card",
+
+	components: {
+		ArrowDown,
+		ArrowUp
+	},
+
+	props: {
+		label: String,
+		isExpand: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	setup(props, { slots }) {
+		const isExpand = ref(props.isExpand);
+
+		async function toExpand() {
+			isExpand.value = !isExpand.value;
+		}
+
+		return () => {
+			return (
+				<div class={["cl-form-card", { "is-expand": isExpand.value }]}>
+					<div class="cl-form-card__header" v-show={props.label} onClick={toExpand}>
+						<span>{props.label}</span>
+
+						<el-icon>
+							<arrow-down v-show={!isExpand.value} />
+							<arrow-up v-show={isExpand.value} />
+						</el-icon>
+					</div>
+					<div class="cl-form-card__container">{slots.default?.()}</div>
+				</div>
+			);
+		};
+	}
+});

packages/crud/src/static/index.scss

@@ -165,7 +165,7 @@
 	}
 
 	.el-select {
-		min-width: 120px;
+		min-width: 100px;
 	}
 }
 
@@ -293,6 +293,13 @@
 				width: 100%;
 			}
 		}
+
+		&.no-label {
+			& > .el-form-item__label {
+				padding: 0;
+				width: 0 !important;
+			}
+		}
 	}
 
 	&-item {
@@ -337,6 +344,12 @@
 			}
 		}
 
+		&__children {
+			.el-form-item {
+				margin-bottom: 18px !important;
+			}
+		}
+
 		.el-table__header tr {
 			line-height: normal;
 		}
@@ -425,6 +438,39 @@
 	}
 }
 
+.cl-form-card {
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 15px;
+		padding: 0 5px;
+	}
+
+	&__container {
+		border: 1px solid transparent;
+		border-top: 1px solid var(--el-border-color);
+		border-radius: 0;
+		transition: all 0.3s;
+		display: grid;
+		grid-template-rows: 0fr;
+
+		.cl-form-item__children {
+			margin: 10px 10px 10px 0px;
+			min-height: 0;
+			overflow: hidden;
+		}
+	}
+
+	&.is-expand {
+		.cl-form-card__container {
+			border: 1px solid var(--el-border-color);
+			border-radius: var(--el-border-radius-base);
+			grid-template-rows: 1fr;
+		}
+	}
+}
+
 .cl-dialog {
 	border-radius: 5px;