优化

src/shared/components/QueryToolbar.vue

@@ -40,10 +40,12 @@ const props = withDefaults(defineProps<{
   searchText?: string
   resetText?: string
   searchOnReset?: boolean
+  loading?: boolean
 }>(), {
   searchText: '查询',
   resetText: '重置',
   searchOnReset: true,
+  loading: false,
 })
 
 const model = defineModel<QueryModel>({ required: true })
@@ -140,10 +142,12 @@ function resetValue(field: QueryField): QueryValue {
 }
 
 function search() {
+  if (props.loading) return
   emit('search', model.value)
 }
 
 function reset() {
+  if (props.loading) return
   const next = { ...model.value }
   for (const field of props.fields) next[field.key] = resetValue(field)
   model.value = next
@@ -151,6 +155,11 @@ function reset() {
   if (props.searchOnReset) emit('search', next)
 }
 
+function searchFromTextInput(event: KeyboardEvent) {
+  if (event.isComposing || event.repeat) return
+  search()
+}
+
 defineExpose({ search, reset })
 </script>
 
@@ -175,6 +184,7 @@ defineExpose({ search, reset })
           clearable
           v-bind="field.props"
           @update:model-value="updateField(field.key, $event)"
+          @keyup.enter.exact="searchFromTextInput"
           >
             <template #prefix><Search :size="16" /></template>
           </el-input>
@@ -203,8 +213,8 @@ defineExpose({ search, reset })
           />
         </div>
         <div v-if="index === orderedFields.length - 1" class="query-toolbar__actions">
-          <el-button type="primary" @click="search"><Search :size="16" />{{ searchText }}</el-button>
-          <el-button @click="reset"><RotateCcw :size="16" />{{ resetText }}</el-button>
+          <el-button type="primary" :loading="loading" @click="search"><Search :size="16" />{{ searchText }}</el-button>
+          <el-button :disabled="loading" @click="reset"><RotateCcw :size="16" />{{ resetText }}</el-button>
           <slot name="actions" />
           <el-popover v-if="preferenceEnabled" placement="bottom-end" :width="340" trigger="click" popper-class="cc-layout-preference-popper">
             <template #reference>
@@ -216,8 +226,8 @@ defineExpose({ search, reset })
       </div>
     </div>
     <div v-if="orderedFields.length === 0" class="query-toolbar__actions">
-      <el-button type="primary" @click="search"><Search :size="16" />{{ searchText }}</el-button>
-      <el-button @click="reset"><RotateCcw :size="16" />{{ resetText }}</el-button>
+      <el-button type="primary" :loading="loading" @click="search"><Search :size="16" />{{ searchText }}</el-button>
+      <el-button :disabled="loading" @click="reset"><RotateCcw :size="16" />{{ resetText }}</el-button>
       <slot name="actions" />
       <el-popover v-if="preferenceEnabled" placement="bottom-end" :width="340" trigger="click" popper-class="cc-layout-preference-popper">
         <template #reference>