优化

src/shared/components/QueryToolbar.vue

@@ -16,6 +16,7 @@ export interface QueryOption {
 export interface QueryField {
   key: string
   type: QueryFieldType
+  width?: string | number
   placeholder?: string
   options?: QueryOption[]
   props?: Record<string, unknown>
@@ -53,6 +54,12 @@ function datePickerType(field: QueryField): 'date' | 'daterange' {
   return field.type === 'daterange' ? 'daterange' : 'date'
 }
 
+function fieldStyle(field: QueryField) {
+  if (field.width === undefined) return undefined
+  const width = typeof field.width === 'number' ? `${field.width}px` : field.width
+  return { '--query-field-width': width }
+}
+
 function resetValue(field: QueryField): QueryValue {
   return field.type === 'daterange' ? [] : ''
 }
@@ -86,6 +93,7 @@ defineExpose({ search, reset })
           :placeholder="field.placeholder || defaultPlaceholder(field)"
           clearable
           v-bind="field.props"
+          :style="fieldStyle(field)"
           @update:model-value="updateField(field.key, $event)"
         >
           <template #prefix><Search :size="16" /></template>
@@ -96,6 +104,7 @@ defineExpose({ search, reset })
           :placeholder="field.placeholder || defaultPlaceholder(field)"
           clearable
           v-bind="field.props"
+          :style="fieldStyle(field)"
           @update:model-value="updateField(field.key, $event)"
         >
           <el-option v-for="option in field.options || []" :key="String(option.value)" :label="option.label" :value="option.value" :disabled="option.disabled" />
@@ -111,6 +120,7 @@ defineExpose({ search, reset })
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           v-bind="field.props"
+          :style="fieldStyle(field)"
           @update:model-value="updateField(field.key, $event)"
         />
       </template>
@@ -126,7 +136,7 @@ defineExpose({ search, reset })
 <style scoped>
 .query-toolbar { display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: 10px; padding: 16px; border: 1px solid var(--cc-border); background: #fff; }
 .query-toolbar__filters { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 10px; }
-.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__filters :deep(.el-input), .query-toolbar__filters :deep(.el-select), .query-toolbar__filters :deep(.el-date-editor) { width: var(--query-field-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; }
 @media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .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; } }