admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Codex provider configuration wizard with display name field

Browse Source 
- Add separate display name field for provider (supports Chinese)
- Keep provider code field for internal identifier (English only)
- Add onNameChange callback to update provider name from wizard
- Improve code formatting consistency in ProviderForm
This commit is contained in:
farion1231
2025-09-21 20:37:01 +08:00
parent d041ea7a56
commit 615c431875
2 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/ProviderForm.tsx
View File

@@ -12,7 +12,11 @@ import {
validateJsonConfig, validateJsonConfig,
} from "../utils/providerConfigUtils"; } from "../utils/providerConfigUtils";
import { providerPresets } from "../config/providerPresets"; import { providerPresets } from "../config/providerPresets";
import { codexProviderPresets, generateThirdPartyAuth, generateThirdPartyConfig } from "../config/codexProviderPresets"; import {
codexProviderPresets,
generateThirdPartyAuth,
generateThirdPartyConfig,
} from "../config/codexProviderPresets";
import PresetSelector from "./ProviderForm/PresetSelector"; import PresetSelector from "./ProviderForm/PresetSelector";
import ApiKeyInput from "./ProviderForm/ApiKeyInput"; import ApiKeyInput from "./ProviderForm/ApiKeyInput";
import ClaudeConfigEditor from "./ProviderForm/ClaudeConfigEditor"; import ClaudeConfigEditor from "./ProviderForm/ClaudeConfigEditor";
@@ -60,7 +64,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
: "", : "",
}); });
const [category, setCategory] = useState<ProviderCategory | undefined>( const [category, setCategory] = useState<ProviderCategory | undefined>(
initialData?.category, initialData?.category
); );
// Claude 模型配置状态 // Claude 模型配置状态
@@ -72,10 +76,11 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const [codexAuth, setCodexAuthState] = useState(""); const [codexAuth, setCodexAuthState] = useState("");
const [codexConfig, setCodexConfigState] = useState(""); const [codexConfig, setCodexConfigState] = useState("");
const [codexApiKey, setCodexApiKey] = useState(""); const [codexApiKey, setCodexApiKey] = useState("");
const [isCodexTemplateModalOpen, setIsCodexTemplateModalOpen] = useState(false); const [isCodexTemplateModalOpen, setIsCodexTemplateModalOpen] =
useState(false);
// -1 表示自定义，null 表示未选择，>= 0 表示预设索引 // -1 表示自定义，null 表示未选择，>= 0 表示预设索引
const [selectedCodexPreset, setSelectedCodexPreset] = useState<number | null>( const [selectedCodexPreset, setSelectedCodexPreset] = useState<number | null>(
showPresets && isCodex ? -1 : null, showPresets && isCodex ? -1 : null
); );
const setCodexAuth = (value: string) => { const setCodexAuth = (value: string) => {
@@ -140,7 +145,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
} }
try { try {
const stored = window.localStorage.getItem( const stored = window.localStorage.getItem(
CODEX_COMMON_CONFIG_STORAGE_KEY, CODEX_COMMON_CONFIG_STORAGE_KEY
); );
if (stored && stored.trim()) { if (stored && stored.trim()) {
return stored.trim(); return stored.trim();
@@ -154,7 +159,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const isUpdatingFromCodexCommonConfig = useRef(false); const isUpdatingFromCodexCommonConfig = useRef(false);
// -1 表示自定义，null 表示未选择，>= 0 表示预设索引 // -1 表示自定义，null 表示未选择，>= 0 表示预设索引
const [selectedPreset, setSelectedPreset] = useState<number | null>( const [selectedPreset, setSelectedPreset] = useState<number | null>(
showPresets ? -1 : null, showPresets ? -1 : null
); );
const [apiKey, setApiKey] = useState(""); const [apiKey, setApiKey] = useState("");
const [codexAuthError, setCodexAuthError] = useState(""); const [codexAuthError, setCodexAuthError] = useState("");
@@ -223,11 +228,11 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const configString = JSON.stringify( const configString = JSON.stringify(
initialData.settingsConfig, initialData.settingsConfig,
null, null,
2, 2
); );
const hasCommon = hasCommonConfigSnippet( const hasCommon = hasCommonConfigSnippet(
configString, configString,
commonConfigSnippet, commonConfigSnippet
); );
setUseCommonConfig(hasCommon); setUseCommonConfig(hasCommon);
setSettingsConfigError(validateSettingsConfig(configString)); setSettingsConfigError(validateSettingsConfig(configString));
@@ -243,14 +248,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (config.env) { if (config.env) {
setClaudeModel(config.env.ANTHROPIC_MODEL || ""); setClaudeModel(config.env.ANTHROPIC_MODEL || "");
setClaudeSmallFastModel( setClaudeSmallFastModel(
config.env.ANTHROPIC_SMALL_FAST_MODEL || "", config.env.ANTHROPIC_SMALL_FAST_MODEL || ""
); );
setBaseUrl(config.env.ANTHROPIC_BASE_URL || ""); // 初始化基础 URL setBaseUrl(config.env.ANTHROPIC_BASE_URL || ""); // 初始化基础 URL
// 初始化 Kimi 模型选择 // 初始化 Kimi 模型选择
setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || ""); setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
setKimiAnthropicSmallFastModel( setKimiAnthropicSmallFastModel(
config.env.ANTHROPIC_SMALL_FAST_MODEL || "", config.env.ANTHROPIC_SMALL_FAST_MODEL || ""
); );
} }
} }
@@ -258,7 +263,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// Codex 初始化时检查 TOML 通用配置 // Codex 初始化时检查 TOML 通用配置
const hasCommon = hasTomlCommonConfigSnippet( const hasCommon = hasTomlCommonConfigSnippet(
codexConfig, codexConfig,
codexCommonConfigSnippet, codexCommonConfigSnippet
); );
setUseCodexCommonConfig(hasCommon); setUseCodexCommonConfig(hasCommon);
} }
@@ -278,7 +283,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (selectedPreset !== null && selectedPreset >= 0) { if (selectedPreset !== null && selectedPreset >= 0) {
const preset = providerPresets[selectedPreset]; const preset = providerPresets[selectedPreset];
setCategory( setCategory(
preset?.category || (preset?.isOfficial ? "official" : undefined), preset?.category || (preset?.isOfficial ? "official" : undefined)
); );
} else if (selectedPreset === -1) { } else if (selectedPreset === -1) {
setCategory("custom"); setCategory("custom");
@@ -287,7 +292,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (selectedCodexPreset !== null && selectedCodexPreset >= 0) { if (selectedCodexPreset !== null && selectedCodexPreset >= 0) {
const preset = codexProviderPresets[selectedCodexPreset]; const preset = codexProviderPresets[selectedCodexPreset];
setCategory( setCategory(
preset?.category || (preset?.isOfficial ? "official" : undefined), preset?.category || (preset?.isOfficial ? "official" : undefined)
); );
} else if (selectedCodexPreset === -1) { } else if (selectedCodexPreset === -1) {
setCategory("custom"); setCategory("custom");
@@ -302,7 +307,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (commonConfigSnippet.trim()) { if (commonConfigSnippet.trim()) {
window.localStorage.setItem( window.localStorage.setItem(
COMMON_CONFIG_STORAGE_KEY, COMMON_CONFIG_STORAGE_KEY,
commonConfigSnippet, commonConfigSnippet
); );
} else { } else {
window.localStorage.removeItem(COMMON_CONFIG_STORAGE_KEY); window.localStorage.removeItem(COMMON_CONFIG_STORAGE_KEY);
@@ -365,7 +370,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
} }
} else { } else {
const currentSettingsError = validateSettingsConfig( const currentSettingsError = validateSettingsConfig(
formData.settingsConfig, formData.settingsConfig
); );
setSettingsConfigError(currentSettingsError); setSettingsConfigError(currentSettingsError);
if (currentSettingsError) { if (currentSettingsError) {
@@ -396,7 +401,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
}; };
const handleChange = ( const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => { ) => {
const { name, value } = e.target; const { name, value } = e.target;
@@ -426,7 +431,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const { updatedConfig, error: snippetError } = updateCommonConfigSnippet( const { updatedConfig, error: snippetError } = updateCommonConfigSnippet(
formData.settingsConfig, formData.settingsConfig,
commonConfigSnippet, commonConfigSnippet,
checked, checked
); );
if (snippetError) { if (snippetError) {
@@ -459,7 +464,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const { updatedConfig } = updateCommonConfigSnippet( const { updatedConfig } = updateCommonConfigSnippet(
formData.settingsConfig, formData.settingsConfig,
previousSnippet, previousSnippet,
false, false
); );
// 直接更新 formData，不通过 handleChange // 直接更新 formData，不通过 handleChange
updateSettingsConfigValue(updatedConfig); updateSettingsConfigValue(updatedConfig);
@@ -481,7 +486,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const removeResult = updateCommonConfigSnippet( const removeResult = updateCommonConfigSnippet(
formData.settingsConfig, formData.settingsConfig,
previousSnippet, previousSnippet,
false, false
); );
if (removeResult.error) { if (removeResult.error) {
setCommonConfigError(removeResult.error); setCommonConfigError(removeResult.error);
@@ -493,7 +498,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const addResult = updateCommonConfigSnippet( const addResult = updateCommonConfigSnippet(
removeResult.updatedConfig, removeResult.updatedConfig,
value, value,
true, true
); );
if (addResult.error) { if (addResult.error) {
@@ -533,7 +538,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
}); });
setSettingsConfigError(validateSettingsConfig(configString)); setSettingsConfigError(validateSettingsConfig(configString));
setCategory( setCategory(
preset.category || (preset.isOfficial ? "official" : undefined), preset.category || (preset.isOfficial ? "official" : undefined)
); );
// 设置选中的预设 // 设置选中的预设
@@ -559,7 +564,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (preset.name?.includes("Kimi")) { if (preset.name?.includes("Kimi")) {
setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || ""); setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
setKimiAnthropicSmallFastModel( setKimiAnthropicSmallFastModel(
config.env.ANTHROPIC_SMALL_FAST_MODEL || "", config.env.ANTHROPIC_SMALL_FAST_MODEL || ""
); );
} }
} else { } else {
@@ -605,7 +610,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// Codex: 应用预设 // Codex: 应用预设
const applyCodexPreset = ( const applyCodexPreset = (
preset: (typeof codexProviderPresets)[0], preset: (typeof codexProviderPresets)[0],
index: number, index: number
) => { ) => {
const authString = JSON.stringify(preset.auth || {}, null, 2); const authString = JSON.stringify(preset.auth || {}, null, 2);
setCodexAuth(authString); setCodexAuth(authString);
@@ -619,7 +624,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
setSelectedCodexPreset(index); setSelectedCodexPreset(index);
setCategory( setCategory(
preset.category || (preset.isOfficial ? "official" : undefined), preset.category || (preset.isOfficial ? "official" : undefined)
); );
// 清空 API Key，让用户重新输入 // 清空 API Key，让用户重新输入
@@ -657,7 +662,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const configString = setApiKeyInConfig( const configString = setApiKeyInConfig(
formData.settingsConfig, formData.settingsConfig,
key.trim(), key.trim(),
{ createIfMissing: selectedPreset !== null && selectedPreset !== -1 }, { createIfMissing: selectedPreset !== null && selectedPreset !== -1 }
); );
// 更新表单配置 // 更新表单配置
@@ -700,11 +705,8 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// Codex: 处理通用配置开关 // Codex: 处理通用配置开关
const handleCodexCommonConfigToggle = (checked: boolean) => { const handleCodexCommonConfigToggle = (checked: boolean) => {
const snippet = codexCommonConfigSnippet.trim(); const snippet = codexCommonConfigSnippet.trim();
const { updatedConfig, error: snippetError } = updateTomlCommonConfigSnippet( const { updatedConfig, error: snippetError } =
codexConfig, updateTomlCommonConfigSnippet(codexConfig, snippet, checked);
snippet,
checked,
);
if (snippetError) { if (snippetError) {
setCodexCommonConfigError(snippetError); setCodexCommonConfigError(snippetError);
@@ -735,7 +737,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const { updatedConfig } = updateTomlCommonConfigSnippet( const { updatedConfig } = updateTomlCommonConfigSnippet(
codexConfig, codexConfig,
previousSnippet, previousSnippet,
false, false
); );
setCodexConfig(updatedConfig); setCodexConfig(updatedConfig);
setUseCodexCommonConfig(false); setUseCodexCommonConfig(false);
@@ -748,12 +750,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
const removeResult = updateTomlCommonConfigSnippet( const removeResult = updateTomlCommonConfigSnippet(
codexConfig, codexConfig,
previousSnippet, previousSnippet,
false, false
); );
const addResult = updateTomlCommonConfigSnippet( const addResult = updateTomlCommonConfigSnippet(
removeResult.updatedConfig, removeResult.updatedConfig,
sanitizedValue, sanitizedValue,
true, true
); );
if (addResult.error) { if (addResult.error) {
@@ -775,7 +777,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
try { try {
window.localStorage.setItem( window.localStorage.setItem(
CODEX_COMMON_CONFIG_STORAGE_KEY, CODEX_COMMON_CONFIG_STORAGE_KEY,
sanitizedValue, sanitizedValue
); );
} catch { } catch {
// ignore localStorage 写入失败 // ignore localStorage 写入失败
@@ -788,7 +790,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (!isUpdatingFromCodexCommonConfig.current) { if (!isUpdatingFromCodexCommonConfig.current) {
const hasCommon = hasTomlCommonConfigSnippet( const hasCommon = hasTomlCommonConfigSnippet(
value, value,
codexCommonConfigSnippet, codexCommonConfigSnippet
); );
setUseCodexCommonConfig(hasCommon); setUseCodexCommonConfig(hasCommon);
} }
@@ -901,7 +903,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// 处理模型输入变化，自动更新 JSON 配置 // 处理模型输入变化，自动更新 JSON 配置
const handleModelChange = ( const handleModelChange = (
field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL", field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL",
value: string, value: string
) => { ) => {
if (field === "ANTHROPIC_MODEL") { if (field === "ANTHROPIC_MODEL") {
setClaudeModel(value); setClaudeModel(value);
@@ -931,7 +933,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// Kimi 模型选择处理函数 // Kimi 模型选择处理函数
const handleKimiModelChange = ( const handleKimiModelChange = (
field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL", field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL",
value: string, value: string
) => { ) => {
if (field === "ANTHROPIC_MODEL") { if (field === "ANTHROPIC_MODEL") {
setKimiAnthropicModel(value); setKimiAnthropicModel(value);
@@ -956,7 +958,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
useEffect(() => { useEffect(() => {
if (!initialData) return; if (!initialData) return;
const parsedKey = getApiKeyFromConfig( const parsedKey = getApiKeyFromConfig(
JSON.stringify(initialData.settingsConfig), JSON.stringify(initialData.settingsConfig)
); );
if (parsedKey) setApiKey(parsedKey); if (parsedKey) setApiKey(parsedKey);
}, [initialData]); }, [initialData]);
@@ -1222,7 +1224,13 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
onWebsiteUrlChange={(url) => { onWebsiteUrlChange={(url) => {
setFormData({ setFormData({
...formData, ...formData,
websiteUrl: url websiteUrl: url,
});
}}
onNameChange={(name) => {
setFormData({
...formData,
name,
}); });
}} }}
isTemplateModalOpen={isCodexTemplateModalOpen} isTemplateModalOpen={isCodexTemplateModalOpen}
@@ -1268,7 +1276,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
onChange={(e) => onChange={(e) =>
handleModelChange( handleModelChange(
"ANTHROPIC_SMALL_FAST_MODEL", "ANTHROPIC_SMALL_FAST_MODEL",
e.target.value, e.target.value
) )
} }
placeholder="例如: GLM-4.5-Air" placeholder="例如: GLM-4.5-Air"

46
src/components/ProviderForm/CodexConfigEditor.tsx
View File

@@ -39,6 +39,8 @@ interface CodexConfigEditorProps {
isTemplateModalOpen?: boolean; // 新增：模态框状态 isTemplateModalOpen?: boolean; // 新增：模态框状态
setIsTemplateModalOpen?: (open: boolean) => void; // 新增：设置模态框状态 setIsTemplateModalOpen?: (open: boolean) => void; // 新增：设置模态框状态
onNameChange?: (name: string) => void; // 新增：更新供应商名称回调
} }
const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
@@ -66,6 +68,8 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
onWebsiteUrlChange, onWebsiteUrlChange,
onNameChange,
isTemplateModalOpen: externalTemplateModalOpen, isTemplateModalOpen: externalTemplateModalOpen,
setIsTemplateModalOpen: externalSetTemplateModalOpen, setIsTemplateModalOpen: externalSetTemplateModalOpen,
@@ -100,6 +104,8 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
// 移除自动填充逻辑，因为现在在点击自定义按钮时就已经填充 // 移除自动填充逻辑，因为现在在点击自定义按钮时就已经填充
const [templateDisplayName, setTemplateDisplayName] = useState("");
useEffect(() => { useEffect(() => {
if (commonConfigError && !isCommonConfigModalOpen) { if (commonConfigError && !isCommonConfigModalOpen) {
setIsCommonConfigModalOpen(true); setIsCommonConfigModalOpen(true);
@@ -175,6 +181,13 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
} }
} }
if (onNameChange) {
const trimmedName = templateDisplayName.trim();
if (trimmedName) {
onNameChange(trimmedName);
}
}
setTemplateApiKey(""); setTemplateApiKey("");
setTemplateProviderName(""); setTemplateProviderName("");
@@ -185,6 +198,8 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
setTemplateModelName("gpt-5-codex"); setTemplateModelName("gpt-5-codex");
setTemplateDisplayName("");
closeTemplateModal(); closeTemplateModal();
}; };
@@ -228,13 +243,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
onChange={(e) => handleAuthChange(e.target.value)} onChange={(e) => handleAuthChange(e.target.value)}
onBlur={onAuthBlur} onBlur={onAuthBlur}
placeholder={`{ placeholder={`{
"OPENAI_API_KEY": "sk-your-api-key-here" "OPENAI_API_KEY": "sk-your-api-key-here"
}`} }`}
rows={6} rows={6}
required required
@@ -383,6 +392,30 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
供应商名称 供应商名称
</label> </label>
<input
type="text"
value={templateDisplayName}
onChange={(e) => {
setTemplateDisplayName(e.target.value);
if (onNameChange) {
onNameChange(e.target.value);
}
}}
onKeyDown={handleTemplateInputKeyDown}
placeholder="例如：Codex 官方（可选）"
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
/>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
将显示在供应商列表中，可使用中文
</p>
</div>
<div>
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
供应商代号（英文）
</label>
<input <input
type="text" type="text"
value={templateProviderName} value={templateProviderName}
@@ -496,7 +529,6 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
</div> </div>
</div> </div>
)} )}
</div> </div>
<div className="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-100 p-6 dark:border-gray-800 dark:bg-gray-800"> <div className="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-100 p-6 dark:border-gray-800 dark:bg-gray-800">