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

feat: enhance provider configuration UX with custom URL support and API key links

Browse Source 
- Add custom base URL input for custom providers
  - New "Request URL" field appears only in custom mode
  - Automatically syncs with ANTHROPIC_BASE_URL in config
  - Includes helpful amber-styled hint about Claude API compatibility

- Add "Get API Key" links for non-official providers
  - Shows for cn_official, aggregator, and third_party categories
  - Links point to provider's official website
  - Styled as subtle helper text (text-xs, gray-500)
  - Positioned closely under API key input for better visual grouping

- Improve UI consistency and hints
  - Unify all hint boxes to use amber color scheme (amber-50/amber-200/amber-600)
  - Update model placeholders to latest versions (GLM-4.5, GLM-4.5-Air)
  - Simplify provider names (remove version numbers and redundant text)

- Update provider presets
  - GLM models: glm-4-plus → GLM-4.5, glm-4-flash → GLM-4.5-Air
  - Qwen models: qwen-coder-turbo → qwen3-coder-plus
  - Cleaner naming: "Claude官方登录" → "Claude官方", "DeepSeek v3.1" → "DeepSeek"

- Fix Kimi model selector behavior
  - Remove API key requirement for displaying selector
  - Avoid showing duplicate model input fields for Kimi preset
  - Improve hint message clarity
This commit is contained in:
Jason
2025-09-12 20:14:59 +08:00
parent 687c7de111
commit e63b4e069b
3 changed files with 196 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/components/ProviderForm.tsx
View File

@@ -54,6 +54,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// Claude 模型配置状态 // Claude 模型配置状态
const [claudeModel, setClaudeModel] = useState(""); const [claudeModel, setClaudeModel] = useState("");
const [claudeSmallFastModel, setClaudeSmallFastModel] = useState(""); const [claudeSmallFastModel, setClaudeSmallFastModel] = useState("");
const [baseUrl, setBaseUrl] = useState(""); // 新增：基础 URL 状态
// Codex 特有的状态 // Codex 特有的状态
const [codexAuth, setCodexAuth] = useState(""); const [codexAuth, setCodexAuth] = useState("");
@@ -136,6 +137,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
if (config.env) { if (config.env) {
setClaudeModel(config.env.ANTHROPIC_MODEL || ""); setClaudeModel(config.env.ANTHROPIC_MODEL || "");
setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || ""); setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
setBaseUrl(config.env.ANTHROPIC_BASE_URL || ""); // 初始化基础 URL
// 初始化 Kimi 模型选择 // 初始化 Kimi 模型选择
setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || ""); setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
@@ -293,6 +295,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// 清空 API Key 输入框，让用户重新输入 // 清空 API Key 输入框，让用户重新输入
setApiKey(""); setApiKey("");
setBaseUrl(""); // 清空基础 URL
// 同步选择框状态 // 同步选择框状态
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString); const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
@@ -338,6 +341,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
settingsConfig: JSON.stringify(customTemplate, null, 2), settingsConfig: JSON.stringify(customTemplate, null, 2),
}); });
setApiKey(""); setApiKey("");
setBaseUrl("https://your-api-endpoint.com"); // 设置默认的基础 URL
setDisableCoAuthored(false); setDisableCoAuthored(false);
setClaudeModel(""); setClaudeModel("");
setClaudeSmallFastModel(""); setClaudeSmallFastModel("");
@@ -403,6 +407,26 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
setDisableCoAuthored(hasCoAuthoredDisabled); setDisableCoAuthored(hasCoAuthoredDisabled);
}; };
// 处理基础 URL 变化
const handleBaseUrlChange = (url: string) => {
setBaseUrl(url);
try {
const config = JSON.parse(formData.settingsConfig || "{}");
if (!config.env) {
config.env = {};
}
config.env.ANTHROPIC_BASE_URL = url.trim();
setFormData(prev => ({
...prev,
settingsConfig: JSON.stringify(config, null, 2)
}));
} catch {
// ignore
}
};
// Codex: 处理 API Key 输入并写回 auth.json // Codex: 处理 API Key 输入并写回 auth.json
const handleCodexApiKeyChange = (key: string) => { const handleCodexApiKeyChange = (key: string) => {
setCodexApiKey(key); setCodexApiKey(key);
@@ -446,6 +470,32 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
// 综合判断是否应该显示 Kimi 模型选择器 // 综合判断是否应该显示 Kimi 模型选择器
const shouldShowKimiSelector = isKimiPreset || isEditingKimi; const shouldShowKimiSelector = isKimiPreset || isEditingKimi;
// 判断是否显示基础 URL 输入框（仅自定义模式显示）
const showBaseUrlInput = selectedPreset === -1 && !isCodex;
// 判断是否显示"获取 API Key"链接（国产官方和聚合站显示）
const shouldShowApiKeyLink = !isCodex && !isOfficialPreset &&
(category === "cn_official" || category === "aggregator" ||
(selectedPreset !== null && selectedPreset >= 0 &&
(providerPresets[selectedPreset]?.category === "cn_official" ||
providerPresets[selectedPreset]?.category === "aggregator")));
// 获取当前供应商的网址
const getCurrentWebsiteUrl = () => {
if (selectedPreset !== null && selectedPreset >= 0) {
return providerPresets[selectedPreset]?.websiteUrl || "";
}
return formData.websiteUrl || "";
};
// 获取 Codex 当前供应商的网址
const getCurrentCodexWebsiteUrl = () => {
if (selectedCodexPreset !== null && selectedCodexPreset >= 0) {
return codexProviderPresets[selectedCodexPreset]?.websiteUrl || "";
}
return formData.websiteUrl || "";
};
// Codex: 控制显示 API Key 与官方标记 // Codex: 控制显示 API Key 与官方标记
const getCodexAuthApiKey = (authString: string): string => { const getCodexAuthApiKey = (authString: string): string => {
try { try {
@@ -470,6 +520,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
codexProviderPresets[selectedCodexPreset]?.category === "official")) || codexProviderPresets[selectedCodexPreset]?.category === "official")) ||
category === "official"; category === "official";
// 判断是否显示 Codex 的"获取 API Key"链接
const shouldShowCodexApiKeyLink = isCodex && !isCodexOfficialPreset &&
(category === "cn_official" || category === "aggregator" || category === "third_party" ||
(selectedCodexPreset !== null && selectedCodexPreset >= 0 &&
(codexProviderPresets[selectedCodexPreset]?.category === "cn_official" ||
codexProviderPresets[selectedCodexPreset]?.category === "aggregator" ||
codexProviderPresets[selectedCodexPreset]?.category === "third_party")));
// 处理模型输入变化，自动更新 JSON 配置 // 处理模型输入变化，自动更新 JSON 配置
const handleModelChange = (field: 'ANTHROPIC_MODEL' | 'ANTHROPIC_SMALL_FAST_MODEL', value: string) => { const handleModelChange = (field: 'ANTHROPIC_MODEL' | 'ANTHROPIC_SMALL_FAST_MODEL', value: string) => {
if (field === 'ANTHROPIC_MODEL') { if (field === 'ANTHROPIC_MODEL') {
@@ -649,22 +707,62 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
</div> </div>
{!isCodex && showApiKey && ( {!isCodex && showApiKey && (
<ApiKeyInput <div className="space-y-1">
value={apiKey} <ApiKeyInput
onChange={handleApiKeyChange} value={apiKey}
required={!isOfficialPreset} onChange={handleApiKeyChange}
placeholder={ required={!isOfficialPreset}
isOfficialPreset placeholder={
? "官方登录无需填写 API Key，直接保存即可" isOfficialPreset
: shouldShowKimiSelector ? "官方登录无需填写 API Key，直接保存即可"
? "sk-xxx-api-key-here (填写后可获取模型列表)" : shouldShowKimiSelector
: "只需要填这里，下方配置会自动填充" ? "填写后可获取模型列表"
} : "只需要填这里，下方配置会自动填充"
disabled={isOfficialPreset} }
/> disabled={isOfficialPreset}
/>
{shouldShowApiKeyLink && getCurrentWebsiteUrl() && (
<div className="-mt-1 pl-1">
<a
href={getCurrentWebsiteUrl()}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-gray-500 hover:text-blue-600 transition-colors"
>
获取 API Key →
</a>
</div>
)}
</div>
)} )}
{!isCodex && shouldShowKimiSelector && apiKey.trim() && ( {/* 基础 URL 输入框 - 仅在自定义模式下显示 */}
{!isCodex && showBaseUrlInput && (
<div className="space-y-2">
<label
htmlFor="baseUrl"
className="block text-sm font-medium text-gray-900"
>
请求地址
</label>
<input
type="url"
id="baseUrl"
value={baseUrl}
onChange={(e) => handleBaseUrlChange(e.target.value)}
placeholder="https://your-api-endpoint.com"
autoComplete="off"
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
/>
<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
<p className="text-xs text-amber-600">
💡 填写兼容 Claude API 的服务端点地址
</p>
</div>
</div>
)}
{!isCodex && shouldShowKimiSelector && (
<KimiModelSelector <KimiModelSelector
apiKey={apiKey} apiKey={apiKey}
anthropicModel={kimiAnthropicModel} anthropicModel={kimiAnthropicModel}
@@ -675,23 +773,37 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
)} )}
{isCodex && showCodexApiKey && ( {isCodex && showCodexApiKey && (
<ApiKeyInput <div className="space-y-1">
id="codexApiKey" <ApiKeyInput
label="API Key" id="codexApiKey"
value={codexApiKey} label="API Key"
onChange={handleCodexApiKeyChange} value={codexApiKey}
placeholder={ onChange={handleCodexApiKeyChange}
isCodexOfficialPreset placeholder={
? "官方无需填写 API Key，直接保存即可" isCodexOfficialPreset
: "只需要填这里，下方 auth.json 会自动填充" ? "官方无需填写 API Key，直接保存即可"
} : "只需要填这里，下方 auth.json 会自动填充"
disabled={isCodexOfficialPreset} }
required={ disabled={isCodexOfficialPreset}
selectedCodexPreset !== null && required={
selectedCodexPreset >= 0 && selectedCodexPreset !== null &&
!isCodexOfficialPreset selectedCodexPreset >= 0 &&
} !isCodexOfficialPreset
/> }
/>
{shouldShowCodexApiKeyLink && getCurrentCodexWebsiteUrl() && (
<div className="-mt-1 pl-1">
<a
href={getCurrentCodexWebsiteUrl()}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-gray-500 hover:text-blue-600 transition-colors"
>
获取 API Key →
</a>
</div>
)}
</div>
)} )}
{/* Claude 或 Codex 的配置部分 */} {/* Claude 或 Codex 的配置部分 */}
@@ -716,43 +828,51 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
/> />
) : ( ) : (
<> <>
{/* 可选的模型配置输入框 - 简化为一行 */} {/* 可选的模型配置输入框 - 仅在非官方且非 Kimi 时显示 */}
{!isOfficialPreset && ( {!isOfficialPreset && !shouldShowKimiSelector && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<label <div className="space-y-2">
htmlFor="anthropicModel" <label
className="block text-sm font-medium text-gray-900" htmlFor="anthropicModel"
> className="block text-sm font-medium text-gray-900"
主模型 (可选) >
</label> 主模型 (可选)
<input </label>
type="text" <input
id="anthropicModel" type="text"
value={claudeModel} id="anthropicModel"
onChange={(e) => handleModelChange('ANTHROPIC_MODEL', e.target.value)} value={claudeModel}
placeholder="例如: deepseek-chat" onChange={(e) => handleModelChange('ANTHROPIC_MODEL', e.target.value)}
autoComplete="off" placeholder="例如: GLM-4.5"
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors" autoComplete="off"
/> className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
/>
</div>
<div className="space-y-2">
<label
htmlFor="anthropicSmallFastModel"
className="block text-sm font-medium text-gray-900"
>
快速模型 (可选)
</label>
<input
type="text"
id="anthropicSmallFastModel"
value={claudeSmallFastModel}
onChange={(e) => handleModelChange('ANTHROPIC_SMALL_FAST_MODEL', e.target.value)}
placeholder="例如: GLM-4.5-Air"
autoComplete="off"
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
/>
</div>
</div> </div>
<div className="space-y-2"> <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
<label <p className="text-xs text-amber-600">
htmlFor="anthropicSmallFastModel" 💡 留空将使用供应商的默认模型
className="block text-sm font-medium text-gray-900" </p>
>
快速模型 (可选)
</label>
<input
type="text"
id="anthropicSmallFastModel"
value={claudeSmallFastModel}
onChange={(e) => handleModelChange('ANTHROPIC_SMALL_FAST_MODEL', e.target.value)}
placeholder="例如: glm-4-flash"
autoComplete="off"
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
/>
</div> </div>
</div> </div>
)} )}

6
src/components/ProviderForm/KimiModelSelector.tsx
View File

@@ -172,9 +172,9 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div> </div>
{!apiKey.trim() && ( {!apiKey.trim() && (
<div className="p-3 bg-gray-100 border border-gray-200 rounded-lg"> <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
<p className="text-xs text-gray-500"> <p className="text-xs text-amber-600">
📝 请先填写 API Key（格式：sk-xxx-api-key-here）以获取可用模型列表 💡 填写 API Key 后将自动获取可用模型列表
</p> </p>
</div> </div>
)} )}

14
src/config/providerPresets.ts
View File

@@ -13,7 +13,7 @@ export interface ProviderPreset {
export const providerPresets: ProviderPreset[] = [ export const providerPresets: ProviderPreset[] = [
{ {
name: "Claude官方登录", name: "Claude官方",
websiteUrl: "https://www.anthropic.com/claude-code", websiteUrl: "https://www.anthropic.com/claude-code",
settingsConfig: { settingsConfig: {
env: {}, env: {},
@@ -22,7 +22,7 @@ export const providerPresets: ProviderPreset[] = [
category: "official", category: "official",
}, },
{ {
name: "DeepSeek v3.1", name: "DeepSeek",
websiteUrl: "https://platform.deepseek.com", websiteUrl: "https://platform.deepseek.com",
settingsConfig: { settingsConfig: {
env: { env: {
@@ -41,21 +41,21 @@ export const providerPresets: ProviderPreset[] = [
env: { env: {
ANTHROPIC_BASE_URL: "https://open.bigmodel.cn/api/anthropic", ANTHROPIC_BASE_URL: "https://open.bigmodel.cn/api/anthropic",
ANTHROPIC_AUTH_TOKEN: "", ANTHROPIC_AUTH_TOKEN: "",
ANTHROPIC_MODEL: "glm-4-plus", ANTHROPIC_MODEL: "GLM-4.5",
ANTHROPIC_SMALL_FAST_MODEL: "glm-4-flash", ANTHROPIC_SMALL_FAST_MODEL: "GLM-4.5-Air",
}, },
}, },
category: "cn_official", category: "cn_official",
}, },
{ {
name: "千问Qwen-Coder", name: "Qwen-Coder",
websiteUrl: "https://bailian.console.aliyun.com", websiteUrl: "https://bailian.console.aliyun.com",
settingsConfig: { settingsConfig: {
env: { env: {
ANTHROPIC_BASE_URL: "https://dashscope.aliyuncs.com/api/v2/apps/claude-code-proxy", ANTHROPIC_BASE_URL: "https://dashscope.aliyuncs.com/api/v2/apps/claude-code-proxy",
ANTHROPIC_AUTH_TOKEN: "", ANTHROPIC_AUTH_TOKEN: "",
ANTHROPIC_MODEL: "qwen-coder-turbo", ANTHROPIC_MODEL: "qwen3-coder-plus",
ANTHROPIC_SMALL_FAST_MODEL: "qwen-coder-turbo", ANTHROPIC_SMALL_FAST_MODEL: "qwen3-coder-plus",
}, },
}, },
category: "cn_official", category: "cn_official",