+
{(
@@ -5813,6 +5818,7 @@ export default function Accounts() {
["codex", t("accounts.providerViewCodex")],
["grok", t("accounts.providerViewGrok")],
["antigravity", t("accounts.providerViewAntigravity")],
+ ["claude", t("accounts.providerViewClaude")],
] as const
).map(([key, label]) => (
+ );
+ }
+
return (
void;
+ proxies?: ProxyRow[];
groupIds: number[];
onGroupIdsChange: (value: number[]) => void;
groups: AccountGroup[];
@@ -443,6 +447,8 @@ function AccountMetadataFields({
onChange={(event) => onProxyUrlChange(event.target.value)}
placeholder={t("antigravity.proxyUrlPlaceholder")}
/>
+ {/* 从代理池选择：展示每条代理已绑定账号数/空闲，选中写入上面的输入框。 */}
+
@@ -848,6 +854,22 @@ function AntigravityAccounts({ headerSlot }: { headerSlot?: ReactNode } = {}) {
const [accounts, setAccounts] = useState([]);
const [allGroups, setAllGroups] = useState([]);
+ // 代理池：账号弹窗"从代理池选择"下拉的数据源，随页面加载一次；失败静默留空。
+ const [proxyPool, setProxyPool] = useState([]);
+ useEffect(() => {
+ let cancelled = false;
+ void api
+ .listProxies()
+ .then((res) => {
+ if (!cancelled) setProxyPool(res.proxies ?? []);
+ })
+ .catch(() => {
+ if (!cancelled) setProxyPool([]);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
const antigravityGroups = useMemo(
() => allGroups.filter((group) => group.channel === "antigravity"),
[allGroups],
@@ -2149,6 +2171,7 @@ function AntigravityAccounts({ headerSlot }: { headerSlot?: ReactNode } = {}) {
setOAuthDraft((current) => ({ ...current, proxyUrl }))
}
@@ -2475,6 +2498,7 @@ function AntigravityAccounts({ headerSlot }: { headerSlot?: ReactNode } = {}) {
setImportDraft((current) => ({ ...current, proxyUrl }))
}
@@ -2680,6 +2704,7 @@ function AntigravityAccounts({ headerSlot }: { headerSlot?: ReactNode } = {}) {
)}
setEditDraft((current) => ({ ...current, proxyUrl }))
}
diff --git a/frontend/src/pages/ClaudeAccounts.tsx b/frontend/src/pages/ClaudeAccounts.tsx
new file mode 100644
index 00000000..827e750f
--- /dev/null
+++ b/frontend/src/pages/ClaudeAccounts.tsx
@@ -0,0 +1,415 @@
+import { useCallback, useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import { api } from "../api";
+import type { ProxyRow } from "../api";
+import type { AccountRow, ClaudeImportTokenRequest } from "../types";
+import { ProxyPoolSelect } from "../components/ProxyPoolSelect";
+import ChannelLogo from "../components/ChannelLogo";
+import Modal from "../components/Modal";
+import PageHeader from "../components/PageHeader";
+import StatusBadge from "../components/StatusBadge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useToast } from "../hooks/useToast";
+import { useConfirmDialog } from "../hooks/useConfirmDialog";
+import { getErrorMessage } from "../utils/error";
+
+// extractCode 从粘贴内容里取授权码：支持整条回调 URL、code#state、或纯 code。
+// 与 cmd/claude_login 的解析保持一致（后端 exchange 端点只收 code）。
+function extractCode(input: string): string {
+ const raw = input.trim();
+ if (!raw) return "";
+ if (raw.startsWith("http://") || raw.startsWith("https://")) {
+ try {
+ const u = new URL(raw);
+ const code = u.searchParams.get("code");
+ if (code) return code.trim();
+ } catch {
+ // fall through
+ }
+ }
+ return raw;
+}
+
+export default function ClaudeAccounts({
+ headerSlot,
+}: {
+ headerSlot?: ReactNode;
+} = {}) {
+ const { t } = useTranslation();
+ const { showToast } = useToast();
+ const { confirm, confirmDialog } = useConfirmDialog();
+
+ const [accounts, setAccounts] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [proxyPool, setProxyPool] = useState([]);
+ const [showAdd, setShowAdd] = useState(false);
+
+ const reload = useCallback(async () => {
+ setLoading(true);
+ try {
+ const res = await api.getAccountsPage({
+ channel: "claude",
+ page: 1,
+ pageSize: 100,
+ sort: "updated_at",
+ order: "desc",
+ });
+ setAccounts(res.accounts ?? []);
+ } catch (error) {
+ showToast(getErrorMessage(error), "error");
+ } finally {
+ setLoading(false);
+ }
+ }, [showToast]);
+
+ useEffect(() => {
+ void reload();
+ }, [reload]);
+
+ useEffect(() => {
+ let cancelled = false;
+ void api
+ .listProxies()
+ .then((res) => {
+ if (!cancelled) setProxyPool(res.proxies ?? []);
+ })
+ .catch(() => {
+ if (!cancelled) setProxyPool([]);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ const handleDelete = useCallback(
+ async (acc: AccountRow) => {
+ const ok = await confirm({
+ title: t("claude.deleteConfirm"),
+ description: acc.email || acc.name || `#${acc.id}`,
+ });
+ if (!ok) return;
+ try {
+ await api.deleteAccount(acc.id);
+ void reload();
+ } catch (error) {
+ showToast(getErrorMessage(error), "error");
+ }
+ },
+ [confirm, reload, showToast, t],
+ );
+
+ const handleRefresh = useCallback(
+ async (acc: AccountRow) => {
+ try {
+ await api.refreshAccount(acc.id);
+ void reload();
+ } catch (error) {
+ showToast(getErrorMessage(error), "error");
+ }
+ },
+ [reload, showToast],
+ );
+
+ return (
+ ;
+ try {
+ parsed = JSON.parse(tokenJson) as Partial;
+ } catch {
+ showToast(t("claude.invalidJson"), "error");
+ return;
+ }
+ if (!parsed.access_token || !parsed.refresh_token) {
+ showToast(t("claude.invalidJson"), "error");
+ return;
+ }
+ setSubmitting(true);
+ try {
+ await api.importClaudeToken({
+ access_token: parsed.access_token,
+ refresh_token: parsed.refresh_token,
+ email: parsed.email,
+ account_id: parsed.account_id,
+ expires_at: parsed.expires_at,
+ name: name.trim() || undefined,
+ proxy_url: useProxyPool ? undefined : proxyUrl.trim() || undefined,
+ use_proxy_pool: useProxyPool || undefined,
+ timezone: timezone.trim() || undefined,
+ });
+ showToast(t("claude.added"), "success");
+ onAdded();
+ } catch (error) {
+ showToast(getErrorMessage(error), "error");
+ } finally {
+ setSubmitting(false);
+ }
+ }, [name, onAdded, proxyUrl, showToast, t, timezone, tokenJson, useProxyPool]);
+
+ const proxyFields = (
+
+
+ {tab === "oauth" ? (
+
+ ) : (
+
+ )}
+
+ }
+ >
+
+ void reload()}
+ actions={
+
+ }
+ />
+
+ {loading ? (
+ setShowAdd(false)}
+ onAdded={() => {
+ setShowAdd(false);
+ void reload();
+ }}
+ />
+ ) : null}
+ {confirmDialog}
+
+ );
+}
+
+// ClaudeAddModal 提供两种添加方式：网页 OAuth 两步式 / 导入 token JSON。
+function ClaudeAddModal({
+ proxies,
+ onClose,
+ onAdded,
+}: {
+ proxies: ProxyRow[];
+ onClose: () => void;
+ onAdded: () => void;
+}) {
+ const { t } = useTranslation();
+ const { showToast } = useToast();
+ const [tab, setTab] = useState<"oauth" | "import">("oauth");
+
+ // 公共：代理选择 + 时区
+ const [proxyUrl, setProxyUrl] = useState("");
+ const [useProxyPool, setUseProxyPool] = useState(false);
+ const [name, setName] = useState("");
+ const [timezone, setTimezone] = useState("");
+ const [submitting, setSubmitting] = useState(false);
+
+ // OAuth 两步
+ const [authUrl, setAuthUrl] = useState("");
+ const [state, setState] = useState("");
+ const [callback, setCallback] = useState("");
+
+ // Import
+ const [tokenJson, setTokenJson] = useState("");
+
+ const genAuthUrl = useCallback(async () => {
+ try {
+ const res = await api.generateClaudeAuthURL();
+ setAuthUrl(res.auth_url);
+ setState(res.state);
+ window.open(res.auth_url, "_blank", "noopener,noreferrer");
+ } catch (error) {
+ showToast(t("claude.authUrlFailed") + ": " + getErrorMessage(error), "error");
+ }
+ }, [showToast, t]);
+
+ const submitOAuth = useCallback(async () => {
+ const code = extractCode(callback);
+ if (!state || !code) {
+ showToast(t("claude.exchangeFailed"), "error");
+ return;
+ }
+ setSubmitting(true);
+ try {
+ await api.exchangeClaudeOAuthCode({
+ state,
+ code,
+ name: name.trim() || undefined,
+ proxy_url: useProxyPool ? undefined : proxyUrl.trim() || undefined,
+ use_proxy_pool: useProxyPool || undefined,
+ timezone: timezone.trim() || undefined,
+ });
+ showToast(t("claude.added"), "success");
+ onAdded();
+ } catch (error) {
+ showToast(t("claude.exchangeFailed") + ": " + getErrorMessage(error), "error");
+ } finally {
+ setSubmitting(false);
+ }
+ }, [callback, name, onAdded, proxyUrl, showToast, state, t, timezone, useProxyPool]);
+
+ const submitImport = useCallback(async () => {
+ let parsed: Partial
+ {t("common.loading")}
+
+ ) : accounts.length === 0 ? (
+
+ {t("claude.empty")}
+
+ ) : (
+
+ {accounts.map((acc) => (
+
+ )}
+
+ {showAdd ? (
+
+
+ ))}
+
+
+
+
+
+ {acc.email || acc.name || `#${acc.id}`}
+
+
+ {acc.plan_type || "claude"}
+ {acc.proxy_url ? ` · ${acc.proxy_url}` : ""}
+
+
+
+
+
+ {t("claude.proxyLabel")}
+
+ setProxyUrl(e.target.value)}
+ placeholder="http://127.0.0.1:7890"
+ disabled={useProxyPool}
+ />
+
+ );
+
+ return (
+
+
+
+
+
+
+ {tab === "oauth" ? (
+
+
+ ) : (
+ {t("claude.step1")}
+
+
+ {authUrl ? (
+
+ {t("claude.openAuth")}
+
+ ) : null}
+
+ {t("claude.step2")}
+ setCallback(e.target.value)} + placeholder={t("claude.callbackPlaceholder")} + /> + {proxyFields} +
+
{t("claude.importHint")}
+