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

style(frontend): 统一 Views 模块代码风格

Browse Source 
- 移除语句末尾分号，规范代码格式
- 优化组件结构和类型定义
- 改进视图文档和示例
- 提升代码一致性
This commit is contained in:
ianshaw
2025-12-25 08:41:36 -08:00
parent f79b0f0fad
commit 5763f5ced3
25 changed files with 5374 additions and 2439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
frontend/src/views/HomeView.vue
View File

@@ -1,21 +1,33 @@
<template>
<div class="min-h-screen relative overflow-hidden bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950">
<div
class="relative min-h-screen overflow-hidden bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950"
>
<!-- Background Decorations -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-40 -right-40 w-96 h-96 bg-primary-400/20 rounded-full blur-3xl"></div>
<div class="absolute -bottom-40 -left-40 w-96 h-96 bg-primary-500/15 rounded-full blur-3xl"></div>
<div class="absolute top-1/4 left-1/3 w-72 h-72 bg-primary-300/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary-400/10 rounded-full blur-3xl"></div>
<div class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
<div class="pointer-events-none absolute inset-0 overflow-hidden">
<div
class="absolute -right-40 -top-40 h-96 w-96 rounded-full bg-primary-400/20 blur-3xl"
></div>
<div
class="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-primary-500/15 blur-3xl"
></div>
<div
class="absolute left-1/3 top-1/4 h-72 w-72 rounded-full bg-primary-300/10 blur-3xl"
></div>
<div
class="absolute bottom-1/4 right-1/4 h-64 w-64 rounded-full bg-primary-400/10 blur-3xl"
></div>
<div
class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"
></div>
</div>
<!-- Header -->
<header class="relative z-20 px-6 py-4">
<nav class="max-w-6xl mx-auto flex items-center justify-between">
<nav class="mx-auto flex max-w-6xl items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<div class="w-10 h-10 rounded-xl overflow-hidden shadow-md">
<img :src="siteLogo || '/logo.png'" alt="Logo" class="w-full h-full object-contain" />
<div class="h-10 w-10 overflow-hidden rounded-xl shadow-md">
<img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
</div>
</div>
@@ -30,25 +42,57 @@
:href="docUrl"
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-dark-400 dark:hover:bg-dark-800 dark:hover:text-white"
:title="t('home.viewDocs')"
>
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
<svg
class="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 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
/>
</svg>
</a>
<!-- Theme Toggle -->
<button
@click="toggleTheme"
class="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-dark-400 dark:hover:bg-dark-800 dark:hover:text-white"
:title="isDark ? t('home.switchToLight') : t('home.switchToDark')"
>
<svg v-if="isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
<svg
v-if="isDark"
class="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 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
/>
</svg>
<svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
<svg
v-else
class="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="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
/>
</svg>
</button>
@@ -56,20 +100,32 @@
<router-link
v-if="isAuthenticated"
to="/dashboard"
class="inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
class="inline-flex items-center gap-1.5 rounded-full bg-gray-900 py-1 pl-1 pr-2.5 transition-colors hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700"
>
<span class="w-5 h-5 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center text-[10px] font-semibold">
<span
class="flex h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-[10px] font-semibold text-white"
>
{{ userInitial }}
</span>
<span class="text-xs font-medium text-white">{{ t('home.dashboard') }}</span>
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
<svg
class="h-3 w-3 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
/>
</svg>
</router-link>
<router-link
v-else
to="/login"
class="inline-flex items-center px-3 py-1 rounded-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-700 text-xs font-medium text-white transition-colors"
class="inline-flex items-center rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700"
>
{{ t('home.login') }}
</router-link>
@@ -79,15 +135,17 @@
<!-- Main Content -->
<main class="relative z-10 px-6 py-16">
<div class="max-w-6xl mx-auto">
<div class="mx-auto max-w-6xl">
<!-- Hero Section - Left/Right Layout -->
<div class="flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 mb-12">
<div class="mb-12 flex flex-col items-center justify-between gap-12 lg:flex-row lg:gap-16">
<!-- Left: Text Content -->
<div class="flex-1 text-center lg:text-left">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-4">
<h1
class="mb-4 text-4xl font-bold text-gray-900 dark:text-white md:text-5xl lg:text-6xl"
>
{{ siteName }}
</h1>
<p class="text-lg md:text-xl text-gray-600 dark:text-dark-300 mb-8">
<p class="mb-8 text-lg text-gray-600 dark:text-dark-300 md:text-xl">
{{ siteSubtitle }}
</p>
@@ -98,15 +156,25 @@
class="btn btn-primary px-8 py-3 text-base shadow-lg shadow-primary-500/30"
>
{{ isAuthenticated ? t('home.goToDashboard') : t('home.getStarted') }}
<svg class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
<svg
class="ml-2 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</router-link>
</div>
</div>
<!-- Right: Terminal Animation -->
<div class="flex-1 flex justify-center lg:justify-end">
<div class="flex flex-1 justify-center lg:justify-end">
<div class="terminal-container">
<div class="terminal-window">
<!-- Window header -->
@@ -144,117 +212,239 @@
</div>
<!-- Feature Tags - Centered -->
<div class="flex flex-wrap items-center justify-center gap-4 md:gap-6 mb-12">
<div class="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-full bg-white/80 dark:bg-dark-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 shadow-sm">
<svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
<div class="mb-12 flex flex-wrap items-center justify-center gap-4 md:gap-6">
<div
class="inline-flex items-center gap-2.5 rounded-full border border-gray-200/50 bg-white/80 px-5 py-2.5 shadow-sm backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/80"
>
<svg
class="h-4 w-4 text-primary-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
/>
</svg>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.tags.subscriptionToApi') }}</span>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{
t('home.tags.subscriptionToApi')
}}</span>
</div>
<div class="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-full bg-white/80 dark:bg-dark-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 shadow-sm">
<svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
<div
class="inline-flex items-center gap-2.5 rounded-full border border-gray-200/50 bg-white/80 px-5 py-2.5 shadow-sm backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/80"
>
<svg
class="h-4 w-4 text-primary-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
/>
</svg>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.tags.stickySession') }}</span>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{
t('home.tags.stickySession')
}}</span>
</div>
<div class="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-full bg-white/80 dark:bg-dark-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 shadow-sm">
<svg class="w-4 h-4 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
<div
class="inline-flex items-center gap-2.5 rounded-full border border-gray-200/50 bg-white/80 px-5 py-2.5 shadow-sm backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/80"
>
<svg
class="h-4 w-4 text-primary-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.tags.realtimeBilling') }}</span>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{
t('home.tags.realtimeBilling')
}}</span>
</div>
</div>
<!-- Features Grid -->
<div class="grid md:grid-cols-3 gap-6 mb-12">
<div class="mb-12 grid gap-6 md:grid-cols-3">
<!-- Feature 1: Unified Gateway -->
<div class="group p-6 rounded-2xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-4 shadow-lg shadow-blue-500/30 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
<div
class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
>
<div
class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg shadow-blue-500/30 transition-transform group-hover:scale-110"
>
<svg
class="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('home.features.unifiedGateway') }}</h3>
<p class="text-gray-600 dark:text-dark-400 text-sm leading-relaxed">
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
{{ t('home.features.unifiedGateway') }}
</h3>
<p class="text-sm leading-relaxed text-gray-600 dark:text-dark-400">
{{ t('home.features.unifiedGatewayDesc') }}
</p>
</div>
<!-- Feature 2: Account Pool -->
<div class="group p-6 rounded-2xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-4 shadow-lg shadow-primary-500/30 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
<div
class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
>
<div
class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30 transition-transform group-hover:scale-110"
>
<svg
class="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('home.features.multiAccount') }}</h3>
<p class="text-gray-600 dark:text-dark-400 text-sm leading-relaxed">
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
{{ t('home.features.multiAccount') }}
</h3>
<p class="text-sm leading-relaxed text-gray-600 dark:text-dark-400">
{{ t('home.features.multiAccountDesc') }}
</p>
</div>
<!-- Feature 3: Billing & Quota -->
<div class="group p-6 rounded-2xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 hover:shadow-xl hover:shadow-primary-500/10 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-4 shadow-lg shadow-purple-500/30 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
<div
class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
>
<div
class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg shadow-purple-500/30 transition-transform group-hover:scale-110"
>
<svg
class="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ t('home.features.balanceQuota') }}</h3>
<p class="text-gray-600 dark:text-dark-400 text-sm leading-relaxed">
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
{{ t('home.features.balanceQuota') }}
</h3>
<p class="text-sm leading-relaxed text-gray-600 dark:text-dark-400">
{{ t('home.features.balanceQuotaDesc') }}
</p>
</div>
</div>
<!-- Supported Providers -->
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">{{ t('home.providers.title') }}</h2>
<p class="text-gray-600 dark:text-dark-400 text-sm">
<div class="mb-8 text-center">
<h2 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
{{ t('home.providers.title') }}
</h2>
<p class="text-sm text-gray-600 dark:text-dark-400">
{{ t('home.providers.description') }}
</p>
</div>
<div class="flex flex-wrap items-center justify-center gap-4 mb-16">
<div class="mb-16 flex flex-wrap items-center justify-center gap-4">
<!-- Claude - Supported -->
<div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-primary-200 dark:border-primary-800 ring-1 ring-primary-500/20">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-400 to-orange-500 flex items-center justify-center">
<span class="text-white text-xs font-bold">C</span>
<div
class="flex items-center gap-2 rounded-xl border border-primary-200 bg-white/60 px-5 py-3 ring-1 ring-primary-500/20 backdrop-blur-sm dark:border-primary-800 dark:bg-dark-800/60"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-400 to-orange-500"
>
<span class="text-xs font-bold text-white">C</span>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">Claude</span>
<span class="px-1.5 py-0.5 text-[10px] font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded">{{ t('home.providers.supported') }}</span>
<span
class="rounded bg-primary-100 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
>{{ t('home.providers.supported') }}</span
>
</div>
<!-- GPT - Supported -->
<div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/60 dark:bg-dark-800/60 backdrop-blur-sm border border-primary-200 dark:border-primary-800 ring-1 ring-primary-500/20">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
<span class="text-white text-xs font-bold">G</span>
<div
class="flex items-center gap-2 rounded-xl border border-primary-200 bg-white/60 px-5 py-3 ring-1 ring-primary-500/20 backdrop-blur-sm dark:border-primary-800 dark:bg-dark-800/60"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-green-600"
>
<span class="text-xs font-bold text-white">G</span>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">GPT</span>
<span class="px-1.5 py-0.5 text-[10px] font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded">{{ t('home.providers.supported') }}</span>
<span
class="rounded bg-primary-100 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
>{{ t('home.providers.supported') }}</span
>
</div>
<!-- Gemini - Coming Soon -->
<div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/40 dark:bg-dark-800/40 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 opacity-60">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
<span class="text-white text-xs font-bold">G</span>
<div
class="flex items-center gap-2 rounded-xl border border-gray-200/50 bg-white/40 px-5 py-3 opacity-60 backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/40"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600"
>
<span class="text-xs font-bold text-white">G</span>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">Gemini</span>
<span class="px-1.5 py-0.5 text-[10px] font-medium bg-gray-100 dark:bg-dark-700 text-gray-500 dark:text-dark-400 rounded">{{ t('home.providers.soon') }}</span>
<span
class="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-dark-700 dark:text-dark-400"
>{{ t('home.providers.soon') }}</span
>
</div>
<!-- More - Coming Soon -->
<div class="flex items-center gap-2 px-5 py-3 rounded-xl bg-white/40 dark:bg-dark-800/40 backdrop-blur-sm border border-gray-200/50 dark:border-dark-700/50 opacity-60">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-500 to-gray-600 flex items-center justify-center">
<span class="text-white text-xs font-bold">+</span>
<div
class="flex items-center gap-2 rounded-xl border border-gray-200/50 bg-white/40 px-5 py-3 opacity-60 backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/40"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-500 to-gray-600"
>
<span class="text-xs font-bold text-white">+</span>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-dark-200">More</span>
<span class="px-1.5 py-0.5 text-[10px] font-medium bg-gray-100 dark:bg-dark-700 text-gray-500 dark:text-dark-400 rounded">{{ t('home.providers.soon') }}</span>
<span
class="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-dark-700 dark:text-dark-400"
>{{ t('home.providers.soon') }}</span
>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="relative z-10 px-6 py-8 border-t border-gray-200/50 dark:border-dark-800/50">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-center gap-4 text-center sm:text-left">
<footer class="relative z-10 border-t border-gray-200/50 px-6 py-8 dark:border-dark-800/50">
<div
class="mx-auto flex max-w-6xl flex-col items-center justify-center gap-4 text-center sm:flex-row sm:text-left"
>
<p class="text-sm text-gray-500 dark:text-dark-400">
&copy; {{ currentYear }} {{ siteName }}. {{ t('home.footer.allRightsReserved') }}
</p>
@@ -264,7 +454,7 @@
:href="docUrl"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white transition-colors"
class="text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-white"
>
{{ t('home.docs') }}
</a>
@@ -272,7 +462,7 @@
:href="githubUrl"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-gray-500 hover:text-gray-700 dark:text-dark-400 dark:hover:text-white transition-colors"
class="text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-white"
>
GitHub
</a>
@@ -283,71 +473,74 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { getPublicSettings } from '@/api/auth';
import { useAuthStore } from '@/stores';
import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue';
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { getPublicSettings } from '@/api/auth'
import { useAuthStore } from '@/stores'
import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
const { t } = useI18n();
const { t } = useI18n()
const authStore = useAuthStore();
const authStore = useAuthStore()
// Site settings
const siteName = ref('Sub2API');
const siteLogo = ref('');
const siteSubtitle = ref('AI API Gateway Platform');
const docUrl = ref('');
const siteName = ref('Sub2API')
const siteLogo = ref('')
const siteSubtitle = ref('AI API Gateway Platform')
const docUrl = ref('')
// Theme
const isDark = ref(document.documentElement.classList.contains('dark'));
const isDark = ref(document.documentElement.classList.contains('dark'))
// GitHub URL
const githubUrl = 'https://github.com/Wei-Shaw/sub2api';
const githubUrl = 'https://github.com/Wei-Shaw/sub2api'
// Auth state
const isAuthenticated = computed(() => authStore.isAuthenticated);
const isAuthenticated = computed(() => authStore.isAuthenticated)
const userInitial = computed(() => {
const user = authStore.user;
if (!user || !user.email) return '';
return user.email.charAt(0).toUpperCase();
});
const user = authStore.user
if (!user || !user.email) return ''
return user.email.charAt(0).toUpperCase()
})
// Current year for footer
const currentYear = computed(() => new Date().getFullYear());
const currentYear = computed(() => new Date().getFullYear())
// Toggle theme
function toggleTheme() {
isDark.value = !isDark.value;
document.documentElement.classList.toggle('dark', isDark.value);
localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
isDark.value = !isDark.value
document.documentElement.classList.toggle('dark', isDark.value)
localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}
// Initialize theme
function initTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
isDark.value = true;
document.documentElement.classList.add('dark');
const savedTheme = localStorage.getItem('theme')
if (
savedTheme === 'dark' ||
(!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
isDark.value = true
document.documentElement.classList.add('dark')
}
}
onMounted(async () => {
initTheme();
initTheme()
// Check auth state
authStore.checkAuth();
authStore.checkAuth()
try {
const settings = await getPublicSettings();
siteName.value = settings.site_name || 'Sub2API';
siteLogo.value = settings.site_logo || '';
siteSubtitle.value = settings.site_subtitle || 'AI API Gateway Platform';
docUrl.value = settings.doc_url || '';
const settings = await getPublicSettings()
siteName.value = settings.site_name || 'Sub2API'
siteLogo.value = settings.site_logo || ''
siteSubtitle.value = settings.site_subtitle || 'AI API Gateway Platform'
docUrl.value = settings.doc_url || ''
} catch (error) {
console.error('Failed to load public settings:', error);
console.error('Failed to load public settings:', error)
}
});
})
</script>
<style scoped>
@@ -395,9 +588,15 @@ onMounted(async () => {
border-radius: 50%;
}
.btn-close { background: #ef4444; }
.btn-minimize { background: #eab308; }
.btn-maximize { background: #22c55e; }
.btn-close {
background: #ef4444;
}
.btn-minimize {
background: #eab308;
}
.btn-maximize {
background: #22c55e;
}
.terminal-title {
flex: 1;
@@ -425,21 +624,47 @@ onMounted(async () => {
animation: line-appear 0.5s ease forwards;
}
.line-1 { animation-delay: 0.3s; }
.line-2 { animation-delay: 1s; }
.line-3 { animation-delay: 1.8s; }
.line-4 { animation-delay: 2.5s; }
@keyframes line-appear {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
.line-1 {
animation-delay: 0.3s;
}
.line-2 {
animation-delay: 1s;
}
.line-3 {
animation-delay: 1.8s;
}
.line-4 {
animation-delay: 2.5s;
}
.code-prompt { color: #22c55e; font-weight: bold; }
.code-cmd { color: #38bdf8; }
.code-flag { color: #a78bfa; }
.code-url { color: #14b8a6; }
.code-comment { color: #64748b; font-style: italic; }
@keyframes line-appear {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.code-prompt {
color: #22c55e;
font-weight: bold;
}
.code-cmd {
color: #38bdf8;
}
.code-flag {
color: #a78bfa;
}
.code-url {
color: #14b8a6;
}
.code-comment {
color: #64748b;
font-style: italic;
}
.code-success {
color: #22c55e;
background: rgba(34, 197, 94, 0.15);
@@ -447,7 +672,9 @@ onMounted(async () => {
border-radius: 4px;
font-weight: 600;
}
.code-response { color: #fbbf24; }
.code-response {
color: #fbbf24;
}
/* Blinking Cursor */
.cursor {
@@ -459,8 +686,14 @@ onMounted(async () => {
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
/* Dark mode adjustments */

93
frontend/src/views/NotFoundView.vue
View File

@@ -1,20 +1,40 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-dark-950 px-4 relative overflow-hidden">
<div
class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 px-4 dark:bg-dark-950"
>
<!-- Background Decoration -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-400/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-primary-500/10 rounded-full blur-3xl"></div>
<div class="pointer-events-none absolute inset-0 overflow-hidden">
<div
class="absolute -right-40 -top-40 h-80 w-80 rounded-full bg-primary-400/10 blur-3xl"
></div>
<div
class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary-500/10 blur-3xl"
></div>
</div>
<div class="max-w-md w-full text-center relative z-10">
<div class="relative z-10 w-full max-w-md text-center">
<!-- 404 Display -->
<div class="mb-8">
<div class="relative inline-block">
<span class="text-[12rem] font-bold text-gray-100 dark:text-dark-800 leading-none">404</span>
<span class="text-[12rem] font-bold leading-none text-gray-100 dark:text-dark-800"
>404</span
>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30 flex items-center justify-center">
<svg class="w-12 h-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
<div
class="flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30"
>
<svg
class="h-12 w-12 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
</div>
</div>
@@ -23,31 +43,43 @@
<!-- Text Content -->
<div class="mb-8">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">
Page Not Found
</h1>
<h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Page Not Found</h1>
<p class="text-gray-500 dark:text-dark-400">
The page you are looking for doesn't exist or has been moved.
</p>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-3 justify-center">
<button
@click="goBack"
class="btn btn-secondary"
>
<svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
<div class="flex flex-col justify-center gap-3 sm:flex-row">
<button @click="goBack" class="btn btn-secondary">
<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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
/>
</svg>
Go Back
</button>
<router-link
to="/dashboard"
class="btn btn-primary"
>
<svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
<router-link to="/dashboard" 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="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
Go to Dashboard
</router-link>
@@ -56,7 +88,10 @@
<!-- Help Link -->
<p class="mt-8 text-sm text-gray-400 dark:text-dark-500">
Need help?
<a href="#" class="text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors">
<a
href="#"
class="text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
>
Contact support
</a>
</p>
@@ -65,11 +100,11 @@
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useRouter } from 'vue-router'
const router = useRouter();
const router = useRouter()
function goBack(): void {
router.back();
router.back()
}
</script>

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

@@ -10,26 +10,42 @@
:title="t('common.refresh')"
>
<svg
:class="['w-5 h-5', loading ? 'animate-spin' : '']"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
: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" />
<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="showCrsSyncModal = true"
class="btn btn-secondary"
title="从 CRS 同步"
>
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
<button @click="showCrsSyncModal = true" class="btn btn-secondary" title="从 CRS 同步">
<svg
class="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="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>
</button>
<button
@click="showCreateModal = true"
class="btn btn-primary"
>
<svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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.accounts.createAccount') }}
@@ -38,9 +54,19 @@
<!-- Search and Filters -->
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div class="relative flex-1 max-w-md">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 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" />
<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"
@@ -76,7 +102,10 @@
</div>
<!-- Bulk Actions Bar -->
<div v-if="selectedAccountIds.length > 0" class="card bg-primary-50 dark:bg-primary-900/20 border-primary-200 dark:border-primary-800 px-4 py-3">
<div
v-if="selectedAccountIds.length > 0"
class="card border-primary-200 bg-primary-50 px-4 py-3 dark:border-primary-800 dark:bg-primary-900/20"
>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-2">
<span class="text-sm font-medium text-primary-900 dark:text-primary-100">
@@ -97,22 +126,35 @@
</button>
</div>
<div class="flex items-center gap-2">
<button
@click="handleBulkDelete"
class="btn btn-danger btn-sm"
>
<svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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" />
<button @click="handleBulkDelete" class="btn btn-danger btn-sm">
<svg
class="mr-1.5 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="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>
{{ t('admin.accounts.bulkActions.delete') }}
</button>
<button
@click="showBulkEditModal = true"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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" />
<button @click="showBulkEditModal = true" class="btn btn-primary btn-sm">
<svg
class="mr-1.5 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="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>
{{ t('admin.accounts.bulkActions.edit') }}
</button>
@@ -144,7 +186,7 @@
<div class="flex items-center gap-1.5">
<span
:class="[
'inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium',
'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium',
(row.current_concurrency || 0) >= row.concurrency
? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
: (row.current_concurrency || 0) > 0
@@ -152,8 +194,18 @@
: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
]"
>
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
<svg
class="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
/>
</svg>
<span class="font-mono">{{ row.current_concurrency || 0 }}</span>
<span class="text-gray-400 dark:text-gray-500">/</span>
@@ -170,13 +222,17 @@
<button
@click="handleToggleSchedulable(row)"
:disabled="togglingSchedulable === row.id"
class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-800 disabled:opacity-50 disabled:cursor-not-allowed"
class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-dark-800"
:class="[
row.schedulable
? 'bg-primary-500 hover:bg-primary-600'
: 'bg-gray-200 dark:bg-dark-600 hover:bg-gray-300 dark:hover:bg-dark-500'
: 'bg-gray-200 hover:bg-gray-300 dark:bg-dark-600 dark:hover:bg-dark-500'
]"
:title="row.schedulable ? t('admin.accounts.schedulableEnabled') : t('admin.accounts.schedulableDisabled')"
:title="
row.schedulable
? t('admin.accounts.schedulableEnabled')
: t('admin.accounts.schedulableDisabled')
"
>
<span
class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
@@ -224,82 +280,160 @@
<button
v-if="row.status === 'error'"
@click="handleResetStatus(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-red-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-red-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
:title="t('admin.accounts.resetStatus')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
<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="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
/>
</svg>
</button>
<!-- Clear Rate Limit button -->
<button
v-if="isRateLimited(row) || isOverloaded(row)"
@click="handleClearRateLimit(row)"
class="p-2 rounded-lg hover:bg-amber-50 dark:hover:bg-amber-900/20 text-amber-500 hover:text-amber-600 dark:hover:text-amber-400 transition-colors"
class="rounded-lg p-2 text-amber-500 transition-colors hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20 dark:hover:text-amber-400"
:title="t('admin.accounts.clearRateLimit')"
>
<svg class="w-4 h-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
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>
</button>
<!-- Test Connection button -->
<button
@click="handleTest(row)"
class="p-2 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
:title="t('admin.accounts.testConnection')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z" />
<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="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z"
/>
</svg>
</button>
<!-- View Stats button -->
<button
@click="handleViewStats(row)"
class="p-2 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-indigo-50 hover:text-indigo-600 dark:hover:bg-indigo-900/20 dark:hover:text-indigo-400"
:title="t('admin.accounts.viewStats')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" 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
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="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>
</button>
<button
v-if="row.type === 'oauth' || row.type === 'setup-token'"
@click="handleReAuth(row)"
class="p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
:title="t('admin.accounts.reAuthorize')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
<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="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
/>
</svg>
</button>
<button
v-if="row.type === 'oauth' || row.type === 'setup-token'"
@click="handleRefreshToken(row)"
class="p-2 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-900/20 dark:hover:text-purple-400"
:title="t('admin.accounts.refreshToken')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" 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
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.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="handleEdit(row)"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
:title="t('common.edit')"
>
<svg class="w-4 h-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
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>
</button>
<button
@click="handleDelete(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
:title="t('common.delete')"
>
<svg class="w-4 h-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
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>
</button>
</div>
@@ -354,18 +488,10 @@
/>
<!-- Test Account Modal -->
<AccountTestModal
:show="showTestModal"
:account="testingAccount"
@close="closeTestModal"
/>
<AccountTestModal :show="showTestModal" :account="testingAccount" @close="closeTestModal" />
<!-- Account Stats Modal -->
<AccountStatsModal
:show="showStatsModal"
:account="statsAccount"
@close="closeStatsModal"
/>
<AccountStatsModal :show="showStatsModal" :account="statsAccount" @close="closeStatsModal" />
<!-- Delete Confirmation Dialog -->
<ConfirmDialog
@@ -420,7 +546,14 @@ import Pagination from '@/components/common/Pagination.vue'
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import Select from '@/components/common/Select.vue'
import { CreateAccountModal, EditAccountModal, BulkEditAccountModal, ReAuthAccountModal, AccountStatsModal, SyncFromCrsModal } from '@/components/account'
import {
CreateAccountModal,
EditAccountModal,
BulkEditAccountModal,
ReAuthAccountModal,
AccountStatsModal,
SyncFromCrsModal
} from '@/components/account'
import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
@@ -452,7 +585,8 @@ const columns = computed<Column[]>(() => [
const platformOptions = computed(() => [
{ value: '', label: t('admin.accounts.allPlatforms') },
{ value: 'anthropic', label: t('admin.accounts.platforms.anthropic') },
{ value: 'openai', label: t('admin.accounts.platforms.openai') }
{ value: 'openai', label: t('admin.accounts.platforms.openai') },
{ value: 'gemini', label: t('admin.accounts.platforms.gemini') }
])
const typeOptions = computed(() => [
@@ -478,7 +612,7 @@ const searchQuery = ref('')
const filters = reactive({
platform: '',
type: '',
status: '',
status: ''
})
const pagination = reactive({
page: 1,
@@ -508,7 +642,7 @@ const bulkDeleting = ref(false)
// Bulk selection
const selectedAccountIds = ref<number[]>([])
const selectCurrentPageAccounts = () => {
const pageIds = accounts.value.map(account => account.id)
const pageIds = accounts.value.map((account) => account.id)
const merged = new Set([...selectedAccountIds.value, ...pageIds])
selectedAccountIds.value = Array.from(merged)
}
@@ -528,16 +662,12 @@ const isOverloaded = (account: Account): boolean => {
const loadAccounts = async () => {
loading.value = true
try {
const response = await adminAPI.accounts.list(
pagination.page,
pagination.page_size,
{
platform: filters.platform || undefined,
type: filters.type || undefined,
status: filters.status || undefined,
search: searchQuery.value || undefined
}
)
const response = await adminAPI.accounts.list(pagination.page, pagination.page_size, {
platform: filters.platform || undefined,
type: filters.type || undefined,
status: filters.status || undefined,
search: searchQuery.value || undefined
})
accounts.value = response.items
pagination.total = response.total
pagination.pages = response.pages
@@ -653,8 +783,8 @@ const confirmBulkDelete = async () => {
bulkDeleting.value = true
const ids = [...selectedAccountIds.value]
try {
const results = await Promise.allSettled(ids.map(id => adminAPI.accounts.delete(id)))
const success = results.filter(result => result.status === 'fulfilled').length
const results = await Promise.allSettled(ids.map((id) => adminAPI.accounts.delete(id)))
const success = results.filter((result) => result.status === 'fulfilled').length
const failed = results.length - success
if (failed === 0) {
@@ -708,7 +838,7 @@ const handleToggleSchedulable = async (account: Account) => {
togglingSchedulable.value = account.id
try {
const updatedAccount = await adminAPI.accounts.setSchedulable(account.id, !account.schedulable)
const index = accounts.value.findIndex(a => a.id === account.id)
const index = accounts.value.findIndex((a) => a.id === account.id)
if (index !== -1) {
accounts.value[index] = updatedAccount
}
@@ -718,7 +848,9 @@ const handleToggleSchedulable = async (account: Account) => {
: t('admin.accounts.schedulableDisabled')
)
} catch (error: any) {
appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToToggleSchedulable'))
appStore.showError(
error.response?.data?.detail || t('admin.accounts.failedToToggleSchedulable')
)
console.error('Error toggling schedulable:', error)
} finally {
togglingSchedulable.value = null

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

@@ -12,15 +12,31 @@
<!-- Total API Keys -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.apiKeys') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.total_api_keys }}</p>
<p class="text-xs text-green-600 dark:text-green-400">{{ stats.active_api_keys }} {{ t('common.active') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.apiKeys') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ stats.total_api_keys }}
</p>
<p class="text-xs text-green-600 dark:text-green-400">
{{ stats.active_api_keys }} {{ t('common.active') }}
</p>
</div>
</div>
</div>
@@ -28,17 +44,35 @@
<!-- Service Accounts -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.accounts') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.total_accounts }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.accounts') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ stats.total_accounts }}
</p>
<p class="text-xs">
<span class="text-green-600 dark:text-green-400">{{ stats.normal_accounts }} {{ t('common.active') }}</span>
<span v-if="stats.error_accounts > 0" class="text-red-500 ml-1">{{ stats.error_accounts }} {{ t('common.error') }}</span>
<span class="text-green-600 dark:text-green-400"
>{{ stats.normal_accounts }} {{ t('common.active') }}</span
>
<span v-if="stats.error_accounts > 0" class="ml-1 text-red-500"
>{{ stats.error_accounts }} {{ t('common.error') }}</span
>
</p>
</div>
</div>
@@ -47,15 +81,31 @@
<!-- Today Requests -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.todayRequests') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.today_requests }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.todayRequests') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ stats.today_requests }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}
</p>
</div>
</div>
</div>
@@ -63,15 +113,31 @@
<!-- New Users Today -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.users') }}</p>
<p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">+{{ stats.today_new_users }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.total') }}: {{ formatNumber(stats.total_users) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.users') }}
</p>
<p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">
+{{ stats.today_new_users }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('common.total') }}: {{ formatNumber(stats.total_users) }}
</p>
</div>
</div>
</div>
@@ -82,17 +148,40 @@
<!-- Today Tokens -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.todayTokens') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.today_tokens) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.todayTokens') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(stats.today_tokens) }}
</p>
<p class="text-xs">
<span class="text-amber-600 dark:text-amber-400" :title="t('admin.dashboard.actual')">${{ formatCost(stats.today_actual_cost) }}</span>
<span class="text-gray-400 dark:text-gray-500" :title="t('admin.dashboard.standard')"> / ${{ formatCost(stats.today_cost) }}</span>
<span
class="text-amber-600 dark:text-amber-400"
:title="t('admin.dashboard.actual')"
>${{ formatCost(stats.today_actual_cost) }}</span
>
<span
class="text-gray-400 dark:text-gray-500"
:title="t('admin.dashboard.standard')"
>
/ ${{ formatCost(stats.today_cost) }}</span
>
</p>
</div>
</div>
@@ -101,17 +190,40 @@
<!-- Total Tokens -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-indigo-100 dark:bg-indigo-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.totalTokens') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.total_tokens) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.totalTokens') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(stats.total_tokens) }}
</p>
<p class="text-xs">
<span class="text-indigo-600 dark:text-indigo-400" :title="t('admin.dashboard.actual')">${{ formatCost(stats.total_actual_cost) }}</span>
<span class="text-gray-400 dark:text-gray-500" :title="t('admin.dashboard.standard')"> / ${{ formatCost(stats.total_cost) }}</span>
<span
class="text-indigo-600 dark:text-indigo-400"
:title="t('admin.dashboard.actual')"
>${{ formatCost(stats.total_actual_cost) }}</span
>
<span
class="text-gray-400 dark:text-gray-500"
:title="t('admin.dashboard.standard')"
>
/ ${{ formatCost(stats.total_cost) }}</span
>
</p>
</div>
</div>
@@ -120,19 +232,35 @@
<!-- Performance (RPM/TPM) -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div class="flex-1">
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.performance') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.performance') }}
</p>
<div class="flex items-baseline gap-2">
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.rpm) }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(stats.rpm) }}
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">RPM</span>
</div>
<div class="flex items-baseline gap-2">
<p class="text-sm font-semibold text-violet-600 dark:text-violet-400">{{ formatTokens(stats.tpm) }}</p>
<p class="text-sm font-semibold text-violet-600 dark:text-violet-400">
{{ formatTokens(stats.tpm) }}
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">TPM</span>
</div>
</div>
@@ -142,15 +270,31 @@
<!-- Avg Response Time -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-rose-100 dark:bg-rose-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.dashboard.avgResponse') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(stats.average_duration_ms) }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ stats.active_users }} {{ t('admin.dashboard.activeUsers') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.dashboard.avgResponse') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatDuration(stats.average_duration_ms) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ stats.active_users }} {{ t('admin.dashboard.activeUsers') }}
</p>
</div>
</div>
</div>
@@ -162,15 +306,19 @@
<div class="card p-4">
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.timeRange') }}:</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>{{ t('admin.dashboard.timeRange') }}:</span
>
<DateRangePicker
v-model:start-date="startDate"
v-model:end-date="endDate"
@change="onDateRangeChange"
/>
</div>
<div class="flex items-center gap-2 ml-auto">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.granularity') }}:</span>
<div class="ml-auto flex items-center gap-2">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>{{ t('admin.dashboard.granularity') }}:</span
>
<div class="w-28">
<Select
v-model="granularity"
@@ -184,22 +332,21 @@
<!-- Charts Grid -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<ModelDistributionChart
:model-stats="modelStats"
:loading="chartsLoading"
/>
<TokenUsageTrend
:trend-data="trendData"
:loading="chartsLoading"
/>
<ModelDistributionChart :model-stats="modelStats" :loading="chartsLoading" />
<TokenUsageTrend :trend-data="trendData" :loading="chartsLoading" />
</div>
<!-- User Usage Trend (Full Width) -->
<div class="card p-4">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('admin.dashboard.recentUsage') }} (Top 12)</h3>
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
{{ t('admin.dashboard.recentUsage') }} (Top 12)
</h3>
<div class="h-64">
<Line v-if="userTrendChartData" :data="userTrendChartData" :options="lineOptions" />
<div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
<div
v-else
class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
>
{{ t('admin.dashboard.noDataAvailable') }}
</div>
</div>
@@ -268,7 +415,7 @@ const endDate = ref('')
// Granularity options for Select component
const granularityOptions = computed(() => [
{ value: 'day', label: t('admin.dashboard.day') },
{ value: 'hour', label: t('admin.dashboard.hour') },
{ value: 'hour', label: t('admin.dashboard.hour') }
])
// Dark mode detection
@@ -279,7 +426,7 @@ const isDarkMode = computed(() => {
// Chart colors
const chartColors = computed(() => ({
text: isDarkMode.value ? '#e5e7eb' : '#374151',
grid: isDarkMode.value ? '#374151' : '#e5e7eb',
grid: isDarkMode.value ? '#374151' : '#e5e7eb'
}))
// Line chart options (for user trend chart)
@@ -288,7 +435,7 @@ const lineOptions = computed(() => ({
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'index' as const,
mode: 'index' as const
},
plugins: {
legend: {
@@ -299,43 +446,43 @@ const lineOptions = computed(() => ({
pointStyle: 'circle',
padding: 15,
font: {
size: 11,
},
},
size: 11
}
}
},
tooltip: {
callbacks: {
label: (context: any) => {
return `${context.dataset.label}: ${formatTokens(context.raw)}`
},
},
},
}
}
}
},
scales: {
x: {
grid: {
color: chartColors.value.grid,
color: chartColors.value.grid
},
ticks: {
color: chartColors.value.text,
font: {
size: 10,
},
},
size: 10
}
}
},
y: {
grid: {
color: chartColors.value.grid,
color: chartColors.value.grid
},
ticks: {
color: chartColors.value.text,
font: {
size: 10,
size: 10
},
callback: (value: string | number) => formatTokens(Number(value)),
},
},
},
callback: (value: string | number) => formatTokens(Number(value))
}
}
}
}))
// User trend chart data
@@ -354,7 +501,7 @@ const userTrendChartData = computed(() => {
const userGroups = new Map<string, { name: string; data: Map<string, number> }>()
const allDates = new Set<string>()
userTrend.value.forEach(point => {
userTrend.value.forEach((point) => {
allDates.add(point.date)
const key = getDisplayName(point.email, point.user_id)
if (!userGroups.has(key)) {
@@ -364,20 +511,33 @@ const userTrendChartData = computed(() => {
})
const sortedDates = Array.from(allDates).sort()
const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16', '#06b6d4', '#a855f7']
const colors = [
'#3b82f6',
'#10b981',
'#f59e0b',
'#ef4444',
'#8b5cf6',
'#ec4899',
'#14b8a6',
'#f97316',
'#6366f1',
'#84cc16',
'#06b6d4',
'#a855f7'
]
const datasets = Array.from(userGroups.values()).map((group, idx) => ({
label: group.name,
data: sortedDates.map(date => group.data.get(date) || 0),
data: sortedDates.map((date) => group.data.get(date) || 0),
borderColor: colors[idx % colors.length],
backgroundColor: `${colors[idx % colors.length]}20`,
fill: false,
tension: 0.3,
tension: 0.3
}))
return {
labels: sortedDates,
datasets,
datasets
}
})
@@ -417,7 +577,11 @@ const formatDuration = (ms: number): string => {
}
// Date range change handler
const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
const onDateRangeChange = (range: {
startDate: string
endDate: string
preset: string | null
}) => {
// Auto-select granularity based on date range
const start = new Date(range.startDate)
const end = new Date(range.endDate)
@@ -464,13 +628,13 @@ const loadChartData = async () => {
const params = {
start_date: startDate.value,
end_date: endDate.value,
granularity: granularity.value,
granularity: granularity.value
}
const [trendResponse, modelResponse, userResponse] = await Promise.all([
adminAPI.dashboard.getUsageTrend(params),
adminAPI.dashboard.getModelStats({ start_date: startDate.value, end_date: endDate.value }),
adminAPI.dashboard.getUserUsageTrend({ ...params, limit: 12 }),
adminAPI.dashboard.getUserUsageTrend({ ...params, limit: 12 })
])
trendData.value = trendResponse.trend || []
@@ -493,7 +657,7 @@ onMounted(() => {
<style scoped>
/* Compact Select styling for dashboard */
:deep(.select-trigger) {
@apply px-3 py-1.5 text-sm rounded-lg;
@apply rounded-lg px-3 py-1.5 text-sm;
}
:deep(.select-dropdown) {

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

@@ -10,17 +10,27 @@
:title="t('common.refresh')"
>
<svg
:class="['w-5 h-5', loading ? 'animate-spin' : '']"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
: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" />
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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.groups.createGroup') }}
@@ -62,14 +72,16 @@
<template #cell-platform="{ value }">
<span
:class="[
'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
value === 'anthropic'
? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
: value === 'openai'
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
]"
>
<PlatformIcon :platform="value" size="xs" />
{{ value === 'anthropic' ? 'Anthropic' : 'OpenAI' }}
{{ value === 'anthropic' ? 'Anthropic' : value === 'openai' ? 'OpenAI' : 'Gemini' }}
</span>
</template>
@@ -78,24 +90,49 @@
<!-- Type Badge -->
<span
:class="[
'inline-block px-2 py-0.5 rounded-full text-xs font-medium',
'inline-block rounded-full px-2 py-0.5 text-xs font-medium',
row.subscription_type === 'subscription'
? 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
]"
>
{{ row.subscription_type === 'subscription' ? t('admin.groups.subscription.subscription') : t('admin.groups.subscription.standard') }}
{{
row.subscription_type === 'subscription'
? t('admin.groups.subscription.subscription')
: t('admin.groups.subscription.standard')
}}
</span>
<!-- Subscription Limits - compact single line -->
<div v-if="row.subscription_type === 'subscription'" class="text-xs text-gray-500 dark:text-gray-400">
<template v-if="row.daily_limit_usd || row.weekly_limit_usd || row.monthly_limit_usd">
<span v-if="row.daily_limit_usd">${{ row.daily_limit_usd }}/{{ t('admin.groups.limitDay') }}</span>
<span v-if="row.daily_limit_usd && (row.weekly_limit_usd || row.monthly_limit_usd)" class="mx-1 text-gray-300 dark:text-gray-600">·</span>
<span v-if="row.weekly_limit_usd">${{ row.weekly_limit_usd }}/{{ t('admin.groups.limitWeek') }}</span>
<span v-if="row.weekly_limit_usd && row.monthly_limit_usd" class="mx-1 text-gray-300 dark:text-gray-600">·</span>
<span v-if="row.monthly_limit_usd">${{ row.monthly_limit_usd }}/{{ t('admin.groups.limitMonth') }}</span>
<div
v-if="row.subscription_type === 'subscription'"
class="text-xs text-gray-500 dark:text-gray-400"
>
<template
v-if="row.daily_limit_usd || row.weekly_limit_usd || row.monthly_limit_usd"
>
<span v-if="row.daily_limit_usd"
>${{ row.daily_limit_usd }}/{{ t('admin.groups.limitDay') }}</span
>
<span
v-if="row.daily_limit_usd && (row.weekly_limit_usd || row.monthly_limit_usd)"
class="mx-1 text-gray-300 dark:text-gray-600"
>·</span
>
<span v-if="row.weekly_limit_usd"
>${{ row.weekly_limit_usd }}/{{ t('admin.groups.limitWeek') }}</span
>
<span
v-if="row.weekly_limit_usd && row.monthly_limit_usd"
class="mx-1 text-gray-300 dark:text-gray-600"
>·</span
>
<span v-if="row.monthly_limit_usd"
>${{ row.monthly_limit_usd }}/{{ t('admin.groups.limitMonth') }}</span
>
</template>
<span v-else class="text-gray-400 dark:text-gray-500">{{ t('admin.groups.subscription.noLimit') }}</span>
<span v-else class="text-gray-400 dark:text-gray-500">{{
t('admin.groups.subscription.noLimit')
}}</span>
</div>
</div>
</template>
@@ -105,29 +142,21 @@
</template>
<template #cell-is_exclusive="{ value }">
<span
:class="[
'badge',
value ? 'badge-primary' : 'badge-gray'
]"
>
<span :class="['badge', value ? 'badge-primary' : 'badge-gray']">
{{ value ? t('admin.groups.exclusive') : t('admin.groups.public') }}
</span>
</template>
<template #cell-account_count="{ value }">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-dark-600 dark:text-gray-300">
<span
class="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800 dark:bg-dark-600 dark:text-gray-300"
>
{{ t('admin.groups.accountsCount', { count: value || 0 }) }}
</span>
</template>
<template #cell-status="{ value }">
<span
:class="[
'badge',
value === 'active' ? 'badge-success' : 'badge-danger'
]"
>
<span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
{{ value }}
</span>
</template>
@@ -136,22 +165,40 @@
<div class="flex items-center gap-1">
<button
@click="handleEdit(row)"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
:title="t('common.edit')"
>
<svg class="w-4 h-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
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>
</button>
<button
@click="handleDelete(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
:title="t('common.delete')"
>
<svg class="w-4 h-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
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>
</button>
</div>
@@ -207,10 +254,7 @@
</div>
<div>
<label class="input-label">{{ t('admin.groups.form.platform') }}</label>
<Select
v-model="createForm.platform"
:options="platformOptions"
/>
<Select v-model="createForm.platform" :options="platformOptions" />
<p class="input-hint">{{ t('admin.groups.platformHint') }}</p>
</div>
<div v-if="createForm.subscription_type !== 'subscription'">
@@ -236,7 +280,7 @@
>
<span
:class="[
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow',
'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
createForm.is_exclusive ? 'translate-x-6' : 'translate-x-1'
]"
/>
@@ -247,20 +291,22 @@
</div>
<!-- Subscription Configuration -->
<div class="border-t pt-4 mt-4">
<h4 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{{ t('admin.groups.subscription.title') }}</h4>
<div class="mt-4 border-t pt-4">
<h4 class="mb-4 text-sm font-medium text-gray-900 dark:text-white">
{{ t('admin.groups.subscription.title') }}
</h4>
<div class="mb-4">
<label class="input-label">{{ t('admin.groups.subscription.type') }}</label>
<Select
v-model="createForm.subscription_type"
:options="subscriptionTypeOptions"
/>
<Select v-model="createForm.subscription_type" :options="subscriptionTypeOptions" />
<p class="input-hint">{{ t('admin.groups.subscription.typeHint') }}</p>
</div>
<!-- Subscription limits (only show when subscription type is selected) -->
<div v-if="createForm.subscription_type === 'subscription'" class="space-y-4 pl-4 border-l-2 border-primary-200 dark:border-primary-800">
<div
v-if="createForm.subscription_type === 'subscription'"
class="space-y-4 border-l-2 border-primary-200 pl-4 dark:border-primary-800"
>
<div>
<label class="input-label">{{ t('admin.groups.subscription.dailyLimit') }}</label>
<input
@@ -298,26 +344,29 @@
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeCreateModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeCreateModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('admin.groups.creating') : t('common.create') }}
</button>
@@ -335,28 +384,15 @@
<form v-if="editingGroup" @submit.prevent="handleUpdateGroup" class="space-y-5">
<div>
<label class="input-label">{{ t('admin.groups.form.name') }}</label>
<input
v-model="editForm.name"
type="text"
required
class="input"
/>
<input v-model="editForm.name" type="text" required class="input" />
</div>
<div>
<label class="input-label">{{ t('admin.groups.form.description') }}</label>
<textarea
v-model="editForm.description"
rows="3"
class="input"
></textarea>
<textarea v-model="editForm.description" rows="3" class="input"></textarea>
</div>
<div>
<label class="input-label">{{ t('admin.groups.form.platform') }}</label>
<Select
v-model="editForm.platform"
:options="platformOptions"
:disabled="true"
/>
<Select v-model="editForm.platform" :options="platformOptions" :disabled="true" />
<p class="input-hint">{{ t('admin.groups.platformNotEditable') }}</p>
</div>
<div v-if="editForm.subscription_type !== 'subscription'">
@@ -381,7 +417,7 @@
>
<span
:class="[
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow',
'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
editForm.is_exclusive ? 'translate-x-6' : 'translate-x-1'
]"
/>
@@ -392,15 +428,14 @@
</div>
<div>
<label class="input-label">{{ t('admin.groups.form.status') }}</label>
<Select
v-model="editForm.status"
:options="editStatusOptions"
/>
<Select v-model="editForm.status" :options="editStatusOptions" />
</div>
<!-- Subscription Configuration -->
<div class="border-t pt-4 mt-4">
<h4 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{{ t('admin.groups.subscription.title') }}</h4>
<div class="mt-4 border-t pt-4">
<h4 class="mb-4 text-sm font-medium text-gray-900 dark:text-white">
{{ t('admin.groups.subscription.title') }}
</h4>
<div class="mb-4">
<label class="input-label">{{ t('admin.groups.subscription.type') }}</label>
@@ -413,7 +448,10 @@
</div>
<!-- Subscription limits (only show when subscription type is selected) -->
<div v-if="editForm.subscription_type === 'subscription'" class="space-y-4 pl-4 border-l-2 border-primary-200 dark:border-primary-800">
<div
v-if="editForm.subscription_type === 'subscription'"
class="space-y-4 border-l-2 border-primary-200 pl-4 dark:border-primary-800"
>
<div>
<label class="input-label">{{ t('admin.groups.subscription.dailyLimit') }}</label>
<input
@@ -451,26 +489,29 @@
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeEditModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeEditModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('admin.groups.updating') : t('common.update') }}
</button>
@@ -537,13 +578,15 @@ const exclusiveOptions = computed(() => [
const platformOptions = computed(() => [
{ value: 'anthropic', label: 'Anthropic' },
{ value: 'openai', label: 'OpenAI' }
{ value: 'openai', label: 'OpenAI' },
{ value: 'gemini', label: 'Gemini' }
])
const platformFilterOptions = computed(() => [
{ value: '', label: t('admin.groups.allPlatforms') },
{ value: 'anthropic', label: 'Anthropic' },
{ value: 'openai', label: 'OpenAI' }
{ value: 'openai', label: 'OpenAI' },
{ value: 'gemini', label: 'Gemini' }
])
const editStatusOptions = computed(() => [
@@ -616,15 +659,11 @@ const deleteConfirmMessage = computed(() => {
const loadGroups = async () => {
loading.value = true
try {
const response = await adminAPI.groups.list(
pagination.page,
pagination.page_size,
{
platform: (filters.platform as GroupPlatform) || undefined,
status: filters.status as any,
is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
}
)
const response = await adminAPI.groups.list(pagination.page, pagination.page_size, {
platform: (filters.platform as GroupPlatform) || undefined,
status: filters.status as any,
is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
})
groups.value = response.items
pagination.total = response.total
pagination.pages = response.pages
@@ -727,12 +766,15 @@ const confirmDelete = async () => {
}
// 监听 subscription_type 变化，订阅模式时重置 rate_multiplier 为 1，is_exclusive 为 true
watch(() => createForm.subscription_type, (newVal) => {
if (newVal === 'subscription') {
createForm.rate_multiplier = 1.0
createForm.is_exclusive = true
watch(
() => createForm.subscription_type,
(newVal) => {
if (newVal === 'subscription') {
createForm.rate_multiplier = 1.0
createForm.is_exclusive = true
}
}
})
)
onMounted(() => {
loadGroups()

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

@@ -10,17 +10,27 @@
:title="t('common.refresh')"
>
<svg
:class="['w-5 h-5', loading ? 'animate-spin' : '']"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
: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" />
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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') }}
@@ -29,9 +39,19 @@
<!-- Search and Filters -->
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div class="relative flex-1 max-w-md">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 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" />
<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"
@@ -69,10 +89,7 @@
<template #cell-protocol="{ value }">
<span
v-if="value"
:class="[
'badge',
value === 'socks5' ? 'badge-primary' : 'badge-gray'
]"
:class="['badge', value === 'socks5' ? 'badge-primary' : 'badge-gray']"
>
{{ value.toUpperCase() }}
</span>
@@ -84,12 +101,7 @@
</template>
<template #cell-status="{ value }">
<span
:class="[
'badge',
value === 'active' ? 'badge-success' : 'badge-danger'
]"
>
<span :class="['badge', value === 'active' ? 'badge-success' : 'badge-danger']">
{{ value }}
</span>
</template>
@@ -99,35 +111,80 @@
<button
@click="handleTestConnection(row)"
:disabled="testingProxyIds.has(row.id)"
class="p-2 rounded-lg hover:bg-emerald-50 dark:hover:bg-emerald-900/20 text-gray-500 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-400"
:title="t('admin.proxies.testConnection')"
>
<svg v-if="testingProxyIds.has(row.id)" class="w-4 h-4 animate-spin" 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
v-if="testingProxyIds.has(row.id)"
class="h-4 w-4 animate-spin"
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="w-4 h-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
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>
</button>
<button
@click="handleEdit(row)"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
:title="t('common.edit')"
>
<svg class="w-4 h-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
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>
</button>
<button
@click="handleDelete(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
:title="t('common.delete')"
>
<svg class="w-4 h-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
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>
</button>
</div>
@@ -162,18 +219,24 @@
@close="closeCreateModal"
>
<!-- Tab Switch -->
<div class="flex mb-6 border-b border-gray-200 dark:border-dark-600">
<div class="mb-6 flex border-b border-gray-200 dark:border-dark-600">
<button
type="button"
@click="createMode = 'standard'"
:class="[
'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
'-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors',
createMode === 'standard'
? 'border-primary-500 text-primary-600 dark:text-primary-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
]"
>
<svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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>
{{ t('admin.proxies.standardAdd') }}
@@ -182,14 +245,24 @@
type="button"
@click="createMode = 'batch'"
:class="[
'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
'-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors',
createMode === 'batch'
? 'border-primary-500 text-primary-600 dark:text-primary-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
]"
>
<svg class="w-4 h-4 inline mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
<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="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
/>
</svg>
{{ t('admin.proxies.batchAdd') }}
</button>
@@ -209,10 +282,7 @@
</div>
<div>
<label class="input-label">{{ t('admin.proxies.protocol') }}</label>
<Select
v-model="createForm.protocol"
:options="protocolSelectOptions"
/>
<Select v-model="createForm.protocol" :options="protocolSelectOptions" />
</div>
<div class="grid grid-cols-2 gap-4">
<div>
@@ -258,26 +328,29 @@
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeCreateModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeCreateModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('admin.proxies.creating') : t('common.create') }}
</button>
@@ -301,27 +374,57 @@
</div>
<!-- Parse Result -->
<div v-if="batchParseResult.total > 0" class="rounded-lg p-4 bg-gray-50 dark:bg-dark-700">
<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="w-4 h-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
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>
<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="w-4 h-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
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>
<span class="text-amber-600 dark:text-amber-400">
{{ t('admin.proxies.invalidCount', { count: batchParseResult.invalid }) }}
</span>
</div>
<div v-if="batchParseResult.duplicate > 0" class="flex items-center gap-1.5">
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
<svg
class="h-4 w-4 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
/>
</svg>
<span class="text-gray-500 dark:text-gray-400">
{{ t('admin.proxies.duplicateCount', { count: batchParseResult.duplicate }) }}
@@ -331,11 +434,7 @@
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeCreateModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeCreateModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
@@ -346,14 +445,29 @@
>
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('admin.proxies.importing') : t('admin.proxies.importProxies', { count: batchParseResult.valid }) }}
{{
submitting
? t('admin.proxies.importing')
: t('admin.proxies.importProxies', { count: batchParseResult.valid })
}}
</button>
</div>
</div>
@@ -369,29 +483,16 @@
<form v-if="editingProxy" @submit.prevent="handleUpdateProxy" class="space-y-5">
<div>
<label class="input-label">{{ t('admin.proxies.name') }}</label>
<input
v-model="editForm.name"
type="text"
required
class="input"
/>
<input v-model="editForm.name" type="text" required class="input" />
</div>
<div>
<label class="input-label">{{ t('admin.proxies.protocol') }}</label>
<Select
v-model="editForm.protocol"
:options="protocolSelectOptions"
/>
<Select v-model="editForm.protocol" :options="protocolSelectOptions" />
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">{{ t('admin.proxies.host') }}</label>
<input
v-model="editForm.host"
type="text"
required
class="input"
/>
<input v-model="editForm.host" type="text" required class="input" />
</div>
<div>
<label class="input-label">{{ t('admin.proxies.port') }}</label>
@@ -407,11 +508,7 @@
</div>
<div>
<label class="input-label">{{ t('admin.proxies.username') }}</label>
<input
v-model="editForm.username"
type="text"
class="input"
/>
<input v-model="editForm.username" type="text" class="input" />
</div>
<div>
<label class="input-label">{{ t('admin.proxies.password') }}</label>
@@ -424,33 +521,33 @@
</div>
<div>
<label class="input-label">{{ t('admin.proxies.status') }}</label>
<Select
v-model="editForm.status"
:options="editStatusOptions"
/>
<Select v-model="editForm.status" :options="editStatusOptions" />
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeEditModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeEditModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('admin.proxies.updating') : t('common.update') }}
</button>
@@ -585,15 +682,11 @@ const editForm = reactive({
const loadProxies = async () => {
loading.value = true
try {
const response = await adminAPI.proxies.list(
pagination.page,
pagination.page_size,
{
protocol: filters.protocol || undefined,
status: filters.status as any,
search: searchQuery.value || undefined
}
)
const response = await adminAPI.proxies.list(pagination.page, pagination.page_size, {
protocol: filters.protocol || undefined,
status: filters.status as any,
search: searchQuery.value || undefined
})
proxies.value = response.items
pagination.total = response.total
pagination.pages = response.pages
@@ -637,7 +730,9 @@ const closeCreateModal = () => {
}
// Parse proxy URL: protocol://user:pass@host:port or protocol://host:port
const parseProxyUrl = (line: string): {
const parseProxyUrl = (
line: string
): {
protocol: ProxyProtocol
host: string
port: number
@@ -668,7 +763,7 @@ const parseProxyUrl = (line: string): {
}
const parseBatchInput = () => {
const lines = batchInput.value.split('\n').filter(l => l.trim())
const lines = batchInput.value.split('\n').filter((l) => l.trim())
const seen = new Set<string>()
const proxies: typeof batchParseResult.proxies = []
let invalid = 0

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

@@ -10,23 +10,27 @@
:title="t('common.refresh')"
>
<svg
:class="['w-5 h-5', loading ? 'animate-spin' : '']"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
: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" />
<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="showGenerateDialog = true"
class="btn btn-primary"
>
<button @click="showGenerateDialog = true" class="btn btn-primary">
{{ t('admin.redeem.generateCodes') }}
</button>
</div>
<!-- Filters and Actions -->
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div class="flex-1 max-w-md">
<div class="max-w-md flex-1">
<input
v-model="searchQuery"
type="text"
@@ -48,10 +52,7 @@
class="w-36"
@change="loadCodes"
/>
<button
@click="handleExportCodes"
class="btn btn-secondary"
>
<button @click="handleExportCodes" class="btn btn-secondary">
{{ t('admin.redeem.exportCsv') }}
</button>
</div>
@@ -62,20 +63,38 @@
<DataTable :columns="columns" :data="codes" :loading="loading">
<template #cell-code="{ value }">
<div class="flex items-center space-x-2">
<code class="text-sm font-mono text-gray-900 dark:text-gray-100">{{ value }}</code>
<code class="font-mono text-sm text-gray-900 dark:text-gray-100">{{ value }}</code>
<button
@click="copyToClipboard(value)"
:class="[
'flex items-center transition-colors',
copiedCode === value ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
copiedCode === value
? 'text-green-500'
: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
]"
:title="copiedCode === value ? t('admin.redeem.copied') : t('keys.copyToClipboard')"
>
<svg v-if="copiedCode !== value" class="w-4 h-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
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>
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
<svg v-else 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="M5 13l4 4L19 7"
/>
</svg>
</button>
</div>
@@ -85,8 +104,11 @@
<span
:class="[
'badge',
value === 'balance' ? 'badge-success' :
value === 'subscription' ? 'badge-warning' : 'badge-primary'
value === 'balance'
? 'badge-success'
: value === 'subscription'
? 'badge-warning'
: 'badge-primary'
]"
>
{{ value }}
@@ -98,7 +120,9 @@
<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') }}
<span v-if="row.group" class="text-gray-500 dark:text-gray-400 text-xs ml-1">({{ row.group.name }})</span>
<span v-if="row.group" class="ml-1 text-xs text-gray-500 dark:text-gray-400"
>({{ row.group.name }})</span
>
</template>
<template v-else>{{ value }}</template>
</span>
@@ -108,9 +132,11 @@
<span
:class="[
'badge',
value === 'unused' ? 'badge-success' :
value === 'used' ? 'badge-gray' :
'badge-danger'
value === 'unused'
? 'badge-success'
: value === 'used'
? 'badge-gray'
: 'badge-danger'
]"
>
{{ value }}
@@ -124,7 +150,9 @@
</template>
<template #cell-used_at="{ value }">
<span class="text-sm text-gray-500 dark:text-dark-400">{{ value ? formatDate(value) : '-' }}</span>
<span class="text-sm text-gray-500 dark:text-dark-400">{{
value ? formatDate(value) : '-'
}}</span>
</template>
<template #cell-actions="{ row }">
@@ -132,11 +160,16 @@
<button
v-if="row.status === 'unused'"
@click="handleDelete(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
:title="t('common.delete')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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 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="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>
</button>
<span v-else class="text-gray-400 dark:text-dark-500">-</span>
@@ -156,10 +189,7 @@
<!-- Batch Actions -->
<div v-if="filters.status === 'unused'" class="flex justify-end">
<button
@click="showDeleteUnusedDialog = true"
class="btn btn-danger"
>
<button @click="showDeleteUnusedDialog = true" class="btn btn-danger">
{{ t('admin.redeem.deleteAllUnused') }}
</button>
</div>
@@ -191,28 +221,27 @@
<!-- Generate Codes Dialog -->
<Teleport to="body">
<div
v-if="showGenerateDialog"
class="fixed inset-0 z-50 flex items-center justify-center"
>
<div v-if="showGenerateDialog" class="fixed inset-0 z-50 flex items-center justify-center">
<div class="fixed inset-0 bg-black/50" @click="showGenerateDialog = false"></div>
<div
class="fixed inset-0 bg-black/50"
@click="showGenerateDialog = false"
></div>
<div class="relative z-10 w-full max-w-md bg-white dark:bg-dark-800 rounded-xl shadow-xl p-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ t('admin.redeem.generateCodesTitle') }}</h2>
class="relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dark-800"
>
<h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
{{ t('admin.redeem.generateCodesTitle') }}
</h2>
<form @submit.prevent="handleGenerateCodes" class="space-y-4">
<div>
<label class="input-label">{{ t('admin.redeem.codeType') }}</label>
<Select
v-model="generateForm.type"
:options="typeOptions"
/>
<Select v-model="generateForm.type" :options="typeOptions" />
</div>
<!-- 余额/并发类型：显示数值输入 -->
<div v-if="generateForm.type !== 'subscription'">
<label class="input-label">
{{ generateForm.type === 'balance' ? t('admin.redeem.amount') : t('admin.redeem.columns.value') }}
{{
generateForm.type === 'balance'
? t('admin.redeem.amount')
: t('admin.redeem.columns.value')
}}
</label>
<input
v-model.number="generateForm.value"
@@ -257,18 +286,10 @@
/>
</div>
<div class="flex justify-end gap-3 pt-2">
<button
type="button"
@click="showGenerateDialog = false"
class="btn btn-secondary"
>
<button type="button" @click="showGenerateDialog = false" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="generating"
class="btn btn-primary"
>
<button type="submit" :disabled="generating" class="btn btn-primary">
{{ generating ? t('admin.redeem.generating') : t('admin.redeem.generate') }}
</button>
</div>
@@ -279,36 +300,51 @@
<!-- Generated Codes Result Dialog -->
<Teleport to="body">
<div
v-if="showResultDialog"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
>
<div
class="fixed inset-0 bg-black/50"
@click="closeResultDialog"
></div>
<div class="relative z-10 w-full max-w-lg bg-white dark:bg-dark-800 rounded-xl shadow-xl">
<div v-if="showResultDialog" class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div class="fixed inset-0 bg-black/50" @click="closeResultDialog"></div>
<div class="relative z-10 w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-dark-800">
<!-- Header -->
<div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-dark-600">
<div
class="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-dark-600"
>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
<svg class="w-5 h-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="M5 13l4 4L19 7" />
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 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="M5 13l4 4L19 7"
/>
</svg>
</div>
<div>
<h2 class="text-base font-semibold text-gray-900 dark:text-white">
{{ t('admin.redeem.generatedSuccessfully') }}
</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.redeem.codesCreated', { count: generatedCodes.length }) }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{ t('admin.redeem.codesCreated', { count: generatedCodes.length }) }}
</p>
</div>
</div>
<button
@click="closeResultDialog"
class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-dark-700 transition-colors"
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="w-5 h-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 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>
</button>
</div>
@@ -319,12 +355,14 @@
readonly
:value="generatedCodesText"
:style="{ height: textareaHeight }"
class="w-full p-3 font-mono text-sm bg-gray-50 dark:bg-dark-700 border border-gray-200 dark:border-dark-600 rounded-lg resize-none focus:outline-none text-gray-800 dark:text-gray-200"
class="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 p-3 font-mono text-sm text-gray-800 focus:outline-none dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200"
></textarea>
</div>
</div>
<!-- Footer -->
<div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-200 dark:border-dark-600 bg-gray-50 dark:bg-dark-700/50 rounded-b-xl">
<div
class="flex justify-end gap-2 rounded-b-xl border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-dark-600 dark:bg-dark-700/50"
>
<button
@click="copyGeneratedCodes"
:class="[
@@ -332,20 +370,38 @@
copiedAll ? 'btn-success' : 'btn-secondary'
]"
>
<svg v-if="!copiedAll" class="w-4 h-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
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>
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
<svg v-else 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="M5 13l4 4L19 7"
/>
</svg>
{{ copiedAll ? t('admin.redeem.copied') : t('admin.redeem.copyAll') }}
</button>
<button
@click="downloadGeneratedCodes"
class="btn btn-primary flex items-center gap-2"
>
<svg class="w-4 h-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" />
<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>
{{ t('admin.redeem.download') }}
</button>
@@ -380,15 +436,15 @@ const subscriptionGroups = ref<Group[]>([])
// 订阅类型分组选项
const subscriptionGroupOptions = computed(() => {
return subscriptionGroups.value
.filter(g => g.subscription_type === 'subscription')
.map(g => ({
.filter((g) => g.subscription_type === 'subscription')
.map((g) => ({
value: g.id,
label: g.name
}))
})
const generatedCodesText = computed(() => {
return generatedCodes.value.map(code => code.code).join('\n')
return generatedCodes.value.map((code) => code.code).join('\n')
})
const textareaHeight = computed(() => {
@@ -397,7 +453,10 @@ const textareaHeight = computed(() => {
const padding = 24 // top + bottom padding
const minHeight = 60
const maxHeight = 240
const calculatedHeight = Math.min(Math.max(lineCount * lineHeight + padding, minHeight), maxHeight)
const calculatedHeight = Math.min(
Math.max(lineCount * lineHeight + padding, minHeight),
maxHeight
)
return `${calculatedHeight}px`
})
@@ -497,15 +556,11 @@ const formatDate = (dateString: string): string => {
const loadCodes = async () => {
loading.value = true
try {
const response = await adminAPI.redeem.list(
pagination.page,
pagination.page_size,
{
type: filters.type as RedeemCodeType,
status: filters.status as any,
search: searchQuery.value || undefined
}
)
const response = await adminAPI.redeem.list(pagination.page, pagination.page_size, {
type: filters.type as RedeemCodeType,
status: filters.status as any,
search: searchQuery.value || undefined
})
codes.value = response.items
pagination.total = response.total
pagination.pages = response.pages
@@ -623,7 +678,7 @@ const confirmDeleteUnused = async () => {
try {
// Get all unused codes and delete them
const unusedCodesResponse = await adminAPI.redeem.list(1, 1000, { status: 'unused' })
const unusedCodeIds = unusedCodesResponse.items.map(code => code.id)
const unusedCodeIds = unusedCodesResponse.items.map((code) => code.id)
if (unusedCodeIds.length === 0) {
appStore.showInfo(t('admin.redeem.noUnusedCodes'))

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

File diff suppressed because it is too large Load Diff

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

@@ -10,17 +10,27 @@
:title="t('common.refresh')"
>
<svg
:class="['w-5 h-5', loading ? 'animate-spin' : '']"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
: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" />
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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') }}
@@ -50,12 +60,16 @@
<DataTable :columns="columns" :data="subscriptions" :loading="loading">
<template #cell-user="{ row }">
<div class="flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
>
<span class="text-sm font-medium text-primary-700 dark:text-primary-300">
{{ row.user?.email?.charAt(0).toUpperCase() || '?' }}
</span>
</div>
<span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || `User #${row.user_id}` }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
row.user?.email || `User #${row.user_id}`
}}</span>
</div>
</template>
@@ -72,16 +86,18 @@
</template>
<template #cell-usage="{ row }">
<div class="space-y-2 min-w-[280px]">
<div class="min-w-[280px] space-y-2">
<!-- Daily Usage -->
<div v-if="row.group?.daily_limit_usd" class="usage-row">
<div class="flex items-center gap-2">
<span class="usage-label">{{ t('admin.subscriptions.daily') }}</span>
<div class="flex-1 bg-gray-200 dark:bg-dark-600 rounded-full h-1.5">
<div class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="h-1.5 rounded-full transition-all"
:class="getProgressClass(row.daily_usage_usd, row.group?.daily_limit_usd)"
:style="{ width: getProgressWidth(row.daily_usage_usd, row.group?.daily_limit_usd) }"
:style="{
width: getProgressWidth(row.daily_usage_usd, row.group?.daily_limit_usd)
}"
></div>
</div>
<span class="usage-amount">
@@ -91,8 +107,18 @@
</span>
</div>
<div class="reset-info" v-if="row.daily_window_start">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
<svg
class="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>{{ formatResetTime(row.daily_window_start, 'daily') }}</span>
</div>
@@ -102,11 +128,13 @@
<div v-if="row.group?.weekly_limit_usd" class="usage-row">
<div class="flex items-center gap-2">
<span class="usage-label">{{ t('admin.subscriptions.weekly') }}</span>
<div class="flex-1 bg-gray-200 dark:bg-dark-600 rounded-full h-1.5">
<div class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="h-1.5 rounded-full transition-all"
:class="getProgressClass(row.weekly_usage_usd, row.group?.weekly_limit_usd)"
:style="{ width: getProgressWidth(row.weekly_usage_usd, row.group?.weekly_limit_usd) }"
:style="{
width: getProgressWidth(row.weekly_usage_usd, row.group?.weekly_limit_usd)
}"
></div>
</div>
<span class="usage-amount">
@@ -116,8 +144,18 @@
</span>
</div>
<div class="reset-info" v-if="row.weekly_window_start">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
<svg
class="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>{{ formatResetTime(row.weekly_window_start, 'weekly') }}</span>
</div>
@@ -127,11 +165,13 @@
<div v-if="row.group?.monthly_limit_usd" class="usage-row">
<div class="flex items-center gap-2">
<span class="usage-label">{{ t('admin.subscriptions.monthly') }}</span>
<div class="flex-1 bg-gray-200 dark:bg-dark-600 rounded-full h-1.5">
<div class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="h-1.5 rounded-full transition-all"
:class="getProgressClass(row.monthly_usage_usd, row.group?.monthly_limit_usd)"
:style="{ width: getProgressWidth(row.monthly_usage_usd, row.group?.monthly_limit_usd) }"
:style="{
width: getProgressWidth(row.monthly_usage_usd, row.group?.monthly_limit_usd)
}"
></div>
</div>
<span class="usage-amount">
@@ -141,15 +181,32 @@
</span>
</div>
<div class="reset-info" v-if="row.monthly_window_start">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
<svg
class="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>{{ formatResetTime(row.monthly_window_start, 'monthly') }}</span>
</div>
</div>
<!-- No Limits -->
<div v-if="!row.group?.daily_limit_usd && !row.group?.weekly_limit_usd && !row.group?.monthly_limit_usd" class="text-xs text-gray-500">
<div
v-if="
!row.group?.daily_limit_usd &&
!row.group?.weekly_limit_usd &&
!row.group?.monthly_limit_usd
"
class="text-xs text-gray-500"
>
{{ t('admin.subscriptions.noLimits') }}
</div>
</div>
@@ -157,21 +214,34 @@
<template #cell-expires_at="{ value }">
<div v-if="value">
<span class="text-sm" :class="isExpiringSoon(value) ? 'text-orange-600 dark:text-orange-400' : 'text-gray-700 dark:text-gray-300'">
<span
class="text-sm"
:class="
isExpiringSoon(value)
? 'text-orange-600 dark:text-orange-400'
: 'text-gray-700 dark:text-gray-300'
"
>
{{ formatDate(value) }}
</span>
<div v-if="getDaysRemaining(value) !== null" class="text-xs text-gray-500">
{{ getDaysRemaining(value) }} {{ t('admin.subscriptions.daysRemaining') }}
</div>
</div>
<span v-else class="text-sm text-gray-500">{{ t('admin.subscriptions.noExpiration') }}</span>
<span v-else class="text-sm text-gray-500">{{
t('admin.subscriptions.noExpiration')
}}</span>
</template>
<template #cell-status="{ value }">
<span
:class="[
'badge',
value === 'active' ? 'badge-success' : value === 'expired' ? 'badge-warning' : 'badge-danger'
value === 'active'
? 'badge-success'
: value === 'expired'
? 'badge-warning'
: 'badge-danger'
]"
>
{{ t(`admin.subscriptions.status.${value}`) }}
@@ -183,21 +253,41 @@
<button
v-if="row.status === 'active'"
@click="handleExtend(row)"
class="p-2 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
:title="t('admin.subscriptions.extend')"
>
<svg class="w-4 h-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
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>
</button>
<button
v-if="row.status === 'active'"
@click="handleRevoke(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
:title="t('admin.subscriptions.revoke')"
>
<svg class="w-4 h-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
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>
</button>
</div>
@@ -252,36 +342,34 @@
</div>
<div>
<label class="input-label">{{ t('admin.subscriptions.form.validityDays') }}</label>
<input
v-model.number="assignForm.validity_days"
type="number"
min="1"
class="input"
/>
<input v-model.number="assignForm.validity_days" type="number" min="1" class="input" />
<p class="input-hint">{{ t('admin.subscriptions.validityHint') }}</p>
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeAssignModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeAssignModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('admin.subscriptions.assigning') : t('admin.subscriptions.assign') }}
</button>
@@ -296,43 +384,39 @@
size="md"
@close="closeExtendModal"
>
<form v-if="extendingSubscription" @submit.prevent="handleExtendSubscription" class="space-y-5">
<div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-lg">
<form
v-if="extendingSubscription"
@submit.prevent="handleExtendSubscription"
class="space-y-5"
>
<div class="rounded-lg bg-gray-50 p-4 dark:bg-dark-700">
<p class="text-sm text-gray-600 dark:text-gray-400">
{{ t('admin.subscriptions.extendingFor') }}
<span class="font-medium text-gray-900 dark:text-white">{{ extendingSubscription.user?.email }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
extendingSubscription.user?.email
}}</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ t('admin.subscriptions.currentExpiration') }}:
<span class="font-medium text-gray-900 dark:text-white">
{{ extendingSubscription.expires_at ? formatDate(extendingSubscription.expires_at) : t('admin.subscriptions.noExpiration') }}
{{
extendingSubscription.expires_at
? formatDate(extendingSubscription.expires_at)
: t('admin.subscriptions.noExpiration')
}}
</span>
</p>
</div>
<div>
<label class="input-label">{{ t('admin.subscriptions.form.extendDays') }}</label>
<input
v-model.number="extendForm.days"
type="number"
min="1"
required
class="input"
/>
<input v-model.number="extendForm.days" type="number" min="1" required class="input" />
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeExtendModal"
type="button"
class="btn btn-secondary"
>
<button @click="closeExtendModal" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
{{ submitting ? t('admin.subscriptions.extending') : t('admin.subscriptions.extend') }}
</button>
</div>
@@ -424,32 +508,26 @@ const extendForm = reactive({
// Group options for filter (all groups)
const groupOptions = computed(() => [
{ value: '', label: t('admin.subscriptions.allGroups') },
...groups.value.map(g => ({ value: g.id.toString(), label: g.name }))
...groups.value.map((g) => ({ value: g.id.toString(), label: g.name }))
])
// Group options for assign (only subscription type groups)
const subscriptionGroupOptions = computed(() =>
groups.value
.filter(g => g.subscription_type === 'subscription' && g.status === 'active')
.map(g => ({ value: g.id, label: g.name }))
.filter((g) => g.subscription_type === 'subscription' && g.status === 'active')
.map((g) => ({ value: g.id, label: g.name }))
)
// User options for assign
const userOptions = computed(() =>
users.value.map(u => ({ value: u.id, label: u.email }))
)
const userOptions = computed(() => users.value.map((u) => ({ value: u.id, label: u.email })))
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
}
)
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
})
subscriptions.value = response.items
pagination.total = response.total
pagination.pages = response.pages
@@ -648,14 +726,14 @@ onMounted(() => {
}
.usage-label {
@apply text-xs font-medium text-gray-500 dark:text-gray-400 w-10 flex-shrink-0;
@apply w-10 flex-shrink-0 text-xs font-medium text-gray-500 dark:text-gray-400;
}
.usage-amount {
@apply text-xs text-gray-600 dark:text-gray-300 tabular-nums whitespace-nowrap;
@apply whitespace-nowrap text-xs tabular-nums text-gray-600 dark:text-gray-300;
}
.reset-info {
@apply flex items-center gap-1 text-[10px] text-blue-600 dark:text-blue-400 pl-12;
@apply flex items-center gap-1 pl-12 text-[10px] text-blue-600 dark:text-blue-400;
}
</style>

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

@@ -6,15 +6,31 @@
<!-- Total Requests -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
<svg class="w-5 h-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalRequests') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ usageStats?.total_requests?.toLocaleString() || '0' }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.inSelectedRange') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.totalRequests') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ usageStats?.total_requests?.toLocaleString() || '0' }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('usage.inSelectedRange') }}
</p>
</div>
</div>
</div>
@@ -22,15 +38,32 @@
<!-- Total Tokens -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalTokens') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(usageStats?.total_tokens || 0) }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} / {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.totalTokens') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(usageStats?.total_tokens || 0) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} /
{{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}
</p>
</div>
</div>
</div>
@@ -38,16 +71,31 @@
<!-- Total Cost -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
<svg class="w-5 h-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
<p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.totalCost') }}
</p>
<p class="text-xl font-bold text-green-600 dark:text-green-400">
${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
<span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
<span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
{{ t('usage.standardCost') }}
</p>
</div>
</div>
@@ -56,14 +104,28 @@
<!-- Average Duration -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
<svg class="w-5 h-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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
<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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.avgDuration') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(usageStats?.average_duration_ms || 0) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.avgDuration') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatDuration(usageStats?.average_duration_ms || 0) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.perRequest') }}</p>
</div>
</div>
@@ -75,7 +137,9 @@
<!-- Chart Controls -->
<div class="card p-4">
<div class="flex items-center gap-4">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.granularity') }}:</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>{{ t('admin.dashboard.granularity') }}:</span
>
<div class="w-28">
<Select
v-model="granularity"
@@ -88,14 +152,8 @@
<!-- Charts Grid -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<ModelDistributionChart
:model-stats="modelStats"
:loading="chartsLoading"
/>
<TokenUsageTrend
:trend-data="trendData"
:loading="chartsLoading"
/>
<ModelDistributionChart :model-stats="modelStats" :loading="chartsLoading" />
<TokenUsageTrend :trend-data="trendData" :loading="chartsLoading" />
</div>
</div>
@@ -120,19 +178,30 @@
@click="clearUserFilter"
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="w-4 h-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 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>
</button>
<!-- User Dropdown -->
<div
v-if="showUserDropdown && (userSearchResults.length > 0 || userSearchKeyword)"
class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-auto"
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="userSearchLoading" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
<div
v-if="userSearchLoading"
class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
>
{{ t('common.loading') }}
</div>
<div v-else-if="userSearchResults.length === 0 && userSearchKeyword" class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
<div
v-else-if="userSearchResults.length === 0 && userSearchKeyword"
class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
>
{{ t('common.noOptionsFound') }}
</div>
<button
@@ -142,7 +211,7 @@
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="text-gray-500 dark:text-gray-400 ml-2">#{{ user.id }}</span>
<span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
</button>
</div>
</div>
@@ -171,17 +240,11 @@
</div>
<!-- Actions -->
<div class="flex items-center gap-3 ml-auto">
<button
@click="resetFilters"
class="btn btn-secondary"
>
<div class="ml-auto flex items-center gap-3">
<button @click="resetFilters" class="btn btn-secondary">
{{ t('common.reset') }}
</button>
<button
@click="exportToCSV"
class="btn btn-primary"
>
<button @click="exportToCSV" class="btn btn-primary">
{{ t('usage.exportCsv') }}
</button>
</div>
@@ -191,20 +254,20 @@
<!-- Usage Table -->
<div class="card overflow-hidden">
<DataTable
:columns="columns"
:data="usageLogs"
:loading="loading"
>
<DataTable :columns="columns" :data="usageLogs" :loading="loading">
<template #cell-user="{ row }">
<div class="text-sm">
<span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || '-' }}</span>
<span class="text-gray-500 dark:text-gray-400 ml-1">#{{ row.user_id }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
row.user?.email || '-'
}}</span>
<span class="ml-1 text-gray-500 dark:text-gray-400">#{{ row.user_id }}</span>
</div>
</template>
<template #cell-api_key="{ row }">
<span class="text-sm text-gray-900 dark:text-white">{{ row.api_key?.name || '-' }}</span>
<span class="text-sm text-gray-900 dark:text-white">{{
row.api_key?.name || '-'
}}</span>
</template>
<template #cell-model="{ value }">
@@ -213,85 +276,160 @@
<template #cell-stream="{ row }">
<span
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
:class="row.stream
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'"
class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
:class="
row.stream
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
"
>
{{ row.stream ? t('usage.stream') : t('usage.sync') }}
</span>
</template>
<template #cell-tokens="{ row }">
<div class="text-sm space-y-1.5">
<div class="space-y-1.5 text-sm">
<!-- Input / Output Tokens -->
<div class="flex items-center gap-2">
<!-- Input -->
<div class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
<svg
class="h-3.5 w-3.5 text-emerald-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
<span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
row.input_tokens.toLocaleString()
}}</span>
</div>
<!-- Output -->
<div class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
<svg
class="h-3.5 w-3.5 text-violet-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18"
/>
</svg>
<span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
row.output_tokens.toLocaleString()
}}</span>
</div>
</div>
<!-- Cache Tokens (Read + Write) -->
<div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
<div
v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0"
class="flex items-center gap-2"
>
<!-- Cache Read -->
<div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
<svg
class="h-3.5 w-3.5 text-sky-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
/>
</svg>
<span class="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
<span class="font-medium text-sky-600 dark:text-sky-400">{{
formatCacheTokens(row.cache_read_tokens)
}}</span>
</div>
<!-- Cache Write -->
<div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
<svg
class="h-3.5 w-3.5 text-amber-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
<span class="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
<span class="font-medium text-amber-600 dark:text-amber-400">{{
formatCacheTokens(row.cache_creation_tokens)
}}</span>
</div>
</div>
</div>
</template>
<template #cell-cost="{ row }">
<div class="text-sm flex items-center gap-1.5">
<div class="flex items-center gap-1.5 text-sm">
<span class="font-medium text-green-600 dark:text-green-400">
${{ row.actual_cost.toFixed(6) }}
</span>
<!-- Cost Detail Tooltip -->
<div class="relative group">
<div class="flex items-center justify-center w-4 h-4 rounded-full bg-gray-100 dark:bg-gray-700 cursor-help transition-colors group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
<div class="group relative">
<div
class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
>
<svg
class="h-3 w-3 text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
</div>
<!-- Tooltip Content (right side) -->
<div class="absolute z-[100] invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 left-full top-1/2 -translate-y-1/2 ml-2">
<div class="bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-lg py-2.5 px-3 shadow-xl whitespace-nowrap border border-gray-700 dark:border-gray-600">
<div
class="invisible absolute left-full top-1/2 z-[100] ml-2 -translate-y-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
>
<div
class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
>
<div class="space-y-1.5">
<div class="flex items-center justify-between gap-6">
<span class="text-gray-400">{{ t('usage.rate') }}</span>
<span class="font-semibold text-blue-400">{{ (row.rate_multiplier || 1).toFixed(2) }}x</span>
<span class="font-semibold text-blue-400"
>{{ (row.rate_multiplier || 1).toFixed(2) }}x</span
>
</div>
<div class="flex items-center justify-between gap-6">
<span class="text-gray-400">{{ t('usage.original') }}</span>
<span class="font-medium text-white">${{ row.total_cost.toFixed(6) }}</span>
</div>
<div class="flex items-center justify-between gap-6 pt-1.5 border-t border-gray-700">
<div
class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5"
>
<span class="text-gray-400">{{ t('usage.billed') }}</span>
<span class="font-semibold text-green-400">${{ row.actual_cost.toFixed(6) }}</span>
<span class="font-semibold text-green-400"
>${{ row.actual_cost.toFixed(6) }}</span
>
</div>
</div>
<!-- Tooltip Arrow (left side) -->
<div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-r-[6px] border-r-gray-900 dark:border-r-gray-800"></div>
<div
class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
></div>
</div>
</div>
</div>
@@ -300,28 +438,37 @@
<template #cell-billing_type="{ row }">
<span
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
:class="row.billing_type === 1
? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'"
class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
:class="
row.billing_type === 1
? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
"
>
{{ row.billing_type === 1 ? t('usage.subscription') : t('usage.balance') }}
</span>
</template>
<template #cell-first_token="{ row }">
<span v-if="row.first_token_ms != null" class="text-sm text-gray-600 dark:text-gray-400">
<span
v-if="row.first_token_ms != null"
class="text-sm text-gray-600 dark:text-gray-400"
>
{{ formatDuration(row.first_token_ms) }}
</span>
<span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
</template>
<template #cell-duration="{ row }">
<span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.duration_ms) }}</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
formatDuration(row.duration_ms)
}}</span>
</template>
<template #cell-created_at="{ value }">
<span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDateTime(value) }}</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
formatDateTime(value)
}}</span>
</template>
<template #empty>
@@ -357,7 +504,12 @@ import ModelDistributionChart from '@/components/charts/ModelDistributionChart.v
import TokenUsageTrend from '@/components/charts/TokenUsageTrend.vue'
import type { UsageLog, TrendDataPoint, ModelStat } from '@/types'
import type { Column } from '@/components/common/types'
import type { SimpleUser, SimpleApiKey, AdminUsageStatsResponse, AdminUsageQueryParams } from '@/api/admin/usage'
import type {
SimpleUser,
SimpleApiKey,
AdminUsageStatsResponse,
AdminUsageQueryParams
} from '@/api/admin/usage'
const { t } = useI18n()
const appStore = useAppStore()
@@ -374,7 +526,7 @@ const granularity = ref<'day' | 'hour'>('day')
// Granularity options for Select component
const granularityOptions = computed(() => [
{ value: 'day', label: t('admin.dashboard.day') },
{ value: 'hour', label: t('admin.dashboard.hour') },
{ value: 'hour', label: t('admin.dashboard.hour') }
])
const columns = computed<Column[]>(() => [
@@ -405,7 +557,7 @@ let searchTimeout: ReturnType<typeof setTimeout> | null = null
const apiKeyOptions = computed(() => {
return [
{ value: null, label: t('usage.allApiKeys') },
...apiKeys.value.map(key => ({
...apiKeys.value.map((key) => ({
value: key.id,
label: key.name
}))
@@ -494,7 +646,11 @@ const loadApiKeysForUser = async (userId: number) => {
}
// Handle date range change from DateRangePicker
const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
const onDateRangeChange = (range: {
startDate: string
endDate: string
preset: string | null
}) => {
filters.value.start_date = range.startDate
filters.value.end_date = range.endDate
applyFilters()
@@ -586,7 +742,7 @@ const loadChartData = async () => {
end_date: filters.value.end_date || endDate.value,
granularity: granularity.value,
user_id: filters.value.user_id,
api_key_id: filters.value.api_key_id ? Number(filters.value.api_key_id) : undefined,
api_key_id: filters.value.api_key_id ? Number(filters.value.api_key_id) : undefined
}
const [trendResponse, modelResponse] = await Promise.all([
@@ -595,8 +751,8 @@ const loadChartData = async () => {
start_date: params.start_date,
end_date: params.end_date,
user_id: params.user_id,
api_key_id: params.api_key_id,
}),
api_key_id: params.api_key_id
})
])
trendData.value = trendResponse.trend || []
@@ -650,8 +806,21 @@ const exportToCSV = () => {
return
}
const headers = ['User', 'API Key', 'Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'Duration (ms)', 'Time']
const rows = usageLogs.value.map(log => [
const headers = [
'User',
'API Key',
'Model',
'Type',
'Input Tokens',
'Output Tokens',
'Cache Read Tokens',
'Cache Write Tokens',
'Total Cost',
'Billing Type',
'Duration (ms)',
'Time'
]
const rows = usageLogs.value.map((log) => [
log.user?.email || '',
log.api_key?.name || '',
log.model,
@@ -666,10 +835,7 @@ const exportToCSV = () => {
log.created_at
])
const csvContent = [
headers.join(','),
...rows.map(row => row.join(','))
].join('\n')
const csvContent = [headers.join(','), ...rows.map((row) => row.join(','))].join('\n')
const blob = new Blob([csvContent], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)

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

File diff suppressed because it is too large Load Diff

334
frontend/src/views/auth/EmailVerifyView.vue
View File

@@ -3,20 +3,32 @@
<div class="space-y-6">
<!-- Title -->
<div class="text-center">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
Verify Your Email
</h2>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Verify Your Email</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
We'll send a verification code to <span class="font-medium text-gray-700 dark:text-gray-300">{{ email }}</span>
We'll send a verification code to
<span class="font-medium text-gray-700 dark:text-gray-300">{{ email }}</span>
</p>
</div>
<!-- No Data Warning -->
<div v-if="!hasRegisterData" class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
<div
v-if="!hasRegisterData"
class="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/50 dark:bg-amber-900/20"
>
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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
class="h-5 w-5 text-amber-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
</div>
<div class="text-sm text-amber-700 dark:text-amber-400">
@@ -30,9 +42,7 @@
<form v-else @submit.prevent="handleVerify" class="space-y-5">
<!-- Verification Code Input -->
<div>
<label for="code" class="input-label text-center">
Verification Code
</label>
<label for="code" class="input-label text-center"> Verification Code </label>
<input
id="code"
v-model="verifyCode"
@@ -42,24 +52,35 @@
inputmode="numeric"
maxlength="6"
:disabled="isLoading"
class="input text-center text-xl tracking-[0.5em] font-mono py-3"
class="input py-3 text-center font-mono text-xl tracking-[0.5em]"
:class="{ 'input-error': errors.code }"
placeholder="000000"
/>
<p v-if="errors.code" class="input-error-text text-center">
{{ errors.code }}
</p>
<p v-else class="input-hint text-center">
Enter the 6-digit code sent to your email
</p>
<p v-else class="input-hint text-center">Enter the 6-digit code sent to your email</p>
</div>
<!-- Code Status -->
<div v-if="codeSent" class="p-4 rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/50">
<div
v-if="codeSent"
class="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800/50 dark:bg-green-900/20"
>
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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
class="h-5 w-5 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
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>
</div>
<p class="text-sm text-green-700 dark:text-green-400">
@@ -77,7 +98,7 @@
@expire="onTurnstileExpire"
@error="onTurnstileError"
/>
<p v-if="errors.turnstile" class="input-error-text text-center mt-2">
<p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
{{ errors.turnstile }}
</p>
</div>
@@ -86,12 +107,22 @@
<transition name="fade">
<div
v-if="errorMessage"
class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50"
class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
>
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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
class="h-5 w-5 text-red-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
</div>
<p class="text-sm text-red-700 dark:text-red-400">
@@ -102,22 +133,40 @@
</transition>
<!-- Submit Button -->
<button
type="submit"
:disabled="isLoading || !verifyCode"
class="btn btn-primary w-full"
>
<button type="submit" :disabled="isLoading || !verifyCode" class="btn btn-primary w-full">
<svg
v-if="isLoading"
class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
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>
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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
v-else
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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
{{ isLoading ? 'Verifying...' : 'Verify & Create Account' }}
</button>
@@ -128,7 +177,7 @@
v-if="countdown > 0"
type="button"
disabled
class="text-sm text-gray-400 dark:text-dark-500 cursor-not-allowed"
class="cursor-not-allowed text-sm text-gray-400 dark:text-dark-500"
>
Resend code in {{ countdown }}s
</button>
@@ -136,8 +185,10 @@
v-else
type="button"
@click="handleResendCode"
:disabled="isSendingCode || (turnstileEnabled && showResendTurnstile && !resendTurnstileToken)"
class="text-sm text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="
isSendingCode || (turnstileEnabled && showResendTurnstile && !resendTurnstileToken)
"
class="text-sm text-primary-600 transition-colors hover:text-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-400 dark:hover:text-primary-300"
>
<span v-if="isSendingCode">Sending...</span>
<span v-else-if="turnstileEnabled && !showResendTurnstile">Click to resend code</span>
@@ -151,10 +202,20 @@
<template #footer>
<button
@click="handleBack"
class="text-gray-500 dark:text-dark-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors flex items-center gap-2"
class="flex items-center gap-2 text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-gray-300"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
<svg
class="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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
/>
</svg>
Back to registration
</button>
@@ -163,163 +224,162 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { AuthLayout } from '@/components/layout';
import TurnstileWidget from '@/components/TurnstileWidget.vue';
import { useAuthStore, useAppStore } from '@/stores';
import { getPublicSettings, sendVerifyCode } from '@/api/auth';
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { AuthLayout } from '@/components/layout'
import TurnstileWidget from '@/components/TurnstileWidget.vue'
import { useAuthStore, useAppStore } from '@/stores'
import { getPublicSettings, sendVerifyCode } from '@/api/auth'
// ==================== Router & Stores ====================
const router = useRouter();
const authStore = useAuthStore();
const appStore = useAppStore();
const router = useRouter()
const authStore = useAuthStore()
const appStore = useAppStore()
// ==================== State ====================
const isLoading = ref<boolean>(false);
const isSendingCode = ref<boolean>(false);
const errorMessage = ref<string>('');
const codeSent = ref<boolean>(false);
const verifyCode = ref<string>('');
const countdown = ref<number>(0);
let countdownTimer: ReturnType<typeof setInterval> | null = null;
const isLoading = ref<boolean>(false)
const isSendingCode = ref<boolean>(false)
const errorMessage = ref<string>('')
const codeSent = ref<boolean>(false)
const verifyCode = ref<string>('')
const countdown = ref<number>(0)
let countdownTimer: ReturnType<typeof setInterval> | null = null
// Registration data from sessionStorage
const email = ref<string>('');
const password = ref<string>('');
const initialTurnstileToken = ref<string>('');
const hasRegisterData = ref<boolean>(false);
const email = ref<string>('')
const password = ref<string>('')
const initialTurnstileToken = ref<string>('')
const hasRegisterData = ref<boolean>(false)
// Public settings
const turnstileEnabled = ref<boolean>(false);
const turnstileSiteKey = ref<string>('');
const siteName = ref<string>('Sub2API');
const turnstileEnabled = ref<boolean>(false)
const turnstileSiteKey = ref<string>('')
const siteName = ref<string>('Sub2API')
// Turnstile for resend
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null);
const resendTurnstileToken = ref<string>('');
const showResendTurnstile = ref<boolean>(false);
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
const resendTurnstileToken = ref<string>('')
const showResendTurnstile = ref<boolean>(false)
const errors = ref({
code: '',
turnstile: '',
});
turnstile: ''
})
// ==================== Lifecycle ====================
onMounted(async () => {
// Load registration data from sessionStorage
const registerDataStr = sessionStorage.getItem('register_data');
const registerDataStr = sessionStorage.getItem('register_data')
if (registerDataStr) {
try {
const registerData = JSON.parse(registerDataStr);
email.value = registerData.email || '';
password.value = registerData.password || '';
initialTurnstileToken.value = registerData.turnstile_token || '';
hasRegisterData.value = !!(email.value && password.value);
const registerData = JSON.parse(registerDataStr)
email.value = registerData.email || ''
password.value = registerData.password || ''
initialTurnstileToken.value = registerData.turnstile_token || ''
hasRegisterData.value = !!(email.value && password.value)
} catch {
hasRegisterData.value = false;
hasRegisterData.value = false
}
}
// Load public settings
try {
const settings = await getPublicSettings();
turnstileEnabled.value = settings.turnstile_enabled;
turnstileSiteKey.value = settings.turnstile_site_key || '';
siteName.value = settings.site_name || 'Sub2API';
const settings = await getPublicSettings()
turnstileEnabled.value = settings.turnstile_enabled
turnstileSiteKey.value = settings.turnstile_site_key || ''
siteName.value = settings.site_name || 'Sub2API'
} catch (error) {
console.error('Failed to load public settings:', error);
console.error('Failed to load public settings:', error)
}
// Auto-send verification code if we have valid data
if (hasRegisterData.value) {
await sendCode();
await sendCode()
}
});
})
onUnmounted(() => {
if (countdownTimer) {
clearInterval(countdownTimer);
countdownTimer = null;
clearInterval(countdownTimer)
countdownTimer = null
}
});
})
// ==================== Countdown ====================
function startCountdown(seconds: number): void {
countdown.value = seconds;
countdown.value = seconds
if (countdownTimer) {
clearInterval(countdownTimer);
clearInterval(countdownTimer)
}
countdownTimer = setInterval(() => {
if (countdown.value > 0) {
countdown.value--;
countdown.value--
} else {
if (countdownTimer) {
clearInterval(countdownTimer);
countdownTimer = null;
clearInterval(countdownTimer)
countdownTimer = null
}
}
}, 1000);
}, 1000)
}
// ==================== Turnstile Handlers ====================
function onTurnstileVerify(token: string): void {
resendTurnstileToken.value = token;
errors.value.turnstile = '';
resendTurnstileToken.value = token
errors.value.turnstile = ''
}
function onTurnstileExpire(): void {
resendTurnstileToken.value = '';
errors.value.turnstile = 'Verification expired, please try again';
resendTurnstileToken.value = ''
errors.value.turnstile = 'Verification expired, please try again'
}
function onTurnstileError(): void {
resendTurnstileToken.value = '';
errors.value.turnstile = 'Verification failed, please try again';
resendTurnstileToken.value = ''
errors.value.turnstile = 'Verification failed, please try again'
}
// ==================== Send Code ====================
async function sendCode(): Promise<void> {
isSendingCode.value = true;
errorMessage.value = '';
isSendingCode.value = true
errorMessage.value = ''
try {
const response = await sendVerifyCode({
email: email.value,
// 优先使用重发时新获取的 token（因为初始 token 可能已被使用）
turnstile_token: resendTurnstileToken.value || initialTurnstileToken.value || undefined,
});
turnstile_token: resendTurnstileToken.value || initialTurnstileToken.value || undefined
})
codeSent.value = true;
startCountdown(response.countdown);
codeSent.value = true
startCountdown(response.countdown)
// Reset turnstile state（token 已使用，清除以避免重复使用）
initialTurnstileToken.value = '';
showResendTurnstile.value = false;
resendTurnstileToken.value = '';
initialTurnstileToken.value = ''
showResendTurnstile.value = false
resendTurnstileToken.value = ''
} catch (error: unknown) {
const err = error as { message?: string; response?: { data?: { detail?: string } } };
const err = error as { message?: string; response?: { data?: { detail?: string } } }
if (err.response?.data?.detail) {
errorMessage.value = err.response.data.detail;
errorMessage.value = err.response.data.detail
} else if (err.message) {
errorMessage.value = err.message;
errorMessage.value = err.message
} else {
errorMessage.value = 'Failed to send verification code. Please try again.';
errorMessage.value = 'Failed to send verification code. Please try again.'
}
appStore.showError(errorMessage.value);
appStore.showError(errorMessage.value)
} finally {
isSendingCode.value = false;
isSendingCode.value = false
}
}
@@ -328,43 +388,43 @@ async function sendCode(): Promise<void> {
async function handleResendCode(): Promise<void> {
// If turnstile is enabled and we haven't shown it yet, show it
if (turnstileEnabled.value && !showResendTurnstile.value) {
showResendTurnstile.value = true;
return;
showResendTurnstile.value = true
return
}
// If turnstile is enabled but no token yet, wait
if (turnstileEnabled.value && !resendTurnstileToken.value) {
errors.value.turnstile = 'Please complete the verification';
return;
errors.value.turnstile = 'Please complete the verification'
return
}
await sendCode();
await sendCode()
}
function validateForm(): boolean {
errors.value.code = '';
errors.value.code = ''
if (!verifyCode.value.trim()) {
errors.value.code = 'Verification code is required';
return false;
errors.value.code = 'Verification code is required'
return false
}
if (!/^\d{6}$/.test(verifyCode.value.trim())) {
errors.value.code = 'Please enter a valid 6-digit code';
return false;
errors.value.code = 'Please enter a valid 6-digit code'
return false
}
return true;
return true
}
async function handleVerify(): Promise<void> {
errorMessage.value = '';
errorMessage.value = ''
if (!validateForm()) {
return;
return
}
isLoading.value = true;
isLoading.value = true
try {
// Register with verification code
@@ -372,40 +432,40 @@ async function handleVerify(): Promise<void> {
email: email.value,
password: password.value,
verify_code: verifyCode.value.trim(),
turnstile_token: initialTurnstileToken.value || undefined,
});
turnstile_token: initialTurnstileToken.value || undefined
})
// Clear session data
sessionStorage.removeItem('register_data');
sessionStorage.removeItem('register_data')
// Show success toast
appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.');
appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.')
// Redirect to dashboard
await router.push('/dashboard');
await router.push('/dashboard')
} catch (error: unknown) {
const err = error as { message?: string; response?: { data?: { detail?: string } } };
const err = error as { message?: string; response?: { data?: { detail?: string } } }
if (err.response?.data?.detail) {
errorMessage.value = err.response.data.detail;
errorMessage.value = err.response.data.detail
} else if (err.message) {
errorMessage.value = err.message;
errorMessage.value = err.message
} else {
errorMessage.value = 'Verification failed. Please try again.';
errorMessage.value = 'Verification failed. Please try again.'
}
appStore.showError(errorMessage.value);
appStore.showError(errorMessage.value)
} finally {
isLoading.value = false;
isLoading.value = false
}
}
function handleBack(): void {
// Clear session data
sessionStorage.removeItem('register_data');
sessionStorage.removeItem('register_data')
// Go back to registration
router.push('/register');
router.push('/register')
}
</script>

250
frontend/src/views/auth/LoginView.vue
View File

@@ -19,9 +19,19 @@
{{ t('auth.emailLabel') }}
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
<svg
class="h-5 w-5 text-gray-400 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
/>
</svg>
</div>
<input
@@ -47,9 +57,19 @@
{{ t('auth.passwordLabel') }}
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
<svg
class="h-5 w-5 text-gray-400 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
/>
</svg>
</div>
<input
@@ -66,14 +86,40 @@
<button
type="button"
@click="showPassword = !showPassword"
class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-dark-300 transition-colors"
class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-dark-300"
>
<svg v-if="showPassword" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
<svg
v-if="showPassword"
class="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="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
<svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<svg
v-else
class="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="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
@@ -91,7 +137,7 @@
@expire="onTurnstileExpire"
@error="onTurnstileError"
/>
<p v-if="errors.turnstile" class="input-error-text text-center mt-2">
<p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
{{ errors.turnstile }}
</p>
</div>
@@ -100,12 +146,22 @@
<transition name="fade">
<div
v-if="errorMessage"
class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50"
class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
>
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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
class="h-5 w-5 text-red-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
</div>
<p class="text-sm text-red-700 dark:text-red-400">
@@ -123,15 +179,37 @@
>
<svg
v-if="isLoading"
class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
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>
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
<svg
v-else
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="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
/>
</svg>
{{ isLoading ? t('auth.signingIn') : t('auth.signIn') }}
</button>
@@ -144,7 +222,7 @@
{{ t('auth.dontHaveAccount') }}
<router-link
to="/register"
class="font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors"
class="font-medium text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
>
{{ t('auth.signUp') }}
</router-link>
@@ -154,162 +232,162 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { AuthLayout } from '@/components/layout';
import TurnstileWidget from '@/components/TurnstileWidget.vue';
import { useAuthStore, useAppStore } from '@/stores';
import { getPublicSettings } from '@/api/auth';
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { AuthLayout } from '@/components/layout'
import TurnstileWidget from '@/components/TurnstileWidget.vue'
import { useAuthStore, useAppStore } from '@/stores'
import { getPublicSettings } from '@/api/auth'
const { t } = useI18n();
const { t } = useI18n()
// ==================== Router & Stores ====================
const router = useRouter();
const authStore = useAuthStore();
const appStore = useAppStore();
const router = useRouter()
const authStore = useAuthStore()
const appStore = useAppStore()
// ==================== State ====================
const isLoading = ref<boolean>(false);
const errorMessage = ref<string>('');
const showPassword = ref<boolean>(false);
const isLoading = ref<boolean>(false)
const errorMessage = ref<string>('')
const showPassword = ref<boolean>(false)
// Public settings
const turnstileEnabled = ref<boolean>(false);
const turnstileSiteKey = ref<string>('');
const turnstileEnabled = ref<boolean>(false)
const turnstileSiteKey = ref<string>('')
// Turnstile
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null);
const turnstileToken = ref<string>('');
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
const turnstileToken = ref<string>('')
const formData = reactive({
email: '',
password: '',
});
password: ''
})
const errors = reactive({
email: '',
password: '',
turnstile: '',
});
turnstile: ''
})
// ==================== Lifecycle ====================
onMounted(async () => {
try {
const settings = await getPublicSettings();
turnstileEnabled.value = settings.turnstile_enabled;
turnstileSiteKey.value = settings.turnstile_site_key || '';
const settings = await getPublicSettings()
turnstileEnabled.value = settings.turnstile_enabled
turnstileSiteKey.value = settings.turnstile_site_key || ''
} catch (error) {
console.error('Failed to load public settings:', error);
console.error('Failed to load public settings:', error)
}
});
})
// ==================== Turnstile Handlers ====================
function onTurnstileVerify(token: string): void {
turnstileToken.value = token;
errors.turnstile = '';
turnstileToken.value = token
errors.turnstile = ''
}
function onTurnstileExpire(): void {
turnstileToken.value = '';
errors.turnstile = 'Verification expired, please try again';
turnstileToken.value = ''
errors.turnstile = 'Verification expired, please try again'
}
function onTurnstileError(): void {
turnstileToken.value = '';
errors.turnstile = 'Verification failed, please try again';
turnstileToken.value = ''
errors.turnstile = 'Verification failed, please try again'
}
// ==================== Validation ====================
function validateForm(): boolean {
// Reset errors
errors.email = '';
errors.password = '';
errors.turnstile = '';
errors.email = ''
errors.password = ''
errors.turnstile = ''
let isValid = true;
let isValid = true
// Email validation
if (!formData.email.trim()) {
errors.email = 'Email is required';
isValid = false;
errors.email = 'Email is required'
isValid = false
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
errors.email = 'Please enter a valid email address';
isValid = false;
errors.email = 'Please enter a valid email address'
isValid = false
}
// Password validation
if (!formData.password) {
errors.password = 'Password is required';
isValid = false;
errors.password = 'Password is required'
isValid = false
} else if (formData.password.length < 6) {
errors.password = 'Password must be at least 6 characters';
isValid = false;
errors.password = 'Password must be at least 6 characters'
isValid = false
}
// Turnstile validation
if (turnstileEnabled.value && !turnstileToken.value) {
errors.turnstile = 'Please complete the verification';
isValid = false;
errors.turnstile = 'Please complete the verification'
isValid = false
}
return isValid;
return isValid
}
// ==================== Form Handlers ====================
async function handleLogin(): Promise<void> {
// Clear previous error
errorMessage.value = '';
errorMessage.value = ''
// Validate form
if (!validateForm()) {
return;
return
}
isLoading.value = true;
isLoading.value = true
try {
// Call auth store login
await authStore.login({
email: formData.email,
password: formData.password,
turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined,
});
turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined
})
// Show success toast
appStore.showSuccess('Login successful! Welcome back.');
appStore.showSuccess('Login successful! Welcome back.')
// Redirect to dashboard or intended route
const redirectTo = router.currentRoute.value.query.redirect as string || '/dashboard';
await router.push(redirectTo);
const redirectTo = (router.currentRoute.value.query.redirect as string) || '/dashboard'
await router.push(redirectTo)
} catch (error: unknown) {
// Reset Turnstile on error
if (turnstileRef.value) {
turnstileRef.value.reset();
turnstileToken.value = '';
turnstileRef.value.reset()
turnstileToken.value = ''
}
// Handle login error
const err = error as { message?: string; response?: { data?: { detail?: string } } };
const err = error as { message?: string; response?: { data?: { detail?: string } } }
if (err.response?.data?.detail) {
errorMessage.value = err.response.data.detail;
errorMessage.value = err.response.data.detail
} else if (err.message) {
errorMessage.value = err.message;
errorMessage.value = err.message
} else {
errorMessage.value = 'Login failed. Please check your credentials and try again.';
errorMessage.value = 'Login failed. Please check your credentials and try again.'
}
// Also show error toast
appStore.showError(errorMessage.value);
appStore.showError(errorMessage.value)
} finally {
isLoading.value = false;
isLoading.value = false
}
}
</script>

54
frontend/src/views/auth/README.md
View File

@@ -9,6 +9,7 @@ This directory contains Vue 3 authentication views for the Sub2API frontend appl
Login page for existing users to authenticate.
**Features:**
- Username and password inputs with validation
- Remember me checkbox for persistent sessions
- Form validation with real-time error display
@@ -18,26 +19,30 @@ Login page for existing users to authenticate.
- Link to registration page for new users
**Usage:**
```vue
<template>
<LoginView />
</template>
<script setup lang="ts">
import { LoginView } from '@/views/auth';
import { LoginView } from '@/views/auth'
</script>
```
**Route:**
- Path: `/login`
- Name: `Login`
- Meta: `{ requiresAuth: false }`
**Validation Rules:**
- Username: Required, minimum 3 characters
- Password: Required, minimum 6 characters
**Behavior:**
- Calls `authStore.login()` with credentials
- Shows success toast on successful login
- Shows error toast and inline error message on failure
@@ -49,6 +54,7 @@ import { LoginView } from '@/views/auth';
Registration page for new users to create accounts.
**Features:**
- Username, email, password, and confirm password inputs
- Comprehensive form validation
- Password strength requirements (8+ characters, letters + numbers)
@@ -60,22 +66,25 @@ Registration page for new users to create accounts.
- Link to login page for existing users
**Usage:**
```vue
<template>
<RegisterView />
</template>
<script setup lang="ts">
import { RegisterView } from '@/views/auth';
import { RegisterView } from '@/views/auth'
</script>
```
**Route:**
- Path: `/register`
- Name: `Register`
- Meta: `{ requiresAuth: false }`
**Validation Rules:**
- Username:
- Required
- 3-50 characters
@@ -92,6 +101,7 @@ import { RegisterView } from '@/views/auth';
- Must match password
**Behavior:**
- Calls `authStore.register()` with user data
- Shows success toast on successful registration
- Shows error toast and inline error message on failure
@@ -131,6 +141,7 @@ Both views follow a consistent structure:
### State Management
Both views use:
- `useAuthStore()` - For authentication actions (login, register)
- `useAppStore()` - For toast notifications and UI feedback
- `useRouter()` - For navigation and redirects
@@ -138,12 +149,14 @@ Both views use:
### Validation Strategy
**Client-side Validation:**
- Real-time validation on form submission
- Field-level error messages
- Comprehensive validation rules
- TypeScript type safety
**Server-side Validation:**
- Backend API validates all inputs
- Error responses handled gracefully
- User-friendly error messages displayed
@@ -151,6 +164,7 @@ Both views use:
### Styling
**Design System:**
- TailwindCSS utility classes
- Consistent color scheme (indigo primary)
- Responsive design
@@ -158,6 +172,7 @@ Both views use:
- Loading states with spinner animations
**Visual Feedback:**
- Red border on invalid fields
- Error messages below inputs
- Global error banner for API errors
@@ -167,13 +182,16 @@ Both views use:
## Dependencies
### Components
- `AuthLayout` - Layout wrapper for auth pages from `@/components/layout`
### Stores
- `authStore` - Authentication state management from `@/stores/auth`
- `appStore` - Application state and toasts from `@/stores/app`
### Libraries
- Vue 3 Composition API
- Vue Router for navigation
- Pinia for state management
@@ -185,11 +203,11 @@ Both views use:
```typescript
// User enters credentials
formData.username = 'john_doe';
formData.password = 'SecurePass123';
formData.username = 'john_doe'
formData.password = 'SecurePass123'
// Submit form
await handleLogin();
await handleLogin()
// On success:
// - authStore.login() called
@@ -207,13 +225,13 @@ await handleLogin();
```typescript
// User enters registration data
formData.username = 'jane_smith';
formData.email = 'jane@example.com';
formData.password = 'SecurePass123';
formData.confirmPassword = 'SecurePass123';
formData.username = 'jane_smith'
formData.email = 'jane@example.com'
formData.password = 'SecurePass123'
formData.confirmPassword = 'SecurePass123'
// Submit form
await handleRegister();
await handleRegister()
// On success:
// - authStore.register() called
@@ -233,10 +251,10 @@ await handleRegister();
```typescript
// Validation errors
errors.username = 'Username must be at least 3 characters';
errors.email = 'Please enter a valid email address';
errors.password = 'Password must be at least 8 characters with letters and numbers';
errors.confirmPassword = 'Passwords do not match';
errors.username = 'Username must be at least 3 characters'
errors.email = 'Please enter a valid email address'
errors.password = 'Password must be at least 8 characters with letters and numbers'
errors.confirmPassword = 'Passwords do not match'
```
### Server-side Errors
@@ -252,8 +270,8 @@ errors.confirmPassword = 'Passwords do not match';
}
// Displayed as:
errorMessage.value = 'Username already exists';
appStore.showError('Username already exists');
errorMessage.value = 'Username already exists'
appStore.showError('Username already exists')
```
## Accessibility
@@ -269,18 +287,21 @@ appStore.showError('Username already exists');
## Testing Considerations
### Unit Tests
- Form validation logic
- Error handling
- State management
- Router navigation
### Integration Tests
- Full login flow
- Full registration flow
- Error scenarios
- Redirect behavior
### E2E Tests
- Complete user journeys
- Form interactions
- API integration
@@ -289,6 +310,7 @@ appStore.showError('Username already exists');
## Future Enhancements
Potential improvements:
- OAuth/SSO integration (Google, GitHub)
- Two-factor authentication (2FA)
- Password strength meter

312
frontend/src/views/auth/RegisterView.vue
View File

@@ -12,11 +12,24 @@
</div>
<!-- Registration Disabled Message -->
<div v-if="!registrationEnabled && settingsLoaded" class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/50">
<div
v-if="!registrationEnabled && settingsLoaded"
class="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/50 dark:bg-amber-900/20"
>
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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
class="h-5 w-5 text-amber-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
</div>
<p class="text-sm text-amber-700 dark:text-amber-400">
@@ -33,9 +46,19 @@
{{ t('auth.emailLabel') }}
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
<svg
class="h-5 w-5 text-gray-400 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
/>
</svg>
</div>
<input
@@ -61,9 +84,19 @@
{{ t('auth.passwordLabel') }}
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
<svg
class="h-5 w-5 text-gray-400 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
/>
</svg>
</div>
<input
@@ -80,14 +113,40 @@
<button
type="button"
@click="showPassword = !showPassword"
class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-dark-300 transition-colors"
class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-dark-300"
>
<svg v-if="showPassword" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
<svg
v-if="showPassword"
class="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="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
<svg v-else class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<svg
v-else
class="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="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div>
@@ -108,7 +167,7 @@
@expire="onTurnstileExpire"
@error="onTurnstileError"
/>
<p v-if="errors.turnstile" class="input-error-text text-center mt-2">
<p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
{{ errors.turnstile }}
</p>
</div>
@@ -117,12 +176,22 @@
<transition name="fade">
<div
v-if="errorMessage"
class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50"
class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
>
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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
class="h-5 w-5 text-red-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
</div>
<p class="text-sm text-red-700 dark:text-red-400">
@@ -140,17 +209,45 @@
>
<svg
v-if="isLoading"
class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
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>
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
<svg
v-else
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="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
/>
</svg>
{{ isLoading ? t('auth.processing') : (emailVerifyEnabled ? t('auth.continue') : t('auth.createAccount')) }}
{{
isLoading
? t('auth.processing')
: emailVerifyEnabled
? t('auth.continue')
: t('auth.createAccount')
}}
</button>
</form>
</div>
@@ -161,7 +258,7 @@
{{ t('auth.alreadyHaveAccount') }}
<router-link
to="/login"
class="font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300 transition-colors"
class="font-medium text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
>
{{ t('auth.signIn') }}
</router-link>
@@ -171,189 +268,192 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { AuthLayout } from '@/components/layout';
import TurnstileWidget from '@/components/TurnstileWidget.vue';
import { useAuthStore, useAppStore } from '@/stores';
import { getPublicSettings } from '@/api/auth';
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { AuthLayout } from '@/components/layout'
import TurnstileWidget from '@/components/TurnstileWidget.vue'
import { useAuthStore, useAppStore } from '@/stores'
import { getPublicSettings } from '@/api/auth'
const { t } = useI18n();
const { t } = useI18n()
// ==================== Router & Stores ====================
const router = useRouter();
const authStore = useAuthStore();
const appStore = useAppStore();
const router = useRouter()
const authStore = useAuthStore()
const appStore = useAppStore()
// ==================== State ====================
const isLoading = ref<boolean>(false);
const settingsLoaded = ref<boolean>(false);
const errorMessage = ref<string>('');
const showPassword = ref<boolean>(false);
const isLoading = ref<boolean>(false)
const settingsLoaded = ref<boolean>(false)
const errorMessage = ref<string>('')
const showPassword = ref<boolean>(false)
// Public settings
const registrationEnabled = ref<boolean>(true);
const emailVerifyEnabled = ref<boolean>(false);
const turnstileEnabled = ref<boolean>(false);
const turnstileSiteKey = ref<string>('');
const siteName = ref<string>('Sub2API');
const registrationEnabled = ref<boolean>(true)
const emailVerifyEnabled = ref<boolean>(false)
const turnstileEnabled = ref<boolean>(false)
const turnstileSiteKey = ref<string>('')
const siteName = ref<string>('Sub2API')
// Turnstile
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null);
const turnstileToken = ref<string>('');
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
const turnstileToken = ref<string>('')
const formData = reactive({
email: '',
password: '',
});
password: ''
})
const errors = reactive({
email: '',
password: '',
turnstile: '',
});
turnstile: ''
})
// ==================== Lifecycle ====================
onMounted(async () => {
try {
const settings = await getPublicSettings();
registrationEnabled.value = settings.registration_enabled;
emailVerifyEnabled.value = settings.email_verify_enabled;
turnstileEnabled.value = settings.turnstile_enabled;
turnstileSiteKey.value = settings.turnstile_site_key || '';
siteName.value = settings.site_name || 'Sub2API';
const settings = await getPublicSettings()
registrationEnabled.value = settings.registration_enabled
emailVerifyEnabled.value = settings.email_verify_enabled
turnstileEnabled.value = settings.turnstile_enabled
turnstileSiteKey.value = settings.turnstile_site_key || ''
siteName.value = settings.site_name || 'Sub2API'
} catch (error) {
console.error('Failed to load public settings:', error);
console.error('Failed to load public settings:', error)
} finally {
settingsLoaded.value = true;
settingsLoaded.value = true
}
});
})
// ==================== Turnstile Handlers ====================
function onTurnstileVerify(token: string): void {
turnstileToken.value = token;
errors.turnstile = '';
turnstileToken.value = token
errors.turnstile = ''
}
function onTurnstileExpire(): void {
turnstileToken.value = '';
errors.turnstile = 'Verification expired, please try again';
turnstileToken.value = ''
errors.turnstile = 'Verification expired, please try again'
}
function onTurnstileError(): void {
turnstileToken.value = '';
errors.turnstile = 'Verification failed, please try again';
turnstileToken.value = ''
errors.turnstile = 'Verification failed, please try again'
}
// ==================== Validation ====================
function validateEmail(email: string): boolean {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
return emailRegex.test(email)
}
function validateForm(): boolean {
// Reset errors
errors.email = '';
errors.password = '';
errors.turnstile = '';
errors.email = ''
errors.password = ''
errors.turnstile = ''
let isValid = true;
let isValid = true
// Email validation
if (!formData.email.trim()) {
errors.email = 'Email is required';
isValid = false;
errors.email = 'Email is required'
isValid = false
} else if (!validateEmail(formData.email)) {
errors.email = 'Please enter a valid email address';
isValid = false;
errors.email = 'Please enter a valid email address'
isValid = false
}
// Password validation
if (!formData.password) {
errors.password = 'Password is required';
isValid = false;
errors.password = 'Password is required'
isValid = false
} else if (formData.password.length < 6) {
errors.password = 'Password must be at least 6 characters';
isValid = false;
errors.password = 'Password must be at least 6 characters'
isValid = false
}
// Turnstile validation
if (turnstileEnabled.value && !turnstileToken.value) {
errors.turnstile = 'Please complete the verification';
isValid = false;
errors.turnstile = 'Please complete the verification'
isValid = false
}
return isValid;
return isValid
}
// ==================== Form Handlers ====================
async function handleRegister(): Promise<void> {
// Clear previous error
errorMessage.value = '';
errorMessage.value = ''
// Validate form
if (!validateForm()) {
return;
return
}
isLoading.value = true;
isLoading.value = true
try {
// If email verification is enabled, redirect to verification page
if (emailVerifyEnabled.value) {
// Store registration data in sessionStorage
sessionStorage.setItem('register_data', JSON.stringify({
email: formData.email,
password: formData.password,
turnstile_token: turnstileToken.value,
}));
sessionStorage.setItem(
'register_data',
JSON.stringify({
email: formData.email,
password: formData.password,
turnstile_token: turnstileToken.value
})
)
// Navigate to email verification page
await router.push('/email-verify');
return;
await router.push('/email-verify')
return
}
// Otherwise, directly register
await authStore.register({
email: formData.email,
password: formData.password,
turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined,
});
turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined
})
// Show success toast
appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.');
appStore.showSuccess('Account created successfully! Welcome to ' + siteName.value + '.')
// Redirect to dashboard
await router.push('/dashboard');
await router.push('/dashboard')
} catch (error: unknown) {
// Reset Turnstile on error
if (turnstileRef.value) {
turnstileRef.value.reset();
turnstileToken.value = '';
turnstileRef.value.reset()
turnstileToken.value = ''
}
// Handle registration error
const err = error as { message?: string; response?: { data?: { detail?: string } } };
const err = error as { message?: string; response?: { data?: { detail?: string } } }
if (err.response?.data?.detail) {
errorMessage.value = err.response.data.detail;
errorMessage.value = err.response.data.detail
} else if (err.message) {
errorMessage.value = err.message;
errorMessage.value = err.message
} else {
errorMessage.value = 'Registration failed. Please try again.';
errorMessage.value = 'Registration failed. Please try again.'
}
// Also show error toast
appStore.showError(errorMessage.value);
appStore.showError(errorMessage.value)
} finally {
isLoading.value = false;
isLoading.value = false
}
}
</script>

227
frontend/src/views/auth/USAGE_EXAMPLES.md
View File

@@ -75,43 +75,43 @@ This document provides practical examples of how to use the authentication views
```typescript
// Method 1: Direct import
import LoginView from '@/views/auth/LoginView.vue';
import RegisterView from '@/views/auth/RegisterView.vue';
import LoginView from '@/views/auth/LoginView.vue'
import RegisterView from '@/views/auth/RegisterView.vue'
// Method 2: Named exports from index
import { LoginView, RegisterView } from '@/views/auth';
import { LoginView, RegisterView } from '@/views/auth'
// Method 3: Lazy loading (recommended for routes)
const LoginView = () => import('@/views/auth/LoginView.vue');
const RegisterView = () => import('@/views/auth/RegisterView.vue');
const LoginView = () => import('@/views/auth/LoginView.vue')
const RegisterView = () => import('@/views/auth/RegisterView.vue')
```
### Using in Router
```typescript
import { createRouter, createWebHistory } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/auth/LoginView.vue'),
meta: { requiresAuth: false },
meta: { requiresAuth: false }
},
{
path: '/register',
name: 'Register',
component: () => import('@/views/auth/RegisterView.vue'),
meta: { requiresAuth: false },
},
];
meta: { requiresAuth: false }
}
]
const router = createRouter({
history: createWebHistory(),
routes,
});
routes
})
export default router;
export default router
```
### Navigation to Auth Views
@@ -142,13 +142,13 @@ router.push({
### Programmatic Auth Flow
```typescript
import { useAuthStore } from '@/stores';
import { useAppStore } from '@/stores';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores'
import { useAppStore } from '@/stores'
import { useRouter } from 'vue-router'
const authStore = useAuthStore();
const appStore = useAppStore();
const router = useRouter();
const authStore = useAuthStore()
const appStore = useAppStore()
const router = useRouter()
// Login
async function login() {
@@ -156,12 +156,12 @@ async function login() {
await authStore.login({
username: 'john_doe',
password: 'MySecurePass123'
});
})
appStore.showSuccess('Login successful!');
router.push('/dashboard');
appStore.showSuccess('Login successful!')
router.push('/dashboard')
} catch (error) {
appStore.showError('Login failed. Please check your credentials.');
appStore.showError('Login failed. Please check your credentials.')
}
}
@@ -172,12 +172,12 @@ async function register() {
username: 'jane_smith',
email: 'jane@example.com',
password: 'SecurePass123'
});
})
appStore.showSuccess('Account created successfully!');
router.push('/dashboard');
appStore.showSuccess('Account created successfully!')
router.push('/dashboard')
} catch (error) {
appStore.showError('Registration failed. Please try again.');
appStore.showError('Registration failed. Please try again.')
}
}
```
@@ -236,7 +236,7 @@ async function register() {
{
response: {
data: {
detail: "Invalid username or password"
detail: 'Invalid username or password'
}
}
}
@@ -244,12 +244,13 @@ async function register() {
// Example 3: Network error
{
message: "Network Error"
message: 'Network Error'
}
// Displayed: "Network Error" + Error toast
// Example 4: Unknown error
{}
{
}
// Displayed: "Login failed. Please check your credentials and try again." (default)
```
@@ -258,10 +259,10 @@ async function register() {
```typescript
// Multiple validation errors displayed simultaneously
errors = {
username: "Username must be at least 3 characters",
email: "Please enter a valid email address",
password: "Password must be at least 8 characters with letters and numbers",
confirmPassword: "Passwords do not match"
username: 'Username must be at least 3 characters',
email: 'Please enter a valid email address',
password: 'Password must be at least 8 characters with letters and numbers',
confirmPassword: 'Passwords do not match'
}
// Each error appears below its respective input field with red styling
@@ -272,86 +273,86 @@ errors = {
### Unit Test: Login View
```typescript
import { describe, it, expect, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import { createPinia } from 'pinia';
import LoginView from '@/views/auth/LoginView.vue';
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia } from 'pinia'
import LoginView from '@/views/auth/LoginView.vue'
describe('LoginView', () => {
it('validates required fields', async () => {
const wrapper = mount(LoginView, {
global: {
plugins: [createPinia()],
},
});
plugins: [createPinia()]
}
})
// Submit empty form
await wrapper.find('form').trigger('submit');
await wrapper.find('form').trigger('submit')
// Check for validation errors
expect(wrapper.text()).toContain('Username is required');
expect(wrapper.text()).toContain('Password is required');
});
expect(wrapper.text()).toContain('Username is required')
expect(wrapper.text()).toContain('Password is required')
})
it('calls authStore.login on valid submission', async () => {
const wrapper = mount(LoginView, {
global: {
plugins: [createPinia()],
},
});
plugins: [createPinia()]
}
})
// Fill in form
await wrapper.find('#username').setValue('john_doe');
await wrapper.find('#password').setValue('SecurePass123');
await wrapper.find('#username').setValue('john_doe')
await wrapper.find('#password').setValue('SecurePass123')
// Submit form
await wrapper.find('form').trigger('submit');
await wrapper.find('form').trigger('submit')
// Verify authStore.login was called
// (mock implementation needed)
});
});
})
})
```
### E2E Test: Registration Flow
```typescript
import { test, expect } from '@playwright/test';
import { test, expect } from '@playwright/test'
test('user can register successfully', async ({ page }) => {
// Navigate to register page
await page.goto('/register');
await page.goto('/register')
// Fill in registration form
await page.fill('#username', 'new_user');
await page.fill('#email', 'new_user@example.com');
await page.fill('#password', 'SecurePass123');
await page.fill('#confirmPassword', 'SecurePass123');
await page.fill('#username', 'new_user')
await page.fill('#email', 'new_user@example.com')
await page.fill('#password', 'SecurePass123')
await page.fill('#confirmPassword', 'SecurePass123')
// Submit form
await page.click('button[type="submit"]');
await page.click('button[type="submit"]')
// Wait for redirect to dashboard
await page.waitForURL('/dashboard');
await page.waitForURL('/dashboard')
// Verify success toast appears
await expect(page.locator('.toast-success')).toBeVisible();
await expect(page.locator('.toast-success')).toContainText('Account created successfully');
});
await expect(page.locator('.toast-success')).toBeVisible()
await expect(page.locator('.toast-success')).toContainText('Account created successfully')
})
test('shows validation errors for invalid inputs', async ({ page }) => {
await page.goto('/register');
await page.goto('/register')
// Enter mismatched passwords
await page.fill('#password', 'SecurePass123');
await page.fill('#confirmPassword', 'DifferentPass');
await page.fill('#password', 'SecurePass123')
await page.fill('#confirmPassword', 'DifferentPass')
// Submit form
await page.click('button[type="submit"]');
await page.click('button[type="submit"]')
// Verify error message
await expect(page.locator('text=Passwords do not match')).toBeVisible();
});
await expect(page.locator('text=Passwords do not match')).toBeVisible()
})
```
## Integration with Navigation Guards
@@ -359,15 +360,15 @@ test('shows validation errors for invalid inputs', async ({ page }) => {
### Router Guard Example
```typescript
import { useAuthStore } from '@/stores';
import { useAuthStore } from '@/stores'
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
const authStore = useAuthStore()
// Redirect authenticated users away from auth pages
if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
next('/dashboard');
return;
next('/dashboard')
return
}
// Redirect unauthenticated users to login
@@ -375,12 +376,12 @@ router.beforeEach((to, from, next) => {
next({
path: '/login',
query: { redirect: to.fullPath }
});
return;
})
return
}
next();
});
next()
})
```
## Customization Examples
@@ -393,16 +394,16 @@ async function handleLogin(): Promise<void> {
try {
await authStore.login({
username: formData.username,
password: formData.password,
});
password: formData.password
})
appStore.showSuccess('Login successful!');
appStore.showSuccess('Login successful!')
// Custom redirect logic
const isAdmin = authStore.isAdmin;
const redirectTo = isAdmin ? '/admin/dashboard' : '/dashboard';
const isAdmin = authStore.isAdmin
const redirectTo = isAdmin ? '/admin/dashboard' : '/dashboard'
await router.push(redirectTo);
await router.push(redirectTo)
} catch (error) {
// Error handling...
}
@@ -414,19 +415,20 @@ async function handleLogin(): Promise<void> {
```typescript
// Custom password strength validation
function validatePasswordStrength(password: string): boolean {
const hasMinLength = password.length >= 12;
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasNumber = /[0-9]/.test(password);
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
const hasMinLength = password.length >= 12
const hasUpperCase = /[A-Z]/.test(password)
const hasLowerCase = /[a-z]/.test(password)
const hasNumber = /[0-9]/.test(password)
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password)
return hasMinLength && hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar;
return hasMinLength && hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar
}
// Use in validation
if (!validatePasswordStrength(formData.password)) {
errors.password = 'Password must be at least 12 characters with uppercase, lowercase, numbers, and special characters';
isValid = false;
errors.password =
'Password must be at least 12 characters with uppercase, lowercase, numbers, and special characters'
isValid = false
}
```
@@ -439,26 +441,27 @@ async function handleRegister(): Promise<void> {
await authStore.register({
username: formData.username,
email: formData.email,
password: formData.password,
});
password: formData.password
})
appStore.showSuccess('Account created successfully!');
await router.push('/dashboard');
appStore.showSuccess('Account created successfully!')
await router.push('/dashboard')
} catch (error: unknown) {
const err = error as { response?: { status?: number; data?: { detail?: string } } };
const err = error as { response?: { status?: number; data?: { detail?: string } } }
// Custom error handling based on status code
if (err.response?.status === 409) {
errorMessage.value = 'This username or email is already registered. Please use a different one.';
errorMessage.value =
'This username or email is already registered. Please use a different one.'
} else if (err.response?.status === 422) {
errorMessage.value = 'Invalid input. Please check your information and try again.';
errorMessage.value = 'Invalid input. Please check your information and try again.'
} else if (err.response?.status === 500) {
errorMessage.value = 'Server error. Please try again later.';
errorMessage.value = 'Server error. Please try again later.'
} else {
errorMessage.value = err.response?.data?.detail || 'Registration failed. Please try again.';
errorMessage.value = err.response?.data?.detail || 'Registration failed. Please try again.'
}
appStore.showError(errorMessage.value);
appStore.showError(errorMessage.value)
}
}
```
@@ -483,9 +486,7 @@ async function handleRegister(): Promise<void> {
```html
<!-- Proper labels for screen readers -->
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">
Username
</label>
<label for="username" class="mb-1 block text-sm font-medium text-gray-700"> Username </label>
<input
id="username"
type="text"
@@ -548,10 +549,10 @@ import LoginView from '@/views/auth/LoginView.vue'; // ❌ Eager loaded
```typescript
// Solution: Initialize auth state on app mount
// In main.ts or App.vue
import { useAuthStore } from '@/stores';
import { useAuthStore } from '@/stores'
const authStore = useAuthStore();
authStore.checkAuth(); // Restore auth from localStorage
const authStore = useAuthStore()
authStore.checkAuth() // Restore auth from localStorage
```
### Issue: Redirect loop after login
@@ -559,12 +560,12 @@ authStore.checkAuth(); // Restore auth from localStorage
```typescript
// Solution: Check router guard logic
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
const authStore = useAuthStore()
// ✅ Correct: Check specific routes
if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
next('/dashboard');
return;
next('/dashboard')
return
}
// ❌ Wrong: Blanket redirect
@@ -572,8 +573,8 @@ router.beforeEach((to, from, next) => {
// next('/dashboard'); // This causes loops!
// }
next();
});
next()
})
```
### Issue: Form not clearing after successful submission

55
frontend/src/views/auth/VISUAL_GUIDE.md
View File

@@ -235,11 +235,13 @@ Centered: Both horizontally and vertically
## Color Palette
### Primary Colors
- **Indigo-600**: `#4F46E5` - Primary buttons, links, brand color
- **Indigo-700**: `#4338CA` - Button hover state
- **Indigo-500**: `#6366F1` - Focus ring
### Neutral Colors
- **Gray-900**: `#111827` - Headings
- **Gray-700**: `#374151` - Labels
- **Gray-600**: `#4B5563` - Body text
@@ -249,16 +251,19 @@ Centered: Both horizontally and vertically
- **White**: `#FFFFFF` - Card backgrounds
### Error Colors
- **Red-600**: `#DC2626` - Error text
- **Red-500**: `#EF4444` - Error border, focus ring
- **Red-50**: `#FEF2F2` - Error banner background
- **Red-200**: `#FECACA` - Error banner border
### Success Colors
- **Green-600**: `#16A34A` - Success text
- **Green-50**: `#F0FDF4` - Success banner background
### Background Gradient
- **From**: Indigo-100 (`#E0E7FF`)
- **Via**: White (`#FFFFFF`)
- **To**: Purple-100 (`#F3E8FF`)
@@ -266,9 +271,11 @@ Centered: Both horizontally and vertically
## Typography
### Font Family
- **Default**: System font stack (`ui-sans-serif, system-ui, -apple-system, ...`)
### Font Sizes
- **Headings (h2)**: `1.5rem` (24px), `font-bold`
- **Body**: `0.875rem` (14px), `font-normal`
- **Labels**: `0.875rem` (14px), `font-medium`
@@ -276,6 +283,7 @@ Centered: Both horizontally and vertically
- **Error text**: `0.875rem` (14px), `font-normal`
### Line Heights
- **Headings**: `1.5`
- **Body**: `1.5`
- **Helper text**: `1.25`
@@ -283,16 +291,19 @@ Centered: Both horizontally and vertically
## Spacing
### Card Spacing
- **Padding**: `2rem` (32px) all sides
- **Gap between sections**: `1.5rem` (24px)
- **Gap between fields**: `1rem` (16px)
### Input Spacing
- **Padding**: `0.5rem 1rem` (8px 16px)
- **Label margin-bottom**: `0.25rem` (4px)
- **Error text margin-top**: `0.25rem` (4px)
### Button Spacing
- **Padding**: `0.5rem 1rem` (8px 16px)
- **Margin-top**: `1rem` (16px)
@@ -301,18 +312,21 @@ Centered: Both horizontally and vertically
### Input States
**Default:**
```css
border: 1px solid #D1D5DB (gray-300)
focus: 2px ring #6366F1 (indigo-500)
```
**Error:**
```css
border: 1px solid #EF4444 (red-500)
focus: 2px ring #EF4444 (red-500)
```
**Disabled:**
```css
background: #F3F4F6 (gray-100)
cursor: not-allowed
@@ -322,6 +336,7 @@ opacity: 0.6
### Button States
**Default:**
```css
background: #4F46E5 (indigo-600)
text: #FFFFFF (white)
@@ -329,24 +344,28 @@ shadow: shadow-sm
```
**Hover:**
```css
background: #4338CA (indigo-700)
transition: colors 150ms
```
**Focus:**
```css
outline: none
ring: 2px offset-2 #6366F1 (indigo-500)
```
**Disabled:**
```css
opacity: 0.5
cursor: not-allowed
```
**Loading:**
```css
opacity: 0.5
cursor: not-allowed
@@ -356,12 +375,14 @@ cursor: not-allowed
### Link States
**Default:**
```css
color: #4F46E5 (indigo-600)
font-weight: 500 (medium)
```
**Hover:**
```css
color: #6366F1 (indigo-500)
transition: colors 150ms
@@ -372,6 +393,7 @@ transition: colors 150ms
### Breakpoints
**Mobile (< 640px):**
```
- Full width container
- Padding: 1rem (16px)
@@ -379,6 +401,7 @@ transition: colors 150ms
```
**Tablet (640px - 768px):**
```
- Max width: 28rem (448px)
- Centered layout
@@ -386,6 +409,7 @@ transition: colors 150ms
```
**Desktop (> 768px):**
```
- Max width: 28rem (448px)
- Centered layout
@@ -404,20 +428,27 @@ transition: colors 150ms
## Animations
### Transitions
- Color changes: `150ms ease-in-out`
- Opacity changes: `150ms ease-in-out`
- Transform: `150ms ease-in-out`
### Loading Spinner
```css
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
animation: spin 1s linear infinite;
```
### Toast Animations
- Enter: Slide in from right + fade in
- Exit: Slide out to right + fade out
- Duration: 300ms
@@ -425,24 +456,28 @@ animation: spin 1s linear infinite;
## Accessibility Features
### Visual Indicators
- Clear focus states (2px ring)
- Error states (red border + red text)
- Loading states (spinner + text)
- Success states (green toast)
### Color Contrast
- Text on white: > 7:1 (AAA)
- Labels on white: > 4.5:1 (AA)
- Buttons: > 4.5:1 (AA)
- Error text: > 4.5:1 (AA)
### Interactive Elements
- Minimum size: 44x44px (mobile)
- Clear hover states
- Distinct disabled states
- Keyboard accessible
### Screen Reader Support
- Proper labels on all inputs
- ARIA attributes where needed
- Error announcements
@@ -451,6 +486,7 @@ animation: spin 1s linear infinite;
## Icons
### Loading Spinner
```svg
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
@@ -459,6 +495,7 @@ animation: spin 1s linear infinite;
```
### Error Icon
```svg
<svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
@@ -468,6 +505,7 @@ animation: spin 1s linear infinite;
## Browser Compatibility
### Supported Browsers
- Chrome/Edge: Latest 2 versions
- Firefox: Latest 2 versions
- Safari: Latest 2 versions
@@ -475,6 +513,7 @@ animation: spin 1s linear infinite;
- Chrome Mobile: Latest 2 versions
### CSS Features Used
- Flexbox (full support)
- CSS Grid (full support)
- CSS Transitions (full support)
@@ -482,6 +521,7 @@ animation: spin 1s linear infinite;
- Gradient backgrounds (full support)
### JavaScript Features Used
- ES2015+ syntax
- Async/await
- Optional chaining
@@ -495,6 +535,7 @@ animation: spin 1s linear infinite;
## Dark Mode Considerations
**Future Enhancement:**
- Dark mode toggle in user preferences
- System preference detection
- Persistent dark mode setting
@@ -510,6 +551,7 @@ dark:border-gray-700
## Performance Metrics
### Target Metrics
- First Contentful Paint (FCP): < 1s
- Largest Contentful Paint (LCP): < 2.5s
- Time to Interactive (TTI): < 3s
@@ -517,6 +559,7 @@ dark:border-gray-700
- First Input Delay (FID): < 100ms
### Optimization Strategies
- Lazy load non-critical resources
- Minimize initial bundle size
- Use efficient animations (transform, opacity)
@@ -527,12 +570,14 @@ dark:border-gray-700
## Component Size
### Bundle Impact
- LoginView.vue: ~4 KB (minified)
- RegisterView.vue: ~6 KB (minified)
- AuthLayout.vue: ~1 KB (minified)
- Total: ~11 KB (excluding dependencies)
### Dependencies
- Vue 3: ~40 KB (runtime)
- Vue Router: ~15 KB
- Pinia: ~10 KB
@@ -541,6 +586,7 @@ dark:border-gray-700
## Testing Checklist
### Visual Regression Tests
- [ ] Default state (login)
- [ ] Default state (register)
- [ ] Loading state
@@ -554,6 +600,7 @@ dark:border-gray-700
- [ ] Hover states
### Cross-browser Tests
- [ ] Chrome (Windows, Mac, Linux)
- [ ] Firefox (Windows, Mac, Linux)
- [ ] Safari (Mac, iOS)
@@ -562,6 +609,7 @@ dark:border-gray-700
- [ ] Safari Mobile (iOS)
### Accessibility Tests
- [ ] Keyboard navigation
- [ ] Screen reader (NVDA)
- [ ] Screen reader (JAWS)
@@ -573,14 +621,17 @@ dark:border-gray-700
## Design Assets
### Figma/Sketch Files
(Not applicable - designed directly in code with Tailwind)
### Design Tokens
- Defined in Tailwind config
- Consistent with design system
- Reusable across all components
### Iconography
- SVG icons inline
- Heroicons (outline and solid)
- Consistent stroke width

4
frontend/src/views/auth/index.ts
View File

@@ -3,5 +3,5 @@
* Export all authentication-related views
*/
export { default as LoginView } from './LoginView.vue';
export { default as RegisterView } from './RegisterView.vue';
export { default as LoginView } from './LoginView.vue'
export { default as RegisterView } from './RegisterView.vue'

529
frontend/src/views/setup/SetupWizardView.vue
View File

@@ -1,12 +1,30 @@
<template>
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-dark-900 dark:to-dark-800 flex items-center justify-center p-4">
<div
class="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4 dark:from-dark-900 dark:to-dark-800"
>
<div class="w-full max-w-2xl">
<!-- Logo & Title -->
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg mb-4">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<div class="mb-8 text-center">
<div
class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg"
>
<svg
class="h-8 w-8 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Sub2API Setup</h1>
@@ -20,63 +38,110 @@
<div class="flex items-center">
<div
:class="[
'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all',
'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition-all',
currentStep > index
? 'bg-primary-500 text-white'
: currentStep === index
? 'bg-primary-500 text-white ring-4 ring-primary-100 dark:ring-primary-900'
: 'bg-gray-200 dark:bg-dark-700 text-gray-500 dark:text-dark-400'
? 'bg-primary-500 text-white ring-4 ring-primary-100 dark:ring-primary-900'
: 'bg-gray-200 text-gray-500 dark:bg-dark-700 dark:text-dark-400'
]"
>
<svg v-if="currentStep > index" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg
v-if="currentStep > index"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span v-else>{{ index + 1 }}</span>
</div>
<span class="ml-2 text-sm font-medium" :class="currentStep >= index ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-dark-500'">
<span
class="ml-2 text-sm font-medium"
:class="
currentStep >= index
? 'text-gray-900 dark:text-white'
: 'text-gray-400 dark:text-dark-500'
"
>
{{ step.title }}
</span>
</div>
<div v-if="index < steps.length - 1" class="w-12 h-0.5 mx-3" :class="currentStep > index ? 'bg-primary-500' : 'bg-gray-200 dark:bg-dark-700'"></div>
<div
v-if="index < steps.length - 1"
class="mx-3 h-0.5 w-12"
:class="currentStep > index ? 'bg-primary-500' : 'bg-gray-200 dark:bg-dark-700'"
></div>
</template>
</div>
</div>
<!-- Step Content -->
<div class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-8">
<div class="rounded-2xl bg-white p-8 shadow-xl dark:bg-dark-800">
<!-- Step 1: Database -->
<div v-if="currentStep === 0" class="space-y-6">
<div class="text-center mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Database Configuration</h2>
<p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Connect to your PostgreSQL database</p>
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
Database Configuration
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Connect to your PostgreSQL database
</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Host</label>
<input v-model="formData.database.host" type="text" class="input" placeholder="localhost" />
<input
v-model="formData.database.host"
type="text"
class="input"
placeholder="localhost"
/>
</div>
<div>
<label class="input-label">Port</label>
<input v-model.number="formData.database.port" type="number" class="input" placeholder="5432" />
<input
v-model.number="formData.database.port"
type="number"
class="input"
placeholder="5432"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Username</label>
<input v-model="formData.database.user" type="text" class="input" placeholder="postgres" />
<input
v-model="formData.database.user"
type="text"
class="input"
placeholder="postgres"
/>
</div>
<div>
<label class="input-label">Password</label>
<input v-model="formData.database.password" type="password" class="input" placeholder="Password" />
<input
v-model="formData.database.password"
type="password"
class="input"
placeholder="Password"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Database Name</label>
<input v-model="formData.database.dbname" type="text" class="input" placeholder="sub2api" />
<input
v-model="formData.database.dbname"
type="text"
class="input"
placeholder="sub2api"
/>
</div>
<div>
<label class="input-label">SSL Mode</label>
@@ -94,43 +159,90 @@
:disabled="testingDb"
class="btn btn-secondary w-full"
>
<svg v-if="testingDb" class="animate-spin -ml-1 mr-2 h-4 w-4" 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
v-if="testingDb"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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-if="dbConnected" class="w-5 h-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg
v-else-if="dbConnected"
class="mr-2 h-5 w-5 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
{{ testingDb ? 'Testing...' : dbConnected ? 'Connection Successful' : 'Test Connection' }}
{{
testingDb ? 'Testing...' : dbConnected ? 'Connection Successful' : 'Test Connection'
}}
</button>
</div>
<!-- Step 2: Redis -->
<div v-if="currentStep === 1" class="space-y-6">
<div class="text-center mb-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Redis Configuration</h2>
<p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Connect to your Redis server</p>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Connect to your Redis server
</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Host</label>
<input v-model="formData.redis.host" type="text" class="input" placeholder="localhost" />
<input
v-model="formData.redis.host"
type="text"
class="input"
placeholder="localhost"
/>
</div>
<div>
<label class="input-label">Port</label>
<input v-model.number="formData.redis.port" type="number" class="input" placeholder="6379" />
<input
v-model.number="formData.redis.port"
type="number"
class="input"
placeholder="6379"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Password (optional)</label>
<input v-model="formData.redis.password" type="password" class="input" placeholder="Password" />
<input
v-model="formData.redis.password"
type="password"
class="input"
placeholder="Password"
/>
</div>
<div>
<label class="input-label">Database</label>
<input v-model.number="formData.redis.db" type="number" class="input" placeholder="0" />
<input
v-model.number="formData.redis.db"
type="number"
class="input"
placeholder="0"
/>
</div>
</div>
@@ -139,38 +251,87 @@
:disabled="testingRedis"
class="btn btn-secondary w-full"
>
<svg v-if="testingRedis" class="animate-spin -ml-1 mr-2 h-4 w-4" 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
v-if="testingRedis"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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-if="redisConnected" class="w-5 h-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg
v-else-if="redisConnected"
class="mr-2 h-5 w-5 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
{{ testingRedis ? 'Testing...' : redisConnected ? 'Connection Successful' : 'Test Connection' }}
{{
testingRedis
? 'Testing...'
: redisConnected
? 'Connection Successful'
: 'Test Connection'
}}
</button>
</div>
<!-- Step 3: Admin -->
<div v-if="currentStep === 2" class="space-y-6">
<div class="text-center mb-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Admin Account</h2>
<p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Create your administrator account</p>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Create your administrator account
</p>
</div>
<div>
<label class="input-label">Email</label>
<input v-model="formData.admin.email" type="email" class="input" placeholder="admin@example.com" />
<input
v-model="formData.admin.email"
type="email"
class="input"
placeholder="admin@example.com"
/>
</div>
<div>
<label class="input-label">Password</label>
<input v-model="formData.admin.password" type="password" class="input" placeholder="Min 6 characters" />
<input
v-model="formData.admin.password"
type="password"
class="input"
placeholder="Min 6 characters"
/>
</div>
<div>
<label class="input-label">Confirm Password</label>
<input v-model="confirmPassword" type="password" class="input" placeholder="Confirm password" />
<p v-if="confirmPassword && formData.admin.password !== confirmPassword" class="input-error-text">
<input
v-model="confirmPassword"
type="password"
class="input"
placeholder="Confirm password"
/>
<p
v-if="confirmPassword && formData.admin.password !== confirmPassword"
class="input-error-text"
>
Passwords do not match
</p>
</div>
@@ -178,53 +339,110 @@
<!-- Step 4: Complete -->
<div v-if="currentStep === 3" class="space-y-6">
<div class="text-center mb-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Ready to Install</h2>
<p class="text-sm text-gray-500 dark:text-dark-400 mt-1">Review your configuration and complete setup</p>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Review your configuration and complete setup
</p>
</div>
<div class="space-y-4">
<div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-xl">
<h3 class="text-sm font-medium text-gray-500 dark:text-dark-400 mb-2">Database</h3>
<p class="text-gray-900 dark:text-white">{{ formData.database.user }}@{{ formData.database.host }}:{{ formData.database.port }}/{{ formData.database.dbname }}</p>
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Database</h3>
<p class="text-gray-900 dark:text-white">
{{ formData.database.user }}@{{ formData.database.host }}:{{
formData.database.port
}}/{{ formData.database.dbname }}
</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-xl">
<h3 class="text-sm font-medium text-gray-500 dark:text-dark-400 mb-2">Redis</h3>
<p class="text-gray-900 dark:text-white">{{ formData.redis.host }}:{{ formData.redis.port }}</p>
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Redis</h3>
<p class="text-gray-900 dark:text-white">
{{ formData.redis.host }}:{{ formData.redis.port }}
</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-dark-700 rounded-xl">
<h3 class="text-sm font-medium text-gray-500 dark:text-dark-400 mb-2">Admin Email</h3>
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Admin Email</h3>
<p class="text-gray-900 dark:text-white">{{ formData.admin.email }}</p>
</div>
</div>
</div>
<!-- Error Message -->
<div v-if="errorMessage" class="mt-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 rounded-xl">
<div
v-if="errorMessage"
class="mt-6 rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
>
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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
class="h-5 w-5 flex-shrink-0 text-red-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
<p class="text-sm text-red-700 dark:text-red-400">{{ errorMessage }}</p>
</div>
</div>
<!-- Success Message -->
<div v-if="installSuccess" class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/50 rounded-xl">
<div
v-if="installSuccess"
class="mt-6 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800/50 dark:bg-green-900/20"
>
<div class="flex items-start gap-3">
<svg v-if="!serviceReady" class="animate-spin w-5 h-5 text-green-500 flex-shrink-0" 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
v-if="!serviceReady"
class="h-5 w-5 flex-shrink-0 animate-spin text-green-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="w-5 h-5 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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
v-else
class="h-5 w-5 flex-shrink-0 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
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>
<div>
<p class="text-sm font-medium text-green-700 dark:text-green-400">Installation completed!</p>
<p class="text-sm text-green-600 dark:text-green-500 mt-1">
{{ serviceReady ? 'Redirecting to login page...' : 'Service is restarting, please wait...' }}
<p class="text-sm font-medium text-green-700 dark:text-green-400">
Installation completed!
</p>
<p class="mt-1 text-sm text-green-600 dark:text-green-500">
{{
serviceReady
? 'Redirecting to login page...'
: 'Service is restarting, please wait...'
}}
</p>
</div>
</div>
@@ -237,8 +455,18 @@
@click="currentStep--"
class="btn btn-secondary"
>
<svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
<svg
class="mr-2 h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"
/>
</svg>
Previous
</button>
@@ -251,7 +479,13 @@
class="btn btn-primary"
>
Next
<svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg
class="ml-2 h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
@@ -262,9 +496,25 @@
:disabled="installing"
class="btn btn-primary"
>
<svg v-if="installing" class="animate-spin -ml-1 mr-2 h-4 w-4" 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
v-if="installing"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
{{ installing ? 'Installing...' : 'Complete Installation' }}
</button>
@@ -275,38 +525,38 @@
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { testDatabase, testRedis, install, type InstallRequest } from '@/api/setup';
import { ref, reactive, computed } from 'vue'
import { testDatabase, testRedis, install, type InstallRequest } from '@/api/setup'
const steps = [
{ id: 'database', title: 'Database' },
{ id: 'redis', title: 'Redis' },
{ id: 'admin', title: 'Admin' },
{ id: 'complete', title: 'Complete' },
];
{ id: 'complete', title: 'Complete' }
]
const currentStep = ref(0);
const errorMessage = ref('');
const installSuccess = ref(false);
const currentStep = ref(0)
const errorMessage = ref('')
const installSuccess = ref(false)
// Connection test states
const testingDb = ref(false);
const testingRedis = ref(false);
const dbConnected = ref(false);
const redisConnected = ref(false);
const installing = ref(false);
const confirmPassword = ref('');
const serviceReady = ref(false);
const testingDb = ref(false)
const testingRedis = ref(false)
const dbConnected = ref(false)
const redisConnected = ref(false)
const installing = ref(false)
const confirmPassword = ref('')
const serviceReady = ref(false)
// Get current server port from browser location (set by install.sh)
const getCurrentPort = (): number => {
const port = window.location.port;
const port = window.location.port
if (port) {
return parseInt(port, 10);
return parseInt(port, 10)
}
// Default port based on protocol
return window.location.protocol === 'https:' ? 443 : 80;
};
return window.location.protocol === 'https:' ? 443 : 80
}
const formData = reactive<InstallRequest>({
database: {
@@ -315,105 +565,105 @@ const formData = reactive<InstallRequest>({
user: 'postgres',
password: '',
dbname: 'sub2api',
sslmode: 'disable',
sslmode: 'disable'
},
redis: {
host: 'localhost',
port: 6379,
password: '',
db: 0,
db: 0
},
admin: {
email: '',
password: '',
password: ''
},
server: {
host: '0.0.0.0',
port: getCurrentPort(), // Use current port from browser
mode: 'release',
},
});
port: getCurrentPort(), // Use current port from browser
mode: 'release'
}
})
const canProceed = computed(() => {
switch (currentStep.value) {
case 0:
return dbConnected.value;
return dbConnected.value
case 1:
return redisConnected.value;
return redisConnected.value
case 2:
return (
formData.admin.email &&
formData.admin.password.length >= 6 &&
formData.admin.password === confirmPassword.value
);
)
default:
return true;
return true
}
});
})
async function testDatabaseConnection() {
testingDb.value = true;
errorMessage.value = '';
dbConnected.value = false;
testingDb.value = true
errorMessage.value = ''
dbConnected.value = false
try {
await testDatabase(formData.database);
dbConnected.value = true;
await testDatabase(formData.database)
dbConnected.value = true
} catch (error: unknown) {
const err = error as { response?: { data?: { detail?: string } }; message?: string };
errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed';
const err = error as { response?: { data?: { detail?: string } }; message?: string }
errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed'
} finally {
testingDb.value = false;
testingDb.value = false
}
}
async function testRedisConnection() {
testingRedis.value = true;
errorMessage.value = '';
redisConnected.value = false;
testingRedis.value = true
errorMessage.value = ''
redisConnected.value = false
try {
await testRedis(formData.redis);
redisConnected.value = true;
await testRedis(formData.redis)
redisConnected.value = true
} catch (error: unknown) {
const err = error as { response?: { data?: { detail?: string } }; message?: string };
errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed';
const err = error as { response?: { data?: { detail?: string } }; message?: string }
errorMessage.value = err.response?.data?.detail || err.message || 'Connection failed'
} finally {
testingRedis.value = false;
testingRedis.value = false
}
}
function nextStep() {
if (canProceed.value) {
errorMessage.value = '';
currentStep.value++;
errorMessage.value = ''
currentStep.value++
}
}
async function performInstall() {
installing.value = true;
errorMessage.value = '';
installing.value = true
errorMessage.value = ''
try {
await install(formData);
installSuccess.value = true;
await install(formData)
installSuccess.value = true
// Start polling for service restart
waitForServiceRestart();
waitForServiceRestart()
} catch (error: unknown) {
const err = error as { response?: { data?: { detail?: string } }; message?: string };
errorMessage.value = err.response?.data?.detail || err.message || 'Installation failed';
const err = error as { response?: { data?: { detail?: string } }; message?: string }
errorMessage.value = err.response?.data?.detail || err.message || 'Installation failed'
} finally {
installing.value = false;
installing.value = false
}
}
// Wait for service to restart and become available
async function waitForServiceRestart() {
const maxAttempts = 30; // 30 attempts, ~30 seconds max
const interval = 1000; // 1 second between attempts
const maxAttempts = 30 // 30 attempts, ~30 seconds max
const interval = 1000 // 1 second between attempts
// Wait a moment for the service to start restarting
await new Promise(resolve => setTimeout(resolve, 2000));
await new Promise((resolve) => setTimeout(resolve, 2000))
for (let attempt = 0; attempt < maxAttempts; attempt++) {
try {
@@ -421,25 +671,25 @@ async function waitForServiceRestart() {
const response = await fetch('/health', {
method: 'GET',
cache: 'no-store'
});
})
if (response.ok) {
// Service is up, check if setup is no longer needed
const statusResponse = await fetch('/setup/status', {
method: 'GET',
cache: 'no-store'
});
})
if (statusResponse.ok) {
const data = await statusResponse.json();
const data = await statusResponse.json()
// If needs_setup is false, service has restarted in normal mode
if (data.data && !data.data.needs_setup) {
serviceReady.value = true;
serviceReady.value = true
// Redirect to login page after a short delay
setTimeout(() => {
window.location.href = '/login';
}, 1500);
return;
window.location.href = '/login'
}, 1500)
return
}
}
}
@@ -447,11 +697,12 @@ async function waitForServiceRestart() {
// Service not ready yet, continue polling
}
await new Promise(resolve => setTimeout(resolve, interval));
await new Promise((resolve) => setTimeout(resolve, interval))
}
// If we reach here, service didn't restart in time
// Show a message to refresh manually
errorMessage.value = 'Service restart is taking longer than expected. Please refresh the page manually.';
errorMessage.value =
'Service restart is taking longer than expected. Please refresh the page manually.'
}
</script>

606
frontend/src/views/user/DashboardView.vue
View File

@@ -12,14 +12,28 @@
<!-- Balance -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
<svg class="w-5 h-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="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
<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="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
/>
</svg>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.balance') }}</p>
<p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">${{ formatBalance(user?.balance || 0) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.balance') }}
</p>
<p class="text-xl font-bold text-emerald-600 dark:text-emerald-400">
${{ formatBalance(user?.balance || 0) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.available') }}</p>
</div>
</div>
@@ -28,15 +42,31 @@
<!-- API Keys -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.apiKeys') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.total_api_keys }}</p>
<p class="text-xs text-green-600 dark:text-green-400">{{ stats.active_api_keys }} {{ t('common.active') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.apiKeys') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ stats.total_api_keys }}
</p>
<p class="text-xs text-green-600 dark:text-green-400">
{{ stats.active_api_keys }} {{ t('common.active') }}
</p>
</div>
</div>
</div>
@@ -44,15 +74,31 @@
<!-- Today Requests -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.todayRequests') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ stats.today_requests }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.todayRequests') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ stats.today_requests }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('common.total') }}: {{ formatNumber(stats.total_requests) }}
</p>
</div>
</div>
</div>
@@ -60,21 +106,44 @@
<!-- Today Cost -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
<svg class="w-5 h-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="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<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="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.todayCost') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.todayCost') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
<span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')">${{ formatCost(stats.today_actual_cost) }}</span>
<span class="text-sm font-normal text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')"> / ${{ formatCost(stats.today_cost) }}</span>
<span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')"
>${{ formatCost(stats.today_actual_cost) }}</span
>
<span
class="text-sm font-normal text-gray-400 dark:text-gray-500"
:title="t('dashboard.standard')"
>
/ ${{ formatCost(stats.today_cost) }}</span
>
</p>
<p class="text-xs">
<span class="text-gray-500 dark:text-gray-400">{{ t('common.total') }}: </span>
<span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')">${{ formatCost(stats.total_actual_cost) }}</span>
<span class="text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')"> / ${{ formatCost(stats.total_cost) }}</span>
<span class="text-purple-600 dark:text-purple-400" :title="t('dashboard.actual')"
>${{ formatCost(stats.total_actual_cost) }}</span
>
<span class="text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')">
/ ${{ formatCost(stats.total_cost) }}</span
>
</p>
</div>
</div>
@@ -86,16 +155,31 @@
<!-- Today Tokens -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.todayTokens') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.today_tokens) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.todayTokens') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(stats.today_tokens) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('dashboard.input') }}: {{ formatTokens(stats.today_input_tokens) }} / {{ t('dashboard.output') }}: {{ formatTokens(stats.today_output_tokens) }}
{{ t('dashboard.input') }}: {{ formatTokens(stats.today_input_tokens) }} /
{{ t('dashboard.output') }}: {{ formatTokens(stats.today_output_tokens) }}
</p>
</div>
</div>
@@ -104,16 +188,31 @@
<!-- Total Tokens -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-indigo-100 dark:bg-indigo-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.totalTokens') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.total_tokens) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.totalTokens') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(stats.total_tokens) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('dashboard.input') }}: {{ formatTokens(stats.total_input_tokens) }} / {{ t('dashboard.output') }}: {{ formatTokens(stats.total_output_tokens) }}
{{ t('dashboard.input') }}: {{ formatTokens(stats.total_input_tokens) }} /
{{ t('dashboard.output') }}: {{ formatTokens(stats.total_output_tokens) }}
</p>
</div>
</div>
@@ -122,19 +221,35 @@
<!-- Performance (RPM/TPM) -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div class="flex-1">
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.performance') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.performance') }}
</p>
<div class="flex items-baseline gap-2">
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats.rpm) }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(stats.rpm) }}
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">RPM</span>
</div>
<div class="flex items-baseline gap-2">
<p class="text-sm font-semibold text-violet-600 dark:text-violet-400">{{ formatTokens(stats.tpm) }}</p>
<p class="text-sm font-semibold text-violet-600 dark:text-violet-400">
{{ formatTokens(stats.tpm) }}
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">TPM</span>
</div>
</div>
@@ -144,15 +259,31 @@
<!-- Avg Response Time -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-rose-100 dark:bg-rose-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.avgResponse') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(stats.average_duration_ms) }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('dashboard.averageTime') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('dashboard.avgResponse') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatDuration(stats.average_duration_ms) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('dashboard.averageTime') }}
</p>
</div>
</div>
</div>
@@ -164,15 +295,19 @@
<div class="card p-4">
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.timeRange') }}:</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>{{ t('dashboard.timeRange') }}:</span
>
<DateRangePicker
v-model:start-date="startDate"
v-model:end-date="endDate"
@change="onDateRangeChange"
/>
</div>
<div class="flex items-center gap-2 ml-auto">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.granularity') }}:</span>
<div class="ml-auto flex items-center gap-2">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>{{ t('dashboard.granularity') }}:</span
>
<div class="w-28">
<Select
v-model="granularity"
@@ -188,32 +323,58 @@
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<!-- Model Distribution Chart -->
<div class="card p-4">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('dashboard.modelDistribution') }}</h3>
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
{{ t('dashboard.modelDistribution') }}
</h3>
<div class="flex items-center gap-6">
<div class="w-48 h-48">
<Doughnut v-if="modelChartData" :data="modelChartData" :options="doughnutOptions" />
<div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
<div class="h-48 w-48">
<Doughnut
v-if="modelChartData"
:data="modelChartData"
:options="doughnutOptions"
/>
<div
v-else
class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
>
{{ t('dashboard.noDataAvailable') }}
</div>
</div>
<div class="flex-1 max-h-48 overflow-y-auto">
<div class="max-h-48 flex-1 overflow-y-auto">
<table class="w-full text-xs">
<thead>
<tr class="text-gray-500 dark:text-gray-400">
<th class="text-left pb-2">{{ t('dashboard.model') }}</th>
<th class="text-right pb-2">{{ t('dashboard.requests') }}</th>
<th class="text-right pb-2">{{ t('dashboard.tokens') }}</th>
<th class="text-right pb-2">{{ t('dashboard.actual') }}</th>
<th class="text-right pb-2">{{ t('dashboard.standard') }}</th>
<th class="pb-2 text-left">{{ t('dashboard.model') }}</th>
<th class="pb-2 text-right">{{ t('dashboard.requests') }}</th>
<th class="pb-2 text-right">{{ t('dashboard.tokens') }}</th>
<th class="pb-2 text-right">{{ t('dashboard.actual') }}</th>
<th class="pb-2 text-right">{{ t('dashboard.standard') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="model in modelStats" :key="model.model" class="border-t border-gray-100 dark:border-gray-700">
<td class="py-1.5 text-gray-900 dark:text-white font-medium truncate max-w-[100px]" :title="model.model">{{ model.model }}</td>
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatNumber(model.requests) }}</td>
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatTokens(model.total_tokens) }}</td>
<td class="py-1.5 text-right text-green-600 dark:text-green-400">${{ formatCost(model.actual_cost) }}</td>
<td class="py-1.5 text-right text-gray-400 dark:text-gray-500">${{ formatCost(model.cost) }}</td>
<tr
v-for="model in modelStats"
:key="model.model"
class="border-t border-gray-100 dark:border-gray-700"
>
<td
class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white"
:title="model.model"
>
{{ model.model }}
</td>
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
{{ formatNumber(model.requests) }}
</td>
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
{{ formatTokens(model.total_tokens) }}
</td>
<td class="py-1.5 text-right text-green-600 dark:text-green-400">
${{ formatCost(model.actual_cost) }}
</td>
<td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
${{ formatCost(model.cost) }}
</td>
</tr>
</tbody>
</table>
@@ -223,10 +384,15 @@
<!-- Token Usage Trend Chart -->
<div class="card p-4">
<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('dashboard.tokenUsageTrend') }}</h3>
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
{{ t('dashboard.tokenUsageTrend') }}
</h3>
<div class="h-48">
<Line v-if="trendChartData" :data="trendChartData" :options="lineOptions" />
<div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
<div
v-else
class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
>
{{ t('dashboard.noDataAvailable') }}
</div>
</div>
@@ -239,8 +405,12 @@
<!-- Recent Usage - Takes 2 columns -->
<div class="lg:col-span-2">
<div class="card">
<div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700 flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.recentUsage') }}</h2>
<div
class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dark-700"
>
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
{{ t('dashboard.recentUsage') }}
</h2>
<span class="badge badge-gray">{{ t('dashboard.last7Days') }}</span>
</div>
<div class="p-6">
@@ -257,16 +427,30 @@
<div
v-for="log in recentUsage"
:key="log.id"
class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors"
class="flex items-center justify-between rounded-xl bg-gray-50 p-4 transition-colors hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
>
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
<svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
<div
class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
>
<svg
class="h-5 w-5 text-primary-600 dark:text-primary-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
/>
</svg>
</div>
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ log.model }}</p>
<p class="text-sm font-medium text-gray-900 dark:text-white">
{{ log.model }}
</p>
<p class="text-xs text-gray-500 dark:text-dark-400">
{{ formatDate(log.created_at) }}
</p>
@@ -274,8 +458,12 @@
</div>
<div class="text-right">
<p class="text-sm font-semibold">
<span class="text-green-600 dark:text-green-400" title="实际扣除">${{ formatCost(log.actual_cost) }}</span>
<span class="text-gray-400 dark:text-gray-500 font-normal" title="标准计费"> / ${{ formatCost(log.total_cost) }}</span>
<span class="text-green-600 dark:text-green-400" title="实际扣除"
>${{ formatCost(log.actual_cost) }}</span
>
<span class="font-normal text-gray-400 dark:text-gray-500" title="标准计费">
/ ${{ formatCost(log.total_cost) }}</span
>
</p>
<p class="text-xs text-gray-500 dark:text-dark-400">
{{ (log.input_tokens + log.output_tokens).toLocaleString() }} tokens
@@ -285,11 +473,21 @@
<router-link
to="/usage"
class="flex items-center justify-center gap-2 py-3 text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
class="flex items-center justify-center gap-2 py-3 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
>
{{ t('dashboard.viewAllUsage') }}
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
<svg
class="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="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</router-link>
</div>
@@ -300,61 +498,141 @@
<!-- Quick Actions - Takes 1 column -->
<div class="lg:col-span-1">
<div class="card">
<div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.quickActions') }}</h2>
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
{{ t('dashboard.quickActions') }}
</h2>
</div>
<div class="p-4 space-y-3">
<div class="space-y-3 p-4">
<button
@click="navigateTo('/keys')"
class="w-full flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-all duration-200 group text-left"
class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
>
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center group-hover:scale-105 transition-transform">
<svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 transition-transform group-hover:scale-105 dark:bg-primary-900/30"
>
<svg
class="h-6 w-6 text-primary-600 dark:text-primary-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.createApiKey') }}</p>
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.generateNewKey') }}</p>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">
{{ t('dashboard.createApiKey') }}
</p>
<p class="text-xs text-gray-500 dark:text-dark-400">
{{ t('dashboard.generateNewKey') }}
</p>
</div>
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500 group-hover:text-primary-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
<svg
class="h-5 w-5 text-gray-400 transition-colors group-hover:text-primary-500 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</button>
<button
@click="navigateTo('/usage')"
class="w-full flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-all duration-200 group text-left"
class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
>
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center group-hover:scale-105 transition-transform">
<svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" 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" />
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 transition-transform group-hover:scale-105 dark:bg-emerald-900/30"
>
<svg
class="h-6 w-6 text-emerald-600 dark:text-emerald-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.viewUsage') }}</p>
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.checkDetailedLogs') }}</p>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">
{{ t('dashboard.viewUsage') }}
</p>
<p class="text-xs text-gray-500 dark:text-dark-400">
{{ t('dashboard.checkDetailedLogs') }}
</p>
</div>
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500 group-hover:text-emerald-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
<svg
class="h-5 w-5 text-gray-400 transition-colors group-hover:text-emerald-500 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</button>
<button
@click="navigateTo('/redeem')"
class="w-full flex items-center gap-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-800/50 hover:bg-gray-100 dark:hover:bg-dark-800 transition-all duration-200 group text-left"
class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800"
>
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center group-hover:scale-105 transition-transform">
<svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 transition-transform group-hover:scale-105 dark:bg-amber-900/30"
>
<svg
class="h-6 w-6 text-amber-600 dark:text-amber-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('dashboard.redeemCode') }}</p>
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('dashboard.addBalanceWithCode') }}</p>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">
{{ t('dashboard.redeemCode') }}
</p>
<p class="text-xs text-gray-500 dark:text-dark-400">
{{ t('dashboard.addBalanceWithCode') }}
</p>
</div>
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500 group-hover:text-amber-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
<svg
class="h-5 w-5 text-gray-400 transition-colors group-hover:text-amber-500 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</button>
</div>
@@ -431,7 +709,7 @@ const endDate = ref('')
// Granularity options for Select component
const granularityOptions = computed(() => [
{ value: 'day', label: t('dashboard.day') },
{ value: 'hour', label: t('dashboard.hour') },
{ value: 'hour', label: t('dashboard.hour') }
])
// Dark mode detection
@@ -445,7 +723,7 @@ const chartColors = computed(() => ({
grid: isDarkMode.value ? '#374151' : '#e5e7eb',
input: '#3b82f6',
output: '#10b981',
cache: '#f59e0b',
cache: '#f59e0b'
}))
// Doughnut chart options
@@ -454,7 +732,7 @@ const doughnutOptions = computed(() => ({
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
display: false
},
tooltip: {
callbacks: {
@@ -463,10 +741,10 @@ const doughnutOptions = computed(() => ({
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
const percentage = ((value / total) * 100).toFixed(1)
return `${context.label}: ${formatTokens(value)} (${percentage}%)`
},
},
},
},
}
}
}
}
}))
// Line chart options
@@ -475,7 +753,7 @@ const lineOptions = computed(() => ({
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'index' as const,
mode: 'index' as const
},
plugins: {
legend: {
@@ -486,9 +764,9 @@ const lineOptions = computed(() => ({
pointStyle: 'circle',
padding: 15,
font: {
size: 11,
},
},
size: 11
}
}
},
tooltip: {
callbacks: {
@@ -502,35 +780,35 @@ const lineOptions = computed(() => ({
return `Actual: $${formatCost(data.actual_cost)} | Standard: $${formatCost(data.cost)}`
}
return ''
},
},
},
}
}
}
},
scales: {
x: {
grid: {
color: chartColors.value.grid,
color: chartColors.value.grid
},
ticks: {
color: chartColors.value.text,
font: {
size: 10,
},
},
size: 10
}
}
},
y: {
grid: {
color: chartColors.value.grid,
color: chartColors.value.grid
},
ticks: {
color: chartColors.value.text,
font: {
size: 10,
size: 10
},
callback: (value: string | number) => formatTokens(Number(value)),
},
},
},
callback: (value: string | number) => formatTokens(Number(value))
}
}
}
}))
// Model chart data
@@ -538,17 +816,27 @@ const modelChartData = computed(() => {
if (!modelStats.value?.length) return null
const colors = [
'#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
'#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16'
'#3b82f6',
'#10b981',
'#f59e0b',
'#ef4444',
'#8b5cf6',
'#ec4899',
'#14b8a6',
'#f97316',
'#6366f1',
'#84cc16'
]
return {
labels: modelStats.value.map(m => m.model),
datasets: [{
data: modelStats.value.map(m => m.total_tokens),
backgroundColor: colors.slice(0, modelStats.value.length),
borderWidth: 0,
}],
labels: modelStats.value.map((m) => m.model),
datasets: [
{
data: modelStats.value.map((m) => m.total_tokens),
backgroundColor: colors.slice(0, modelStats.value.length),
borderWidth: 0
}
]
}
})
@@ -557,33 +845,33 @@ const trendChartData = computed(() => {
if (!trendData.value?.length) return null
return {
labels: trendData.value.map(d => d.date),
labels: trendData.value.map((d) => d.date),
datasets: [
{
label: 'Input',
data: trendData.value.map(d => d.input_tokens),
data: trendData.value.map((d) => d.input_tokens),
borderColor: chartColors.value.input,
backgroundColor: `${chartColors.value.input}20`,
fill: true,
tension: 0.3,
tension: 0.3
},
{
label: 'Output',
data: trendData.value.map(d => d.output_tokens),
data: trendData.value.map((d) => d.output_tokens),
borderColor: chartColors.value.output,
backgroundColor: `${chartColors.value.output}20`,
fill: true,
tension: 0.3,
tension: 0.3
},
{
label: 'Cache',
data: trendData.value.map(d => d.cache_tokens),
data: trendData.value.map((d) => d.cache_tokens),
borderColor: chartColors.value.cache,
backgroundColor: `${chartColors.value.cache}20`,
fill: true,
tension: 0.3,
},
],
tension: 0.3
}
]
}
})
@@ -641,7 +929,11 @@ const navigateTo = (path: string) => {
}
// Date range change handler
const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
const onDateRangeChange = (range: {
startDate: string
endDate: string
preset: string | null
}) => {
const start = new Date(range.startDate)
const end = new Date(range.endDate)
const daysDiff = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
@@ -685,12 +977,12 @@ const loadChartData = async () => {
const params = {
start_date: startDate.value,
end_date: endDate.value,
granularity: granularity.value,
granularity: granularity.value
}
const [trendResponse, modelResponse] = await Promise.all([
usageAPI.getDashboardTrend(params),
usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value }),
usageAPI.getDashboardModels({ start_date: startDate.value, end_date: endDate.value })
])
// Ensure we always have arrays, even if API returns null
@@ -731,7 +1023,7 @@ watch(isDarkMode, () => {
<style scoped>
/* Compact Select styling for dashboard */
:deep(.select-trigger) {
@apply px-3 py-1.5 text-sm rounded-lg;
@apply rounded-lg px-3 py-1.5 text-sm;
}
:deep(.select-dropdown) {

263
frontend/src/views/user/KeysView.vue
View File

@@ -10,17 +10,27 @@
:title="t('common.refresh')"
>
<svg
:class="['w-5 h-5', loading ? 'animate-spin' : '']"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"
: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" />
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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('keys.createKey') }}
@@ -29,11 +39,7 @@
<!-- API Keys Table -->
<div class="card overflow-hidden">
<DataTable
:columns="columns"
:data="apiKeys"
:loading="loading"
>
<DataTable :columns="columns" :data="apiKeys" :loading="loading">
<template #cell-key="{ value, row }">
<div class="flex items-center gap-2">
<code class="code text-xs">
@@ -41,16 +47,37 @@
</code>
<button
@click="copyToClipboard(value, row.id)"
class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition-colors"
:class="copiedKeyId === row.id ? 'text-green-500' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'"
class="rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
:class="
copiedKeyId === row.id
? 'text-green-500'
: 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
"
:title="copiedKeyId === row.id ? t('keys.copied') : t('keys.copyToClipboard')"
>
<svg v-if="copiedKeyId === row.id" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<svg
v-if="copiedKeyId === row.id"
class="h-4 w-4"
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>
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
<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="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
/>
</svg>
</button>
</div>
@@ -61,11 +88,11 @@
</template>
<template #cell-group="{ row }">
<div class="relative group/dropdown">
<div class="group/dropdown relative">
<button
:ref="(el) => setGroupButtonRef(row.id, el)"
@click="openGroupSelector(row)"
class="flex items-center gap-2 px-2 py-1 -mx-2 -my-1 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 transition-all duration-200 cursor-pointer"
class="-mx-2 -my-1 flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-dark-700"
:title="t('keys.clickToChangeGroup')"
>
<GroupBadge
@@ -75,9 +102,21 @@
:subscription-type="row.group.subscription_type"
:rate-multiplier="row.group.rate_multiplier"
/>
<span v-else class="text-sm text-gray-400 dark:text-dark-500">{{ t('keys.noGroup') }}</span>
<svg class="w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/dropdown:opacity-100 transition-opacity" 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" />
<span v-else class="text-sm text-gray-400 dark:text-dark-500">{{
t('keys.noGroup')
}}</span>
<svg
class="h-3.5 w-3.5 text-gray-400 opacity-0 transition-opacity group-hover/dropdown:opacity-100"
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>
@@ -91,7 +130,7 @@
${{ (usageStats[row.id]?.today_actual_cost ?? 0).toFixed(4) }}
</span>
</div>
<div class="flex items-center gap-1.5 mt-0.5">
<div class="mt-0.5 flex items-center gap-1.5">
<span class="text-gray-500 dark:text-gray-400">{{ t('keys.total') }}:</span>
<span class="font-medium text-gray-900 dark:text-white">
${{ (usageStats[row.id]?.total_actual_cost ?? 0).toFixed(4) }}
@@ -101,14 +140,7 @@
</template>
<template #cell-status="{ value }">
<span
:class="[
'badge',
value === 'active'
? 'badge-success'
: 'badge-gray'
]"
>
<span :class="['badge', value === 'active' ? 'badge-success' : 'badge-gray']">
{{ value }}
</span>
</template>
@@ -122,61 +154,121 @@
<!-- Use Key Button -->
<button
@click="openUseKeyModal(row)"
class="p-2 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
:title="t('keys.useKey')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
<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="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
/>
</svg>
</button>
<!-- Import to CC Switch Button -->
<button
@click="importToCcswitch(row.key)"
class="p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
:title="t('keys.importToCcSwitch')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
<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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
/>
</svg>
</button>
<!-- Toggle Status Button -->
<button
@click="toggleKeyStatus(row)"
:class="[
'p-2 rounded-lg transition-colors',
'rounded-lg p-2 transition-colors',
row.status === 'active'
? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 text-gray-500 hover:text-yellow-600 dark:hover:text-yellow-400'
: 'hover:bg-green-50 dark:hover:bg-green-900/20 text-gray-500 hover:text-green-600 dark:hover:text-green-400'
? 'text-gray-500 hover:bg-yellow-50 hover:text-yellow-600 dark:hover:bg-yellow-900/20 dark:hover:text-yellow-400'
: 'text-gray-500 hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400'
]"
:title="row.status === 'active' ? t('keys.disable') : t('keys.enable')"
>
<svg v-if="row.status === 'active'" class="w-4 h-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
v-if="row.status === 'active'"
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>
<svg v-else class="w-4 h-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
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>
</button>
<!-- Edit Button -->
<button
@click="editKey(row)"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-dark-700 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
title="Edit"
>
<svg class="w-4 h-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
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>
</button>
<!-- Delete Button -->
<button
@click="confirmDelete(row)"
class="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
title="Delete"
>
<svg class="w-4 h-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
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>
</button>
</div>
@@ -292,28 +384,37 @@
</div>
<div class="flex justify-end gap-3 pt-4">
<button
@click="closeModals"
type="button"
class="btn btn-secondary"
>
<button @click="closeModals" type="button" class="btn btn-secondary">
{{ t('common.cancel') }}
</button>
<button
type="submit"
:disabled="submitting"
class="btn btn-primary"
>
<button type="submit" :disabled="submitting" class="btn btn-primary">
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-4 w-4"
class="-ml-1 mr-2 h-4 w-4 animate-spin"
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>
<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>
{{ submitting ? t('keys.saving') : (showEditModal ? t('common.update') : t('common.create')) }}
{{
submitting
? t('keys.saving')
: showEditModal
? t('common.update')
: t('common.create')
}}
</button>
</div>
</form>
@@ -345,17 +446,18 @@
<div
v-if="groupSelectorKeyId !== null && dropdownPosition"
ref="dropdownRef"
class="fixed z-[9999] w-64 rounded-xl bg-white dark:bg-dark-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200"
class="animate-in fade-in slide-in-from-top-2 fixed z-[9999] 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="p-1.5 max-h-64 overflow-y-auto">
<div class="max-h-64 overflow-y-auto p-1.5">
<button
v-for="option in groupOptions"
:key="option.value ?? 'null'"
@click="changeGroup(selectedKeyForGroup!, option.value)"
:class="[
'w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors',
(selectedKeyForGroup?.group_id === option.value || (!selectedKeyForGroup?.group_id && option.value === null))
'flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors',
selectedKeyForGroup?.group_id === option.value ||
(!selectedKeyForGroup?.group_id && option.value === null)
? 'bg-primary-50 dark:bg-primary-900/20'
: 'hover:bg-gray-100 dark:hover:bg-dark-700'
]"
@@ -367,8 +469,11 @@
:rate-multiplier="option.rate"
/>
<svg
v-if="selectedKeyForGroup?.group_id === option.value || (!selectedKeyForGroup?.group_id && option.value === null)"
class="w-4 h-4 text-primary-600 dark:text-primary-400 shrink-0"
v-if="
selectedKeyForGroup?.group_id === option.value ||
(!selectedKeyForGroup?.group_id && option.value === null)
"
class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -451,7 +556,7 @@ const groupButtonRefs = ref<Map<number, HTMLElement>>(new Map())
// Get the currently selected key for group change
const selectedKeyForGroup = computed(() => {
if (groupSelectorKeyId.value === null) return null
return apiKeys.value.find(k => k.id === groupSelectorKeyId.value) || null
return apiKeys.value.find((k) => k.id === groupSelectorKeyId.value) || null
})
const setGroupButtonRef = (keyId: number, el: Element | ComponentPublicInstance | null) => {
@@ -493,7 +598,7 @@ const statusOptions = computed(() => [
// Convert groups to Select options format with rate multiplier and subscription type
const groupOptions = computed(() =>
groups.value.map(group => ({
groups.value.map((group) => ({
value: group.id,
label: group.name,
rate: group.rate_multiplier,
@@ -538,7 +643,7 @@ const loadApiKeys = async () => {
// Load usage stats for all API keys in the list
if (response.items.length > 0) {
const keyIds = response.items.map(k => k.id)
const keyIds = response.items.map((k) => k.id)
try {
const usageResponse = await usageAPI.getDashboardApiKeysUsage(keyIds)
usageStats.value = usageResponse.stats
@@ -600,7 +705,9 @@ const toggleKeyStatus = async (key: ApiKey) => {
const newStatus = key.status === 'active' ? 'inactive' : 'active'
try {
await keysAPI.toggleStatus(key.id, newStatus)
appStore.showSuccess(newStatus === 'active' ? t('keys.keyEnabledSuccess') : t('keys.keyDisabledSuccess'))
appStore.showSuccess(
newStatus === 'active' ? t('keys.keyEnabledSuccess') : t('keys.keyDisabledSuccess')
)
loadApiKeys()
} catch (error) {
appStore.showError(t('keys.failedToUpdateStatus'))

196
frontend/src/views/user/ProfileView.vue
View File

@@ -1,6 +1,6 @@
<template>
<AppLayout>
<div class="max-w-4xl mx-auto space-y-6">
<div class="mx-auto max-w-4xl space-y-6">
<!-- Account Stats Summary -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
<StatCard
@@ -25,28 +25,26 @@
<!-- User Information -->
<div class="card overflow-hidden">
<div class="px-6 py-5 bg-gradient-to-r from-primary-500/10 to-primary-600/5 dark:from-primary-500/20 dark:to-primary-600/10 border-b border-gray-100 dark:border-dark-700">
<div
class="border-b border-gray-100 bg-gradient-to-r from-primary-500/10 to-primary-600/5 px-6 py-5 dark:border-dark-700 dark:from-primary-500/20 dark:to-primary-600/10"
>
<div class="flex items-center gap-4">
<!-- Avatar -->
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg shadow-primary-500/20">
<div
class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
>
{{ user?.email?.charAt(0).toUpperCase() || 'U' }}
</div>
<div class="flex-1 min-w-0">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white truncate">{{ user?.email }}</h2>
<div class="flex items-center gap-2 mt-1">
<span
:class="[
'badge',
user?.role === 'admin' ? 'badge-primary' : 'badge-gray'
]"
>
<div class="min-w-0 flex-1">
<h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
{{ user?.email }}
</h2>
<div class="mt-1 flex items-center gap-2">
<span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
{{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
</span>
<span
:class="[
'badge',
user?.status === 'active' ? 'badge-success' : 'badge-danger'
]"
:class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
>
{{ user?.status }}
</span>
@@ -57,20 +55,56 @@
<div class="px-6 py-4">
<div class="space-y-3">
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
<svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
<svg
class="h-4 w-4 text-gray-400 dark:text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
/>
</svg>
<span class="truncate">{{ user?.email }}</span>
</div>
<div v-if="user?.username" class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
<svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
<div
v-if="user?.username"
class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
>
<svg
class="h-4 w-4 text-gray-400 dark:text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
/>
</svg>
<span class="truncate">{{ user.username }}</span>
</div>
<div v-if="user?.wechat" class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
<svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
<div
v-if="user?.wechat"
class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
>
<svg
class="h-4 w-4 text-gray-400 dark:text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
/>
</svg>
<span class="truncate">{{ user.wechat }}</span>
</div>
@@ -79,17 +113,36 @@
</div>
<!-- Contact Support Section -->
<div v-if="contactInfo" class="card border-primary-200 dark:border-primary-800/40 bg-gradient-to-r from-primary-50 to-primary-100/50 dark:from-primary-900/20 dark:to-primary-800/10">
<div
v-if="contactInfo"
class="card border-primary-200 bg-gradient-to-r from-primary-50 to-primary-100/50 dark:border-primary-800/40 dark:from-primary-900/20 dark:to-primary-800/10"
>
<div class="px-6 py-5">
<div class="flex items-center gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
<svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
>
<svg
class="h-6 w-6 text-primary-600 dark:text-primary-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
/>
</svg>
</div>
<div class="flex-1 min-w-0">
<h3 class="text-sm font-semibold text-primary-800 dark:text-primary-200">{{ t('common.contactSupport') }}</h3>
<p class="mt-1 text-sm font-medium text-primary-600 dark:text-primary-300">{{ contactInfo }}</p>
<div class="min-w-0 flex-1">
<h3 class="text-sm font-semibold text-primary-800 dark:text-primary-200">
{{ t('common.contactSupport') }}
</h3>
<p class="mt-1 text-sm font-medium text-primary-600 dark:text-primary-300">
{{ contactInfo }}
</p>
</div>
</div>
</div>
@@ -97,8 +150,10 @@
<!-- Edit Profile Section -->
<div class="card">
<div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
<h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ t('profile.editProfile') }}</h2>
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
{{ t('profile.editProfile') }}
</h2>
</div>
<div class="px-6 py-6">
<form @submit.prevent="handleUpdateProfile" class="space-y-4">
@@ -129,11 +184,7 @@
</div>
<div class="flex justify-end pt-4">
<button
type="submit"
:disabled="updatingProfile"
class="btn btn-primary"
>
<button type="submit" :disabled="updatingProfile" class="btn btn-primary">
{{ updatingProfile ? t('profile.updating') : t('profile.updateProfile') }}
</button>
</div>
@@ -143,8 +194,10 @@
<!-- Change Password Section -->
<div class="card">
<div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
<h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ t('profile.changePassword') }}</h2>
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
{{ t('profile.changePassword') }}
</h2>
</div>
<div class="px-6 py-6">
<form @submit.prevent="handleChangePassword" class="space-y-4">
@@ -194,18 +247,17 @@
</div>
<div class="flex justify-end pt-4">
<button
type="submit"
:disabled="changingPassword"
class="btn btn-primary"
>
{{ changingPassword ? t('profile.changingPassword') : t('profile.changePasswordButton') }}
<button type="submit" :disabled="changingPassword" class="btn btn-primary">
{{
changingPassword
? t('profile.changingPassword')
: t('profile.changePasswordButton')
}}
</button>
</div>
</form>
</div>
</div>
</div>
</AppLayout>
</template>
@@ -223,21 +275,48 @@ import StatCard from '@/components/common/StatCard.vue'
// SVG Icon Components
const WalletIcon = {
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3' })
])
render: () =>
h(
'svg',
{ fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
[
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3'
})
]
)
}
const BoltIcon = {
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })
])
render: () =>
h(
'svg',
{ fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
[
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'
})
]
)
}
const CalendarIcon = {
render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [
h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', d: 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5' })
])
render: () =>
h(
'svg',
{ fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
[
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
d: 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'
})
]
)
}
const authStore = useAuthStore()
@@ -303,10 +382,7 @@ const handleChangePassword = async () => {
changingPassword.value = true
try {
await userAPI.changePassword(
passwordForm.value.old_password,
passwordForm.value.new_password
)
await userAPI.changePassword(passwordForm.value.old_password, passwordForm.value.new_password)
// Clear form
passwordForm.value = {

256
frontend/src/views/user/RedeemView.vue
View File

@@ -1,12 +1,24 @@
<template>
<AppLayout>
<div class="max-w-2xl mx-auto space-y-6">
<div class="mx-auto max-w-2xl space-y-6">
<!-- Current Balance Card -->
<div class="card overflow-hidden">
<div class="bg-gradient-to-br from-primary-500 to-primary-600 px-6 py-8 text-center">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm mb-4">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
<div
class="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm"
>
<svg
class="h-8 w-8 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
/>
</svg>
</div>
<p class="text-sm font-medium text-primary-100">{{ t('redeem.currentBalance') }}</p>
@@ -28,9 +40,19 @@
{{ t('redeem.redeemCodeLabel') }}
</label>
<div class="relative mt-1">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
<svg
class="h-5 w-5 text-gray-400 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
</div>
<input
@@ -40,7 +62,7 @@
required
:placeholder="t('redeem.redeemCodePlaceholder')"
:disabled="submitting"
class="input pl-12 text-lg py-3"
class="input py-3 pl-12 text-lg"
/>
</div>
<p class="input-hint">
@@ -55,15 +77,37 @@
>
<svg
v-if="submitting"
class="animate-spin -ml-1 mr-2 h-5 w-5"
class="-ml-1 mr-2 h-5 w-5 animate-spin"
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>
<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="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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
v-else
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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
{{ submitting ? t('redeem.redeeming') : t('redeem.redeemButton') }}
</button>
@@ -75,13 +119,25 @@
<transition name="fade">
<div
v-if="redeemResult"
class="card border-emerald-200 dark:border-emerald-800/50 bg-emerald-50 dark:bg-emerald-900/20"
class="card border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-900/20"
>
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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" />
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-900/30"
>
<svg
class="h-5 w-5 text-emerald-600 dark:text-emerald-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
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>
</div>
<div class="flex-1">
@@ -95,18 +151,27 @@
{{ t('redeem.added') }}: ${{ redeemResult.value.toFixed(2) }}
</p>
<p v-else-if="redeemResult.type === 'concurrency'" class="font-medium">
{{ t('redeem.added') }}: {{ redeemResult.value }} {{ t('redeem.concurrentRequests') }}
{{ t('redeem.added') }}: {{ redeemResult.value }}
{{ t('redeem.concurrentRequests') }}
</p>
<p v-else-if="redeemResult.type === 'subscription'" class="font-medium">
{{ t('redeem.subscriptionAssigned') }}
<span v-if="redeemResult.group_name"> - {{ redeemResult.group_name }}</span>
<span v-if="redeemResult.validity_days"> ({{ t('redeem.subscriptionDays', { days: redeemResult.validity_days }) }})</span>
<span v-if="redeemResult.validity_days">
({{
t('redeem.subscriptionDays', { days: redeemResult.validity_days })
}})</span
>
</p>
<p v-if="redeemResult.new_balance !== undefined">
{{ t('redeem.newBalance') }}: <span class="font-semibold">${{ redeemResult.new_balance.toFixed(2) }}</span>
{{ t('redeem.newBalance') }}:
<span class="font-semibold">${{ redeemResult.new_balance.toFixed(2) }}</span>
</p>
<p v-if="redeemResult.new_concurrency !== undefined">
{{ t('redeem.newConcurrency') }}: <span class="font-semibold">{{ redeemResult.new_concurrency }} {{ t('redeem.requests') }}</span>
{{ t('redeem.newConcurrency') }}:
<span class="font-semibold"
>{{ redeemResult.new_concurrency }} {{ t('redeem.requests') }}</span
>
</p>
</div>
</div>
@@ -120,13 +185,25 @@
<transition name="fade">
<div
v-if="errorMessage"
class="card border-red-200 dark:border-red-800/50 bg-red-50 dark:bg-red-900/20"
class="card border-red-200 bg-red-50 dark:border-red-800/50 dark:bg-red-900/20"
>
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
<svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<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" />
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-red-100 dark:bg-red-900/30"
>
<svg
class="h-5 w-5 text-red-600 dark:text-red-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<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>
</div>
<div class="flex-1">
@@ -143,24 +220,43 @@
</transition>
<!-- Information Card -->
<div class="card border-primary-200 dark:border-primary-800/50 bg-primary-50 dark:bg-primary-900/20">
<div
class="card border-primary-200 bg-primary-50 dark:border-primary-800/50 dark:bg-primary-900/20"
>
<div class="p-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
<svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30"
>
<svg
class="h-5 w-5 text-primary-600 dark:text-primary-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-primary-800 dark:text-primary-300">
{{ t('redeem.aboutCodes') }}
</h3>
<ul class="mt-2 text-sm text-primary-700 dark:text-primary-400 space-y-1 list-disc list-inside">
<ul
class="mt-2 list-inside list-disc space-y-1 text-sm text-primary-700 dark:text-primary-400"
>
<li>{{ t('redeem.codeRule1') }}</li>
<li>{{ t('redeem.codeRule2') }}</li>
<li>
{{ t('redeem.codeRule3') }}
<span v-if="contactInfo" class="inline-flex items-center ml-1.5 px-2 py-0.5 rounded-md bg-primary-200/50 dark:bg-primary-800/40 text-primary-800 dark:text-primary-200 font-medium text-xs">
<span
v-if="contactInfo"
class="ml-1.5 inline-flex items-center rounded-md bg-primary-200/50 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-800/40 dark:text-primary-200"
>
{{ contactInfo }}
</span>
</li>
@@ -173,15 +269,28 @@
<!-- Recent Activity -->
<div class="card">
<div class="px-6 py-4 border-b border-gray-100 dark:border-dark-700">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('redeem.recentActivity') }}</h2>
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
{{ t('redeem.recentActivity') }}
</h2>
</div>
<div class="p-6">
<!-- Loading State -->
<div v-if="loadingHistory" class="flex items-center justify-center py-8">
<svg class="animate-spin h-6 w-6 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 class="h-6 w-6 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>
@@ -190,57 +299,77 @@
<div
v-for="item in history"
:key="item.id"
class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-dark-800"
class="flex items-center justify-between rounded-xl bg-gray-50 p-4 dark:bg-dark-800"
>
<div class="flex items-center gap-4">
<div
:class="[
'w-10 h-10 rounded-xl flex items-center justify-center',
'flex h-10 w-10 items-center justify-center rounded-xl',
isBalanceType(item.type)
? (item.value >= 0 ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-red-100 dark:bg-red-900/30')
? item.value >= 0
? 'bg-emerald-100 dark:bg-emerald-900/30'
: 'bg-red-100 dark:bg-red-900/30'
: isSubscriptionType(item.type)
? 'bg-purple-100 dark:bg-purple-900/30'
: (item.value >= 0 ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-orange-100 dark:bg-orange-900/30')
: item.value >= 0
? 'bg-blue-100 dark:bg-blue-900/30'
: 'bg-orange-100 dark:bg-orange-900/30'
]"
>
<!-- 余额类型图标 -->
<svg
v-if="isBalanceType(item.type)"
:class="[
'w-5 h-5',
item.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
'h-5 w-5',
item.value >= 0
? 'text-emerald-600 dark:text-emerald-400'
: 'text-red-600 dark:text-red-400'
]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<!-- 订阅类型图标 -->
<svg
v-else-if="isSubscriptionType(item.type)"
class="w-5 h-5 text-purple-600 dark:text-purple-400"
class="h-5 w-5 text-purple-600 dark:text-purple-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
</svg>
<!-- 并发类型图标 -->
<svg
v-else
:class="[
'w-5 h-5',
item.value >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-orange-600 dark:text-orange-400'
'h-5 w-5',
item.value >= 0
? 'text-blue-600 dark:text-blue-400'
: 'text-orange-600 dark:text-orange-400'
]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
/>
</svg>
</div>
<div>
@@ -257,15 +386,22 @@
:class="[
'text-sm font-semibold',
isBalanceType(item.type)
? (item.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')
? item.value >= 0
? 'text-emerald-600 dark:text-emerald-400'
: 'text-red-600 dark:text-red-400'
: isSubscriptionType(item.type)
? 'text-purple-600 dark:text-purple-400'
: (item.value >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-orange-600 dark:text-orange-400')
: item.value >= 0
? 'text-blue-600 dark:text-blue-400'
: 'text-orange-600 dark:text-orange-400'
]"
>
{{ formatHistoryValue(item) }}
</p>
<p v-if="!isAdminAdjustment(item.type)" class="text-xs text-gray-400 dark:text-dark-500 font-mono">
<p
v-if="!isAdminAdjustment(item.type)"
class="font-mono text-xs text-gray-400 dark:text-dark-500"
>
{{ item.code.slice(0, 8) }}...
</p>
<p v-else class="text-xs text-gray-400 dark:text-dark-500">
@@ -277,9 +413,21 @@
<!-- Empty State -->
<div v-else class="empty-state py-8">
<div class="w-16 h-16 mb-4 rounded-2xl bg-gray-100 dark:bg-dark-800 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400 dark:text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" 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" />
<div
class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-800"
>
<svg
class="h-8 w-8 text-gray-400 dark:text-dark-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
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>
</div>
<p class="text-sm text-gray-500 dark:text-dark-400">

282
frontend/src/views/user/SubscriptionsView.vue
View File

@@ -3,17 +3,31 @@
<div class="space-y-6">
<!-- Loading State -->
<div v-if="loading" class="flex justify-center py-12">
<div class="animate-spin rounded-full h-8 w-8 border-2 border-primary-500 border-t-transparent"></div>
<div
class="h-8 w-8 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
></div>
</div>
<!-- Empty State -->
<div v-else-if="subscriptions.length === 0" class="card p-12 text-center">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-dark-700 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
<div
class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700"
>
<svg
class="h-8 w-8 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
{{ t('userSubscriptions.noActiveSubscriptions') }}
</h3>
<p class="text-gray-500 dark:text-dark-400">
@@ -29,11 +43,25 @@
class="card overflow-hidden"
>
<!-- Header -->
<div class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-dark-700">
<div
class="flex items-center justify-between border-b border-gray-100 p-4 dark:border-dark-700"
>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
<div
class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-100 dark:bg-purple-900/30"
>
<svg
class="h-5 w-5 text-purple-600 dark:text-purple-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
/>
</svg>
</div>
<div>
@@ -48,8 +76,11 @@
<span
:class="[
'badge',
subscription.status === 'active' ? 'badge-success' :
subscription.status === 'expired' ? 'badge-warning' : 'badge-danger'
subscription.status === 'active'
? 'badge-success'
: subscription.status === 'expired'
? 'badge-warning'
: 'badge-danger'
]"
>
{{ t(`userSubscriptions.status.${subscription.status}`) }}
@@ -57,17 +88,23 @@
</div>
<!-- Usage Progress -->
<div class="p-4 space-y-4">
<div class="space-y-4 p-4">
<!-- Expiration Info -->
<div v-if="subscription.expires_at" class="flex items-center justify-between text-sm">
<span class="text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.expires') }}</span>
<span class="text-gray-500 dark:text-dark-400">{{
t('userSubscriptions.expires')
}}</span>
<span :class="getExpirationClass(subscription.expires_at)">
{{ formatExpirationDate(subscription.expires_at) }}
</span>
</div>
<div v-else class="flex items-center justify-between text-sm">
<span class="text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.expires') }}</span>
<span class="text-gray-700 dark:text-gray-300">{{ t('userSubscriptions.noExpiration') }}</span>
<span class="text-gray-500 dark:text-dark-400">{{
t('userSubscriptions.expires')
}}</span>
<span class="text-gray-700 dark:text-gray-300">{{
t('userSubscriptions.noExpiration')
}}</span>
</div>
<!-- Daily Usage -->
@@ -77,18 +114,37 @@
{{ t('userSubscriptions.daily') }}
</span>
<span class="text-sm text-gray-500 dark:text-dark-400">
${{ (subscription.daily_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.daily_limit_usd.toFixed(2) }}
${{ (subscription.daily_usage_usd || 0).toFixed(2) }} / ${{
subscription.group.daily_limit_usd.toFixed(2)
}}
</span>
</div>
<div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
<div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
:class="getProgressBarClass(subscription.daily_usage_usd, subscription.group.daily_limit_usd)"
:style="{ width: getProgressWidth(subscription.daily_usage_usd, subscription.group.daily_limit_usd) }"
:class="
getProgressBarClass(
subscription.daily_usage_usd,
subscription.group.daily_limit_usd
)
"
:style="{
width: getProgressWidth(
subscription.daily_usage_usd,
subscription.group.daily_limit_usd
)
}"
></div>
</div>
<p v-if="subscription.daily_window_start" class="text-xs text-gray-500 dark:text-dark-400">
{{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.daily_window_start, 24) }) }}
<p
v-if="subscription.daily_window_start"
class="text-xs text-gray-500 dark:text-dark-400"
>
{{
t('userSubscriptions.resetIn', {
time: formatResetTime(subscription.daily_window_start, 24)
})
}}
</p>
</div>
@@ -99,18 +155,37 @@
{{ t('userSubscriptions.weekly') }}
</span>
<span class="text-sm text-gray-500 dark:text-dark-400">
${{ (subscription.weekly_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.weekly_limit_usd.toFixed(2) }}
${{ (subscription.weekly_usage_usd || 0).toFixed(2) }} / ${{
subscription.group.weekly_limit_usd.toFixed(2)
}}
</span>
</div>
<div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
<div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
:class="getProgressBarClass(subscription.weekly_usage_usd, subscription.group.weekly_limit_usd)"
:style="{ width: getProgressWidth(subscription.weekly_usage_usd, subscription.group.weekly_limit_usd) }"
:class="
getProgressBarClass(
subscription.weekly_usage_usd,
subscription.group.weekly_limit_usd
)
"
:style="{
width: getProgressWidth(
subscription.weekly_usage_usd,
subscription.group.weekly_limit_usd
)
}"
></div>
</div>
<p v-if="subscription.weekly_window_start" class="text-xs text-gray-500 dark:text-dark-400">
{{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.weekly_window_start, 168) }) }}
<p
v-if="subscription.weekly_window_start"
class="text-xs text-gray-500 dark:text-dark-400"
>
{{
t('userSubscriptions.resetIn', {
time: formatResetTime(subscription.weekly_window_start, 168)
})
}}
</p>
</div>
@@ -121,27 +196,52 @@
{{ t('userSubscriptions.monthly') }}
</span>
<span class="text-sm text-gray-500 dark:text-dark-400">
${{ (subscription.monthly_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.monthly_limit_usd.toFixed(2) }}
${{ (subscription.monthly_usage_usd || 0).toFixed(2) }} / ${{
subscription.group.monthly_limit_usd.toFixed(2)
}}
</span>
</div>
<div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
<div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
:class="getProgressBarClass(subscription.monthly_usage_usd, subscription.group.monthly_limit_usd)"
:style="{ width: getProgressWidth(subscription.monthly_usage_usd, subscription.group.monthly_limit_usd) }"
:class="
getProgressBarClass(
subscription.monthly_usage_usd,
subscription.group.monthly_limit_usd
)
"
:style="{
width: getProgressWidth(
subscription.monthly_usage_usd,
subscription.group.monthly_limit_usd
)
}"
></div>
</div>
<p v-if="subscription.monthly_window_start" class="text-xs text-gray-500 dark:text-dark-400">
{{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.monthly_window_start, 720) }) }}
<p
v-if="subscription.monthly_window_start"
class="text-xs text-gray-500 dark:text-dark-400"
>
{{
t('userSubscriptions.resetIn', {
time: formatResetTime(subscription.monthly_window_start, 720)
})
}}
</p>
</div>
<!-- No limits configured -->
<div
v-if="!subscription.group?.daily_limit_usd && !subscription.group?.weekly_limit_usd && !subscription.group?.monthly_limit_usd"
class="text-center py-4"
v-if="
!subscription.group?.daily_limit_usd &&
!subscription.group?.weekly_limit_usd &&
!subscription.group?.monthly_limit_usd
"
class="py-4 text-center"
>
<span class="text-sm text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.unlimited') }}</span>
<span class="text-sm text-gray-500 dark:text-dark-400">{{
t('userSubscriptions.unlimited')
}}</span>
</div>
</div>
</div>
@@ -151,110 +251,110 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/stores/app';
import subscriptionsAPI from '@/api/subscriptions';
import type { UserSubscription } from '@/types';
import AppLayout from '@/components/layout/AppLayout.vue';
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'
import subscriptionsAPI from '@/api/subscriptions'
import type { UserSubscription } from '@/types'
import AppLayout from '@/components/layout/AppLayout.vue'
const { t } = useI18n();
const appStore = useAppStore();
const { t } = useI18n()
const appStore = useAppStore()
const subscriptions = ref<UserSubscription[]>([]);
const loading = ref(true);
const subscriptions = ref<UserSubscription[]>([])
const loading = ref(true)
async function loadSubscriptions() {
try {
loading.value = true;
subscriptions.value = await subscriptionsAPI.getMySubscriptions();
loading.value = true
subscriptions.value = await subscriptionsAPI.getMySubscriptions()
} catch (error) {
console.error('Failed to load subscriptions:', error);
appStore.showError('Failed to load subscriptions');
console.error('Failed to load subscriptions:', error)
appStore.showError('Failed to load subscriptions')
} finally {
loading.value = false;
loading.value = false
}
}
function getProgressWidth(used: number | undefined, limit: number | null | undefined): string {
if (!limit || limit === 0) return '0%';
const percentage = Math.min(((used || 0) / limit) * 100, 100);
return `${percentage}%`;
if (!limit || limit === 0) return '0%'
const percentage = Math.min(((used || 0) / limit) * 100, 100)
return `${percentage}%`
}
function getProgressBarClass(used: number | undefined, limit: number | null | undefined): string {
if (!limit || limit === 0) return 'bg-gray-400';
const percentage = ((used || 0) / limit) * 100;
if (percentage >= 90) return 'bg-red-500';
if (percentage >= 70) return 'bg-orange-500';
return 'bg-green-500';
if (!limit || limit === 0) return 'bg-gray-400'
const percentage = ((used || 0) / limit) * 100
if (percentage >= 90) return 'bg-red-500'
if (percentage >= 70) return 'bg-orange-500'
return 'bg-green-500'
}
function formatExpirationDate(expiresAt: string): string {
const now = new Date();
const expires = new Date(expiresAt);
const diff = expires.getTime() - now.getTime();
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
const now = new Date()
const expires = new Date(expiresAt)
const diff = expires.getTime() - now.getTime()
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
if (days < 0) {
return t('userSubscriptions.status.expired');
return t('userSubscriptions.status.expired')
}
const dateStr = expires.toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric'
});
})
if (days === 0) {
return `${dateStr} (Today)`;
return `${dateStr} (Today)`
}
if (days === 1) {
return `${dateStr} (Tomorrow)`;
return `${dateStr} (Tomorrow)`
}
return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`;
return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`
}
function getExpirationClass(expiresAt: string): string {
const now = new Date();
const expires = new Date(expiresAt);
const diff = expires.getTime() - now.getTime();
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
const now = new Date()
const expires = new Date(expiresAt)
const diff = expires.getTime() - now.getTime()
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
if (days <= 0) return 'text-red-600 dark:text-red-400 font-medium';
if (days <= 3) return 'text-red-600 dark:text-red-400';
if (days <= 7) return 'text-orange-600 dark:text-orange-400';
return 'text-gray-700 dark:text-gray-300';
if (days <= 0) return 'text-red-600 dark:text-red-400 font-medium'
if (days <= 3) return 'text-red-600 dark:text-red-400'
if (days <= 7) return 'text-orange-600 dark:text-orange-400'
return 'text-gray-700 dark:text-gray-300'
}
function formatResetTime(windowStart: string | null, windowHours: number): string {
if (!windowStart) return t('userSubscriptions.windowNotActive');
if (!windowStart) return t('userSubscriptions.windowNotActive')
const start = new Date(windowStart);
const end = new Date(start.getTime() + windowHours * 60 * 60 * 1000);
const now = new Date();
const diff = end.getTime() - now.getTime();
const start = new Date(windowStart)
const end = new Date(start.getTime() + windowHours * 60 * 60 * 1000)
const now = new Date()
const diff = end.getTime() - now.getTime()
if (diff <= 0) return t('userSubscriptions.windowNotActive');
if (diff <= 0) return t('userSubscriptions.windowNotActive')
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const hours = Math.floor(diff / (1000 * 60 * 60))
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
if (hours > 24) {
const days = Math.floor(hours / 24);
const remainingHours = hours % 24;
return `${days}d ${remainingHours}h`;
const days = Math.floor(hours / 24)
const remainingHours = hours % 24
return `${days}d ${remainingHours}h`
}
if (hours > 0) {
return `${hours}h ${minutes}m`;
return `${hours}h ${minutes}m`
}
return `${minutes}m`;
return `${minutes}m`
}
onMounted(() => {
loadSubscriptions();
});
loadSubscriptions()
})
</script>

312
frontend/src/views/user/UsageView.vue
View File

@@ -6,15 +6,31 @@
<!-- Total Requests -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
<svg class="w-5 h-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalRequests') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ usageStats?.total_requests?.toLocaleString() || '0' }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.inSelectedRange') }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.totalRequests') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ usageStats?.total_requests?.toLocaleString() || '0' }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('usage.inSelectedRange') }}
</p>
</div>
</div>
</div>
@@ -22,15 +38,32 @@
<!-- Total Tokens -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
<svg class="w-5 h-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" />
<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>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalTokens') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(usageStats?.total_tokens || 0) }}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} / {{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.totalTokens') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatTokens(usageStats?.total_tokens || 0) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('usage.in') }}: {{ formatTokens(usageStats?.total_input_tokens || 0) }} /
{{ t('usage.out') }}: {{ formatTokens(usageStats?.total_output_tokens || 0) }}
</p>
</div>
</div>
</div>
@@ -38,16 +71,32 @@
<!-- Total Cost -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
<svg class="w-5 h-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
<p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.totalCost') }}
</p>
<p class="text-xl font-bold text-green-600 dark:text-green-400">
${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
{{ t('usage.actualCost') }} / <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
{{ t('usage.actualCost') }} /
<span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
{{ t('usage.standardCost') }}
</p>
</div>
</div>
@@ -56,14 +105,28 @@
<!-- Average Duration -->
<div class="card p-4">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
<svg class="w-5 h-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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
<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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.avgDuration') }}</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatDuration(usageStats?.average_duration_ms || 0) }}</p>
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('usage.avgDuration') }}
</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">
{{ formatDuration(usageStats?.average_duration_ms || 0) }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.perRequest') }}</p>
</div>
</div>
@@ -96,17 +159,11 @@
</div>
<!-- Actions -->
<div class="flex items-center gap-3 ml-auto">
<button
@click="resetFilters"
class="btn btn-secondary"
>
<div class="ml-auto flex items-center gap-3">
<button @click="resetFilters" class="btn btn-secondary">
{{ t('common.reset') }}
</button>
<button
@click="exportToCSV"
class="btn btn-primary"
>
<button @click="exportToCSV" class="btn btn-primary">
{{ t('usage.exportCsv') }}
</button>
</div>
@@ -116,96 +173,167 @@
<!-- Usage Table -->
<div class="card overflow-hidden">
<DataTable
:columns="columns"
:data="usageLogs"
:loading="loading"
>
<DataTable :columns="columns" :data="usageLogs" :loading="loading">
<template #cell-model="{ value }">
<span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
</template>
<template #cell-stream="{ row }">
<span
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
:class="row.stream
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'"
class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
:class="
row.stream
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
"
>
{{ row.stream ? t('usage.stream') : t('usage.sync') }}
</span>
</template>
<template #cell-tokens="{ row }">
<div class="text-sm space-y-1.5">
<div class="space-y-1.5 text-sm">
<!-- Input / Output Tokens -->
<div class="flex items-center gap-2">
<!-- Input -->
<div class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
<svg
class="h-3.5 w-3.5 text-emerald-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
<span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
row.input_tokens.toLocaleString()
}}</span>
</div>
<!-- Output -->
<div class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
<svg
class="h-3.5 w-3.5 text-violet-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18"
/>
</svg>
<span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
<span class="font-medium text-gray-900 dark:text-white">{{
row.output_tokens.toLocaleString()
}}</span>
</div>
</div>
<!-- Cache Tokens (Read + Write) -->
<div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
<div
v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0"
class="flex items-center gap-2"
>
<!-- Cache Read -->
<div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
<svg
class="h-3.5 w-3.5 text-sky-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
/>
</svg>
<span class="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
<span class="font-medium text-sky-600 dark:text-sky-400">{{
formatCacheTokens(row.cache_read_tokens)
}}</span>
</div>
<!-- Cache Write -->
<div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
<svg
class="h-3.5 w-3.5 text-amber-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
<span class="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
<span class="font-medium text-amber-600 dark:text-amber-400">{{
formatCacheTokens(row.cache_creation_tokens)
}}</span>
</div>
</div>
</div>
</template>
<template #cell-cost="{ row }">
<div class="text-sm flex items-center gap-1.5">
<div class="flex items-center gap-1.5 text-sm">
<span class="font-medium text-green-600 dark:text-green-400">
${{ row.actual_cost.toFixed(6) }}
</span>
<!-- Cost Detail Tooltip -->
<div class="relative group">
<div class="flex items-center justify-center w-4 h-4 rounded-full bg-gray-100 dark:bg-gray-700 cursor-help transition-colors group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
<div class="group relative">
<div
class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
>
<svg
class="h-3 w-3 text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
</div>
<!-- Tooltip Content (right side) -->
<div class="absolute z-[100] invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 left-full top-1/2 -translate-y-1/2 ml-2">
<div class="bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-lg py-2.5 px-3 shadow-xl whitespace-nowrap border border-gray-700 dark:border-gray-600">
<div
class="invisible absolute left-full top-1/2 z-[100] ml-2 -translate-y-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
>
<div
class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
>
<div class="space-y-1.5">
<div class="flex items-center justify-between gap-6">
<span class="text-gray-400">{{ t('usage.rate') }}</span>
<span class="font-semibold text-blue-400">{{ (row.rate_multiplier || 1).toFixed(2) }}x</span>
<span class="font-semibold text-blue-400"
>{{ (row.rate_multiplier || 1).toFixed(2) }}x</span
>
</div>
<div class="flex items-center justify-between gap-6">
<span class="text-gray-400">{{ t('usage.original') }}</span>
<span class="font-medium text-white">${{ row.total_cost.toFixed(6) }}</span>
</div>
<div class="flex items-center justify-between gap-6 pt-1.5 border-t border-gray-700">
<div
class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5"
>
<span class="text-gray-400">{{ t('usage.billed') }}</span>
<span class="font-semibold text-green-400">${{ row.actual_cost.toFixed(6) }}</span>
<span class="font-semibold text-green-400"
>${{ row.actual_cost.toFixed(6) }}</span
>
</div>
</div>
<!-- Tooltip Arrow (left side) -->
<div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-r-[6px] border-r-gray-900 dark:border-r-gray-800"></div>
<div
class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
></div>
</div>
</div>
</div>
@@ -214,28 +342,37 @@
<template #cell-billing_type="{ row }">
<span
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
:class="row.billing_type === 1
? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'"
class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
:class="
row.billing_type === 1
? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
"
>
{{ row.billing_type === 1 ? t('usage.subscription') : t('usage.balance') }}
</span>
</template>
<template #cell-first_token="{ row }">
<span v-if="row.first_token_ms != null" class="text-sm text-gray-600 dark:text-gray-400">
<span
v-if="row.first_token_ms != null"
class="text-sm text-gray-600 dark:text-gray-400"
>
{{ formatDuration(row.first_token_ms) }}
</span>
<span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
</template>
<template #cell-duration="{ row }">
<span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.duration_ms) }}</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
formatDuration(row.duration_ms)
}}</span>
</template>
<template #cell-created_at="{ value }">
<span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDateTime(value) }}</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
formatDateTime(value)
}}</span>
</template>
<template #empty>
@@ -294,7 +431,7 @@ const loading = ref(false)
const apiKeyOptions = computed(() => {
return [
{ value: null, label: t('usage.allApiKeys') },
...apiKeys.value.map(key => ({
...apiKeys.value.map((key) => ({
value: key.id,
label: key.name
}))
@@ -325,7 +462,11 @@ const initializeDateRange = () => {
}
// Handle date range change from DateRangePicker
const onDateRangeChange = (range: { startDate: string; endDate: string; preset: string | null }) => {
const onDateRangeChange = (range: {
startDate: string
endDate: string
preset: string | null
}) => {
filters.value.start_date = range.startDate
filters.value.end_date = range.endDate
applyFilters()
@@ -448,8 +589,20 @@ const exportToCSV = () => {
return
}
const headers = ['Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'First Token (ms)', 'Duration (ms)', 'Time']
const rows = usageLogs.value.map(log => [
const headers = [
'Model',
'Type',
'Input Tokens',
'Output Tokens',
'Cache Read Tokens',
'Cache Write Tokens',
'Total Cost',
'Billing Type',
'First Token (ms)',
'Duration (ms)',
'Time'
]
const rows = usageLogs.value.map((log) => [
log.model,
log.stream ? 'Stream' : 'Sync',
log.input_tokens,
@@ -463,10 +616,7 @@ const exportToCSV = () => {
log.created_at
])
const csvContent = [
headers.join(','),
...rows.map(row => row.join(','))
].join('\n')
const csvContent = [headers.join(','), ...rows.map((row) => row.join(','))].join('\n')
const blob = new Blob([csvContent], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)