a

src/components/SearchForm/index.vue

@@ -26,20 +26,12 @@
 						</div>
 					</el-form-item>
 					<slot :visible="true" :expanded="isExpanded"></slot>
-					<!-- 收起时：查询/重置在首行 -->
-					<div v-show="!isExpanded" class="actions-outside">
-						<slot name="actions"></slot>
+					<!-- 折叠区：收起时隐藏，display:contents 不破坏表单行内流 -->
+					<div v-if="hasCollapsibleItems" v-show="isExpanded" class="collapse-visibility">
+						<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
 					</div>
-					<!-- 折叠区：展开时内部再放一份查询/重置，位置在更多筛选项之后 -->
-					<div v-if="hasCollapsibleItems" class="collapse-grid" :class="{ 'is-expanded': isExpanded }">
-						<div class="collapse-grid-inner">
-							<div class="collapse-grid-cell">
-								<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
-								<div v-show="isExpanded" class="actions-inside">
-									<slot name="actions"></slot>
-								</div>
-							</div>
-						</div>
+					<div class="search-form__actions">
+						<slot name="actions" :expanded="isExpanded"></slot>
 					</div>
 					<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
 						<slot :visible="false" :expanded="true"></slot>
@@ -218,7 +210,6 @@ defineExpose({
 	:deep(.el-form-item__content) {
 		margin-left: 0 !important;
 	}
-	margin-right: 16px;
 	margin-bottom: 18px;
 }
 
@@ -280,40 +271,21 @@ defineExpose({
 	}
 
 	:deep(.el-form-item:not(:has(.el-button))) {
-		margin-right: 16px;
+		margin-right: 15px;
 	}
 
-	/* grid 0fr→1fr 高度过渡，ease-out 收尾不弹跳 */
-	.collapse-grid {
-		display: grid;
-		grid-template-rows: 0fr;
-		transition: grid-template-rows 0.26s cubic-bezier(0.33, 1, 0.68, 1);
-		contain: layout;
-		&.is-expanded {
-			grid-template-rows: 1fr;
-		}
-	}
-	.collapse-grid-inner {
-		overflow: hidden;
-		min-height: 0;
-		backface-visibility: hidden;
-	}
-	.collapse-grid-cell {
-		overflow: hidden;
-		min-height: 0;
-		opacity: 0;
-		/* 收起时立即隐藏，不出现输入框慢慢消失 */
-		transition: opacity 0s;
-	}
-	.collapse-grid.is-expanded .collapse-grid-cell {
-		opacity: 1;
-		/* 仅展开时淡入 */
-		transition: opacity 0.12s ease-out;
-	}
-	.actions-outside,
-	.actions-inside {
+	/* 折叠区收起时隐藏，展开时 display:contents 不破坏表单行内流 */
+	.collapse-visibility {
 		display: contents;
 	}
+
+	/* 查询/重置按钮区：表单项 margin-right 为 0 */
+	.search-form__actions {
+		display: contents;
+		:deep(.el-form-item) {
+			margin-right: 0 !important;
+		}
+	}
 }
 </style>