refactor(ui): refine full URL endpoint hint

This commit is contained in:
YoVinchen
2026-03-19 22:50:01 +08:00
parent 8a26a091a9
commit 8c8b265ebf
4 changed files with 50 additions and 38 deletions
@@ -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>
+2 -1
View File
@@ -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)",
+2 -1
View File
@@ -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(プロキシが必要)",
+2 -1
View File
@@ -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 (需开启代理)",