i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-09-02 01:10:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: polish multi select dropdown

Browse Source
This commit is contained in:
fawney19
2026-05-10 17:40:32 +08:00
parent d246f6b42c
commit 377dd52805
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/common/MultiSelect.vue
View File

@@ -34,12 +34,12 @@
/> />
<div <div
v-if="isOpen" v-if="isOpen"
class="absolute z-[90] w-full mt-1 rounded-lg border bg-popover shadow-lg" class="absolute z-[90] mt-1 w-full overflow-hidden rounded-2xl border border-border bg-card text-foreground shadow-2xl backdrop-blur-xl"
:style="dropdownMinWidth ? { minWidth: dropdownMinWidth } : undefined" :style="dropdownMinWidth ? { minWidth: dropdownMinWidth } : undefined"
> >
<div <div
v-if="showSearch" v-if="showSearch"
class="sticky top-0 z-10 border-b bg-popover/95 p-1 backdrop-blur supports-[backdrop-filter]:bg-popover/85" 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"> <div class="relative">
<Search <Search
@@ -48,16 +48,16 @@
<Input <Input
v-model="searchQuery" v-model="searchQuery"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
class="h-8 rounded-md border-border/60 bg-popover pl-8 text-xs" class="h-9 rounded-xl border-border/60 bg-background/80 pl-9 pr-3 text-sm"
@keydown.stop @keydown.stop
/> />
</div> </div>
</div> </div>
<div class="max-h-64 overflow-y-auto"> <div class="max-h-64 overflow-y-auto p-1">
<div <div
v-if="hasOptions" v-if="hasOptions"
class="sticky top-0 z-10 flex cursor-pointer items-center gap-2 border-b bg-popover/95 px-3 py-2 backdrop-blur hover:bg-muted/50 supports-[backdrop-filter]:bg-popover/85" 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" @click="toggleAll"
> >
<input <input
@@ -65,7 +65,7 @@
:checked="isAllSelected" :checked="isAllSelected"
:indeterminate="isPartiallySelected" :indeterminate="isPartiallySelected"
aria-label="全选" aria-label="全选"
class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300" 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 @click.stop
@change="toggleAll" @change="toggleAll"
> >
@@ -78,13 +78,13 @@
<div <div
v-for="item in filteredInvalidItems" v-for="item in filteredInvalidItems"
:key="'invalid-' + item" :key="'invalid-' + item"
class="flex cursor-pointer items-center gap-2 bg-destructive/5 px-3 py-2 hover:bg-muted/50" class="flex cursor-pointer items-center gap-2 rounded-lg bg-destructive/5 px-3 py-2 hover:bg-muted/50"
@click="remove(item)" @click="remove(item)"
> >
<input <input
type="checkbox" type="checkbox"
:checked="true" :checked="true"
class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300" 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 @click.stop
@change="remove(item)" @change="remove(item)"
> >
@@ -95,13 +95,13 @@
<div <div
v-for="item in filteredOptions" v-for="item in filteredOptions"
:key="item.value" :key="item.value"
class="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-muted/50" class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 hover:bg-muted/50"
@click="toggle(item.value)" @click="toggle(item.value)"
> >
<input <input
type="checkbox" type="checkbox"
:checked="modelValue.includes(item.value)" :checked="modelValue.includes(item.value)"
class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300" 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 @click.stop
@change="toggle(item.value)" @change="toggle(item.value)"
> >