mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-02 01:10:23 +08:00
refactor: 优化仪表盘权限和 UI 样式
- 普通用户仪表盘隐藏提供商统计相关信息 - 为普通用户新增每日使用趋势折线图 - 登录对话框 UI 样式优化(Logo 放大、圆角统一) - 输入框组件样式微调 - 将项目名称从 "API Gateway" 改为 "AI Gateway"
This commit is contained in:
@@ -220,14 +220,14 @@ export interface DailyStat {
|
||||
cost: number
|
||||
avg_response_time: number // in seconds
|
||||
unique_models: number
|
||||
unique_providers: number
|
||||
unique_providers?: number // 仅管理员返回
|
||||
model_breakdown: ModelBreakdown[]
|
||||
}
|
||||
|
||||
export interface DailyStatsResponse {
|
||||
daily_stats: DailyStat[]
|
||||
model_summary: ModelSummary[]
|
||||
provider_summary: ProviderSummary[]
|
||||
provider_summary?: ProviderSummary[] // 仅管理员返回
|
||||
period: {
|
||||
start_date: string
|
||||
end_date: string
|
||||
|
||||
@@ -152,7 +152,7 @@ const autocompleteAttr = computed(() => {
|
||||
|
||||
const inputClass = computed(() =>
|
||||
cn(
|
||||
'flex h-11 w-full rounded-2xl border border-border/60 bg-card/80 px-4 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:border-primary/60 text-foreground backdrop-blur transition-all',
|
||||
'flex h-11 w-full rounded-xl border border-border/60 bg-muted/50 px-4 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:border-primary/60 text-foreground transition-all',
|
||||
props.masked && 'pr-10',
|
||||
props.class
|
||||
)
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
>
|
||||
<div class="px-6 py-6 sm:px-8 sm:py-8">
|
||||
<!-- Logo 和标题 -->
|
||||
<div class="flex flex-col items-center text-center mb-6">
|
||||
<div class="flex flex-col items-center text-center mb-8">
|
||||
<img
|
||||
src="/aether_adaptive.svg"
|
||||
alt="Aether"
|
||||
class="h-10 w-10 mb-3"
|
||||
class="h-16 w-16 mb-4"
|
||||
>
|
||||
<h2 class="text-xl font-semibold text-foreground">
|
||||
<h2 class="text-2xl font-semibold text-foreground">
|
||||
登录到 Aether
|
||||
</h2>
|
||||
</div>
|
||||
@@ -187,7 +187,7 @@
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="authStore.loading"
|
||||
class="w-full h-10"
|
||||
class="w-full h-12"
|
||||
>
|
||||
{{ authStore.loading ? '登录中...' : '登录' }}
|
||||
</Button>
|
||||
@@ -417,9 +417,9 @@ onMounted(async () => {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--background));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
border: 1px solid hsl(var(--border) / 0.6);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
@@ -446,8 +446,8 @@ onMounted(async () => {
|
||||
justify-content: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: hsl(var(--background));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
border: 1px solid hsl(var(--border) / 0.6);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
@@ -1955,7 +1955,7 @@ registerDynamicRoute('GET', '/api/admin/usage/:requestId', async (_config, param
|
||||
messages: [
|
||||
{
|
||||
role: 'user',
|
||||
content: 'Hello! Can you help me understand how API gateways work?'
|
||||
content: 'Hello! Can you help me understand how AI gateways work?'
|
||||
}
|
||||
],
|
||||
stream: record.is_stream
|
||||
@@ -1973,7 +1973,7 @@ registerDynamicRoute('GET', '/api/admin/usage/:requestId', async (_config, param
|
||||
content: [
|
||||
{
|
||||
type: 'text',
|
||||
text: 'API gateways are middleware services that sit between clients and backend services. They handle routing, authentication, rate limiting, and more...'
|
||||
text: 'AI gateways are middleware services that sit between clients and backend services. They handle routing, authentication, rate limiting, and more...'
|
||||
}
|
||||
],
|
||||
model: record.model,
|
||||
|
||||
@@ -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