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

style: 优化公开统计概览的宽屏布局

Browse Source 
- 移除状态概览的最大宽度限制，与其他标签页保持一致
- 重构 PublicStatsOverview 组件布局为响应式两列设计
- 顶部状态栏：服务状态左侧，平台可用性右侧
- 主内容区：今日统计（4项）与模型分布并排显示
- 图表区域独立占满宽度
- 各区块添加独立圆角背景，视觉层次更清晰

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Chapoly1305
2025-12-23 21:48:59 -05:00
parent cfeb4658ad
commit e754589ad5
2 changed files with 130 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
web/admin-spa/src/components/common/PublicStatsOverview.vue
View File

@@ -1,7 +1,8 @@
<template>
<div v-if="authStore.publicStats" class="public-stats-overview">
<!-- 服务状态徽章 -->
<div class="mb-4 flex items-center justify-center gap-2">
<!-- 顶部状态栏：服务状态 + 平台可用性 -->
<div class="header-section">
<div class="flex items-center gap-2">
<div
class="status-badge"
:class="{
@@ -18,9 +19,7 @@
运行 {{ formatUptime(authStore.publicStats.uptime) }}
</span>
</div>
<!-- 平台可用性指示器 -->
<div class="mb-4 flex flex-wrap justify-center gap-2">
<div class="flex flex-wrap justify-center gap-2 md:justify-end">
<div
v-for="(available, platform) in authStore.publicStats.platforms"
:key="platform"
@@ -31,28 +30,50 @@
<span>{{ getPlatformName(platform) }}</span>
</div>
</div>
</div>
<!-- 今日统计 -->
<!-- 主内容区：今日统计 + 模型分布 -->
<div class="main-content">
<!-- 左侧：今日统计 -->
<div class="stats-section">
<div class="section-title-left">今日统计</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">{{ formatNumber(authStore.publicStats.todayStats.requests) }}</div>
<div class="stat-label">今日请求</div>
<div class="stat-value">
{{ formatNumber(authStore.publicStats.todayStats.requests) }}
</div>
<div class="stat-label">请求数</div>
</div>
<div class="stat-item">
<div class="stat-value">{{ formatTokens(authStore.publicStats.todayStats.tokens) }}</div>
<div class="stat-label">今日 Tokens</div>
<div class="stat-value">
{{ formatTokens(authStore.publicStats.todayStats.tokens) }}
</div>
<div class="stat-label">Tokens</div>
</div>
<div class="stat-item">
<div class="stat-value">
{{ formatTokens(authStore.publicStats.todayStats.inputTokens) }}
</div>
<div class="stat-label">输入</div>
</div>
<div class="stat-item">
<div class="stat-value">
{{ formatTokens(authStore.publicStats.todayStats.outputTokens) }}
</div>
<div class="stat-label">输出</div>
</div>
</div>
</div>
<!-- 模型使用分布 -->
<!-- 右侧：模型使用分布 -->
<div
v-if="
authStore.publicStats.showOptions?.modelDistribution &&
authStore.publicStats.modelDistribution?.length > 0
"
class="mt-4"
class="model-section"
>
<div class="section-title">
<div class="section-title-left">
模型使用分布
<span class="period-label">{{
formatPeriodLabel(authStore.publicStats.modelDistributionPeriod)
@@ -72,10 +93,11 @@
</div>
</div>
</div>
</div>
<!-- 趋势图表（三合一双Y轴折线图） -->
<div v-if="hasAnyTrendData" class="mt-4">
<div class="section-title">使用趋势（近7天）</div>
<div v-if="hasAnyTrendData" class="chart-section">
<div class="section-title-left">使用趋势（近7天）</div>
<div class="chart-container">
<Line :data="chartData" :options="chartOptions" />
</div>
@@ -97,7 +119,7 @@
</div>
<!-- 暂无趋势数据 -->
<div v-else-if="hasTrendOptionsEnabled" class="empty-state mt-4">
<div v-else-if="hasTrendOptionsEnabled" class="empty-state">
<i class="fas fa-chart-line empty-icon"></i>
<p class="empty-text">暂无趋势数据</p>
<p class="empty-hint">数据将在有请求后自动更新</p>
@@ -447,7 +469,7 @@ function formatDateShort(dateStr) {
<style scoped>
.public-stats-overview {
@apply rounded-xl border border-gray-200/50 bg-white/80 p-4 backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/80;
@apply rounded-xl border border-gray-200/50 bg-white/80 p-4 backdrop-blur-sm dark:border-gray-700/50 dark:bg-gray-800/80 md:p-6;
animation: fadeIn 0.3s ease-out;
}
@@ -462,14 +484,44 @@ function formatDateShort(dateStr) {
}
}
/* 章节标题 */
/* 顶部状态栏 */
.header-section {
@apply mb-4 flex flex-col items-center justify-between gap-3 border-b border-gray-200 pb-4 dark:border-gray-700 md:mb-6 md:flex-row md:pb-6;
}
/* 主内容区 */
.main-content {
@apply grid gap-4 md:grid-cols-2 md:gap-6;
}
/* 统计区块 */
.stats-section {
@apply rounded-lg bg-gray-50/50 p-4 dark:bg-gray-700/30;
}
/* 模型区块 */
.model-section {
@apply rounded-lg bg-gray-50/50 p-4 dark:bg-gray-700/30;
}
/* 图表区块 */
.chart-section {
@apply mt-4 rounded-lg bg-gray-50/50 p-4 dark:bg-gray-700/30 md:mt-6;
}
/* 章节标题（居中） */
.section-title {
@apply mb-2 text-center text-xs text-gray-600 dark:text-gray-400;
}
/* 章节标题（左对齐） */
.section-title-left {
@apply mb-3 text-sm font-medium text-gray-700 dark:text-gray-300;
}
/* 时间范围标签 */
.period-label {
@apply ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500 dark:bg-gray-700 dark:text-gray-400;
@apply ml-1 rounded bg-gray-200 px-1.5 py-0.5 text-[10px] font-normal text-gray-500 dark:bg-gray-600 dark:text-gray-400;
}
/* 状态徽章 */
@@ -528,11 +580,11 @@ function formatDateShort(dateStr) {
}
.stat-item {
@apply rounded-lg bg-gray-50 p-3 text-center dark:bg-gray-700/50;
@apply rounded-lg bg-white p-3 text-center shadow-sm dark:bg-gray-800/50;
}
.stat-value {
@apply text-lg font-bold text-gray-900 dark:text-gray-100;
@apply text-lg font-bold text-gray-900 dark:text-gray-100 md:text-xl;
}
.stat-label {
@@ -541,15 +593,15 @@ function formatDateShort(dateStr) {
/* 模型分布 */
.model-distribution {
@apply space-y-2;
@apply space-y-2.5;
}
.model-bar-item {
@apply flex items-center gap-2 text-xs;
@apply flex items-center gap-3 text-sm;
}
.model-name {
@apply w-20 truncate text-gray-600 dark:text-gray-400;
@apply w-24 truncate text-gray-600 dark:text-gray-400 md:w-32;
}
.model-bar {

2
web/admin-spa/src/views/ApiStatsView.vue
View File

@@ -82,10 +82,8 @@
<!-- 状态概览内容 -->
<div v-if="currentTab === 'overview'" class="tab-content">
<div class="mx-auto max-w-2xl">
<PublicStatsOverview />
</div>
</div>
<!-- 统计内容 -->
<div v-if="currentTab === 'stats'" class="tab-content">