i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-01-09 03:02:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): optimize feature components (models, providers, usage)

Browse Source
This commit is contained in:
fawney19
2025-12-13 22:26:36 +08:00
parent cb990b9018
commit 9ca845f9d0
5 changed files with 190 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/features/providers/components/HealthMonitorCard.vue
View File

@@ -74,12 +74,12 @@
:key="monitor.api_format"
class="border border-border/60 rounded-lg p-4 hover:border-primary/50 transition-colors"
>
<!-- 左右结构布局 -->
<div class="flex gap-6 items-center">
<!-- 左侧：信息区域 -->
<div class="w-44 flex-shrink-0 space-y-1.5">
<!-- 响应式布局：窄屏上下两行，宽屏左右结构 -->
<div class="flex flex-col sm:flex-row sm:gap-6 sm:items-center">
<!-- 第一行/左侧：信息区域 -->
<div class="sm:w-44 flex-shrink-0 space-y-1.5 mb-3 sm:mb-0">
<!-- API 格式标签和成功率 -->
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 flex-wrap">
<Badge
variant="outline"
class="font-mono text-xs"
@@ -93,20 +93,27 @@
>
{{ (monitor.success_rate * 100).toFixed(0) }}%
</Badge>
<!-- 提供商信息（仅管理员可见）- 窄屏时显示在同一行 -->
<span
v-if="showProviderInfo && 'provider_count' in monitor"
class="text-xs text-muted-foreground sm:hidden"
>
{{ monitor.provider_count }} 个提供商 / {{ monitor.key_count }} 个密钥
</span>
</div>
<!-- 提供商信息（仅管理员可见） -->
<!-- 提供商信息（仅管理员可见）- 宽屏时显示在下方 -->
<div
v-if="showProviderInfo && 'provider_count' in monitor"
class="text-xs text-muted-foreground"
class="text-xs text-muted-foreground hidden sm:block"
>
{{ monitor.provider_count }} 个提供商 / {{ monitor.key_count }} 个密钥
</div>
</div>
<!-- 右侧：时间线区域 -->
<div class="flex-1 min-w-0 flex justify-end">
<div class="w-full max-w-5xl">
<!-- 第二行/右侧：时间线区域 -->
<div class="flex-1 min-w-0 sm:flex sm:justify-end">
<div class="w-full sm:max-w-5xl">
<EndpointHealthTimeline
:monitor="monitor"
:lookback-hours="parseInt(lookbackHours)"

10
frontend/src/features/providers/components/ProviderDetailDrawer.vue
View File

@@ -14,7 +14,7 @@
/>
<!-- 抽屉内容 -->
<Card class="relative h-full w-[700px] rounded-none shadow-2xl overflow-y-auto">
<Card class="relative h-full w-full sm:w-[700px] sm:max-w-[90vw] rounded-none shadow-2xl overflow-y-auto">
<!-- 加载状态 -->
<div
v-if="loading"
@@ -25,11 +25,11 @@
<template v-else-if="provider">
<!-- 头部:名称 + 快捷操作 -->
<div class="sticky top-0 z-10 bg-background border-b p-6">
<div class="flex items-start justify-between gap-4">
<div class="sticky top-0 z-10 bg-background border-b p-4 sm:p-6">
<div class="flex items-start justify-between gap-3 sm:gap-4">
<div class="space-y-1 flex-1 min-w-0">
<div class="flex items-center gap-2">
<h2 class="text-xl font-bold truncate">
<h2 class="text-lg sm:text-xl font-bold truncate">
{{ provider.display_name }}
</h2>
<Badge
@@ -84,7 +84,7 @@
</div>
</div>
<div class="space-y-6 p-6">
<div class="space-y-6 p-4 sm:p-6">
<!-- 配额使用情况 -->
<Card
v-if="provider.billing_type === 'monthly_quota' && provider.monthly_quota_usd"