feat: add select all to access limit dropdowns

This commit is contained in:
fawney19
2026-04-30 00:45:53 +08:00
parent 4d59d518d1
commit fa47e8a3c0
3 changed files with 68 additions and 20 deletions

View File

@@ -55,6 +55,26 @@
</div>
<div class="max-h-48 overflow-y-auto">
<div
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"
@click="toggleAll"
>
<input
type="checkbox"
:checked="isAllSelected"
:indeterminate="isPartiallySelected"
aria-label="全选"
class="h-4 w-4 shrink-0 cursor-pointer rounded border-gray-300"
@click.stop
@change="toggleAll"
>
<span class="min-w-0 truncate text-sm">全选</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"
@@ -152,6 +172,20 @@ const invalidItems = computed(() =>
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,
)
@@ -205,4 +239,18 @@ function toggle(value: string) {
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>

View File

@@ -104,9 +104,9 @@
<span class="text-sm font-medium">访问限制</span>
</div>
<!-- Provider -->
<!-- 提供商 -->
<div class="space-y-2">
<Label class="text-sm font-medium">允许的 Provider</Label>
<Label class="text-sm font-medium">允许的提供商</Label>
<div class="flex items-center gap-3">
<div class="flex-1 min-w-0">
<MultiSelect
@@ -115,9 +115,9 @@
:search-threshold="0"
:disabled="form.provider_unrestricted"
:placeholder="form.provider_unrestricted ? '不限制' : '未选择(全部禁用)'"
empty-text="暂无可用 Provider"
no-results-text="未找到匹配的 Provider"
search-placeholder="搜索 Provider 名称..."
empty-text="暂无可用提供商"
no-results-text="未找到匹配的提供商"
search-placeholder="搜索提供商名称..."
/>
</div>
<Switch
@@ -127,9 +127,9 @@
</div>
</div>
<!-- API 格式 -->
<!-- 端点 -->
<div class="space-y-2">
<Label class="text-sm font-medium">允许的 API 格式</Label>
<Label class="text-sm font-medium">允许的端点</Label>
<div class="flex items-center gap-3">
<div class="flex-1 min-w-0">
<MultiSelect
@@ -138,9 +138,9 @@
:search-threshold="0"
:disabled="form.api_format_unrestricted"
:placeholder="form.api_format_unrestricted ? '不限制' : '未选择(全部禁用)'"
empty-text="暂无可用 API 格式"
no-results-text="未找到匹配的 API 格式"
search-placeholder="搜索 API 格式..."
empty-text="暂无可用端点"
no-results-text="未找到匹配的端点"
search-placeholder="搜索端点..."
/>
</div>
<Switch

View File

@@ -188,9 +188,9 @@
<span class="text-sm font-medium">访问限制</span>
</div>
<!-- Provider -->
<!-- 提供商 -->
<div class="space-y-2">
<Label class="text-sm font-medium">允许的 Provider</Label>
<Label class="text-sm font-medium">允许的提供商</Label>
<div class="flex items-center gap-3">
<div class="flex-1 min-w-0">
<MultiSelect
@@ -199,9 +199,9 @@
:search-threshold="0"
:disabled="form.provider_unrestricted"
:placeholder="form.provider_unrestricted ? '不限制' : '未选择(全部禁用)'"
empty-text="暂无可用 Provider"
no-results-text="未找到匹配的 Provider"
search-placeholder="搜索 Provider 名称..."
empty-text="暂无可用提供商"
no-results-text="未找到匹配的提供商"
search-placeholder="搜索提供商名称..."
/>
</div>
<Switch
@@ -211,9 +211,9 @@
</div>
</div>
<!-- API 格式 -->
<!-- 端点 -->
<div class="space-y-2">
<Label class="text-sm font-medium">允许的 API 格式</Label>
<Label class="text-sm font-medium">允许的端点</Label>
<div class="flex items-center gap-3">
<div class="flex-1 min-w-0">
<MultiSelect
@@ -222,9 +222,9 @@
:search-threshold="0"
:disabled="form.api_format_unrestricted"
:placeholder="form.api_format_unrestricted ? '不限制' : '未选择(全部禁用)'"
empty-text="暂无可用 API 格式"
no-results-text="未找到匹配的 API 格式"
search-placeholder="搜索 API 格式..."
empty-text="暂无可用端点"
no-results-text="未找到匹配的端点"
search-placeholder="搜索端点..."
/>
</div>
<Switch