1805 lines
66 KiB
TypeScript
1805 lines
66 KiB
TypeScript
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from '@/components/ui/table'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from '@/components/ui/dialog'
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
AlertDialogTrigger,
|
||
} from '@/components/ui/alert-dialog'
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select'
|
||
import {
|
||
Command,
|
||
CommandEmpty,
|
||
CommandGroup,
|
||
CommandInput,
|
||
CommandItem,
|
||
CommandList,
|
||
} from '@/components/ui/command'
|
||
import {
|
||
Popover,
|
||
PopoverContent,
|
||
PopoverTrigger,
|
||
} from '@/components/ui/popover'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Plus, Pencil, Trash2, Save, Eye, EyeOff, Copy, Search, Info, Power, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Check, ChevronsUpDown, Zap, Loader2, CheckCircle2, XCircle, AlertCircle } from 'lucide-react'
|
||
import { getModelConfig, updateModelConfig, updateModelConfigSection, testProviderConnection, type TestConnectionResult } from '@/lib/config-api'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||
import { HelpTooltip } from '@/components/ui/help-tooltip'
|
||
import { useTour } from '@/components/tour'
|
||
import { MODEL_ASSIGNMENT_TOUR_ID, modelAssignmentTourSteps, STEP_ROUTE_MAP } from '@/components/tour/tours/model-assignment-tour'
|
||
import { useNavigate } from '@tanstack/react-router'
|
||
import { RestartOverlay } from '@/components/restart-overlay'
|
||
import { RestartProvider, useRestart } from '@/lib/restart-context'
|
||
import { PROVIDER_TEMPLATES } from './providerTemplates'
|
||
import type { APIProvider, DeleteConfirmState, FormErrors } from './modelProvider/types'
|
||
import { cleanProviderData, validateProvider } from './modelProvider/utils'
|
||
|
||
// 主导出组件：包装 RestartProvider
|
||
export function ModelProviderConfigPage() {
|
||
return (
|
||
<RestartProvider>
|
||
<ModelProviderConfigPageContent />
|
||
</RestartProvider>
|
||
)
|
||
}
|
||
|
||
// 内部实现组件
|
||
function ModelProviderConfigPageContent() {
|
||
const [providers, setProviders] = useState<APIProvider[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [autoSaving, setAutoSaving] = useState(false)
|
||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
|
||
const [editDialogOpen, setEditDialogOpen] = useState(false)
|
||
const [editingProvider, setEditingProvider] = useState<APIProvider | null>(null)
|
||
const [editingIndex, setEditingIndex] = useState<number | null>(null)
|
||
const [selectedTemplate, setSelectedTemplate] = useState<string>('custom')
|
||
const [templateComboboxOpen, setTemplateComboboxOpen] = useState(false)
|
||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
||
const [deletingIndex, setDeletingIndex] = useState<number | null>(null)
|
||
const [showApiKey, setShowApiKey] = useState(false)
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [selectedProviders, setSelectedProviders] = useState<Set<number>>(new Set())
|
||
const [batchDeleteDialogOpen, setBatchDeleteDialogOpen] = useState(false)
|
||
const [page, setPage] = useState(1)
|
||
const [pageSize, setPageSize] = useState(20)
|
||
const [jumpToPage, setJumpToPage] = useState('')
|
||
|
||
// 删除提供商确认对话框状态（合并为单个对象以减少状态变量）
|
||
const [deleteConfirmState, setDeleteConfirmState] = useState<DeleteConfirmState>({
|
||
isOpen: false,
|
||
providersToDelete: [],
|
||
affectedModels: [],
|
||
pendingProviders: [],
|
||
context: 'auto',
|
||
oldProviders: [],
|
||
})
|
||
|
||
// 表单验证错误状态
|
||
const [formErrors, setFormErrors] = useState<FormErrors>({})
|
||
|
||
// 测试连接状态
|
||
const [testingProviders, setTestingProviders] = useState<Set<string>>(new Set())
|
||
const [testResults, setTestResults] = useState<Map<string, TestConnectionResult>>(new Map())
|
||
|
||
const { toast } = useToast()
|
||
const navigate = useNavigate()
|
||
const { state: tourState, goToStep, registerTour } = useTour()
|
||
const { triggerRestart, isRestarting } = useRestart()
|
||
|
||
// 用于防抖的定时器
|
||
const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||
const initialLoadRef = useRef(true)
|
||
|
||
// 注册 Tour（确保跨页导航时 Tour 仍然可用）
|
||
useEffect(() => {
|
||
registerTour(MODEL_ASSIGNMENT_TOUR_ID, modelAssignmentTourSteps)
|
||
}, [registerTour])
|
||
|
||
// 监听 Tour 步骤变化，处理页面导航
|
||
useEffect(() => {
|
||
if (tourState.activeTourId === MODEL_ASSIGNMENT_TOUR_ID && tourState.isRunning) {
|
||
const targetRoute = STEP_ROUTE_MAP[tourState.stepIndex]
|
||
if (targetRoute && !window.location.pathname.endsWith(targetRoute.replace('/config/', ''))) {
|
||
navigate({ to: targetRoute })
|
||
}
|
||
}
|
||
}, [tourState.stepIndex, tourState.activeTourId, tourState.isRunning, navigate])
|
||
|
||
// 监听 Tour 步骤变化，处理弹窗的打开和关闭
|
||
// 提供商弹窗步骤: 3-9 (index 3-9)，弹窗外步骤: 0-2 (index 0-2) 和 10+ (index 10+)
|
||
const prevTourStepRef = useRef(tourState.stepIndex)
|
||
useEffect(() => {
|
||
if (tourState.activeTourId === MODEL_ASSIGNMENT_TOUR_ID && tourState.isRunning) {
|
||
const prevStep = prevTourStepRef.current
|
||
const currentStep = tourState.stepIndex
|
||
|
||
// 如果从弹窗内步骤 (3-9) 回退到弹窗外步骤 (0-2)，关闭弹窗
|
||
if (prevStep >= 3 && prevStep <= 9 && currentStep < 3) {
|
||
setEditDialogOpen(false)
|
||
}
|
||
|
||
// 如果从弹窗外步骤 (10+) 回退到弹窗内步骤 (3-9)，重新打开弹窗
|
||
// 这处理了从模型管理页面第 11 步点击"上一步"回到提供商弹窗的情况
|
||
if (prevStep >= 10 && currentStep >= 3 && currentStep <= 9) {
|
||
// 需要打开空白弹窗以便 Tour 可以定位到弹窗内的元素
|
||
setFormErrors({})
|
||
setSelectedTemplate('custom')
|
||
setEditingProvider({
|
||
name: '',
|
||
base_url: '',
|
||
api_key: '',
|
||
client_type: 'openai',
|
||
max_retry: 2,
|
||
timeout: 30,
|
||
retry_interval: 10,
|
||
})
|
||
setEditingIndex(null)
|
||
setShowApiKey(false)
|
||
setEditDialogOpen(true)
|
||
}
|
||
|
||
prevTourStepRef.current = currentStep
|
||
}
|
||
}, [tourState.stepIndex, tourState.activeTourId, tourState.isRunning])
|
||
|
||
// 处理 Tour 中需要用户点击才能继续的步骤
|
||
useEffect(() => {
|
||
if (tourState.activeTourId !== MODEL_ASSIGNMENT_TOUR_ID || !tourState.isRunning) return
|
||
|
||
const handleTourClick = (e: MouseEvent) => {
|
||
const target = e.target as HTMLElement
|
||
const currentStep = tourState.stepIndex
|
||
|
||
// Step 3 (index 2): 点击添加提供商按钮
|
||
if (currentStep === 2 && target.closest('[data-tour="add-provider-button"]')) {
|
||
setTimeout(() => goToStep(3), 300)
|
||
}
|
||
// Step 10 (index 9): 点击取消按钮（关闭提供商弹窗）
|
||
else if (currentStep === 9 && target.closest('[data-tour="provider-cancel-button"]')) {
|
||
setTimeout(() => goToStep(10), 300)
|
||
}
|
||
}
|
||
|
||
document.addEventListener('click', handleTourClick, true)
|
||
return () => document.removeEventListener('click', handleTourClick, true)
|
||
}, [tourState, goToStep])
|
||
|
||
// 加载配置
|
||
useEffect(() => {
|
||
loadConfig()
|
||
}, [])
|
||
|
||
const loadConfig = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const result = await getModelConfig()
|
||
if (!result.success) {
|
||
toast({
|
||
title: '加载失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
setLoading(false)
|
||
return
|
||
}
|
||
const config = result.data
|
||
setProviders((config.api_providers as APIProvider[]) || [])
|
||
setHasUnsavedChanges(false)
|
||
initialLoadRef.current = false
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 重启麦麦
|
||
const handleRestart = async () => {
|
||
await triggerRestart()
|
||
}
|
||
|
||
// 保存并重启
|
||
const handleSaveAndRestart = async () => {
|
||
try {
|
||
setSaving(true)
|
||
if (autoSaveTimerRef.current) {
|
||
clearTimeout(autoSaveTimerRef.current)
|
||
}
|
||
|
||
// 清理 providers 数据：将 null 值转换为默认值
|
||
const cleanedProviders = providers.map(provider => ({
|
||
...provider,
|
||
max_retry: provider.max_retry ?? 2,
|
||
timeout: provider.timeout ?? 30,
|
||
retry_interval: provider.retry_interval ?? 10,
|
||
}))
|
||
|
||
// 检查删除提供商的影响
|
||
const { shouldProceed } = await checkDeleteProviderImpact(cleanedProviders, 'restart')
|
||
if (!shouldProceed) {
|
||
// 需要用户确认，等待确认对话框
|
||
setSaving(false)
|
||
return
|
||
}
|
||
|
||
const resultGet = await getModelConfig()
|
||
if (!resultGet.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: resultGet.error,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
const config = resultGet.data
|
||
|
||
// 获取所有有效的 provider 名称
|
||
const validProviderNames = new Set(cleanedProviders.map(p => p.name))
|
||
|
||
// 过滤掉引用已删除 provider 的模型
|
||
const originalModels = (config.models as any[]) || []
|
||
const filteredModels = originalModels.filter((model: any) => {
|
||
return validProviderNames.has(model.api_provider)
|
||
})
|
||
|
||
config.api_providers = cleanedProviders
|
||
config.models = filteredModels
|
||
|
||
const resultUpdate = await updateModelConfig(config)
|
||
if (!resultUpdate.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: resultUpdate.error,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
toast({
|
||
title: '保存成功',
|
||
description: '正在重启麦麦...',
|
||
})
|
||
await handleRestart()
|
||
} catch (error) {
|
||
console.error('保存配置失败:', error)
|
||
toast({
|
||
title: '保存失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
// 检查删除提供商的影响
|
||
const checkDeleteProviderImpact = useCallback(async (
|
||
newProviders: APIProvider[],
|
||
context: 'auto' | 'manual' | 'restart' = 'auto'
|
||
) => {
|
||
try {
|
||
const result = await getModelConfig()
|
||
if (!result.success) {
|
||
console.error('加载配置失败:', result.error)
|
||
return { shouldProceed: true, providers: newProviders }
|
||
}
|
||
const config = result.data
|
||
const oldProviderNames = new Set(providers.map(p => p.name))
|
||
const newProviderNames = new Set(newProviders.map(p => p.name))
|
||
|
||
// 找出被删除的提供商
|
||
const deletedProviders = Array.from(oldProviderNames).filter(
|
||
name => !newProviderNames.has(name)
|
||
)
|
||
|
||
if (deletedProviders.length === 0) {
|
||
// 没有删除提供商，直接保存
|
||
return { shouldProceed: true, providers: newProviders }
|
||
}
|
||
|
||
// 检查受影响的模型
|
||
const models = (config.models as any[]) || []
|
||
const affected = models.filter((m: any) =>
|
||
deletedProviders.includes(m.api_provider)
|
||
)
|
||
|
||
if (affected.length === 0) {
|
||
// 没有受影响的模型，直接删除
|
||
return { shouldProceed: true, providers: newProviders }
|
||
}
|
||
|
||
// 有受影响的模型，需要用户确认
|
||
setDeleteConfirmState({
|
||
isOpen: true,
|
||
providersToDelete: deletedProviders,
|
||
affectedModels: affected,
|
||
pendingProviders: newProviders,
|
||
context,
|
||
oldProviders: [...providers],
|
||
})
|
||
|
||
return { shouldProceed: false, providers: newProviders }
|
||
} catch (error) {
|
||
console.error('检查删除影响失败:', error)
|
||
return { shouldProceed: true, providers: newProviders }
|
||
}
|
||
}, [providers])
|
||
|
||
// 确认删除提供商及其关联的模型
|
||
const handleConfirmDeleteProvider = async () => {
|
||
try {
|
||
const savingFlag = deleteConfirmState.context === 'auto' ? setAutoSaving : setSaving
|
||
savingFlag(true)
|
||
|
||
setDeleteConfirmState(prev => ({ ...prev, isOpen: false }))
|
||
|
||
const resultGet = await getModelConfig()
|
||
if (!resultGet.success) {
|
||
toast({
|
||
title: '加载失败',
|
||
description: resultGet.error,
|
||
variant: 'destructive',
|
||
})
|
||
savingFlag(false)
|
||
return
|
||
}
|
||
const config = resultGet.data
|
||
|
||
// 清理 providers 数据
|
||
const cleanedProviders = deleteConfirmState.pendingProviders.map(cleanProviderData)
|
||
|
||
// 获取有效的 provider 名称
|
||
const validProviderNames = new Set(cleanedProviders.map(p => p.name))
|
||
|
||
// 过滤掉引用已删除 provider 的模型
|
||
const originalModels = (config.models as any[]) || []
|
||
const filteredModels = originalModels.filter((model: any) => {
|
||
return validProviderNames.has(model.api_provider)
|
||
})
|
||
|
||
// 获取被削除的模型名称
|
||
const deletedModelNames = new Set(
|
||
deleteConfirmState.affectedModels.map((m: any) => m.name)
|
||
)
|
||
|
||
// 从任务配置中移除这些模型
|
||
const modelTaskConfig = config.model_task_config as any
|
||
if (modelTaskConfig) {
|
||
Object.keys(modelTaskConfig).forEach(taskName => {
|
||
const task = modelTaskConfig[taskName]
|
||
if (task && Array.isArray(task.model_list)) {
|
||
task.model_list = task.model_list.filter(
|
||
(modelName: string) => !deletedModelNames.has(modelName)
|
||
)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 更新配置
|
||
config.api_providers = cleanedProviders
|
||
config.models = filteredModels
|
||
config.model_task_config = modelTaskConfig
|
||
|
||
const resultUpdate = await updateModelConfig(config)
|
||
if (!resultUpdate.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: resultUpdate.error,
|
||
variant: 'destructive',
|
||
})
|
||
savingFlag(false)
|
||
return
|
||
}
|
||
|
||
// 更新本地状态
|
||
setProviders(deleteConfirmState.pendingProviders)
|
||
setHasUnsavedChanges(false)
|
||
|
||
toast({
|
||
title: '删除成功',
|
||
description: `已删除 ${deleteConfirmState.providersToDelete.length} 个提供商和 ${deleteConfirmState.affectedModels.length} 个关联模型`,
|
||
})
|
||
|
||
// 清理状态
|
||
setDeleteConfirmState({
|
||
isOpen: false,
|
||
providersToDelete: [],
|
||
affectedModels: [],
|
||
pendingProviders: [],
|
||
context: 'auto',
|
||
oldProviders: [],
|
||
})
|
||
setSelectedProviders(new Set()) // 清除选中状态（批量删除时）
|
||
|
||
// 根据上下文执行后续操作
|
||
if (deleteConfirmState.context === 'restart') {
|
||
// 如果是保存并重启，继续执行重启流程
|
||
await handleRestart()
|
||
}
|
||
} catch (error) {
|
||
console.error('删除失败:', error)
|
||
toast({
|
||
title: '删除失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
if (deleteConfirmState.context === 'auto') {
|
||
setAutoSaving(false)
|
||
} else {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 取消删除提供商
|
||
const handleCancelDeleteProvider = () => {
|
||
// 恢复到删除前的 providers 状态
|
||
if (deleteConfirmState.oldProviders.length > 0) {
|
||
setProviders(deleteConfirmState.oldProviders)
|
||
}
|
||
// 清理状态
|
||
setDeleteConfirmState({
|
||
isOpen: false,
|
||
providersToDelete: [],
|
||
affectedModels: [],
|
||
pendingProviders: [],
|
||
context: 'auto',
|
||
oldProviders: [],
|
||
})
|
||
setHasUnsavedChanges(false)
|
||
}
|
||
|
||
// 自动保存函数（使用增量 API）
|
||
const autoSaveProviders = useCallback(async (newProviders: APIProvider[]) => {
|
||
if (initialLoadRef.current) return // 初始加载时不自动保存
|
||
|
||
// 检查删除影响
|
||
const { shouldProceed } = await checkDeleteProviderImpact(newProviders, 'auto')
|
||
|
||
if (!shouldProceed) {
|
||
// 需要用户确认，对话框已打开
|
||
setHasUnsavedChanges(true)
|
||
return
|
||
}
|
||
|
||
try {
|
||
setAutoSaving(true)
|
||
// 清理 providers 数据：将 null 值转换为默认值
|
||
const cleanedProviders = newProviders.map(cleanProviderData)
|
||
const result = await updateModelConfigSection('api_providers', cleanedProviders)
|
||
if (!result.success) {
|
||
console.error('自动保存失败:', result.error)
|
||
toast({
|
||
title: '自动保存失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
setHasUnsavedChanges(true)
|
||
return
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
} catch (error) {
|
||
console.error('自动保存失败:', error)
|
||
toast({
|
||
title: '自动保存失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
setHasUnsavedChanges(true)
|
||
} finally {
|
||
setAutoSaving(false)
|
||
}
|
||
}, [providers, checkDeleteProviderImpact])
|
||
|
||
// 监听 providers 变化，触发自动保存（带防抖）
|
||
useEffect(() => {
|
||
if (initialLoadRef.current) return
|
||
|
||
setHasUnsavedChanges(true)
|
||
|
||
// 清除之前的定时器
|
||
if (autoSaveTimerRef.current) {
|
||
clearTimeout(autoSaveTimerRef.current)
|
||
}
|
||
|
||
// 设置新的定时器（2秒后自动保存）
|
||
autoSaveTimerRef.current = setTimeout(() => {
|
||
autoSaveProviders(providers)
|
||
}, 2000)
|
||
|
||
// 清理函数
|
||
return () => {
|
||
if (autoSaveTimerRef.current) {
|
||
clearTimeout(autoSaveTimerRef.current)
|
||
}
|
||
}
|
||
}, [providers, autoSaveProviders])
|
||
|
||
// 保存配置（手动保存，保存完整配置）
|
||
const saveConfig = async () => {
|
||
try {
|
||
setSaving(true)
|
||
|
||
// 先取消自动保存定时器
|
||
if (autoSaveTimerRef.current) {
|
||
clearTimeout(autoSaveTimerRef.current)
|
||
}
|
||
|
||
// 清理 providers 数据：将 null 值转换为默认值
|
||
const cleanedProviders = providers.map(cleanProviderData)
|
||
|
||
// 检查删除提供商的影响
|
||
const { shouldProceed } = await checkDeleteProviderImpact(cleanedProviders, 'manual')
|
||
if (!shouldProceed) {
|
||
// 需要用户确认，等待确认对话框
|
||
setSaving(false)
|
||
return
|
||
}
|
||
|
||
const resultGet = await getModelConfig()
|
||
if (!resultGet.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: resultGet.error,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
const config = resultGet.data
|
||
|
||
// 获取所有有效的 provider 名称
|
||
const validProviderNames = new Set(cleanedProviders.map(p => p.name))
|
||
|
||
// 过滤掉引用已删除 provider 的模型
|
||
const originalModels = (config.models as any[]) || []
|
||
const filteredModels = originalModels.filter((model: any) => {
|
||
const isValid = validProviderNames.has(model.api_provider)
|
||
if (!isValid) {
|
||
console.warn(`模型 "${model.name}" 引用了已删除的提供商 "${model.api_provider}"、将被移除`)
|
||
}
|
||
return isValid
|
||
})
|
||
|
||
// 如果有模型被移除、显示警告
|
||
if (originalModels.length !== filteredModels.length) {
|
||
const removedCount = originalModels.length - filteredModels.length
|
||
toast({
|
||
title: '注意',
|
||
description: `已自动移除 ${removedCount} 个引用已删除提供商的模型`,
|
||
variant: 'default',
|
||
})
|
||
}
|
||
|
||
console.log('发送的 providers 数据:', cleanedProviders)
|
||
config.api_providers = cleanedProviders
|
||
config.models = filteredModels
|
||
console.log('完整配置数据:', config)
|
||
|
||
const resultUpdate = await updateModelConfig(config)
|
||
if (!resultUpdate.success) {
|
||
toast({
|
||
title: '保存失败',
|
||
description: resultUpdate.error,
|
||
variant: 'destructive',
|
||
})
|
||
setSaving(false)
|
||
return
|
||
}
|
||
setHasUnsavedChanges(false)
|
||
toast({
|
||
title: '保存成功',
|
||
description: '模型提供商配置已保存',
|
||
})
|
||
} catch (error) {
|
||
console.error('保存配置失败:', error)
|
||
toast({
|
||
title: '保存失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
// 打开编辑对话框
|
||
const openEditDialog = (provider: APIProvider | null, index: number | null) => {
|
||
// 清除表单验证错误
|
||
setFormErrors({})
|
||
|
||
if (provider) {
|
||
// 编辑现有提供商 - 检测匹配的模板
|
||
const matchedTemplate = PROVIDER_TEMPLATES.find(
|
||
t => t.base_url === provider.base_url && t.client_type === provider.client_type
|
||
)
|
||
setSelectedTemplate(matchedTemplate?.id || 'custom')
|
||
setEditingProvider(provider)
|
||
} else {
|
||
// 新建提供商 - 默认使用自定义模板
|
||
setSelectedTemplate('custom')
|
||
setEditingProvider({
|
||
name: '',
|
||
base_url: '',
|
||
api_key: '',
|
||
client_type: 'openai',
|
||
max_retry: 2,
|
||
timeout: 30,
|
||
retry_interval: 10,
|
||
})
|
||
}
|
||
setEditingIndex(index)
|
||
setShowApiKey(false)
|
||
setEditDialogOpen(true)
|
||
}
|
||
|
||
// 处理模板选择变化
|
||
const handleTemplateChange = useCallback((templateId: string) => {
|
||
setSelectedTemplate(templateId)
|
||
setTemplateComboboxOpen(false)
|
||
const template = PROVIDER_TEMPLATES.find(t => t.id === templateId)
|
||
if (template && template.id !== 'custom') {
|
||
// 应用模板配置
|
||
setEditingProvider(prev => ({
|
||
...prev!,
|
||
name: template.name,
|
||
base_url: template.base_url,
|
||
client_type: template.client_type,
|
||
}))
|
||
} else if (template?.id === 'custom') {
|
||
// 切换到自定义模板 - 清空URL和客户端类型(保留其他字段)
|
||
setEditingProvider(prev => ({
|
||
...prev!,
|
||
name: '',
|
||
base_url: '',
|
||
client_type: 'openai',
|
||
}))
|
||
}
|
||
}, [])
|
||
|
||
// 判断当前是否使用模板(非自定义)
|
||
const isUsingTemplate = useMemo(() => {
|
||
return selectedTemplate !== 'custom'
|
||
}, [selectedTemplate])
|
||
|
||
// 复制 API Key
|
||
const copyApiKey = useCallback(async () => {
|
||
if (!editingProvider?.api_key) return
|
||
try {
|
||
await navigator.clipboard.writeText(editingProvider.api_key)
|
||
toast({
|
||
title: '复制成功',
|
||
description: 'API Key 已复制到剪贴板',
|
||
})
|
||
} catch {
|
||
toast({
|
||
title: '复制失败',
|
||
description: '无法访问剪贴板',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
}, [editingProvider?.api_key, toast])
|
||
|
||
// 保存编辑
|
||
const handleSaveEdit = () => {
|
||
if (!editingProvider) return
|
||
|
||
// 验证必填项（传入现有提供商列表和当前编辑索引用于重复检查）
|
||
const { isValid, errors } = validateProvider(editingProvider, providers, editingIndex)
|
||
|
||
if (!isValid) {
|
||
setFormErrors(errors)
|
||
return
|
||
}
|
||
|
||
// 清除错误状态
|
||
setFormErrors({})
|
||
|
||
// 填充空值的默认值
|
||
const providerToSave = cleanProviderData(editingProvider)
|
||
|
||
if (editingIndex !== null) {
|
||
// 更新现有提供商
|
||
const newProviders = [...providers]
|
||
newProviders[editingIndex] = providerToSave
|
||
setProviders(newProviders)
|
||
} else {
|
||
// 添加新提供商
|
||
setProviders([...providers, providerToSave])
|
||
}
|
||
|
||
setEditDialogOpen(false)
|
||
setEditingProvider(null)
|
||
setEditingIndex(null)
|
||
}
|
||
|
||
// 处理编辑对话框关闭
|
||
const handleEditDialogClose = (open: boolean) => {
|
||
if (!open && editingProvider) {
|
||
// 关闭时填充默认值
|
||
const updatedProvider = {
|
||
...editingProvider,
|
||
max_retry: editingProvider.max_retry ?? 2,
|
||
timeout: editingProvider.timeout ?? 30,
|
||
retry_interval: editingProvider.retry_interval ?? 10,
|
||
}
|
||
setEditingProvider(updatedProvider)
|
||
}
|
||
setEditDialogOpen(open)
|
||
}
|
||
|
||
// 打开删除确认对话框
|
||
const openDeleteDialog = (index: number) => {
|
||
setDeletingIndex(index)
|
||
setDeleteDialogOpen(true)
|
||
}
|
||
|
||
// 确认删除提供商
|
||
const handleConfirmDelete = async () => {
|
||
if (deletingIndex !== null) {
|
||
const newProviders = providers.filter((_, i) => i !== deletingIndex)
|
||
|
||
// 检查删除影响
|
||
const { shouldProceed } = await checkDeleteProviderImpact(newProviders, 'manual')
|
||
|
||
if (shouldProceed) {
|
||
// 没有影响，直接删除
|
||
setProviders(newProviders)
|
||
toast({
|
||
title: '删除成功',
|
||
description: '提供商已从列表中移除',
|
||
})
|
||
}
|
||
// 如果 shouldProceed = false，对话框会自动打开，等待用户确认
|
||
}
|
||
setDeleteDialogOpen(false)
|
||
setDeletingIndex(null)
|
||
}
|
||
|
||
// 切换单个提供商选择
|
||
const toggleProviderSelection = (index: number) => {
|
||
const newSelected = new Set(selectedProviders)
|
||
if (newSelected.has(index)) {
|
||
newSelected.delete(index)
|
||
} else {
|
||
newSelected.add(index)
|
||
}
|
||
setSelectedProviders(newSelected)
|
||
}
|
||
|
||
// 全选/取消全选
|
||
const toggleSelectAll = () => {
|
||
if (selectedProviders.size === filteredProviders.length) {
|
||
setSelectedProviders(new Set())
|
||
} else {
|
||
const allIndices = filteredProviders.map((_, idx) =>
|
||
providers.findIndex(p => p === filteredProviders[idx])
|
||
)
|
||
setSelectedProviders(new Set(allIndices))
|
||
}
|
||
}
|
||
|
||
// 打开批量删除确认对话框
|
||
const openBatchDeleteDialog = () => {
|
||
if (selectedProviders.size === 0) {
|
||
toast({
|
||
title: '提示',
|
||
description: '请先选择要删除的提供商',
|
||
variant: 'default',
|
||
})
|
||
return
|
||
}
|
||
setBatchDeleteDialogOpen(true)
|
||
}
|
||
|
||
// 确认批量删除
|
||
const handleConfirmBatchDelete = async () => {
|
||
const newProviders = providers.filter((_, index) => !selectedProviders.has(index))
|
||
|
||
// 检查删除影响
|
||
const { shouldProceed } = await checkDeleteProviderImpact(newProviders, 'manual')
|
||
|
||
if (shouldProceed) {
|
||
// 没有影响，直接删除
|
||
setProviders(newProviders)
|
||
setSelectedProviders(new Set())
|
||
toast({
|
||
title: '批量删除成功',
|
||
description: `已删除 ${selectedProviders.size} 个提供商`,
|
||
})
|
||
}
|
||
// 如果 shouldProceed = false，对话框会自动打开，等待用户确认
|
||
|
||
setBatchDeleteDialogOpen(false)
|
||
}
|
||
|
||
// 过滤提供商列表（使用 useMemo 优化性能）
|
||
const filteredProviders = useMemo(() => {
|
||
if (!searchQuery) return providers
|
||
const query = searchQuery.toLowerCase()
|
||
return providers.filter((provider) => (
|
||
provider.name.toLowerCase().includes(query) ||
|
||
provider.base_url.toLowerCase().includes(query) ||
|
||
provider.client_type.toLowerCase().includes(query)
|
||
))
|
||
}, [providers, searchQuery])
|
||
|
||
// 分页逻辑（使用 useMemo 优化性能）
|
||
const { totalPages, paginatedProviders } = useMemo(() => {
|
||
const total = Math.ceil(filteredProviders.length / pageSize)
|
||
const paginated = filteredProviders.slice(
|
||
(page - 1) * pageSize,
|
||
page * pageSize
|
||
)
|
||
return { totalPages: total, paginatedProviders: paginated }
|
||
}, [filteredProviders, page, pageSize])
|
||
|
||
// 页码跳转
|
||
const handleJumpToPage = useCallback(() => {
|
||
const targetPage = parseInt(jumpToPage)
|
||
if (targetPage >= 1 && targetPage <= totalPages) {
|
||
setPage(targetPage)
|
||
setJumpToPage('')
|
||
}
|
||
}, [jumpToPage, totalPages])
|
||
|
||
// 测试单个提供商连接
|
||
const handleTestConnection = async (providerName: string) => {
|
||
// 标记正在测试
|
||
setTestingProviders(prev => new Set(prev).add(providerName))
|
||
|
||
try {
|
||
const result = await testProviderConnection(providerName)
|
||
if (!result.success) {
|
||
toast({
|
||
title: '测试失败',
|
||
description: result.error,
|
||
variant: 'destructive',
|
||
})
|
||
return
|
||
}
|
||
const testResult = result.data
|
||
setTestResults(prev => new Map(prev).set(providerName, testResult))
|
||
|
||
// 显示结果 toast
|
||
if (testResult.network_ok) {
|
||
if (testResult.api_key_valid === true) {
|
||
toast({
|
||
title: '连接正常',
|
||
description: `${providerName} 网络连接正常、API Key 有效 (${testResult.latency_ms}ms)`,
|
||
})
|
||
} else if (testResult.api_key_valid === false) {
|
||
toast({
|
||
title: '连接正常但 Key 无效',
|
||
description: `${providerName} 网络连接正常、但 API Key 无效或已过期`,
|
||
variant: 'destructive',
|
||
})
|
||
} else {
|
||
toast({
|
||
title: '网络连接正常',
|
||
description: `${providerName} 可以访问 (${testResult.latency_ms}ms)`,
|
||
})
|
||
}
|
||
} else {
|
||
toast({
|
||
title: '连接失败',
|
||
description: testResult.error || '无法连接到提供商',
|
||
variant: 'destructive',
|
||
})
|
||
}
|
||
} catch (error) {
|
||
toast({
|
||
title: '测试失败',
|
||
description: (error as Error).message,
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setTestingProviders(prev => {
|
||
const newSet = new Set(prev)
|
||
newSet.delete(providerName)
|
||
return newSet
|
||
})
|
||
}
|
||
}
|
||
|
||
// 批量测试所有提供商
|
||
const handleTestAllConnections = async () => {
|
||
for (const provider of providers) {
|
||
await handleTestConnection(provider.name)
|
||
}
|
||
}
|
||
|
||
// 渲染测试状态指示器
|
||
const renderTestStatus = (providerName: string) => {
|
||
const isTesting = testingProviders.has(providerName)
|
||
const result = testResults.get(providerName)
|
||
|
||
if (isTesting) {
|
||
return (
|
||
<Badge variant="secondary" className="gap-1">
|
||
<Loader2 className="h-3 w-3 animate-spin" />
|
||
测试中
|
||
</Badge>
|
||
)
|
||
}
|
||
|
||
if (!result) return null
|
||
|
||
if (result.network_ok) {
|
||
if (result.api_key_valid === true) {
|
||
return (
|
||
<Badge className="gap-1 bg-green-600 hover:bg-green-700">
|
||
<CheckCircle2 className="h-3 w-3" />
|
||
正常
|
||
</Badge>
|
||
)
|
||
} else if (result.api_key_valid === false) {
|
||
return (
|
||
<Badge variant="destructive" className="gap-1">
|
||
<AlertCircle className="h-3 w-3" />
|
||
Key无效
|
||
</Badge>
|
||
)
|
||
} else {
|
||
return (
|
||
<Badge className="gap-1 bg-blue-600 hover:bg-blue-700">
|
||
<CheckCircle2 className="h-3 w-3" />
|
||
可访问
|
||
</Badge>
|
||
)
|
||
}
|
||
} else {
|
||
return (
|
||
<Badge variant="destructive" className="gap-1">
|
||
<XCircle className="h-3 w-3" />
|
||
离线
|
||
</Badge>
|
||
)
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||
<div className="flex items-center justify-center h-64">
|
||
<p className="text-muted-foreground">加载中...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl sm:text-3xl font-bold">AI模型厂商配置</h1>
|
||
<p className="text-muted-foreground mt-1 sm:mt-2 text-sm sm:text-base">管理 AI 模型厂商的 API 配置</p>
|
||
</div>
|
||
<div className="flex flex-col sm:flex-row gap-2">
|
||
{selectedProviders.size > 0 && (
|
||
<Button
|
||
onClick={openBatchDeleteDialog}
|
||
size="sm"
|
||
variant="destructive"
|
||
className="w-full sm:w-auto"
|
||
>
|
||
<Trash2 className="mr-2 h-4 w-4" strokeWidth={2} fill="none" />
|
||
批量删除 ({selectedProviders.size})
|
||
</Button>
|
||
)}
|
||
<Button
|
||
onClick={handleTestAllConnections}
|
||
size="sm"
|
||
variant="outline"
|
||
className="w-full sm:w-auto"
|
||
disabled={providers.length === 0 || testingProviders.size > 0}
|
||
>
|
||
<Zap className="mr-2 h-4 w-4" />
|
||
{testingProviders.size > 0 ? `测试中 (${testingProviders.size})` : '测试全部'}
|
||
</Button>
|
||
<Button onClick={() => openEditDialog(null, null)} size="sm" className="w-full sm:w-auto" data-tour="add-provider-button">
|
||
<Plus className="mr-2 h-4 w-4" strokeWidth={2} fill="none" />
|
||
添加提供商
|
||
</Button>
|
||
<Button
|
||
onClick={saveConfig}
|
||
disabled={saving || autoSaving || !hasUnsavedChanges || isRestarting}
|
||
size="sm"
|
||
variant="outline"
|
||
className="w-full sm:w-auto sm:min-w-[120px]"
|
||
>
|
||
<Save className="mr-2 h-4 w-4" strokeWidth={2} fill="none" />
|
||
{saving ? '保存中...' : autoSaving ? '自动保存中...' : hasUnsavedChanges ? '保存配置' : '已保存'}
|
||
</Button>
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button
|
||
disabled={saving || autoSaving || isRestarting}
|
||
size="sm"
|
||
className="w-full sm:w-auto sm:min-w-[120px]"
|
||
>
|
||
<Power className="mr-2 h-4 w-4" />
|
||
{isRestarting ? '重启中...' : hasUnsavedChanges ? '保存并重启' : '重启麦麦'}
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认重启麦麦？</AlertDialogTitle>
|
||
<AlertDialogDescription asChild>
|
||
<div>
|
||
<p>
|
||
{hasUnsavedChanges
|
||
? '当前有未保存的配置更改。点击确认将先保存配置,然后重启麦麦使新配置生效。重启过程中麦麦将暂时离线。'
|
||
: '即将重启麦麦主程序。重启过程中麦麦将暂时离线,配置将在重启后生效。'
|
||
}
|
||
</p>
|
||
</div>
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={hasUnsavedChanges ? handleSaveAndRestart : handleRestart}>
|
||
{hasUnsavedChanges ? '保存并重启' : '确认重启'}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 重启提示 */}
|
||
<Alert>
|
||
<Info className="h-4 w-4" />
|
||
<AlertDescription>
|
||
配置更新后需要<strong>重启麦麦</strong>才能生效。你可以点击右上角的"保存并重启"按钮一键完成保存和重启。
|
||
</AlertDescription>
|
||
</Alert>
|
||
|
||
<ScrollArea className="h-[calc(100vh-260px)]">
|
||
{/* 搜索框 */}
|
||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 mb-4">
|
||
<div className="relative w-full sm:flex-1 sm:max-w-sm">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
<Input
|
||
placeholder="搜索提供商名称、URL 或类型..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="pl-9"
|
||
/>
|
||
</div>
|
||
{searchQuery && (
|
||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||
找到 {filteredProviders.length} 个结果
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* 提供商列表 - 移动端卡片视图 */}
|
||
<div className="md:hidden space-y-3">
|
||
{filteredProviders.length === 0 ? (
|
||
<div className="text-center text-muted-foreground py-8 rounded-lg border bg-card">
|
||
{searchQuery ? '未找到匹配的提供商' : '暂无提供商配置，点击"添加提供商"开始配置'}
|
||
</div>
|
||
) : (
|
||
paginatedProviders.map((provider, displayIndex) => {
|
||
const actualIndex = providers.findIndex(p => p === provider)
|
||
return (
|
||
<div key={displayIndex} className="rounded-lg border bg-card p-4 space-y-3">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<h3 className="font-semibold text-base truncate">{provider.name}</h3>
|
||
{renderTestStatus(provider.name)}
|
||
</div>
|
||
<p className="text-xs text-muted-foreground mt-1 break-all">{provider.base_url}</p>
|
||
</div>
|
||
<div className="flex gap-1 flex-shrink-0">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleTestConnection(provider.name)}
|
||
disabled={testingProviders.has(provider.name)}
|
||
title="测试连接"
|
||
>
|
||
{testingProviders.has(provider.name) ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Zap className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
<Button
|
||
variant="default"
|
||
size="sm"
|
||
onClick={() => openEditDialog(provider, actualIndex)}
|
||
>
|
||
<Pencil className="h-4 w-4" strokeWidth={2} fill="none" />
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => openDeleteDialog(actualIndex)}
|
||
className="bg-red-600 hover:bg-red-700 text-white"
|
||
>
|
||
<Trash2 className="h-4 w-4" strokeWidth={2} fill="none" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||
<div>
|
||
<span className="text-muted-foreground text-xs">客户端类型</span>
|
||
<p className="font-medium">{provider.client_type}</p>
|
||
</div>
|
||
<div>
|
||
<span className="text-muted-foreground text-xs">最大重试</span>
|
||
<p className="font-medium">{provider.max_retry}</p>
|
||
</div>
|
||
<div>
|
||
<span className="text-muted-foreground text-xs">超时(秒)</span>
|
||
<p className="font-medium">{provider.timeout}</p>
|
||
</div>
|
||
<div>
|
||
<span className="text-muted-foreground text-xs">重试间隔(秒)</span>
|
||
<p className="font-medium">{provider.retry_interval}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
{/* 提供商列表 - 桌面端表格视图 */}
|
||
<div className="hidden md:block rounded-lg border bg-card overflow-hidden">
|
||
<div className="overflow-x-auto">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-12">
|
||
<Checkbox
|
||
checked={selectedProviders.size === filteredProviders.length && filteredProviders.length > 0}
|
||
onCheckedChange={toggleSelectAll}
|
||
/>
|
||
</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>名称</TableHead>
|
||
<TableHead>基础URL</TableHead>
|
||
<TableHead>客户端类型</TableHead>
|
||
<TableHead className="text-right">最大重试</TableHead>
|
||
<TableHead className="text-right">超时(秒)</TableHead>
|
||
<TableHead className="text-right">重试间隔(秒)</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{paginatedProviders.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={9} className="text-center text-muted-foreground py-8">
|
||
{searchQuery ? '未找到匹配的提供商' : '暂无提供商配置，点击"添加提供商"开始配置'}
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
paginatedProviders.map((provider, displayIndex) => {
|
||
const actualIndex = providers.findIndex(p => p === provider)
|
||
return (
|
||
<TableRow key={displayIndex}>
|
||
<TableCell>
|
||
<Checkbox
|
||
checked={selectedProviders.has(actualIndex)}
|
||
onCheckedChange={() => toggleProviderSelection(actualIndex)}
|
||
/>
|
||
</TableCell>
|
||
<TableCell>
|
||
{renderTestStatus(provider.name) || (
|
||
<Badge variant="outline" className="text-muted-foreground">
|
||
未测试
|
||
</Badge>
|
||
)}
|
||
</TableCell>
|
||
<TableCell className="font-medium">{provider.name}</TableCell>
|
||
<TableCell className="max-w-xs truncate" title={provider.base_url}>
|
||
{provider.base_url}
|
||
</TableCell>
|
||
<TableCell>{provider.client_type}</TableCell>
|
||
<TableCell className="text-right">{provider.max_retry}</TableCell>
|
||
<TableCell className="text-right">{provider.timeout}</TableCell>
|
||
<TableCell className="text-right">{provider.retry_interval}</TableCell>
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleTestConnection(provider.name)}
|
||
disabled={testingProviders.has(provider.name)}
|
||
title="测试连接"
|
||
>
|
||
{testingProviders.has(provider.name) ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Zap className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
<Button
|
||
variant="default"
|
||
size="sm"
|
||
onClick={() => openEditDialog(provider, actualIndex)}
|
||
>
|
||
<Pencil className="h-4 w-4 mr-1" strokeWidth={2} fill="none" />
|
||
编辑
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => openDeleteDialog(actualIndex)}
|
||
className="bg-red-600 hover:bg-red-700 text-white"
|
||
>
|
||
<Trash2 className="h-4 w-4 mr-1" strokeWidth={2} fill="none" />
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
)
|
||
})
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 分页 - 增强版 */}
|
||
{filteredProviders.length > 0 && (
|
||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-4">
|
||
<div className="flex items-center gap-2">
|
||
<Label htmlFor="page-size-provider" className="text-sm whitespace-nowrap">每页显示</Label>
|
||
<Select
|
||
value={pageSize.toString()}
|
||
onValueChange={(value) => {
|
||
setPageSize(parseInt(value))
|
||
setPage(1)
|
||
setSelectedProviders(new Set())
|
||
}}
|
||
>
|
||
<SelectTrigger id="page-size-provider" className="w-20">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="10">10</SelectItem>
|
||
<SelectItem value="20">20</SelectItem>
|
||
<SelectItem value="50">50</SelectItem>
|
||
<SelectItem value="100">100</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<span className="text-sm text-muted-foreground">
|
||
显示 {(page - 1) * pageSize + 1} 到{' '}
|
||
{Math.min(page * pageSize, filteredProviders.length)} 条，共 {filteredProviders.length} 条
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage(1)}
|
||
disabled={page === 1}
|
||
className="hidden sm:flex"
|
||
>
|
||
<ChevronsLeft className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||
disabled={page === 1}
|
||
>
|
||
<ChevronLeft className="h-4 w-4 sm:mr-1" />
|
||
<span className="hidden sm:inline">上一页</span>
|
||
</Button>
|
||
<div className="flex items-center gap-2">
|
||
<Input
|
||
type="number"
|
||
value={jumpToPage}
|
||
onChange={(e) => setJumpToPage(e.target.value)}
|
||
onKeyDown={(e) => e.key === 'Enter' && handleJumpToPage()}
|
||
placeholder={page.toString()}
|
||
className="w-16 h-8 text-center"
|
||
min={1}
|
||
max={totalPages}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleJumpToPage}
|
||
disabled={!jumpToPage}
|
||
className="h-8"
|
||
>
|
||
跳转
|
||
</Button>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage((p) => p + 1)}
|
||
disabled={page >= totalPages}
|
||
>
|
||
<span className="hidden sm:inline">下一页</span>
|
||
<ChevronRight className="h-4 w-4 sm:ml-1" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setPage(totalPages)}
|
||
disabled={page >= totalPages}
|
||
className="hidden sm:flex"
|
||
>
|
||
<ChevronsRight className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</ScrollArea>
|
||
|
||
{/* 编辑对话框 */}
|
||
<Dialog open={editDialogOpen} onOpenChange={handleEditDialogClose}>
|
||
<DialogContent
|
||
className="max-w-[95vw] sm:max-w-2xl max-h-[90vh] overflow-y-auto"
|
||
data-tour="provider-dialog"
|
||
preventOutsideClose={tourState.isRunning}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>
|
||
{editingIndex !== null ? '编辑提供商' : '添加提供商'}
|
||
</DialogTitle>
|
||
<DialogDescription>
|
||
配置 API 提供商的连接信息和参数
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<form onSubmit={(e) => { e.preventDefault(); handleSaveEdit(); }} autoComplete="off">
|
||
<div className="grid gap-4 py-4">
|
||
<div className="grid gap-2" data-tour="provider-template-select">
|
||
<Label htmlFor="template">提供商模板</Label>
|
||
<Popover open={templateComboboxOpen} onOpenChange={setTemplateComboboxOpen}>
|
||
<PopoverTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
role="combobox"
|
||
aria-expanded={templateComboboxOpen}
|
||
className="w-full justify-between"
|
||
>
|
||
{selectedTemplate
|
||
? PROVIDER_TEMPLATES.find((template) => template.id === selectedTemplate)?.display_name
|
||
: "选择提供商模板..."}
|
||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
</Button>
|
||
</PopoverTrigger>
|
||
<PopoverContent className="p-0" align="start" style={{ width: 'var(--radix-popover-trigger-width)' }}>
|
||
<Command>
|
||
<CommandInput placeholder="搜索提供商模板..." />
|
||
<ScrollArea className="h-[300px]">
|
||
<CommandList className="max-h-none overflow-visible">
|
||
<CommandEmpty>未找到匹配的模板</CommandEmpty>
|
||
<CommandGroup>
|
||
{PROVIDER_TEMPLATES.map((template) => (
|
||
<CommandItem
|
||
key={template.id}
|
||
value={template.display_name}
|
||
onSelect={() => handleTemplateChange(template.id)}
|
||
>
|
||
<Check
|
||
className={`mr-2 h-4 w-4 ${
|
||
selectedTemplate === template.id ? "opacity-100" : "opacity-0"
|
||
}`}
|
||
/>
|
||
{template.display_name}
|
||
</CommandItem>
|
||
))}
|
||
</CommandGroup>
|
||
</CommandList>
|
||
</ScrollArea>
|
||
</Command>
|
||
</PopoverContent>
|
||
</Popover>
|
||
<p className="text-xs text-muted-foreground">
|
||
选择预设模板可自动填充 URL 和客户端类型,支持搜索
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-2" data-tour="provider-name-input">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="name" className={formErrors.name ? 'text-destructive' : ''}>名称 *</Label>
|
||
<HelpTooltip
|
||
content={
|
||
<div className="space-y-2">
|
||
<p className="font-medium">提供商名称</p>
|
||
<p>为这个 API 提供商设置一个便于识别的名称，用于在模型配置中引用。</p>
|
||
<ul className="list-disc list-inside space-y-1 text-xs">
|
||
<li>推荐使用厂商官方名称，如 DeepSeek、OpenAI</li>
|
||
<li>名称需要唯一，不能与现有提供商重复</li>
|
||
</ul>
|
||
</div>
|
||
}
|
||
side="right"
|
||
maxWidth="350px"
|
||
/>
|
||
</div>
|
||
<Input
|
||
id="name"
|
||
value={editingProvider?.name || ''}
|
||
onChange={(e) => {
|
||
setEditingProvider((prev) =>
|
||
prev ? { ...prev, name: e.target.value } : null
|
||
)
|
||
if (formErrors.name) {
|
||
setFormErrors((prev) => ({ ...prev, name: undefined }))
|
||
}
|
||
}}
|
||
placeholder="例如: DeepSeek, SiliconFlow"
|
||
className={formErrors.name ? 'border-destructive focus-visible:ring-destructive' : ''}
|
||
/>
|
||
{formErrors.name && (
|
||
<p className="text-xs text-destructive">{formErrors.name}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid gap-2" data-tour="provider-url-input">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="base_url" className={formErrors.base_url ? 'text-destructive' : ''}>基础 URL *</Label>
|
||
<HelpTooltip
|
||
content={
|
||
<div className="space-y-2">
|
||
<p className="font-medium">API 基础地址</p>
|
||
<p>提供商的 API 端点基础 URL，通常以 /v1 结尾。</p>
|
||
<ul className="list-disc list-inside space-y-1 text-xs">
|
||
<li><strong>OpenAI 格式：</strong>https://api.openai.com/v1</li>
|
||
<li><strong>DeepSeek：</strong>https://api.deepseek.com</li>
|
||
<li><strong>硅基流动：</strong>https://api.siliconflow.cn/v1</li>
|
||
<li>选择模板会自动填充正确的 URL</li>
|
||
</ul>
|
||
</div>
|
||
}
|
||
side="right"
|
||
maxWidth="400px"
|
||
/>
|
||
</div>
|
||
<Input
|
||
id="base_url"
|
||
value={editingProvider?.base_url || ''}
|
||
onChange={(e) => {
|
||
setEditingProvider((prev) =>
|
||
prev ? { ...prev, base_url: e.target.value } : null
|
||
)
|
||
if (formErrors.base_url) {
|
||
setFormErrors((prev) => ({ ...prev, base_url: undefined }))
|
||
}
|
||
}}
|
||
placeholder="https://api.example.com/v1"
|
||
disabled={isUsingTemplate}
|
||
className={`${isUsingTemplate ? 'bg-muted cursor-not-allowed' : ''} ${formErrors.base_url ? 'border-destructive focus-visible:ring-destructive' : ''}`}
|
||
/>
|
||
{formErrors.base_url && (
|
||
<p className="text-xs text-destructive">{formErrors.base_url}</p>
|
||
)}
|
||
{isUsingTemplate && !formErrors.base_url && (
|
||
<p className="text-xs text-muted-foreground">
|
||
使用模板时 URL 不可编辑,切换到"自定义"以手动配置
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid gap-2" data-tour="provider-apikey-input">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="api_key" className={formErrors.api_key ? 'text-destructive' : ''}>API Key *</Label>
|
||
<HelpTooltip
|
||
content={
|
||
<div className="space-y-2">
|
||
<p className="font-medium">API 密钥</p>
|
||
<p>从提供商平台获取的身份验证密钥。</p>
|
||
<ul className="list-disc list-inside space-y-1 text-xs">
|
||
<li>通常以 <code>sk-</code> 开头</li>
|
||
<li>请妥善保管，不要泄露给他人</li>
|
||
<li>可以点击眼睛图标切换显示/隐藏</li>
|
||
<li>点击复制图标可快速复制密钥</li>
|
||
</ul>
|
||
</div>
|
||
}
|
||
side="right"
|
||
maxWidth="350px"
|
||
/>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
id="api_key"
|
||
type={showApiKey ? 'text' : 'password'}
|
||
value={editingProvider?.api_key || ''}
|
||
onChange={(e) => {
|
||
setEditingProvider((prev) =>
|
||
prev ? { ...prev, api_key: e.target.value } : null
|
||
)
|
||
if (formErrors.api_key) {
|
||
setFormErrors((prev) => ({ ...prev, api_key: undefined }))
|
||
}
|
||
}}
|
||
placeholder="sk-..."
|
||
className={`flex-1 ${formErrors.api_key ? 'border-destructive focus-visible:ring-destructive' : ''}`}
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="icon"
|
||
onClick={() => setShowApiKey(!showApiKey)}
|
||
title={showApiKey ? '隐藏密钥' : '显示密钥'}
|
||
>
|
||
{showApiKey ? (
|
||
<EyeOff className="h-4 w-4" />
|
||
) : (
|
||
<Eye className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="icon"
|
||
onClick={copyApiKey}
|
||
title="复制密钥"
|
||
>
|
||
<Copy className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
{formErrors.api_key && (
|
||
<p className="text-xs text-destructive">{formErrors.api_key}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="client_type">客户端类型</Label>
|
||
<HelpTooltip
|
||
content={
|
||
<div className="space-y-2">
|
||
<p className="font-medium">API 客户端类型</p>
|
||
<p>指定与提供商通信时使用的 API 协议格式。</p>
|
||
<ul className="list-disc list-inside space-y-1 text-xs">
|
||
<li><strong>OpenAI：</strong>兼容 OpenAI API 格式的提供商</li>
|
||
<li><strong>Gemini：</strong>Google Gemini 专用格式</li>
|
||
<li>大部分第三方提供商都兼容 OpenAI 格式</li>
|
||
</ul>
|
||
</div>
|
||
}
|
||
side="right"
|
||
maxWidth="350px"
|
||
/>
|
||
</div>
|
||
<Select
|
||
value={editingProvider?.client_type || 'openai'}
|
||
onValueChange={(value) =>
|
||
setEditingProvider((prev) =>
|
||
prev ? { ...prev, client_type: value } : null
|
||
)
|
||
}
|
||
disabled={isUsingTemplate}
|
||
>
|
||
<SelectTrigger id="client_type" className={isUsingTemplate ? 'bg-muted cursor-not-allowed' : ''}>
|
||
<SelectValue placeholder="选择客户端类型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="openai">OpenAI</SelectItem>
|
||
<SelectItem value="gemini">Gemini</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
{isUsingTemplate && (
|
||
<p className="text-xs text-muted-foreground">
|
||
使用模板时客户端类型不可编辑,切换到"自定义"以手动配置
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
<div className="grid gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="max_retry">最大重试</Label>
|
||
<HelpTooltip
|
||
content="API 请求失败时的最大重试次数。设置为 0 表示不重试。默认值：2"
|
||
side="top"
|
||
maxWidth="250px"
|
||
/>
|
||
</div>
|
||
<Input
|
||
id="max_retry"
|
||
type="number"
|
||
min="0"
|
||
value={editingProvider?.max_retry ?? ''}
|
||
onChange={(e) => {
|
||
const val = e.target.value === '' ? null : parseInt(e.target.value)
|
||
setEditingProvider((prev) =>
|
||
prev ? { ...prev, max_retry: val } : null
|
||
)
|
||
}}
|
||
placeholder="默认: 2"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="timeout">超时(秒)</Label>
|
||
<HelpTooltip
|
||
content="单次 API 请求的超时时间（秒）。超时后会触发重试或报错。默认值：30 秒"
|
||
side="top"
|
||
maxWidth="250px"
|
||
/>
|
||
</div>
|
||
<Input
|
||
id="timeout"
|
||
type="number"
|
||
min="1"
|
||
value={editingProvider?.timeout ?? ''}
|
||
onChange={(e) => {
|
||
const val = e.target.value === '' ? null : parseInt(e.target.value)
|
||
setEditingProvider((prev) =>
|
||
prev ? { ...prev, timeout: val } : null
|
||
)
|
||
}}
|
||
placeholder="默认: 30"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<Label htmlFor="retry_interval">重试间隔(秒)</Label>
|
||
<HelpTooltip
|
||
content="两次重试之间的等待时间（秒）。适当的间隔可以避免触发 API 限流。默认值：10 秒"
|
||
side="top"
|
||
maxWidth="250px"
|
||
/>
|
||
</div>
|
||
<Input
|
||
id="retry_interval"
|
||
type="number"
|
||
min="1"
|
||
value={editingProvider?.retry_interval ?? ''}
|
||
onChange={(e) => {
|
||
const val = e.target.value === '' ? null : parseInt(e.target.value)
|
||
setEditingProvider((prev) =>
|
||
prev
|
||
? { ...prev, retry_interval: val }
|
||
: null
|
||
)
|
||
}}
|
||
placeholder="默认: 10"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button type="button" variant="outline" onClick={() => setEditDialogOpen(false)} data-tour="provider-cancel-button">
|
||
取消
|
||
</Button>
|
||
<Button type="submit" data-tour="provider-save-button">保存</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 删除确认对话框 */}
|
||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除提供商 "{deletingIndex !== null ? providers[deletingIndex]?.name : ''}" 吗？
|
||
此操作无法撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={handleConfirmDelete}>删除</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 批量删除确认对话框 */}
|
||
<AlertDialog open={batchDeleteDialogOpen} onOpenChange={setBatchDeleteDialogOpen}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认批量删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除选中的 {selectedProviders.size} 个提供商吗？
|
||
此操作无法撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction onClick={handleConfirmBatchDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
|
||
批量删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 删除提供商影响确认对话框 */}
|
||
<AlertDialog open={deleteConfirmState.isOpen} onOpenChange={(open) => setDeleteConfirmState(prev => ({ ...prev, isOpen: open }))}>
|
||
<AlertDialogContent className="max-w-2xl">
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除提供商</AlertDialogTitle>
|
||
<AlertDialogDescription asChild>
|
||
<div className="space-y-3">
|
||
<p>
|
||
您即将删除以下提供商：
|
||
<strong className="text-foreground ml-1">
|
||
{deleteConfirmState.providersToDelete.join(', ')}
|
||
</strong>
|
||
</p>
|
||
<p className="text-yellow-600 dark:text-yellow-500 font-medium">
|
||
⚠️ 此操作将同时删除 {deleteConfirmState.affectedModels.length} 个关联的模型：
|
||
</p>
|
||
<ScrollArea className="h-32 w-full rounded border p-3">
|
||
<div className="space-y-1">
|
||
{deleteConfirmState.affectedModels.map((model: any, idx: number) => (
|
||
<div key={idx} className="text-sm">
|
||
<span className="font-mono text-muted-foreground">•</span>
|
||
<span className="ml-2 font-medium">{model.name}</span>
|
||
<span className="ml-2 text-xs text-muted-foreground">
|
||
({model.model_identifier})
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</ScrollArea>
|
||
<p className="text-sm text-muted-foreground">
|
||
这些模型将从模型列表和所有任务分配中移除。此操作无法撤销。
|
||
</p>
|
||
</div>
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={handleCancelDeleteProvider}>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleConfirmDeleteProvider}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
确认删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
|
||
{/* 重启遮罩层 */}
|
||
<RestartOverlay />
|
||
</div>
|
||
)
|
||
}
|