feat: implement upstream model import and batch model assignment with UI components

frontend/src/features/providers/components/BatchAssignModelsDialog.vue

@@ -31,29 +31,46 @@
 
         <!-- 左右对比布局 -->
         <div class="flex gap-2 items-stretch">
-          <!-- 左侧：可添加的模型 -->
+          <!-- 左侧：可添加的模型（分组折叠） -->
           <div class="flex-1 space-y-2">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <p class="text-sm font-medium">
-                  可添加
-                </p>
-                <Button
-                  v-if="availableModels.length > 0"
-                  variant="ghost"
-                  size="sm"
-                  class="h-6 px-2 text-xs"
-                  @click="toggleSelectAllLeft"
-                >
-                  {{ isAllLeftSelected ? '取消全选' : '全选' }}
-                </Button>
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-sm font-medium shrink-0">
+                可添加
+              </p>
+              <div class="flex-1 relative">
+                <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+                <Input
+                  v-model="searchQuery"
+                  placeholder="搜索模型..."
+                  class="pl-7 h-7 text-xs"
+                />
               </div>
-              <Badge
-                variant="secondary"
-                class="text-xs"
+              <button
+                v-if="upstreamModelsLoaded"
+                type="button"
+                class="p-1.5 hover:bg-muted rounded-md transition-colors shrink-0"
+                title="刷新上游模型"
+                :disabled="fetchingUpstreamModels"
+                @click="fetchUpstreamModels(true)"
               >
-                {{ availableModels.length }} 个
-              </Badge>
+                <RefreshCw
+                  class="w-3.5 h-3.5"
+                  :class="{ 'animate-spin': fetchingUpstreamModels }"
+                />
+              </button>
+              <button
+                v-else-if="!fetchingUpstreamModels"
+                type="button"
+                class="p-1.5 hover:bg-muted rounded-md transition-colors shrink-0"
+                title="从提供商获取模型"
+                @click="fetchUpstreamModels"
+              >
+                <Zap class="w-3.5 h-3.5" />
+              </button>
+              <Loader2
+                v-else
+                class="w-3.5 h-3.5 animate-spin text-muted-foreground shrink-0"
+              />
             </div>
             <div class="border rounded-lg h-80 overflow-y-auto">
               <div
@@ -63,7 +80,7 @@
                 <Loader2 class="w-6 h-6 animate-spin text-primary" />
               </div>
               <div
-                v-else-if="availableModels.length === 0"
+                v-else-if="totalAvailableCount === 0 && !upstreamModelsLoaded"
                 class="flex flex-col items-center justify-center h-full text-muted-foreground"
               >
                 <Layers class="w-10 h-10 mb-2 opacity-30" />
@@ -73,37 +90,142 @@
               </div>
               <div
                 v-else
-                class="p-2 space-y-1"
+                class="p-2 space-y-2"
               >
+                <!-- 全局模型折叠组 -->
                 <div
-                  v-for="model in availableModels"
-                  :key="model.id"
-                  class="flex items-center gap-2 p-2 rounded-lg border transition-colors"
-                  :class="selectedLeftIds.includes(model.id)
-                    ? 'border-primary bg-primary/10'
-                    : 'hover:bg-muted/50 cursor-pointer'"
-                  @click="toggleLeftSelection(model.id)"
+                  v-if="availableGlobalModels.length > 0 || !upstreamModelsLoaded"
+                  class="border rounded-lg overflow-hidden"
                 >
-                  <Checkbox
-                    :checked="selectedLeftIds.includes(model.id)"
-                    @update:checked="toggleLeftSelection(model.id)"
-                    @click.stop
-                  />
-                  <div class="flex-1 min-w-0">
-                    <p class="font-medium text-sm truncate">
-                      {{ model.display_name }}
-                    </p>
-                    <p class="text-xs text-muted-foreground truncate font-mono">
-                      {{ model.name }}
-                    </p>
+                  <div class="flex items-center gap-2 px-3 py-2 bg-muted/30">
+                    <button
+                      type="button"
+                      class="flex items-center gap-2 flex-1 hover:bg-muted/50 -mx-1 px-1 rounded transition-colors"
+                      @click="toggleGroupCollapse('global')"
+                    >
+                      <ChevronDown
+                        class="w-4 h-4 transition-transform shrink-0"
+                        :class="collapsedGroups.has('global') ? '-rotate-90' : ''"
+                      />
+                      <span class="text-xs font-medium">
+                        全局模型
+                      </span>
+                      <span class="text-xs text-muted-foreground">
+                        ({{ availableGlobalModels.length }})
+                      </span>
+                    </button>
+                    <button
+                      v-if="availableGlobalModels.length > 0"
+                      type="button"
+                      class="text-xs text-primary hover:underline shrink-0"
+                      @click.stop="selectAllGlobalModels"
+                    >
+                      {{ isAllGlobalModelsSelected ? '取消' : '全选' }}
+                    </button>
                   </div>
-                  <Badge
-                    :variant="model.is_active ? 'outline' : 'secondary'"
-                    :class="model.is_active ? 'text-green-600 border-green-500/60' : ''"
-                    class="text-xs shrink-0"
+                  <div
+                    v-show="!collapsedGroups.has('global')"
+                    class="p-2 space-y-1 border-t"
                   >
-                    {{ model.is_active ? '活跃' : '停用' }}
-                  </Badge>
+                    <div
+                      v-if="availableGlobalModels.length === 0"
+                      class="py-4 text-center text-xs text-muted-foreground"
+                    >
+                      所有全局模型均已关联
+                    </div>
+                    <div
+                      v-for="model in availableGlobalModels"
+                      v-else
+                      :key="model.id"
+                      class="flex items-center gap-2 p-2 rounded-lg border transition-colors cursor-pointer"
+                      :class="selectedGlobalModelIds.includes(model.id)
+                        ? 'border-primary bg-primary/10'
+                        : 'hover:bg-muted/50'"
+                      @click="toggleGlobalModelSelection(model.id)"
+                    >
+                      <Checkbox
+                        :checked="selectedGlobalModelIds.includes(model.id)"
+                        @update:checked="toggleGlobalModelSelection(model.id)"
+                        @click.stop
+                      />
+                      <div class="flex-1 min-w-0">
+                        <p class="font-medium text-sm truncate">
+                          {{ model.display_name }}
+                        </p>
+                        <p class="text-xs text-muted-foreground truncate font-mono">
+                          {{ model.name }}
+                        </p>
+                      </div>
+                      <Badge
+                        :variant="model.is_active ? 'outline' : 'secondary'"
+                        :class="model.is_active ? 'text-green-600 border-green-500/60' : ''"
+                        class="text-xs shrink-0"
+                      >
+                        {{ model.is_active ? '活跃' : '停用' }}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 从提供商获取的模型折叠组 -->
+                <div
+                  v-for="group in upstreamModelGroups"
+                  :key="group.api_format"
+                  class="border rounded-lg overflow-hidden"
+                >
+                  <div class="flex items-center gap-2 px-3 py-2 bg-muted/30">
+                    <button
+                      type="button"
+                      class="flex items-center gap-2 flex-1 hover:bg-muted/50 -mx-1 px-1 rounded transition-colors"
+                      @click="toggleGroupCollapse(group.api_format)"
+                    >
+                      <ChevronDown
+                        class="w-4 h-4 transition-transform shrink-0"
+                        :class="collapsedGroups.has(group.api_format) ? '-rotate-90' : ''"
+                      />
+                      <span class="text-xs font-medium">
+                        {{ API_FORMAT_LABELS[group.api_format] || group.api_format }}
+                      </span>
+                      <span class="text-xs text-muted-foreground">
+                        ({{ group.models.length }})
+                      </span>
+                    </button>
+                    <button
+                      type="button"
+                      class="text-xs text-primary hover:underline shrink-0"
+                      @click.stop="selectAllUpstreamModels(group.api_format)"
+                    >
+                      {{ isUpstreamGroupAllSelected(group.api_format) ? '取消' : '全选' }}
+                    </button>
+                  </div>
+                  <div
+                    v-show="!collapsedGroups.has(group.api_format)"
+                    class="p-2 space-y-1 border-t"
+                  >
+                    <div
+                      v-for="model in group.models"
+                      :key="model.id"
+                      class="flex items-center gap-2 p-2 rounded-lg border transition-colors cursor-pointer"
+                      :class="selectedUpstreamModelIds.includes(model.id)
+                        ? 'border-primary bg-primary/10'
+                        : 'hover:bg-muted/50'"
+                      @click="toggleUpstreamModelSelection(model.id)"
+                    >
+                      <Checkbox
+                        :checked="selectedUpstreamModelIds.includes(model.id)"
+                        @update:checked="toggleUpstreamModelSelection(model.id)"
+                        @click.stop
+                      />
+                      <div class="flex-1 min-w-0">
+                        <p class="font-medium text-sm truncate">
+                          {{ model.id }}
+                        </p>
+                        <p class="text-xs text-muted-foreground truncate font-mono">
+                          {{ model.owned_by || model.id }}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -115,8 +237,8 @@
               variant="outline"
               size="sm"
               class="w-9 h-8"
-              :class="selectedLeftIds.length > 0 && !submittingAdd ? 'border-primary' : ''"
-              :disabled="selectedLeftIds.length === 0 || submittingAdd"
+              :class="totalSelectedCount > 0 && !submittingAdd ? 'border-primary' : ''"
+              :disabled="totalSelectedCount === 0 || submittingAdd"
               title="添加选中"
               @click="batchAddSelected"
             >
@@ -127,7 +249,7 @@
               <ChevronRight
                 v-else
                 class="w-6 h-6 stroke-[3]"
-                :class="selectedLeftIds.length > 0 && !submittingAdd ? 'text-primary' : ''"
+                :class="totalSelectedCount > 0 && !submittingAdd ? 'text-primary' : ''"
               />
             </Button>
             <Button
@@ -154,26 +276,18 @@
           <!-- 右侧：已添加的模型 -->
           <div class="flex-1 space-y-2">
             <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <p class="text-sm font-medium">
-                  已添加
-                </p>
-                <Button
-                  v-if="existingModels.length > 0"
-                  variant="ghost"
-                  size="sm"
-                  class="h-6 px-2 text-xs"
-                  @click="toggleSelectAllRight"
-                >
-                  {{ isAllRightSelected ? '取消全选' : '全选' }}
-                </Button>
-              </div>
-              <Badge
-                variant="secondary"
-                class="text-xs"
+              <p class="text-sm font-medium">
+                已添加
+              </p>
+              <Button
+                v-if="existingModels.length > 0"
+                variant="ghost"
+                size="sm"
+                class="h-6 px-2 text-xs"
+                @click="toggleSelectAllRight"
               >
-                {{ existingModels.length }} 个
-              </Badge>
+                {{ isAllRightSelected ? '取消' : '全选' }}
+              </Button>
             </div>
             <div class="border rounded-lg h-80 overflow-y-auto">
               <div
@@ -238,11 +352,12 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { Layers, Loader2, ChevronRight, ChevronLeft } from 'lucide-vue-next'
+import { Layers, Loader2, ChevronRight, ChevronLeft, ChevronDown, Zap, RefreshCw, Search } from 'lucide-vue-next'
 import Dialog from '@/components/ui/dialog/Dialog.vue'
 import Button from '@/components/ui/button.vue'
 import Badge from '@/components/ui/badge.vue'
 import Checkbox from '@/components/ui/checkbox.vue'
+import Input from '@/components/ui/input.vue'
 import { useToast } from '@/composables/useToast'
 import { parseApiError } from '@/utils/errorParser'
 import {
@@ -253,8 +368,13 @@ import {
   getProviderModels,
   batchAssignModelsToProvider,
   deleteModel,
+  importModelsFromUpstream,
+  API_FORMAT_LABELS,
   type Model
 } from '@/api/endpoints'
+import { useUpstreamModelsCache, type UpstreamModel } from '../composables/useUpstreamModelsCache'
+
+const { fetchModels: fetchCachedModels, clearCache, getCachedModels } = useUpstreamModelsCache()
 
 const props = defineProps<{
   open: boolean
@@ -274,17 +394,27 @@ const { error: showError, success } = useToast()
 const loadingGlobalModels = ref(false)
 const submittingAdd = ref(false)
 const submittingRemove = ref(false)
+const fetchingUpstreamModels = ref(false)
+const upstreamModelsLoaded = ref(false)
 
 // 数据
 const allGlobalModels = ref<GlobalModelResponse[]>([])
 const existingModels = ref<Model[]>([])
+const upstreamModels = ref<UpstreamModel[]>([])
 
 // 选择状态
-const selectedLeftIds = ref<string[]>([])
+const selectedGlobalModelIds = ref<string[]>([])
+const selectedUpstreamModelIds = ref<string[]>([])
 const selectedRightIds = ref<string[]>([])
 
-// 计算可添加的模型（排除已关联的）
-const availableModels = computed(() => {
+// 折叠状态
+const collapsedGroups = ref<Set<string>>(new Set())
+
+// 搜索状态
+const searchQuery = ref('')
+
+// 计算可添加的全局模型（排除已关联的）
+const availableGlobalModelsBase = computed(() => {
   const existingGlobalModelIds = new Set(
     existingModels.value
       .filter(m => m.global_model_id)
@@ -293,31 +423,123 @@ const availableModels = computed(() => {
   return allGlobalModels.value.filter(m => !existingGlobalModelIds.has(m.id))
 })
 
-// 全选状态
-const isAllLeftSelected = computed(() =>
-  availableModels.value.length > 0 &&
-  selectedLeftIds.value.length === availableModels.value.length
-)
+// 搜索过滤后的全局模型
+const availableGlobalModels = computed(() => {
+  if (!searchQuery.value.trim()) return availableGlobalModelsBase.value
+  const query = searchQuery.value.toLowerCase()
+  return availableGlobalModelsBase.value.filter(m =>
+    m.name.toLowerCase().includes(query) ||
+    m.display_name.toLowerCase().includes(query)
+  )
+})
 
+// 计算可添加的上游模型（排除已关联的）
+const availableUpstreamModelsBase = computed(() => {
+  const existingModelNames = new Set(
+    existingModels.value.map(m => m.provider_model_name)
+  )
+  return upstreamModels.value.filter(m => !existingModelNames.has(m.id))
+})
+
+// 搜索过滤后的上游模型
+const availableUpstreamModels = computed(() => {
+  if (!searchQuery.value.trim()) return availableUpstreamModelsBase.value
+  const query = searchQuery.value.toLowerCase()
+  return availableUpstreamModelsBase.value.filter(m =>
+    m.id.toLowerCase().includes(query) ||
+    (m.owned_by && m.owned_by.toLowerCase().includes(query))
+  )
+})
+
+// 按 API 格式分组的上游模型
+const upstreamModelGroups = computed(() => {
+  const groups: Record<string, UpstreamModel[]> = {}
+
+  for (const model of availableUpstreamModels.value) {
+    const format = model.api_format || 'unknown'
+    if (!groups[format]) {
+      groups[format] = []
+    }
+    groups[format].push(model)
+  }
+
+  // 按 API_FORMAT_LABELS 的顺序排序
+  const order = Object.keys(API_FORMAT_LABELS)
+  return Object.entries(groups)
+    .map(([api_format, models]) => ({ api_format, models }))
+    .sort((a, b) => {
+      const aIndex = order.indexOf(a.api_format)
+      const bIndex = 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
+    })
+})
+
+// 总可添加数量
+const totalAvailableCount = computed(() => {
+  return availableGlobalModels.value.length + availableUpstreamModels.value.length
+})
+
+// 总选中数量
+const totalSelectedCount = computed(() => {
+  return selectedGlobalModelIds.value.length + selectedUpstreamModelIds.value.length
+})
+
+// 全选状态
 const isAllRightSelected = computed(() =>
   existingModels.value.length > 0 &&
   selectedRightIds.value.length === existingModels.value.length
 )
 
+// 全局模型是否全选
+const isAllGlobalModelsSelected = computed(() => {
+  if (availableGlobalModels.value.length === 0) return false
+  return availableGlobalModels.value.every(m => selectedGlobalModelIds.value.includes(m.id))
+})
+
+// 检查某个上游组是否全选
+function isUpstreamGroupAllSelected(apiFormat: string): boolean {
+  const group = upstreamModelGroups.value.find(g => g.api_format === apiFormat)
+  if (!group || group.models.length === 0) return false
+  return group.models.every(m => selectedUpstreamModelIds.value.includes(m.id))
+}
+
 // 监听打开状态
 watch(() => props.open, async (isOpen) => {
   if (isOpen && props.providerId) {
     await loadData()
   } else {
     // 重置状态
-    selectedLeftIds.value = []
+    selectedGlobalModelIds.value = []
+    selectedUpstreamModelIds.value = []
     selectedRightIds.value = []
+    upstreamModels.value = []
+    upstreamModelsLoaded.value = false
+    collapsedGroups.value = new Set()
+    searchQuery.value = ''
   }
 })
 
 // 加载数据
 async function loadData() {
   await Promise.all([loadGlobalModels(), loadExistingModels()])
+  // 默认折叠全局模型组
+  collapsedGroups.value = new Set(['global'])
+
+  // 检查缓存，如果有缓存数据则直接使用
+  const cachedModels = getCachedModels(props.providerId)
+  if (cachedModels) {
+    upstreamModels.value = cachedModels
+    upstreamModelsLoaded.value = true
+    // 折叠所有上游模型组
+    for (const model of cachedModels) {
+      if (model.api_format) {
+        collapsedGroups.value.add(model.api_format)
+      }
+    }
+  }
 }
 
 // 加载全局模型列表
@@ -342,13 +564,91 @@ async function loadExistingModels() {
   }
 }
 
-// 切换左侧选择
-function toggleLeftSelection(id: string) {
-  const index = selectedLeftIds.value.indexOf(id)
-  if (index === -1) {
-    selectedLeftIds.value.push(id)
+// 从提供商获取模型
+async function fetchUpstreamModels(forceRefresh = false) {
+  if (forceRefresh) {
+    clearCache(props.providerId)
+  }
+
+  try {
+    fetchingUpstreamModels.value = true
+    const result = await fetchCachedModels(props.providerId, forceRefresh)
+    if (result) {
+      if (result.error) {
+        showError(result.error, '错误')
+      } else {
+        upstreamModels.value = result.models
+        upstreamModelsLoaded.value = true
+        // 折叠所有上游模型组
+        const allGroups = new Set(collapsedGroups.value)
+        for (const model of result.models) {
+          if (model.api_format) {
+            allGroups.add(model.api_format)
+          }
+        }
+        collapsedGroups.value = allGroups
+      }
+    }
+  } finally {
+    fetchingUpstreamModels.value = false
+  }
+}
+
+// 切换折叠状态
+function toggleGroupCollapse(group: string) {
+  if (collapsedGroups.value.has(group)) {
+    collapsedGroups.value.delete(group)
   } else {
-    selectedLeftIds.value.splice(index, 1)
+    collapsedGroups.value.add(group)
+  }
+  // 触发响应式更新
+  collapsedGroups.value = new Set(collapsedGroups.value)
+}
+
+// 切换全局模型选择
+function toggleGlobalModelSelection(id: string) {
+  const index = selectedGlobalModelIds.value.indexOf(id)
+  if (index === -1) {
+    selectedGlobalModelIds.value.push(id)
+  } else {
+    selectedGlobalModelIds.value.splice(index, 1)
+  }
+}
+
+// 切换上游模型选择
+function toggleUpstreamModelSelection(id: string) {
+  const index = selectedUpstreamModelIds.value.indexOf(id)
+  if (index === -1) {
+    selectedUpstreamModelIds.value.push(id)
+  } else {
+    selectedUpstreamModelIds.value.splice(index, 1)
+  }
+}
+
+// 全选全局模型
+function selectAllGlobalModels() {
+  const allIds = availableGlobalModels.value.map(m => m.id)
+  const allSelected = allIds.every(id => selectedGlobalModelIds.value.includes(id))
+  if (allSelected) {
+    selectedGlobalModelIds.value = selectedGlobalModelIds.value.filter(id => !allIds.includes(id))
+  } else {
+    const newIds = allIds.filter(id => !selectedGlobalModelIds.value.includes(id))
+    selectedGlobalModelIds.value.push(...newIds)
+  }
+}
+
+// 全选某个 API 格式的上游模型
+function selectAllUpstreamModels(apiFormat: string) {
+  const group = upstreamModelGroups.value.find(g => g.api_format === apiFormat)
+  if (!group) return
+
+  const allIds = group.models.map(m => m.id)
+  const allSelected = allIds.every(id => selectedUpstreamModelIds.value.includes(id))
+  if (allSelected) {
+    selectedUpstreamModelIds.value = selectedUpstreamModelIds.value.filter(id => !allIds.includes(id))
+  } else {
+    const newIds = allIds.filter(id => !selectedUpstreamModelIds.value.includes(id))
+    selectedUpstreamModelIds.value.push(...newIds)
   }
 }
 
@@ -362,15 +662,6 @@ function toggleRightSelection(id: string) {
   }
 }
 
-// 全选/取消全选左侧
-function toggleSelectAllLeft() {
-  if (isAllLeftSelected.value) {
-    selectedLeftIds.value = []
-  } else {
-    selectedLeftIds.value = availableModels.value.map(m => m.id)
-  }
-}
-
 // 全选/取消全选右侧
 function toggleSelectAllRight() {
   if (isAllRightSelected.value) {
@@ -382,22 +673,41 @@ function toggleSelectAllRight() {
 
 // 批量添加选中的模型
 async function batchAddSelected() {
-  if (selectedLeftIds.value.length === 0) return
+  if (totalSelectedCount.value === 0) return
 
   try {
     submittingAdd.value = true
-    const result = await batchAssignModelsToProvider(props.providerId, selectedLeftIds.value)
+    let totalSuccess = 0
+    const allErrors: string[] = []
 
-    if (result.success.length > 0) {
-      success(`成功添加 ${result.success.length} 个模型`)
+    // 处理全局模型
+    if (selectedGlobalModelIds.value.length > 0) {
+      const result = await batchAssignModelsToProvider(props.providerId, selectedGlobalModelIds.value)
+      totalSuccess += result.success.length
+      if (result.errors.length > 0) {
+        allErrors.push(...result.errors.map(e => e.error))
+      }
     }
 
-    if (result.errors.length > 0) {
-      const errorMessages = result.errors.map(e => e.error).join(', ')
-      showError(`部分模型添加失败: ${errorMessages}`, '警告')
+    // 处理上游模型（调用 import-from-upstream API）
+    if (selectedUpstreamModelIds.value.length > 0) {
+      const result = await importModelsFromUpstream(props.providerId, selectedUpstreamModelIds.value)
+      totalSuccess += result.success.length
+      if (result.errors.length > 0) {
+        allErrors.push(...result.errors.map(e => e.error))
+      }
     }
 
-    selectedLeftIds.value = []
+    if (totalSuccess > 0) {
+      success(`成功添加 ${totalSuccess} 个模型`)
+    }
+
+    if (allErrors.length > 0) {
+      showError(`部分模型添加失败: ${allErrors.slice(0, 3).join(', ')}${allErrors.length > 3 ? '...' : ''}`, '警告')
+    }
+
+    selectedGlobalModelIds.value = []
+    selectedUpstreamModelIds.value = []
     await loadExistingModels()
     emit('changed')
   } catch (err: any) {