refactor(frontend): 统一 routing 数据加载,消除子组件重复请求

将 Model 和 Provider 详情抽屉中的 routing/mapping 数据加载逻辑
从各子组件(RoutingTab、ModelMappingsTab、ModelsTab、ModelMappingTab)
提升到父组件统一管理,通过 props 向下传递数据,避免多个子组件独立发起相同的 API 请求,提升页面加载性能。
This commit is contained in:
AAEE86
2026-02-10 23:47:47 +08:00
parent 347bd3345c
commit cabaa9f1df
6 changed files with 164 additions and 101 deletions
@@ -876,8 +876,11 @@
:key="`models-${provider.id}`"
:provider="provider"
:endpoints="endpoints"
:models="providerModels"
:mapping-preview="providerMappingPreview"
@edit-model="handleEditModel"
@batch-assign="handleBatchAssign"
@refresh="loadEndpoints"
/>
<!-- 模型映射 -->
@@ -887,6 +890,9 @@
:key="`mapping-${provider.id}`"
:provider="provider"
:provider-keys="providerKeys"
:models="providerModels"
:mapping-preview="providerMappingPreview"
:endpoints="endpoints"
@refresh="handleModelMappingChanged"
/>
</div>
@@ -1027,7 +1033,14 @@ import { useToast } from '@/composables/useToast'
import { useConfirm } from '@/composables/useConfirm'
import { useClipboard } from '@/composables/useClipboard'
import { useCountdownTimer, formatCountdown, getOAuthExpiresCountdown } from '@/composables/useCountdownTimer'
import { getProvider, getProviderEndpoints, updateProvider } from '@/api/endpoints'
import {
getProvider,
getProviderEndpoints,
updateProvider,
getProviderModels,
getProviderMappingPreview,
type ProviderMappingPreviewResponse
} from '@/api/endpoints'
import { adminApi } from '@/api/admin'
import {
KeyFormDialog,
@@ -1092,6 +1105,8 @@ const loading = ref(false)
const provider = ref<any>(null)
const endpoints = ref<ProviderEndpointWithKeys[]>([])
const providerKeys = ref<EndpointAPIKey[]>([]) // Provider 级别的 keys
const providerModels = ref<Model[]>([]) // Provider 级别的 models
const providerMappingPreview = ref<ProviderMappingPreviewResponse | null>(null) // 映射预览
// 系统级格式转换配置
const systemFormatConversionEnabled = ref(false)
@@ -2539,13 +2554,17 @@ async function loadEndpoints() {
if (!props.providerId) return
try {
// 并行加载端点列表和 Provider 级别的 keys
const [endpointsList, providerKeysResult] = await Promise.all([
// 并行加载端点列表、Provider 级别的 keys、models 和映射预览
const [endpointsList, providerKeysResult, modelsResult, mappingPreviewResult] = await Promise.all([
getProviderEndpoints(props.providerId),
getProviderKeys(props.providerId).catch(() => []),
getProviderModels(props.providerId).catch(() => []),
getProviderMappingPreview(props.providerId).catch(() => null),
])
providerKeys.value = providerKeysResult
providerModels.value = modelsResult
providerMappingPreview.value = mappingPreviewResult
// 按 API 格式排序
endpoints.value = endpointsList.sort((a, b) => {
const aIdx = API_FORMAT_ORDER.indexOf(a.api_format)