github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 00:53:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: standardize code formatting and linting configuration

Browse Source 
- Replace .eslintrc.js with .eslintrc.cjs for better ES module compatibility
- Add .prettierrc configuration for consistent code formatting
- Update package.json with new lint and format scripts
- Add nodemon.json for development hot reloading configuration
- Standardize code formatting across all JavaScript and Vue files
- Update web admin SPA with improved linting rules and formatting
- Add prettier configuration to web admin SPA

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
千羽
2025-08-07 18:19:31 +09:00
parent 4a0eba117c
commit 8a74bf5afe
124 changed files with 20878 additions and 18757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/admin-spa/src/components/apistats/ApiKeyInput.vue
View File

@@ -1,58 +1,48 @@
<template>
<div class="api-input-wide-card glass-strong rounded-3xl p-6 mb-8 shadow-xl">
<div class="api-input-wide-card glass-strong mb-8 rounded-3xl p-6 shadow-xl">
<!-- 标题区域 -->
<div class="wide-card-title text-center mb-6">
<h2 class="text-2xl font-bold mb-2">
<div class="wide-card-title mb-6 text-center">
<h2 class="mb-2 text-2xl font-bold">
<i class="fas fa-chart-line mr-3" />
使用统计查询
</h2>
<p class="text-base text-gray-600">
查询您的 API Key 使用情况和统计数据
</p>
<p class="text-base text-gray-600">查询您的 API Key 使用情况和统计数据</p>
</div>
<!-- 输入区域 -->
<div class="max-w-4xl mx-auto">
<div class="mx-auto max-w-4xl">
<div class="api-input-grid grid grid-cols-1 lg:grid-cols-4">
<!-- API Key 输入 -->
<div class="lg:col-span-3">
<label class="block text-sm font-medium mb-2 text-gray-700">
<label class="mb-2 block text-sm font-medium text-gray-700">
<i class="fas fa-key mr-2" />
输入您的 API Key
</label>
<input
v-model="apiKey"
type="password"
placeholder="请输入您的 API Key (cr_...)"
<input
v-model="apiKey"
class="wide-card-input w-full"
:disabled="loading"
placeholder="请输入您的 API Key (cr_...)"
type="password"
@keyup.enter="queryStats"
>
/>
</div>
<!-- 查询按钮 -->
<div class="lg:col-span-1">
<label class="hidden lg:block text-sm font-medium mb-2 text-gray-700">
&nbsp;
</label>
<button
<label class="mb-2 hidden text-sm font-medium text-gray-700 lg:block"> &nbsp; </label>
<button
class="btn btn-primary btn-query flex h-full w-full items-center justify-center gap-2"
:disabled="loading || !apiKey.trim()"
class="btn btn-primary btn-query w-full h-full flex items-center justify-center gap-2"
@click="queryStats"
>
<i
v-if="loading"
class="fas fa-spinner loading-spinner"
/>
<i
v-else
class="fas fa-search"
/>
<i v-if="loading" class="fas fa-spinner loading-spinner" />
<i v-else class="fas fa-search" />
{{ loading ? '查询中...' : '查询统计' }}
</button>
</div>
</div>
<!-- 安全提示 -->
<div class="security-notice mt-4">
<i class="fas fa-shield-alt mr-2" />
@@ -77,7 +67,7 @@ const { queryStats } = apiStatsStore
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -85,7 +75,7 @@ const { queryStats } = apiStatsStore
}
.api-input-wide-card:hover {
box-shadow:
box-shadow:
0 32px 64px -12px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
@@ -135,7 +125,7 @@ const { queryStats } = apiStatsStore
.wide-card-input:focus {
outline: none;
border-color: #60a5fa;
box-shadow:
box-shadow:
0 0 0 3px rgba(96, 165, 250, 0.2),
0 10px 15px -3px rgba(0, 0, 0, 0.1);
background: white;
@@ -162,14 +152,14 @@ const { queryStats } = apiStatsStore
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow:
box-shadow:
0 10px 15px -3px rgba(102, 126, 234, 0.3),
0 4px 6px -2px rgba(102, 126, 234, 0.05);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow:
box-shadow:
0 20px 25px -5px rgba(102, 126, 234, 0.3),
0 10px 10px -5px rgba(102, 126, 234, 0.1);
}
@@ -209,8 +199,12 @@ const { queryStats } = apiStatsStore
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 响应式优化 */
@@ -218,33 +212,33 @@ const { queryStats } = apiStatsStore
.api-input-wide-card {
padding: 1.25rem;
}
.wide-card-title {
margin-bottom: 1.25rem;
}
.wide-card-title h2 {
font-size: 1.5rem;
}
.wide-card-title p {
font-size: 0.875rem;
}
.api-input-grid {
gap: 1rem;
}
.wide-card-input {
padding: 12px 14px;
font-size: 15px;
}
.btn-query {
padding: 12px 20px;
font-size: 15px;
}
.security-notice {
padding: 10px 14px;
font-size: 0.8rem;
@@ -255,23 +249,23 @@ const { queryStats } = apiStatsStore
.api-input-wide-card {
padding: 1rem;
}
.wide-card-title h2 {
font-size: 1.25rem;
}
.wide-card-title p {
font-size: 0.8rem;
}
.wide-card-input {
padding: 10px 12px;
font-size: 14px;
}
.btn-query {
padding: 10px 16px;
font-size: 14px;
}
}
</style>
</style>

203
web/admin-spa/src/components/apistats/LimitConfig.vue
View File

@@ -2,89 +2,101 @@
<div>
<!-- 限制配置 -->
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-shield-alt mr-2 md:mr-3 text-red-500 text-sm md:text-base" />
<h3 class="mb-3 flex items-center text-lg font-bold text-gray-900 md:mb-4 md:text-xl">
<i class="fas fa-shield-alt mr-2 text-sm text-red-500 md:mr-3 md:text-base" />
限制配置
</h3>
<div class="space-y-4 md:space-y-5">
<!-- 每日费用限制 -->
<div>
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600 text-sm md:text-base font-medium">每日费用限制</span>
<span class="text-xs md:text-sm text-gray-500">
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-gray-600 md:text-base">每日费用限制</span>
<span class="text-xs text-gray-500 md:text-sm">
<span v-if="statsData.limits.dailyCostLimit > 0">
${{ statsData.limits.currentDailyCost.toFixed(4) }} / ${{ statsData.limits.dailyCostLimit.toFixed(2) }}
${{ statsData.limits.currentDailyCost.toFixed(4) }} / ${{
statsData.limits.dailyCostLimit.toFixed(2)
}}
</span>
<span v-else class="flex items-center gap-1">
${{ statsData.limits.currentDailyCost.toFixed(4) }} / <i class="fas fa-infinity" />
</span>
</span>
</div>
<div v-if="statsData.limits.dailyCostLimit > 0" class="w-full bg-gray-200 rounded-full h-2">
<div
:class="getDailyCostProgressColor()"
<div
v-if="statsData.limits.dailyCostLimit > 0"
class="h-2 w-full rounded-full bg-gray-200"
>
<div
class="h-2 rounded-full transition-all duration-300"
:class="getDailyCostProgressColor()"
:style="{ width: getDailyCostProgress() + '%' }"
/>
</div>
<div v-else class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 0%" />
<div v-else class="h-2 w-full rounded-full bg-gray-200">
<div class="h-2 rounded-full bg-green-500" style="width: 0%" />
</div>
</div>
<!-- 时间窗口限制 -->
<div v-if="statsData.limits.rateLimitWindow > 0 && (statsData.limits.rateLimitRequests > 0 || statsData.limits.tokenLimit > 0)">
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600 text-sm md:text-base font-medium">
<div
v-if="
statsData.limits.rateLimitWindow > 0 &&
(statsData.limits.rateLimitRequests > 0 || statsData.limits.tokenLimit > 0)
"
>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-gray-600 md:text-base">
时间窗口限制 ({{ statsData.limits.rateLimitWindow }}分钟)
</span>
</div>
<!-- 请求次数限制 -->
<div v-if="statsData.limits.rateLimitRequests > 0" class="space-y-1.5 mb-3">
<div class="flex justify-between items-center text-xs md:text-sm">
<div v-if="statsData.limits.rateLimitRequests > 0" class="mb-3 space-y-1.5">
<div class="flex items-center justify-between text-xs md:text-sm">
<span class="text-gray-500">请求次数</span>
<span class="text-gray-700">
{{ formatNumber(statsData.limits.currentWindowRequests) }} / {{ formatNumber(statsData.limits.rateLimitRequests) }}
{{ formatNumber(statsData.limits.currentWindowRequests) }} /
{{ formatNumber(statsData.limits.rateLimitRequests) }}
</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div
:class="getWindowRequestProgressColor()"
<div class="h-1.5 w-full rounded-full bg-gray-200">
<div
class="h-1.5 rounded-full transition-all duration-300"
:class="getWindowRequestProgressColor()"
:style="{ width: getWindowRequestProgress() + '%' }"
/>
</div>
</div>
<!-- Token使用量限制 -->
<div v-if="statsData.limits.tokenLimit > 0" class="space-y-1.5">
<div class="flex justify-between items-center text-xs md:text-sm">
<div class="flex items-center justify-between text-xs md:text-sm">
<span class="text-gray-500">Token 使用量</span>
<span class="text-gray-700">
{{ formatNumber(statsData.limits.currentWindowTokens) }} / {{ formatNumber(statsData.limits.tokenLimit) }}
{{ formatNumber(statsData.limits.currentWindowTokens) }} /
{{ formatNumber(statsData.limits.tokenLimit) }}
</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div
:class="getWindowTokenProgressColor()"
<div class="h-1.5 w-full rounded-full bg-gray-200">
<div
class="h-1.5 rounded-full transition-all duration-300"
:class="getWindowTokenProgressColor()"
:style="{ width: getWindowTokenProgress() + '%' }"
/>
</div>
</div>
<div class="mt-2 text-xs text-gray-500">
<i class="fas fa-info-circle mr-1" />
请求次数和Token使用量为"或"的关系，任一达到限制即触发限流
</div>
</div>
<!-- 其他限制信息 -->
<div class="pt-2 border-t border-gray-100 space-y-2">
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">并发限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<div class="space-y-2 border-t border-gray-100 pt-2">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">并发限制</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span v-if="statsData.limits.concurrencyLimit > 0">
{{ statsData.limits.concurrencyLimit }}
</span>
@@ -93,39 +105,39 @@
</span>
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">模型限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">模型限制</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span
v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
v-if="
statsData.restrictions.enableModelRestriction &&
statsData.restrictions.restrictedModels.length > 0
"
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
</span>
<span
v-else
class="text-green-600"
>
<span v-else class="text-green-600">
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
允许所有模型
</span>
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">客户端限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">客户端限制</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span
v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
v-if="
statsData.restrictions.enableClientRestriction &&
statsData.restrictions.allowedClients.length > 0
"
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
</span>
<span
v-else
class="text-green-600"
>
<span v-else class="text-green-600">
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
允许所有客户端
</span>
@@ -137,61 +149,71 @@
<!-- 详细限制信息 -->
<div
v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) ||
(statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)"
class="card p-4 md:p-6 mt-4 md:mt-6"
v-if="
(statsData.restrictions.enableModelRestriction &&
statsData.restrictions.restrictedModels.length > 0) ||
(statsData.restrictions.enableClientRestriction &&
statsData.restrictions.allowedClients.length > 0)
"
class="card mt-4 p-4 md:mt-6 md:p-6"
>
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-list-alt mr-2 md:mr-3 text-amber-500 text-sm md:text-base" />
<h3 class="mb-3 flex items-center text-lg font-bold text-gray-900 md:mb-4 md:text-xl">
<i class="fas fa-list-alt mr-2 text-sm text-amber-500 md:mr-3 md:text-base" />
详细限制信息
</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
<div class="grid grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2">
<!-- 模型限制详情 -->
<div
v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="bg-amber-50 border border-amber-200 rounded-lg p-3 md:p-4"
v-if="
statsData.restrictions.enableModelRestriction &&
statsData.restrictions.restrictedModels.length > 0
"
class="rounded-lg border border-amber-200 bg-amber-50 p-3 md:p-4"
>
<h4 class="font-bold text-amber-800 mb-2 md:mb-3 flex items-center text-sm md:text-base">
<i class="fas fa-robot mr-1 md:mr-2 text-xs md:text-sm" />
<h4 class="mb-2 flex items-center text-sm font-bold text-amber-800 md:mb-3 md:text-base">
<i class="fas fa-robot mr-1 text-xs md:mr-2 md:text-sm" />
受限模型列表
</h4>
<div class="space-y-1 md:space-y-2">
<div
v-for="model in statsData.restrictions.restrictedModels"
:key="model"
class="bg-white rounded px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm border border-amber-200"
v-for="model in statsData.restrictions.restrictedModels"
:key="model"
class="rounded border border-amber-200 bg-white px-2 py-1 text-xs md:px-3 md:py-2 md:text-sm"
>
<i class="fas fa-ban mr-1 md:mr-2 text-red-500 text-xs" />
<span class="text-gray-800 break-all">{{ model }}</span>
<i class="fas fa-ban mr-1 text-xs text-red-500 md:mr-2" />
<span class="break-all text-gray-800">{{ model }}</span>
</div>
</div>
<p class="text-xs text-amber-700 mt-2 md:mt-3">
<p class="mt-2 text-xs text-amber-700 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 不能访问以上列出的模型
</p>
</div>
<!-- 客户端限制详情 -->
<div
v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4"
v-if="
statsData.restrictions.enableClientRestriction &&
statsData.restrictions.allowedClients.length > 0
"
class="rounded-lg border border-blue-200 bg-blue-50 p-3 md:p-4"
>
<h4 class="font-bold text-blue-800 mb-2 md:mb-3 flex items-center text-sm md:text-base">
<i class="fas fa-desktop mr-1 md:mr-2 text-xs md:text-sm" />
<h4 class="mb-2 flex items-center text-sm font-bold text-blue-800 md:mb-3 md:text-base">
<i class="fas fa-desktop mr-1 text-xs md:mr-2 md:text-sm" />
允许的客户端
</h4>
<div class="space-y-1 md:space-y-2">
<div
v-for="client in statsData.restrictions.allowedClients"
:key="client"
class="bg-white rounded px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm border border-blue-200"
v-for="client in statsData.restrictions.allowedClients"
:key="client"
class="rounded border border-blue-200 bg-white px-2 py-1 text-xs md:px-3 md:py-2 md:text-sm"
>
<i class="fas fa-check mr-1 md:mr-2 text-green-500 text-xs" />
<span class="text-gray-800 break-all">{{ client }}</span>
<i class="fas fa-check mr-1 text-xs text-green-500 md:mr-2" />
<span class="break-all text-gray-800">{{ client }}</span>
</div>
</div>
<p class="text-xs text-blue-700 mt-2 md:mt-3">
<p class="mt-2 text-xs text-blue-700 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 只能被以上列出的客户端使用
</p>
@@ -213,9 +235,9 @@ const formatNumber = (num) => {
if (typeof num !== 'number') {
num = parseInt(num) || 0
}
if (num === 0) return '0'
// 大数字使用简化格式
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M'
@@ -228,8 +250,10 @@ const formatNumber = (num) => {
// 获取每日费用进度
const getDailyCostProgress = () => {
if (!statsData.value.limits.dailyCostLimit || statsData.value.limits.dailyCostLimit === 0) return 0
const percentage = (statsData.value.limits.currentDailyCost / statsData.value.limits.dailyCostLimit) * 100
if (!statsData.value.limits.dailyCostLimit || statsData.value.limits.dailyCostLimit === 0)
return 0
const percentage =
(statsData.value.limits.currentDailyCost / statsData.value.limits.dailyCostLimit) * 100
return Math.min(percentage, 100)
}
@@ -243,8 +267,10 @@ const getDailyCostProgressColor = () => {
// 获取窗口请求进度
const getWindowRequestProgress = () => {
if (!statsData.value.limits.rateLimitRequests || statsData.value.limits.rateLimitRequests === 0) return 0
const percentage = (statsData.value.limits.currentWindowRequests / statsData.value.limits.rateLimitRequests) * 100
if (!statsData.value.limits.rateLimitRequests || statsData.value.limits.rateLimitRequests === 0)
return 0
const percentage =
(statsData.value.limits.currentWindowRequests / statsData.value.limits.rateLimitRequests) * 100
return Math.min(percentage, 100)
}
@@ -259,7 +285,8 @@ const getWindowRequestProgressColor = () => {
// 获取窗口Token进度
const getWindowTokenProgress = () => {
if (!statsData.value.limits.tokenLimit || statsData.value.limits.tokenLimit === 0) return 0
const percentage = (statsData.value.limits.currentWindowTokens / statsData.value.limits.tokenLimit) * 100
const percentage =
(statsData.value.limits.currentWindowTokens / statsData.value.limits.tokenLimit) * 100
return Math.min(percentage, 100)
}
@@ -278,7 +305,7 @@ const getWindowTokenProgressColor = () => {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
@@ -298,8 +325,8 @@ const getWindowTokenProgressColor = () => {
.card:hover {
transform: translateY(-2px);
box-shadow:
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
</style>
</style>

107
web/admin-spa/src/components/apistats/ModelUsageStats.vue
View File

@@ -1,84 +1,64 @@
<template>
<div class="card p-4 md:p-6">
<div class="mb-4 md:mb-6">
<h3 class="text-lg md:text-xl font-bold flex flex-col sm:flex-row sm:items-center text-gray-900">
<h3
class="flex flex-col text-lg font-bold text-gray-900 sm:flex-row sm:items-center md:text-xl"
>
<span class="flex items-center">
<i class="fas fa-robot mr-2 md:mr-3 text-indigo-500 text-sm md:text-base" />
<i class="fas fa-robot mr-2 text-sm text-indigo-500 md:mr-3 md:text-base" />
模型使用统计
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<span class="text-xs font-normal text-gray-600 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
</div>
<!-- 模型统计加载状态 -->
<div
v-if="modelStatsLoading"
class="text-center py-6 md:py-8"
>
<i class="fas fa-spinner loading-spinner text-xl md:text-2xl mb-2 text-gray-600" />
<p class="text-gray-600 text-sm md:text-base">
加载模型统计数据中...
</p>
<div v-if="modelStatsLoading" class="py-6 text-center md:py-8">
<i class="fas fa-spinner loading-spinner mb-2 text-xl text-gray-600 md:text-2xl" />
<p class="text-sm text-gray-600 md:text-base">加载模型统计数据中...</p>
</div>
<!-- 模型统计数据 -->
<div
v-else-if="modelStats.length > 0"
class="space-y-3 md:space-y-4"
>
<div
v-for="(model, index) in modelStats"
:key="index"
class="model-usage-item"
>
<div class="flex justify-between items-start mb-2 md:mb-3">
<div class="flex-1 min-w-0">
<h4 class="font-bold text-base md:text-lg text-gray-900 break-all">
<div v-else-if="modelStats.length > 0" class="space-y-3 md:space-y-4">
<div v-for="(model, index) in modelStats" :key="index" class="model-usage-item">
<div class="mb-2 flex items-start justify-between md:mb-3">
<div class="min-w-0 flex-1">
<h4 class="break-all text-base font-bold text-gray-900 md:text-lg">
{{ model.model }}
</h4>
<p class="text-gray-600 text-xs md:text-sm">
{{ model.requests }} 次请求
</p>
<p class="text-xs text-gray-600 md:text-sm">{{ model.requests }} 次请求</p>
</div>
<div class="text-right flex-shrink-0 ml-3">
<div class="text-base md:text-lg font-bold text-green-600">
<div class="ml-3 flex-shrink-0 text-right">
<div class="text-base font-bold text-green-600 md:text-lg">
{{ model.formatted?.total || '$0.000000' }}
</div>
<div class="text-xs md:text-sm text-gray-600">
总费用
</div>
<div class="text-xs text-gray-600 md:text-sm">总费用</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3 text-xs md:text-sm">
<div class="bg-gray-50 rounded p-2">
<div class="text-gray-600">
输入 Token
</div>
<div class="grid grid-cols-2 gap-2 text-xs md:grid-cols-4 md:gap-3 md:text-sm">
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">输入 Token</div>
<div class="font-medium text-gray-900">
{{ formatNumber(model.inputTokens) }}
</div>
</div>
<div class="bg-gray-50 rounded p-2">
<div class="text-gray-600">
输出 Token
</div>
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">输出 Token</div>
<div class="font-medium text-gray-900">
{{ formatNumber(model.outputTokens) }}
</div>
</div>
<div class="bg-gray-50 rounded p-2">
<div class="text-gray-600">
缓存创建
</div>
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">缓存创建</div>
<div class="font-medium text-gray-900">
{{ formatNumber(model.cacheCreateTokens) }}
</div>
</div>
<div class="bg-gray-50 rounded p-2">
<div class="text-gray-600">
缓存读取
</div>
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">缓存读取</div>
<div class="font-medium text-gray-900">
{{ formatNumber(model.cacheReadTokens) }}
</div>
@@ -88,11 +68,8 @@
</div>
<!-- 无模型数据 -->
<div
v-else
class="text-center py-6 md:py-8 text-gray-500"
>
<i class="fas fa-chart-pie text-2xl md:text-3xl mb-3" />
<div v-else class="py-6 text-center text-gray-500 md:py-8">
<i class="fas fa-chart-pie mb-3 text-2xl md:text-3xl" />
<p class="text-sm md:text-base">
暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
</p>
@@ -112,9 +89,9 @@ const formatNumber = (num) => {
if (typeof num !== 'number') {
num = parseInt(num) || 0
}
if (num === 0) return '0'
// 大数字使用简化格式
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M'
@@ -132,7 +109,7 @@ const formatNumber = (num) => {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
@@ -152,7 +129,7 @@ const formatNumber = (num) => {
.card:hover {
transform: translateY(-2px);
box-shadow:
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
@@ -186,7 +163,7 @@ const formatNumber = (num) => {
.model-usage-item:hover {
transform: translateY(-2px);
box-shadow:
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-color: rgba(255, 255, 255, 0.3);
@@ -199,8 +176,12 @@ const formatNumber = (num) => {
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 响应式优化 */
@@ -214,9 +195,9 @@ const formatNumber = (num) => {
.model-usage-item {
padding: 10px;
}
.model-usage-item .grid {
grid-template-columns: 1fr;
}
}
</style>
</style>

109
web/admin-spa/src/components/apistats/StatsOverview.vue
View File

@@ -1,68 +1,65 @@
<template>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
<div class="mb-6 grid grid-cols-1 gap-4 md:mb-8 md:gap-6 lg:grid-cols-2">
<!-- API Key 基本信息 -->
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-info-circle mr-2 md:mr-3 text-blue-500 text-sm md:text-base" />
<h3 class="mb-3 flex items-center text-lg font-bold text-gray-900 md:mb-4 md:text-xl">
<i class="fas fa-info-circle mr-2 text-sm text-blue-500 md:mr-3 md:text-base" />
API Key 信息
</h3>
<div class="space-y-2 md:space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">名称</span>
<span class="font-medium text-gray-900 text-sm md:text-base break-all">{{ statsData.name }}</span>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">名称</span>
<span class="break-all text-sm font-medium text-gray-900 md:text-base">{{
statsData.name
}}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">状态</span>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">状态</span>
<span
class="text-sm font-medium md:text-base"
:class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
class="font-medium text-sm md:text-base"
>
<i
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
class="mr-1 text-xs md:text-sm"
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
/>
{{ statsData.isActive ? '活跃' : '已停用' }}
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">权限</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatPermissions(statsData.permissions) }}</span>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">权限</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
formatPermissions(statsData.permissions)
}}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 text-sm md:text-base">创建时间</span>
<span class="font-medium text-gray-900 text-xs md:text-base break-all">{{ formatDate(statsData.createdAt) }}</span>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">创建时间</span>
<span class="break-all text-xs font-medium text-gray-900 md:text-base">{{
formatDate(statsData.createdAt)
}}</span>
</div>
<div class="flex justify-between items-start">
<span class="text-gray-600 text-sm md:text-base flex-shrink-0 mt-1">过期时间</span>
<div
v-if="statsData.expiresAt"
class="text-right"
>
<div class="flex items-start justify-between">
<span class="mt-1 flex-shrink-0 text-sm text-gray-600 md:text-base">过期时间</span>
<div v-if="statsData.expiresAt" class="text-right">
<div
v-if="isApiKeyExpired(statsData.expiresAt)"
class="text-red-600 font-medium text-sm md:text-base"
class="text-sm font-medium text-red-600 md:text-base"
>
<i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
已过期
</div>
<div
v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
class="text-orange-600 font-medium text-xs md:text-base break-all"
class="break-all text-xs font-medium text-orange-600 md:text-base"
>
<i class="fas fa-clock mr-1 text-xs md:text-sm" />
{{ formatExpireDate(statsData.expiresAt) }}
</div>
<div
v-else
class="text-gray-900 font-medium text-xs md:text-base break-all"
>
<div v-else class="break-all text-xs font-medium text-gray-900 md:text-base">
{{ formatExpireDate(statsData.expiresAt) }}
</div>
</div>
<div
v-else
class="text-gray-400 font-medium text-sm md:text-base"
>
<div v-else class="text-sm font-medium text-gray-400 md:text-base">
<i class="fas fa-infinity mr-1 text-xs md:text-sm" />
永不过期
</div>
@@ -72,43 +69,47 @@
<!-- 使用统计概览 -->
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<h3
class="mb-3 flex flex-col text-lg font-bold text-gray-900 sm:flex-row sm:items-center md:mb-4 md:text-xl"
>
<span class="flex items-center">
<i class="fas fa-chart-bar mr-2 md:mr-3 text-green-500 text-sm md:text-base" />
<i class="fas fa-chart-bar mr-2 text-sm text-green-500 md:mr-3 md:text-base" />
使用统计概览
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<span class="text-xs font-normal text-gray-600 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
<div class="grid grid-cols-2 gap-3 md:gap-4">
<div class="stat-card text-center">
<div class="text-lg md:text-3xl font-bold text-green-600">
<div class="text-lg font-bold text-green-600 md:text-3xl">
{{ formatNumber(currentPeriodData.requests) }}
</div>
<div class="text-xs md:text-sm text-gray-600">
<div class="text-xs text-gray-600 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
</div>
</div>
<div class="stat-card text-center">
<div class="text-lg md:text-3xl font-bold text-blue-600">
<div class="text-lg font-bold text-blue-600 md:text-3xl">
{{ formatNumber(currentPeriodData.allTokens) }}
</div>
<div class="text-xs md:text-sm text-gray-600">
<div class="text-xs text-gray-600 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
</div>
</div>
<div class="stat-card text-center">
<div class="text-lg md:text-3xl font-bold text-purple-600">
<div class="text-lg font-bold text-purple-600 md:text-3xl">
{{ currentPeriodData.formattedCost || '$0.000000' }}
</div>
<div class="text-xs md:text-sm text-gray-600">
<div class="text-xs text-gray-600 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
</div>
</div>
<div class="stat-card text-center">
<div class="text-lg md:text-3xl font-bold text-yellow-600">
<div class="text-lg font-bold text-yellow-600 md:text-3xl">
{{ formatNumber(currentPeriodData.inputTokens) }}
</div>
<div class="text-xs md:text-sm text-gray-600">
<div class="text-xs text-gray-600 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
</div>
</div>
@@ -128,7 +129,7 @@ const { statsData, statsPeriod, currentPeriodData } = storeToRefs(apiStatsStore)
// 格式化日期
const formatDate = (dateString) => {
if (!dateString) return '无'
try {
const date = dayjs(dateString)
return date.format('YYYY年MM月DD日 HH:mm')
@@ -170,9 +171,9 @@ const formatNumber = (num) => {
if (typeof num !== 'number') {
num = parseInt(num) || 0
}
if (num === 0) return '0'
// 大数字使用简化格式
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M'
@@ -186,11 +187,11 @@ const formatNumber = (num) => {
// 格式化权限
const formatPermissions = (permissions) => {
const permissionMap = {
'claude': 'Claude',
'gemini': 'Gemini',
'all': '全部模型'
claude: 'Claude',
gemini: 'Gemini',
all: '全部模型'
}
return permissionMap[permissions] || permissions || '未知'
}
</script>
@@ -201,7 +202,7 @@ const formatPermissions = (permissions) => {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
@@ -221,7 +222,7 @@ const formatPermissions = (permissions) => {
.card:hover {
transform: translateY(-2px);
box-shadow:
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
@@ -258,7 +259,7 @@ const formatPermissions = (permissions) => {
.stat-card:hover {
transform: translateY(-4px);
box-shadow:
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
@@ -279,4 +280,4 @@ const formatPermissions = (permissions) => {
padding: 12px;
}
}
</style>
</style>

68
web/admin-spa/src/components/apistats/TokenDistribution.vue
View File

@@ -1,45 +1,59 @@
<template>
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<h3
class="mb-3 flex flex-col text-lg font-bold text-gray-900 sm:flex-row sm:items-center md:mb-4 md:text-xl"
>
<span class="flex items-center">
<i class="fas fa-coins mr-2 md:mr-3 text-yellow-500 text-sm md:text-base" />
<i class="fas fa-coins mr-2 text-sm text-yellow-500 md:mr-3 md:text-base" />
Token 使用分布
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<span class="text-xs font-normal text-gray-600 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
<div class="space-y-2 md:space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-right mr-1 md:mr-2 text-green-500 text-xs md:text-sm" />
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<i class="fas fa-arrow-right mr-1 text-xs text-green-500 md:mr-2 md:text-sm" />
输入 Token
</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
formatNumber(currentPeriodData.inputTokens)
}}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-left mr-1 md:mr-2 text-blue-500 text-xs md:text-sm" />
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<i class="fas fa-arrow-left mr-1 text-xs text-blue-500 md:mr-2 md:text-sm" />
输出 Token
</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
formatNumber(currentPeriodData.outputTokens)
}}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-save mr-1 md:mr-2 text-purple-500 text-xs md:text-sm" />
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<i class="fas fa-save mr-1 text-xs text-purple-500 md:mr-2 md:text-sm" />
缓存创建 Token
</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
formatNumber(currentPeriodData.cacheCreateTokens)
}}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-download mr-1 md:mr-2 text-orange-500 text-xs md:text-sm" />
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<i class="fas fa-download mr-1 text-xs text-orange-500 md:mr-2 md:text-sm" />
缓存读取 Token
</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
formatNumber(currentPeriodData.cacheReadTokens)
}}</span>
</div>
</div>
<div class="mt-3 md:mt-4 pt-3 md:pt-4 border-t border-gray-200">
<div class="flex justify-between items-center font-bold text-gray-900">
<span class="text-sm md:text-base">{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<div class="mt-3 border-t border-gray-200 pt-3 md:mt-4 md:pt-4">
<div class="flex items-center justify-between font-bold text-gray-900">
<span class="text-sm md:text-base"
>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span
>
<span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
</div>
</div>
@@ -58,9 +72,9 @@ const formatNumber = (num) => {
if (typeof num !== 'number') {
num = parseInt(num) || 0
}
if (num === 0) return '0'
// 大数字使用简化格式
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M'
@@ -78,7 +92,7 @@ const formatNumber = (num) => {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
@@ -98,8 +112,8 @@ const formatNumber = (num) => {
.card:hover {
transform: translateY(-2px);
box-shadow:
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
</style>
</style>