mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-03 08:12:26 +08:00
1340 lines
48 KiB
Vue
1340 lines
48 KiB
Vue
<template>
|
||
<!-- 自定义抽屉 -->
|
||
<Teleport to="body">
|
||
<Transition name="drawer">
|
||
<div
|
||
v-if="open && (loading || provider)"
|
||
class="fixed inset-0 z-50 flex justify-end"
|
||
@click.self="handleBackdropClick"
|
||
>
|
||
<!-- 背景遮罩 -->
|
||
<div
|
||
class="absolute inset-0 bg-black/30 backdrop-blur-sm"
|
||
@click="handleBackdropClick"
|
||
/>
|
||
|
||
<!-- 抽屉内容 -->
|
||
<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"
|
||
class="flex items-center justify-center py-12"
|
||
>
|
||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
|
||
</div>
|
||
|
||
<template v-else-if="provider">
|
||
<!-- 头部:名称 + 快捷操作 -->
|
||
<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-lg sm:text-xl font-bold truncate">
|
||
{{ provider.display_name }}
|
||
</h2>
|
||
<Badge
|
||
:variant="provider.is_active ? 'default' : 'secondary'"
|
||
class="text-xs shrink-0"
|
||
>
|
||
{{ provider.is_active ? '活跃' : '已停用' }}
|
||
</Badge>
|
||
</div>
|
||
<div class="flex items-center gap-2 flex-wrap">
|
||
<span class="text-sm text-muted-foreground font-mono">{{ provider.name }}</span>
|
||
<template v-if="provider.website">
|
||
<span class="text-muted-foreground">·</span>
|
||
<a
|
||
:href="provider.website"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-xs text-primary hover:underline truncate"
|
||
title="访问官网"
|
||
>
|
||
{{ provider.website }}
|
||
</a>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1 shrink-0">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
title="编辑提供商"
|
||
@click="$emit('edit', provider)"
|
||
>
|
||
<Edit class="w-4 h-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
:title="provider.is_active ? '点击停用' : '点击启用'"
|
||
@click="$emit('toggleStatus', provider)"
|
||
>
|
||
<Power class="w-4 h-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
title="关闭"
|
||
@click="handleClose"
|
||
>
|
||
<X class="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-6 p-4 sm:p-6">
|
||
<!-- 配额使用情况 -->
|
||
<Card
|
||
v-if="provider.billing_type === 'monthly_quota' && provider.monthly_quota_usd"
|
||
class="p-4"
|
||
>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="text-sm font-semibold">
|
||
订阅配额
|
||
</h3>
|
||
<Badge
|
||
variant="secondary"
|
||
class="text-xs"
|
||
>
|
||
{{ ((provider.monthly_used_usd || 0) / provider.monthly_quota_usd * 100).toFixed(1) }}%
|
||
</Badge>
|
||
</div>
|
||
<div class="relative w-full h-2 bg-muted rounded-full overflow-hidden">
|
||
<div
|
||
class="absolute left-0 top-0 h-full transition-all duration-300"
|
||
:class="{
|
||
'bg-green-500': (provider.monthly_used_usd || 0) / provider.monthly_quota_usd < 0.7,
|
||
'bg-yellow-500': (provider.monthly_used_usd || 0) / provider.monthly_quota_usd >= 0.7 && (provider.monthly_used_usd || 0) / provider.monthly_quota_usd < 0.9,
|
||
'bg-red-500': (provider.monthly_used_usd || 0) / provider.monthly_quota_usd >= 0.9
|
||
}"
|
||
:style="{ width: `${Math.min((provider.monthly_used_usd || 0) / provider.monthly_quota_usd * 100, 100)}%` }"
|
||
/>
|
||
</div>
|
||
<div class="flex items-center justify-between text-xs">
|
||
<span class="font-semibold">
|
||
${{ (provider.monthly_used_usd || 0).toFixed(2) }} / ${{ provider.monthly_quota_usd.toFixed(2) }}
|
||
</span>
|
||
<span
|
||
v-if="provider.quota_reset_day"
|
||
class="text-muted-foreground"
|
||
>
|
||
每月 {{ provider.quota_reset_day }} 号重置
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<!-- 端点与密钥管理 -->
|
||
<Card class="overflow-hidden">
|
||
<div class="p-4 border-b border-border/60">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="text-sm font-semibold flex items-center gap-2">
|
||
<span>端点与密钥管理</span>
|
||
</h3>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
class="h-8"
|
||
@click="showAddEndpointDialog"
|
||
>
|
||
<Plus class="w-3.5 h-3.5 mr-1.5" />
|
||
添加端点
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 端点列表 -->
|
||
<div
|
||
v-if="endpoints.length > 0"
|
||
class="divide-y divide-border/40"
|
||
>
|
||
<div
|
||
v-for="endpoint in endpoints"
|
||
:key="endpoint.id"
|
||
class="group"
|
||
>
|
||
<!-- 端点头部 - 可点击展开/收起 -->
|
||
<div
|
||
class="p-4 hover:bg-muted/30 transition-colors cursor-pointer"
|
||
@click="toggleEndpoint(endpoint.id)"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||
<ChevronRight
|
||
class="w-4 h-4 text-muted-foreground transition-transform shrink-0"
|
||
:class="{ 'rotate-90': expandedEndpoints.has(endpoint.id) }"
|
||
/>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium">{{ endpoint.api_format }}</span>
|
||
<Badge
|
||
v-if="!endpoint.is_active"
|
||
variant="secondary"
|
||
class="text-[10px] px-1.5 py-0"
|
||
>
|
||
已停用
|
||
</Badge>
|
||
<span class="text-xs text-muted-foreground flex items-center gap-1">
|
||
<Key class="w-3 h-3" />
|
||
{{ endpoint.keys?.filter((k: EndpointAPIKey) => k.is_active).length || 0 }}
|
||
</span>
|
||
<span
|
||
v-if="endpoint.max_retries"
|
||
class="text-xs text-muted-foreground"
|
||
>
|
||
{{ endpoint.max_retries }}次重试
|
||
</span>
|
||
<span
|
||
v-if="endpoint.timeout"
|
||
class="text-xs text-muted-foreground"
|
||
>
|
||
{{ endpoint.timeout }}s
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center gap-1.5 mt-0.5">
|
||
<span class="text-xs text-muted-foreground font-mono truncate">
|
||
{{ endpoint.base_url }}
|
||
</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-5 w-5 shrink-0"
|
||
title="复制 Base URL"
|
||
@click.stop="copyToClipboard(endpoint.base_url)"
|
||
>
|
||
<Copy class="w-3 h-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex items-center gap-1"
|
||
@click.stop
|
||
>
|
||
<Button
|
||
v-if="hasUnhealthyKeys(endpoint)"
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8 text-green-600"
|
||
title="恢复所有密钥健康状态"
|
||
:disabled="recoveringEndpointId === endpoint.id"
|
||
@click="handleRecoverAllKeys(endpoint)"
|
||
>
|
||
<Loader2
|
||
v-if="recoveringEndpointId === endpoint.id"
|
||
class="w-3.5 h-3.5 animate-spin"
|
||
/>
|
||
<RefreshCw
|
||
v-else
|
||
class="w-3.5 h-3.5"
|
||
/>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8"
|
||
title="添加密钥"
|
||
@click="handleAddKey(endpoint)"
|
||
>
|
||
<Plus class="w-4 h-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8"
|
||
title="编辑端点"
|
||
@click="handleEditEndpoint(endpoint)"
|
||
>
|
||
<Edit class="w-3.5 h-3.5" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8"
|
||
:disabled="togglingEndpointId === endpoint.id"
|
||
:title="endpoint.is_active ? '点击停用' : '点击启用'"
|
||
@click="toggleEndpointActive(endpoint)"
|
||
>
|
||
<Power class="w-3.5 h-3.5" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8"
|
||
title="删除端点"
|
||
@click="handleDeleteEndpoint(endpoint)"
|
||
>
|
||
<Trash2 class="w-3.5 h-3.5" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 端点详情 - 可展开区域 -->
|
||
<div
|
||
v-if="expandedEndpoints.has(endpoint.id)"
|
||
class="px-4 pb-4 bg-muted/20 border-t border-border/40"
|
||
>
|
||
<div class="space-y-3 pt-3">
|
||
<!-- 端点配置信息 -->
|
||
<div
|
||
v-if="endpoint.custom_path || endpoint.rpm_limit"
|
||
class="flex flex-wrap gap-x-4 gap-y-1 text-xs"
|
||
>
|
||
<div v-if="endpoint.custom_path">
|
||
<span class="text-muted-foreground">自定义路径:</span>
|
||
<span class="ml-1 font-mono">{{ endpoint.custom_path }}</span>
|
||
</div>
|
||
<div v-if="endpoint.rpm_limit">
|
||
<span class="text-muted-foreground">RPM:</span>
|
||
<span class="ml-1 font-medium">{{ endpoint.rpm_limit }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 密钥列表 -->
|
||
<div class="space-y-2">
|
||
<div
|
||
v-if="endpoint.keys && endpoint.keys.length > 0"
|
||
class="space-y-2"
|
||
>
|
||
<div
|
||
v-for="key in endpoint.keys"
|
||
:key="key.id"
|
||
draggable="true"
|
||
class="p-3 bg-background rounded-md border transition-all duration-150 group/key"
|
||
:class="{
|
||
'border-border/40 hover:border-border/80': dragState.targetKeyId !== key.id,
|
||
'border-primary border-2 bg-primary/5': dragState.targetKeyId === key.id,
|
||
'opacity-50': dragState.draggedKeyId === key.id,
|
||
'cursor-grabbing': dragState.isDragging
|
||
}"
|
||
@dragstart="handleDragStart($event, key, endpoint)"
|
||
@dragend="handleDragEnd"
|
||
@dragover="handleDragOver($event, key)"
|
||
@dragleave="handleDragLeave"
|
||
@drop="handleDrop($event, key, endpoint)"
|
||
>
|
||
<!-- 密钥主要信息行 -->
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||
<!-- 拖动手柄 -->
|
||
<div
|
||
class="cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
|
||
title="拖动排序"
|
||
>
|
||
<GripVertical class="w-4 h-4" />
|
||
</div>
|
||
<div class="min-w-0">
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="text-xs font-medium truncate">{{ key.name || '未命名密钥' }}</span>
|
||
<Badge
|
||
:variant="key.is_active ? 'default' : 'secondary'"
|
||
class="text-[10px] px-1.5 py-0 shrink-0"
|
||
>
|
||
{{ key.is_active ? '活跃' : '禁用' }}
|
||
</Badge>
|
||
</div>
|
||
<div class="text-[10px] font-mono text-muted-foreground truncate">
|
||
{{ key.api_key_masked }}
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1.5 ml-auto shrink-0">
|
||
<div
|
||
v-if="key.health_score !== undefined"
|
||
class="flex items-center gap-1"
|
||
>
|
||
<div class="w-12 h-1 bg-muted/80 rounded-full overflow-hidden">
|
||
<div
|
||
class="h-full transition-all duration-300"
|
||
:class="getHealthScoreBarColor(key.health_score || 0)"
|
||
:style="{ width: `${(key.health_score || 0) * 100}%` }"
|
||
/>
|
||
</div>
|
||
<span
|
||
class="text-[10px] font-bold tabular-nums w-[30px] text-right"
|
||
:class="getHealthScoreColor(key.health_score || 0)"
|
||
>
|
||
{{ ((key.health_score || 0) * 100).toFixed(0) }}%
|
||
</span>
|
||
</div>
|
||
<Badge
|
||
v-if="key.circuit_breaker_open"
|
||
variant="destructive"
|
||
class="text-[10px] px-1.5 py-0"
|
||
>
|
||
熔断
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1 ml-2">
|
||
<Button
|
||
v-if="key.circuit_breaker_open || (key.health_score !== undefined && key.health_score < 0.5)"
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-7 w-7 text-green-600"
|
||
title="刷新健康状态"
|
||
@click="handleRecoverKey(key)"
|
||
>
|
||
<RefreshCw class="w-3 h-3" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-7 w-7"
|
||
title="配置允许的模型"
|
||
@click="handleConfigKeyModels(key)"
|
||
>
|
||
<Layers class="w-3 h-3" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-7 w-7"
|
||
title="编辑密钥"
|
||
@click="handleEditKey(endpoint, key)"
|
||
>
|
||
<Edit class="w-3 h-3" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-7 w-7"
|
||
:disabled="togglingKeyId === key.id"
|
||
:title="key.is_active ? '点击停用' : '点击启用'"
|
||
@click="toggleKeyActive(key)"
|
||
>
|
||
<Power class="w-3 h-3" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-7 w-7"
|
||
title="删除密钥"
|
||
@click="handleDeleteKey(key)"
|
||
>
|
||
<Trash2 class="w-3 h-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 密钥详细信息 -->
|
||
<div class="flex items-center text-[11px]">
|
||
<!-- 左侧固定信息 -->
|
||
<div class="flex items-center gap-2">
|
||
<!-- 可点击编辑的优先级 -->
|
||
<span
|
||
v-if="editingPriorityKey !== key.id"
|
||
class="text-muted-foreground cursor-pointer hover:text-foreground hover:bg-muted/50 px-1 rounded transition-colors"
|
||
title="点击编辑优先级，数字越小优先级越高"
|
||
@click="startEditPriority(key)"
|
||
>
|
||
P {{ key.internal_priority }}
|
||
</span>
|
||
<!-- 编辑模式 -->
|
||
<span
|
||
v-else
|
||
class="flex items-center gap-1"
|
||
>
|
||
<span class="text-muted-foreground">P</span>
|
||
<input
|
||
ref="priorityInput"
|
||
v-model.number="editingPriorityValue"
|
||
type="number"
|
||
class="w-12 h-5 px-1 text-[11px] border rounded bg-background focus:outline-none focus:ring-1 focus:ring-primary"
|
||
min="0"
|
||
@keyup.enter="savePriority(key, endpoint)"
|
||
@keyup.escape="cancelEditPriority"
|
||
@blur="savePriority(key, endpoint)"
|
||
>
|
||
</span>
|
||
<span
|
||
class="text-muted-foreground"
|
||
title="成本倍率，实际成本 = 模型价格 × 倍率"
|
||
>
|
||
{{ key.rate_multiplier }}x
|
||
</span>
|
||
<span
|
||
v-if="key.success_rate !== undefined"
|
||
class="text-muted-foreground"
|
||
title="成功率 = 成功次数 / 总请求数"
|
||
>
|
||
{{ (key.success_rate * 100).toFixed(1) }}% ({{ key.success_count }}/{{ key.request_count }})
|
||
</span>
|
||
</div>
|
||
<!-- 右侧动态信息 -->
|
||
<div class="flex items-center gap-2 ml-auto">
|
||
<span
|
||
v-if="key.next_probe_at"
|
||
class="text-amber-600 dark:text-amber-400"
|
||
title="熔断器探测恢复时间"
|
||
>
|
||
{{ formatProbeTime(key.next_probe_at) }}探测
|
||
</span>
|
||
<span
|
||
v-if="key.rate_limit"
|
||
class="text-muted-foreground"
|
||
title="每分钟请求数限制"
|
||
>
|
||
{{ key.rate_limit }}rpm
|
||
</span>
|
||
<span
|
||
v-if="key.max_concurrent || key.is_adaptive"
|
||
class="text-muted-foreground"
|
||
:title="key.is_adaptive ? `自适应并发限制（学习值: ${key.learned_max_concurrent ?? '未学习'}）` : `固定并发限制: ${key.max_concurrent}`"
|
||
>
|
||
{{ key.is_adaptive ? '自适应' : '固定' }}并发: {{ key.is_adaptive ? (key.learned_max_concurrent ?? '学习中') : key.max_concurrent }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
class="text-xs text-muted-foreground text-center py-4"
|
||
>
|
||
暂无密钥
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div
|
||
v-else
|
||
class="p-8 text-center text-muted-foreground"
|
||
>
|
||
<Server class="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||
<p class="text-sm">
|
||
暂无端点配置
|
||
</p>
|
||
<p class="text-xs mt-1">
|
||
点击上方"添加端点"按钮创建第一个端点
|
||
</p>
|
||
</div>
|
||
</Card>
|
||
|
||
<!-- 模型查看 -->
|
||
<ModelsTab
|
||
v-if="provider"
|
||
:key="`models-${provider.id}`"
|
||
:provider="provider"
|
||
@edit-model="handleEditModel"
|
||
@delete-model="handleDeleteModel"
|
||
@batch-assign="handleBatchAssign"
|
||
/>
|
||
|
||
<!-- 模型名称映射 -->
|
||
<ModelAliasesTab
|
||
v-if="provider"
|
||
ref="modelAliasesTabRef"
|
||
:key="`aliases-${provider.id}`"
|
||
:provider="provider"
|
||
@refresh="handleRelatedDataRefresh"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</Card>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
|
||
<!-- 端点表单对话框（添加/编辑） -->
|
||
<EndpointFormDialog
|
||
v-if="provider && open"
|
||
v-model="endpointDialogOpen"
|
||
:provider="provider"
|
||
:endpoint="endpointToEdit"
|
||
@endpoint-created="handleEndpointChanged"
|
||
@endpoint-updated="handleEndpointChanged"
|
||
/>
|
||
|
||
<!-- 删除端点确认对话框 -->
|
||
<AlertDialog
|
||
v-if="open"
|
||
:model-value="deleteEndpointConfirmOpen"
|
||
title="删除端点"
|
||
:description="`确定要删除端点 ${endpointToDelete?.api_format} 吗？这将同时删除其所有密钥。`"
|
||
confirm-text="删除"
|
||
cancel-text="取消"
|
||
type="danger"
|
||
@update:model-value="deleteEndpointConfirmOpen = $event"
|
||
@confirm="confirmDeleteEndpoint"
|
||
@cancel="deleteEndpointConfirmOpen = false"
|
||
/>
|
||
|
||
<!-- 密钥编辑对话框 -->
|
||
<KeyFormDialog
|
||
v-if="open"
|
||
:open="keyFormDialogOpen"
|
||
:endpoint="currentEndpoint"
|
||
:editing-key="editingKey"
|
||
:provider-id="provider ? provider.id : null"
|
||
@close="keyFormDialogOpen = false"
|
||
@saved="handleKeyChanged"
|
||
/>
|
||
|
||
<!-- 密钥允许模型配置对话框 -->
|
||
<KeyAllowedModelsDialog
|
||
v-if="open"
|
||
:open="keyAllowedModelsDialogOpen"
|
||
:api-key="editingKey"
|
||
:provider-id="provider ? provider.id : null"
|
||
@close="keyAllowedModelsDialogOpen = false"
|
||
@saved="handleKeyChanged"
|
||
/>
|
||
|
||
<!-- 删除密钥确认对话框 -->
|
||
<AlertDialog
|
||
v-if="open"
|
||
:model-value="deleteKeyConfirmOpen"
|
||
title="删除密钥"
|
||
:description="`确定要删除密钥 ${keyToDelete?.api_key_masked} 吗？`"
|
||
confirm-text="删除"
|
||
cancel-text="取消"
|
||
type="danger"
|
||
@update:model-value="deleteKeyConfirmOpen = $event"
|
||
@confirm="confirmDeleteKey"
|
||
@cancel="deleteKeyConfirmOpen = false"
|
||
/>
|
||
|
||
<!-- 添加/编辑模型对话框 -->
|
||
<ProviderModelFormDialog
|
||
v-if="open && provider"
|
||
:open="modelFormDialogOpen"
|
||
:provider-id="provider.id"
|
||
:provider-name="provider.display_name"
|
||
:editing-model="editingModel"
|
||
@update:open="modelFormDialogOpen = $event"
|
||
@saved="handleModelSaved"
|
||
/>
|
||
|
||
<!-- 删除模型确认对话框 -->
|
||
<AlertDialog
|
||
v-if="open"
|
||
:model-value="deleteModelConfirmOpen"
|
||
title="移除模型支持"
|
||
:description="`确定要移除提供商 ${provider?.display_name} 对模型 ${modelToDelete?.global_model_display_name || modelToDelete?.provider_model_name} 的支持吗？这不会删除全局模型，只是该提供商将不再支持此模型。`"
|
||
confirm-text="移除"
|
||
cancel-text="取消"
|
||
type="danger"
|
||
@update:model-value="deleteModelConfirmOpen = $event"
|
||
@confirm="confirmDeleteModel"
|
||
@cancel="deleteModelConfirmOpen = false"
|
||
/>
|
||
|
||
<!-- 批量关联模型对话框 -->
|
||
<BatchAssignModelsDialog
|
||
v-if="open && provider"
|
||
:open="batchAssignDialogOpen"
|
||
:provider-id="provider.id"
|
||
:provider-name="provider.display_name"
|
||
:provider-identifier="provider.name"
|
||
@update:open="batchAssignDialogOpen = $event"
|
||
@changed="handleBatchAssignChanged"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, computed } from 'vue'
|
||
import {
|
||
Server,
|
||
Plus,
|
||
Key,
|
||
ChevronRight,
|
||
Edit,
|
||
Trash2,
|
||
RefreshCw,
|
||
X,
|
||
Loader2,
|
||
Power,
|
||
Layers,
|
||
GripVertical,
|
||
Copy
|
||
} from 'lucide-vue-next'
|
||
import { useEscapeKey } from '@/composables/useEscapeKey'
|
||
import Button from '@/components/ui/button.vue'
|
||
import Badge from '@/components/ui/badge.vue'
|
||
import Card from '@/components/ui/card.vue'
|
||
import { useToast } from '@/composables/useToast'
|
||
import { useClipboard } from '@/composables/useClipboard'
|
||
import { getProvider, getProviderEndpoints } from '@/api/endpoints'
|
||
import {
|
||
KeyFormDialog,
|
||
KeyAllowedModelsDialog,
|
||
ModelsTab,
|
||
ModelAliasesTab,
|
||
BatchAssignModelsDialog
|
||
} from '@/features/providers/components'
|
||
import EndpointFormDialog from '@/features/providers/components/EndpointFormDialog.vue'
|
||
import ProviderModelFormDialog from '@/features/providers/components/ProviderModelFormDialog.vue'
|
||
import AlertDialog from '@/components/common/AlertDialog.vue'
|
||
import {
|
||
deleteEndpoint as deleteEndpointAPI,
|
||
deleteEndpointKey,
|
||
recoverKeyHealth,
|
||
getEndpointKeys,
|
||
updateEndpoint,
|
||
updateEndpointKey,
|
||
batchUpdateKeyPriority,
|
||
type ProviderEndpoint,
|
||
type EndpointAPIKey,
|
||
type Model
|
||
} from '@/api/endpoints'
|
||
import { deleteModel as deleteModelAPI } from '@/api/endpoints/models'
|
||
|
||
// 扩展端点类型,包含密钥列表
|
||
interface ProviderEndpointWithKeys extends ProviderEndpoint {
|
||
keys?: EndpointAPIKey[]
|
||
rpm_limit?: number
|
||
}
|
||
|
||
interface Props {
|
||
providerId: string | null
|
||
open: boolean
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
const emit = defineEmits<{
|
||
(e: 'update:open', value: boolean): void
|
||
(e: 'edit', provider: any): void
|
||
(e: 'toggleStatus', provider: any): void
|
||
(e: 'refresh'): void
|
||
}>()
|
||
|
||
const { error: showError, success: showSuccess } = useToast()
|
||
const { copyToClipboard } = useClipboard()
|
||
|
||
const loading = ref(false)
|
||
const provider = ref<any>(null)
|
||
const endpoints = ref<ProviderEndpointWithKeys[]>([])
|
||
const expandedEndpoints = ref<Set<string>>(new Set())
|
||
|
||
// 端点相关状态
|
||
const endpointDialogOpen = ref(false)
|
||
const endpointToEdit = ref<ProviderEndpoint | null>(null)
|
||
const deleteEndpointConfirmOpen = ref(false)
|
||
const endpointToDelete = ref<ProviderEndpoint | null>(null)
|
||
|
||
// 密钥相关状态
|
||
const keyFormDialogOpen = ref(false)
|
||
const keyAllowedModelsDialogOpen = ref(false)
|
||
const currentEndpoint = ref<ProviderEndpoint | null>(null)
|
||
const editingKey = ref<EndpointAPIKey | null>(null)
|
||
const deleteKeyConfirmOpen = ref(false)
|
||
const keyToDelete = ref<EndpointAPIKey | null>(null)
|
||
const recoveringEndpointId = ref<string | null>(null)
|
||
const togglingEndpointId = ref<string | null>(null)
|
||
const togglingKeyId = ref<string | null>(null)
|
||
|
||
// 模型相关状态
|
||
const modelFormDialogOpen = ref(false)
|
||
const editingModel = ref<Model | null>(null)
|
||
const deleteModelConfirmOpen = ref(false)
|
||
const modelToDelete = ref<Model | null>(null)
|
||
const batchAssignDialogOpen = ref(false)
|
||
|
||
// ModelAliasesTab 组件引用
|
||
const modelAliasesTabRef = ref<InstanceType<typeof ModelAliasesTab> | null>(null)
|
||
|
||
// 拖动排序相关状态
|
||
const dragState = ref({
|
||
isDragging: false,
|
||
draggedKeyId: null as string | null,
|
||
targetKeyId: null as string | null,
|
||
dragEndpointId: null as string | null
|
||
})
|
||
|
||
// 点击编辑优先级相关状态
|
||
const editingPriorityKey = ref<string | null>(null)
|
||
const editingPriorityValue = ref<number>(0)
|
||
|
||
// 任意模态窗口打开时,阻止抽屉被误关闭
|
||
const hasBlockingDialogOpen = computed(() =>
|
||
endpointDialogOpen.value ||
|
||
deleteEndpointConfirmOpen.value ||
|
||
keyFormDialogOpen.value ||
|
||
keyAllowedModelsDialogOpen.value ||
|
||
deleteKeyConfirmOpen.value ||
|
||
modelFormDialogOpen.value ||
|
||
deleteModelConfirmOpen.value ||
|
||
batchAssignDialogOpen.value ||
|
||
// 检测 ModelAliasesTab 子组件的 Dialog 是否打开
|
||
modelAliasesTabRef.value?.dialogOpen
|
||
)
|
||
|
||
// 监听 providerId 变化
|
||
watch(() => props.providerId, (newId) => {
|
||
if (newId && props.open) {
|
||
loadProvider()
|
||
loadEndpoints()
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// 监听 open 变化
|
||
watch(() => props.open, (newOpen) => {
|
||
if (newOpen && props.providerId) {
|
||
loadProvider()
|
||
loadEndpoints()
|
||
} else if (!newOpen) {
|
||
// 重置所有状态
|
||
provider.value = null
|
||
endpoints.value = []
|
||
expandedEndpoints.value.clear()
|
||
|
||
// 重置所有对话框状态
|
||
endpointDialogOpen.value = false
|
||
deleteEndpointConfirmOpen.value = false
|
||
keyFormDialogOpen.value = false
|
||
keyAllowedModelsDialogOpen.value = false
|
||
deleteKeyConfirmOpen.value = false
|
||
batchAssignDialogOpen.value = false
|
||
|
||
// 重置临时数据
|
||
endpointToEdit.value = null
|
||
endpointToDelete.value = null
|
||
currentEndpoint.value = null
|
||
editingKey.value = null
|
||
keyToDelete.value = null
|
||
}
|
||
})
|
||
|
||
// 处理背景点击
|
||
function handleBackdropClick() {
|
||
if (!hasBlockingDialogOpen.value) {
|
||
handleClose()
|
||
}
|
||
}
|
||
|
||
// 关闭抽屉
|
||
function handleClose() {
|
||
if (!hasBlockingDialogOpen.value) {
|
||
emit('update:open', false)
|
||
}
|
||
}
|
||
|
||
// 切换端点展开/收起
|
||
function toggleEndpoint(endpointId: string) {
|
||
if (expandedEndpoints.value.has(endpointId)) {
|
||
expandedEndpoints.value.delete(endpointId)
|
||
} else {
|
||
expandedEndpoints.value.add(endpointId)
|
||
}
|
||
}
|
||
|
||
async function handleRelatedDataRefresh() {
|
||
await loadProvider()
|
||
emit('refresh')
|
||
}
|
||
|
||
// 显示添加端点对话框
|
||
function showAddEndpointDialog() {
|
||
endpointToEdit.value = null // 添加模式
|
||
endpointDialogOpen.value = true
|
||
}
|
||
|
||
// ===== 端点事件处理 =====
|
||
function handleEditEndpoint(endpoint: ProviderEndpoint) {
|
||
endpointToEdit.value = endpoint // 编辑模式
|
||
endpointDialogOpen.value = true
|
||
}
|
||
|
||
function handleDeleteEndpoint(endpoint: ProviderEndpoint) {
|
||
endpointToDelete.value = endpoint
|
||
deleteEndpointConfirmOpen.value = true
|
||
}
|
||
|
||
async function confirmDeleteEndpoint() {
|
||
if (!endpointToDelete.value) return
|
||
|
||
try {
|
||
await deleteEndpointAPI(endpointToDelete.value.id)
|
||
showSuccess('端点已删除')
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '删除失败', '错误')
|
||
} finally {
|
||
deleteEndpointConfirmOpen.value = false
|
||
endpointToDelete.value = null
|
||
}
|
||
}
|
||
|
||
async function handleEndpointChanged() {
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
endpointToEdit.value = null
|
||
}
|
||
|
||
// ===== 密钥事件处理 =====
|
||
function handleAddKey(endpoint: ProviderEndpoint) {
|
||
currentEndpoint.value = endpoint
|
||
editingKey.value = null
|
||
keyFormDialogOpen.value = true
|
||
}
|
||
|
||
function handleEditKey(endpoint: ProviderEndpoint, key: EndpointAPIKey) {
|
||
currentEndpoint.value = endpoint
|
||
editingKey.value = key
|
||
keyFormDialogOpen.value = true
|
||
}
|
||
|
||
function handleConfigKeyModels(key: EndpointAPIKey) {
|
||
editingKey.value = key
|
||
keyAllowedModelsDialogOpen.value = true
|
||
}
|
||
|
||
function handleDeleteKey(key: EndpointAPIKey) {
|
||
keyToDelete.value = key
|
||
deleteKeyConfirmOpen.value = true
|
||
}
|
||
|
||
async function confirmDeleteKey() {
|
||
if (!keyToDelete.value) return
|
||
|
||
const keyId = keyToDelete.value.id
|
||
deleteKeyConfirmOpen.value = false
|
||
keyToDelete.value = null
|
||
|
||
try {
|
||
await deleteEndpointKey(keyId)
|
||
showSuccess('密钥已删除')
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '删除密钥失败', '错误')
|
||
}
|
||
}
|
||
|
||
async function handleRecoverKey(key: EndpointAPIKey) {
|
||
try {
|
||
const result = await recoverKeyHealth(key.id)
|
||
showSuccess(result.message || 'Key已完全恢复')
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || 'Key恢复失败', '错误')
|
||
}
|
||
}
|
||
|
||
// 检查端点是否有不健康的密钥
|
||
function hasUnhealthyKeys(endpoint: ProviderEndpointWithKeys): boolean {
|
||
if (!endpoint.keys || endpoint.keys.length === 0) return false
|
||
return endpoint.keys.some(key =>
|
||
key.circuit_breaker_open ||
|
||
(key.health_score !== undefined && key.health_score < 1)
|
||
)
|
||
}
|
||
|
||
// 批量恢复端点下所有密钥的健康状态
|
||
async function handleRecoverAllKeys(endpoint: ProviderEndpointWithKeys) {
|
||
if (!endpoint.keys || endpoint.keys.length === 0) return
|
||
|
||
const keysToRecover = endpoint.keys.filter(key =>
|
||
key.circuit_breaker_open ||
|
||
(key.health_score !== undefined && key.health_score < 1)
|
||
)
|
||
|
||
if (keysToRecover.length === 0) {
|
||
showSuccess('所有密钥已处于健康状态')
|
||
return
|
||
}
|
||
|
||
recoveringEndpointId.value = endpoint.id
|
||
let successCount = 0
|
||
let failCount = 0
|
||
|
||
try {
|
||
for (const key of keysToRecover) {
|
||
try {
|
||
await recoverKeyHealth(key.id)
|
||
successCount++
|
||
} catch {
|
||
failCount++
|
||
}
|
||
}
|
||
|
||
if (failCount === 0) {
|
||
showSuccess(`已恢复 ${successCount} 个密钥的健康状态`)
|
||
} else {
|
||
showSuccess(`恢复完成: ${successCount} 成功, ${failCount} 失败`)
|
||
}
|
||
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
} finally {
|
||
recoveringEndpointId.value = null
|
||
}
|
||
}
|
||
|
||
async function handleKeyChanged() {
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
}
|
||
|
||
// 切换端点启用状态
|
||
async function toggleEndpointActive(endpoint: ProviderEndpointWithKeys) {
|
||
if (togglingEndpointId.value) return
|
||
|
||
togglingEndpointId.value = endpoint.id
|
||
try {
|
||
const newStatus = !endpoint.is_active
|
||
await updateEndpoint(endpoint.id, { is_active: newStatus })
|
||
endpoint.is_active = newStatus
|
||
showSuccess(newStatus ? '端点已启用' : '端点已停用')
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '操作失败', '错误')
|
||
} finally {
|
||
togglingEndpointId.value = null
|
||
}
|
||
}
|
||
|
||
// 切换密钥启用状态
|
||
async function toggleKeyActive(key: EndpointAPIKey) {
|
||
if (togglingKeyId.value) return
|
||
|
||
togglingKeyId.value = key.id
|
||
try {
|
||
const newStatus = !key.is_active
|
||
await updateEndpointKey(key.id, { is_active: newStatus })
|
||
key.is_active = newStatus
|
||
showSuccess(newStatus ? '密钥已启用' : '密钥已停用')
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '操作失败', '错误')
|
||
} finally {
|
||
togglingKeyId.value = null
|
||
}
|
||
}
|
||
|
||
// ===== 模型事件处理 =====
|
||
// 处理编辑模型
|
||
function handleEditModel(model: Model) {
|
||
editingModel.value = model
|
||
modelFormDialogOpen.value = true
|
||
}
|
||
|
||
// 处理打开批量关联对话框
|
||
function handleBatchAssign() {
|
||
batchAssignDialogOpen.value = true
|
||
}
|
||
|
||
// 处理批量关联完成
|
||
async function handleBatchAssignChanged() {
|
||
await loadProvider()
|
||
emit('refresh')
|
||
}
|
||
|
||
// 处理模型保存完成
|
||
async function handleModelSaved() {
|
||
editingModel.value = null
|
||
await loadProvider()
|
||
emit('refresh')
|
||
}
|
||
|
||
// 处理删除模型 - 打开确认对话框
|
||
function handleDeleteModel(model: Model) {
|
||
modelToDelete.value = model
|
||
deleteModelConfirmOpen.value = true
|
||
}
|
||
|
||
// 确认删除模型
|
||
async function confirmDeleteModel() {
|
||
if (!provider.value || !modelToDelete.value) return
|
||
|
||
try {
|
||
await deleteModelAPI(provider.value.id, modelToDelete.value.id)
|
||
showSuccess('已移除该提供商对此模型的支持')
|
||
deleteModelConfirmOpen.value = false
|
||
modelToDelete.value = null
|
||
// 重新加载 Provider 数据以刷新模型列表
|
||
await loadProvider()
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '删除失败', '错误')
|
||
}
|
||
}
|
||
|
||
// ===== 拖动排序处理 =====
|
||
function handleDragStart(event: DragEvent, key: EndpointAPIKey, endpoint: ProviderEndpointWithKeys) {
|
||
dragState.value.isDragging = true
|
||
dragState.value.draggedKeyId = key.id
|
||
dragState.value.dragEndpointId = endpoint.id
|
||
if (event.dataTransfer) {
|
||
event.dataTransfer.effectAllowed = 'move'
|
||
}
|
||
}
|
||
|
||
function handleDragEnd() {
|
||
dragState.value.isDragging = false
|
||
dragState.value.draggedKeyId = null
|
||
dragState.value.targetKeyId = null
|
||
dragState.value.dragEndpointId = null
|
||
}
|
||
|
||
function handleDragOver(event: DragEvent, targetKey: EndpointAPIKey) {
|
||
event.preventDefault()
|
||
if (event.dataTransfer) {
|
||
event.dataTransfer.dropEffect = 'move'
|
||
}
|
||
if (dragState.value.draggedKeyId !== targetKey.id) {
|
||
dragState.value.targetKeyId = targetKey.id
|
||
}
|
||
}
|
||
|
||
function handleDragLeave() {
|
||
dragState.value.targetKeyId = null
|
||
}
|
||
|
||
async function handleDrop(event: DragEvent, targetKey: EndpointAPIKey, endpoint: ProviderEndpointWithKeys) {
|
||
event.preventDefault()
|
||
|
||
const draggedKeyId = dragState.value.draggedKeyId
|
||
if (!draggedKeyId || !endpoint.keys || draggedKeyId === targetKey.id) {
|
||
handleDragEnd()
|
||
return
|
||
}
|
||
|
||
// 只允许在同一端点内拖动
|
||
if (dragState.value.dragEndpointId !== endpoint.id) {
|
||
showError('不能跨端点拖动密钥')
|
||
handleDragEnd()
|
||
return
|
||
}
|
||
|
||
const keys = [...endpoint.keys]
|
||
const draggedIndex = keys.findIndex(k => k.id === draggedKeyId)
|
||
const targetIndex = keys.findIndex(k => k.id === targetKey.id)
|
||
|
||
if (draggedIndex === -1 || targetIndex === -1) {
|
||
handleDragEnd()
|
||
return
|
||
}
|
||
|
||
// 记录原始优先级分组（排除被拖动的密钥）
|
||
// key: 原始优先级值, value: 密钥ID数组
|
||
const originalGroups = new Map<number, string[]>()
|
||
for (const key of keys) {
|
||
if (key.id === draggedKeyId) continue // 被拖动的密钥离开原组
|
||
const priority = key.internal_priority ?? 0
|
||
if (!originalGroups.has(priority)) {
|
||
originalGroups.set(priority, [])
|
||
}
|
||
originalGroups.get(priority)!.push(key.id)
|
||
}
|
||
|
||
// 重排数组
|
||
const [removed] = keys.splice(draggedIndex, 1)
|
||
keys.splice(targetIndex, 0, removed)
|
||
endpoint.keys = keys
|
||
|
||
// 按新顺序为每个组分配新的优先级
|
||
// 同组的密钥保持相同的优先级
|
||
const priorities: { key_id: string; internal_priority: number }[] = []
|
||
const groupNewPriority = new Map<number, number>() // 原优先级 -> 新优先级
|
||
let currentPriority = 0
|
||
|
||
for (const key of keys) {
|
||
if (key.id === draggedKeyId) {
|
||
// 被拖动的密钥是独立的新组，获得当前优先级
|
||
priorities.push({ key_id: key.id, internal_priority: currentPriority })
|
||
currentPriority++
|
||
} else {
|
||
const originalPriority = key.internal_priority ?? 0
|
||
|
||
if (groupNewPriority.has(originalPriority)) {
|
||
// 这个组已经分配过优先级，使用相同的值
|
||
priorities.push({ key_id: key.id, internal_priority: groupNewPriority.get(originalPriority)! })
|
||
} else {
|
||
// 这个组第一次出现，分配新优先级
|
||
groupNewPriority.set(originalPriority, currentPriority)
|
||
priorities.push({ key_id: key.id, internal_priority: currentPriority })
|
||
currentPriority++
|
||
}
|
||
}
|
||
}
|
||
|
||
handleDragEnd()
|
||
|
||
// 调用 API 批量更新
|
||
try {
|
||
await batchUpdateKeyPriority(endpoint.id, priorities)
|
||
showSuccess('优先级已更新')
|
||
// 重新加载以获取更新后的数据
|
||
await loadEndpoints()
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '更新优先级失败', '错误')
|
||
// 回滚 - 重新加载
|
||
await loadEndpoints()
|
||
}
|
||
}
|
||
|
||
// ===== 点击编辑优先级 =====
|
||
function startEditPriority(key: EndpointAPIKey) {
|
||
editingPriorityKey.value = key.id
|
||
editingPriorityValue.value = key.internal_priority ?? 0
|
||
}
|
||
|
||
function cancelEditPriority() {
|
||
editingPriorityKey.value = null
|
||
}
|
||
|
||
async function savePriority(key: EndpointAPIKey, endpoint: ProviderEndpointWithKeys) {
|
||
const keyId = editingPriorityKey.value
|
||
const newPriority = editingPriorityValue.value
|
||
|
||
if (!keyId || newPriority < 0) {
|
||
cancelEditPriority()
|
||
return
|
||
}
|
||
|
||
// 如果优先级没有变化，直接取消编辑
|
||
if (key.internal_priority === newPriority) {
|
||
cancelEditPriority()
|
||
return
|
||
}
|
||
|
||
cancelEditPriority()
|
||
|
||
try {
|
||
await updateEndpointKey(keyId, { internal_priority: newPriority })
|
||
showSuccess('优先级已更新')
|
||
// 更新本地数据
|
||
if (endpoint.keys) {
|
||
const keyToUpdate = endpoint.keys.find(k => k.id === keyId)
|
||
if (keyToUpdate) {
|
||
keyToUpdate.internal_priority = newPriority
|
||
}
|
||
// 重新排序
|
||
endpoint.keys.sort((a, b) => (a.internal_priority ?? 0) - (b.internal_priority ?? 0))
|
||
}
|
||
emit('refresh')
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '更新优先级失败', '错误')
|
||
}
|
||
}
|
||
|
||
// 格式化探测时间
|
||
function formatProbeTime(probeTime: string): string {
|
||
if (!probeTime) return '-'
|
||
const now = new Date()
|
||
const probe = new Date(probeTime)
|
||
const diffMs = probe.getTime() - now.getTime()
|
||
|
||
if (diffMs < 0) return '待探测'
|
||
|
||
const diffMinutes = Math.floor(diffMs / 60000)
|
||
const diffHours = Math.floor(diffMinutes / 60)
|
||
const diffDays = Math.floor(diffHours / 24)
|
||
|
||
if (diffDays > 0) return `${diffDays}天后`
|
||
if (diffHours > 0) return `${diffHours}小时后`
|
||
if (diffMinutes > 0) return `${diffMinutes}分钟后`
|
||
return '即将探测'
|
||
}
|
||
|
||
// 健康度颜色
|
||
function getHealthScoreColor(score: number): string {
|
||
if (score >= 0.8) return 'text-green-600 dark:text-green-400'
|
||
if (score >= 0.5) return 'text-yellow-600 dark:text-yellow-400'
|
||
return 'text-red-600 dark:text-red-400'
|
||
}
|
||
|
||
function getHealthScoreBarColor(score: number): string {
|
||
if (score >= 0.8) return 'bg-green-500 dark:bg-green-400'
|
||
if (score >= 0.5) return 'bg-yellow-500 dark:bg-yellow-400'
|
||
return 'bg-red-500 dark:bg-red-400'
|
||
}
|
||
|
||
// 加载 Provider 信息
|
||
async function loadProvider() {
|
||
if (!props.providerId) return
|
||
|
||
try {
|
||
loading.value = true
|
||
provider.value = await getProvider(props.providerId)
|
||
|
||
if (!provider.value) {
|
||
throw new Error('Provider 不存在')
|
||
}
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || err.message || '加载失败', '错误')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载端点列表
|
||
async function loadEndpoints() {
|
||
if (!props.providerId) return
|
||
|
||
try {
|
||
const endpointsList = await getProviderEndpoints(props.providerId)
|
||
|
||
// 为每个端点加载其密钥
|
||
const endpointsWithKeys = await Promise.all(
|
||
endpointsList.map(async (endpoint) => {
|
||
try {
|
||
const keys = await getEndpointKeys(endpoint.id)
|
||
return { ...endpoint, keys }
|
||
} catch {
|
||
// 如果获取密钥失败，返回空数组
|
||
return { ...endpoint, keys: [] }
|
||
}
|
||
})
|
||
)
|
||
|
||
endpoints.value = endpointsWithKeys
|
||
} catch (err: any) {
|
||
showError(err.response?.data?.detail || '加载端点失败', '错误')
|
||
}
|
||
}
|
||
|
||
// 添加 ESC 键监听
|
||
useEscapeKey(() => {
|
||
if (props.open) {
|
||
handleClose()
|
||
}
|
||
}, {
|
||
disableOnInput: true,
|
||
once: false
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 抽屉过渡动画 */
|
||
.drawer-enter-active,
|
||
.drawer-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.drawer-enter-active .relative,
|
||
.drawer-leave-active .relative {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.drawer-enter-from,
|
||
.drawer-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
.drawer-enter-from .relative {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.drawer-leave-to .relative {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.drawer-enter-to .relative,
|
||
.drawer-leave-from .relative {
|
||
transform: translateX(0);
|
||
}
|
||
</style>
|