初始化拉取，原文件名：admin-plus-webpack5

library/components/VabQueryForm/components/VabQueryFormBottomPanel.vue

@@ -0,0 +1,7 @@
+<template>
+    <el-col :span="24">
+        <div class="bottom-panel">
+            <slot />
+        </div>
+    </el-col>
+</template>

library/components/VabQueryForm/components/VabQueryFormLeftPanel.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+    defineProps({
+        span: {
+            type: Number,
+            default: 14,
+        },
+    })
+</script>
+
+<template>
+    <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
+        <div class="left-panel">
+            <slot />
+        </div>
+    </el-col>
+</template>

library/components/VabQueryForm/components/VabQueryFormRightPanel.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+    defineProps({
+        span: {
+            type: Number,
+            default: 10,
+        },
+    })
+</script>
+
+<template>
+    <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
+        <div class="right-panel">
+            <slot />
+        </div>
+    </el-col>
+</template>

library/components/VabQueryForm/components/VabQueryFormTopPanel.vue

@@ -0,0 +1,7 @@
+<template>
+    <el-col :span="24">
+        <div class="top-panel">
+            <slot />
+        </div>
+    </el-col>
+</template>

library/components/VabQueryForm/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-row class="vab-query-form" :gutter="0">
+        <slot />
+    </el-row>
+</template>
+
+<style lang="scss" scoped>
+    @use 'sass:math';
+    @mixin panel {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: center;
+        align-items: center;
+        justify-content: flex-start;
+        min-height: $base-input-height;
+        margin: 0 0 #{math.div($base-margin, 2)} 0;
+        .el-form-item__content {
+            display: flex;
+            align-items: center;
+        }
+
+        > .el-button {
+            margin: 0 10px #{math.div($base-margin, 2)} 0 !important;
+        }
+    }
+
+    .vab-query-form {
+        :deep() {
+            .el-form-item:first-child {
+                margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
+            }
+
+            .el-form-item + .el-form-item {
+                margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
+
+                .el-button {
+                    margin: 0 0 0 10px !important;
+                }
+            }
+
+            .top-panel {
+                @include panel;
+            }
+
+            .bottom-panel {
+                @include panel;
+                border-top: 1px solid #dcdfe6;
+            }
+
+            .left-panel {
+                @include panel;
+            }
+
+            .right-panel {
+                @include panel;
+                justify-content: flex-end;
+            }
+        }
+    }
+</style>