fix(frontend): 修复账号管理页面分组显示和 Cookie 授权问题
- 新增 AccountGroupsCell 组件优化分组列显示(最多4个+折叠) - 修复 Cookie 自动授权时 group_ids/notes/expires_at 字段丢失 - 修复 SettingsView 流超时配置前后端字段不一致问题
This commit is contained in:
158
frontend/src/components/account/AccountGroupsCell.vue
Normal file
158
frontend/src/components/account/AccountGroupsCell.vue
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="groups && groups.length > 0" class="relative max-w-56">
|
||||||
|
<!-- 分组容器:固定最大宽度,最多显示2行 -->
|
||||||
|
<div class="flex flex-wrap gap-1 max-h-14 overflow-hidden">
|
||||||
|
<GroupBadge
|
||||||
|
v-for="group in displayGroups"
|
||||||
|
:key="group.id"
|
||||||
|
:name="group.name"
|
||||||
|
:platform="group.platform"
|
||||||
|
:subscription-type="group.subscription_type"
|
||||||
|
:rate-multiplier="group.rate_multiplier"
|
||||||
|
:show-rate="false"
|
||||||
|
class="max-w-24"
|
||||||
|
/>
|
||||||
|
<!-- 更多数量徽章 -->
|
||||||
|
<button
|
||||||
|
v-if="hiddenCount > 0"
|
||||||
|
ref="moreButtonRef"
|
||||||
|
@click.stop="showPopover = !showPopover"
|
||||||
|
class="inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500 transition-colors cursor-pointer whitespace-nowrap"
|
||||||
|
>
|
||||||
|
<span>+{{ hiddenCount }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Popover 显示完整列表 -->
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition
|
||||||
|
enter-active-class="transition duration-150 ease-out"
|
||||||
|
enter-from-class="opacity-0 scale-95"
|
||||||
|
enter-to-class="opacity-100 scale-100"
|
||||||
|
leave-active-class="transition duration-100 ease-in"
|
||||||
|
leave-from-class="opacity-100 scale-100"
|
||||||
|
leave-to-class="opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="showPopover"
|
||||||
|
ref="popoverRef"
|
||||||
|
class="fixed z-50 min-w-48 max-w-96 rounded-lg border border-gray-200 bg-white p-3 shadow-lg dark:border-dark-600 dark:bg-dark-800"
|
||||||
|
:style="popoverStyle"
|
||||||
|
>
|
||||||
|
<div class="mb-2 flex items-center justify-between">
|
||||||
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
{{ t('admin.accounts.allGroups', { count: groups.length }) }}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
@click="showPopover = false"
|
||||||
|
class="rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
|
||||||
|
>
|
||||||
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto">
|
||||||
|
<GroupBadge
|
||||||
|
v-for="group in groups"
|
||||||
|
:key="group.id"
|
||||||
|
:name="group.name"
|
||||||
|
:platform="group.platform"
|
||||||
|
:subscription-type="group.subscription_type"
|
||||||
|
:rate-multiplier="group.rate_multiplier"
|
||||||
|
:show-rate="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
|
||||||
|
<!-- 点击外部关闭 popover -->
|
||||||
|
<div
|
||||||
|
v-if="showPopover"
|
||||||
|
class="fixed inset-0 z-40"
|
||||||
|
@click="showPopover = false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import GroupBadge from '@/components/common/GroupBadge.vue'
|
||||||
|
import type { Group } from '@/types'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
groups: Group[] | null | undefined
|
||||||
|
maxDisplay?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
maxDisplay: 4
|
||||||
|
})
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const moreButtonRef = ref<HTMLElement | null>(null)
|
||||||
|
const popoverRef = ref<HTMLElement | null>(null)
|
||||||
|
const showPopover = ref(false)
|
||||||
|
|
||||||
|
// 显示的分组(最多显示 maxDisplay 个)
|
||||||
|
const displayGroups = computed(() => {
|
||||||
|
if (!props.groups) return []
|
||||||
|
if (props.groups.length <= props.maxDisplay) {
|
||||||
|
return props.groups
|
||||||
|
}
|
||||||
|
// 留一个位置给 +N 按钮
|
||||||
|
return props.groups.slice(0, props.maxDisplay - 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 隐藏的数量
|
||||||
|
const hiddenCount = computed(() => {
|
||||||
|
if (!props.groups) return 0
|
||||||
|
if (props.groups.length <= props.maxDisplay) return 0
|
||||||
|
return props.groups.length - (props.maxDisplay - 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Popover 位置样式
|
||||||
|
const popoverStyle = computed(() => {
|
||||||
|
if (!moreButtonRef.value) return {}
|
||||||
|
const rect = moreButtonRef.value.getBoundingClientRect()
|
||||||
|
const viewportHeight = window.innerHeight
|
||||||
|
const viewportWidth = window.innerWidth
|
||||||
|
|
||||||
|
let top = rect.bottom + 8
|
||||||
|
let left = rect.left
|
||||||
|
|
||||||
|
// 如果下方空间不足,显示在上方
|
||||||
|
if (top + 280 > viewportHeight) {
|
||||||
|
top = Math.max(8, rect.top - 280)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果右侧空间不足,向左偏移
|
||||||
|
if (left + 384 > viewportWidth) {
|
||||||
|
left = Math.max(8, viewportWidth - 392)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: `${top}px`,
|
||||||
|
left: `${left}px`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 关闭 popover 的键盘事件
|
||||||
|
const handleKeydown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
showPopover.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -2482,6 +2482,7 @@ const handleCookieAuth = async (sessionKey: string) => {
|
|||||||
|
|
||||||
await adminAPI.accounts.create({
|
await adminAPI.accounts.create({
|
||||||
name: accountName,
|
name: accountName,
|
||||||
|
notes: form.notes,
|
||||||
platform: form.platform,
|
platform: form.platform,
|
||||||
type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
|
type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
|
||||||
credentials,
|
credentials,
|
||||||
@@ -2489,6 +2490,8 @@ const handleCookieAuth = async (sessionKey: string) => {
|
|||||||
proxy_id: form.proxy_id,
|
proxy_id: form.proxy_id,
|
||||||
concurrency: form.concurrency,
|
concurrency: form.concurrency,
|
||||||
priority: form.priority,
|
priority: form.priority,
|
||||||
|
group_ids: form.group_ids,
|
||||||
|
expires_at: form.expires_at,
|
||||||
auto_pause_on_expired: autoPauseOnExpired.value
|
auto_pause_on_expired: autoPauseOnExpired.value
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1022,6 +1022,7 @@ export default {
|
|||||||
schedulableEnabled: 'Scheduling enabled',
|
schedulableEnabled: 'Scheduling enabled',
|
||||||
schedulableDisabled: 'Scheduling disabled',
|
schedulableDisabled: 'Scheduling disabled',
|
||||||
failedToToggleSchedulable: 'Failed to toggle scheduling status',
|
failedToToggleSchedulable: 'Failed to toggle scheduling status',
|
||||||
|
allGroups: '{count} groups total',
|
||||||
platforms: {
|
platforms: {
|
||||||
anthropic: 'Anthropic',
|
anthropic: 'Anthropic',
|
||||||
claude: 'Claude',
|
claude: 'Claude',
|
||||||
|
|||||||
@@ -1099,6 +1099,7 @@ export default {
|
|||||||
schedulableEnabled: '调度已开启',
|
schedulableEnabled: '调度已开启',
|
||||||
schedulableDisabled: '调度已关闭',
|
schedulableDisabled: '调度已关闭',
|
||||||
failedToToggleSchedulable: '切换调度状态失败',
|
failedToToggleSchedulable: '切换调度状态失败',
|
||||||
|
allGroups: '共 {count} 个分组',
|
||||||
columns: {
|
columns: {
|
||||||
name: '名称',
|
name: '名称',
|
||||||
platformType: '平台/类型',
|
platformType: '平台/类型',
|
||||||
|
|||||||
@@ -56,10 +56,7 @@
|
|||||||
<AccountTodayStatsCell :account="row" />
|
<AccountTodayStatsCell :account="row" />
|
||||||
</template>
|
</template>
|
||||||
<template #cell-groups="{ row }">
|
<template #cell-groups="{ row }">
|
||||||
<div v-if="row.groups && row.groups.length > 0" class="flex flex-wrap gap-1.5">
|
<AccountGroupsCell :groups="row.groups" :max-display="4" />
|
||||||
<GroupBadge v-for="group in row.groups" :key="group.id" :name="group.name" :platform="group.platform" :subscription-type="group.subscription_type" :rate-multiplier="group.rate_multiplier" :show-rate="false" />
|
|
||||||
</div>
|
|
||||||
<span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
|
|
||||||
</template>
|
</template>
|
||||||
<template #cell-usage="{ row }">
|
<template #cell-usage="{ row }">
|
||||||
<AccountUsageCell :account="row" />
|
<AccountUsageCell :account="row" />
|
||||||
@@ -145,7 +142,7 @@ import AccountStatsModal from '@/components/admin/account/AccountStatsModal.vue'
|
|||||||
import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
|
import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
|
||||||
import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
|
import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
|
||||||
import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
|
import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
|
||||||
import GroupBadge from '@/components/common/GroupBadge.vue'
|
import AccountGroupsCell from '@/components/account/AccountGroupsCell.vue'
|
||||||
import PlatformTypeBadge from '@/components/common/PlatformTypeBadge.vue'
|
import PlatformTypeBadge from '@/components/common/PlatformTypeBadge.vue'
|
||||||
import { formatDateTime, formatRelativeTime } from '@/utils/format'
|
import { formatDateTime, formatRelativeTime } from '@/utils/format'
|
||||||
import type { Account, Proxy, Group } from '@/types'
|
import type { Account, Proxy, Group } from '@/types'
|
||||||
|
|||||||
@@ -183,23 +183,6 @@
|
|||||||
v-if="streamTimeoutForm.enabled"
|
v-if="streamTimeoutForm.enabled"
|
||||||
class="space-y-4 border-t border-gray-100 pt-4 dark:border-dark-700"
|
class="space-y-4 border-t border-gray-100 pt-4 dark:border-dark-700"
|
||||||
>
|
>
|
||||||
<!-- Timeout Seconds -->
|
|
||||||
<div>
|
|
||||||
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
||||||
{{ t('admin.settings.streamTimeout.timeoutSeconds') }}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
v-model.number="streamTimeoutForm.timeout_seconds"
|
|
||||||
type="number"
|
|
||||||
min="30"
|
|
||||||
max="300"
|
|
||||||
class="input w-32"
|
|
||||||
/>
|
|
||||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
{{ t('admin.settings.streamTimeout.timeoutSecondsHint') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Action -->
|
<!-- Action -->
|
||||||
<div>
|
<div>
|
||||||
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
@@ -1000,7 +983,6 @@ const streamTimeoutLoading = ref(true)
|
|||||||
const streamTimeoutSaving = ref(false)
|
const streamTimeoutSaving = ref(false)
|
||||||
const streamTimeoutForm = reactive({
|
const streamTimeoutForm = reactive({
|
||||||
enabled: true,
|
enabled: true,
|
||||||
timeout_seconds: 60,
|
|
||||||
action: 'temp_unsched' as 'temp_unsched' | 'error' | 'none',
|
action: 'temp_unsched' as 'temp_unsched' | 'error' | 'none',
|
||||||
temp_unsched_minutes: 5,
|
temp_unsched_minutes: 5,
|
||||||
threshold_count: 3,
|
threshold_count: 3,
|
||||||
@@ -1314,7 +1296,6 @@ async function saveStreamTimeoutSettings() {
|
|||||||
try {
|
try {
|
||||||
const updated = await adminAPI.settings.updateStreamTimeoutSettings({
|
const updated = await adminAPI.settings.updateStreamTimeoutSettings({
|
||||||
enabled: streamTimeoutForm.enabled,
|
enabled: streamTimeoutForm.enabled,
|
||||||
timeout_seconds: streamTimeoutForm.timeout_seconds,
|
|
||||||
action: streamTimeoutForm.action,
|
action: streamTimeoutForm.action,
|
||||||
temp_unsched_minutes: streamTimeoutForm.temp_unsched_minutes,
|
temp_unsched_minutes: streamTimeoutForm.temp_unsched_minutes,
|
||||||
threshold_count: streamTimeoutForm.threshold_count,
|
threshold_count: streamTimeoutForm.threshold_count,
|
||||||
|
|||||||
Reference in New Issue
Block a user