refactor(proxy): unify URL building logic in backend

Move URL preview and proxy requirement checks from frontend to a centralized
Rust module. This ensures consistency between the endpoint field preview and
actual proxy behavior.
This commit is contained in:
YoVinchen
2026-02-05 14:30:15 +08:00
parent 7f6ce72a88
commit b12d12790b
12 changed files with 640 additions and 181 deletions
+4 -1
View File
@@ -933,7 +933,10 @@ function App() {
<>
{activeApp !== "opencode" && (
<>
<ProxyToggle activeApp={activeApp} />
<ProxyToggle
activeApp={activeApp}
currentProvider={providers[currentProviderId] || null}
/>
<div
className={cn(
"transition-all duration-300 ease-in-out overflow-hidden",
@@ -1,50 +1,11 @@
import { useMemo } from "react";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { FormLabel } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Zap, AlertTriangle, Server, Unplug } from "lucide-react";
import type { ClaudeApiFormat } from "@/types";
// 检测 URL 是否以 API 路径结尾的模式(只检测结尾,不包含 /v1 因为它是正常的 base URL 后缀)
const API_PATH_SUFFIX_PATTERNS = [
// Claude 完整路径
"/v1/messages",
"/messages",
// OpenAI Chat Completions 完整路径
"/v1/chat/completions",
"/chat/completions",
// Codex Responses 完整路径
"/v1/responses",
"/responses",
// Gemini 完整路径
"/v1beta/models",
];
// 从 URL 中提取路径部分(移除查询参数和尾部斜杠)
function extractUrlPath(url: string): string {
try {
// 移除查询参数
const pathPart = url.split("?")[0];
// 移除尾部斜杠并转为小写
return pathPart.replace(/\/+$/, "").toLowerCase();
} catch {
return url.toLowerCase();
}
}
// 构建 URL 并去重 /v1/v1
function buildUrl(base: string, suffix: string): string {
const trimmedBase = base.trim().replace(/\/+$/, "");
let url = `${trimmedBase}${suffix}`;
// 去重 /v1/v1 模式
while (url.includes("/v1/v1")) {
url = url.replace("/v1/v1", "/v1");
}
return url;
}
import { proxyApi, type UrlPreview } from "@/lib/api/proxy";
type AppType = "claude" | "codex" | "gemini";
type CodexApiFormat = "responses" | "chat";
interface EndpointFieldProps {
id: string;
@@ -56,9 +17,9 @@ interface EndpointFieldProps {
showManageButton?: boolean;
onManageClick?: () => void;
manageButtonLabel?: string;
// 新增:应用类型和 API 格式
// 应用类型和 API 格式
appType?: AppType;
apiFormat?: ClaudeApiFormat | CodexApiFormat;
apiFormat?: string;
// 是否显示请求地址预览
showUrlPreview?: boolean;
}
@@ -78,65 +39,36 @@ export function EndpointField({
showUrlPreview = true,
}: EndpointFieldProps) {
const { t } = useTranslation();
const [urlPreview, setUrlPreview] = useState<UrlPreview | null>(null);
const defaultManageLabel = t("providerForm.manageAndTest", {
defaultValue: "管理和测速",
});
// 根据 appType 和 apiFormat 计算直连和代理后缀
const suffixes = useMemo(() => {
if (!appType) return null;
if (appType === "claude") {
// Claude: 直连固定 /v1/messages,代理根据 apiFormat 决定
return {
direct: "/v1/messages",
proxy:
apiFormat === "openai_chat" ? "/v1/chat/completions" : "/v1/messages",
};
// 调用后端 API 获取 URL 预览
useEffect(() => {
if (!value || !appType || !showUrlPreview) {
setUrlPreview(null);
return;
}
if (appType === "codex") {
// Codex: 直连固定 /responsesbase URL 已含 /v1),代理根据 apiFormat 决定
return {
direct: "/responses",
proxy: apiFormat === "chat" ? "/chat/completions" : "/responses",
};
}
// 防抖:延迟 300ms 后请求
const timer = setTimeout(async () => {
try {
const preview = await proxyApi.buildUrlPreview(
appType,
value,
apiFormat,
);
setUrlPreview(preview);
} catch (error) {
console.error("Failed to build URL preview:", error);
setUrlPreview(null);
}
}, 300);
if (appType === "gemini") {
// Gemini: 两种模式相同
return {
direct: "/v1beta/models",
proxy: "/v1beta/models",
};
}
return null;
}, [appType, apiFormat]);
// 检测 URL 是否已以 API 路径结尾(全链接)
const urlEndsWithApiPath = useMemo(() => {
if (!value) return false;
const urlPath = extractUrlPath(value);
return API_PATH_SUFFIX_PATTERNS.some((pattern) =>
urlPath.endsWith(pattern.toLowerCase()),
);
}, [value]);
// 构建直连模式请求 URL
const directUrlPreview = useMemo(() => {
if (!value || !suffixes) return null;
if (urlEndsWithApiPath) return value;
return buildUrl(value, suffixes.direct);
}, [value, suffixes, urlEndsWithApiPath]);
// 构建代理模式请求 URL
const proxyUrlPreview = useMemo(() => {
if (!value || !suffixes) return null;
if (urlEndsWithApiPath) return value;
return buildUrl(value, suffixes.proxy);
}, [value, suffixes, urlEndsWithApiPath]);
return () => clearTimeout(timer);
}, [value, appType, apiFormat, showUrlPreview]);
return (
<div className="space-y-2">
@@ -163,51 +95,48 @@ export function EndpointField({
/>
{/* 请求地址预览 */}
{showUrlPreview && directUrlPreview && (
{showUrlPreview && urlPreview && (
<div className="p-2 bg-muted/50 border border-border rounded-md space-y-2">
{/* 直连模式请求地址 */}
{/* CLI 直连请求地址 */}
<div>
<p className="text-xs text-muted-foreground mb-0.5 flex items-center gap-1">
<Unplug className="h-3 w-3" />
{t("providerForm.directRequestUrl", {
defaultValue: "直连请求地址:",
defaultValue: "CLI 直连请求地址:",
})}
</p>
<p className="text-xs font-mono text-foreground break-all pl-4">
{directUrlPreview}
{urlPreview.direct_url}
</p>
<p className="text-xs text-muted-foreground/70 mt-0.5 pl-4">
{t("providerForm.directRequestUrlDesc", {
defaultValue: "不开启代理时,客户端直接请求地址",
defaultValue: "CLI 硬拼接默认后缀后的实际请求地址",
})}
</p>
</div>
{/* 代理模式请求地址 */}
{proxyUrlPreview && (
<div className="pt-1.5 border-t border-border/50">
<p className="text-xs text-muted-foreground mb-0.5 flex items-center gap-1">
<Server className="h-3 w-3" />
{t("providerForm.proxyRequestUrl", {
defaultValue: "代理请求地址:",
})}
</p>
<p className="text-xs font-mono text-foreground break-all pl-4">
{proxyUrlPreview}
</p>
<p className="text-xs text-muted-foreground/70 mt-0.5 pl-4">
{t("providerForm.proxyRequestUrlDesc", {
defaultValue:
"开启代理后,代理服务会将请求转发到此地址(支持格式转换)",
})}
</p>
</div>
)}
{/* CCS 代理请求地址 */}
<div className="pt-1.5 border-t border-border/50">
<p className="text-xs text-muted-foreground mb-0.5 flex items-center gap-1">
<Server className="h-3 w-3" />
{t("providerForm.proxyRequestUrl", {
defaultValue: "CCS 代理请求地址:",
})}
</p>
<p className="text-xs font-mono text-foreground break-all pl-4">
{urlPreview.proxy_url}
</p>
<p className="text-xs text-muted-foreground/70 mt-0.5 pl-4">
{t("providerForm.proxyRequestUrlDesc", {
defaultValue: "CCS 智能拼接后转发到上游的地址",
})}
</p>
</div>
</div>
)}
{/* 全链接警告 */}
{urlEndsWithApiPath && (
{urlPreview?.is_full_url && (
<div className="flex items-start gap-2 p-2 bg-orange-50 dark:bg-orange-950/30 border border-orange-200 dark:border-orange-800 rounded-md">
<AlertTriangle className="h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0" />
<div className="flex-1">
+81 -1
View File
@@ -10,19 +10,99 @@ import { Switch } from "@/components/ui/switch";
import { useProxyStatus } from "@/hooks/useProxyStatus";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import type { AppId } from "@/lib/api";
import { proxyApi } from "@/lib/api/proxy";
import type { Provider } from "@/types";
interface ProxyToggleProps {
className?: string;
activeApp: AppId;
currentProvider?: Provider | null;
}
export function ProxyToggle({ className, activeApp }: ProxyToggleProps) {
/**
* 从 provider 配置中提取 base URL
*/
function extractBaseUrl(provider: Provider, appId: AppId): string | null {
try {
const config = provider.settingsConfig;
if (!config) return null;
if (appId === "claude") {
const envUrl = config?.env?.ANTHROPIC_BASE_URL;
return typeof envUrl === "string" ? envUrl.trim() : null;
}
if (appId === "codex") {
const tomlConfig = config?.config;
if (typeof tomlConfig === "string") {
const match = tomlConfig.match(/base_url\s*=\s*(['"])([^'"]+)\1/);
return match?.[2]?.trim() || null;
}
const baseUrl = config?.base_url;
return typeof baseUrl === "string" ? baseUrl.trim() : null;
}
if (appId === "gemini") {
const envUrl = config?.env?.GOOGLE_GEMINI_BASE_URL;
if (typeof envUrl === "string") return envUrl.trim();
const baseUrl = config?.GEMINI_API_BASE || config?.base_url;
return typeof baseUrl === "string" ? baseUrl.trim() : null;
}
return null;
} catch {
return null;
}
}
export function ProxyToggle({
className,
activeApp,
currentProvider,
}: ProxyToggleProps) {
const { t } = useTranslation();
const { isRunning, takeoverStatus, setTakeoverForApp, isPending, status } =
useProxyStatus();
const handleToggle = async (checked: boolean) => {
// 关闭代理时,检查当前供应商是否是全链接配置
if (
!checked &&
currentProvider &&
currentProvider.category !== "official"
) {
const baseUrl = extractBaseUrl(currentProvider, activeApp);
const apiFormat = currentProvider.meta?.apiFormat;
if (baseUrl) {
try {
const proxyRequirement = await proxyApi.checkProxyRequirement(
activeApp,
baseUrl,
apiFormat,
);
if (proxyRequirement) {
// 显示警告但仍允许关闭
toast.warning(
t("notifications.fullUrlWarningOnDisable", {
defaultValue:
"当前供应商配置了完整 API 路径或特殊格式,关闭代理后可能无法正常工作。建议更换为基础地址配置或保持代理开启。",
}),
{
duration: 6000,
closeButton: true,
},
);
}
} catch (error) {
console.error("Failed to check proxy requirement:", error);
}
}
}
try {
await setTakeoverForApp({ appType: activeApp, enabled: checked });
} catch (error) {
+55 -44
View File
@@ -3,6 +3,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";
import { providersApi, settingsApi, type AppId } from "@/lib/api";
import { proxyApi } from "@/lib/api/proxy";
import type { Provider, UsageScript } from "@/types";
import {
useAddProviderMutation,
@@ -12,17 +13,6 @@ import {
} from "@/lib/query";
import { extractErrorMessage } from "@/utils/errorUtils";
// API 路径后缀模式,用于检测是否是全链接
const API_PATH_SUFFIX_PATTERNS = [
"/v1/messages",
"/messages",
"/v1/chat/completions",
"/chat/completions",
"/v1/responses",
"/responses",
"/v1beta/models",
];
/**
* 从 Codex TOML 配置字符串中提取 base_url
*/
@@ -72,20 +62,6 @@ function extractBaseUrl(provider: Provider, appId: AppId): string | null {
}
}
/**
* 检测 URL 是否以 API 路径后缀结尾(全链接)
*/
function isFullApiUrl(url: string | null): boolean {
if (!url) return false;
// 移除查询参数和尾部斜杠
const pathPart = url.split("?")[0].replace(/\/+$/, "").toLowerCase();
return API_PATH_SUFFIX_PATTERNS.some((pattern) =>
pathPart.endsWith(pattern.toLowerCase()),
);
}
interface UseProviderActionsOptions {
/** 代理服务是否正在运行 */
isProxyRunning?: boolean;
@@ -166,28 +142,63 @@ export function useProviderActions(
// 切换供应商
const switchProvider = useCallback(
async (provider: Provider) => {
// 检测是否是全链接配置(URL 以 API 路径结尾)
const baseUrl = extractBaseUrl(provider, activeApp);
const hasFullApiUrl = isFullApiUrl(baseUrl);
// 官方供应商不需要检查
if (provider.category === "official") {
try {
await switchProviderMutation.mutateAsync(provider.id);
await syncClaudePlugin(provider);
toast.success(
t("notifications.switchSuccess", { defaultValue: "切换成功!" }),
{
closeButton: true,
},
);
} catch {
// 错误提示由 mutation 处理
}
return;
}
// 检测是否是 Claude OpenAI Chat 格式(需要代理进行格式转换)
const isClaudeOpenAIChatFormat =
activeApp === "claude" &&
provider.category !== "official" &&
provider.meta?.apiFormat === "openai_chat";
// 提取 base URL 和 API 格式
const baseUrl = extractBaseUrl(provider, activeApp);
const apiFormat = provider.meta?.apiFormat;
// 调用后端 API 检查是否需要代理(前后端使用相同逻辑)
let proxyRequirement: string | null = null;
if (baseUrl) {
try {
proxyRequirement = await proxyApi.checkProxyRequirement(
activeApp,
baseUrl,
apiFormat,
);
} catch (error) {
console.error("Failed to check proxy requirement:", error);
}
}
// 如果需要代理但代理未激活,阻止切换并提示
const needsProxy = hasFullApiUrl || isClaudeOpenAIChatFormat;
if (needsProxy && !(isProxyRunning && isTakeoverActive)) {
const message = isClaudeOpenAIChatFormat
? t("notifications.openAIChatFormatRequiresProxy", {
defaultValue:
"此供应商使用 OpenAI Chat 格式,需要开启代理服务进行格式转换才能正常使用。请先开启代理并接管当前应用。",
})
: t("notifications.fullUrlRequiresProxy", {
defaultValue:
"此供应商配置了完整 API 路径,需要开启代理服务才能正常使用。请先开启代理并接管当前应用。",
});
if (proxyRequirement && !(isProxyRunning && isTakeoverActive)) {
let message: string;
if (proxyRequirement === "openai_chat_format") {
message = t("notifications.openAIChatFormatRequiresProxy", {
defaultValue:
"此供应商使用 OpenAI Chat 格式,需要开启代理服务进行格式转换才能正常使用。请先开启代理并接管当前应用。",
});
} else if (proxyRequirement === "full_url") {
// 用户填了全链接(如 /v1/messages 结尾)
message = t("notifications.fullUrlRequiresProxy", {
defaultValue:
"此供应商配置了完整 API 路径,直连模式下客户端可能会重复追加路径。请先开启代理并接管当前应用。",
});
} else {
// url_mismatch: 直连地址和代理地址不匹配
message = t("notifications.urlMismatchRequiresProxy", {
defaultValue:
"此供应商的请求地址配置与 API 格式不匹配,直连模式下无法正常工作。请先开启代理并接管当前应用。",
});
}
toast.warning(message, {
duration: 6000,
+7 -5
View File
@@ -158,7 +158,9 @@
"settingsSaveFailed": "Failed to save settings: {{error}}",
"openAIChatFormatHint": "This provider uses OpenAI Chat format and requires the proxy service to be enabled",
"openAIChatFormatRequiresProxy": "This provider uses OpenAI Chat format and requires the proxy service for format conversion. Please enable the proxy and takeover the current app first.",
"fullUrlRequiresProxy": "This provider is configured with a full API path and requires the proxy service to work properly. Please enable the proxy and takeover the current app first."
"fullUrlRequiresProxy": "This provider is configured with a full API path. The client may append duplicate paths in direct connection mode. Please enable the proxy and takeover the current app first.",
"urlMismatchRequiresProxy": "This provider's request URL configuration does not match the API format. It cannot work properly in direct connection mode. Please enable the proxy and takeover the current app first.",
"fullUrlWarningOnDisable": "The current provider is configured with a full API path or special format. It may not work properly after disabling the proxy. Consider switching to a base URL configuration or keep the proxy enabled."
},
"confirm": {
"deleteProvider": "Delete Provider",
@@ -495,10 +497,10 @@
"codexApiFormatResponses": "OpenAI Responses (Default)",
"codexApiFormatChat": "OpenAI Chat Completions",
"codexApiFormatHint": "Select the API format supported by the provider",
"directRequestUrl": "Direct request URL:",
"directRequestUrlDesc": "When proxy is disabled, the client requests this URL directly",
"proxyRequestUrl": "Proxy request URL:",
"proxyRequestUrlDesc": "When proxy is enabled, requests are forwarded to this URL (with format conversion)",
"directRequestUrl": "CLI Direct Request URL:",
"directRequestUrlDesc": "Actual request URL after CLI appends default suffix",
"proxyRequestUrl": "CCS Proxy Request URL:",
"proxyRequestUrlDesc": "URL forwarded to upstream after CCS smart path detection",
"fullUrlWarningTitle": "Full API path detected",
"fullUrlWarning": "The URL contains a full API path. This configuration only works in proxy mode. For direct connection mode, please enter only the base URL.",
"fillSupplierName": "Please fill in provider name",
+7 -5
View File
@@ -158,7 +158,9 @@
"settingsSaveFailed": "設定の保存に失敗しました: {{error}}",
"openAIChatFormatHint": "このプロバイダーは OpenAI Chat フォーマットを使用しており、プロキシサービスの有効化が必要です",
"openAIChatFormatRequiresProxy": "このプロバイダーは OpenAI Chat フォーマットを使用しており、フォーマット変換のためにプロキシサービスが必要です。先にプロキシを有効にして、現在のアプリをテイクオーバーしてください。",
"fullUrlRequiresProxy": "このプロバイダーは完全な API パスで構成されており、プロキシサービスが必要です。先にプロキシを有効にして、現在のアプリをテイクオーバーしてください。"
"fullUrlRequiresProxy": "このプロバイダーは完全な API パスで構成されています。直接接続モードではクライアントがパスを重複追加する可能性があります。先にプロキシを有効にして、現在のアプリをテイクオーバーしてください。",
"urlMismatchRequiresProxy": "このプロバイダーのリクエスト URL 設定が API フォーマットと一致しません。直接接続モードでは正常に動作しません。先にプロキシを有効にして、現在のアプリをテイクオーバーしてください。",
"fullUrlWarningOnDisable": "現在のプロバイダーは完全な API パスまたは特殊なフォーマットで構成されています。プロキシを無効にすると正常に動作しない可能性があります。ベース URL 設定に変更するか、プロキシを有効のままにすることをお勧めします。"
},
"confirm": {
"deleteProvider": "プロバイダーを削除",
@@ -495,10 +497,10 @@
"codexApiFormatResponses": "OpenAI Responses(デフォルト)",
"codexApiFormatChat": "OpenAI Chat Completions",
"codexApiFormatHint": "プロバイダーがサポートする API フォーマットを選択",
"directRequestUrl": "直接接続リクエスト URL",
"directRequestUrlDesc": "プロキシ無効時、クライアントはこの URL に直接リクエストします",
"proxyRequestUrl": "プロキシリクエスト URL",
"proxyRequestUrlDesc": "プロキシ有効時、リクエストはこの URL に転送されます(フォーマット変換対応)",
"directRequestUrl": "CLI 直接リクエスト URL",
"directRequestUrlDesc": "CLI がデフォルトサフィックスを追加した後の実際のリクエスト URL",
"proxyRequestUrl": "CCS プロキシリクエスト URL",
"proxyRequestUrlDesc": "CCS がスマートパス検出後にアップストリームへ転送する URL",
"fullUrlWarningTitle": "完全な API パスを検出",
"fullUrlWarning": "URL には完全な API パスが含まれています。この設定はプロキシモードでのみ有効です。直接接続モードではベース URL のみを入力してください。",
"fillSupplierName": "プロバイダー名を入力してください",
+7 -5
View File
@@ -158,7 +158,9 @@
"settingsSaveFailed": "保存设置失败:{{error}}",
"openAIChatFormatHint": "此供应商使用 OpenAI Chat 格式,需要开启代理服务才能正常使用",
"openAIChatFormatRequiresProxy": "此供应商使用 OpenAI Chat 格式,需要开启代理服务进行格式转换才能正常使用。请先开启代理并接管当前应用。",
"fullUrlRequiresProxy": "此供应商配置了完整 API 路径,需要开启代理服务才能正常使用。请先开启代理并接管当前应用。"
"fullUrlRequiresProxy": "此供应商配置了完整 API 路径,直连模式下客户端可能会重复追加路径。请先开启代理并接管当前应用。",
"urlMismatchRequiresProxy": "此供应商的请求地址配置与 API 格式不匹配,直连模式下无法正常工作。请先开启代理并接管当前应用。",
"fullUrlWarningOnDisable": "当前供应商配置了完整 API 路径或特殊格式,关闭代理后可能无法正常工作。建议更换为基础地址配置或保持代理开启。"
},
"confirm": {
"deleteProvider": "删除供应商",
@@ -495,10 +497,10 @@
"codexApiFormatResponses": "OpenAI Responses (默认)",
"codexApiFormatChat": "OpenAI Chat Completions",
"codexApiFormatHint": "选择供应商支持的 API 格式",
"directRequestUrl": "直连请求地址:",
"directRequestUrlDesc": "不开启代理时,客户端直接请求地址",
"proxyRequestUrl": "代理请求地址:",
"proxyRequestUrlDesc": "开启代理后,代理服务会将请求转发到此地址(支持格式转换)",
"directRequestUrl": "CLI 直连请求地址:",
"directRequestUrlDesc": "CLI 硬拼接默认后缀后的实际请求地址",
"proxyRequestUrl": "CCS 代理请求地址:",
"proxyRequestUrlDesc": "CCS 智能拼接后转发到上游的地址",
"fullUrlWarningTitle": "检测到完整 API 路径",
"fullUrlWarning": "填写了包含 API 路径的完整地址,此配置仅在代理模式下生效。直连模式下请只填写基础地址。",
"fillSupplierName": "请填写供应商名称",
+36
View File
@@ -117,4 +117,40 @@ export const proxyApi = {
async setPricingModelSource(appType: string, value: string): Promise<void> {
return invoke("set_pricing_model_source", { appType, value });
},
// ========== URL 预览 API ==========
/**
* 构建 URL 预览
* 根据 app_type、base_url 和 api_format 计算直连和代理模式的请求地址
*/
async buildUrlPreview(
appType: string,
baseUrl: string,
apiFormat?: string,
): Promise<UrlPreview> {
return invoke("build_url_preview", { appType, baseUrl, apiFormat });
},
/**
* 检查是否需要代理
* 返回需要代理的原因,null 表示不需要代理
*/
async checkProxyRequirement(
appType: string,
baseUrl: string,
apiFormat?: string,
): Promise<string | null> {
return invoke("check_proxy_requirement", { appType, baseUrl, apiFormat });
},
};
/** URL 预览结果 */
export interface UrlPreview {
/** 直连模式请求地址 */
direct_url: string;
/** 代理模式请求地址 */
proxy_url: string;
/** 是否为全链接(base_url 已包含 API 路径) */
is_full_url: boolean;
}