dsh-plugin-image-workbench 0.0.0-stage → 1.1.6

package/vendor/chatgpt2api/source/web/src/app/accounts/components/account-import-dialog.tsx

@@ -0,0 +1,925 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useRef, useState, type ChangeEvent } from "react";
+import {
+  ArrowLeft,
+  Copy,
+  ExternalLink,
+  FileJson,
+  FileText,
+  Files,
+  KeyRound,
+  LoaderCircle,
+  LogIn,
+  ServerCog,
+  Upload,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  createAccounts,
+  finishOAuthLogin,
+  startOAuthLogin,
+  type Account,
+  type AccountImportPayload,
+  type OAuthLoginStartResponse,
+} from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+type ImportMethod = "menu" | "token" | "session" | "codex-auth" | "account-json" | "oauth";
+
+type AccountImportDialogProps = {
+  disabled?: boolean;
+  onImported: (items: Account[]) => void;
+};
+
+type PendingAccountJsonImport = {
+  tokens: string[];
+  accounts: AccountImportPayload[];
+  parsedAccountCount: number;
+  errorCount: number;
+};
+
+const sessionUrl = "https://chatgpt.com/api/auth/session";
+
+function splitTokens(value: string) {
+  return value
+    .split(/\r?\n/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function getSessionAccessToken(value: unknown) {
+  const token = (value as { accessToken?: unknown })?.accessToken;
+  return typeof token === "string" ? token.trim() : "";
+}
+
+function getAccountJsonAccount(value: unknown): AccountImportPayload | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const raw = value as Record<string, unknown>;
+  const tokenValue = raw.access_token ?? raw.accessToken;
+  const token = typeof tokenValue === "string" ? tokenValue.trim() : "";
+  if (!token) {
+    return null;
+  }
+
+  const payload: AccountImportPayload = {
+    ...raw,
+    access_token: token,
+    source_type: "codex",
+  };
+  delete payload.accessToken;
+  if (payload.type === "codex") {
+    payload.export_type = "codex";
+    delete payload.type;
+  }
+  return payload;
+}
+
+function getAccountJsonAccounts(value: unknown): AccountImportPayload[] {
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => getAccountJsonAccount(item))
+      .filter((item): item is AccountImportPayload => Boolean(item));
+  }
+
+  const singleAccount = getAccountJsonAccount(value);
+  if (singleAccount) {
+    return [singleAccount];
+  }
+
+  if (value && typeof value === "object") {
+    const raw = value as Record<string, unknown>;
+    const nested = raw.accounts ?? raw.items;
+    if (Array.isArray(nested)) {
+      return nested
+        .map((item) => getAccountJsonAccount(item))
+        .filter((item): item is AccountImportPayload => Boolean(item));
+    }
+  }
+
+  return [];
+}
+
+function getCodexAuthAccount(value: unknown): AccountImportPayload | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const raw = value as Record<string, unknown>;
+  const tokenValue = raw.access_token ?? raw.accessToken;
+  const token = typeof tokenValue === "string" ? tokenValue.trim() : "";
+  if (!token) {
+    return null;
+  }
+
+  const payload: AccountImportPayload = {
+    ...raw,
+    access_token: token,
+    export_type: "codex",
+    source_type: "codex",
+  };
+  delete payload.accessToken;
+  if (payload.type === "codex") {
+    delete payload.type;
+  }
+  return payload;
+}
+
+function readFileAsText(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : "");
+    reader.onerror = () => reject(reader.error ?? new Error(`读取文件失败: ${file.name}`));
+    reader.readAsText(file);
+  });
+}
+
+function MethodCard({
+  title,
+  description,
+  icon: Icon,
+  onClick,
+}: {
+  title: string;
+  description: string;
+  icon: typeof KeyRound;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full rounded-2xl border border-stone-200 bg-white p-0 text-left transition hover:border-stone-300 hover:bg-stone-50"
+    >
+      <Card className="rounded-2xl border-0 bg-transparent shadow-none">
+        <CardContent className="flex items-start gap-4 p-4">
+          <div className="rounded-xl bg-stone-100 p-3 text-stone-700">
+            <Icon className="size-5" />
+          </div>
+          <div className="space-y-1">
+            <div className="text-sm font-semibold text-stone-900">{title}</div>
+            <div className="text-sm leading-6 text-stone-500">{description}</div>
+          </div>
+        </CardContent>
+      </Card>
+    </button>
+  );
+}
+
+export function AccountImportDialog({ disabled, onImported }: AccountImportDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [method, setMethod] = useState<ImportMethod>("menu");
+  const [tokenInput, setTokenInput] = useState("");
+  const [sessionInput, setSessionInput] = useState("");
+  const [codexAuthInput, setCodexAuthInput] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [pendingAccountJsonImport, setPendingAccountJsonImport] = useState<PendingAccountJsonImport | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [oauthEmailHint, setOauthEmailHint] = useState("");
+  const [oauthSession, setOauthSession] = useState<OAuthLoginStartResponse | null>(null);
+  const [oauthCallbackInput, setOauthCallbackInput] = useState("");
+  const [oauthStarting, setOauthStarting] = useState(false);
+
+  const txtInputRef = useRef<HTMLInputElement | null>(null);
+  const accountJsonInputRef = useRef<HTMLInputElement | null>(null);
+
+  const resetState = () => {
+    setMethod("menu");
+    setTokenInput("");
+    setSessionInput("");
+    setCodexAuthInput("");
+    setPendingAccountJsonImport(null);
+    setConfirmOpen(false);
+    setOauthEmailHint("");
+    setOauthSession(null);
+    setOauthCallbackInput("");
+    setOauthStarting(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      resetState();
+    }
+  };
+
+  const submitTokens = async (tokens: string[], successText?: string, accountPayloads: AccountImportPayload[] = []) => {
+    const normalizedTokens = tokens.map((item) => item.trim()).filter(Boolean);
+
+    if (normalizedTokens.length === 0) {
+      toast.error("请先提供至少一个可用 Token");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const data = await createAccounts(normalizedTokens, accountPayloads);
+      onImported(data.items);
+      setOpen(false);
+      resetState();
+
+      if ((data.errors?.length ?? 0) > 0) {
+        const firstError = data.errors?.[0]?.error;
+        toast.error(
+          `${successText ?? "导入完成"}，新增 ${data.added ?? 0} 个，已刷新 ${data.refreshed ?? 0} 个，失败 ${data.errors?.length ?? 0} 个${firstError ? `，首个错误：${firstError}` : ""}`,
+        );
+      } else {
+        toast.success(
+          `${successText ?? "导入完成"}，新增 ${data.added ?? 0} 个，跳过 ${data.skipped ?? 0} 个重复项，已自动刷新账号信息`,
+        );
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "导入账户失败";
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleImportTokenText = async () => {
+    await submitTokens(splitTokens(tokenInput), "Access Token 导入完成");
+  };
+
+  // 起授权：拿 authorize URL，立刻在新窗口打开，方便用户登录
+  const handleStartOAuth = async () => {
+    setOauthStarting(true);
+    try {
+      const data = await startOAuthLogin(oauthEmailHint.trim());
+      setOauthSession(data);
+      setOauthCallbackInput("");
+      if (typeof window !== "undefined") {
+        window.open(data.authorize_url, "_blank", "noopener,noreferrer");
+      }
+      toast.success("已打开 OpenAI 授权页面，请在登录后复制 callback URL 回来");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "OAuth 起始失败";
+      toast.error(message);
+    } finally {
+      setOauthStarting(false);
+    }
+  };
+
+  // 用粘贴回来的 callback URL 完成换 token + 落盘
+  const handleFinishOAuth = async () => {
+    if (!oauthSession) {
+      toast.error("请先点击\"打开授权页面\"获取 session");
+      return;
+    }
+    const trimmed = oauthCallbackInput.trim();
+    if (!trimmed) {
+      toast.error("请粘贴 callback URL 或 code");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const data = await finishOAuthLogin(oauthSession.session_id, trimmed);
+      onImported(data.items);
+      setOpen(false);
+      resetState();
+
+      if ((data.errors?.length ?? 0) > 0) {
+        const firstError = data.errors?.[0]?.error;
+        toast.error(
+          `OAuth 登录完成，新增 ${data.added ?? 0} 个，已刷新 ${data.refreshed ?? 0} 个，失败 ${data.errors?.length ?? 0} 个${firstError ? `，首个错误：${firstError}` : ""}`,
+        );
+      } else {
+        toast.success(
+          `OAuth 登录完成，新增 ${data.added ?? 0} 个，跳过 ${data.skipped ?? 0} 个重复项，已自动刷新账号信息`,
+        );
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "OAuth 换 token 失败";
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // 复制 authorize URL 到剪贴板（适配浏览器和 fallback）
+  const handleCopyAuthorizeUrl = async () => {
+    if (!oauthSession) {
+      return;
+    }
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(oauthSession.authorize_url);
+        toast.success("授权 URL 已复制到剪贴板");
+      } else {
+        toast.error("当前环境不支持自动复制，请手动选择并复制");
+      }
+    } catch {
+      toast.error("复制失败，请手动选择并复制");
+    }
+  };
+
+  const handleTxtSelected = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      const content = await readFileAsText(file);
+      const tokens = splitTokens(content);
+
+      if (tokens.length === 0) {
+        toast.error("TXT 文件里没有读取到有效 Token");
+        return;
+      }
+
+      setTokenInput((prev) => {
+        const next = [...splitTokens(prev), ...tokens];
+        return next.join("\n");
+      });
+      toast.success(`已从 ${file.name} 读取 ${tokens.length} 个 Token`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "读取 TXT 文件失败";
+      toast.error(message);
+    }
+  };
+
+  const handleImportSessionJson = async () => {
+    if (!sessionInput.trim()) {
+      toast.error("请先粘贴完整 Session JSON");
+      return;
+    }
+
+    try {
+      const payload = JSON.parse(sessionInput) as unknown;
+      const token = getSessionAccessToken(payload);
+
+      if (!token) {
+        toast.error("未从 Session JSON 中提取到 accessToken");
+        return;
+      }
+
+      await submitTokens([token], "Session JSON 导入完成");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Session JSON 解析失败";
+      toast.error(message);
+    }
+  };
+
+  const handleImportCodexAuthJson = async () => {
+    if (!codexAuthInput.trim()) {
+      toast.error("请先粘贴 Codex 认证 JSON");
+      return;
+    }
+
+    try {
+      const payload = JSON.parse(codexAuthInput) as unknown;
+      const account = getCodexAuthAccount(payload);
+
+      if (!account) {
+        toast.error("未从 Codex 认证 JSON 中提取到 access_token");
+        return;
+      }
+
+      await submitTokens([account.access_token], "Codex 认证 JSON 导入完成", [account]);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Codex 认证 JSON 解析失败";
+      toast.error(message);
+    }
+  };
+
+  const handleAccountJsonSelected = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+
+    if (files.length === 0) {
+      return;
+    }
+
+    try {
+      const results = await Promise.all(
+        files.map(async (file) => {
+          const raw = await readFileAsText(file);
+          const parsed = JSON.parse(raw) as unknown;
+          const accounts = getAccountJsonAccounts(parsed);
+          return {
+            accounts,
+          };
+        }),
+      );
+
+      const accounts = results.flatMap((item) => item.accounts);
+      const tokens = accounts.map((item) => item.access_token);
+      const parsedAccountCount = accounts.length;
+      const errorCount = results.filter((item) => item.accounts.length === 0).length;
+
+      if (parsedAccountCount === 0) {
+        toast.error("这些账号 JSON 文件里没有读取到可用 access_token");
+        return;
+      }
+
+      setPendingAccountJsonImport({
+        tokens,
+        accounts,
+        parsedAccountCount,
+        errorCount,
+      });
+      setConfirmOpen(true);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "读取账号 JSON 文件失败";
+      toast.error(message);
+    }
+  };
+
+  const renderMethodBody = () => {
+    if (method === "token") {
+      const tokenCount = splitTokens(tokenInput).length;
+
+      return (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() => setMethod("menu")}
+              className="inline-flex items-center gap-1 text-sm text-stone-500 transition hover:text-stone-800"
+            >
+              <ArrowLeft className="size-4" />
+              返回导入方式
+            </button>
+            <span className="text-xs text-stone-400">当前识别 {tokenCount} 个 Token</span>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-stone-700">Access Token 列表</label>
+            <Textarea
+              placeholder="每行一个 Access Token..."
+              value={tokenInput}
+              onChange={(event) => setTokenInput(event.target.value)}
+              className="min-h-56 resize-none rounded-xl border-stone-200"
+            />
+          </div>
+          <div className="rounded-2xl border border-dashed border-stone-200 bg-stone-50 p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div className="space-y-1">
+                <div className="text-sm font-medium text-stone-800">从 TXT 文件导入</div>
+                <div className="text-sm leading-6 text-stone-500">支持 `.txt`，文件内容也是一行一个 Token。</div>
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-xl border-stone-200 bg-white"
+                onClick={() => txtInputRef.current?.click()}
+                disabled={isSubmitting}
+              >
+                <FileText className="size-4" />
+                选择 TXT
+              </Button>
+            </div>
+          </div>
+          <input
+            ref={txtInputRef}
+            type="file"
+            accept=".txt,text/plain"
+            className="hidden"
+            onChange={(event) => void handleTxtSelected(event)}
+          />
+        </div>
+      );
+    }
+
+    if (method === "session") {
+      return (
+        <div className="space-y-4">
+          <button
+            type="button"
+            onClick={() => setMethod("menu")}
+            className="inline-flex items-center gap-1 text-sm text-stone-500 transition hover:text-stone-800"
+          >
+            <ArrowLeft className="size-4" />
+            返回导入方式
+          </button>
+          <div className="rounded-2xl border border-stone-200 bg-stone-50 p-4 text-sm leading-6 text-stone-600">
+            打开
+            {" "}
+            <a
+              href={sessionUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-stone-900 underline underline-offset-4"
+            >
+              {sessionUrl}
+              <ExternalLink className="size-3.5" />
+            </a>
+            ，复制页面返回的完整 JSON，系统会自动提取其中的 `accessToken` 导入。
+          </div>
+          <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm leading-6 text-amber-900">
+            <div className="font-medium">风险提示</div>
+            <div>
+              不要使用自己的大号，尽量使用不常用的小号进行导入，避免出现封号风险。本项目不承担任何封号风险责任。
+            </div>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-stone-700">Session JSON</label>
+            <Textarea
+              placeholder='粘贴完整 JSON，例如包含 "accessToken" 的对象...'
+              value={sessionInput}
+              onChange={(event) => setSessionInput(event.target.value)}
+              className="min-h-56 resize-none rounded-xl border-stone-200 font-mono text-xs"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    if (method === "oauth") {
+      return (
+        <div className="space-y-4">
+          <button
+            type="button"
+            onClick={() => setMethod("menu")}
+            className="inline-flex items-center gap-1 text-sm text-stone-500 transition hover:text-stone-800"
+          >
+            <ArrowLeft className="size-4" />
+            返回导入方式
+          </button>
+          <div className="rounded-2xl border border-stone-200 bg-stone-50 p-4 text-sm leading-6 text-stone-600 space-y-2">
+            <div className="font-medium text-stone-800">操作步骤</div>
+            <ol className="list-decimal pl-5 space-y-1">
+              <li>（可选）填写你 ChatGPT 账号的邮箱，登录页会预填。</li>
+              <li>点击下方"打开授权页面"，在新标签里登录自己的 ChatGPT 账号。</li>
+              <li>登录完成后浏览器会跳到 <code className="rounded bg-stone-200 px-1">platform.openai.com/auth/callback?code=...</code>。立刻从地址栏复制整段 URL（或开 F12 在 Network 里抓到 callback 那一行，右键 Copy → Copy URL）。</li>
+              <li>把 callback URL 粘到下面输入框，点"完成导入"。</li>
+            </ol>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-stone-700">邮箱（可选预填）</label>
+            <input
+              type="email"
+              placeholder="you@example.com"
+              value={oauthEmailHint}
+              onChange={(event) => setOauthEmailHint(event.target.value)}
+              disabled={Boolean(oauthSession) || oauthStarting}
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm outline-none focus:border-stone-400"
+            />
+          </div>
+          {!oauthSession ? (
+            <Button
+              type="button"
+              className="h-10 rounded-xl bg-stone-950 text-white hover:bg-stone-800"
+              onClick={() => void handleStartOAuth()}
+              disabled={oauthStarting}
+            >
+              {oauthStarting ? <LoaderCircle className="size-4 animate-spin" /> : <ExternalLink className="size-4" />}
+              打开授权页面
+            </Button>
+          ) : (
+            <div className="space-y-3">
+              <div className="rounded-2xl border border-stone-200 bg-white p-3 text-xs leading-6 text-stone-600 break-all font-mono">
+                {oauthSession.authorize_url}
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="rounded-xl border-stone-200 bg-white"
+                  onClick={() => void handleCopyAuthorizeUrl()}
+                >
+                  <Copy className="size-4" />
+                  复制授权 URL
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="rounded-xl border-stone-200 bg-white"
+                  onClick={() => window.open(oauthSession.authorize_url, "_blank", "noopener,noreferrer")}
+                >
+                  <ExternalLink className="size-4" />
+                  再次打开
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="rounded-xl border-stone-200 bg-white"
+                  onClick={() => {
+                    setOauthSession(null);
+                    setOauthCallbackInput("");
+                  }}
+                >
+                  重新生成
+                </Button>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-stone-700">粘贴 callback URL（或仅 code）</label>
+                <Textarea
+                  placeholder={"https://platform.openai.com/auth/callback?code=...&state=..."}
+                  value={oauthCallbackInput}
+                  onChange={(event) => setOauthCallbackInput(event.target.value)}
+                  className="min-h-24 resize-none rounded-xl border-stone-200 font-mono text-xs"
+                />
+              </div>
+            </div>
+          )}
+          <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm leading-6 text-amber-900">
+            <div className="font-medium">注意</div>
+            <div>
+              授权码（code）只能使用一次。如果浏览器的 callback 页加载完成、显示了 OpenAI 的错误页，那 code 大概率已经被消耗，
+              请点击"重新生成"再走一次。整个流程在 10 分钟内完成即可。
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    if (method === "account-json") {
+      return (
+        <div className="space-y-4">
+          <button
+            type="button"
+            onClick={() => setMethod("menu")}
+            className="inline-flex items-center gap-1 text-sm text-stone-500 transition hover:text-stone-800"
+          >
+            <ArrowLeft className="size-4" />
+            返回导入方式
+          </button>
+          <div className="rounded-2xl border border-dashed border-stone-200 bg-stone-50 p-5">
+            <div className="space-y-2">
+              <div className="text-sm font-medium text-stone-800">选择本地账号 JSON 文件</div>
+              <div className="text-sm leading-6 text-stone-500">
+                支持本项目导出的单账号对象或全部账号数组，也兼容每个文件一个账号对象的 CPA JSON。
+                系统会自动提取 `access_token` 或 `accessToken`。
+              </div>
+            </div>
+            <Button
+              type="button"
+              className="mt-4 rounded-xl bg-stone-950 text-white hover:bg-stone-800"
+              onClick={() => accountJsonInputRef.current?.click()}
+              disabled={isSubmitting}
+            >
+              <Files className="size-4" />
+              选择 JSON 文件
+            </Button>
+          </div>
+          <input
+            ref={accountJsonInputRef}
+            type="file"
+            accept=".json,application/json"
+            multiple
+            className="hidden"
+            onChange={(event) => void handleAccountJsonSelected(event)}
+          />
+          {pendingAccountJsonImport ? (
+            <div className="rounded-2xl border border-stone-200 bg-white p-4 text-sm leading-6 text-stone-600">
+              最近一次读取到 {pendingAccountJsonImport.parsedAccountCount} 个 Token
+              {pendingAccountJsonImport.errorCount > 0 ? `，另有 ${pendingAccountJsonImport.errorCount} 个文件未提取成功` : ""}。
+            </div>
+          ) : null}
+        </div>
+      );
+    }
+
+    if (method === "codex-auth") {
+      return (
+        <div className="space-y-4">
+          <button
+            type="button"
+            onClick={() => setMethod("menu")}
+            className="inline-flex items-center gap-1 text-sm text-stone-500 transition hover:text-stone-800"
+          >
+            <ArrowLeft className="size-4" />
+            返回导入方式
+          </button>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-stone-700">Codex 认证 JSON</label>
+            <Textarea
+              placeholder='粘贴包含 "access_token"、"refresh_token"、"id_token" 的 Codex 认证 JSON...'
+              value={codexAuthInput}
+              onChange={(event) => setCodexAuthInput(event.target.value)}
+              className="min-h-64 resize-none rounded-xl border-stone-200 font-mono text-xs"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-3">
+        <MethodCard
+          title="OAuth 登录已有账号（带自动刷新）"
+          description="用浏览器登录自己的 ChatGPT 账号，回填 callback URL 即可拿到 refresh_token，后台会自动续期。"
+          icon={LogIn}
+          onClick={() => setMethod("oauth")}
+        />
+        <MethodCard
+          title="导入 Access Token"
+          description="支持直接粘贴，一行一个；也支持从 TXT 文件读取，一行一个。"
+          icon={KeyRound}
+          onClick={() => setMethod("token")}
+        />
+        <MethodCard
+          title="导入 Session JSON"
+          description="从 chatgpt.com 的 session 接口复制完整 JSON，自动提取 accessToken。"
+          icon={FileJson}
+          onClick={() => setMethod("session")}
+        />
+        <MethodCard
+          title="导入 Codex 认证 JSON"
+          description="粘贴 Codex 认证 JSON，导入后账号来源标记为 codex。"
+          icon={FileJson}
+          onClick={() => setMethod("codex-auth")}
+        />
+        <MethodCard
+          title="导入账号 JSON 文件"
+          description="支持本项目导出的单账号 JSON 或全部账号数组，也兼容 CPA JSON 文件。"
+          icon={Files}
+          onClick={() => setMethod("account-json")}
+        />
+        <MethodCard
+          title="从远程 CPA 服务器导入"
+          description="前往设置页面配置远程 CPA 服务器后再执行导入。"
+          icon={Files}
+          onClick={() => {
+            setOpen(false);
+            resetState();
+            router.push("/settings");
+          }}
+        />
+        <MethodCard
+          title="从 Sub2API 服务器导入"
+          description="前往设置页面配置 Sub2API 服务器，再选择其中的 OpenAI 账号导入。"
+          icon={ServerCog}
+          onClick={() => {
+            setOpen(false);
+            resetState();
+            router.push("/settings");
+          }}
+        />
+      </div>
+    );
+  };
+
+  const footerDisabled = disabled || isSubmitting;
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <Button
+          className="h-10 rounded-xl bg-stone-950 px-4 text-white hover:bg-stone-800"
+          onClick={() => setOpen(true)}
+          disabled={disabled}
+        >
+          <Upload className="size-4" />
+          导入
+        </Button>
+        <DialogContent showCloseButton={false} className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>
+              {method === "menu"
+                ? "导入账户"
+                : method === "token"
+                  ? "导入 Access Token"
+                  : method === "session"
+                    ? "导入 Session JSON"
+                    : method === "codex-auth"
+                      ? "导入 Codex 认证 JSON"
+                    : method === "oauth"
+                      ? "OAuth 登录已有账号"
+                      : "导入账号 JSON"}
+            </DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              {method === "menu"
+                ? "选择一种导入方式。导入成功后会自动拉取邮箱、类型和额度。"
+                : method === "token"
+                  ? "支持手动粘贴或从 TXT 文件导入，一行一个 Token。"
+                  : method === "session"
+                    ? "粘贴完整 Session JSON，系统会自动提取 accessToken。"
+                    : method === "codex-auth"
+                      ? "粘贴 Codex 认证 JSON，系统会按 codex 来源导入。"
+                    : method === "oauth"
+                      ? "用浏览器跑一遍 OpenAI 标准 OAuth，拿回 refresh_token 后系统会自动续期。"
+                      : "支持读取本项目导出的单账号对象或全部账号数组，并在提交前做数量确认。"}
+            </DialogDescription>
+          </DialogHeader>
+
+          {renderMethodBody()}
+
+          <DialogFooter className="pt-2">
+            <Button
+              variant="secondary"
+              className="h-10 rounded-xl bg-stone-100 px-5 text-stone-700 hover:bg-stone-200"
+              onClick={() => setOpen(false)}
+              disabled={footerDisabled}
+            >
+              取消
+            </Button>
+            {method === "token" ? (
+              <Button
+                className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+                onClick={() => void handleImportTokenText()}
+                disabled={footerDisabled}
+              >
+                {isSubmitting ? <LoaderCircle className="size-4 animate-spin" /> : null}
+                导入 Token
+              </Button>
+            ) : null}
+            {method === "session" ? (
+              <Button
+                className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+                onClick={() => void handleImportSessionJson()}
+                disabled={footerDisabled}
+              >
+                {isSubmitting ? <LoaderCircle className="size-4 animate-spin" /> : null}
+                导入 JSON
+              </Button>
+            ) : null}
+            {method === "codex-auth" ? (
+              <Button
+                className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+                onClick={() => void handleImportCodexAuthJson()}
+                disabled={footerDisabled}
+              >
+                {isSubmitting ? <LoaderCircle className="size-4 animate-spin" /> : null}
+                导入 JSON
+              </Button>
+            ) : null}
+            {method === "oauth" ? (
+              <Button
+                className={cn(
+                  "h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800",
+                  !oauthSession ? "hidden" : "",
+                )}
+                onClick={() => void handleFinishOAuth()}
+                disabled={footerDisabled || !oauthSession || !oauthCallbackInput.trim()}
+              >
+                {isSubmitting ? <LoaderCircle className="size-4 animate-spin" /> : null}
+                完成导入
+              </Button>
+            ) : null}
+            {method === "account-json" ? (
+              <Button
+                className={cn(
+                  "h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800",
+                  !pendingAccountJsonImport ? "hidden" : "",
+                )}
+                onClick={() => setConfirmOpen(true)}
+                disabled={footerDisabled || !pendingAccountJsonImport}
+              >
+                查看导入确认
+              </Button>
+            ) : null}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>确认导入账号 Token</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              {pendingAccountJsonImport
+                ? `确认识别到 ${pendingAccountJsonImport.parsedAccountCount} 个 Token，是否确认导入？`
+                : "尚未读取到可导入的 Token。"}
+              {pendingAccountJsonImport?.errorCount
+                ? `，另有 ${pendingAccountJsonImport.errorCount} 个文件未提取成功。`
+                : "。"}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="pt-2">
+            <Button
+              variant="secondary"
+              className="h-10 rounded-xl bg-stone-100 px-5 text-stone-700 hover:bg-stone-200"
+              onClick={() => setConfirmOpen(false)}
+              disabled={isSubmitting}
+            >
+              返回
+            </Button>
+            <Button
+              className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+              onClick={() =>
+                void submitTokens(
+                  pendingAccountJsonImport?.tokens ?? [],
+                  "账号 JSON 导入完成",
+                  pendingAccountJsonImport?.accounts ?? [],
+                )
+              }
+              disabled={isSubmitting || !pendingAccountJsonImport}
+            >
+              {isSubmitting ? <LoaderCircle className="size-4 animate-spin" /> : null}
+              确认导入
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}