refactor: create modular hooks and integrate API key input
- Create custom hooks for state management: - useProviderCategory: manages provider category state - useApiKeyState: manages API key input with auto-sync to config - useBaseUrlState: manages base URL for Claude and Codex - useModelState: manages model selection state - Integrate API key input into simplified ProviderForm: - Add ApiKeyInput component for Claude mode - Auto-populate API key into settings config - Disable for official providers - Fix EndpointSpeedTest type errors: - Fix import paths to use @ alias - Add temporary type definitions - Format all TODO comments properly - Remove incorrect type assertions - Comment out unimplemented window.api checks All TypeScript type checks now pass.
This commit is contained in:
63
src/components/providers/forms/hooks/useApiKeyState.ts
Normal file
63
src/components/providers/forms/hooks/useApiKeyState.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import {
|
||||
getApiKeyFromConfig,
|
||||
setApiKeyInConfig,
|
||||
hasApiKeyField,
|
||||
} from "@/utils/providerConfigUtils";
|
||||
|
||||
interface UseApiKeyStateProps {
|
||||
initialConfig?: string;
|
||||
onConfigChange: (config: string) => void;
|
||||
selectedPresetId: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理 API Key 输入状态
|
||||
* 自动同步 API Key 和 JSON 配置
|
||||
*/
|
||||
export function useApiKeyState({
|
||||
initialConfig,
|
||||
onConfigChange,
|
||||
selectedPresetId,
|
||||
}: UseApiKeyStateProps) {
|
||||
const [apiKey, setApiKey] = useState(() => {
|
||||
if (initialConfig) {
|
||||
return getApiKeyFromConfig(initialConfig);
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
const handleApiKeyChange = useCallback(
|
||||
(key: string) => {
|
||||
setApiKey(key);
|
||||
|
||||
const configString = setApiKeyInConfig(
|
||||
initialConfig || "{}",
|
||||
key.trim(),
|
||||
{
|
||||
createIfMissing:
|
||||
selectedPresetId !== null && selectedPresetId !== "custom",
|
||||
},
|
||||
);
|
||||
|
||||
onConfigChange(configString);
|
||||
},
|
||||
[initialConfig, selectedPresetId, onConfigChange],
|
||||
);
|
||||
|
||||
const showApiKey = useCallback(
|
||||
(config: string, isEditMode: boolean) => {
|
||||
return (
|
||||
selectedPresetId !== null || (!isEditMode && hasApiKeyField(config))
|
||||
);
|
||||
},
|
||||
[selectedPresetId],
|
||||
);
|
||||
|
||||
return {
|
||||
apiKey,
|
||||
setApiKey,
|
||||
handleApiKeyChange,
|
||||
showApiKey,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user