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

Merge pull request #84 from geminiwen/main

Browse Source 
feat: improve dashboard UI formatting and responsive layout
This commit is contained in:
Wesley Liddick
2025-07-27 11:43:03 +08:00
committed by GitHub
parent 112d660d1f 5ca568e693
commit e15ef83b03
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/admin/app.js
View File

@@ -2488,7 +2488,11 @@ const app = createApp({
// 格式化数字，添加千分符 // 格式化数字，添加千分符
formatNumber(num) { formatNumber(num) {
if (num === null || num === undefined) return '0'; if (num === null || num === undefined) return '0';
return Number(num).toLocaleString(); const number = Number(num);
if (number >= 1000000) {
return Math.floor(number / 1000000).toLocaleString() + 'M';
}
return number.toLocaleString();
}, },
// 格式化运行时间 // 格式化运行时间

20
web/admin/index.html
View File

@@ -227,7 +227,7 @@
<p class="text-3xl font-bold text-gray-900">{{ dashboardData.totalApiKeys }}</p> <p class="text-3xl font-bold text-gray-900">{{ dashboardData.totalApiKeys }}</p>
<p class="text-xs text-gray-500 mt-1">活跃: {{ dashboardData.activeApiKeys || 0 }}</p> <p class="text-xs text-gray-500 mt-1">活跃: {{ dashboardData.activeApiKeys || 0 }}</p>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-blue-500 to-blue-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-blue-500 to-blue-600">
<i class="fas fa-key"></i> <i class="fas fa-key"></i>
</div> </div>
</div> </div>
@@ -245,7 +245,7 @@
</span> </span>
</p> </p>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-green-500 to-green-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-green-500 to-green-600">
<i class="fas fa-user-circle"></i> <i class="fas fa-user-circle"></i>
</div> </div>
</div> </div>
@@ -258,7 +258,7 @@
<p class="text-3xl font-bold text-gray-900">{{ dashboardData.todayRequests }}</p> <p class="text-3xl font-bold text-gray-900">{{ dashboardData.todayRequests }}</p>
<p class="text-xs text-gray-500 mt-1">总请求: {{ formatNumber(dashboardData.totalRequests || 0) }}</p> <p class="text-xs text-gray-500 mt-1">总请求: {{ formatNumber(dashboardData.totalRequests || 0) }}</p>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-purple-500 to-purple-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-purple-500 to-purple-600">
<i class="fas fa-chart-line"></i> <i class="fas fa-chart-line"></i>
</div> </div>
</div> </div>
@@ -271,7 +271,7 @@
<p class="text-3xl font-bold text-green-600">{{ dashboardData.systemStatus }}</p> <p class="text-3xl font-bold text-green-600">{{ dashboardData.systemStatus }}</p>
<p class="text-xs text-gray-500 mt-1">运行时间: {{ formatUptime(dashboardData.uptime) }}</p> <p class="text-xs text-gray-500 mt-1">运行时间: {{ formatUptime(dashboardData.uptime) }}</p>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-yellow-500 to-orange-500"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-yellow-500 to-orange-500">
<i class="fas fa-heartbeat"></i> <i class="fas fa-heartbeat"></i>
</div> </div>
</div> </div>
@@ -284,7 +284,7 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex-1 mr-8"> <div class="flex-1 mr-8">
<p class="text-sm font-semibold text-gray-600 mb-1">今日Token</p> <p class="text-sm font-semibold text-gray-600 mb-1">今日Token</p>
<div class="flex items-baseline gap-2 mb-2"> <div class="flex items-baseline gap-2 mb-2 flex-wrap">
<p class="text-3xl font-bold text-blue-600">{{ formatNumber((dashboardData.todayInputTokens || 0) + (dashboardData.todayOutputTokens || 0) + (dashboardData.todayCacheCreateTokens || 0) + (dashboardData.todayCacheReadTokens || 0)) }}</p> <p class="text-3xl font-bold text-blue-600">{{ formatNumber((dashboardData.todayInputTokens || 0) + (dashboardData.todayOutputTokens || 0) + (dashboardData.todayCacheCreateTokens || 0) + (dashboardData.todayCacheReadTokens || 0)) }}</p>
<span class="text-sm text-green-600 font-medium">/ {{ costsData.todayCosts.formatted.totalCost }}</span> <span class="text-sm text-green-600 font-medium">/ {{ costsData.todayCosts.formatted.totalCost }}</span>
</div> </div>
@@ -297,7 +297,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-indigo-500 to-indigo-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-indigo-500 to-indigo-600">
<i class="fas fa-coins"></i> <i class="fas fa-coins"></i>
</div> </div>
</div> </div>
@@ -307,7 +307,7 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex-1 mr-8"> <div class="flex-1 mr-8">
<p class="text-sm font-semibold text-gray-600 mb-1">总Token消耗</p> <p class="text-sm font-semibold text-gray-600 mb-1">总Token消耗</p>
<div class="flex items-baseline gap-2 mb-2"> <div class="flex items-baseline gap-2 mb-2 flex-wrap">
<p class="text-3xl font-bold text-emerald-600">{{ formatNumber((dashboardData.totalInputTokens || 0) + (dashboardData.totalOutputTokens || 0) + (dashboardData.totalCacheCreateTokens || 0) + (dashboardData.totalCacheReadTokens || 0)) }}</p> <p class="text-3xl font-bold text-emerald-600">{{ formatNumber((dashboardData.totalInputTokens || 0) + (dashboardData.totalOutputTokens || 0) + (dashboardData.totalCacheCreateTokens || 0) + (dashboardData.totalCacheReadTokens || 0)) }}</p>
<span class="text-sm text-green-600 font-medium">/ {{ costsData.totalCosts.formatted.totalCost }}</span> <span class="text-sm text-green-600 font-medium">/ {{ costsData.totalCosts.formatted.totalCost }}</span>
</div> </div>
@@ -320,7 +320,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-emerald-500 to-emerald-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-emerald-500 to-emerald-600">
<i class="fas fa-database"></i> <i class="fas fa-database"></i>
</div> </div>
</div> </div>
@@ -333,7 +333,7 @@
<p class="text-3xl font-bold text-orange-600">{{ dashboardData.systemRPM || 0 }}</p> <p class="text-3xl font-bold text-orange-600">{{ dashboardData.systemRPM || 0 }}</p>
<p class="text-xs text-gray-500 mt-1">每分钟请求数</p> <p class="text-xs text-gray-500 mt-1">每分钟请求数</p>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-orange-500 to-orange-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-orange-500 to-orange-600">
<i class="fas fa-tachometer-alt"></i> <i class="fas fa-tachometer-alt"></i>
</div> </div>
</div> </div>
@@ -346,7 +346,7 @@
<p class="text-3xl font-bold text-rose-600">{{ dashboardData.systemTPM || 0 }}</p> <p class="text-3xl font-bold text-rose-600">{{ dashboardData.systemTPM || 0 }}</p>
<p class="text-xs text-gray-500 mt-1">每分钟Token数</p> <p class="text-xs text-gray-500 mt-1">每分钟Token数</p>
</div> </div>
<div class="stat-icon bg-gradient-to-br from-rose-500 to-rose-600"> <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-rose-500 to-rose-600">
<i class="fas fa-rocket"></i> <i class="fas fa-rocket"></i>
</div> </div>
</div> </div>