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