mirror of
https://gitee.com/wanwujie/sub2api
synced 2026-04-08 17:14:45 +08:00
feat(admin): 添加管理员直接修改用户 API Key 分组的功能
- 新增 PUT /api/v1/admin/api-keys/:id 端点，允许管理员修改任意用户 API Key 的分组绑定 - 跳过用户级权限校验但保留分组有效性验证，修改后触发认证缓存失效 - Service 层支持三态语义：nil=不修改，0=解绑，>0=绑定，<0=拒绝 - 指针值拷贝保证安全隔离，负数 groupID 返回 400 INVALID_GROUP_ID - 前端 UserApiKeysModal 新增可点击的分组选择下拉框，支持多 Key 并发更新 - 下拉支持视口翻转和滚动关闭，按钮有 disabled 和加载状态 - 覆盖：后端 20 个单元测试 (Service 11 + Handler 9) + 前端 16 个 E2E 测试 - golangci-lint 0 issues, make test-unit 全部通过
This commit is contained in:
QTom
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="$emit('close')">
|
||||
<BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="handleClose">
|
||||
<div v-if="user" class="space-y-4">
|
||||
<div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<div v-if="loading" class="flex justify-center py-8"><svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>
|
||||
<div v-else-if="apiKeys.length === 0" class="py-8 text-center"><p class="text-sm text-gray-500">{{ t('admin.users.noApiKeys') }}</p></div>
|
||||
<div v-else class="max-h-96 space-y-3 overflow-y-auto">
|
||||
<div v-else ref="scrollContainerRef" class="max-h-96 space-y-3 overflow-y-auto" @scroll="closeGroupSelector">
|
||||
<div v-for="key in apiKeys" :key="key.id" class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
@@ -18,30 +18,232 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-4 text-xs text-gray-500">
|
||||
<div class="flex items-center gap-1"><span>{{ t('admin.users.group') }}: {{ key.group?.name || t('admin.users.none') }}</span></div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span>{{ t('admin.users.group') }}:</span>
|
||||
<button
|
||||
:ref="(el) => setGroupButtonRef(key.id, el as HTMLElement)"
|
||||
@click="openGroupSelector(key)"
|
||||
class="-mx-1 -my-0.5 flex cursor-pointer items-center gap-1 rounded-md px-1 py-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
|
||||
:disabled="updatingKeyIds.has(key.id)"
|
||||
>
|
||||
<GroupBadge
|
||||
v-if="key.group_id && key.group"
|
||||
:name="key.group.name"
|
||||
:platform="key.group.platform"
|
||||
:subscription-type="key.group.subscription_type"
|
||||
:rate-multiplier="key.group.rate_multiplier"
|
||||
/>
|
||||
<span v-else class="text-gray-400 italic">{{ t('admin.users.none') }}</span>
|
||||
<svg v-if="updatingKeyIds.has(key.id)" class="h-3 w-3 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
||||
<svg v-else class="h-3 w-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-1"><span>{{ t('admin.users.columns.created') }}: {{ formatDateTime(key.created_at) }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Group Selector Dropdown -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="groupSelectorKeyId !== null && dropdownPosition"
|
||||
ref="dropdownRef"
|
||||
class="animate-in fade-in slide-in-from-top-2 fixed z-[100000020] w-64 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 duration-200 dark:bg-dark-800 dark:ring-white/10"
|
||||
:style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }"
|
||||
>
|
||||
<div class="max-h-64 overflow-y-auto p-1.5">
|
||||
<!-- Unbind option -->
|
||||
<button
|
||||
@click="changeGroup(selectedKeyForGroup!, null)"
|
||||
:class="[
|
||||
'flex w-full items-center rounded-lg px-3 py-2 text-sm transition-colors',
|
||||
!selectedKeyForGroup?.group_id
|
||||
? 'bg-primary-50 dark:bg-primary-900/20'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-dark-700'
|
||||
]"
|
||||
>
|
||||
<span class="text-gray-500 italic">{{ t('admin.users.none') }}</span>
|
||||
<svg
|
||||
v-if="!selectedKeyForGroup?.group_id"
|
||||
class="ml-auto h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"
|
||||
><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
</button>
|
||||
<!-- Group options -->
|
||||
<button
|
||||
v-for="group in allGroups"
|
||||
:key="group.id"
|
||||
@click="changeGroup(selectedKeyForGroup!, group.id)"
|
||||
:class="[
|
||||
'flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors',
|
||||
selectedKeyForGroup?.group_id === group.id
|
||||
? 'bg-primary-50 dark:bg-primary-900/20'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-dark-700'
|
||||
]"
|
||||
>
|
||||
<GroupOptionItem
|
||||
:name="group.name"
|
||||
:platform="group.platform"
|
||||
:subscription-type="group.subscription_type"
|
||||
:rate-multiplier="group.rate_multiplier"
|
||||
:description="group.description"
|
||||
:selected="selectedKeyForGroup?.group_id === group.id"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import type { AdminUser, ApiKey } from '@/types'
|
||||
import type { AdminUser, AdminGroup, ApiKey } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import GroupBadge from '@/components/common/GroupBadge.vue'
|
||||
import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
|
||||
|
||||
const props = defineProps<{ show: boolean, user: AdminUser | null }>()
|
||||
defineEmits(['close']); const { t } = useI18n()
|
||||
const apiKeys = ref<ApiKey[]>([]); const loading = ref(false)
|
||||
const props = defineProps<{ show: boolean; user: AdminUser | null }>()
|
||||
const emit = defineEmits(['close'])
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
watch(() => props.show, (v) => { if (v && props.user) load() })
|
||||
const load = async () => {
|
||||
if (!props.user) return; loading.value = true
|
||||
try { const res = await adminAPI.users.getUserApiKeys(props.user.id); apiKeys.value = res.items || [] } catch (error) { console.error('Failed to load API keys:', error) } finally { loading.value = false }
|
||||
const apiKeys = ref<ApiKey[]>([])
|
||||
const allGroups = ref<AdminGroup[]>([])
|
||||
const loading = ref(false)
|
||||
const updatingKeyIds = ref(new Set<number>())
|
||||
const groupSelectorKeyId = ref<number | null>(null)
|
||||
const dropdownPosition = ref<{ top: number; left: number } | null>(null)
|
||||
const dropdownRef = ref<HTMLElement | null>(null)
|
||||
const scrollContainerRef = ref<HTMLElement | null>(null)
|
||||
const groupButtonRefs = ref<Map<number, HTMLElement>>(new Map())
|
||||
|
||||
const selectedKeyForGroup = computed(() => {
|
||||
if (groupSelectorKeyId.value === null) return null
|
||||
return apiKeys.value.find((k) => k.id === groupSelectorKeyId.value) || null
|
||||
})
|
||||
|
||||
const setGroupButtonRef = (keyId: number, el: HTMLElement | null) => {
|
||||
if (el) {
|
||||
groupButtonRefs.value.set(keyId, el)
|
||||
} else {
|
||||
groupButtonRefs.value.delete(keyId)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.show, (v) => {
|
||||
if (v && props.user) {
|
||||
load()
|
||||
loadGroups()
|
||||
} else {
|
||||
closeGroupSelector()
|
||||
}
|
||||
})
|
||||
|
||||
const load = async () => {
|
||||
if (!props.user) return
|
||||
loading.value = true
|
||||
groupButtonRefs.value.clear()
|
||||
try {
|
||||
const res = await adminAPI.users.getUserApiKeys(props.user.id)
|
||||
apiKeys.value = res.items || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load API keys:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadGroups = async () => {
|
||||
try {
|
||||
const groups = await adminAPI.groups.getAll()
|
||||
allGroups.value = groups
|
||||
} catch (error) {
|
||||
console.error('Failed to load groups:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const DROPDOWN_HEIGHT = 272 // max-h-64 = 16rem = 256px + padding
|
||||
const DROPDOWN_GAP = 4
|
||||
|
||||
const openGroupSelector = (key: ApiKey) => {
|
||||
if (groupSelectorKeyId.value === key.id) {
|
||||
closeGroupSelector()
|
||||
} else {
|
||||
const buttonEl = groupButtonRefs.value.get(key.id)
|
||||
if (buttonEl) {
|
||||
const rect = buttonEl.getBoundingClientRect()
|
||||
const spaceBelow = window.innerHeight - rect.bottom
|
||||
const openUpward = spaceBelow < DROPDOWN_HEIGHT && rect.top > spaceBelow
|
||||
dropdownPosition.value = {
|
||||
top: openUpward ? rect.top - DROPDOWN_HEIGHT - DROPDOWN_GAP : rect.bottom + DROPDOWN_GAP,
|
||||
left: rect.left
|
||||
}
|
||||
}
|
||||
groupSelectorKeyId.value = key.id
|
||||
}
|
||||
}
|
||||
|
||||
const closeGroupSelector = () => {
|
||||
groupSelectorKeyId.value = null
|
||||
dropdownPosition.value = null
|
||||
}
|
||||
|
||||
const changeGroup = async (key: ApiKey, newGroupId: number | null) => {
|
||||
closeGroupSelector()
|
||||
if (key.group_id === newGroupId || (!key.group_id && newGroupId === null)) return
|
||||
|
||||
updatingKeyIds.value.add(key.id)
|
||||
try {
|
||||
const updated = await adminAPI.apiKeys.updateApiKeyGroup(key.id, newGroupId)
|
||||
// Update local data
|
||||
const idx = apiKeys.value.findIndex((k) => k.id === key.id)
|
||||
if (idx !== -1) {
|
||||
apiKeys.value[idx] = updated
|
||||
}
|
||||
appStore.showSuccess(t('admin.users.groupChangedSuccess'))
|
||||
} catch (error) {
|
||||
appStore.showError(t('admin.users.groupChangeFailed'))
|
||||
} finally {
|
||||
updatingKeyIds.value.delete(key.id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && groupSelectorKeyId.value !== null) {
|
||||
event.stopPropagation()
|
||||
closeGroupSelector()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(target)) {
|
||||
// Check if the click is on one of the group trigger buttons
|
||||
for (const el of groupButtonRefs.value.values()) {
|
||||
if (el.contains(target)) return
|
||||
}
|
||||
closeGroupSelector()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
closeGroupSelector()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleKeyDown, true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleKeyDown, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user