mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-08-02 18:41:35 +08:00
refactor(ui): refine full URL endpoint hint
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { FormLabel } from "@/components/ui/form";
|
import { FormLabel } from "@/components/ui/form";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { Link2, Zap } from "lucide-react";
|
import { Link2, Zap } from "lucide-react";
|
||||||
|
|
||||||
interface EndpointFieldProps {
|
interface EndpointFieldProps {
|
||||||
@@ -37,12 +38,47 @@ export function EndpointField({
|
|||||||
const defaultManageLabel = t("providerForm.manageAndTest", {
|
const defaultManageLabel = t("providerForm.manageAndTest", {
|
||||||
defaultValue: "管理和测速",
|
defaultValue: "管理和测速",
|
||||||
});
|
});
|
||||||
|
const effectiveHint =
|
||||||
|
showFullUrlToggle && isFullUrl
|
||||||
|
? t("providerForm.fullUrlHint", {
|
||||||
|
defaultValue:
|
||||||
|
"💡 请填写完整请求 URL,并且必须开启代理后使用;代理将直接使用此 URL,不拼接路径",
|
||||||
|
})
|
||||||
|
: hint;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||||
<FormLabel htmlFor={id}>{label}</FormLabel>
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
{showManageButton && onManageClick && (
|
<FormLabel htmlFor={id}>{label}</FormLabel>
|
||||||
|
{showFullUrlToggle && onFullUrlChange ? (
|
||||||
|
<div className="flex items-center gap-2 rounded-full border border-border/70 bg-muted/30 px-2.5 py-1">
|
||||||
|
<Link2
|
||||||
|
className={`h-3.5 w-3.5 ${
|
||||||
|
isFullUrl ? "text-primary" : "text-muted-foreground"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className={`text-xs font-medium ${
|
||||||
|
isFullUrl ? "text-foreground" : "text-muted-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t("providerForm.fullUrlLabel", {
|
||||||
|
defaultValue: "完整 URL",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<Switch
|
||||||
|
checked={isFullUrl}
|
||||||
|
onCheckedChange={onFullUrlChange}
|
||||||
|
aria-label={t("providerForm.fullUrlLabel", {
|
||||||
|
defaultValue: "完整 URL",
|
||||||
|
})}
|
||||||
|
className="h-5 w-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
{showManageButton && onManageClick ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onManageClick}
|
onClick={onManageClick}
|
||||||
@@ -51,7 +87,7 @@ export function EndpointField({
|
|||||||
<Zap className="h-3.5 w-3.5" />
|
<Zap className="h-3.5 w-3.5" />
|
||||||
{manageButtonLabel || defaultManageLabel}
|
{manageButtonLabel || defaultManageLabel}
|
||||||
</button>
|
</button>
|
||||||
)}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<Input
|
<Input
|
||||||
id={id}
|
id={id}
|
||||||
@@ -61,38 +97,11 @@ export function EndpointField({
|
|||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
/>
|
/>
|
||||||
{showFullUrlToggle && onFullUrlChange ? (
|
{effectiveHint ? (
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => onFullUrlChange(!isFullUrl)}
|
|
||||||
className={`flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs transition-colors ${
|
|
||||||
isFullUrl
|
|
||||||
? "border-primary bg-primary/10 text-primary"
|
|
||||||
: "border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Link2 className="h-3.5 w-3.5" />
|
|
||||||
{isFullUrl
|
|
||||||
? t("providerForm.fullUrlEnabled", {
|
|
||||||
defaultValue: "完整 URL 模式",
|
|
||||||
})
|
|
||||||
: t("providerForm.fullUrlDisabled", {
|
|
||||||
defaultValue: "标记为完整 URL",
|
|
||||||
})}
|
|
||||||
</button>
|
|
||||||
{isFullUrl ? (
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{t("providerForm.fullUrlHint", {
|
|
||||||
defaultValue: "代理将直接使用此 URL,不拼接路径",
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
{hint ? (
|
|
||||||
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
|
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
|
||||||
<p className="text-xs text-amber-600 dark:text-amber-400">{hint}</p>
|
<p className="text-xs text-amber-600 dark:text-amber-400">
|
||||||
|
{effectiveHint}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -743,9 +743,10 @@
|
|||||||
"anthropicReasoningModel": "Reasoning Model (Thinking)",
|
"anthropicReasoningModel": "Reasoning Model (Thinking)",
|
||||||
"apiFormat": "API Format",
|
"apiFormat": "API Format",
|
||||||
"apiFormatHint": "Select the input format for the provider's API",
|
"apiFormatHint": "Select the input format for the provider's API",
|
||||||
|
"fullUrlLabel": "Full URL",
|
||||||
"fullUrlEnabled": "Full URL Mode",
|
"fullUrlEnabled": "Full URL Mode",
|
||||||
"fullUrlDisabled": "Mark as Full URL",
|
"fullUrlDisabled": "Mark as Full URL",
|
||||||
"fullUrlHint": "Proxy will use this URL as-is",
|
"fullUrlHint": "💡 Enter the full request URL. This mode requires the proxy to be enabled, and the proxy will use the URL as-is without appending a path",
|
||||||
"apiFormatAnthropic": "Anthropic Messages (Native)",
|
"apiFormatAnthropic": "Anthropic Messages (Native)",
|
||||||
"apiFormatOpenAIChat": "OpenAI Chat Completions (Requires proxy)",
|
"apiFormatOpenAIChat": "OpenAI Chat Completions (Requires proxy)",
|
||||||
"apiFormatOpenAIResponses": "OpenAI Responses API (Requires proxy)",
|
"apiFormatOpenAIResponses": "OpenAI Responses API (Requires proxy)",
|
||||||
|
|||||||
@@ -743,9 +743,10 @@
|
|||||||
"anthropicReasoningModel": "推論モデル(Thinking)",
|
"anthropicReasoningModel": "推論モデル(Thinking)",
|
||||||
"apiFormat": "API フォーマット",
|
"apiFormat": "API フォーマット",
|
||||||
"apiFormatHint": "プロバイダー API の入力フォーマットを選択",
|
"apiFormatHint": "プロバイダー API の入力フォーマットを選択",
|
||||||
|
"fullUrlLabel": "フル URL",
|
||||||
"fullUrlEnabled": "フル URL モード",
|
"fullUrlEnabled": "フル URL モード",
|
||||||
"fullUrlDisabled": "フル URL として設定",
|
"fullUrlDisabled": "フル URL として設定",
|
||||||
"fullUrlHint": "プロキシはこの URL をそのまま使用",
|
"fullUrlHint": "💡 完全なリクエスト URL を入力してください。このモードはプロキシを有効にして使用する必要があり、プロキシはこの URL をそのまま使用し、パスを追加しません",
|
||||||
"apiFormatAnthropic": "Anthropic Messages(ネイティブ)",
|
"apiFormatAnthropic": "Anthropic Messages(ネイティブ)",
|
||||||
"apiFormatOpenAIChat": "OpenAI Chat Completions(プロキシが必要)",
|
"apiFormatOpenAIChat": "OpenAI Chat Completions(プロキシが必要)",
|
||||||
"apiFormatOpenAIResponses": "OpenAI Responses API(プロキシが必要)",
|
"apiFormatOpenAIResponses": "OpenAI Responses API(プロキシが必要)",
|
||||||
|
|||||||
@@ -743,9 +743,10 @@
|
|||||||
"anthropicReasoningModel": "推理模型 (Thinking)",
|
"anthropicReasoningModel": "推理模型 (Thinking)",
|
||||||
"apiFormat": "API 格式",
|
"apiFormat": "API 格式",
|
||||||
"apiFormatHint": "选择供应商 API 的输入格式",
|
"apiFormatHint": "选择供应商 API 的输入格式",
|
||||||
|
"fullUrlLabel": "完整 URL",
|
||||||
"fullUrlEnabled": "完整 URL 模式",
|
"fullUrlEnabled": "完整 URL 模式",
|
||||||
"fullUrlDisabled": "标记为完整 URL",
|
"fullUrlDisabled": "标记为完整 URL",
|
||||||
"fullUrlHint": "代理将直接使用此 URL,不拼接路径",
|
"fullUrlHint": "💡 请填写完整请求 URL,并且必须开启代理后使用;代理将直接使用此 URL,不拼接路径",
|
||||||
"apiFormatAnthropic": "Anthropic Messages (原生)",
|
"apiFormatAnthropic": "Anthropic Messages (原生)",
|
||||||
"apiFormatOpenAIChat": "OpenAI Chat Completions (需开启代理)",
|
"apiFormatOpenAIChat": "OpenAI Chat Completions (需开启代理)",
|
||||||
"apiFormatOpenAIResponses": "OpenAI Responses API (需开启代理)",
|
"apiFormatOpenAIResponses": "OpenAI Responses API (需开启代理)",
|
||||||
|
|||||||
Reference in New Issue
Block a user