admin-web/src/shared/components/QueryToolbar.vue

<script setup lang="ts">
import { computed, inject, ref, watch } from 'vue'
import { Search, RotateCcw, Settings2 } from '@lucide/vue'
import LayoutPreferenceList, { type LayoutPreferenceItem } from './LayoutPreferenceList.vue'
import {
  UI_PREFERENCE_SCOPE,
  readLayoutPreference,
  removeLayoutPreference,
  writeLayoutPreference,
  type LayoutPreferenceSnapshot,
} from '@/shared/utils/uiLayoutPreference'

defineOptions({ inheritAttrs: false })

export type QueryFieldType = 'input' | 'select' | 'date' | 'daterange'
export type QueryValue = string | number | boolean | null | undefined | string[] | number[] | Date | Date[]
export type QueryModel = Record<string, QueryValue>

export interface QueryOption {
  label: string
  value: string | number | boolean
  disabled?: boolean
}

export interface QueryField {
  key: string
  type: QueryFieldType
  label: string
  width?: string | number
  placeholder?: string
  options?: QueryOption[]
  props?: Record<string, unknown>
}

const props = withDefaults(defineProps<{
  ariaLabel: string
  fields: QueryField[]
  availableFields?: QueryField[]
  preferenceKey?: string
  searchText?: string
  resetText?: string
  searchOnReset?: boolean
  loading?: boolean
}>(), {
  searchText: '查询',
  resetText: '重置',
  searchOnReset: true,
  loading: false,
})

const model = defineModel<QueryModel>({ required: true })
const emit = defineEmits<{
  search: [model: QueryModel]
  reset: [model: QueryModel]
}>()
const preferenceScope = inject(UI_PREFERENCE_SCOPE, computed(() => 'anonymous'))
const preference = ref<LayoutPreferenceSnapshot>({ version: 1, order: [], hidden: [] })
const preferenceFields = computed(() => props.availableFields ?? props.fields)
const preferenceFieldKeys = computed(() => preferenceFields.value.map((field) => field.key))
const preferenceEnabled = computed(() => Boolean(props.preferenceKey))

function fieldLabel(field: QueryField) {
  const ariaLabel = field.props?.['aria-label']
  return field.label || (typeof ariaLabel === 'string' ? ariaLabel : '') || field.placeholder || field.key
}

function applyPreference() {
  preference.value = readLayoutPreference(
    'query',
    preferenceScope.value,
    props.preferenceKey || '',
    preferenceFieldKeys.value,
  )
}

watch(
  [preferenceScope, () => props.preferenceKey, () => preferenceFieldKeys.value.join('\u0000')],
  applyPreference,
  { immediate: true },
)

const orderedPreferenceFields = computed(() => {
  const fieldsByKey = new Map(preferenceFields.value.map((field) => [field.key, field]))
  return preference.value.order.flatMap((key) => {
    const field = fieldsByKey.get(key)
    return field ? [field] : []
  })
})
const orderedFields = computed(() => {
  const visibleKeys = new Set(props.fields.map((field) => field.key))
  return orderedPreferenceFields.value.filter((field) => visibleKeys.has(field.key))
})
const preferenceItems = computed<LayoutPreferenceItem[]>(() => orderedPreferenceFields.value.map((field) => ({
  key: field.key,
  label: fieldLabel(field),
  visible: true,
  hideable: false,
  movable: true,
})))

function persistPreference(order: string[]) {
  preference.value = { version: 1, order, hidden: [] }
  writeLayoutPreference('query', preferenceScope.value, props.preferenceKey || '', preference.value)
}

function moveField(key: string, targetIndex: number) {
  const order = [...preference.value.order]
  const currentIndex = order.indexOf(key)
  if (currentIndex < 0) return
  order.splice(currentIndex, 1)
  order.splice(Math.min(Math.max(targetIndex, 0), order.length), 0, key)
  persistPreference(order)
}

function resetPreference() {
  removeLayoutPreference('query', preferenceScope.value, props.preferenceKey || '')
  applyPreference()
}

function updateField(key: string, value: QueryValue) {
  model.value = { ...model.value, [key]: value }
}

function defaultPlaceholder(field: QueryField) {
  if (field.type === 'input') return '请输入关键词'
  if (field.type === 'select') return '全部'
  return field.type === 'daterange' ? '请选择日期范围' : '请选择日期'
}

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' ? [] : ''
}

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
  emit('reset', next)
  if (props.searchOnReset) emit('search', next)
}

function searchFromTextInput(event: KeyboardEvent) {
  if (event.isComposing || event.repeat) return
  search()
}

defineExpose({ search, reset })
</script>

<template>
  <section
    v-bind="$attrs"
    class="query-toolbar"
    :aria-label="ariaLabel"
  >
    <div class="query-toolbar__filters">
      <div
        v-for="(field, index) in orderedFields"
        :key="field.key"
        :class="['query-toolbar__field', { 'query-toolbar__tail': index === orderedFields.length - 1 }]"
        :style="fieldStyle(field)"
      >
        <div class="query-toolbar__control">
          <el-input
          v-if="field.type === 'input'"
          :model-value="model[field.key] as string"
          :placeholder="field.placeholder || defaultPlaceholder(field)"
          clearable
          v-bind="field.props"
          @update:model-value="updateField(field.key, $event)"
          @keyup.enter.exact="searchFromTextInput"
          >
            <template #prefix><Search :size="16" /></template>
          </el-input>
          <el-select
          v-else-if="field.type === 'select'"
          :model-value="model[field.key] as string | number | boolean | undefined"
          :placeholder="field.placeholder || defaultPlaceholder(field)"
          clearable
          v-bind="field.props"
          @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" />
          </el-select>
          <el-date-picker
          v-else
          :model-value="model[field.key] as string | string[] | undefined"
          :type="datePickerType(field)"
          :placeholder="field.placeholder || defaultPlaceholder(field)"
          clearable
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-bind="field.props"
            @update:model-value="updateField(field.key, $event)"
          />
        </div>
        <div v-if="index === orderedFields.length - 1" class="query-toolbar__actions">
          <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>
              <el-button aria-label="调整筛选布局" title="调整筛选布局"><Settings2 :size="16" /></el-button>
            </template>
            <LayoutPreferenceList :items="preferenceItems" @move="moveField" @reset="resetPreference" />
          </el-popover>
        </div>
      </div>
    </div>
    <div v-if="orderedFields.length === 0" class="query-toolbar__actions">
      <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>
          <el-button aria-label="调整筛选布局" title="调整筛选布局"><Settings2 :size="16" /></el-button>
        </template>
        <LayoutPreferenceList :items="preferenceItems" @move="moveField" @reset="resetPreference" />
      </el-popover>
    </div>
  </section>
</template>

<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: 12px 16px; }
.query-toolbar__field, .query-toolbar__control { display: grid; width: var(--query-field-width, 260px); max-width: 100%; min-width: 0; gap: 6px; }
.query-toolbar__field :deep(.el-input), .query-toolbar__field :deep(.el-select), .query-toolbar__field :deep(.el-date-editor) { width: 100%; 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; }
:global(.cc-layout-preference-popper) { max-width: calc(100vw - 24px); }
@media (min-width: 721px) { .query-toolbar__filters { display: contents; } .query-toolbar__tail { display: flex; align-items: flex-end; width: auto; flex: 0 0 auto; gap: 10px; } }
@media (max-width: 720px) { .query-toolbar { align-items: stretch; flex-direction: column; } .query-toolbar__filters { width: 100%; flex-direction: column; } .query-toolbar__field { width: 100%; } .query-toolbar__tail { display: contents; } .query-toolbar__control { 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>