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:
55
src/components/providers/forms/hooks/useModelState.ts
Normal file
55
src/components/providers/forms/hooks/useModelState.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { useState, useCallback } from "react";
|
||||
|
||||
interface UseModelStateProps {
|
||||
settingsConfig: string;
|
||||
onConfigChange: (config: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理模型选择状态
|
||||
* 支持 ANTHROPIC_MODEL 和 ANTHROPIC_SMALL_FAST_MODEL
|
||||
*/
|
||||
export function useModelState({
|
||||
settingsConfig,
|
||||
onConfigChange,
|
||||
}: UseModelStateProps) {
|
||||
const [claudeModel, setClaudeModel] = useState("");
|
||||
const [claudeSmallFastModel, setClaudeSmallFastModel] = useState("");
|
||||
|
||||
const handleModelChange = useCallback(
|
||||
(field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL", value: string) => {
|
||||
if (field === "ANTHROPIC_MODEL") {
|
||||
setClaudeModel(value);
|
||||
} else {
|
||||
setClaudeSmallFastModel(value);
|
||||
}
|
||||
|
||||
try {
|
||||
const currentConfig = settingsConfig
|
||||
? JSON.parse(settingsConfig)
|
||||
: { env: {} };
|
||||
if (!currentConfig.env) currentConfig.env = {};
|
||||
|
||||
if (value.trim()) {
|
||||
currentConfig.env[field] = value.trim();
|
||||
} else {
|
||||
delete currentConfig.env[field];
|
||||
}
|
||||
|
||||
onConfigChange(JSON.stringify(currentConfig, null, 2));
|
||||
} catch (err) {
|
||||
// 如果 JSON 解析失败,不做处理
|
||||
console.error("Failed to update model config:", err);
|
||||
}
|
||||
},
|
||||
[settingsConfig, onConfigChange],
|
||||
);
|
||||
|
||||
return {
|
||||
claudeModel,
|
||||
setClaudeModel,
|
||||
claudeSmallFastModel,
|
||||
setClaudeSmallFastModel,
|
||||
handleModelChange,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user