mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-02 09:20:22 +08:00
refactor: 优化仪表盘权限和 UI 样式
- 普通用户仪表盘隐藏提供商统计相关信息 - 为普通用户新增每日使用趋势折线图 - 登录对话框 UI 样式优化(Logo 放大、圆角统一) - 输入框组件样式微调 - 将项目名称从 "API Gateway" 改为 "AI Gateway"
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user