优化

src/components/common/QueryToolbar.vue

@@ -23,12 +23,14 @@ export interface QueryField {
 }
 
 const props = withDefaults(defineProps<{
+  layout?: 'inline' | 'grid'
   ariaLabel: string
   fields: QueryField[]
   searchText?: string
   resetText?: string
   searchOnReset?: boolean
 }>(), {
+  layout: 'inline',
   searchText: '查询',
   resetText: '重置',
   searchOnReset: true,
@@ -77,6 +79,7 @@ defineExpose({ search, reset })
   <section
     v-bind="$attrs"
     class="query-toolbar"
+    :class="{ 'query-toolbar--grid': layout === 'grid' }"
     :aria-label="ariaLabel"
   >
     <div class="query-toolbar__filters">
@@ -133,5 +136,11 @@ defineExpose({ search, reset })
 .query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: 260px; max-width: 100%; min-width: 0; }
 .query-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
 .query-toolbar__actions :deep(.el-button + .el-button) { margin-left: 0; }
+.query-toolbar--grid { display: block; padding: var(--client-query-padding); border: 1px solid var(--client-border); border-radius: var(--client-radius); }
+.query-toolbar--grid .query-toolbar__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
+.query-toolbar--grid .query-toolbar__field { min-width: 0; }
+.query-toolbar--grid .query-toolbar__field :deep(.el-input), .query-toolbar--grid .query-toolbar__field :deep(.el-select), .query-toolbar--grid .query-toolbar__field :deep(.el-date-editor) { flex: 1; width: 100%; min-width: 0; }
+.query-toolbar--grid .query-toolbar__actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--client-border); }
+@media (max-width: 1200px) { .query-toolbar--grid .query-toolbar__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__field { display: grid; gap: 6px; } .query-toolbar__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: 100%; } .query-toolbar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; } .query-toolbar__actions :deep(.el-button) { min-height: 40px; margin-left: 0; } }
 </style>