mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-24 12:44:18 +08:00
feat(ui): add quick-set button for model mapping fields (#2179)
* feat(ui): add quick-set button for model mapping fields Add a "一键设置" (Quick Set) button in the model mapping section to simplify provider configuration. When users enter a model name in any of the five model fields, they can now click this button to populate all fields with that same value. This addresses the UX friction of manually filling all five model mapping fields (主模型, 推理模型, Haiku, Sonnet, Opus) when the provider uses the same model name across all request types. Implementation: - Add Wand2 icon import from lucide-react - Insert quick-set button alongside existing fetch-models button - Logic picks first non-empty model value and applies to all fields - Show success toast after applying - Disabled state when all model fields are empty - Add i18n strings for zh, en, ja locales Relates to user feedback about tedious model configuration workflow. * style(ui): format ClaudeFormFields component code Apply consistent code formatting to ClaudeFormFields.tsx following project linting rules. Includes multi-line import statements and improved readability for conditional expressions.
This commit is contained in:
@@ -24,7 +24,13 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { ChevronDown, ChevronRight, Download, Loader2 } from "lucide-react";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Download,
|
||||
Loader2,
|
||||
Wand2,
|
||||
} from "lucide-react";
|
||||
import EndpointSpeedTest from "./EndpointSpeedTest";
|
||||
import { ApiKeySection, EndpointField, ModelInputWithFetch } from "./shared";
|
||||
import { CopilotAuthSection } from "./CopilotAuthSection";
|
||||
@@ -571,23 +577,64 @@ export function ClaudeFormFields({
|
||||
<div className="space-y-1 pt-2 border-t">
|
||||
<div className="flex items-center justify-between">
|
||||
<FormLabel>{t("providerForm.modelMappingLabel")}</FormLabel>
|
||||
{!isCopilotPreset && (
|
||||
<div className="flex gap-2">
|
||||
{/* 一键设置按钮 */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFetchModels}
|
||||
disabled={isFetchingModels}
|
||||
onClick={() => {
|
||||
const value =
|
||||
claudeModel ||
|
||||
reasoningModel ||
|
||||
defaultHaikuModel ||
|
||||
defaultSonnetModel ||
|
||||
defaultOpusModel;
|
||||
if (value) {
|
||||
onModelChange("ANTHROPIC_MODEL", value);
|
||||
onModelChange("ANTHROPIC_REASONING_MODEL", value);
|
||||
onModelChange("ANTHROPIC_DEFAULT_HAIKU_MODEL", value);
|
||||
onModelChange("ANTHROPIC_DEFAULT_SONNET_MODEL", value);
|
||||
onModelChange("ANTHROPIC_DEFAULT_OPUS_MODEL", value);
|
||||
toast.success(
|
||||
t("providerForm.quickSetSuccess", {
|
||||
defaultValue: "已将模型名称应用到所有字段",
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}
|
||||
disabled={
|
||||
!claudeModel &&
|
||||
!reasoningModel &&
|
||||
!defaultHaikuModel &&
|
||||
!defaultSonnetModel &&
|
||||
!defaultOpusModel
|
||||
}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
{isFetchingModels ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("providerForm.fetchModels")}
|
||||
<Wand2 className="h-3.5 w-3.5" />
|
||||
{t("providerForm.quickSetModels", {
|
||||
defaultValue: "一键设置",
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
{!isCopilotPreset && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFetchModels}
|
||||
disabled={isFetchingModels}
|
||||
className="h-7 gap-1"
|
||||
>
|
||||
{isFetchingModels ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{t("providerForm.fetchModels")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("providerForm.modelMappingHint")}
|
||||
|
||||
@@ -843,6 +843,8 @@
|
||||
"modelHelper": "Optional: Specify default Claude model to use, leave blank to use system default.",
|
||||
"modelMappingLabel": "Model Mapping",
|
||||
"modelMappingHint": "Usually not needed if the provider natively serves Claude models. Only configure when you need to map requests to different model names.",
|
||||
"quickSetModels": "Quick Set",
|
||||
"quickSetSuccess": "Model name applied to all fields",
|
||||
"advancedOptionsToggle": "Advanced Options",
|
||||
"advancedOptionsHint": "Includes API format, auth field, and model mapping. Defaults work for most use cases.",
|
||||
"categoryOfficial": "Official",
|
||||
|
||||
@@ -843,6 +843,8 @@
|
||||
"modelHelper": "任意: 既定で使いたい Claude モデルを指定。空欄ならシステム既定を使用します。",
|
||||
"modelMappingLabel": "モデルマッピング",
|
||||
"modelMappingHint": "プロバイダーが Claude モデルをネイティブ提供している場合、通常は設定不要です。リクエストを別のモデル名にマッピングする場合のみ設定してください。",
|
||||
"quickSetModels": "一括設定",
|
||||
"quickSetSuccess": "モデル名をすべてのフィールドに適用しました",
|
||||
"advancedOptionsToggle": "高級オプション",
|
||||
"advancedOptionsHint": "API フォーマット、認証フィールド、モデルマッピングの設定を含みます。通常はデフォルトのままで問題ありません。",
|
||||
"categoryOfficial": "公式",
|
||||
|
||||
@@ -844,6 +844,8 @@
|
||||
"modelHelper": "可选:指定默认使用的 Claude 模型,留空则使用系统默认。",
|
||||
"modelMappingLabel": "模型映射",
|
||||
"modelMappingHint": "如果供应商原生提供 Claude 系列模型,通常无需配置。仅在需要将请求映射到不同模型名称时填写。",
|
||||
"quickSetModels": "一键设置",
|
||||
"quickSetSuccess": "已将模型名称应用到所有字段",
|
||||
"advancedOptionsToggle": "高级选项",
|
||||
"advancedOptionsHint": "包含 API 格式、认证字段、模型映射等配置。大多数场景下保持默认即可。",
|
||||
"categoryOfficial": "官方",
|
||||
|
||||
Reference in New Issue
Block a user