Merge pull request #86 from icebear0828/feat/account-import-export

CHANGELOG.md

@@ -17,6 +17,7 @@
 - 模型列表自动同步：后端动态 fetch 成功后自动回写 `config/models.yaml`，静态配置不再滞后；前端每 60s 轮询模型列表，新模型无需刷新页面即可选择
 - Tuple Schema 支持：`prefixItems`（JSON Schema 2020-12 tuple）自动转换为等价 object schema 发给上游，响应侧还原为数组；OpenAI / Gemini / Responses 三端点统一支持
 - WebSocket 传输 + `previous_response_id` 多轮支持：`/v1/responses` 端点自动通过 WebSocket 连接上游，服务端持久化 response，客户端可通过 `previous_response_id` 引用前轮对话实现增量多轮；WebSocket 失败自动降级回 HTTP SSE (#83)
+- 账号批量导入导出：Dashboard 支持导出全部账号到 JSON 文件（含 token，用于备份/迁移），支持从 JSON 文件批量导入账号，自动去重 (#82)
 
 ### Fixed
 

shared/hooks/use-accounts.ts

@@ -155,6 +155,61 @@ export function useAccounts() {
     setList((prev) => prev.map((a) => a.id === accountId ? { ...a, ...patch } : a));
   }, []);
 
+  const exportAccounts = useCallback(async (selectedIds?: string[]) => {
+    const params = selectedIds && selectedIds.length > 0
+      ? `?ids=${selectedIds.join(",")}`
+      : "";
+    const resp = await fetch(`/auth/accounts/export${params}`);
+    const data = await resp.json() as { accounts: Array<{ id: string }> };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    const date = new Date().toISOString().slice(0, 10);
+    a.download = `accounts-export-${date}.json`;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  const importAccounts = useCallback(async (file: File): Promise<{
+    success: boolean;
+    added: number;
+    updated: number;
+    failed: number;
+    errors: string[];
+  }> => {
+    const text = await file.text();
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      return { success: false, added: 0, updated: 0, failed: 0, errors: ["Invalid JSON file"] };
+    }
+    // Support both { accounts: [...] } (export format) and raw array
+    const accounts = Array.isArray(parsed)
+      ? parsed
+      : Array.isArray(parsed.accounts)
+        ? parsed.accounts
+        : null;
+    if (!accounts) {
+      return { success: false, added: 0, updated: 0, failed: 0, errors: ["Invalid format: expected { accounts: [...] }"] };
+    }
+
+    const resp = await fetch("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ accounts }),
+    });
+    const result = await resp.json();
+    if (resp.ok) {
+      await loadAccounts();
+    }
+    return result;
+  }, [loadAccounts]);
+
   return {
     list,
     loading,
@@ -168,5 +223,7 @@ export function useAccounts() {
     startAdd,
     submitRelay,
     deleteAccount,
+    exportAccounts,
+    importAccounts,
   };
 }

shared/i18n/translations.ts

@@ -124,6 +124,11 @@ export const translations = {
     confirmApply: "Confirm Apply",
     cancelBtn: "Cancel",
     noChanges: "No changes",
+    accountImportResult: "Imported: {added} added, {updated} updated, {failed} failed",
+    accountImportError: "Import failed",
+    selectFile: "Select JSON file",
+    selectAll: "Select all",
+    deselectAll: "Deselect all",
     roundRobinRule: "Round-robin",
     assignByStatus: "By status",
     assignByPrefix: "By email prefix",
@@ -303,6 +308,11 @@ export const translations = {
     confirmApply: "\u786e\u8ba4\u5e94\u7528",
     cancelBtn: "\u53d6\u6d88",
     noChanges: "\u65e0\u53d8\u66f4",
+    accountImportResult: "\u5bfc\u5165\u5b8c\u6210\uff1a{added} \u65b0\u589e\uff0c{updated} \u66f4\u65b0\uff0c{failed} \u5931\u8d25",
+    accountImportError: "\u5bfc\u5165\u5931\u8d25",
+    selectFile: "\u9009\u62e9 JSON \u6587\u4ef6",
+    selectAll: "\u5168\u9009",
+    deselectAll: "\u53d6\u6d88\u5168\u9009",
     roundRobinRule: "\u8f6e\u8be2\u5206\u914d",
     assignByStatus: "\u6309\u72b6\u6001\u5206\u914d",
     assignByPrefix: "\u6309\u524d\u7f00\u5206\u914d",

src/routes/__tests__/accounts-import-export.test.ts

@@ -0,0 +1,278 @@
+/**
+ * Tests for account import/export endpoints.
+ * GET  /auth/accounts/export — export all accounts with tokens
+ * POST /auth/accounts/import — bulk import accounts from tokens
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+// Mock fs before importing anything
+vi.mock("fs", () => ({
+  readFileSync: vi.fn(() => { throw new Error("ENOENT"); }),
+  writeFileSync: vi.fn(),
+  renameSync: vi.fn(),
+  existsSync: vi.fn(() => false),
+  mkdirSync: vi.fn(),
+}));
+
+vi.mock("../../paths.js", () => ({
+  getDataDir: vi.fn(() => "/tmp/test-data"),
+  getConfigDir: vi.fn(() => "/tmp/test-config"),
+}));
+
+vi.mock("../../config.js", () => ({
+  getConfig: vi.fn(() => ({
+    auth: {
+      jwt_token: null,
+      rotation_strategy: "least_used",
+      rate_limit_backoff_seconds: 60,
+    },
+    server: { proxy_api_key: null },
+  })),
+}));
+
+// Mock JWT utilities — all tokens are "valid" by default
+const mockIsTokenExpired = vi.hoisted(() => vi.fn(() => false));
+vi.mock("../../auth/jwt-utils.js", () => ({
+  decodeJwtPayload: vi.fn(() => ({ exp: Math.floor(Date.now() / 1000) + 3600 })),
+  extractChatGptAccountId: vi.fn((token: string) => `acct-${token.slice(0, 8)}`),
+  extractUserProfile: vi.fn((token: string) => ({
+    email: `${token.slice(0, 4)}@test.com`,
+    chatgpt_plan_type: "free",
+  })),
+  isTokenExpired: mockIsTokenExpired,
+}));
+
+vi.mock("../../utils/jitter.js", () => ({
+  jitter: vi.fn((val: number) => val),
+}));
+
+vi.mock("../../models/model-store.js", () => ({
+  getModelPlanTypes: vi.fn(() => []),
+}));
+
+import { Hono } from "hono";
+import { AccountPool } from "../../auth/account-pool.js";
+import { createAccountRoutes } from "../../routes/accounts.js";
+
+// Minimal RefreshScheduler stub
+const mockScheduler = {
+  scheduleOne: vi.fn(),
+  clearOne: vi.fn(),
+  start: vi.fn(),
+  stop: vi.fn(),
+};
+
+describe("account import/export", () => {
+  let pool: AccountPool;
+  let app: Hono;
+
+  beforeEach(() => {
+    mockIsTokenExpired.mockReturnValue(false);
+    pool = new AccountPool();
+    const routes = createAccountRoutes(
+      pool,
+      mockScheduler as never,
+    );
+    app = new Hono();
+    app.route("/", routes);
+  });
+
+  afterEach(() => {
+    pool.destroy();
+    vi.clearAllMocks();
+  });
+
+  // ── Export ──────────────────────────────────────────────
+
+  it("GET /auth/accounts/export returns empty array when no accounts", async () => {
+    const res = await app.request("/auth/accounts/export");
+    expect(res.status).toBe(200);
+    const data = await res.json() as { accounts: unknown[] };
+    expect(data.accounts).toEqual([]);
+  });
+
+  it("GET /auth/accounts/export returns full entries with tokens", async () => {
+    pool.addAccount("tokenAAAA1234567890");
+    pool.addAccount("tokenBBBB1234567890");
+
+    const res = await app.request("/auth/accounts/export");
+    expect(res.status).toBe(200);
+    const data = await res.json() as { accounts: Array<{ token: string; email: string | null; id: string }> };
+    expect(data.accounts).toHaveLength(2);
+
+    // Must include sensitive fields (token, refreshToken)
+    for (const acct of data.accounts) {
+      expect(acct.token).toBeTruthy();
+      expect(acct.id).toBeTruthy();
+    }
+  });
+
+  it("GET /auth/accounts/export?ids= filters server-side", async () => {
+    const id1 = pool.addAccount("tokenAAAA1234567890");
+    pool.addAccount("tokenBBBB1234567890");
+
+    const res = await app.request(`/auth/accounts/export?ids=${id1}`);
+    expect(res.status).toBe(200);
+    const data = await res.json() as { accounts: Array<{ id: string }> };
+    expect(data.accounts).toHaveLength(1);
+    expect(data.accounts[0].id).toBe(id1);
+  });
+
+  // ── Import ─────────────────────────────────────────────
+
+  it("POST /auth/accounts/import adds new accounts", async () => {
+    const res = await app.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        accounts: [
+          { token: "tokenCCCC1234567890" },
+          { token: "tokenDDDD1234567890" },
+        ],
+      }),
+    });
+
+    expect(res.status).toBe(200);
+    const data = await res.json() as { added: number; updated: number; failed: number };
+    expect(data.added).toBe(2);
+    expect(data.updated).toBe(0);
+    expect(data.failed).toBe(0);
+
+    // Verify accounts are in the pool
+    expect(pool.getAccounts()).toHaveLength(2);
+    // Verify scheduler was called for each
+    expect(mockScheduler.scheduleOne).toHaveBeenCalledTimes(2);
+  });
+
+  it("POST /auth/accounts/import detects duplicates as updates", async () => {
+    // Pre-add an account
+    pool.addAccount("tokenEEEE1234567890");
+    expect(pool.getAccounts()).toHaveLength(1);
+
+    // Import same token again + one new
+    const res = await app.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        accounts: [
+          { token: "tokenEEEE1234567890" },
+          { token: "tokenFFFF1234567890" },
+        ],
+      }),
+    });
+
+    expect(res.status).toBe(200);
+    const data = await res.json() as { added: number; updated: number; failed: number };
+    expect(data.added).toBe(1);
+    expect(data.updated).toBe(1);
+    expect(data.failed).toBe(0);
+
+    // Pool should have 2 total (not 3)
+    expect(pool.getAccounts()).toHaveLength(2);
+  });
+
+  it("POST /auth/accounts/import handles invalid tokens", async () => {
+    // Make isTokenExpired return true for specific tokens
+    mockIsTokenExpired.mockImplementation(
+      ((...args: unknown[]) => args[0] === "expiredToken12345678") as () => boolean,
+    );
+
+    const res = await app.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        accounts: [
+          { token: "validToken123456789" },
+          { token: "expiredToken12345678" },
+        ],
+      }),
+    });
+
+    expect(res.status).toBe(200);
+    const data = await res.json() as { added: number; failed: number; errors: string[] };
+    expect(data.added).toBe(1);
+    expect(data.failed).toBe(1);
+    expect(data.errors).toHaveLength(1);
+    expect(data.errors[0]).toContain("expired");
+  });
+
+  it("POST /auth/accounts/import with refreshToken", async () => {
+    const res = await app.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        accounts: [
+          { token: "tokenGGGG1234567890", refreshToken: "refresh_abc" },
+        ],
+      }),
+    });
+
+    expect(res.status).toBe(200);
+    const data = await res.json() as { added: number };
+    expect(data.added).toBe(1);
+
+    // Verify refreshToken was passed
+    const entries = pool.getAllEntries();
+    expect(entries[0].refreshToken).toBe("refresh_abc");
+  });
+
+  it("POST /auth/accounts/import rejects empty accounts array", async () => {
+    const res = await app.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ accounts: [] }),
+    });
+
+    expect(res.status).toBe(400);
+  });
+
+  it("POST /auth/accounts/import rejects invalid body", async () => {
+    const res = await app.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ foo: "bar" }),
+    });
+
+    expect(res.status).toBe(400);
+  });
+
+  // ── Round-trip ─────────────────────────────────────────
+
+  it("export → import round-trip preserves accounts", async () => {
+    pool.addAccount("tokenHHHH1234567890");
+    pool.addAccount("tokenIIII1234567890");
+
+    // Export
+    const exportRes = await app.request("/auth/accounts/export");
+    const exported = await exportRes.json() as { accounts: Array<{ token: string; refreshToken?: string | null }> };
+    expect(exported.accounts).toHaveLength(2);
+
+    // Create a fresh pool + app
+    const pool2 = new AccountPool();
+    const routes2 = createAccountRoutes(pool2, mockScheduler as never);
+    const app2 = new Hono();
+    app2.route("/", routes2);
+
+    // Import the exported data (only token + refreshToken needed)
+    const importBody = {
+      accounts: exported.accounts.map((a) => ({
+        token: a.token,
+        refreshToken: a.refreshToken,
+      })),
+    };
+
+    const importRes = await app2.request("/auth/accounts/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(importBody),
+    });
+
+    expect(importRes.status).toBe(200);
+    const result = await importRes.json() as { added: number };
+    expect(result.added).toBe(2);
+    expect(pool2.getAccounts()).toHaveLength(2);
+
+    pool2.destroy();
+  });
+});

src/routes/accounts.ts

@@ -14,6 +14,7 @@
  */
 
 import { Hono } from "hono";
+import { z } from "zod";
 import type { AccountPool } from "../auth/account-pool.js";
 import type { RefreshScheduler } from "../auth/refresh-scheduler.js";
 import { validateManualToken } from "../auth/chatgpt-oauth.js";
@@ -25,6 +26,13 @@ import type { CodexQuota, AccountInfo } from "../auth/types.js";
 import type { CookieJar } from "../proxy/cookie-jar.js";
 import type { ProxyPool } from "../proxy/proxy-pool.js";
 
+const BulkImportSchema = z.object({
+  accounts: z.array(z.object({
+    token: z.string().min(1),
+    refreshToken: z.string().nullable().optional(),
+  })).min(1),
+});
+
 function toQuota(usage: CodexUsageResponse): CodexQuota {
   const sw = usage.rate_limit.secondary_window;
   return {
@@ -79,6 +87,62 @@ export function createAccountRoutes(
     return c.redirect(authUrl);
   });
 
+  // Export accounts (with tokens) for backup/migration
+  // ?ids=id1,id2 for selective export; omit for all
+  app.get("/auth/accounts/export", (c) => {
+    let entries = pool.getAllEntries();
+    const idsParam = c.req.query("ids");
+    if (idsParam) {
+      const idSet = new Set(idsParam.split(",").filter(Boolean));
+      entries = entries.filter((e) => idSet.has(e.id));
+    }
+    return c.json({ accounts: entries });
+  });
+
+  // Bulk import accounts from tokens
+  app.post("/auth/accounts/import", async (c) => {
+    let body: unknown;
+    try {
+      body = await c.req.json();
+    } catch {
+      c.status(400);
+      return c.json({ error: "Malformed JSON request body" });
+    }
+
+    const parsed = BulkImportSchema.safeParse(body);
+    if (!parsed.success) {
+      c.status(400);
+      return c.json({ error: "Invalid request", details: parsed.error.issues });
+    }
+
+    let added = 0;
+    let updated = 0;
+    let failed = 0;
+    const errors: string[] = [];
+    const existingIds = new Set(pool.getAccounts().map((a) => a.id));
+
+    for (const entry of parsed.data.accounts) {
+      const validation = validateManualToken(entry.token);
+      if (!validation.valid) {
+        failed++;
+        errors.push(validation.error ?? "Invalid token");
+        continue;
+      }
+
+      const entryId = pool.addAccount(entry.token, entry.refreshToken ?? null);
+      scheduler.scheduleOne(entryId, entry.token);
+
+      if (existingIds.has(entryId)) {
+        updated++;
+      } else {
+        added++;
+        existingIds.add(entryId);
+      }
+    }
+
+    return c.json({ success: true, added, updated, failed, errors });
+  });
+
   // List all accounts (with optional ?quota=true)
   app.get("/auth/accounts", async (c) => {
     const accounts = pool.getAccounts();

web/src/App.tsx

@@ -117,6 +117,8 @@ function Dashboard() {
             lastUpdated={accounts.lastUpdated}
             proxies={proxies.proxies}
             onProxyChange={handleProxyChange}
+            onExport={accounts.exportAccounts}
+            onImport={accounts.importAccounts}
           />
           <ProxyPool proxies={proxies} />
           <ApiConfig

web/src/components/AccountCard.tsx

@@ -41,9 +41,11 @@ interface AccountCardProps {
   onDelete: (id: string) => Promise<string | null>;
   proxies?: ProxyEntry[];
   onProxyChange?: (accountId: string, proxyId: string) => void;
+  selected?: boolean;
+  onToggleSelect?: (id: string) => void;
 }
 
-export function AccountCard({ account, index, onDelete, proxies, onProxyChange }: AccountCardProps) {
+export function AccountCard({ account, index, onDelete, proxies, onProxyChange, selected, onToggleSelect }: AccountCardProps) {
   const t = useT();
   const { lang } = useI18n();
   const email = account.email || "Unknown";
@@ -99,11 +101,23 @@ export function AccountCard({ account, index, onDelete, proxies, onProxyChange }
   const sWindowSec = srl?.limit_window_seconds;
   const sWindowDur = sWindowSec ? formatWindowDuration(sWindowSec, lang === "zh") : null;
 
+  const handleToggle = useCallback(() => {
+    onToggleSelect?.(account.id);
+  }, [account.id, onToggleSelect]);
+
   return (
-    <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-4 shadow-sm hover:shadow-md transition-all hover:border-primary/30 dark:hover:border-primary/50">
+    <div class={`bg-white dark:bg-card-dark border rounded-xl p-4 shadow-sm hover:shadow-md transition-all ${selected ? "border-primary ring-1 ring-primary/30" : "border-gray-200 dark:border-border-dark hover:border-primary/30 dark:hover:border-primary/50"}`}>
       {/* Header */}
       <div class="flex justify-between items-start mb-4">
         <div class="flex items-center gap-3">
+          {onToggleSelect && (
+            <input
+              type="checkbox"
+              checked={selected}
+              onChange={handleToggle}
+              class="size-4 rounded border-gray-300 dark:border-border-dark text-primary focus:ring-primary/50 cursor-pointer shrink-0"
+            />
+          )}
           <div class={`size-10 rounded-full ${bgColor} ${textColor} flex items-center justify-center font-bold text-lg`}>
             {initial}
           </div>

web/src/components/AccountImportExport.tsx

@@ -0,0 +1,109 @@
+import { useState, useCallback, useRef } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+
+interface ImportResult {
+  success: boolean;
+  added: number;
+  updated: number;
+  failed: number;
+  errors: string[];
+}
+
+interface AccountImportExportProps {
+  onExport: (selectedIds?: string[]) => Promise<void>;
+  onImport: (file: File) => Promise<ImportResult>;
+  selectedIds: Set<string>;
+}
+
+export function AccountImportExport({ onExport, onImport, selectedIds }: AccountImportExportProps) {
+  const t = useT();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [importing, setImporting] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+
+  const handleExport = useCallback(async () => {
+    try {
+      const ids = selectedIds.size > 0 ? [...selectedIds] : undefined;
+      await onExport(ids);
+    } catch (err) {
+      console.error("[AccountExport] failed:", err);
+    }
+  }, [onExport, selectedIds]);
+
+  const handleFileChange = useCallback(async () => {
+    const files = fileRef.current?.files;
+    if (!files || files.length === 0) return;
+
+    setImporting(true);
+    setResult(null);
+    try {
+      let totalAdded = 0, totalUpdated = 0, totalFailed = 0;
+      for (const file of files) {
+        const res = await onImport(file);
+        totalAdded += res.added;
+        totalUpdated += res.updated;
+        totalFailed += res.failed;
+      }
+      const msg = t("accountImportResult")
+        .replace("{added}", String(totalAdded))
+        .replace("{updated}", String(totalUpdated))
+        .replace("{failed}", String(totalFailed));
+      setResult(msg);
+    } catch {
+      setResult(t("accountImportError"));
+    } finally {
+      setImporting(false);
+      if (fileRef.current) fileRef.current.value = "";
+    }
+  }, [onImport, t]);
+
+  const triggerFileSelect = useCallback(() => {
+    fileRef.current?.click();
+  }, []);
+
+  const exportTitle = selectedIds.size > 0
+    ? `${t("exportBtn")} (${selectedIds.size})`
+    : t("exportBtn");
+
+  return (
+    <>
+      <input
+        ref={fileRef}
+        type="file"
+        accept=".json"
+        multiple
+        onChange={handleFileChange}
+        class="hidden"
+      />
+      <button
+        onClick={triggerFileSelect}
+        disabled={importing}
+        title={t("importBtn")}
+        class="p-1.5 text-slate-400 dark:text-text-dim hover:text-primary transition-colors rounded-md hover:bg-primary/10 disabled:opacity-40"
+      >
+        <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+        </svg>
+      </button>
+      <button
+        onClick={handleExport}
+        title={exportTitle}
+        class="p-1.5 text-slate-400 dark:text-text-dim hover:text-primary transition-colors rounded-md hover:bg-primary/10"
+      >
+        <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12M12 16.5V3" />
+        </svg>
+      </button>
+      {selectedIds.size > 0 && (
+        <span class="text-[0.7rem] text-primary font-medium hidden sm:inline">
+          {selectedIds.size}
+        </span>
+      )}
+      {result && (
+        <span class="text-[0.75rem] text-slate-500 dark:text-text-dim hidden sm:inline">
+          {result}
+        </span>
+      )}
+    </>
+  );
+}

web/src/components/AccountList.tsx

@@ -1,5 +1,7 @@
+import { useState, useCallback } from "preact/hooks";
 import { useI18n, useT } from "../../../shared/i18n/context";
 import { AccountCard } from "./AccountCard";
+import { AccountImportExport } from "./AccountImportExport";
 import type { Account, ProxyEntry } from "../../../shared/types";
 
 interface AccountListProps {
@@ -11,11 +13,30 @@ interface AccountListProps {
   lastUpdated: Date | null;
   proxies?: ProxyEntry[];
   onProxyChange?: (accountId: string, proxyId: string) => void;
+  onExport?: (selectedIds?: string[]) => Promise<void>;
+  onImport?: (file: File) => Promise<{ success: boolean; added: number; updated: number; failed: number; errors: string[] }>;
 }
 
-export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing, lastUpdated, proxies, onProxyChange }: AccountListProps) {
+export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing, lastUpdated, proxies, onProxyChange, onExport, onImport }: AccountListProps) {
   const t = useT();
   const { lang } = useI18n();
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const toggleSelectAll = useCallback(() => {
+    setSelectedIds((prev) => {
+      if (prev.size === accounts.length) return new Set();
+      return new Set(accounts.map((a) => a.id));
+    });
+  }, [accounts]);
 
   const updatedAtText = lastUpdated
     ? lastUpdated.toLocaleTimeString(lang === "zh" ? "zh-CN" : "en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" })
@@ -34,6 +55,24 @@ export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing
               {t("updatedAt")} {updatedAtText}
             </span>
           )}
+          {onExport && onImport && (
+            <AccountImportExport onExport={onExport} onImport={onImport} selectedIds={selectedIds} />
+          )}
+          {accounts.length > 0 && (
+            <button
+              onClick={toggleSelectAll}
+              title={selectedIds.size === accounts.length ? t("deselectAll") : t("selectAll")}
+              class="p-1.5 text-slate-400 dark:text-text-dim hover:text-primary transition-colors rounded-md hover:bg-primary/10"
+            >
+              <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                {selectedIds.size === accounts.length ? (
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                ) : (
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                )}
+              </svg>
+            </button>
+          )}
           <button
             onClick={onRefresh}
             disabled={refreshing}
@@ -63,7 +102,7 @@ export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing
           </div>
         ) : (
           accounts.map((acct, i) => (
-            <AccountCard key={acct.id} account={acct} index={i} onDelete={onDelete} proxies={proxies} onProxyChange={onProxyChange} />
+            <AccountCard key={acct.id} account={acct} index={i} onDelete={onDelete} proxies={proxies} onProxyChange={onProxyChange} selected={selectedIds.has(acct.id)} onToggleSelect={toggleSelect} />
           ))
         )}
       </div>