feat(ai-providers): 优化 OpenAI 编辑页 UI 交互与对齐

This commit is contained in:
moxi
2026-02-11 23:31:43 +08:00
parent 027ab483d4
commit c726fbc379
15 changed files with 869 additions and 238 deletions

View File

@@ -10,6 +10,7 @@ import type { ModelInfo } from '@/utils/models';
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
import { buildApiKeyEntry } from '@/components/providers/utils';
import type { ModelEntry, OpenAIFormState } from '@/components/providers/types';
import type { KeyTestStatus } from '@/stores/useOpenAIEditDraftStore';
type LocationState = { fromAiProviders?: boolean } | null;
@@ -29,6 +30,9 @@ export type OpenAIEditOutletContext = {
setTestStatus: Dispatch<SetStateAction<'idle' | 'loading' | 'success' | 'error'>>;
testMessage: string;
setTestMessage: Dispatch<SetStateAction<string>>;
keyTestStatuses: KeyTestStatus[];
setDraftKeyTestStatus: (keyIndex: number, status: KeyTestStatus) => void;
resetDraftKeyTestStatuses: (count: number) => void;
availableModels: string[];
handleBack: () => void;
handleSave: () => Promise<void>;
@@ -99,11 +103,14 @@ export function AiProvidersOpenAIEditLayout() {
const setDraftTestModel = useOpenAIEditDraftStore((state) => state.setDraftTestModel);
const setDraftTestStatus = useOpenAIEditDraftStore((state) => state.setDraftTestStatus);
const setDraftTestMessage = useOpenAIEditDraftStore((state) => state.setDraftTestMessage);
const setDraftKeyTestStatus = useOpenAIEditDraftStore((state) => state.setDraftKeyTestStatus);
const resetDraftKeyTestStatuses = useOpenAIEditDraftStore((state) => state.resetDraftKeyTestStatuses);
const form = draft?.form ?? buildEmptyForm();
const testModel = draft?.testModel ?? '';
const testStatus = draft?.testStatus ?? 'idle';
const testMessage = draft?.testMessage ?? '';
const keyTestStatuses = draft?.keyTestStatuses ?? [];
const setForm: Dispatch<SetStateAction<OpenAIFormState>> = useCallback(
(action) => {
@@ -134,6 +141,20 @@ export function AiProvidersOpenAIEditLayout() {
[draftKey, setDraftTestMessage]
);
const handleSetDraftKeyTestStatus = useCallback(
(keyIndex: number, status: KeyTestStatus) => {
setDraftKeyTestStatus(draftKey, keyIndex, status);
},
[draftKey, setDraftKeyTestStatus]
);
const handleResetDraftKeyTestStatuses = useCallback(
(count: number) => {
resetDraftKeyTestStatuses(draftKey, count);
},
[draftKey, resetDraftKeyTestStatuses]
);
const initialData = useMemo(() => {
if (editIndex === null) return undefined;
return providers[editIndex];
@@ -215,6 +236,7 @@ export function AiProvidersOpenAIEditLayout() {
testModel: initialTestModel,
testStatus: 'idle',
testMessage: '',
keyTestStatuses: [],
});
} else {
initDraft(draftKey, {
@@ -222,6 +244,7 @@ export function AiProvidersOpenAIEditLayout() {
testModel: '',
testStatus: 'idle',
testMessage: '',
keyTestStatuses: [],
});
}
}, [draft?.initialized, draftKey, initDraft, initialData, loading]);
@@ -359,6 +382,9 @@ export function AiProvidersOpenAIEditLayout() {
setTestStatus,
testMessage,
setTestMessage,
keyTestStatuses,
setDraftKeyTestStatus: handleSetDraftKeyTestStatus,
resetDraftKeyTestStatuses: handleResetDraftKeyTestStatuses,
availableModels,
handleBack,
handleSave,