chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-20 19:50:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: A timeout failure was provided for the model test of OpenAI compatible providers

Browse Source
This commit is contained in:
Supra4E8C
2025-12-15 23:02:33 +08:00
parent 8d606aa456
commit db6d5ca4b5
3 changed files with 1134 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/locales/en.json
View File

@@ -258,6 +258,7 @@
"openai_test_model_placeholder": "Model to test",
"openai_test_action": "Run Test",
"openai_test_running": "Sending test request...",
"openai_test_timeout": "Test request timed out after {{seconds}} seconds.",
"openai_test_success": "Test succeeded. The model responded.",
"openai_test_failed": "Test failed",
"openai_test_select_placeholder": "Choose from current models",

1
src/i18n/locales/zh-CN.json
View File

@@ -258,6 +258,7 @@
"openai_test_model_placeholder": "选择或输入要测试的模型",
"openai_test_action": "发送测试",
"openai_test_running": "正在发送测试请求...",
"openai_test_timeout": "测试请求超时（{{seconds}}秒）。",
"openai_test_success": "测试成功，模型可用。",
"openai_test_failed": "测试失败",
"openai_test_select_placeholder": "从当前模型列表选择",

347
src/pages/AiProvidersPage.tsx
View File

@@ -17,7 +17,7 @@ import type {
OpenAIProviderConfig,
ApiKeyEntry,
AmpcodeConfig,
AmpcodeModelMapping
AmpcodeModelMapping,
} from '@/types';
import type { KeyStats, KeyStatBucket } from '@/utils/usage';
import type { ModelInfo } from '@/utils/models';
@@ -57,7 +57,8 @@ interface AmpcodeFormState {
const DISABLE_ALL_MODELS_RULE = '*';
const hasDisableAllModelsRule = (models?: string[]) =>
Array.isArray(models) && models.some((model) => String(model ?? '').trim() === DISABLE_ALL_MODELS_RULE);
Array.isArray(models) &&
models.some((model) => String(model ?? '').trim() === DISABLE_ALL_MODELS_RULE);
const stripDisableAllModelsRule = (models?: string[]) =>
Array.isArray(models)
@@ -80,16 +81,21 @@ const parseExcludedModels = (text: string): string[] =>
.map((item) => item.trim())
.filter(Boolean);
const excludedModelsToText = (models?: string[]) => (Array.isArray(models) ? models.join('\n') : '');
const excludedModelsToText = (models?: string[]) =>
Array.isArray(models) ? models.join('\n') : '';
const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
const trimmed = String(baseUrl || '').trim().replace(/\/+$/g, '');
const trimmed = String(baseUrl || '')
.trim()
.replace(/\/+$/g, '');
if (!trimmed) return '';
return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
};
const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
const trimmed = String(baseUrl || '').trim().replace(/\/+$/g, '');
const trimmed = String(baseUrl || '')
.trim()
.replace(/\/+$/g, '');
if (!trimmed) return '';
if (trimmed.endsWith('/chat/completions')) {
return trimmed;
@@ -97,6 +103,8 @@ const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
};
const OPENAI_TEST_TIMEOUT_MS = 30_000;
// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
const getStatsBySource = (
apiKey: string,
@@ -133,7 +141,7 @@ const getOpenAIProviderStats = (
const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
apiKey: input?.apiKey ?? '',
proxyUrl: input?.proxyUrl ?? '',
headers: input?.headers ?? {}
headers: input?.headers ?? {},
});
const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[] => {
@@ -142,7 +150,7 @@ const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[
}
return mappings.map((mapping) => ({
name: mapping.from ?? '',
alias: mapping.to ?? ''
alias: mapping.to ?? '',
}));
};
@@ -168,7 +176,7 @@ const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState
upstreamApiKey: '',
restrictManagementToLocalhost: ampcode?.restrictManagementToLocalhost ?? true,
forceModelMappings: ampcode?.forceModelMappings ?? false,
mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings)
mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
});
export function AiProvidersPage() {
@@ -197,9 +205,11 @@ export function AiProvidersPage() {
baseUrl: '',
headers: {},
excludedModels: [],
excludedText: ''
excludedText: '',
});
const [providerForm, setProviderForm] = useState<ProviderKeyConfig & { modelEntries: ModelEntry[]; excludedText: string }>({
const [providerForm, setProviderForm] = useState<
ProviderKeyConfig & { modelEntries: ModelEntry[]; excludedText: string }
>({
apiKey: '',
baseUrl: '',
proxyUrl: '',
@@ -207,16 +217,18 @@ export function AiProvidersPage() {
models: [],
excludedModels: [],
modelEntries: [{ name: '', alias: '' }],
excludedText: ''
excludedText: '',
});
const [openaiForm, setOpenaiForm] = useState<OpenAIFormState>({
name: '',
baseUrl: '',
headers: [],
apiKeyEntries: [buildApiKeyEntry()],
modelEntries: [{ name: '', alias: '' }]
modelEntries: [{ name: '', alias: '' }],
});
const [ampcodeForm, setAmpcodeForm] = useState<AmpcodeFormState>(() => buildAmpcodeFormState(null));
const [ampcodeForm, setAmpcodeForm] = useState<AmpcodeFormState>(() =>
buildAmpcodeFormState(null)
);
const [ampcodeModalLoading, setAmpcodeModalLoading] = useState(false);
const [ampcodeLoaded, setAmpcodeLoaded] = useState(false);
const [ampcodeMappingsDirty, setAmpcodeMappingsDirty] = useState(false);
@@ -230,7 +242,9 @@ export function AiProvidersPage() {
const [openaiDiscoverySearch, setOpenaiDiscoverySearch] = useState('');
const [openaiDiscoverySelected, setOpenaiDiscoverySelected] = useState<Set<string>>(new Set());
const [openaiTestModel, setOpenaiTestModel] = useState('');
const [openaiTestStatus, setOpenaiTestStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [openaiTestStatus, setOpenaiTestStatus] = useState<
'idle' | 'loading' | 'success' | 'error'
>('idle');
const [openaiTestMessage, setOpenaiTestMessage] = useState('');
const [saving, setSaving] = useState(false);
const [configSwitchingKey, setConfigSwitchingKey] = useState<string | null>(null);
@@ -247,10 +261,7 @@ export function AiProvidersPage() {
});
}, [openaiDiscoveryModels, openaiDiscoverySearch]);
const openaiAvailableModels = useMemo(
() =>
openaiForm.modelEntries
.map((entry) => entry.name.trim())
.filter(Boolean),
() => openaiForm.modelEntries.map((entry) => entry.name.trim()).filter(Boolean),
[openaiForm.modelEntries]
);
@@ -297,7 +308,12 @@ export function AiProvidersPage() {
if (config?.codexApiKeys) setCodexConfigs(config.codexApiKeys);
if (config?.claudeApiKeys) setClaudeConfigs(config.claudeApiKeys);
if (config?.openaiCompatibility) setOpenaiProviders(config.openaiCompatibility);
}, [config?.geminiApiKeys, config?.codexApiKeys, config?.claudeApiKeys, config?.openaiCompatibility]);
}, [
config?.geminiApiKeys,
config?.codexApiKeys,
config?.claudeApiKeys,
config?.openaiCompatibility,
]);
const closeModal = () => {
setModal(null);
@@ -306,7 +322,7 @@ export function AiProvidersPage() {
baseUrl: '',
headers: {},
excludedModels: [],
excludedText: ''
excludedText: '',
});
setProviderForm({
apiKey: '',
@@ -316,7 +332,7 @@ export function AiProvidersPage() {
models: [],
excludedModels: [],
modelEntries: [{ name: '', alias: '' }],
excludedText: ''
excludedText: '',
});
setOpenaiForm({
name: '',
@@ -324,7 +340,7 @@ export function AiProvidersPage() {
headers: [],
apiKeyEntries: [buildApiKeyEntry()],
modelEntries: [{ name: '', alias: '' }],
testModel: undefined
testModel: undefined,
});
setAmpcodeForm(buildAmpcodeFormState(null));
setAmpcodeModalLoading(false);
@@ -348,7 +364,7 @@ export function AiProvidersPage() {
const entry = geminiKeys[index];
setGeminiForm({
...entry,
excludedText: excludedModelsToText(entry?.excludedModels)
excludedText: excludedModelsToText(entry?.excludedModels),
});
}
setModal({ type: 'gemini', index });
@@ -361,7 +377,7 @@ export function AiProvidersPage() {
setProviderForm({
...entry,
modelEntries: modelsToEntries(entry?.models),
excludedText: excludedModelsToText(entry?.excludedModels)
excludedText: excludedModelsToText(entry?.excludedModels),
});
}
setModal({ type, index });
@@ -400,11 +416,13 @@ export function AiProvidersPage() {
headers: headersToEntries(entry.headers),
testModel: entry.testModel,
modelEntries,
apiKeyEntries: entry.apiKeyEntries?.length ? entry.apiKeyEntries : [buildApiKeyEntry()]
apiKeyEntries: entry.apiKeyEntries?.length ? entry.apiKeyEntries : [buildApiKeyEntry()],
});
const available = modelEntries.map((m) => m.name.trim()).filter(Boolean);
const initialModel =
entry.testModel && available.includes(entry.testModel) ? entry.testModel : available[0] || '';
entry.testModel && available.includes(entry.testModel)
? entry.testModel
: available[0] || '';
setOpenaiTestModel(initialModel);
} else {
setOpenaiTestModel('');
@@ -422,7 +440,9 @@ export function AiProvidersPage() {
setOpenaiDiscoveryError('');
};
const fetchOpenaiModelDiscovery = async ({ allowFallback = true }: { allowFallback?: boolean } = {}) => {
const fetchOpenaiModelDiscovery = async ({
allowFallback = true,
}: { allowFallback?: boolean } = {}) => {
const baseUrl = openaiForm.baseUrl.trim();
if (!baseUrl) return;
@@ -430,9 +450,15 @@ export function AiProvidersPage() {
setOpenaiDiscoveryError('');
try {
const headers = buildHeaderObject(openaiForm.headers);
const firstKey = openaiForm.apiKeyEntries.find((entry) => entry.apiKey?.trim())?.apiKey?.trim();
const firstKey = openaiForm.apiKeyEntries
.find((entry) => entry.apiKey?.trim())
?.apiKey?.trim();
const hasAuthHeader = Boolean(headers.Authorization || headers['authorization']);
const list = await modelsApi.fetchModels(baseUrl, hasAuthHeader ? undefined : firstKey, headers);
const list = await modelsApi.fetchModels(
baseUrl,
hasAuthHeader ? undefined : firstKey,
headers
);
setOpenaiDiscoveryModels(list);
} catch (err: any) {
if (allowFallback) {
@@ -447,7 +473,9 @@ export function AiProvidersPage() {
}
} else {
setOpenaiDiscoveryModels([]);
setOpenaiDiscoveryError(`${t('ai_providers.openai_models_fetch_error')}: ${err?.message || ''}`);
setOpenaiDiscoveryError(
`${t('ai_providers.openai_models_fetch_error')}: ${err?.message || ''}`
);
}
} finally {
setOpenaiDiscoveryLoading(false);
@@ -483,7 +511,9 @@ export function AiProvidersPage() {
};
const applyOpenaiModelDiscoverySelection = () => {
const selectedModels = openaiDiscoveryModels.filter((model) => openaiDiscoverySelected.has(model.name));
const selectedModels = openaiDiscoveryModels.filter((model) =>
openaiDiscoverySelected.has(model.name)
);
if (!selectedModels.length) {
closeOpenaiModelDiscovery();
return;
@@ -507,12 +537,15 @@ export function AiProvidersPage() {
const mergedEntries = Array.from(mergedMap.values());
setOpenaiForm((prev) => ({
...prev,
modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }]
modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
}));
closeOpenaiModelDiscovery();
if (addedCount > 0) {
showNotification(t('ai_providers.openai_models_fetch_added', { count: addedCount }), 'success');
showNotification(
t('ai_providers.openai_models_fetch_added', { count: addedCount }),
'success'
);
}
};
@@ -574,7 +607,7 @@ export function AiProvidersPage() {
const customHeaders = buildHeaderObject(openaiForm.headers);
const headers: Record<string, string> = {
'Content-Type': 'application/json',
...customHeaders
...customHeaders,
};
if (!headers.Authorization && !headers['authorization']) {
headers.Authorization = `Bearer ${firstKeyEntry.apiKey.trim()}`;
@@ -582,16 +615,20 @@ export function AiProvidersPage() {
setOpenaiTestStatus('loading');
setOpenaiTestMessage(t('ai_providers.openai_test_running'));
const controller = new AbortController();
const timeoutId = window.setTimeout(() => controller.abort(), OPENAI_TEST_TIMEOUT_MS);
try {
const response = await fetch(endpoint, {
method: 'POST',
headers,
signal: controller.signal,
body: JSON.stringify({
model: modelName,
messages: [{ role: 'user', content: 'Hi' }],
stream: false,
max_tokens: 5
})
max_tokens: 5,
}),
});
const rawText = await response.text();
@@ -612,8 +649,16 @@ export function AiProvidersPage() {
setOpenaiTestMessage(t('ai_providers.openai_test_success'));
} catch (err: any) {
setOpenaiTestStatus('error');
if (err?.name === 'AbortError') {
setOpenaiTestMessage(
t('ai_providers.openai_test_timeout', { seconds: OPENAI_TEST_TIMEOUT_MS / 1000 })
);
} else {
setOpenaiTestMessage(`${t('ai_providers.openai_test_failed')}: ${err?.message || ''}`);
}
} finally {
window.clearTimeout(timeoutId);
}
};
const clearAmpcodeUpstreamApiKey = async () => {
@@ -656,7 +701,9 @@ export function AiProvidersPage() {
await ampcodeApi.clearUpstreamUrl();
}
await ampcodeApi.updateRestrictManagementToLocalhost(ampcodeForm.restrictManagementToLocalhost);
await ampcodeApi.updateRestrictManagementToLocalhost(
ampcodeForm.restrictManagementToLocalhost
);
await ampcodeApi.updateForceModelMappings(ampcodeForm.forceModelMappings);
if (ampcodeLoaded || ampcodeMappingsDirty) {
@@ -676,7 +723,7 @@ export function AiProvidersPage() {
...previous,
upstreamUrl: upstreamUrl || undefined,
restrictManagementToLocalhost: ampcodeForm.restrictManagementToLocalhost,
forceModelMappings: ampcodeForm.forceModelMappings
forceModelMappings: ampcodeForm.forceModelMappings,
};
if (overrideKey) {
@@ -711,7 +758,7 @@ export function AiProvidersPage() {
apiKey: geminiForm.apiKey.trim(),
baseUrl: geminiForm.baseUrl?.trim() || undefined,
headers: buildHeaderObject(headersToEntries(geminiForm.headers as any)),
excludedModels: parseExcludedModels(geminiForm.excludedText)
excludedModels: parseExcludedModels(geminiForm.excludedText),
};
const nextList =
modal?.type === 'gemini' && modal.index !== null
@@ -723,7 +770,9 @@ export function AiProvidersPage() {
updateConfigValue('gemini-api-key', nextList);
clearCache('gemini-api-key');
const message =
modal?.index !== null ? t('notification.gemini_key_updated') : t('notification.gemini_key_added');
modal?.index !== null
? t('notification.gemini_key_updated')
: t('notification.gemini_key_added');
showNotification(message, 'success');
closeModal();
} catch (err: any) {
@@ -772,7 +821,10 @@ export function AiProvidersPage() {
try {
await providersApi.saveGeminiKeys(nextList);
showNotification(enabled ? t('notification.config_enabled') : t('notification.config_disabled'), 'success');
showNotification(
enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
'success'
);
} catch (err: any) {
setGeminiKeys(previousList);
updateConfigValue('gemini-api-key', previousList);
@@ -814,7 +866,10 @@ export function AiProvidersPage() {
} else {
await providersApi.saveClaudeConfigs(nextList);
}
showNotification(enabled ? t('notification.config_enabled') : t('notification.config_disabled'), 'success');
showNotification(
enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
'success'
);
} catch (err: any) {
if (provider === 'codex') {
setCodexConfigs(previousList);
@@ -848,7 +903,7 @@ export function AiProvidersPage() {
proxyUrl: providerForm.proxyUrl?.trim() || undefined,
headers: buildHeaderObject(headersToEntries(providerForm.headers as any)),
models: entriesToModels(providerForm.modelEntries),
excludedModels: parseExcludedModels(providerForm.excludedText)
excludedModels: parseExcludedModels(providerForm.excludedText),
};
const nextList =
@@ -862,7 +917,9 @@ export function AiProvidersPage() {
updateConfigValue('codex-api-key', nextList);
clearCache('codex-api-key');
const message =
modal?.index !== null ? t('notification.codex_config_updated') : t('notification.codex_config_added');
modal?.index !== null
? t('notification.codex_config_updated')
: t('notification.codex_config_added');
showNotification(message, 'success');
} else {
await providersApi.saveClaudeConfigs(nextList);
@@ -870,7 +927,9 @@ export function AiProvidersPage() {
updateConfigValue('claude-api-key', nextList);
clearCache('claude-api-key');
const message =
modal?.index !== null ? t('notification.claude_config_updated') : t('notification.claude_config_added');
modal?.index !== null
? t('notification.claude_config_updated')
: t('notification.claude_config_added');
showNotification(message, 'success');
}
@@ -915,8 +974,8 @@ export function AiProvidersPage() {
apiKeyEntries: openaiForm.apiKeyEntries.map((entry) => ({
apiKey: entry.apiKey.trim(),
proxyUrl: entry.proxyUrl?.trim() || undefined,
headers: entry.headers
}))
headers: entry.headers,
})),
};
if (openaiForm.testModel) payload.testModel = openaiForm.testModel.trim();
const models = entriesToModels(openaiForm.modelEntries);
@@ -932,7 +991,9 @@ export function AiProvidersPage() {
updateConfigValue('openai-compatibility', nextList);
clearCache('openai-compatibility');
const message =
modal?.index !== null ? t('notification.openai_provider_updated') : t('notification.openai_provider_added');
modal?.index !== null
? t('notification.openai_provider_updated')
: t('notification.openai_provider_added');
showNotification(message, 'success');
closeModal();
} catch (err: any) {
@@ -965,7 +1026,10 @@ export function AiProvidersPage() {
const removeEntry = (idx: number) => {
const next = list.filter((_, i) => i !== idx);
setOpenaiForm((prev) => ({ ...prev, apiKeyEntries: next.length ? next : [buildApiKeyEntry()] }));
setOpenaiForm((prev) => ({
...prev,
apiKeyEntries: next.length ? next : [buildApiKeyEntry()],
}));
};
const addEntry = () => {
@@ -1043,7 +1107,11 @@ export function AiProvidersPage() {
{items.map((item, index) => {
const rowDisabled = options?.getRowDisabled ? options.getRowDisabled(item, index) : false;
return (
<div key={keyField(item)} className="item-row" style={rowDisabled ? { opacity: 0.6 } : undefined}>
<div
key={keyField(item)}
className="item-row"
style={rowDisabled ? { opacity: 0.6 } : undefined}
>
<div className="item-meta">{renderContent(item, index)}</div>
<div className="item-actions">
<Button
@@ -1137,7 +1205,10 @@ export function AiProvidersPage() {
</div>
<div className={styles.modelTagList}>
{excludedModels.map((model) => (
<span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
<span
key={model}
className={`${styles.modelTag} ${styles.excludedModelTag}`}
>
<span className={styles.modelName}>{model}</span>
</span>
))}
@@ -1169,7 +1240,7 @@ export function AiProvidersPage() {
disabled={disableControls || loading || saving || Boolean(configSwitchingKey)}
onChange={(value) => void setConfigEnabled('gemini', index, value)}
/>
)
),
}
)}
</Card>
@@ -1239,7 +1310,10 @@ export function AiProvidersPage() {
</div>
<div className={styles.modelTagList}>
{excludedModels.map((model) => (
<span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
<span
key={model}
className={`${styles.modelTag} ${styles.excludedModelTag}`}
>
<span className={styles.modelName}>{model}</span>
</span>
))}
@@ -1271,7 +1345,7 @@ export function AiProvidersPage() {
disabled={disableControls || loading || saving || Boolean(configSwitchingKey)}
onChange={(value) => void setConfigEnabled('codex', index, value)}
/>
)
),
}
)}
</Card>
@@ -1357,7 +1431,10 @@ export function AiProvidersPage() {
</div>
<div className={styles.modelTagList}>
{excludedModels.map((model) => (
<span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
<span
key={model}
className={`${styles.modelTag} ${styles.excludedModelTag}`}
>
<span className={styles.modelName}>{model}</span>
</span>
))}
@@ -1389,7 +1466,7 @@ export function AiProvidersPage() {
disabled={disableControls || loading || saving || Boolean(configSwitchingKey)}
onChange={(value) => void setConfigEnabled('claude', index, value)}
/>
)
),
}
)}
</Card>
@@ -1411,30 +1488,50 @@ export function AiProvidersPage() {
) : (
<>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_upstream_url_label')}:</span>
<span className={styles.fieldValue}>{config?.ampcode?.upstreamUrl || t('common.not_set')}</span>
</div>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_upstream_api_key_label')}:</span>
<span className={styles.fieldLabel}>
{t('ai_providers.ampcode_upstream_url_label')}:
</span>
<span className={styles.fieldValue}>
{config?.ampcode?.upstreamApiKey ? maskApiKey(config.ampcode.upstreamApiKey) : t('common.not_set')}
{config?.ampcode?.upstreamUrl || t('common.not_set')}
</span>
</div>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_restrict_management_label')}:</span>
<span className={styles.fieldLabel}>
{t('ai_providers.ampcode_upstream_api_key_label')}:
</span>
<span className={styles.fieldValue}>
{(config?.ampcode?.restrictManagementToLocalhost ?? true) ? t('common.yes') : t('common.no')}
{config?.ampcode?.upstreamApiKey
? maskApiKey(config.ampcode.upstreamApiKey)
: t('common.not_set')}
</span>
</div>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_force_model_mappings_label')}:</span>
<span className={styles.fieldLabel}>
{t('ai_providers.ampcode_restrict_management_label')}:
</span>
<span className={styles.fieldValue}>
{(config?.ampcode?.forceModelMappings ?? false) ? t('common.yes') : t('common.no')}
{(config?.ampcode?.restrictManagementToLocalhost ?? true)
? t('common.yes')
: t('common.no')}
</span>
</div>
<div className={styles.fieldRow}>
<span className={styles.fieldLabel}>
{t('ai_providers.ampcode_force_model_mappings_label')}:
</span>
<span className={styles.fieldValue}>
{(config?.ampcode?.forceModelMappings ?? false)
? t('common.yes')
: t('common.no')}
</span>
</div>
<div className={styles.fieldRow} style={{ marginTop: 8 }}>
<span className={styles.fieldLabel}>{t('ai_providers.ampcode_model_mappings_count')}:</span>
<span className={styles.fieldValue}>{config?.ampcode?.modelMappings?.length || 0}</span>
<span className={styles.fieldLabel}>
{t('ai_providers.ampcode_model_mappings_count')}:
</span>
<span className={styles.fieldValue}>
{config?.ampcode?.modelMappings?.length || 0}
</span>
</div>
{config?.ampcode?.modelMappings?.length ? (
<div className={styles.modelTagList}>
@@ -1446,7 +1543,9 @@ export function AiProvidersPage() {
))}
{config.ampcode.modelMappings.length > 5 && (
<span className={styles.modelTag}>
<span className={styles.modelName}>+{config.ampcode.modelMappings.length - 5}</span>
<span className={styles.modelName}>
+{config.ampcode.modelMappings.length - 5}
</span>
</span>
)}
</div>
@@ -1504,15 +1603,21 @@ export function AiProvidersPage() {
return (
<div key={entryIndex} className={styles.apiKeyEntryCard}>
<span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
<span className={styles.apiKeyEntryKey}>{maskApiKey(entry.apiKey)}</span>
<span className={styles.apiKeyEntryKey}>
{maskApiKey(entry.apiKey)}
</span>
{entry.proxyUrl && (
<span className={styles.apiKeyEntryProxy}>{entry.proxyUrl}</span>
)}
<div className={styles.apiKeyEntryStats}>
<span className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}>
<span
className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}
>
<IconCheck size={12} /> {entryStats.success}
</span>
<span className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}>
<span
className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}
>
<IconX size={12} /> {entryStats.failure}
</span>
</div>
@@ -1524,7 +1629,9 @@ export function AiProvidersPage() {
)}
{/* 模型数量标签 */}
<div className={styles.fieldRow} style={{ marginTop: '8px' }}>
<span className={styles.fieldLabel}>{t('ai_providers.openai_models_count')}:</span>
<span className={styles.fieldLabel}>
{t('ai_providers.openai_models_count')}:
</span>
<span className={styles.fieldValue}>{item.models?.length || 0}</span>
</div>
{/* 模型列表徽章 */}
@@ -1575,7 +1682,11 @@ export function AiProvidersPage() {
<Button variant="secondary" onClick={closeModal} disabled={ampcodeSaving}>
{t('common.cancel')}
</Button>
<Button onClick={saveAmpcode} loading={ampcodeSaving} disabled={disableControls || ampcodeModalLoading}>
<Button
onClick={saveAmpcode}
loading={ampcodeSaving}
disabled={disableControls || ampcodeModalLoading}
>
{t('common.save')}
</Button>
</>
@@ -1595,14 +1706,27 @@ export function AiProvidersPage() {
placeholder={t('ai_providers.ampcode_upstream_api_key_placeholder')}
type="password"
value={ampcodeForm.upstreamApiKey}
onChange={(e) => setAmpcodeForm((prev) => ({ ...prev, upstreamApiKey: e.target.value }))}
onChange={(e) =>
setAmpcodeForm((prev) => ({ ...prev, upstreamApiKey: e.target.value }))
}
disabled={ampcodeModalLoading || ampcodeSaving}
hint={t('ai_providers.ampcode_upstream_api_key_hint')}
/>
<div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: -8, marginBottom: 12, flexWrap: 'wrap' }}>
<div
style={{
display: 'flex',
gap: 8,
alignItems: 'center',
marginTop: -8,
marginBottom: 12,
flexWrap: 'wrap',
}}
>
<div className="hint" style={{ margin: 0 }}>
{t('ai_providers.ampcode_upstream_api_key_current', {
key: config?.ampcode?.upstreamApiKey ? maskApiKey(config.ampcode.upstreamApiKey) : t('common.not_set')
key: config?.ampcode?.upstreamApiKey
? maskApiKey(config.ampcode.upstreamApiKey)
: t('common.not_set'),
})}
</div>
<Button
@@ -1619,7 +1743,9 @@ export function AiProvidersPage() {
<ToggleSwitch
label={t('ai_providers.ampcode_restrict_management_label')}
checked={ampcodeForm.restrictManagementToLocalhost}
onChange={(value) => setAmpcodeForm((prev) => ({ ...prev, restrictManagementToLocalhost: value }))}
onChange={(value) =>
setAmpcodeForm((prev) => ({ ...prev, restrictManagementToLocalhost: value }))
}
disabled={ampcodeModalLoading || ampcodeSaving}
/>
<div className="hint">{t('ai_providers.ampcode_restrict_management_hint')}</div>
@@ -1629,7 +1755,9 @@ export function AiProvidersPage() {
<ToggleSwitch
label={t('ai_providers.ampcode_force_model_mappings_label')}
checked={ampcodeForm.forceModelMappings}
onChange={(value) => setAmpcodeForm((prev) => ({ ...prev, forceModelMappings: value }))}
onChange={(value) =>
setAmpcodeForm((prev) => ({ ...prev, forceModelMappings: value }))
}
disabled={ampcodeModalLoading || ampcodeSaving}
/>
<div className="hint">{t('ai_providers.ampcode_force_model_mappings_hint')}</div>
@@ -1657,7 +1785,9 @@ export function AiProvidersPage() {
open={modal?.type === 'gemini'}
onClose={closeModal}
title={
modal?.index !== null ? t('ai_providers.gemini_edit_modal_title') : t('ai_providers.gemini_add_modal_title')
modal?.index !== null
? t('ai_providers.gemini_edit_modal_title')
: t('ai_providers.gemini_add_modal_title')
}
footer={
<>
@@ -1684,7 +1814,9 @@ export function AiProvidersPage() {
/>
<HeaderInputList
entries={headersToEntries(geminiForm.headers as any)}
onChange={(entries) => setGeminiForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
onChange={(entries) =>
setGeminiForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))
}
addLabel={t('common.custom_headers_add')}
keyPlaceholder={t('common.custom_headers_key_placeholder')}
valuePlaceholder={t('common.custom_headers_value_placeholder')}
@@ -1720,7 +1852,10 @@ export function AiProvidersPage() {
<Button variant="secondary" onClick={closeModal} disabled={saving}>
{t('common.cancel')}
</Button>
<Button onClick={() => saveProvider(modal?.type as 'codex' | 'claude')} loading={saving}>
<Button
onClick={() => saveProvider(modal?.type as 'codex' | 'claude')}
loading={saving}
>
{t('common.save')}
</Button>
</>
@@ -1755,7 +1890,9 @@ export function AiProvidersPage() {
/>
<HeaderInputList
entries={headersToEntries(providerForm.headers as any)}
onChange={(entries) => setProviderForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
onChange={(entries) =>
setProviderForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))
}
addLabel={t('common.custom_headers_add')}
keyPlaceholder={t('common.custom_headers_key_placeholder')}
valuePlaceholder={t('common.custom_headers_value_placeholder')}
@@ -1764,7 +1901,9 @@ export function AiProvidersPage() {
<label>{t('ai_providers.claude_models_label')}</label>
<ModelInputList
entries={providerForm.modelEntries}
onChange={(entries) => setProviderForm((prev) => ({ ...prev, modelEntries: entries }))}
onChange={(entries) =>
setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
}
addLabel={t('ai_providers.claude_models_add_btn')}
namePlaceholder={t('common.model_name_placeholder')}
aliasPlaceholder={t('common.model_alias_placeholder')}
@@ -1777,7 +1916,9 @@ export function AiProvidersPage() {
className="input"
placeholder={t('ai_providers.excluded_models_placeholder')}
value={providerForm.excludedText}
onChange={(e) => setProviderForm((prev) => ({ ...prev, excludedText: e.target.value }))}
onChange={(e) =>
setProviderForm((prev) => ({ ...prev, excludedText: e.target.value }))
}
rows={4}
/>
<div className="hint">{t('ai_providers.excluded_models_hint')}</div>
@@ -1789,7 +1930,9 @@ export function AiProvidersPage() {
open={modal?.type === 'openai'}
onClose={closeModal}
title={
modal?.index !== null ? t('ai_providers.openai_edit_modal_title') : t('ai_providers.openai_add_modal_title')
modal?.index !== null
? t('ai_providers.openai_edit_modal_title')
: t('ai_providers.openai_add_modal_title')
}
footer={
<>
@@ -1836,7 +1979,12 @@ export function AiProvidersPage() {
aliasPlaceholder={t('common.model_alias_placeholder')}
disabled={saving}
/>
<Button variant="secondary" size="sm" onClick={openOpenaiModelDiscovery} disabled={saving}>
<Button
variant="secondary"
size="sm"
onClick={openOpenaiModelDiscovery}
disabled={saving}
>
{t('ai_providers.openai_models_fetch_button')}
</Button>
</div>
@@ -1886,7 +2034,11 @@ export function AiProvidersPage() {
{openaiTestMessage && (
<div
className={`status-badge ${
openaiTestStatus === 'error' ? 'error' : openaiTestStatus === 'success' ? 'success' : 'muted'
openaiTestStatus === 'error'
? 'error'
: openaiTestStatus === 'success'
? 'success'
: 'muted'
}`}
>
{openaiTestMessage}
@@ -1908,10 +2060,17 @@ export function AiProvidersPage() {
width={720}
footer={
<>
<Button variant="secondary" onClick={closeOpenaiModelDiscovery} disabled={openaiDiscoveryLoading}>
<Button
variant="secondary"
onClick={closeOpenaiModelDiscovery}
disabled={openaiDiscoveryLoading}
>
{t('ai_providers.openai_models_fetch_back')}
</Button>
<Button onClick={applyOpenaiModelDiscoverySelection} disabled={openaiDiscoveryLoading}>
<Button
onClick={applyOpenaiModelDiscoverySelection}
disabled={openaiDiscoveryLoading}
>
{t('ai_providers.openai_models_fetch_apply')}
</Button>
</>
@@ -1964,9 +2123,13 @@ export function AiProvidersPage() {
<div className={styles.modelDiscoveryMeta}>
<div className={styles.modelDiscoveryName}>
{model.name}
{model.alias && <span className={styles.modelDiscoveryAlias}>{model.alias}</span>}
{model.alias && (
<span className={styles.modelDiscoveryAlias}>{model.alias}</span>
)}
</div>
{model.description && <div className={styles.modelDiscoveryDesc}>{model.description}</div>}
{model.description && (
<div className={styles.modelDiscoveryDesc}>{model.description}</div>
)}
</div>
</label>
);