oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

merge: 合并 upstream/main 并保留本地图片计费功能

Browse Source
This commit is contained in:
song
2026-01-06 10:49:26 +08:00
parent 6fa704d6fc 752882a022
commit 195e227c04
187 changed files with 17081 additions and 19407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

976
frontend/src/views/admin/AccountsView.vue
View File

File diff suppressed because it is too large Load Diff

127
frontend/src/views/admin/DashboardView.vue
View File

@@ -13,19 +13,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
<svg
class="h-5 w-5 text-blue-600 dark:text-blue-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
/>
</svg>
<Icon name="key" size="md" class="text-blue-600 dark:text-blue-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -45,19 +33,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
<svg
class="h-5 w-5 text-purple-600 dark:text-purple-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
/>
</svg>
<Icon name="server" size="md" class="text-purple-600 dark:text-purple-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -82,19 +58,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
<svg
class="h-5 w-5 text-green-600 dark:text-green-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
/>
</svg>
<Icon name="chart" size="md" class="text-green-600 dark:text-green-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -114,19 +78,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
<svg
class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
/>
</svg>
<Icon name="userPlus" size="md" class="text-emerald-600 dark:text-emerald-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -149,19 +101,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
<svg
class="h-5 w-5 text-amber-600 dark:text-amber-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
/>
</svg>
<Icon name="cube" size="md" class="text-amber-600 dark:text-amber-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -191,19 +131,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30">
<svg
class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
/>
</svg>
<Icon name="database" size="md" class="text-indigo-600 dark:text-indigo-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -233,19 +161,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-violet-100 p-2 dark:bg-violet-900/30">
<svg
class="h-5 w-5 text-violet-600 dark:text-violet-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>
<Icon name="bolt" size="md" class="text-violet-600 dark:text-violet-400" :stroke-width="2" />
</div>
<div class="flex-1">
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -271,19 +187,7 @@
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="rounded-lg bg-rose-100 p-2 dark:bg-rose-900/30">
<svg
class="h-5 w-5 text-rose-600 dark:text-rose-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Icon name="clock" size="md" class="text-rose-600 dark:text-rose-400" :stroke-width="2" />
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
@@ -367,6 +271,7 @@ import { adminAPI } from '@/api/admin'
import type { DashboardStats, TrendDataPoint, ModelStat, UserUsageTrendPoint } from '@/types'
import AppLayout from '@/components/layout/AppLayout.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
import Icon from '@/components/icons/Icon.vue'
import DateRangePicker from '@/components/common/DateRangePicker.vue'
import Select from '@/components/common/Select.vue'
import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
@@ -504,7 +409,7 @@ const userTrendChartData = computed(() => {
if (email && email.includes('@')) {
return email.split('@')[0]
}
return `User #${userId}`
return t('admin.redeem.userPrefix', { id: userId })
}
// Group by user
@@ -652,16 +557,4 @@ onMounted(() => {
</script>
<style scoped>
/* Compact Select styling for dashboard */
:deep(.select-trigger) {
@apply rounded-lg px-3 py-1.5 text-sm;
}
:deep(.select-dropdown) {
@apply rounded-lg;
}
:deep(.select-option) {
@apply px-3 py-2 text-sm;
}
</style>

183
frontend/src/views/admin/GroupsView.vue
View File

@@ -1,49 +1,23 @@
<template>
<AppLayout>
<TablePageLayout>
<template #actions>
<div class="flex justify-end gap-3">
<button
@click="loadGroups"
:disabled="loading"
class="btn btn-secondary"
:title="t('common.refresh')"
>
<svg
:class="['h-5 w-5', loading ? 'animate-spin' : '']"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<button
@click="showCreateModal = true"
class="btn btn-primary"
data-tour="groups-create-btn"
>
<svg
class="mr-2 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
{{ t('admin.groups.createGroup') }}
</button>
</div>
</template>
<template #filters>
<div class="flex flex-wrap gap-3">
<div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
<!-- Left: fuzzy search + filters (can wrap to multiple lines) -->
<div class="flex flex-1 flex-wrap items-center gap-3">
<div class="relative w-full sm:w-64">
<Icon
name="search"
size="md"
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
/>
<input
v-model="searchQuery"
type="text"
:placeholder="t('admin.groups.searchGroups')"
class="input pl-10"
/>
</div>
<Select
v-model="filters.platform"
:options="platformFilterOptions"
@@ -65,11 +39,32 @@
class="w-44"
@change="loadGroups"
/>
</div>
<!-- Right: actions -->
<div class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 lg:w-auto">
<button
@click="loadGroups"
:disabled="loading"
class="btn btn-secondary"
:title="t('common.refresh')"
>
<Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
</button>
<button
@click="showCreateModal = true"
class="btn btn-primary"
data-tour="groups-create-btn"
>
<Icon name="plus" size="md" class="mr-2" />
{{ t('admin.groups.createGroup') }}
</button>
</div>
</div>
</template>
<template #table>
<DataTable :columns="columns" :data="groups" :loading="loading">
<DataTable :columns="columns" :data="displayedGroups" :loading="loading">
<template #cell-name="{ value }">
<span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
</template>
@@ -88,15 +83,7 @@
]"
>
<PlatformIcon :platform="value" size="xs" />
{{
value === 'anthropic'
? 'Anthropic'
: value === 'openai'
? 'OpenAI'
: value === 'antigravity'
? 'Antigravity'
: 'Gemini'
}}
{{ t('admin.groups.platforms.' + value) }}
</span>
</template>
@@ -172,7 +159,7 @@
<template #cell-status="{ value }">
<span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
{{ value }}
{{ t('admin.accounts.status.' + value) }}
</span>
</template>
@@ -182,38 +169,14 @@
@click="handleEdit(row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/>
</svg>
<Icon name="edit" size="sm" />
<span class="text-xs">{{ t('common.edit') }}</span>
</button>
<button
@click="handleDelete(row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
<Icon name="trash" size="sm" />
<span class="text-xs">{{ t('common.delete') }}</span>
</button>
</div>
@@ -299,15 +262,12 @@
</label>
<!-- Help Tooltip -->
<div class="group relative inline-flex">
<svg
class="h-3.5 w-3.5 cursor-help text-gray-400 transition-colors hover:text-primary-500 dark:text-gray-500 dark:hover:text-primary-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<Icon
name="questionCircle"
size="sm"
:stroke-width="2"
class="cursor-help text-gray-400 transition-colors hover:text-primary-500 dark:text-gray-500 dark:hover:text-primary-400"
/>
<!-- Tooltip Popover -->
<div class="pointer-events-none absolute bottom-full left-0 z-50 mb-2 w-72 opacity-0 transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100">
<div class="rounded-lg bg-gray-900 p-3 text-white shadow-lg dark:bg-gray-800">
@@ -317,7 +277,7 @@
</p>
<div class="rounded bg-gray-800 p-2 dark:bg-gray-700">
<p class="text-xs leading-relaxed text-gray-300">
<span class="text-primary-400">💡 {{ t('admin.groups.exclusiveTooltip.example') }}</span>
<span class="inline-flex items-center gap-1 text-primary-400"><Icon name="lightbulb" size="xs" /> {{ t('admin.groups.exclusiveTooltip.example') }}</span>
{{ t('admin.groups.exclusiveTooltip.exampleContent') }}
</p>
</div>
@@ -539,15 +499,12 @@
</label>
<!-- Help Tooltip -->
<div class="group relative inline-flex">
<svg
class="h-3.5 w-3.5 cursor-help text-gray-400 transition-colors hover:text-primary-500 dark:text-gray-500 dark:hover:text-primary-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<Icon
name="questionCircle"
size="sm"
:stroke-width="2"
class="cursor-help text-gray-400 transition-colors hover:text-primary-500 dark:text-gray-500 dark:hover:text-primary-400"
/>
<!-- Tooltip Popover -->
<div class="pointer-events-none absolute bottom-full left-0 z-50 mb-2 w-72 opacity-0 transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100">
<div class="rounded-lg bg-gray-900 p-3 text-white shadow-lg dark:bg-gray-800">
@@ -557,7 +514,7 @@
</p>
<div class="rounded bg-gray-800 p-2 dark:bg-gray-700">
<p class="text-xs leading-relaxed text-gray-300">
<span class="text-primary-400">💡 {{ t('admin.groups.exclusiveTooltip.example') }}</span>
<span class="inline-flex items-center gap-1 text-primary-400"><Icon name="lightbulb" size="xs" /> {{ t('admin.groups.exclusiveTooltip.example') }}</span>
{{ t('admin.groups.exclusiveTooltip.exampleContent') }}
</p>
</div>
@@ -762,6 +719,7 @@ import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import Select from '@/components/common/Select.vue'
import PlatformIcon from '@/components/common/PlatformIcon.vue'
import Icon from '@/components/icons/Icon.vue'
const { t } = useI18n()
const appStore = useAppStore()
@@ -781,8 +739,8 @@ const columns = computed<Column[]>(() => [
// Filter options
const statusOptions = computed(() => [
{ value: '', label: t('admin.groups.allStatus') },
{ value: 'active', label: t('common.active') },
{ value: 'inactive', label: t('common.inactive') }
{ value: 'active', label: t('admin.accounts.status.active') },
{ value: 'inactive', label: t('admin.accounts.status.inactive') }
])
const exclusiveOptions = computed(() => [
@@ -807,8 +765,8 @@ const platformFilterOptions = computed(() => [
])
const editStatusOptions = computed(() => [
{ value: 'active', label: t('common.active') },
{ value: 'inactive', label: t('common.inactive') }
{ value: 'active', label: t('admin.accounts.status.active') },
{ value: 'inactive', label: t('admin.accounts.status.inactive') }
])
const subscriptionTypeOptions = computed(() => [
@@ -818,6 +776,7 @@ const subscriptionTypeOptions = computed(() => [
const groups = ref<Group[]>([])
const loading = ref(false)
const searchQuery = ref('')
const filters = reactive({
platform: '',
status: '',
@@ -832,6 +791,16 @@ const pagination = reactive({
let abortController: AbortController | null = null
const displayedGroups = computed(() => {
const q = searchQuery.value.trim().toLowerCase()
if (!q) return groups.value
return groups.value.filter((group) => {
const name = group.name?.toLowerCase?.() ?? ''
const description = group.description?.toLowerCase?.() ?? ''
return name.includes(q) || description.includes(q)
})
})
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showDeleteDialog = ref(false)
@@ -942,6 +911,10 @@ const closeCreateModal = () => {
}
const handleCreateGroup = async () => {
if (!createForm.name.trim()) {
appStore.showError(t('admin.groups.nameRequired'))
return
}
submitting.value = true
try {
await adminAPI.groups.create(createForm)
@@ -986,6 +959,10 @@ const closeEditModal = () => {
const handleUpdateGroup = async () => {
if (!editingGroup.value) return
if (!editForm.name.trim()) {
appStore.showError(t('admin.groups.nameRequired'))
return
}
submitting.value = true
try {

263
frontend/src/views/admin/ProxiesView.vue
View File

@@ -1,82 +1,60 @@
<template>
<AppLayout>
<TablePageLayout>
<template #actions>
<div class="flex justify-end gap-3">
<button
@click="loadProxies"
:disabled="loading"
class="btn btn-secondary"
:title="t('common.refresh')"
>
<svg
:class="['h-5 w-5', loading ? 'animate-spin' : '']"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<button @click="showCreateModal = true" class="btn btn-primary">
<svg
class="mr-2 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
{{ t('admin.proxies.createProxy') }}
</button>
</div>
</template>
<template #filters>
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div class="relative max-w-md flex-1">
<svg
class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
<input
v-model="searchQuery"
type="text"
:placeholder="t('admin.proxies.searchProxies')"
class="input pl-10"
@input="handleSearch"
/>
<!-- Top Toolbar: Left (search + filters) / Right (actions) -->
<div class="flex flex-wrap items-start justify-between gap-4">
<!-- Left: Fuzzy search + filters (wrap to multiple lines) -->
<div class="flex flex-1 flex-wrap items-center gap-3">
<!-- Search -->
<div class="relative w-full sm:w-64">
<Icon
name="search"
size="md"
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
/>
<input
v-model="searchQuery"
type="text"
:placeholder="t('admin.proxies.searchProxies')"
class="input pl-10"
@input="handleSearch"
/>
</div>
<!-- Filters -->
<div class="w-full sm:w-40">
<Select
v-model="filters.protocol"
:options="protocolOptions"
:placeholder="t('admin.proxies.allProtocols')"
@change="loadProxies"
/>
</div>
<div class="w-full sm:w-36">
<Select
v-model="filters.status"
:options="statusOptions"
:placeholder="t('admin.proxies.allStatus')"
@change="loadProxies"
/>
</div>
</div>
<div class="flex flex-wrap gap-3">
<Select
v-model="filters.protocol"
:options="protocolOptions"
:placeholder="t('admin.proxies.allProtocols')"
class="w-40"
@change="loadProxies"
/>
<Select
v-model="filters.status"
:options="statusOptions"
:placeholder="t('admin.proxies.allStatus')"
class="w-36"
@change="loadProxies"
/>
<!-- Right: Actions -->
<div class="ml-auto flex flex-wrap items-center justify-end gap-3">
<button
@click="loadProxies"
:disabled="loading"
class="btn btn-secondary"
:title="t('common.refresh')"
>
<Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
</button>
<button @click="showCreateModal = true" class="btn btn-primary">
<Icon name="plus" size="md" class="mr-2" />
{{ t('admin.proxies.createProxy') }}
</button>
</div>
</div>
</template>
@@ -103,7 +81,7 @@
<template #cell-status="{ value }">
<span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
{{ value }}
{{ t('admin.accounts.status.' + value) }}
</span>
</template>
@@ -134,58 +112,21 @@
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-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Icon v-else name="checkCircle" size="sm" />
<span class="text-xs">{{ t('admin.proxies.testConnection') }}</span>
</button>
<button
@click="handleEdit(row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/>
</svg>
<Icon name="edit" size="sm" />
<span class="text-xs">{{ t('common.edit') }}</span>
</button>
<button
@click="handleDelete(row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
<Icon name="trash" size="sm" />
<span class="text-xs">{{ t('common.delete') }}</span>
</button>
</div>
@@ -233,15 +174,7 @@
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
]"
>
<svg
class="mr-1.5 inline h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<Icon name="plus" size="sm" class="mr-1.5 inline" />
{{ t('admin.proxies.standardAdd') }}
</button>
<button
@@ -355,39 +288,20 @@
<!-- Parse Result -->
<div v-if="batchParseResult.total > 0" class="rounded-lg bg-gray-50 p-4 dark:bg-dark-700">
<div class="flex items-center gap-4 text-sm">
<div class="flex items-center gap-1.5">
<svg
class="h-4 w-4 text-primary-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div class="flex items-center gap-4 text-sm">
<div class="flex items-center gap-1.5">
<Icon name="checkCircle" size="sm" :stroke-width="2" class="text-primary-500" />
<span class="text-gray-700 dark:text-gray-300">
{{ t('admin.proxies.parsedCount', { count: batchParseResult.valid }) }}
</span>
</div>
<div v-if="batchParseResult.invalid > 0" class="flex items-center gap-1.5">
<svg
class="h-4 w-4 text-amber-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
/>
</svg>
<Icon
name="exclamationCircle"
size="sm"
:stroke-width="2"
class="text-amber-500"
/>
<span class="text-amber-600 dark:text-amber-400">
{{ t('admin.proxies.invalidCount', { count: batchParseResult.invalid }) }}
</span>
@@ -611,6 +525,7 @@ import BaseDialog from '@/components/common/BaseDialog.vue'
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import Select from '@/components/common/Select.vue'
import Icon from '@/components/icons/Icon.vue'
const { t } = useI18n()
const appStore = useAppStore()
@@ -634,21 +549,21 @@ const protocolOptions = computed(() => [
const statusOptions = computed(() => [
{ value: '', label: t('admin.proxies.allStatus') },
{ value: 'active', label: t('common.active') },
{ value: 'inactive', label: t('common.inactive') }
{ value: 'active', label: t('admin.accounts.status.active') },
{ value: 'inactive', label: t('admin.accounts.status.inactive') }
])
// Form options
const protocolSelectOptions = [
{ value: 'http', label: 'HTTP' },
{ value: 'https', label: 'HTTPS' },
{ value: 'socks5', label: 'SOCKS5' },
{ value: 'socks5h', label: 'SOCKS5H (服务端解析DNS)' }
]
const protocolSelectOptions = computed(() => [
{ value: 'http', label: t('admin.proxies.protocols.http') },
{ value: 'https', label: t('admin.proxies.protocols.https') },
{ value: 'socks5', label: t('admin.proxies.protocols.socks5') },
{ value: 'socks5h', label: t('admin.proxies.protocols.socks5h') }
])
const editStatusOptions = computed(() => [
{ value: 'active', label: t('common.active') },
{ value: 'inactive', label: t('common.inactive') }
{ value: 'active', label: t('admin.accounts.status.active') },
{ value: 'inactive', label: t('admin.accounts.status.inactive') }
])
const proxies = ref<Proxy[]>([])
@@ -877,6 +792,18 @@ const handleBatchCreate = async () => {
}
const handleCreateProxy = async () => {
if (!createForm.name.trim()) {
appStore.showError(t('admin.proxies.nameRequired'))
return
}
if (!createForm.host.trim()) {
appStore.showError(t('admin.proxies.hostRequired'))
return
}
if (createForm.port < 1 || createForm.port > 65535) {
appStore.showError(t('admin.proxies.portInvalid'))
return
}
submitting.value = true
try {
await adminAPI.proxies.create({
@@ -917,6 +844,18 @@ const closeEditModal = () => {
const handleUpdateProxy = async () => {
if (!editingProxy.value) return
if (!editForm.name.trim()) {
appStore.showError(t('admin.proxies.nameRequired'))
return
}
if (!editForm.host.trim()) {
appStore.showError(t('admin.proxies.hostRequired'))
return
}
if (editForm.port < 1 || editForm.port > 65535) {
appStore.showError(t('admin.proxies.portInvalid'))
return
}
submitting.value = true
try {

72
frontend/src/views/admin/RedeemView.vue
View File

@@ -9,19 +9,7 @@
class="btn btn-secondary"
:title="t('common.refresh')"
>
<svg
:class="['h-5 w-5', loading ? 'animate-spin' : '']"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
<Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
</button>
<button @click="showGenerateDialog = true" class="btn btn-primary">
{{ t('admin.redeem.generateCodes') }}
@@ -75,20 +63,7 @@
]"
:title="copiedCode === value ? t('admin.redeem.copied') : t('keys.copyToClipboard')"
>
<svg
v-if="copiedCode !== value"
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
<Icon v-if="copiedCode !== value" name="copy" size="sm" :stroke-width="2" />
<svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
@@ -112,7 +87,7 @@
: 'badge-primary'
]"
>
{{ value }}
{{ t('admin.redeem.types.' + value) }}
</span>
</template>
@@ -120,7 +95,7 @@
<span class="text-sm font-medium text-gray-900 dark:text-white">
<template v-if="row.type === 'balance'">${{ value.toFixed(2) }}</template>
<template v-else-if="row.type === 'subscription'">
{{ row.validity_days || 30 }}{{ t('admin.redeem.days') }}
{{ row.validity_days || 30 }} {{ t('admin.redeem.days') }}
<span v-if="row.group" class="ml-1 text-xs text-gray-500 dark:text-gray-400"
>({{ row.group.name }})</span
>
@@ -140,7 +115,7 @@
: 'badge-danger'
]"
>
{{ value }}
{{ t('admin.redeem.status.' + value) }}
</span>
</template>
@@ -341,14 +316,7 @@
@click="closeResultDialog"
class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
>
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
<Icon name="x" size="md" :stroke-width="2" />
</button>
</div>
<!-- Content -->
@@ -373,20 +341,7 @@
copiedAll ? 'btn-success' : 'btn-secondary'
]"
>
<svg
v-if="!copiedAll"
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
<Icon v-if="!copiedAll" name="copy" size="sm" :stroke-width="2" />
<svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
@@ -398,14 +353,7 @@
{{ copiedAll ? t('admin.redeem.copied') : t('admin.redeem.copyAll') }}
</button>
<button @click="downloadGeneratedCodes" class="btn btn-primary flex items-center gap-2">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
<Icon name="download" size="sm" :stroke-width="2" />
{{ t('admin.redeem.download') }}
</button>
</div>
@@ -430,6 +378,7 @@ import DataTable from '@/components/common/DataTable.vue'
import Pagination from '@/components/common/Pagination.vue'
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
import Select from '@/components/common/Select.vue'
import Icon from '@/components/icons/Icon.vue'
const { t } = useI18n()
const appStore = useAppStore()
@@ -525,7 +474,8 @@ const filterTypeOptions = computed(() => [
const filterStatusOptions = computed(() => [
{ value: '', label: t('admin.redeem.allStatus') },
{ value: 'unused', label: t('admin.redeem.unused') },
{ value: 'used', label: t('admin.redeem.used') }
{ value: 'used', label: t('admin.redeem.used') },
{ value: 'expired', label: t('admin.redeem.status.expired') }
])
const codes = ref<RedeemCode[]>([])

108
frontend/src/views/admin/SettingsView.vue
View File

@@ -24,17 +24,11 @@
class="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/20"
>
<div class="flex items-start">
<svg
class="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
<Icon
name="exclamationTriangle"
size="md"
class="mt-0.5 flex-shrink-0 text-amber-500"
/>
<p class="ml-3 text-sm text-amber-700 dark:text-amber-300">
{{ t('admin.settings.adminApiKey.securityWarning') }}
</p>
@@ -255,7 +249,11 @@
placeholder="0x4AAAAAAA..."
/>
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.settings.turnstile.secretKeyHint') }}
{{
form.turnstile_secret_key_configured
? t('admin.settings.turnstile.secretKeyConfiguredHint')
: t('admin.settings.turnstile.secretKeyHint')
}}
</p>
</div>
</div>
@@ -444,19 +442,7 @@
class="hidden"
@change="handleLogoUpload"
/>
<svg
class="mr-1.5 h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
/>
</svg>
<Icon name="upload" size="sm" class="mr-1.5" :stroke-width="2" />
{{ t('admin.settings.site.uploadImage') }}
</label>
<button
@@ -465,19 +451,7 @@
@click="form.site_logo = ''"
class="btn btn-secondary btn-sm text-red-600 hover:text-red-700 dark:text-red-400"
>
<svg
class="mr-1.5 h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
<Icon name="trash" size="sm" class="mr-1.5" :stroke-width="2" />
{{ t('admin.settings.site.remove') }}
</button>
</div>
@@ -577,10 +551,18 @@
v-model="form.smtp_password"
type="password"
class="input"
:placeholder="t('admin.settings.smtp.passwordPlaceholder')"
:placeholder="
form.smtp_password_configured
? t('admin.settings.smtp.passwordConfiguredPlaceholder')
: t('admin.settings.smtp.passwordPlaceholder')
"
/>
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
{{ t('admin.settings.smtp.passwordHint') }}
{{
form.smtp_password_configured
? t('admin.settings.smtp.passwordConfiguredHint')
: t('admin.settings.smtp.passwordHint')
}}
</p>
</div>
<div>
@@ -713,8 +695,9 @@
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { adminAPI } from '@/api'
import type { SystemSettings } from '@/api/admin/settings'
import type { SystemSettings, UpdateSettingsRequest } from '@/api/admin/settings'
import AppLayout from '@/components/layout/AppLayout.vue'
import Icon from '@/components/icons/Icon.vue'
import Toggle from '@/components/common/Toggle.vue'
import { useAppStore } from '@/stores'
@@ -735,7 +718,12 @@ const adminApiKeyMasked = ref('')
const adminApiKeyOperating = ref(false)
const newAdminApiKey = ref('')
const form = reactive<SystemSettings>({
type SettingsForm = SystemSettings & {
smtp_password: string
turnstile_secret_key: string
}
const form = reactive<SettingsForm>({
registration_enabled: true,
email_verify_enabled: false,
default_balance: 0,
@@ -750,13 +738,18 @@ const form = reactive<SystemSettings>({
smtp_port: 587,
smtp_username: '',
smtp_password: '',
smtp_password_configured: false,
smtp_from_email: '',
smtp_from_name: '',
smtp_use_tls: true,
// Cloudflare Turnstile
turnstile_enabled: false,
turnstile_site_key: '',
turnstile_secret_key: ''
turnstile_secret_key: '',
turnstile_secret_key_configured: false,
// Identity patch (Claude -> Gemini)
enable_identity_patch: true,
identity_patch_prompt: ''
})
function handleLogoUpload(event: Event) {
@@ -802,6 +795,8 @@ async function loadSettings() {
try {
const settings = await adminAPI.settings.getSettings()
Object.assign(form, settings)
form.smtp_password = ''
form.turnstile_secret_key = ''
} catch (error: any) {
appStore.showError(
t('admin.settings.failedToLoad') + ': ' + (error.message || t('common.unknownError'))
@@ -814,7 +809,32 @@ async function loadSettings() {
async function saveSettings() {
saving.value = true
try {
await adminAPI.settings.updateSettings(form)
const payload: UpdateSettingsRequest = {
registration_enabled: form.registration_enabled,
email_verify_enabled: form.email_verify_enabled,
default_balance: form.default_balance,
default_concurrency: form.default_concurrency,
site_name: form.site_name,
site_logo: form.site_logo,
site_subtitle: form.site_subtitle,
api_base_url: form.api_base_url,
contact_info: form.contact_info,
doc_url: form.doc_url,
smtp_host: form.smtp_host,
smtp_port: form.smtp_port,
smtp_username: form.smtp_username,
smtp_password: form.smtp_password || undefined,
smtp_from_email: form.smtp_from_email,
smtp_from_name: form.smtp_from_name,
smtp_use_tls: form.smtp_use_tls,
turnstile_enabled: form.turnstile_enabled,
turnstile_site_key: form.turnstile_site_key,
turnstile_secret_key: form.turnstile_secret_key || undefined
}
const updated = await adminAPI.settings.updateSettings(payload)
Object.assign(form, updated)
form.smtp_password = ''
form.turnstile_secret_key = ''
// Refresh cached public settings so sidebar/header update immediately
await appStore.fetchPublicSettings(true)
appStore.showSuccess(t('admin.settings.settingsSaved'))

310
frontend/src/views/admin/SubscriptionsView.vue
View File

@@ -1,62 +1,104 @@
<template>
<AppLayout>
<TablePageLayout>
<!-- Page Header Actions -->
<template #actions>
<div class="flex justify-end gap-3">
<button
@click="loadSubscriptions"
:disabled="loading"
class="btn btn-secondary"
:title="t('common.refresh')"
>
<svg
:class="['h-5 w-5', loading ? 'animate-spin' : '']"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<button @click="showAssignModal = true" class="btn btn-primary">
<svg
class="mr-2 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
{{ t('admin.subscriptions.assignSubscription') }}
</button>
</div>
</template>
<!-- Filters -->
<template #filters>
<div class="flex flex-wrap gap-3">
<Select
v-model="filters.status"
:options="statusOptions"
:placeholder="t('admin.subscriptions.allStatus')"
class="w-40"
@change="loadSubscriptions"
/>
<Select
v-model="filters.group_id"
:options="groupOptions"
:placeholder="t('admin.subscriptions.allGroups')"
class="w-48"
@change="loadSubscriptions"
/>
</div>
<!-- Top Toolbar: Left (search + filters) / Right (actions) -->
<div class="flex flex-wrap items-start justify-between gap-4">
<!-- Left: Fuzzy user search + filters (wrap to multiple lines) -->
<div class="flex flex-1 flex-wrap items-center gap-3">
<!-- User Search -->
<div
class="relative w-full sm:w-64"
data-filter-user-search
>
<Icon
name="search"
size="md"
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
/>
<input
v-model="filterUserKeyword"
type="text"
:placeholder="t('admin.users.searchUsers')"
class="input pl-10 pr-8"
@input="debounceSearchFilterUsers"
@focus="showFilterUserDropdown = true"
/>
<button
v-if="selectedFilterUser"
@click="clearFilterUser"
type="button"
class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
:title="t('common.clear')"
>
<Icon name="x" size="sm" :stroke-width="2" />
</button>
<!-- User Dropdown -->
<div
v-if="showFilterUserDropdown && (filterUserResults.length > 0 || filterUserKeyword)"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
>
<div
v-if="filterUserLoading"
class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
>
{{ t('common.loading') }}
</div>
<div
v-else-if="filterUserResults.length === 0 && filterUserKeyword"
class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
>
{{ t('common.noOptionsFound') }}
</div>
<button
v-for="user in filterUserResults"
:key="user.id"
type="button"
@click="selectFilterUser(user)"
class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
>
<span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
<span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
</button>
</div>
</div>
<!-- Filters -->
<div class="w-full sm:w-40">
<Select
v-model="filters.status"
:options="statusOptions"
:placeholder="t('admin.subscriptions.allStatus')"
@change="applyFilters"
/>
</div>
<div class="w-full sm:w-48">
<Select
v-model="filters.group_id"
:options="groupOptions"
:placeholder="t('admin.subscriptions.allGroups')"
@change="applyFilters"
/>
</div>
</div>
<!-- Right: Actions -->
<div class="ml-auto flex flex-wrap items-center justify-end gap-3">
<button
@click="loadSubscriptions"
:disabled="loading"
class="btn btn-secondary"
:title="t('common.refresh')"
>
<Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
</button>
<button @click="showAssignModal = true" class="btn btn-primary">
<Icon name="plus" size="md" class="mr-2" />
{{ t('admin.subscriptions.assignSubscription') }}
</button>
</div>
</div>
</template>
<!-- Subscriptions Table -->
@@ -72,7 +114,7 @@
</span>
</div>
<span class="font-medium text-gray-900 dark:text-white">{{
row.user?.email || `User #${row.user_id}`
row.user?.email || t('admin.redeem.userPrefix', { id: row.user_id })
}}</span>
</div>
</template>
@@ -262,19 +304,7 @@
@click="handleExtend(row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<Icon name="clock" size="sm" />
<span class="text-xs">{{ t('admin.subscriptions.extend') }}</span>
</button>
<button
@@ -282,19 +312,7 @@
@click="handleRevoke(row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
>
<svg
class="h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
/>
</svg>
<Icon name="ban" size="sm" />
<span class="text-xs">{{ t('admin.subscriptions.revoke') }}</span>
</button>
</div>
@@ -338,7 +356,7 @@
>
<div>
<label class="input-label">{{ t('admin.subscriptions.form.user') }}</label>
<div class="relative">
<div class="relative" data-assign-user-search>
<input
v-model="userSearchKeyword"
type="text"
@@ -353,14 +371,7 @@
type="button"
class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
<Icon name="x" size="sm" :stroke-width="2" />
</button>
<!-- User Dropdown -->
<div
@@ -529,6 +540,7 @@ import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import Select from '@/components/common/Select.vue'
import GroupBadge from '@/components/common/GroupBadge.vue'
import Icon from '@/components/icons/Icon.vue'
const { t } = useI18n()
const appStore = useAppStore()
@@ -555,6 +567,14 @@ const groups = ref<Group[]>([])
const loading = ref(false)
let abortController: AbortController | null = null
// Toolbar user filter (fuzzy search -> select user_id)
const filterUserKeyword = ref('')
const filterUserResults = ref<SimpleUser[]>([])
const filterUserLoading = ref(false)
const showFilterUserDropdown = ref(false)
const selectedFilterUser = ref<SimpleUser | null>(null)
let filterUserSearchTimeout: ReturnType<typeof setTimeout> | null = null
// User search state
const userSearchKeyword = ref('')
const userSearchResults = ref<SimpleUser[]>([])
@@ -565,7 +585,8 @@ let userSearchTimeout: ReturnType<typeof setTimeout> | null = null
const filters = reactive({
status: '',
group_id: ''
group_id: '',
user_id: null as number | null
})
const pagination = reactive({
page: 1,
@@ -604,6 +625,11 @@ const subscriptionGroupOptions = computed(() =>
.map((g) => ({ value: g.id, label: g.name }))
)
const applyFilters = () => {
pagination.page = 1
loadSubscriptions()
}
const loadSubscriptions = async () => {
if (abortController) {
abortController.abort()
@@ -614,12 +640,18 @@ const loadSubscriptions = async () => {
loading.value = true
try {
const response = await adminAPI.subscriptions.list(pagination.page, pagination.page_size, {
status: (filters.status as any) || undefined,
group_id: filters.group_id ? parseInt(filters.group_id) : undefined
}, {
signal
})
const response = await adminAPI.subscriptions.list(
pagination.page,
pagination.page_size,
{
status: (filters.status as any) || undefined,
group_id: filters.group_id ? parseInt(filters.group_id) : undefined,
user_id: filters.user_id || undefined
},
{
signal
}
)
if (signal.aborted || abortController !== requestController) return
subscriptions.value = response.items
pagination.total = response.total
@@ -646,6 +678,57 @@ const loadGroups = async () => {
}
}
// Toolbar user filter search with debounce
const debounceSearchFilterUsers = () => {
if (filterUserSearchTimeout) {
clearTimeout(filterUserSearchTimeout)
}
filterUserSearchTimeout = setTimeout(searchFilterUsers, 300)
}
const searchFilterUsers = async () => {
const keyword = filterUserKeyword.value.trim()
// Clear active user filter if user modified the search keyword
if (selectedFilterUser.value && keyword !== selectedFilterUser.value.email) {
selectedFilterUser.value = null
filters.user_id = null
applyFilters()
}
if (!keyword) {
filterUserResults.value = []
return
}
filterUserLoading.value = true
try {
filterUserResults.value = await adminAPI.usage.searchUsers(keyword)
} catch (error) {
console.error('Failed to search users:', error)
filterUserResults.value = []
} finally {
filterUserLoading.value = false
}
}
const selectFilterUser = (user: SimpleUser) => {
selectedFilterUser.value = user
filterUserKeyword.value = user.email
showFilterUserDropdown.value = false
filters.user_id = user.id
applyFilters()
}
const clearFilterUser = () => {
selectedFilterUser.value = null
filterUserKeyword.value = ''
filterUserResults.value = []
showFilterUserDropdown.value = false
filters.user_id = null
applyFilters()
}
// User search with debounce
const debounceSearchUsers = () => {
if (userSearchTimeout) {
@@ -717,7 +800,18 @@ const closeAssignModal = () => {
}
const handleAssignSubscription = async () => {
if (!assignForm.user_id || !assignForm.group_id) return
if (!assignForm.user_id) {
appStore.showError(t('admin.subscriptions.pleaseSelectUser'))
return
}
if (!assignForm.group_id) {
appStore.showError(t('admin.subscriptions.pleaseSelectGroup'))
return
}
if (!assignForm.validity_days || assignForm.validity_days < 1) {
appStore.showError(t('admin.subscriptions.validityDaysRequired'))
return
}
submitting.value = true
try {
@@ -801,15 +895,17 @@ const isExpiringSoon = (expiresAt: string): boolean => {
return days !== null && days <= 7
}
const getProgressWidth = (used: number, limit: number | null): string => {
const getProgressWidth = (used: number | null | undefined, limit: number | null): string => {
if (!limit || limit === 0) return '0%'
const percentage = Math.min((used / limit) * 100, 100)
const usedValue = used ?? 0
const percentage = Math.min((usedValue / limit) * 100, 100)
return `${percentage}%`
}
const getProgressClass = (used: number, limit: number | null): string => {
const getProgressClass = (used: number | null | undefined, limit: number | null): string => {
if (!limit || limit === 0) return 'bg-gray-400'
const percentage = (used / limit) * 100
const usedValue = used ?? 0
const percentage = (usedValue / limit) * 100
if (percentage >= 90) return 'bg-red-500'
if (percentage >= 70) return 'bg-orange-500'
return 'bg-green-500'
@@ -856,9 +952,8 @@ const formatResetTime = (windowStart: string, period: 'daily' | 'weekly' | 'mont
// Handle click outside to close user dropdown
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement
if (!target.closest('.relative')) {
showUserDropdown.value = false
}
if (!target.closest('[data-assign-user-search]')) showUserDropdown.value = false
if (!target.closest('[data-filter-user-search]')) showFilterUserDropdown.value = false
}
onMounted(() => {
@@ -869,6 +964,9 @@ onMounted(() => {
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
if (filterUserSearchTimeout) {
clearTimeout(filterUserSearchTimeout)
}
if (userSearchTimeout) {
clearTimeout(userSearchTimeout)
}

1475
frontend/src/views/admin/UsageView.vue
View File

File diff suppressed because it is too large Load Diff

1397
frontend/src/views/admin/UsersView.vue
View File

File diff suppressed because it is too large Load Diff