mirror of
https://github.com/fawney19/Aether.git
synced 2026-10-05 17:07:46 +08:00
1317 lines
53 KiB
Vue
1317 lines
53 KiB
Vue
<template>
|
||
<Card class="overflow-hidden">
|
||
<!-- 标题栏 -->
|
||
<div class="px-4 py-3 border-b border-border/60">
|
||
<div class="flex items-center justify-between gap-4">
|
||
<div class="flex items-baseline gap-2">
|
||
<h4 class="text-sm font-semibold">
|
||
链路预览
|
||
</h4>
|
||
<template v-if="routingData">
|
||
<span class="text-xs text-muted-foreground">·</span>
|
||
<span class="text-xs text-muted-foreground">
|
||
{{ getSchedulingModeLabel(routingData.scheduling_mode) }}
|
||
</span>
|
||
<span class="text-xs text-muted-foreground">·</span>
|
||
<span class="text-xs text-muted-foreground">
|
||
{{ getPriorityModeLabel(routingData.priority_mode) }}
|
||
</span>
|
||
</template>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8"
|
||
title="关联提供商"
|
||
@click="$emit('addProvider')"
|
||
>
|
||
<Link class="w-3.5 h-3.5" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-8 w-8"
|
||
title="刷新"
|
||
@click="loadRoutingData"
|
||
>
|
||
<RefreshCw
|
||
class="w-3.5 h-3.5"
|
||
:class="loading ? 'animate-spin' : ''"
|
||
/>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载状态 -->
|
||
<div
|
||
v-if="loading"
|
||
class="flex items-center justify-center py-12"
|
||
>
|
||
<Loader2 class="w-6 h-6 animate-spin text-primary" />
|
||
</div>
|
||
|
||
<template v-else-if="routingData">
|
||
<div class="p-4 space-y-4">
|
||
<!-- 空状态 -->
|
||
<div
|
||
v-if="apiFormatGroups.length === 0"
|
||
class="text-center py-8"
|
||
>
|
||
<Route class="w-10 h-10 mx-auto text-muted-foreground/30 mb-3" />
|
||
<p class="text-sm text-muted-foreground">
|
||
暂无关联提供商
|
||
</p>
|
||
<p class="text-xs text-muted-foreground mt-1">
|
||
请先为此模型添加提供商关联
|
||
</p>
|
||
</div>
|
||
|
||
<!-- API 格式分组 -->
|
||
<div
|
||
v-for="formatGroup in apiFormatGroups"
|
||
:key="formatGroup.api_format"
|
||
class="border border-border/60 rounded-lg overflow-hidden"
|
||
>
|
||
<!-- 格式标题栏 -->
|
||
<div
|
||
class="px-4 py-3 bg-muted/30 flex items-center justify-between cursor-pointer hover:bg-muted/50 transition-colors"
|
||
@click="toggleFormat(formatGroup.api_format)"
|
||
>
|
||
<div class="flex items-center gap-3">
|
||
<Badge
|
||
variant="secondary"
|
||
class="text-xs font-semibold px-2.5 py-1"
|
||
>
|
||
{{ formatApiFormat(formatGroup.api_format) }}
|
||
</Badge>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-sm text-muted-foreground">
|
||
{{ formatGroup.active_keys }}/{{ formatGroup.total_keys }} Keys
|
||
<span class="mx-1.5">·</span>
|
||
{{ formatGroup.active_providers }}/{{ formatGroup.total_providers }} 提供商
|
||
</span>
|
||
<ChevronDown
|
||
class="w-4 h-4 text-muted-foreground transition-transform"
|
||
:class="isFormatExpanded(formatGroup.api_format) ? 'rotate-180' : ''"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 展开的内容 -->
|
||
<Transition name="collapse">
|
||
<div v-if="isFormatExpanded(formatGroup.api_format)">
|
||
<!-- ========== 全局 Key 优先模式 ========== -->
|
||
<template v-if="isGlobalKeyMode">
|
||
<div class="py-2 pl-3">
|
||
<template
|
||
v-for="(keyGroup, groupIndex) in formatGroup.keyGroups"
|
||
:key="groupIndex"
|
||
>
|
||
<!-- 第一组且有多个 key 时显示调度行为标签 -->
|
||
<div
|
||
v-if="groupIndex === 0 && keyGroup.keys.length > 1"
|
||
class="ml-6 mr-3 mb-1 flex items-center gap-1 text-[10px] text-muted-foreground/60"
|
||
>
|
||
<span>{{ samePriorityLabel }}</span>
|
||
</div>
|
||
|
||
<!-- 该优先级组内的 Keys -->
|
||
<div
|
||
v-for="(keyEntry, keyIndex) in keyGroup.keys"
|
||
:key="keyEntry.key.id"
|
||
class="flex py-1"
|
||
>
|
||
<!-- 左侧：节点 + 连线 -->
|
||
<div class="w-6 flex flex-col items-center shrink-0">
|
||
<!-- 上半段连线 -->
|
||
<div
|
||
class="w-0.5 flex-1"
|
||
:class="groupIndex === 0 && keyIndex === 0 ? 'bg-transparent' : 'bg-border'"
|
||
/>
|
||
<!-- 节点圆点 -->
|
||
<div
|
||
class="w-3 h-3 rounded-full border-2 shrink-0"
|
||
:class="getGlobalKeyNodeClass(keyEntry, groupIndex, keyIndex)"
|
||
/>
|
||
<!-- 下半段连线 -->
|
||
<div
|
||
class="w-0.5 flex-1"
|
||
:class="isLastKeyInFormat(formatGroup, groupIndex, keyIndex) ? 'bg-transparent' : 'bg-border'"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Key 卡片 -->
|
||
<div
|
||
class="flex-1 mr-3"
|
||
:class="!keyEntry.key.is_active ? 'opacity-50' : ''"
|
||
>
|
||
<div
|
||
class="group rounded-lg transition-all px-3 py-2"
|
||
:class="getGlobalKeyCardClass(keyEntry, groupIndex, keyIndex)"
|
||
>
|
||
<div class="flex items-center gap-3">
|
||
<!-- 优先级标签 -->
|
||
<div
|
||
v-if="keyEntry.key.is_active"
|
||
class="px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0"
|
||
:class="groupIndex === 0 && keyIndex === 0
|
||
? 'bg-primary text-primary-foreground'
|
||
: 'bg-muted-foreground/20 text-muted-foreground'"
|
||
>
|
||
<span v-if="groupIndex === 0 && keyIndex === 0">首选</span>
|
||
<span v-else>P{{ keyGroup.priority ?? '?' }}</span>
|
||
</div>
|
||
|
||
<!-- Key 信息：两行 -->
|
||
<div class="min-w-0 flex-1">
|
||
<!-- 第一行：Key 名称 -->
|
||
<div
|
||
class="text-sm font-medium truncate"
|
||
:class="keyEntry.key.circuit_breaker_open ? 'text-destructive' : ''"
|
||
>
|
||
{{ keyEntry.key.name }}
|
||
</div>
|
||
<!-- 第二行：提供商名 · sk · 模型映射 -->
|
||
<div class="flex items-center gap-1 text-[10px] text-muted-foreground">
|
||
<span>{{ keyEntry.provider.name }}</span>
|
||
<span>·</span>
|
||
<code class="text-muted-foreground/60">{{ keyEntry.key.masked_key }}</code>
|
||
<!-- Key 白名单映射显示 -->
|
||
<template v-if="getKeyMatchedModels(keyEntry.key).length > 0">
|
||
<span>·</span>
|
||
<span
|
||
class="text-primary/70"
|
||
:title="getKeyMatchedModels(keyEntry.key).join(', ')"
|
||
>{{ formatMatchedModels(getKeyMatchedModels(keyEntry.key)) }}</span>
|
||
</template>
|
||
<!-- Provider 模型映射显示 -->
|
||
<template v-else-if="hasModelMapping(keyEntry.provider)">
|
||
<span>·</span>
|
||
<span class="text-primary/70">{{ keyEntry.provider.provider_model_name }}</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 熔断徽章 -->
|
||
<Badge
|
||
v-if="keyEntry.key.circuit_breaker_open"
|
||
variant="destructive"
|
||
class="text-[10px] px-1.5 py-0 shrink-0 tabular-nums"
|
||
>
|
||
熔断{{ getKeyProbeCountdown(keyEntry.key) }}
|
||
</Badge>
|
||
|
||
<!-- 健康度 -->
|
||
<div class="flex items-center gap-1 shrink-0">
|
||
<div class="w-10 h-1.5 bg-muted/80 rounded-full overflow-hidden">
|
||
<div
|
||
class="h-full transition-all duration-300"
|
||
:class="getHealthScoreBarColor(keyEntry.key.health_score)"
|
||
:style="{ width: `${(keyEntry.key.health_score || 0) * 100}%` }"
|
||
/>
|
||
</div>
|
||
<span
|
||
class="text-[10px] font-medium tabular-nums w-7 text-right"
|
||
:class="getHealthScoreTextColor(keyEntry.key.health_score)"
|
||
>
|
||
{{ ((keyEntry.key.health_score || 0) * 100).toFixed(0) }}%
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="flex items-center shrink-0">
|
||
<Button
|
||
v-if="keyEntry.key.circuit_breaker_open || (keyEntry.key.health_score ?? 1) < 0.5"
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-6 w-6 text-green-600"
|
||
title="刷新健康状态"
|
||
@click.stop="handleRecoverKey(keyEntry.key.id, keyEntry.endpoint?.api_format || formatGroup.api_format)"
|
||
>
|
||
<RefreshCw class="w-3 h-3" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-6 w-6"
|
||
:title="keyEntry.provider.model_is_active ? '停用此关联' : '启用此关联'"
|
||
@click.stop="$emit('toggleProviderStatus', keyEntry.provider)"
|
||
>
|
||
<Power class="w-3 h-3" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 降级标记 -->
|
||
<div
|
||
v-if="groupIndex < formatGroup.keyGroups.length - 1"
|
||
class="flex py-0.5"
|
||
>
|
||
<div class="w-6 flex justify-center shrink-0">
|
||
<div class="w-0.5 h-full bg-border" />
|
||
</div>
|
||
<div class="flex items-center gap-1 text-[10px] text-muted-foreground/50">
|
||
<ArrowDown class="w-3 h-3" />
|
||
<span>
|
||
{{ getDemoteLabel(formatGroup.keyGroups[groupIndex + 1].keys.length) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- ========== 提供商优先模式 ========== -->
|
||
<template v-else>
|
||
<div class="py-2 pl-3">
|
||
<div
|
||
v-for="(providerEntry, providerIndex) in formatGroup.providers"
|
||
:key="`${providerEntry.provider.id}-${providerEntry.endpoint?.id || providerIndex}`"
|
||
>
|
||
<!-- 提供商行 -->
|
||
<div class="flex py-1">
|
||
<!-- 左侧：节点 + 连线 -->
|
||
<div class="w-6 flex flex-col items-center shrink-0 self-stretch">
|
||
<!-- 上半段连线 -->
|
||
<div
|
||
class="w-0.5 h-5"
|
||
:class="providerIndex === 0 ? 'bg-transparent' : 'bg-border'"
|
||
/>
|
||
<!-- 节点圆点 -->
|
||
<div
|
||
class="w-3 h-3 rounded-full border-2 shrink-0"
|
||
:class="getFormatProviderNodeClass(providerEntry, providerIndex)"
|
||
/>
|
||
<!-- 下半段连线（延伸到底部） -->
|
||
<div
|
||
class="w-0.5 flex-1"
|
||
:class="providerIndex === formatGroup.providers.length - 1 ? 'bg-transparent' : 'bg-border'"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 提供商卡片 -->
|
||
<div
|
||
class="flex-1 mr-3"
|
||
:class="!providerEntry.provider.is_active || !providerEntry.provider.model_is_active ? 'opacity-50' : ''"
|
||
>
|
||
<div
|
||
class="group rounded-lg transition-all"
|
||
:class="getFormatProviderCardClass(providerEntry, providerIndex)"
|
||
>
|
||
<!-- 卡片头部 -->
|
||
<div
|
||
class="p-2.5 cursor-pointer"
|
||
@click="toggleProviderInFormat(formatGroup.api_format, providerEntry.provider.id, providerEntry.endpoint?.id)"
|
||
>
|
||
<div class="flex items-center gap-2">
|
||
<!-- 第一列：优先级标签（固定宽度，用于对齐） -->
|
||
<div
|
||
v-if="providerEntry.provider.is_active && providerEntry.provider.model_is_active"
|
||
class="min-w-8 px-1.5 py-0.5 rounded-full text-[10px] font-medium shrink-0 text-center"
|
||
:class="providerIndex === 0
|
||
? 'bg-primary text-primary-foreground'
|
||
: 'bg-muted-foreground/20 text-muted-foreground'"
|
||
>
|
||
<span v-if="providerIndex === 0">首选</span>
|
||
<span v-else>P{{ providerEntry.provider.provider_priority }}</span>
|
||
</div>
|
||
|
||
<!-- 第二列：状态指示灯 -->
|
||
<span
|
||
class="w-1.5 h-1.5 rounded-full shrink-0"
|
||
:class="getProviderStatusClass(providerEntry.provider)"
|
||
/>
|
||
|
||
<!-- 第三列：名称(第一行) + URL(第二行) -->
|
||
<div class="min-w-0 flex-1">
|
||
<!-- 第一行：提供商名称 + 模型映射 -->
|
||
<div class="flex items-center gap-1">
|
||
<span class="text-sm font-medium truncate">{{ providerEntry.provider.name }}</span>
|
||
<span
|
||
v-if="hasModelMapping(providerEntry.provider)"
|
||
class="text-[10px] text-muted-foreground shrink-0"
|
||
>
|
||
({{ providerEntry.provider.provider_model_name }})
|
||
</span>
|
||
</div>
|
||
<!-- 第二行：Endpoint URL -->
|
||
<div
|
||
v-if="providerEntry.endpoint"
|
||
class="text-[10px] text-muted-foreground truncate"
|
||
>
|
||
{{ providerEntry.endpoint.base_url }}{{ providerEntry.endpoint.custom_path || '' }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四列：操作区域 -->
|
||
<div class="flex items-center gap-1 shrink-0">
|
||
<!-- 计费标签 -->
|
||
<span
|
||
v-if="providerEntry.provider.billing_type"
|
||
class="text-[10px] text-muted-foreground mr-1"
|
||
>
|
||
{{ getBillingLabel(providerEntry.provider) }}
|
||
</span>
|
||
<!-- Keys 统计 -->
|
||
<span class="text-[10px] text-muted-foreground">
|
||
{{ providerEntry.active_keys }}/{{ providerEntry.keys.length }} Keys
|
||
</span>
|
||
<!-- 操作按钮 -->
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-6 w-6"
|
||
:title="providerEntry.provider.model_is_active ? '停用此关联' : '启用此关联'"
|
||
@click.stop="$emit('toggleProviderStatus', providerEntry.provider)"
|
||
>
|
||
<Power class="w-3 h-3" />
|
||
</Button>
|
||
<!-- 展开图标 -->
|
||
<ChevronDown
|
||
class="w-3.5 h-3.5 text-muted-foreground transition-transform"
|
||
:class="isProviderInFormatExpanded(formatGroup.api_format, providerEntry.provider.id, providerEntry.endpoint?.id) ? 'rotate-180' : ''"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 展开的 Keys 详情 -->
|
||
<Transition name="collapse">
|
||
<div
|
||
v-if="isProviderInFormatExpanded(formatGroup.api_format, providerEntry.provider.id, providerEntry.endpoint?.id)"
|
||
class="border-t border-border/30 p-2.5"
|
||
>
|
||
<!-- 模型映射显示 -->
|
||
<div
|
||
v-if="hasModelMapping(providerEntry.provider)"
|
||
class="flex items-center gap-1.5 text-[10px] text-muted-foreground mb-2 px-1"
|
||
>
|
||
<span class="text-muted-foreground/60">映射:</span>
|
||
<span class="text-primary/70 font-medium">{{ providerEntry.provider.provider_model_name }}</span>
|
||
</div>
|
||
<!-- Keys 列表 -->
|
||
<div
|
||
v-if="providerEntry.keys.length > 0"
|
||
class="relative"
|
||
>
|
||
<div
|
||
v-for="(group, groupIndex) in getKeyPriorityGroups(providerEntry.keys)"
|
||
:key="groupIndex"
|
||
>
|
||
<!-- 第一组且有多个 key 时显示调度行为标签 -->
|
||
<div
|
||
v-if="groupIndex === 0 && group.keys.length > 1"
|
||
class="flex items-center gap-1 text-[10px] text-muted-foreground/60 mb-0.5 ml-4"
|
||
>
|
||
<span>{{ samePriorityLabel }}</span>
|
||
</div>
|
||
|
||
<!-- 该优先级组内的 Keys -->
|
||
<div class="relative">
|
||
<!-- 垂直主干线 -->
|
||
<div
|
||
v-if="group.keys.length > 1"
|
||
class="absolute left-1 top-2 w-px bg-border"
|
||
:style="{ height: `calc(100% - 1rem)` }"
|
||
/>
|
||
|
||
<div
|
||
v-for="(key, keyIndex) in group.keys"
|
||
:key="key.id"
|
||
class="relative flex items-center gap-2"
|
||
>
|
||
<!-- 第一列：节点（与优先级标签对齐，min-w-8） -->
|
||
<div class="min-w-8 flex items-center justify-center shrink-0">
|
||
<div
|
||
class="w-2 h-2 rounded-full border-2 z-10"
|
||
:class="groupIndex === 0 && keyIndex === 0
|
||
? 'bg-primary border-primary'
|
||
: 'bg-background border-muted-foreground/40'"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 第二列：状态灯（与提供商状态灯对齐） -->
|
||
<span
|
||
class="w-1.5 h-1.5 rounded-full shrink-0"
|
||
:class="getKeyStatusClass(key)"
|
||
/>
|
||
|
||
<!-- 第三列：Key 信息 -->
|
||
<div
|
||
class="flex-1 min-w-0 flex items-center gap-1.5 px-2 py-1 my-0.5 rounded text-xs"
|
||
:class="[
|
||
groupIndex === 0 ? 'bg-primary/5' : 'bg-muted/30',
|
||
!key.is_active ? 'opacity-50' : ''
|
||
]"
|
||
:title="getKeyTooltip(key)"
|
||
>
|
||
<!-- 名称 + sk + 映射（垂直堆叠） -->
|
||
<div class="min-w-0 flex flex-col">
|
||
<span
|
||
class="font-medium truncate"
|
||
:class="key.circuit_breaker_open ? 'text-destructive' : ''"
|
||
>
|
||
{{ key.name }}
|
||
</span>
|
||
<div class="flex items-center gap-1">
|
||
<code class="font-mono text-[10px] text-muted-foreground/60">
|
||
{{ key.masked_key }}
|
||
</code>
|
||
<template v-if="getKeyMatchedModels(key).length > 0">
|
||
<span class="text-[10px] text-muted-foreground/40">·</span>
|
||
<span
|
||
class="text-[10px] text-primary/70"
|
||
:title="getKeyMatchedModels(key).join(', ')"
|
||
>{{ formatMatchedModels(getKeyMatchedModels(key)) }}</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<span class="flex-1" />
|
||
<!-- 熔断徽章（带倒计时）- 靠右 -->
|
||
<Badge
|
||
v-if="key.circuit_breaker_open"
|
||
variant="destructive"
|
||
class="text-[9px] px-1 py-0 h-4 shrink-0 tabular-nums"
|
||
>
|
||
熔断{{ getKeyProbeCountdown(key) }}
|
||
</Badge>
|
||
<!-- 健康度（进度条 + 百分比） -->
|
||
<div class="flex items-center gap-1 shrink-0">
|
||
<div class="w-8 h-1 bg-muted/80 rounded-full overflow-hidden">
|
||
<div
|
||
class="h-full transition-all duration-300"
|
||
:class="getHealthScoreBarColor(key.health_score)"
|
||
:style="{ width: `${(key.health_score || 0) * 100}%` }"
|
||
/>
|
||
</div>
|
||
<span
|
||
class="text-[10px] font-medium tabular-nums"
|
||
:class="getHealthScoreTextColor(key.health_score)"
|
||
>
|
||
{{ ((key.health_score || 0) * 100).toFixed(0) }}%
|
||
</span>
|
||
</div>
|
||
<!-- 刷新健康按钮 -->
|
||
<button
|
||
v-if="key.circuit_breaker_open || (key.health_score ?? 1) < 0.5"
|
||
class="p-0.5 rounded hover:bg-muted/50 text-green-600 shrink-0"
|
||
title="刷新健康状态"
|
||
@click.stop="handleRecoverKey(key.id, providerEntry.endpoint?.api_format || formatGroup.api_format)"
|
||
>
|
||
<RefreshCw class="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优先级组之间的降级标记 -->
|
||
<div
|
||
v-if="groupIndex < getKeyPriorityGroups(providerEntry.keys).length - 1"
|
||
class="flex items-center my-0.5 text-[10px] text-muted-foreground/50"
|
||
>
|
||
<!-- 箭头居中于节点列 -->
|
||
<div class="min-w-8 flex items-center justify-center shrink-0">
|
||
<ArrowDown class="w-3 h-3" />
|
||
</div>
|
||
<span>
|
||
{{ getDemoteLabel(getKeyPriorityGroups(providerEntry.keys)[groupIndex + 1].keys.length) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-else
|
||
class="text-[10px] text-muted-foreground"
|
||
>
|
||
暂无可用 Key
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 降级标记 -->
|
||
<div
|
||
v-if="providerIndex < formatGroup.providers.length - 1"
|
||
class="flex py-0.5"
|
||
>
|
||
<div class="w-6 flex justify-center shrink-0">
|
||
<div class="w-0.5 h-full bg-border" />
|
||
</div>
|
||
<div class="flex items-center gap-1 text-[10px] text-muted-foreground/50">
|
||
<ArrowDown class="w-3 h-3" />
|
||
<span>降级</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 错误状态 -->
|
||
<div
|
||
v-else-if="error"
|
||
class="p-8 text-center"
|
||
>
|
||
<AlertCircle class="w-12 h-12 mx-auto text-destructive/50 mb-3" />
|
||
<p class="text-sm text-destructive">
|
||
{{ error }}
|
||
</p>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
class="mt-4"
|
||
@click="loadRoutingData"
|
||
>
|
||
重试
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted } from 'vue'
|
||
import {
|
||
RefreshCw,
|
||
Loader2,
|
||
ArrowDown,
|
||
ChevronDown,
|
||
Route,
|
||
AlertCircle,
|
||
Power,
|
||
Link
|
||
} from 'lucide-vue-next'
|
||
import Card from '@/components/ui/card.vue'
|
||
import Badge from '@/components/ui/badge.vue'
|
||
import Button from '@/components/ui/button.vue'
|
||
import {
|
||
getGlobalModelRoutingPreview,
|
||
type ModelRoutingPreviewResponse,
|
||
type RoutingProviderInfo,
|
||
type RoutingKeyInfo,
|
||
type RoutingEndpointInfo
|
||
} from '@/api/global-models'
|
||
import { API_FORMAT_ORDER } from '@/api/endpoints/types'
|
||
import { formatApiFormat } from '@/api/endpoints/types/api-format'
|
||
import { recoverKeyHealth } from '@/api/endpoints/health'
|
||
import { parseApiError } from '@/utils/errorParser'
|
||
import { useToast } from '@/composables/useToast'
|
||
import { useCountdownTimer, getProbeCountdown } from '@/composables/useCountdownTimer'
|
||
import { MAX_MODEL_NAME_LENGTH, createLRURegexCache, getCompiledModelMappingRegex } from '@/features/models/utils/model-mapping-regex'
|
||
|
||
const props = defineProps<{
|
||
globalModelId: string
|
||
routingData?: ModelRoutingPreviewResponse | null
|
||
loading?: boolean
|
||
error?: string | null
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
editProvider: [provider: RoutingProviderInfo]
|
||
toggleProviderStatus: [provider: RoutingProviderInfo]
|
||
deleteProvider: [provider: RoutingProviderInfo]
|
||
addProvider: []
|
||
refresh: []
|
||
}>()
|
||
|
||
const { success: showSuccess, error: showError } = useToast()
|
||
const { tick: countdownTick, start: startCountdownTimer } = useCountdownTimer()
|
||
|
||
// 使用外部传入的数据或内部状态
|
||
const internalRoutingData = ref<ModelRoutingPreviewResponse | null>(null)
|
||
const internalLoading = ref(false)
|
||
const internalError = ref<string | null>(null)
|
||
|
||
// 计算属性：优先使用外部传入的数据
|
||
const routingData = computed(() => props.routingData ?? internalRoutingData.value)
|
||
const loading = computed(() => props.loading ?? internalLoading.value)
|
||
const error = computed(() => props.error ?? internalError.value)
|
||
|
||
const modelMappingRegexCache = createLRURegexCache(200)
|
||
const keyMatchedModelsCache = new Map<string, string[]>()
|
||
const compiledGlobalModelMappingRegexes = ref<RegExp[]>([])
|
||
|
||
// 是否为全局 Key 优先模式
|
||
const isGlobalKeyMode = computed(() => routingData.value?.priority_mode === 'global_key')
|
||
|
||
// ========== 数据结构定义 ==========
|
||
|
||
interface FormatProviderEntry {
|
||
provider: RoutingProviderInfo
|
||
endpoint: RoutingEndpointInfo | null
|
||
keys: RoutingKeyInfo[]
|
||
active_keys: number
|
||
is_cross_format: boolean
|
||
priority_api_format: string
|
||
}
|
||
|
||
// 全局 Key 模式下的 Key 条目（包含 Provider 信息）
|
||
interface GlobalKeyEntry {
|
||
key: RoutingKeyInfo
|
||
provider: RoutingProviderInfo
|
||
endpoint: RoutingEndpointInfo | null
|
||
is_cross_format: boolean
|
||
priority_api_format: string
|
||
}
|
||
|
||
// 全局 Key 模式下的优先级分组
|
||
interface GlobalKeyGroup {
|
||
priority: number | null
|
||
demote_cross_format: boolean
|
||
keys: GlobalKeyEntry[]
|
||
}
|
||
|
||
interface ApiFormatGroup {
|
||
api_format: string
|
||
// 提供商优先模式使用
|
||
providers: FormatProviderEntry[]
|
||
// 全局 Key 优先模式使用
|
||
keyGroups: GlobalKeyGroup[]
|
||
total_providers: number
|
||
active_providers: number
|
||
total_keys: number
|
||
active_keys: number
|
||
}
|
||
|
||
const STANDARD_ROUTING_API_FORMATS = [
|
||
'openai:chat',
|
||
'openai:responses',
|
||
'claude:messages',
|
||
'gemini:generate_content'
|
||
]
|
||
|
||
function normalizeLegacyOpenAIFormatAlias(apiFormat: string): string {
|
||
switch (apiFormat.trim().toLowerCase()) {
|
||
default:
|
||
return apiFormat.trim().toLowerCase()
|
||
}
|
||
}
|
||
|
||
function apiDataFormatId(apiFormat: string): string | null {
|
||
switch (normalizeLegacyOpenAIFormatAlias(apiFormat)) {
|
||
case 'claude:messages':
|
||
return 'claude'
|
||
case 'gemini:generate_content':
|
||
return 'gemini'
|
||
case 'openai:chat':
|
||
return 'openai_chat'
|
||
case 'openai:responses':
|
||
case 'openai:responses:compact':
|
||
return 'openai_responses'
|
||
default:
|
||
return null
|
||
}
|
||
}
|
||
|
||
function requestConversionKind(clientApiFormat: string, providerApiFormat: string): string | null {
|
||
const client = normalizeLegacyOpenAIFormatAlias(clientApiFormat)
|
||
const provider = normalizeLegacyOpenAIFormatAlias(providerApiFormat)
|
||
if (client === provider) return null
|
||
if (!STANDARD_ROUTING_API_FORMATS.includes(client) || !STANDARD_ROUTING_API_FORMATS.includes(provider)) {
|
||
return null
|
||
}
|
||
|
||
switch (provider) {
|
||
case 'openai:chat':
|
||
return 'to_openai_chat'
|
||
case 'openai:responses':
|
||
return 'to_openai_responses'
|
||
case 'claude:messages':
|
||
return 'to_claude'
|
||
case 'gemini:generate_content':
|
||
return 'to_gemini'
|
||
default:
|
||
return null
|
||
}
|
||
}
|
||
|
||
function requestConversionRequiresEnableFlag(clientApiFormat: string, providerApiFormat: string): boolean {
|
||
const clientDataFormat = apiDataFormatId(clientApiFormat)
|
||
const providerDataFormat = apiDataFormatId(providerApiFormat)
|
||
if (!clientDataFormat || !providerDataFormat) return true
|
||
return clientDataFormat !== providerDataFormat
|
||
}
|
||
|
||
function endpointFormatAcceptanceEnabled(endpoint: RoutingEndpointInfo): boolean {
|
||
return endpoint.format_acceptance_config?.enabled === true
|
||
}
|
||
|
||
function endpointFormatListContains(formats: string[] | null | undefined, apiFormat: string): boolean {
|
||
if (!Array.isArray(formats)) return false
|
||
return formats.some(value => value.trim().toLowerCase() === apiFormat.trim().toLowerCase())
|
||
}
|
||
|
||
function endpointAcceptsClientFormat(endpoint: RoutingEndpointInfo, clientApiFormat: string): boolean {
|
||
if (!endpointFormatAcceptanceEnabled(endpoint)) return false
|
||
|
||
const config = endpoint.format_acceptance_config
|
||
if (endpointFormatListContains(config?.reject_formats, clientApiFormat)) {
|
||
return false
|
||
}
|
||
if (config?.accept_formats) {
|
||
return endpointFormatListContains(config.accept_formats, clientApiFormat)
|
||
}
|
||
return true
|
||
}
|
||
|
||
function endpointSupportsClientFormat(
|
||
provider: RoutingProviderInfo,
|
||
endpoint: RoutingEndpointInfo,
|
||
clientApiFormat: string,
|
||
providerApiFormat: string
|
||
): boolean {
|
||
const clientFormat = clientApiFormat.trim().toLowerCase()
|
||
const providerFormat = providerApiFormat.trim().toLowerCase()
|
||
if (clientFormat === providerFormat) return true
|
||
if (!requestConversionKind(clientFormat, providerFormat)) return false
|
||
if (!requestConversionRequiresEnableFlag(clientFormat, providerFormat)) return true
|
||
return !!provider.enable_format_conversion || endpointAcceptsClientFormat(endpoint, clientFormat)
|
||
}
|
||
|
||
function targetFormatsForEndpoint(
|
||
provider: RoutingProviderInfo,
|
||
endpoint: RoutingEndpointInfo
|
||
): string[] {
|
||
const endpointFormat = normalizeLegacyOpenAIFormatAlias(endpoint.api_format)
|
||
const candidateFormats = Array.from(new Set([...STANDARD_ROUTING_API_FORMATS, endpointFormat]))
|
||
return candidateFormats.filter(format =>
|
||
endpointSupportsClientFormat(provider, endpoint, format, endpoint.api_format)
|
||
)
|
||
}
|
||
|
||
function keepPriorityOnConversion(provider: RoutingProviderInfo): boolean {
|
||
return !!(routingData.value?.keep_priority_on_conversion || provider.keep_priority_on_conversion)
|
||
}
|
||
|
||
function shouldDemoteCrossFormat(
|
||
targetApiFormat: string,
|
||
entryApiFormat: string,
|
||
provider: RoutingProviderInfo
|
||
): boolean {
|
||
return targetApiFormat !== entryApiFormat && !keepPriorityOnConversion(provider)
|
||
}
|
||
|
||
function resolvedGlobalKeyPriority(keyEntry: GlobalKeyEntry): number {
|
||
const priorityByFormat = keyEntry.key.global_priority_by_format
|
||
if (!priorityByFormat) return 999
|
||
const value = priorityByFormat[keyEntry.priority_api_format]
|
||
return typeof value === 'number' ? value : 999
|
||
}
|
||
|
||
// 按 API 格式分组的计算属性
|
||
const apiFormatGroups = computed<ApiFormatGroup[]>(() => {
|
||
if (!routingData.value) return []
|
||
|
||
const formatMap = new Map<string, {
|
||
providers: FormatProviderEntry[]
|
||
allKeys: GlobalKeyEntry[]
|
||
}>()
|
||
|
||
// 遍历所有提供商和它们的 endpoints
|
||
for (const provider of routingData.value.providers) {
|
||
for (const endpoint of provider.endpoints || []) {
|
||
for (const format of targetFormatsForEndpoint(provider, endpoint)) {
|
||
if (!formatMap.has(format)) {
|
||
formatMap.set(format, { providers: [], allKeys: [] })
|
||
}
|
||
|
||
const data = formatMap.get(format)
|
||
if (!data) continue
|
||
|
||
data.providers.push({
|
||
provider,
|
||
endpoint,
|
||
keys: endpoint.keys || [],
|
||
active_keys: endpoint.active_keys || 0,
|
||
is_cross_format: endpoint.api_format !== format,
|
||
priority_api_format: endpoint.api_format
|
||
})
|
||
|
||
for (const key of endpoint.keys || []) {
|
||
data.allKeys.push({
|
||
key,
|
||
provider,
|
||
endpoint,
|
||
is_cross_format: endpoint.api_format !== format,
|
||
priority_api_format: endpoint.api_format
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 转换为数组并计算统计
|
||
const groups: ApiFormatGroup[] = []
|
||
for (const [format, data] of formatMap) {
|
||
// Provider 排序（提供商优先模式）
|
||
const sortedProviders = [...data.providers].sort((a, b) => {
|
||
const aActive = a.provider.is_active && a.provider.model_is_active
|
||
const bActive = b.provider.is_active && b.provider.model_is_active
|
||
if (aActive !== bActive) return bActive ? 1 : -1
|
||
const aDemoted = shouldDemoteCrossFormat(format, a.priority_api_format, a.provider)
|
||
const bDemoted = shouldDemoteCrossFormat(format, b.priority_api_format, b.provider)
|
||
if (aDemoted !== bDemoted) return aDemoted ? 1 : -1
|
||
return a.provider.provider_priority - b.provider.provider_priority
|
||
})
|
||
|
||
// Key 按全局优先级分组排序（全局 Key 优先模式）
|
||
const keyGroupMap = new Map<string, GlobalKeyGroup>()
|
||
for (const keyEntry of data.allKeys) {
|
||
const priority = resolvedGlobalKeyPriority(keyEntry)
|
||
const demoteCrossFormat = shouldDemoteCrossFormat(format, keyEntry.priority_api_format, keyEntry.provider)
|
||
const groupKey = `${demoteCrossFormat ? 1 : 0}:${priority}`
|
||
if (!keyGroupMap.has(groupKey)) {
|
||
keyGroupMap.set(groupKey, {
|
||
priority: priority === 999 ? null : priority,
|
||
demote_cross_format: demoteCrossFormat,
|
||
keys: []
|
||
})
|
||
}
|
||
keyGroupMap.get(groupKey)?.keys.push(keyEntry)
|
||
}
|
||
|
||
// 转换为分组数组并排序
|
||
const keyGroups: GlobalKeyGroup[] = Array.from(keyGroupMap.values())
|
||
.sort((a, b) => {
|
||
if (a.demote_cross_format !== b.demote_cross_format) {
|
||
return a.demote_cross_format ? 1 : -1
|
||
}
|
||
return (a.priority ?? 999) - (b.priority ?? 999)
|
||
})
|
||
.map(group => ({
|
||
...group,
|
||
keys: group.keys.sort((a, b) => {
|
||
// 同优先级内按活跃状态和健康度排序
|
||
const aActive = a.key.is_active && a.provider.is_active && a.provider.model_is_active
|
||
const bActive = b.key.is_active && b.provider.is_active && b.provider.model_is_active
|
||
if (aActive !== bActive) return bActive ? 1 : -1
|
||
return b.key.health_score - a.key.health_score
|
||
})
|
||
}))
|
||
|
||
const activeProviders = sortedProviders.filter(
|
||
e => e.provider.is_active && e.provider.model_is_active && e.endpoint?.is_active && e.active_keys > 0
|
||
).length
|
||
const totalKeys = sortedProviders.reduce((sum, e) => sum + e.keys.length, 0)
|
||
const activeKeys = sortedProviders.reduce((sum, e) => sum + e.active_keys, 0)
|
||
|
||
groups.push({
|
||
api_format: format,
|
||
providers: sortedProviders,
|
||
keyGroups,
|
||
total_providers: sortedProviders.length,
|
||
active_providers: activeProviders,
|
||
total_keys: totalKeys,
|
||
active_keys: activeKeys
|
||
})
|
||
}
|
||
|
||
// 按 API 格式排序
|
||
groups.sort((a, b) => {
|
||
const aIndex = API_FORMAT_ORDER.indexOf(a.api_format)
|
||
const bIndex = API_FORMAT_ORDER.indexOf(b.api_format)
|
||
if (aIndex === -1 && bIndex === -1) return a.api_format.localeCompare(b.api_format)
|
||
if (aIndex === -1) return 1
|
||
if (bIndex === -1) return -1
|
||
return aIndex - bIndex
|
||
})
|
||
|
||
return groups
|
||
})
|
||
|
||
// ========== 展开状态管理 ==========
|
||
|
||
const expandedFormats = ref<Set<string>>(new Set())
|
||
|
||
function isFormatExpanded(format: string): boolean {
|
||
return expandedFormats.value.has(format)
|
||
}
|
||
|
||
function toggleFormat(format: string) {
|
||
if (expandedFormats.value.has(format)) {
|
||
expandedFormats.value.delete(format)
|
||
} else {
|
||
expandedFormats.value.add(format)
|
||
}
|
||
}
|
||
|
||
// 提供商模式：格式内提供商级别的展开状态
|
||
const expandedProvidersInFormat = ref<Set<string>>(new Set())
|
||
|
||
function isProviderInFormatExpanded(format: string, providerId: string, endpointId?: string): boolean {
|
||
const key = endpointId ? `${format}:${providerId}:${endpointId}` : `${format}:${providerId}`
|
||
return expandedProvidersInFormat.value.has(key)
|
||
}
|
||
|
||
function toggleProviderInFormat(format: string, providerId: string, endpointId?: string) {
|
||
const key = endpointId ? `${format}:${providerId}:${endpointId}` : `${format}:${providerId}`
|
||
if (expandedProvidersInFormat.value.has(key)) {
|
||
expandedProvidersInFormat.value.delete(key)
|
||
} else {
|
||
expandedProvidersInFormat.value.add(key)
|
||
}
|
||
}
|
||
|
||
// 加载数据（仅在没有外部数据时使用）
|
||
async function loadRoutingData() {
|
||
// 如果有外部传入的数据，通知父组件刷新
|
||
if (props.routingData !== undefined) {
|
||
emit('refresh')
|
||
return
|
||
}
|
||
|
||
if (!props.globalModelId) return
|
||
|
||
modelMappingRegexCache.clear()
|
||
keyMatchedModelsCache.clear()
|
||
compiledGlobalModelMappingRegexes.value = []
|
||
|
||
internalLoading.value = true
|
||
internalError.value = null
|
||
|
||
try {
|
||
const data = await getGlobalModelRoutingPreview(props.globalModelId)
|
||
|
||
const compiled: RegExp[] = []
|
||
for (const pattern of data.global_model_mappings || []) {
|
||
const regex = getCompiledModelMappingRegex(pattern, modelMappingRegexCache)
|
||
if (regex) compiled.push(regex)
|
||
}
|
||
|
||
internalRoutingData.value = data
|
||
compiledGlobalModelMappingRegexes.value = compiled
|
||
} catch (err: unknown) {
|
||
internalError.value = parseApiError(err, '加载失败')
|
||
} finally {
|
||
internalLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 监听外部 routingData 变化，更新编译后的正则
|
||
watch(() => props.routingData, (data) => {
|
||
if (data) {
|
||
modelMappingRegexCache.clear()
|
||
keyMatchedModelsCache.clear()
|
||
|
||
const compiled: RegExp[] = []
|
||
for (const pattern of data.global_model_mappings || []) {
|
||
const regex = getCompiledModelMappingRegex(pattern, modelMappingRegexCache)
|
||
if (regex) compiled.push(regex)
|
||
}
|
||
compiledGlobalModelMappingRegexes.value = compiled
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// 获取调度模式标签
|
||
function getSchedulingModeLabel(mode: string): string {
|
||
const labels: Record<string, string> = {
|
||
cache_affinity: '缓存亲和',
|
||
fixed_order: '固定顺序',
|
||
load_balance: '负载均衡'
|
||
}
|
||
return labels[mode] || mode
|
||
}
|
||
|
||
// 当前调度模式的显示标签（复用 getSchedulingModeLabel，computed 缓存避免重复计算）
|
||
const samePriorityLabel = computed(() =>
|
||
getSchedulingModeLabel(routingData.value?.scheduling_mode || 'cache_affinity')
|
||
)
|
||
|
||
// 获取降级标签（含同优先级调度行为）
|
||
function getDemoteLabel(nextGroupKeyCount: number): string {
|
||
if (nextGroupKeyCount > 1) {
|
||
return `降级 · ${samePriorityLabel.value}`
|
||
}
|
||
return '降级'
|
||
}
|
||
|
||
// 获取优先级模式标签
|
||
function getPriorityModeLabel(mode: string): string {
|
||
const labels: Record<string, string> = {
|
||
provider: '提供商优先',
|
||
global_key: '全局 Key 优先'
|
||
}
|
||
return labels[mode] || mode
|
||
}
|
||
|
||
// 判断是否存在模型映射（始终显示 provider_model_name）
|
||
function hasModelMapping(provider: RoutingProviderInfo): boolean {
|
||
return !!provider.provider_model_name
|
||
}
|
||
|
||
// 获取 Key 的 allowed_models 中匹配当前 GlobalModel 的所有模型名
|
||
// 逻辑：用 GlobalModel 的 model_mappings（正则模式）去匹配 Key 的 allowed_models 中的值
|
||
function getKeyMatchedModels(key: RoutingKeyInfo): string[] {
|
||
const cached = keyMatchedModelsCache.get(key.id)
|
||
if (cached !== undefined) {
|
||
return cached
|
||
}
|
||
|
||
if (!key.allowed_models || key.allowed_models.length === 0) {
|
||
keyMatchedModelsCache.set(key.id, [])
|
||
return []
|
||
}
|
||
const globalModelName = routingData.value?.global_model_name
|
||
if (!globalModelName) {
|
||
keyMatchedModelsCache.set(key.id, [])
|
||
return []
|
||
}
|
||
|
||
const patterns = compiledGlobalModelMappingRegexes.value
|
||
if (patterns.length === 0) {
|
||
keyMatchedModelsCache.set(key.id, [])
|
||
return []
|
||
}
|
||
|
||
const matched: string[] = []
|
||
// 遍历 Key 的白名单
|
||
for (const allowedModel of key.allowed_models) {
|
||
// 如果完全匹配 GlobalModel 名称，跳过（不需要显示）
|
||
if (allowedModel === globalModelName) {
|
||
continue
|
||
}
|
||
if (allowedModel.length > MAX_MODEL_NAME_LENGTH) continue
|
||
|
||
// 用 GlobalModel 的映射模式匹配白名单中的模型名
|
||
for (const regex of patterns) {
|
||
if (regex.test(allowedModel)) {
|
||
matched.push(allowedModel)
|
||
break // 该 allowedModel 已匹配，不需要继续检查其他 pattern
|
||
}
|
||
}
|
||
}
|
||
keyMatchedModelsCache.set(key.id, matched)
|
||
return matched
|
||
}
|
||
|
||
// 格式化匹配的模型显示文本
|
||
function formatMatchedModels(models: string[]): string {
|
||
if (models.length === 0) return ''
|
||
if (models.length === 1) return models[0]
|
||
return `${models[0]} +${models.length - 1}`
|
||
}
|
||
|
||
// 按优先级分组 Keys（提供商优先模式下使用）
|
||
interface KeyPriorityGroup {
|
||
priority: number | null
|
||
keys: RoutingKeyInfo[]
|
||
}
|
||
|
||
function getKeyPriorityGroups(keys: RoutingKeyInfo[]): KeyPriorityGroup[] {
|
||
const groups = new Map<number, KeyPriorityGroup>()
|
||
|
||
for (const key of keys) {
|
||
// 提供商优先模式：按 internal_priority 分组
|
||
const priority = key.internal_priority ?? 999
|
||
|
||
if (!groups.has(priority)) {
|
||
groups.set(priority, {
|
||
priority: priority === 999 ? null : priority,
|
||
keys: []
|
||
})
|
||
}
|
||
groups.get(priority)?.keys.push(key)
|
||
}
|
||
|
||
return Array.from(groups.values()).sort((a, b) => {
|
||
const pa = a.priority ?? 999
|
||
const pb = b.priority ?? 999
|
||
return pa - pb
|
||
})
|
||
}
|
||
|
||
// 获取提供商状态样式
|
||
function getProviderStatusClass(provider: RoutingProviderInfo): string {
|
||
if (!provider.is_active) {
|
||
return 'bg-gray-400'
|
||
}
|
||
if (!provider.model_is_active) {
|
||
return 'bg-yellow-500'
|
||
}
|
||
return 'bg-green-500'
|
||
}
|
||
|
||
// 获取格式分组中提供商节点圆点样式（提供商优先模式）
|
||
function getFormatProviderNodeClass(entry: FormatProviderEntry, index: number): string {
|
||
if (!entry.provider.is_active || !entry.provider.model_is_active) {
|
||
return 'bg-muted border-muted-foreground/30'
|
||
}
|
||
if (index === 0) {
|
||
return 'bg-primary border-primary'
|
||
}
|
||
return 'bg-background border-border'
|
||
}
|
||
|
||
// 获取格式分组中提供商卡片样式（提供商优先模式）
|
||
function getFormatProviderCardClass(entry: FormatProviderEntry, index: number): string {
|
||
if (!entry.provider.is_active || !entry.provider.model_is_active) {
|
||
return 'bg-muted/30 border border-border/40'
|
||
}
|
||
if (index === 0) {
|
||
return 'bg-primary/5 border border-primary/30 shadow-sm'
|
||
}
|
||
return 'bg-muted/20 border border-border/50 hover:border-border'
|
||
}
|
||
|
||
// 获取全局 Key 节点圆点样式（全局 Key 优先模式）
|
||
function getGlobalKeyNodeClass(entry: GlobalKeyEntry, groupIndex: number, keyIndex: number): string {
|
||
if (!entry.key.is_active || !entry.provider.is_active || !entry.provider.model_is_active) {
|
||
return 'bg-muted border-muted-foreground/30'
|
||
}
|
||
if (groupIndex === 0 && keyIndex === 0) {
|
||
return 'bg-primary border-primary'
|
||
}
|
||
return 'bg-background border-border'
|
||
}
|
||
|
||
// 判断是否为格式组中的最后一个 Key
|
||
function isLastKeyInFormat(formatGroup: ApiFormatGroup, groupIndex: number, keyIndex: number): boolean {
|
||
const isLastGroup = groupIndex === formatGroup.keyGroups.length - 1
|
||
const isLastKeyInGroup = keyIndex === formatGroup.keyGroups[groupIndex].keys.length - 1
|
||
return isLastGroup && isLastKeyInGroup
|
||
}
|
||
|
||
// 获取全局 Key 卡片样式（全局 Key 优先模式）
|
||
function getGlobalKeyCardClass(entry: GlobalKeyEntry, groupIndex: number, keyIndex: number): string {
|
||
if (!entry.key.is_active || !entry.provider.is_active || !entry.provider.model_is_active) {
|
||
return 'bg-muted/30 border border-border/40'
|
||
}
|
||
if (groupIndex === 0 && keyIndex === 0) {
|
||
return 'bg-primary/5 border border-primary/30 shadow-sm'
|
||
}
|
||
return 'bg-muted/20 border border-border/50 hover:border-border'
|
||
}
|
||
|
||
// 健康度进度条颜色（score 为 0-1 小数格式）
|
||
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'
|
||
}
|
||
|
||
// 健康度文字颜色（score 为 0-1 小数格式）
|
||
function getHealthScoreTextColor(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 getBillingLabel(provider: RoutingProviderInfo): string {
|
||
if (provider.billing_type === 'monthly_quota') {
|
||
const used = provider.monthly_used_usd || 0
|
||
const quota = provider.monthly_quota_usd
|
||
return quota ? `$${used.toFixed(0)}/$${quota.toFixed(0)}` : '月卡'
|
||
}
|
||
if (provider.billing_type === 'pay_as_you_go') {
|
||
return '按量'
|
||
}
|
||
return '免费'
|
||
}
|
||
|
||
// 获取 Key 状态样式（score 为 0-1 小数格式）
|
||
function getKeyStatusClass(key: RoutingKeyInfo): string {
|
||
if (!key.is_active) {
|
||
return 'bg-gray-400'
|
||
}
|
||
if (key.circuit_breaker_open) {
|
||
return 'bg-red-500'
|
||
}
|
||
const score = key.health_score ?? 1
|
||
if (score < 0.5) {
|
||
return 'bg-red-500'
|
||
}
|
||
if (score < 0.8) {
|
||
return 'bg-yellow-500'
|
||
}
|
||
return 'bg-green-500'
|
||
}
|
||
|
||
// 获取 Key 提示信息
|
||
function getKeyTooltip(key: RoutingKeyInfo): string {
|
||
const parts: string[] = []
|
||
parts.push(`名称: ${key.name}`)
|
||
parts.push(`健康度: ${((key.health_score || 0) * 100).toFixed(0)}%`)
|
||
if (!key.is_active) {
|
||
parts.push('状态: 禁用')
|
||
} else if (key.circuit_breaker_open) {
|
||
parts.push(`熔断中: ${key.circuit_breaker_formats.join(', ')}`)
|
||
}
|
||
return parts.join('\n')
|
||
}
|
||
|
||
// 获取 Key 探测倒计时（用于 RoutingKeyInfo）
|
||
function getKeyProbeCountdown(key: RoutingKeyInfo): string {
|
||
if (!key.circuit_breaker_open) return ''
|
||
const countdown = getProbeCountdown(key.next_probe_at, countdownTick.value)
|
||
return countdown ? ` · ${countdown}` : ''
|
||
}
|
||
|
||
// 恢复 Key 健康状态（仅恢复指定 API 格式）
|
||
async function handleRecoverKey(keyId: string, apiFormat: string) {
|
||
try {
|
||
const result = await recoverKeyHealth(keyId, apiFormat)
|
||
// 通知父组件刷新数据
|
||
emit('refresh')
|
||
showSuccess(result.message || 'Key 已恢复')
|
||
} catch (err: unknown) {
|
||
showError(parseApiError(err, 'Key 恢复失败'), '错误')
|
||
}
|
||
}
|
||
|
||
// 监听 globalModelId 变化
|
||
watch(() => props.globalModelId, () => {
|
||
expandedFormats.value.clear()
|
||
expandedProvidersInFormat.value.clear()
|
||
// 如果没有外部数据，才自己加载
|
||
if (props.routingData === undefined) {
|
||
loadRoutingData()
|
||
}
|
||
}, { immediate: false })
|
||
|
||
onMounted(() => {
|
||
// 如果没有外部数据，才自己加载
|
||
if (props.routingData === undefined) {
|
||
loadRoutingData()
|
||
}
|
||
startCountdownTimer()
|
||
})
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
loadRoutingData
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.collapse-enter-active,
|
||
.collapse-leave-active {
|
||
transition: all 0.2s ease;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.collapse-enter-from,
|
||
.collapse-leave-to {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
}
|
||
|
||
.collapse-enter-to,
|
||
.collapse-leave-from {
|
||
opacity: 1;
|
||
max-height: 500px;
|
||
}
|
||
</style>
|