ros/claude-code-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 优化Providers编辑模态框取消以关闭的删除逻辑和保存逻辑

Browse Source
This commit is contained in:
Reed Qu
2025-08-01 11:30:35 +08:00
parent 03c9b0fa58
commit d929e7cfef
1 changed files with 110 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
ui/src/components/Providers.tsx
View File

@@ -30,6 +30,8 @@ export function Providers() {
const [providerParamInputs, setProviderParamInputs] = useState<Record<string, {name: string, value: string}>>({}); const [providerParamInputs, setProviderParamInputs] = useState<Record<string, {name: string, value: string}>>({});
const [modelParamInputs, setModelParamInputs] = useState<Record<string, {name: string, value: string}>>({}); const [modelParamInputs, setModelParamInputs] = useState<Record<string, {name: string, value: string}>>({});
const [availableTransformers, setAvailableTransformers] = useState<{name: string; endpoint: string | null;}[]>([]); const [availableTransformers, setAvailableTransformers] = useState<{name: string; endpoint: string | null;}[]>([]);
const [editingProviderData, setEditingProviderData] = useState<any>(null);
const [isNewProvider, setIsNewProvider] = useState<boolean>(false);
const comboInputRef = useRef<HTMLInputElement>(null); const comboInputRef = useRef<HTMLInputElement>(null);
// Fetch available transformers when component mounts // Fetch available transformers when component mounts
@@ -65,22 +67,35 @@ export function Providers() {
const handleAddProvider = () => { const handleAddProvider = () => {
const newProviders = [...config.Providers, { name: "", api_base_url: "", api_key: "", models: [] }]; const newProvider = { name: "", api_base_url: "", api_key: "", models: [] };
setConfig({ ...config, Providers: newProviders }); setEditingProviderIndex(config.Providers.length);
setEditingProviderIndex(newProviders.length - 1); setEditingProviderData(newProvider);
setIsNewProvider(true);
};
const handleEditProvider = (index: number) => {
const provider = config.Providers[index];
setEditingProviderIndex(index);
setEditingProviderData(JSON.parse(JSON.stringify(provider))); // 深拷贝
setIsNewProvider(false);
}; };
const handleSaveProvider = () => { const handleSaveProvider = () => {
if (editingProviderIndex !== null && editingProviderData) {
const newProviders = [...config.Providers];
if (isNewProvider) {
newProviders.push(editingProviderData);
} else {
newProviders[editingProviderIndex] = editingProviderData;
}
setConfig({ ...config, Providers: newProviders });
}
setEditingProviderIndex(null); setEditingProviderIndex(null);
setEditingProviderData(null);
setIsNewProvider(false);
}; };
const handleCancelAddProvider = () => { const handleCancelAddProvider = () => {
// If we're adding a new provider, remove it regardless of content
if (editingProviderIndex !== null && editingProviderIndex === config.Providers.length - 1) {
const newProviders = [...config.Providers];
newProviders.pop();
setConfig({ ...config, Providers: newProviders });
}
// Reset fetched models state for this provider // Reset fetched models state for this provider
if (editingProviderIndex !== null) { if (editingProviderIndex !== null) {
setHasFetchedModels(prev => { setHasFetchedModels(prev => {
@@ -90,6 +105,8 @@ export function Providers() {
}); });
} }
setEditingProviderIndex(null); setEditingProviderIndex(null);
setEditingProviderData(null);
setIsNewProvider(false);
}; };
const handleRemoveProvider = (index: number) => { const handleRemoveProvider = (index: number) => {
@@ -100,89 +117,96 @@ export function Providers() {
}; };
const handleProviderChange = (index: number, field: string, value: string) => { const handleProviderChange = (index: number, field: string, value: string) => {
const newProviders = [...config.Providers]; if (editingProviderData) {
newProviders[index][field] = value; const updatedProvider = { ...editingProviderData, [field]: value };
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}
}; };
const handleProviderTransformerChange = (index: number, transformerPath: string) => { const handleProviderTransformerChange = (index: number, transformerPath: string) => {
if (!transformerPath) return; // Don't add empty transformers if (!transformerPath || !editingProviderData) return; // Don't add empty transformers
const newProviders = [...config.Providers]; const updatedProvider = { ...editingProviderData };
if (!newProviders[index].transformer) { if (!updatedProvider.transformer) {
newProviders[index].transformer = { use: [] }; updatedProvider.transformer = { use: [] };
} }
// Add transformer to the use array // Add transformer to the use array
newProviders[index].transformer!.use = [...newProviders[index].transformer!.use, transformerPath]; updatedProvider.transformer.use = [...updatedProvider.transformer.use, transformerPath];
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}; };
const removeProviderTransformerAtIndex = (index: number, transformerIndex: number) => { const removeProviderTransformerAtIndex = (index: number, transformerIndex: number) => {
const newProviders = [...config.Providers]; if (!editingProviderData) return;
if (newProviders[index].transformer) { const updatedProvider = { ...editingProviderData };
const newUseArray = [...newProviders[index].transformer!.use];
if (updatedProvider.transformer) {
const newUseArray = [...updatedProvider.transformer.use];
newUseArray.splice(transformerIndex, 1); newUseArray.splice(transformerIndex, 1);
newProviders[index].transformer!.use = newUseArray; updatedProvider.transformer.use = newUseArray;
// If use array is now empty and no other properties, remove transformer entirely // If use array is now empty and no other properties, remove transformer entirely
if (newUseArray.length === 0 && Object.keys(newProviders[index].transformer!).length === 1) { if (newUseArray.length === 0 && Object.keys(updatedProvider.transformer).length === 1) {
delete newProviders[index].transformer; delete updatedProvider.transformer;
} }
} }
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}; };
const handleModelTransformerChange = (providerIndex: number, model: string, transformerPath: string) => { const handleModelTransformerChange = (providerIndex: number, model: string, transformerPath: string) => {
if (!transformerPath) return; // Don't add empty transformers if (!transformerPath || !editingProviderData) return; // Don't add empty transformers
const newProviders = [...config.Providers]; const updatedProvider = { ...editingProviderData };
if (!newProviders[providerIndex].transformer) { if (!updatedProvider.transformer) {
newProviders[providerIndex].transformer = { use: [] }; updatedProvider.transformer = { use: [] };
} }
// Initialize model transformer if it doesn't exist // Initialize model transformer if it doesn't exist
if (!newProviders[providerIndex].transformer![model]) { if (!updatedProvider.transformer[model]) {
newProviders[providerIndex].transformer![model] = { use: [] }; updatedProvider.transformer[model] = { use: [] };
} }
// Add transformer to the use array // Add transformer to the use array
newProviders[providerIndex].transformer![model].use = [...newProviders[providerIndex].transformer![model].use, transformerPath]; updatedProvider.transformer[model].use = [...updatedProvider.transformer[model].use, transformerPath];
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}; };
const removeModelTransformerAtIndex = (providerIndex: number, model: string, transformerIndex: number) => { const removeModelTransformerAtIndex = (providerIndex: number, model: string, transformerIndex: number) => {
const newProviders = [...config.Providers]; if (!editingProviderData) return;
if (newProviders[providerIndex].transformer && newProviders[providerIndex].transformer![model]) { const updatedProvider = { ...editingProviderData };
const newUseArray = [...newProviders[providerIndex].transformer![model].use];
if (updatedProvider.transformer && updatedProvider.transformer[model]) {
const newUseArray = [...updatedProvider.transformer[model].use];
newUseArray.splice(transformerIndex, 1); newUseArray.splice(transformerIndex, 1);
newProviders[providerIndex].transformer![model].use = newUseArray; updatedProvider.transformer[model].use = newUseArray;
// If use array is now empty and no other properties, remove model transformer entirely // If use array is now empty and no other properties, remove model transformer entirely
if (newUseArray.length === 0 && Object.keys(newProviders[providerIndex].transformer![model]).length === 1) { if (newUseArray.length === 0 && Object.keys(updatedProvider.transformer[model]).length === 1) {
delete newProviders[providerIndex].transformer![model]; delete updatedProvider.transformer[model];
} }
} }
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}; };
const addProviderTransformerParameter = (providerIndex: number, transformerIndex: number, paramName: string, paramValue: string) => { const addProviderTransformerParameter = (providerIndex: number, transformerIndex: number, paramName: string, paramValue: string) => {
const newProviders = [...config.Providers]; if (!editingProviderData) return;
if (!newProviders[providerIndex].transformer) { const updatedProvider = { ...editingProviderData };
newProviders[providerIndex].transformer = { use: [] };
if (!updatedProvider.transformer) {
updatedProvider.transformer = { use: [] };
} }
// Add parameter to the specified transformer in use array // Add parameter to the specified transformer in use array
if (newProviders[providerIndex].transformer!.use && newProviders[providerIndex].transformer!.use.length > transformerIndex) { if (updatedProvider.transformer.use && updatedProvider.transformer.use.length > transformerIndex) {
const targetTransformer = newProviders[providerIndex].transformer!.use[transformerIndex]; const targetTransformer = updatedProvider.transformer.use[transformerIndex];
// If it's already an array with parameters, update it // If it's already an array with parameters, update it
if (Array.isArray(targetTransformer)) { if (Array.isArray(targetTransformer)) {
@@ -203,26 +227,28 @@ export function Providers() {
transformerArray.push(paramsObj); transformerArray.push(paramsObj);
} }
newProviders[providerIndex].transformer!.use[transformerIndex] = transformerArray as string | (string | Record<string, unknown> | { max_tokens: number })[]; updatedProvider.transformer.use[transformerIndex] = transformerArray as string | (string | Record<string, unknown> | { max_tokens: number })[];
} else { } else {
// Convert to array format with parameters // Convert to array format with parameters
const paramsObj = { [paramName]: paramValue }; const paramsObj = { [paramName]: paramValue };
newProviders[providerIndex].transformer!.use[transformerIndex] = [targetTransformer as string, paramsObj]; updatedProvider.transformer.use[transformerIndex] = [targetTransformer as string, paramsObj];
} }
} }
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}; };
const removeProviderTransformerParameterAtIndex = (providerIndex: number, transformerIndex: number, paramName: string) => { const removeProviderTransformerParameterAtIndex = (providerIndex: number, transformerIndex: number, paramName: string) => {
const newProviders = [...config.Providers]; if (!editingProviderData) return;
if (!newProviders[providerIndex].transformer?.use || newProviders[providerIndex].transformer.use.length <= transformerIndex) { const updatedProvider = { ...editingProviderData };
if (!updatedProvider.transformer?.use || updatedProvider.transformer.use.length <= transformerIndex) {
return; return;
} }
const targetTransformer = newProviders[providerIndex].transformer.use[transformerIndex]; const targetTransformer = updatedProvider.transformer.use[transformerIndex];
if (Array.isArray(targetTransformer) && targetTransformer.length > 1) { if (Array.isArray(targetTransformer) && targetTransformer.length > 1) {
const transformerArray = [...targetTransformer]; const transformerArray = [...targetTransformer];
// Check if the second element is an object (parameters object) // Check if the second element is an object (parameters object)
@@ -237,26 +263,28 @@ export function Providers() {
transformerArray[1] = paramsObj; transformerArray[1] = paramsObj;
} }
newProviders[providerIndex].transformer!.use[transformerIndex] = transformerArray; updatedProvider.transformer.use[transformerIndex] = transformerArray;
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
} }
} }
}; };
const addModelTransformerParameter = (providerIndex: number, model: string, transformerIndex: number, paramName: string, paramValue: string) => { const addModelTransformerParameter = (providerIndex: number, model: string, transformerIndex: number, paramName: string, paramValue: string) => {
const newProviders = [...config.Providers]; if (!editingProviderData) return;
if (!newProviders[providerIndex].transformer) { const updatedProvider = { ...editingProviderData };
newProviders[providerIndex].transformer = { use: [] };
if (!updatedProvider.transformer) {
updatedProvider.transformer = { use: [] };
} }
if (!newProviders[providerIndex].transformer![model]) { if (!updatedProvider.transformer[model]) {
newProviders[providerIndex].transformer![model] = { use: [] }; updatedProvider.transformer[model] = { use: [] };
} }
// Add parameter to the specified transformer in use array // Add parameter to the specified transformer in use array
if (newProviders[providerIndex].transformer![model].use && newProviders[providerIndex].transformer![model].use.length > transformerIndex) { if (updatedProvider.transformer[model].use && updatedProvider.transformer[model].use.length > transformerIndex) {
const targetTransformer = newProviders[providerIndex].transformer![model].use[transformerIndex]; const targetTransformer = updatedProvider.transformer[model].use[transformerIndex];
// If it's already an array with parameters, update it // If it's already an array with parameters, update it
if (Array.isArray(targetTransformer)) { if (Array.isArray(targetTransformer)) {
@@ -277,26 +305,28 @@ export function Providers() {
transformerArray.push(paramsObj); transformerArray.push(paramsObj);
} }
newProviders[providerIndex].transformer![model].use[transformerIndex] = transformerArray as string | (string | Record<string, unknown> | { max_tokens: number })[]; updatedProvider.transformer[model].use[transformerIndex] = transformerArray as string | (string | Record<string, unknown> | { max_tokens: number })[];
} else { } else {
// Convert to array format with parameters // Convert to array format with parameters
const paramsObj = { [paramName]: paramValue }; const paramsObj = { [paramName]: paramValue };
newProviders[providerIndex].transformer![model].use[transformerIndex] = [targetTransformer as string, paramsObj]; updatedProvider.transformer[model].use[transformerIndex] = [targetTransformer as string, paramsObj];
} }
} }
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
}; };
const removeModelTransformerParameterAtIndex = (providerIndex: number, model: string, transformerIndex: number, paramName: string) => { const removeModelTransformerParameterAtIndex = (providerIndex: number, model: string, transformerIndex: number, paramName: string) => {
const newProviders = [...config.Providers]; if (!editingProviderData) return;
if (!newProviders[providerIndex].transformer?.[model]?.use || newProviders[providerIndex].transformer[model].use.length <= transformerIndex) { const updatedProvider = { ...editingProviderData };
if (!updatedProvider.transformer?.[model]?.use || updatedProvider.transformer[model].use.length <= transformerIndex) {
return; return;
} }
const targetTransformer = newProviders[providerIndex].transformer[model].use[transformerIndex]; const targetTransformer = updatedProvider.transformer[model].use[transformerIndex];
if (Array.isArray(targetTransformer) && targetTransformer.length > 1) { if (Array.isArray(targetTransformer) && targetTransformer.length > 1) {
const transformerArray = [...targetTransformer]; const transformerArray = [...targetTransformer];
// Check if the second element is an object (parameters object) // Check if the second element is an object (parameters object)
@@ -311,55 +341,45 @@ export function Providers() {
transformerArray[1] = paramsObj; transformerArray[1] = paramsObj;
} }
newProviders[providerIndex].transformer![model].use[transformerIndex] = transformerArray; updatedProvider.transformer[model].use[transformerIndex] = transformerArray;
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
} }
} }
}; };
const handleAddModel = (index: number, model: string) => { const handleAddModel = (index: number, model: string) => {
if (!model.trim()) return; if (!model.trim() || !editingProviderData) return;
// Handle case where config.Providers might be null or undefined const updatedProvider = { ...editingProviderData };
if (!config || !Array.isArray(config.Providers)) return;
// Handle case where the provider at the given index might be null or undefined
if (!config.Providers[index]) return;
const newProviders = [...config.Providers];
// Handle case where provider.models might be null or undefined // Handle case where provider.models might be null or undefined
const models = Array.isArray(newProviders[index].models) ? [...newProviders[index].models] : []; const models = Array.isArray(updatedProvider.models) ? [...updatedProvider.models] : [];
// Check if model already exists // Check if model already exists
if (!models.includes(model.trim())) { if (!models.includes(model.trim())) {
models.push(model.trim()); models.push(model.trim());
newProviders[index].models = models; updatedProvider.models = models;
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
} }
}; };
const handleRemoveModel = (providerIndex: number, modelIndex: number) => { const handleRemoveModel = (providerIndex: number, modelIndex: number) => {
// Handle case where config.Providers might be null or undefined if (!editingProviderData) return;
if (!config || !Array.isArray(config.Providers)) return;
// Handle case where the provider at the given index might be null or undefined const updatedProvider = { ...editingProviderData };
if (!config.Providers[providerIndex]) return;
const newProviders = [...config.Providers];
// Handle case where provider.models might be null or undefined // Handle case where provider.models might be null or undefined
const models = Array.isArray(newProviders[providerIndex].models) ? [...newProviders[providerIndex].models] : []; const models = Array.isArray(updatedProvider.models) ? [...updatedProvider.models] : [];
// Handle case where modelIndex might be out of bounds // Handle case where modelIndex might be out of bounds
if (modelIndex >= 0 && modelIndex < models.length) { if (modelIndex >= 0 && modelIndex < models.length) {
models.splice(modelIndex, 1); models.splice(modelIndex, 1);
newProviders[providerIndex].models = models; updatedProvider.models = models;
setConfig({ ...config, Providers: newProviders }); setEditingProviderData(updatedProvider);
} }
}; };
const editingProvider = editingProviderIndex !== null ? validProviders[editingProviderIndex] : null; const editingProvider = editingProviderData || (editingProviderIndex !== null ? validProviders[editingProviderIndex] : null);
return ( return (
<Card className="flex h-full flex-col rounded-lg border shadow-sm"> <Card className="flex h-full flex-col rounded-lg border shadow-sm">
@@ -370,7 +390,7 @@ export function Providers() {
<CardContent className="flex-grow overflow-y-auto p-4"> <CardContent className="flex-grow overflow-y-auto p-4">
<ProviderList <ProviderList
providers={validProviders} providers={validProviders}
onEdit={setEditingProviderIndex} onEdit={handleEditProvider}
onRemove={setDeletingProviderIndex} onRemove={setDeletingProviderIndex}
/> />
</CardContent> </CardContent>