File size: 2,942 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <template>
<div>
<label class="input-label">
{{ t('admin.users.groups') }}
<span class="font-normal text-gray-400">{{ t('common.selectedCount', { count: modelValue.length }) }}</span>
</label>
<div
class="grid max-h-32 grid-cols-2 gap-1 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-dark-600 dark:bg-dark-800"
>
<label
v-for="group in filteredGroups"
:key="group.id"
class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-white dark:hover:bg-dark-700"
:title="t('admin.groups.rateAndAccounts', { rate: group.rate_multiplier, count: group.account_count || 0 })"
>
<input
type="checkbox"
:value="group.id"
:checked="modelValue.includes(group.id)"
@change="handleChange(group.id, ($event.target as HTMLInputElement).checked)"
class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-500 focus:ring-primary-500 dark:border-dark-500"
/>
<GroupBadge
:name="group.name"
:platform="group.platform"
:subscription-type="group.subscription_type"
:rate-multiplier="group.rate_multiplier"
class="min-w-0 flex-1"
/>
<span class="shrink-0 text-xs text-gray-400">{{ group.account_count || 0 }}</span>
</label>
<div
v-if="filteredGroups.length === 0"
class="col-span-2 py-2 text-center text-sm text-gray-500 dark:text-gray-400"
>
{{ t('common.noGroupsAvailable') }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import GroupBadge from './GroupBadge.vue'
import type { AdminGroup, GroupPlatform } from '@/types'
const { t } = useI18n()
interface Props {
modelValue: number[]
groups: AdminGroup[]
platform?: GroupPlatform // Optional platform filter
mixedScheduling?: boolean // For antigravity accounts: allow anthropic/gemini groups
}
const props = defineProps<Props>()
const emit = defineEmits<{
'update:modelValue': [value: number[]]
}>()
// Filter groups by platform if specified
const filteredGroups = computed(() => {
if (!props.platform) {
return props.groups
}
// antigravity 账户启用混合调度后，可选择 anthropic/gemini 分组
if (props.platform === 'antigravity' && props.mixedScheduling) {
return props.groups.filter(
(g) => g.platform === 'antigravity' || g.platform === 'anthropic' || g.platform === 'gemini'
)
}
// 默认：只能选择同 platform 的分组
return props.groups.filter((g) => g.platform === props.platform)
})
const handleChange = (groupId: number, checked: boolean) => {
const newValue = checked
? [...props.modelValue, groupId]
: props.modelValue.filter((id) => id !== groupId)
emit('update:modelValue', newValue)
}
</script>
|