refactor: 优化仪表盘权限和 UI 样式

- 普通用户仪表盘隐藏提供商统计相关信息
- 为普通用户新增每日使用趋势折线图
- 登录对话框 UI 样式优化(Logo 放大、圆角统一)
- 输入框组件样式微调
- 将项目名称从 "API Gateway" 改为 "AI Gateway"
This commit is contained in:
fawney19
2026-01-20 01:58:55 +08:00
parent dd7cd68b51
commit c8b256ded1
8 changed files with 210 additions and 65 deletions

View File

@@ -37,7 +37,7 @@
<h1 class="text-lg font-bold text-[#191919] dark:text-white leading-none">
Aether
</h1>
<span class="text-[10px] text-[#91918d] dark:text-muted-foreground leading-none mt-1.5 font-medium tracking-wide">API Gateway</span>
<span class="text-[10px] text-[#91918d] dark:text-muted-foreground leading-none mt-1.5 font-medium tracking-wide">AI Gateway</span>
</div>
</div>

View File

@@ -395,8 +395,43 @@
<!-- 趋势图表区域 -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<!-- 每日模型成本堆叠柱状图 -->
<Card class="p-5">
<!-- 每日使用趋势折线图- 普通用户可见 -->
<Card
v-if="!isAdmin"
class="p-5"
>
<h4 class="mb-3 text-xs font-semibold text-foreground uppercase tracking-wider">
每日使用趋势
</h4>
<div
v-if="loadingDaily"
class="flex items-center justify-center h-[280px]"
>
<Skeleton class="h-full w-full" />
</div>
<div
v-else
style="height: 280px;"
>
<LineChart
v-if="dailyUsageTrendChartData.labels && dailyUsageTrendChartData.labels.length > 0"
:data="dailyUsageTrendChartData"
:options="dailyUsageTrendChartOptions"
/>
<div
v-else
class="flex h-full items-center justify-center text-xs text-muted-foreground"
>
暂无数据
</div>
</div>
</Card>
<!-- 每日模型成本堆叠柱状图- 仅管理员可见 -->
<Card
v-if="isAdmin"
class="p-5"
>
<h4 class="mb-3 text-xs font-semibold text-foreground uppercase tracking-wider">
每日模型成本
</h4>
@@ -424,8 +459,11 @@
</div>
</Card>
<!-- 提供商成本分布环形图 -->
<Card class="p-5">
<!-- 提供商成本分布环形图- 仅管理员可见 -->
<Card
v-if="isAdmin"
class="p-5"
>
<h4 class="mb-3 text-xs font-semibold text-foreground uppercase tracking-wider">
提供商成本分布
</h4>
@@ -452,6 +490,38 @@
</div>
</div>
</Card>
<!-- 每日模型成本堆叠柱状图- 普通用户可见 -->
<Card
v-if="!isAdmin"
class="p-5"
>
<h4 class="mb-3 text-xs font-semibold text-foreground uppercase tracking-wider">
每日模型成本
</h4>
<div
v-if="loadingDaily"
class="flex items-center justify-center h-[280px]"
>
<Skeleton class="h-full w-full" />
</div>
<div
v-else
style="height: 280px;"
>
<BarChart
v-if="dailyModelCostChartData.labels && dailyModelCostChartData.labels.length > 0"
:data="dailyModelCostChartData"
:options="dailyModelCostChartOptions"
/>
<div
v-else
class="flex h-full items-center justify-center text-xs text-muted-foreground"
>
暂无数据
</div>
</div>
</Card>
</div>
<!-- 每日统计 -->
@@ -538,7 +608,10 @@
<TableHead class="text-center">
使用模型
</TableHead>
<TableHead class="text-center">
<TableHead
v-if="isAdmin"
class="text-center"
>
使用提供商
</TableHead>
</TableRow>
@@ -546,7 +619,7 @@
<TableBody>
<TableRow v-if="loadingDaily">
<TableCell
colspan="7"
:colspan="isAdmin ? 7 : 6"
class="text-center py-8"
>
<div class="flex items-center justify-center gap-2">
@@ -557,7 +630,7 @@
</TableRow>
<TableRow v-else-if="dailyStats.length === 0">
<TableCell
colspan="7"
:colspan="isAdmin ? 7 : 6"
class="text-center py-8 text-muted-foreground text-xs"
>
暂无数据
@@ -601,7 +674,10 @@
<TableCell class="text-center text-xs">
{{ stat.unique_models }}
</TableCell>
<TableCell class="text-center text-xs">
<TableCell
v-if="isAdmin"
class="text-center text-xs"
>
{{ stat.unique_providers }}
</TableCell>
</TableRow>
@@ -724,6 +800,7 @@ import {
} from '@/components/ui'
import BarChart from '@/components/charts/BarChart.vue'
import DoughnutChart from '@/components/charts/DoughnutChart.vue'
import LineChart from '@/components/charts/LineChart.vue'
import {
Users,
Activity,
@@ -1097,6 +1174,91 @@ const providerCostChartOptions = computed<ChartOptions<'doughnut'>>(() => ({
}
}))
// 每日使用趋势(折线图)- 普通用户
const dailyUsageTrendChartData = computed<ChartData<'line'>>(() => {
// 管理员不需要此图表,直接返回空数据
if (isAdmin.value || dailyStats.value.length === 0) {
return { labels: [], datasets: [] }
}
return {
labels: dailyStats.value.map(stat => formatDateForChart(stat.date)),
datasets: [
{
label: '请求数',
data: dailyStats.value.map(stat => stat.requests),
borderColor: 'rgba(59, 130, 246, 0.8)',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
fill: true,
tension: 0.3,
yAxisID: 'y'
},
{
label: 'Tokens (K)',
data: dailyStats.value.map(stat => stat.tokens / 1000),
borderColor: 'rgba(16, 185, 129, 0.8)',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
fill: true,
tension: 0.3,
yAxisID: 'y1'
}
]
}
})
const dailyUsageTrendChartOptions = computed<ChartOptions<'line'>>(() => {
// 管理员不需要此图表
if (isAdmin.value) {
return {} as ChartOptions<'line'>
}
return {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false
},
scales: {
x: {
ticks: { font: { size: 10 } }
},
y: {
type: 'linear',
display: true,
position: 'left',
title: { display: true, text: '请求数', color: 'rgb(107, 114, 128)', font: { size: 10 } },
ticks: { font: { size: 10 } }
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: { display: true, text: 'Tokens (K)', color: 'rgb(107, 114, 128)', font: { size: 10 } },
ticks: { font: { size: 10 } },
grid: { drawOnChartArea: false }
}
},
plugins: {
legend: {
display: true,
position: 'bottom',
labels: { font: { size: 10 }, boxWidth: 12, padding: 8 }
},
tooltip: {
callbacks: {
label: (context) => {
const value = context.raw as number
if (context.dataset.label === 'Tokens (K)') {
return `${context.dataset.label}: ${value.toFixed(1)}K`
}
return `${context.dataset.label}: ${value}`
}
}
}
}
}
})
onMounted(async () => {
checkScreenSize()
setupResizeObserver()