mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-08-02 02:05:57 +08:00
Jesus Díaz Rivas
10e0772d8c
* Add Codex OAuth FAST mode toggle * fix(codex-oauth): default FAST mode to off to avoid surprise quota burn service_tier="priority" consumes ChatGPT subscription quota at a higher rate. Users must now opt in explicitly rather than inherit FAST mode silently when this feature ships. --------- Co-authored-by: Jason <farion1231@gmail.com>
354 lines
11 KiB
TypeScript
354 lines
11 KiB
TypeScript
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Loader2,
|
|
LogOut,
|
|
Copy,
|
|
Check,
|
|
ExternalLink,
|
|
Plus,
|
|
X,
|
|
Sparkles,
|
|
User,
|
|
} from "lucide-react";
|
|
import { useCodexOauth } from "./hooks/useCodexOauth";
|
|
import { copyText } from "@/lib/clipboard";
|
|
|
|
interface CodexOAuthSectionProps {
|
|
className?: string;
|
|
/** 当前选中的 ChatGPT 账号 ID */
|
|
selectedAccountId?: string | null;
|
|
/** 账号选择回调 */
|
|
onAccountSelect?: (accountId: string | null) => void;
|
|
/** 是否开启 Codex FAST mode */
|
|
fastModeEnabled?: boolean;
|
|
/** FAST mode 切换回调 */
|
|
onFastModeChange?: (enabled: boolean) => void;
|
|
}
|
|
|
|
/**
|
|
* Codex OAuth 认证区块
|
|
*
|
|
* 通过 OpenAI Device Code 流程登录 ChatGPT Plus/Pro 账号，
|
|
* 用于将 Claude Code 请求反代到 Codex 后端 API。
|
|
*/
|
|
export const CodexOAuthSection: React.FC<CodexOAuthSectionProps> = ({
|
|
className,
|
|
selectedAccountId,
|
|
onAccountSelect,
|
|
fastModeEnabled = false,
|
|
onFastModeChange,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [copied, setCopied] = React.useState(false);
|
|
|
|
const {
|
|
accounts,
|
|
defaultAccountId,
|
|
hasAnyAccount,
|
|
pollingState,
|
|
deviceCode,
|
|
error,
|
|
isPolling,
|
|
isAddingAccount,
|
|
isRemovingAccount,
|
|
isSettingDefaultAccount,
|
|
addAccount,
|
|
removeAccount,
|
|
setDefaultAccount,
|
|
cancelAuth,
|
|
logout,
|
|
} = useCodexOauth();
|
|
|
|
const copyUserCode = async () => {
|
|
if (deviceCode?.user_code) {
|
|
await copyText(deviceCode.user_code);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
};
|
|
|
|
const handleAccountSelect = (value: string) => {
|
|
onAccountSelect?.(value === "none" ? null : value);
|
|
};
|
|
|
|
const handleRemoveAccount = (accountId: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
removeAccount(accountId);
|
|
if (selectedAccountId === accountId) {
|
|
onAccountSelect?.(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`space-y-4 ${className || ""}`}>
|
|
{/* 认证状态标题 */}
|
|
<div className="flex items-center justify-between">
|
|
<Label>{t("codexOauth.authStatus", "认证状态")}</Label>
|
|
<Badge
|
|
variant={hasAnyAccount ? "default" : "secondary"}
|
|
className={hasAnyAccount ? "bg-green-500 hover:bg-green-600" : ""}
|
|
>
|
|
{hasAnyAccount
|
|
? t("codexOauth.accountCount", {
|
|
count: accounts.length,
|
|
defaultValue: `${accounts.length} 个账号`,
|
|
})
|
|
: t("codexOauth.notAuthenticated", "未认证")}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* 账号选择器 */}
|
|
{hasAnyAccount && onAccountSelect && (
|
|
<div className="space-y-2">
|
|
<Label className="text-sm text-muted-foreground">
|
|
{t("codexOauth.selectAccount", "选择账号")}
|
|
</Label>
|
|
<Select
|
|
value={selectedAccountId || "none"}
|
|
onValueChange={handleAccountSelect}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue
|
|
placeholder={t(
|
|
"codexOauth.selectAccountPlaceholder",
|
|
"选择一个 ChatGPT 账号",
|
|
)}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">
|
|
<span className="text-muted-foreground">
|
|
{t("codexOauth.useDefaultAccount", "使用默认账号")}
|
|
</span>
|
|
</SelectItem>
|
|
{accounts.map((account) => (
|
|
<SelectItem key={account.id} value={account.id}>
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-4 w-4 text-muted-foreground" />
|
|
<span>{account.login}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{onFastModeChange && (
|
|
<div className="flex items-center justify-between rounded-md border bg-muted/30 p-3">
|
|
<div className="space-y-1 pr-4">
|
|
<Label className="text-sm font-medium">
|
|
{t("codexOauth.fastMode", "FAST mode")}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("codexOauth.fastModeDescription", {
|
|
defaultValue:
|
|
'Send service_tier="priority" for lower latency. Turn it off if the ChatGPT Codex backend rejects the parameter.',
|
|
})}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={fastModeEnabled}
|
|
onCheckedChange={onFastModeChange}
|
|
aria-label={t("codexOauth.fastMode", "FAST mode")}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 已登录账号列表 */}
|
|
{hasAnyAccount && (
|
|
<div className="space-y-2">
|
|
<Label className="text-sm text-muted-foreground">
|
|
{t("codexOauth.loggedInAccounts", "已登录账号")}
|
|
</Label>
|
|
<div className="space-y-1">
|
|
{accounts.map((account) => (
|
|
<div
|
|
key={account.id}
|
|
className="flex items-center justify-between p-2 rounded-md border bg-muted/30"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-sm font-medium">{account.login}</span>
|
|
{defaultAccountId === account.id && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{t("codexOauth.defaultAccount", "默认")}
|
|
</Badge>
|
|
)}
|
|
{selectedAccountId === account.id && (
|
|
<Badge variant="outline" className="text-xs">
|
|
{t("codexOauth.selected", "已选中")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{defaultAccountId !== account.id && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2 text-xs text-muted-foreground"
|
|
onClick={() => setDefaultAccount(account.id)}
|
|
disabled={isSettingDefaultAccount}
|
|
>
|
|
{t("codexOauth.setAsDefault", "设为默认")}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 text-muted-foreground hover:text-red-500"
|
|
onClick={(e) => handleRemoveAccount(account.id, e)}
|
|
disabled={isRemovingAccount}
|
|
title={t("codexOauth.removeAccount", "移除账号")}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 未认证 - 登录按钮 */}
|
|
{!hasAnyAccount && pollingState === "idle" && (
|
|
<Button
|
|
type="button"
|
|
onClick={addAccount}
|
|
className="w-full"
|
|
variant="outline"
|
|
>
|
|
<Sparkles className="mr-2 h-4 w-4" />
|
|
{t("codexOauth.loginWithChatGPT", "使用 ChatGPT 登录")}
|
|
</Button>
|
|
)}
|
|
|
|
{/* 已有账号 - 添加更多按钮 */}
|
|
{hasAnyAccount && pollingState === "idle" && (
|
|
<Button
|
|
type="button"
|
|
onClick={addAccount}
|
|
className="w-full"
|
|
variant="outline"
|
|
disabled={isAddingAccount}
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
{t("codexOauth.addAnotherAccount", "添加其他账号")}
|
|
</Button>
|
|
)}
|
|
|
|
{/* 轮询中状态 */}
|
|
{isPolling && deviceCode && (
|
|
<div className="space-y-3 p-4 rounded-lg border border-border bg-muted/50">
|
|
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
{t("codexOauth.waitingForAuth", "等待授权中...")}
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="text-xs text-muted-foreground mb-1">
|
|
{t("codexOauth.enterCode", "在浏览器中输入以下代码：")}
|
|
</p>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<code className="text-2xl font-mono font-bold tracking-wider bg-background px-4 py-2 rounded border">
|
|
{deviceCode.user_code}
|
|
</code>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={copyUserCode}
|
|
title={t("codexOauth.copyCode", "复制代码")}
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4 text-green-500" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<a
|
|
href={deviceCode.verification_uri}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-sm text-blue-500 hover:underline"
|
|
>
|
|
{deviceCode.verification_uri}
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={cancelAuth}
|
|
>
|
|
{t("common.cancel", "取消")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 错误状态 */}
|
|
{pollingState === "error" && error && (
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-red-500">{error}</p>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
onClick={addAccount}
|
|
variant="outline"
|
|
size="sm"
|
|
>
|
|
{t("codexOauth.retry", "重试")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={cancelAuth}
|
|
variant="ghost"
|
|
size="sm"
|
|
>
|
|
{t("common.cancel", "取消")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 注销所有账号 */}
|
|
{hasAnyAccount && accounts.length > 1 && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={logout}
|
|
className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950"
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
{t("codexOauth.logoutAll", "注销所有账号")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CodexOAuthSection;
|