Aether/frontend/src/components/common/MultiSelect.vue

<template>
  <div class="relative">
    <button
      ref="triggerElement"
      type="button"
      :class="
        cn(
          'flex h-10 w-full items-center justify-between rounded-lg border bg-background px-3 text-left transition-colors',
          disabled ? 'cursor-not-allowed opacity-60 hover:bg-background' : 'hover:bg-muted/50',
          triggerClass,
        )
      "
      :disabled="disabled"
      @click="toggleDropdown"
    >
      <span
        :class="modelValue.length ? 'text-foreground' : 'text-muted-foreground'"
        class="truncate text-sm"
      >
        {{ displayText }}
        <span
          v-if="invalidItems.length"
          class="text-destructive"
        >{{ invalidSummaryText }}</span>
      </span>
      <ChevronDown
        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform"
        :class="isOpen ? 'rotate-180' : ''"
      />
    </button>
    <Teleport
      to="body"
      :disabled="!teleport"
    >
      <div
        v-if="isOpen"
        class="fixed inset-0 z-[80]"
        @click.stop="isOpen = false"
      />
      <div
        v-if="isOpen"
        class="z-[90] overflow-hidden rounded-2xl border border-border bg-card text-foreground shadow-2xl backdrop-blur-xl"
        :class="teleport ? 'fixed' : 'absolute mt-1 w-full'"
        :style="dropdownStyle"
      >
        <div
          v-if="showSearch"
          class="sticky top-0 z-10 border-b border-border/60 bg-card/95 p-1 backdrop-blur supports-[backdrop-filter]:bg-card/85"
        >
          <div class="relative">
            <Search
              class="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground"
            />
            <Input
              v-model="searchQuery"
              :placeholder="localizedSearchPlaceholder"
              class="h-9 rounded-xl border-border/60 bg-background/80 pl-9 pr-3 text-sm"
              @keydown.stop
            />
          </div>
        </div>

        <div class="max-h-64 overflow-y-auto p-1">
          <div
            v-if="hasOptions"
            class="sticky top-0 z-10 flex cursor-pointer items-center gap-2 rounded-lg border-b border-border/60 bg-card/95 px-3 py-2 backdrop-blur hover:bg-muted/50 supports-[backdrop-filter]:bg-card/85"
            @click="toggleAll"
          >
            <input
              type="checkbox"
              :checked="isAllSelected"
              :indeterminate="isPartiallySelected"
              :aria-label="legacyT('全选')"
              class="h-4 w-4 shrink-0 cursor-pointer rounded border-border/60 bg-card/80 text-primary shadow-sm accent-primary focus:ring-2 focus:ring-primary/40 focus:ring-offset-1"
              @click.stop
              @change="toggleAll"
            >
            <span class="min-w-0 truncate text-sm">{{ legacyT('全选') }}</span>
            <span class="ml-auto shrink-0 text-xs text-muted-foreground">
              {{ selectedOptionCount }}/{{ options.length }}
            </span>
          </div>

          <div
            v-for="item in filteredInvalidItems"
            :key="'invalid-' + item"
            class="flex cursor-pointer items-center gap-2 rounded-lg bg-destructive/5 px-3 py-2 hover:bg-muted/50"
            @click="remove(item)"
          >
            <input
              type="checkbox"
              :checked="true"
              class="h-4 w-4 shrink-0 cursor-pointer rounded border-border/60 bg-card/80 text-primary shadow-sm accent-primary focus:ring-2 focus:ring-primary/40 focus:ring-offset-1"
              @click.stop
              @change="remove(item)"
            >
            <span class="min-w-0 truncate text-sm text-destructive">{{ item }}</span>
            <span class="shrink-0 text-xs text-destructive/70">{{ legacyT('(已失效)') }}</span>
          </div>

          <div
            v-for="item in filteredOptions"
            :key="item.value"
            class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 hover:bg-muted/50"
            @click="toggle(item.value)"
          >
            <input
              type="checkbox"
              :checked="modelValue.includes(item.value)"
              class="h-4 w-4 shrink-0 cursor-pointer rounded border-border/60 bg-card/80 text-primary shadow-sm accent-primary focus:ring-2 focus:ring-primary/40 focus:ring-offset-1"
              @click.stop
              @change="toggle(item.value)"
            >
            <span class="min-w-0 truncate text-sm">{{ item.label }}</span>
          </div>
          <div
            v-if="filteredOptions.length === 0 && filteredInvalidItems.length === 0"
            class="px-3 py-2 text-sm text-muted-foreground"
          >
            {{ searchQuery.trim() ? localizedNoResultsText : localizedEmptyText }}
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
import { ChevronDown, Search } from 'lucide-vue-next'
import { Input } from '@/components/ui'
import { cn } from '@/lib/utils'
import { matchesSearchQuery } from '@/utils/search'
import { useI18n } from '@/i18n'

export interface MultiSelectOption {
  value: string
  label: string
}

const props = withDefaults(
  defineProps<{
    modelValue: string[]
    options: MultiSelectOption[]
    placeholder?: string
    emptyText?: string
    noResultsText?: string
    triggerClass?: string
    dropdownMinWidth?: string
    disabled?: boolean
    searchable?: boolean
    searchThreshold?: number
    searchPlaceholder?: string
    teleport?: boolean
  }>(),
  {
    placeholder: '请选择',
    emptyText: '暂无选项',
    noResultsText: '未找到匹配项',
    triggerClass: '',
    dropdownMinWidth: undefined,
    disabled: false,
    searchable: true,
    searchThreshold: 8,
    searchPlaceholder: '输入关键词搜索...',
    teleport: false,
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string[]]
}>()
const { legacyT, locale } = useI18n()

const isOpen = ref(false)
const searchQuery = ref('')
const triggerElement = ref<HTMLElement | null>(null)
const dropdownPosition = ref<Record<string, string>>({})

const dropdownStyle = computed(() => {
  const style: Record<string, string> = { ...dropdownPosition.value }
  if (props.dropdownMinWidth) {
    style.minWidth = props.dropdownMinWidth
  }
  return style
})

function updateDropdownPosition() {
  if (!props.teleport || !triggerElement.value) return
  const rect = triggerElement.value.getBoundingClientRect()
  dropdownPosition.value = {
    top: `${rect.bottom + 4}px`,
    left: `${rect.left}px`,
    width: `${rect.width}px`,
  }
}

async function toggleDropdown() {
  isOpen.value = !isOpen.value
  if (isOpen.value && props.teleport) {
    await nextTick()
    updateDropdownPosition()
  }
}

function removePositionListeners() {
  if (typeof window === 'undefined') return
  window.removeEventListener('resize', updateDropdownPosition)
  window.removeEventListener('scroll', updateDropdownPosition, true)
}

const validValues = computed(() => new Set(props.options.map(o => o.value)))

const invalidItems = computed(() =>
  props.modelValue.filter(v => !validValues.value.has(v)),
)

const totalCount = computed(() => props.options.length + invalidItems.value.length)

const hasOptions = computed(() => props.options.length > 0)

const selectedOptionCount = computed(
  () => new Set(props.modelValue.filter(v => validValues.value.has(v))).size,
)

const isAllSelected = computed(
  () => hasOptions.value && selectedOptionCount.value === props.options.length,
)

const isPartiallySelected = computed(
  () => selectedOptionCount.value > 0 && !isAllSelected.value,
)

const showSearch = computed(
  () => props.searchable && totalCount.value >= props.searchThreshold,
)

const localizedPlaceholder = computed(() => legacyT(props.placeholder))
const localizedEmptyText = computed(() => legacyT(props.emptyText))
const localizedNoResultsText = computed(() => legacyT(props.noResultsText))
const localizedSearchPlaceholder = computed(() => legacyT(props.searchPlaceholder))
const invalidSummaryText = computed(() => {
  const count = invalidItems.value.length
  return locale.value === 'en-US' ? `(${count} invalid)` : `(${count} 个已失效)`
})

const filteredInvalidItems = computed(() => {
  if (!showSearch.value || !searchQuery.value.trim()) {
    return invalidItems.value
  }
  return invalidItems.value.filter((item) =>
    matchesSearchQuery(searchQuery.value, item),
  )
})

const filteredOptions = computed(() => {
  if (!showSearch.value || !searchQuery.value.trim()) {
    return props.options
  }

  return props.options.filter((item) =>
    matchesSearchQuery(searchQuery.value, item.label, item.value),
  )
})

const displayText = computed(() => {
  if (props.modelValue.length === 0) return localizedPlaceholder.value
  if (props.modelValue.length <= 2) {
    return props.modelValue
      .map((v) => props.options.find((o) => o.value === v)?.label ?? v)
      .join(', ')
  }
  return locale.value === 'en-US'
    ? `${props.modelValue.length} selected`
    : `已选择 ${props.modelValue.length} 项`
})

watch(isOpen, (open) => {
  if (open && props.teleport && typeof window !== 'undefined') {
    window.addEventListener('resize', updateDropdownPosition)
    window.addEventListener('scroll', updateDropdownPosition, true)
  } else {
    searchQuery.value = ''
    removePositionListeners()
  }
})

onBeforeUnmount(removePositionListeners)

function toggle(value: string) {
  const newValue = [...props.modelValue]
  const index = newValue.indexOf(value)
  if (index === -1) {
    newValue.push(value)
  } else {
    newValue.splice(index, 1)
  }
  emit('update:modelValue', newValue)
}

function remove(value: string) {
  emit('update:modelValue', props.modelValue.filter(v => v !== value))
}

function toggleAll() {
  const invalidValues = props.modelValue.filter(v => !validValues.value.has(v))

  if (isAllSelected.value) {
    emit('update:modelValue', invalidValues)
    return
  }

  emit('update:modelValue', [
    ...invalidValues,
    ...props.options.map(option => option.value),
  ])
}
</script>