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-18 02:30:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(edit-page): replace select element with custom Select component for model testing

Browse Source
This commit is contained in:
Supra4E8C
2026-02-14 20:11:12 +08:00
parent 52cf9d86c0
commit 6d96c92233
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/pages/AiProvidersOpenAIEditPage.tsx
View File

@@ -6,6 +6,7 @@ import { Card } from '@/components/ui/Card';
import { HeaderInputList } from '@/components/ui/HeaderInputList';
import { Input } from '@/components/ui/Input';
import { ModelInputList } from '@/components/ui/ModelInputList';
import { Select } from '@/components/ui/Select';
import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell';
import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack';
import { useNotificationStore } from '@/stores';
@@ -139,6 +140,20 @@ export function AiProvidersOpenAIEditPage() {
const canSave = !disableControls && !loading && !saving && !invalidIndexParam && !invalidIndex && !isTestingKeys;
const hasConfiguredModels = form.modelEntries.some((entry) => entry.name.trim());
const hasTestableKeys = form.apiKeyEntries.some((entry) => entry.apiKey?.trim());
const modelSelectOptions = useMemo(() => {
const seen = new Set<string>();
return form.modelEntries.reduce<Array<{ value: string; label: string }>>((acc, entry) => {
const name = entry.name.trim();
if (!name || seen.has(name)) return acc;
seen.add(name);
const alias = entry.alias.trim();
acc.push({
value: name,
label: alias && alias !== name ? `${name} (${alias})` : name,
});
return acc;
}, []);
}, [form.modelEntries]);
const connectivityConfigSignature = useMemo(() => {
const headersSignature = form.headers
.map((entry) => `${entry.key.trim()}:${entry.value.trim()}`)
@@ -589,34 +604,23 @@ export function AiProvidersOpenAIEditPage() {
<span className={styles.modelTestHint}>{t('ai_providers.openai_test_hint')}</span>
</div>
<div className={styles.modelTestControls}>
<select
className={`input ${styles.openaiTestSelect}`}
<Select
value={testModel}
onChange={(e) => {
setTestModel(e.target.value);
options={modelSelectOptions}
onChange={(value) => {
setTestModel(value);
setTestStatus('idle');
setTestMessage('');
}}
disabled={saving || disableControls || isTestingKeys || testStatus === 'loading' || availableModels.length === 0}
>
<option value="">
{availableModels.length
placeholder={
availableModels.length
? t('ai_providers.openai_test_select_placeholder')
: t('ai_providers.openai_test_select_empty')}
</option>
{form.modelEntries
.filter((entry) => entry.name.trim())
.map((entry, idx) => {
const name = entry.name.trim();
const alias = entry.alias.trim();
const label = alias && alias !== name ? `${name} (${alias})` : name;
return (
<option key={`${name}-${idx}`} value={name}>
{label}
</option>
);
})}
</select>
: t('ai_providers.openai_test_select_empty')
}
className={styles.openaiTestSelect}
ariaLabel={t('ai_providers.openai_test_title')}
disabled={saving || disableControls || isTestingKeys || testStatus === 'loading' || availableModels.length === 0}
/>
<Button
variant={testStatus === 'error' ? 'danger' : 'secondary'}
size="sm"