Merge branch 'basketikun:main' into main

services/api.py

@@ -13,6 +13,8 @@ from pydantic import BaseModel, ConfigDict, Field
 from services.account_service import account_service
 from services.chatgpt_service import ChatGPTService
 from services.config import config
+from services.cpa_service import cpa_config, cpa_import_service, list_remote_files
+
 from services.image_service import ImageGenerationError
 from services.version import get_app_version
 
@@ -68,6 +70,22 @@ class ResponseCreateRequest(BaseModel):
     stream: bool | None = None
 
 
+class CPAPoolCreateRequest(BaseModel):
+    name: str = ""
+    base_url: str = ""
+    secret_key: str = ""
+
+
+class CPAPoolUpdateRequest(BaseModel):
+    name: str | None = None
+    base_url: str | None = None
+    secret_key: str | None = None
+
+
+class CPAImportRequest(BaseModel):
+    names: list[str] = Field(default_factory=list)
+
+
 def build_model_item(model_id: str) -> dict[str, object]:
     return {
         "id": model_id,
@@ -77,6 +95,20 @@ def build_model_item(model_id: str) -> dict[str, object]:
     }
 
 
+def sanitize_cpa_pool(pool: dict | None) -> dict | None:
+    if not isinstance(pool, dict):
+        return None
+    return {
+        key: value
+        for key, value in pool.items()
+        if key != "secret_key"
+    }
+
+
+def sanitize_cpa_pools(pools: list[dict]) -> list[dict]:
+    return [sanitized for pool in pools if (sanitized := sanitize_cpa_pool(pool)) is not None]
+
+
 def extract_bearer_token(authorization: str | None) -> str:
     scheme, _, value = str(authorization or "").partition(" ")
     if scheme.lower() != "bearer" or not value.strip():
@@ -117,7 +149,11 @@ def resolve_web_asset(requested_path: str) -> Path | None:
         candidates = [WEB_DIST_DIR / "index.html"]
     else:
         relative_path = Path(clean_path)
-        candidates = [WEB_DIST_DIR / relative_path, WEB_DIST_DIR / relative_path / "index.html", WEB_DIST_DIR / f"{clean_path}.html"]
+        candidates = [
+            WEB_DIST_DIR / relative_path,
+            WEB_DIST_DIR / relative_path / "index.html",
+            WEB_DIST_DIR / f"{clean_path}.html",
+        ]
 
     for candidate in candidates:
         try:
@@ -156,7 +192,13 @@ def create_app() -> FastAPI:
 
     @router.get("/v1/models")
     async def list_models():
-        return {"object": "list", "data": [build_model_item("gpt-image-1"), build_model_item("gpt-image-2")]}
+        return {
+            "object": "list",
+            "data": [
+                build_model_item("gpt-image-1"),
+                build_model_item("gpt-image-2"),
+            ],
+        }
 
     @router.post("/auth/login")
     async def login(authorization: str | None = Header(default=None)):
@@ -180,7 +222,12 @@ def create_app() -> FastAPI:
             raise HTTPException(status_code=400, detail={"error": "tokens is required"})
         result = account_service.add_accounts(tokens)
         refresh_result = account_service.refresh_accounts(tokens)
-        return {**result, "refreshed": refresh_result.get("refreshed", 0), "errors": refresh_result.get("errors", []), "items": refresh_result.get("items", result.get("items", []))}
+        return {
+            **result,
+            "refreshed": refresh_result.get("refreshed", 0),
+            "errors": refresh_result.get("errors", []),
+            "items": refresh_result.get("items", result.get("items", [])),
+        }
 
     @router.delete("/api/accounts")
     async def delete_accounts(body: AccountDeleteRequest, authorization: str | None = Header(default=None)):
@@ -207,7 +254,15 @@ def create_app() -> FastAPI:
         if not access_token:
             raise HTTPException(status_code=400, detail={"error": "access_token is required"})
 
-        updates = {key: value for key, value in {"type": body.type, "status": body.status, "quota": body.quota}.items() if value is not None}
+        updates = {
+            key: value
+            for key, value in {
+                "type": body.type,
+                "status": body.status,
+                "quota": body.quota,
+            }.items()
+            if value is not None
+        }
         if not updates:
             raise HTTPException(status_code=400, detail={"error": "no updates provided"})
 
@@ -234,6 +289,88 @@ def create_app() -> FastAPI:
         require_auth_key(authorization)
         return await run_in_threadpool(chatgpt_service.create_response, body.model_dump(mode="python"))
 
+    # ── CPA multi-pool endpoints ────────────────────────────────────
+
+    @router.get("/api/cpa/pools")
+    async def list_cpa_pools(authorization: str | None = Header(default=None)):
+        require_auth_key(authorization)
+        return {"pools": sanitize_cpa_pools(cpa_config.list_pools())}
+
+    @router.post("/api/cpa/pools")
+    async def create_cpa_pool(
+            body: CPAPoolCreateRequest,
+            authorization: str | None = Header(default=None),
+    ):
+        require_auth_key(authorization)
+        if not body.base_url.strip():
+            raise HTTPException(status_code=400, detail={"error": "base_url is required"})
+        if not body.secret_key.strip():
+            raise HTTPException(status_code=400, detail={"error": "secret_key is required"})
+        pool = cpa_config.add_pool(
+            name=body.name,
+            base_url=body.base_url,
+            secret_key=body.secret_key,
+        )
+        return {"pool": sanitize_cpa_pool(pool), "pools": sanitize_cpa_pools(cpa_config.list_pools())}
+
+    @router.post("/api/cpa/pools/{pool_id}")
+    async def update_cpa_pool(
+            pool_id: str,
+            body: CPAPoolUpdateRequest,
+            authorization: str | None = Header(default=None),
+    ):
+        require_auth_key(authorization)
+        pool = cpa_config.update_pool(pool_id, body.model_dump(exclude_none=True))
+        if pool is None:
+            raise HTTPException(status_code=404, detail={"error": "pool not found"})
+        return {"pool": sanitize_cpa_pool(pool), "pools": sanitize_cpa_pools(cpa_config.list_pools())}
+
+    @router.delete("/api/cpa/pools/{pool_id}")
+    async def delete_cpa_pool(
+            pool_id: str,
+            authorization: str | None = Header(default=None),
+    ):
+        require_auth_key(authorization)
+        if not cpa_config.delete_pool(pool_id):
+            raise HTTPException(status_code=404, detail={"error": "pool not found"})
+        return {"pools": sanitize_cpa_pools(cpa_config.list_pools())}
+
+    @router.get("/api/cpa/pools/{pool_id}/files")
+    async def cpa_pool_files(
+            pool_id: str,
+            authorization: str | None = Header(default=None),
+    ):
+        require_auth_key(authorization)
+        pool = cpa_config.get_pool(pool_id)
+        if pool is None:
+            raise HTTPException(status_code=404, detail={"error": "pool not found"})
+        files = await run_in_threadpool(list_remote_files, pool)
+        return {"pool_id": pool_id, "files": files}
+
+    @router.post("/api/cpa/pools/{pool_id}/import")
+    async def cpa_pool_import(
+            pool_id: str,
+            body: CPAImportRequest,
+            authorization: str | None = Header(default=None),
+    ):
+        require_auth_key(authorization)
+        pool = cpa_config.get_pool(pool_id)
+        if pool is None:
+            raise HTTPException(status_code=404, detail={"error": "pool not found"})
+        try:
+            job = cpa_import_service.start_import(pool, body.names)
+        except ValueError as exc:
+            raise HTTPException(status_code=400, detail={"error": str(exc)}) from exc
+        return {"import_job": job}
+
+    @router.get("/api/cpa/pools/{pool_id}/import")
+    async def cpa_pool_import_progress(pool_id: str, authorization: str | None = Header(default=None)):
+        require_auth_key(authorization)
+        pool = cpa_config.get_pool(pool_id)
+        if pool is None:
+            raise HTTPException(status_code=404, detail={"error": "pool not found"})
+        return {"import_job": pool.get("import_job")}
+
     app.include_router(router)
 
     @app.get("/{full_path:path}", include_in_schema=False)
@@ -242,6 +379,10 @@ def create_app() -> FastAPI:
         if asset is not None:
             return FileResponse(asset)
 
+        # Static assets (_next/*) must not fallback to HTML — return 404
+        if full_path.strip("/").startswith("_next/"):
+            raise HTTPException(status_code=404, detail="Not Found")
+
         fallback = resolve_web_asset("")
         if fallback is None:
             raise HTTPException(status_code=404, detail="Not Found")

services/cpa_service.py

@@ -0,0 +1,314 @@
+"""CLIProxyAPI integration for browsing remote auth files and importing selected tokens."""
+
+from __future__ import annotations
+
+import json
+import threading
+import uuid
+from concurrent.futures import ThreadPoolExecutor, as_completed
+from datetime import datetime, timezone
+from pathlib import Path
+from threading import Lock
+
+from curl_cffi.requests import Session
+
+from services.account_service import account_service
+from services.config import DATA_DIR
+
+
+CPA_CONFIG_FILE = DATA_DIR / "cpa_config.json"
+
+
+def _new_id() -> str:
+    return uuid.uuid4().hex[:12]
+
+
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+def _normalize_import_job(raw: object, *, fail_unfinished: bool) -> dict | None:
+    if not isinstance(raw, dict):
+        return None
+    status = str(raw.get("status") or "failed").strip() or "failed"
+    if fail_unfinished and status in {"pending", "running"}:
+        status = "failed"
+    return {
+        "job_id": str(raw.get("job_id") or uuid.uuid4().hex).strip(),
+        "status": status,
+        "created_at": str(raw.get("created_at") or _now_iso()).strip() or _now_iso(),
+        "updated_at": str(raw.get("updated_at") or raw.get("created_at") or _now_iso()).strip() or _now_iso(),
+        "total": int(raw.get("total") or 0),
+        "completed": int(raw.get("completed") or 0),
+        "added": int(raw.get("added") or 0),
+        "skipped": int(raw.get("skipped") or 0),
+        "refreshed": int(raw.get("refreshed") or 0),
+        "failed": int(raw.get("failed") or 0),
+        "errors": raw.get("errors") if isinstance(raw.get("errors"), list) else [],
+    }
+
+
+def _normalize_pool(raw: dict) -> dict:
+    return {
+        "id": str(raw.get("id") or _new_id()).strip(),
+        "name": str(raw.get("name") or "").strip(),
+        "base_url": str(raw.get("base_url") or "").strip(),
+        "secret_key": str(raw.get("secret_key") or "").strip(),
+        "import_job": _normalize_import_job(raw.get("import_job"), fail_unfinished=True),
+    }
+
+
+def _management_headers(secret_key: str) -> dict[str, str]:
+    return {
+        "Authorization": f"Bearer {secret_key}",
+        "Accept": "application/json",
+    }
+
+
+class CPAConfig:
+    def __init__(self, store_file: Path):
+        self._store_file = store_file
+        self._lock = Lock()
+        self._pools: list[dict] = self._load()
+
+    def _load(self) -> list[dict]:
+        if not self._store_file.exists():
+            return []
+        try:
+            raw = json.loads(self._store_file.read_text(encoding="utf-8"))
+            if isinstance(raw, dict) and "base_url" in raw:
+                pool = _normalize_pool(raw)
+                return [pool] if pool["base_url"] else []
+            if isinstance(raw, list):
+                return [_normalize_pool(item) for item in raw if isinstance(item, dict)]
+        except Exception:
+            pass
+        return []
+
+    def _save(self) -> None:
+        self._store_file.parent.mkdir(parents=True, exist_ok=True)
+        self._store_file.write_text(json.dumps(self._pools, ensure_ascii=False, indent=2) + "\n", encoding="utf-8")
+
+    def list_pools(self) -> list[dict]:
+        with self._lock:
+            return [dict(pool) for pool in self._pools]
+
+    def get_pool(self, pool_id: str) -> dict | None:
+        with self._lock:
+            for pool in self._pools:
+                if pool["id"] == pool_id:
+                    return dict(pool)
+        return None
+
+    def add_pool(self, name: str, base_url: str, secret_key: str) -> dict:
+        pool = _normalize_pool({"id": _new_id(), "name": name, "base_url": base_url, "secret_key": secret_key})
+        with self._lock:
+            self._pools.append(pool)
+            self._save()
+        return dict(pool)
+
+    def update_pool(self, pool_id: str, updates: dict) -> dict | None:
+        with self._lock:
+            for index, pool in enumerate(self._pools):
+                if pool["id"] != pool_id:
+                    continue
+                merged = {**pool, **{key: value for key, value in updates.items() if value is not None}, "id": pool_id}
+                self._pools[index] = _normalize_pool(merged)
+                self._save()
+                return dict(self._pools[index])
+        return None
+
+    def delete_pool(self, pool_id: str) -> bool:
+        with self._lock:
+            before = len(self._pools)
+            self._pools = [pool for pool in self._pools if pool["id"] != pool_id]
+            if len(self._pools) < before:
+                self._save()
+                return True
+        return False
+
+    def set_import_job(self, pool_id: str, import_job: dict | None) -> dict | None:
+        with self._lock:
+            for index, pool in enumerate(self._pools):
+                if pool["id"] != pool_id:
+                    continue
+                next_pool = dict(pool)
+                next_pool["import_job"] = _normalize_import_job(import_job, fail_unfinished=False)
+                self._pools[index] = next_pool
+                self._save()
+                return dict(next_pool)
+        return None
+
+    def get_import_job(self, pool_id: str) -> dict | None:
+        with self._lock:
+            for pool in self._pools:
+                if pool["id"] == pool_id:
+                    job = pool.get("import_job")
+                    return dict(job) if isinstance(job, dict) else None
+        return None
+
+
+def list_remote_files(pool: dict) -> list[dict]:
+    base_url = str(pool.get("base_url") or "").strip()
+    secret_key = str(pool.get("secret_key") or "").strip()
+    if not base_url or not secret_key:
+        return []
+
+    url = f"{base_url.rstrip('/')}/v0/management/auth-files"
+    session = Session(verify=True)
+    try:
+        response = session.get(url, headers=_management_headers(secret_key), timeout=30)
+        if not response.ok:
+            raise RuntimeError(f"remote list failed: HTTP {response.status_code}")
+        payload = response.json()
+    finally:
+        session.close()
+
+    files = payload.get("files") if isinstance(payload, dict) else None
+    if not isinstance(files, list):
+        raise RuntimeError("remote list payload is invalid")
+
+    items: list[dict] = []
+    for item in files:
+        if not isinstance(item, dict):
+            continue
+        name = str(item.get("name") or "").strip()
+        email = str(item.get("email") or item.get("account") or "").strip()
+        if not name:
+            continue
+        items.append({"name": name, "email": email})
+    return items
+
+
+def fetch_remote_access_token(pool: dict, file_name: str) -> tuple[str | None, str | None]:
+    base_url = str(pool.get("base_url") or "").strip()
+    secret_key = str(pool.get("secret_key") or "").strip()
+    file_name = str(file_name or "").strip()
+    if not base_url or not secret_key or not file_name:
+        return None, "invalid request"
+
+    url = f"{base_url.rstrip('/')}/v0/management/auth-files/download"
+    session = Session(verify=True)
+    try:
+        response = session.get(url, headers=_management_headers(secret_key), params={"name": file_name}, timeout=30)
+        if not response.ok:
+            return None, f"HTTP {response.status_code}"
+        payload = response.json()
+    except Exception as exc:
+        return None, str(exc)
+    finally:
+        session.close()
+
+    if not isinstance(payload, dict):
+        return None, "invalid payload"
+
+    access_token = str(payload.get("access_token") or "").strip()
+    if not access_token:
+        return None, "missing access_token"
+    return access_token, None
+
+
+class CPAImportService:
+    def __init__(self, cpa_config: CPAConfig):
+        self._config = cpa_config
+
+    def start_import(self, pool: dict, selected_files: list[str]) -> dict:
+        names = [str(name or "").strip() for name in selected_files if str(name or "").strip()]
+        if not names:
+            raise ValueError("selected files is required")
+
+        pool_id = str(pool.get("id") or "").strip()
+        job = {
+            "job_id": uuid.uuid4().hex,
+            "status": "pending",
+            "created_at": _now_iso(),
+            "updated_at": _now_iso(),
+            "total": len(names),
+            "completed": 0,
+            "added": 0,
+            "skipped": 0,
+            "refreshed": 0,
+            "failed": 0,
+            "errors": [],
+        }
+        saved_pool = self._config.set_import_job(pool_id, job)
+        if saved_pool is None:
+            raise ValueError("pool not found")
+
+        thread = threading.Thread(
+            target=self._run_import,
+            args=(pool_id, pool, names),
+            name=f"cpa-import-{pool_id}",
+            daemon=True,
+        )
+        thread.start()
+        return dict(saved_pool.get("import_job") or job)
+
+    def _update_job(self, pool_id: str, **updates) -> dict | None:
+        current = self._config.get_import_job(pool_id)
+        if current is None:
+            return None
+        next_job = {**current, **updates, "updated_at": _now_iso()}
+        pool = self._config.set_import_job(pool_id, next_job)
+        if pool is None:
+            return None
+        job = pool.get("import_job")
+        return dict(job) if isinstance(job, dict) else None
+
+    def _append_error(self, pool_id: str, file_name: str, message: str) -> None:
+        current = self._config.get_import_job(pool_id)
+        if current is None:
+            return
+        errors = list(current.get("errors") or [])
+        errors.append({"name": file_name, "error": message})
+        self._update_job(pool_id, errors=errors, failed=len(errors))
+
+    def _run_import(self, pool_id: str, pool: dict, names: list[str]) -> None:
+        self._update_job(pool_id, status="running")
+
+        tokens: list[str] = []
+        max_workers = min(16, max(1, len(names)))
+        with ThreadPoolExecutor(max_workers=max_workers) as executor:
+            future_map = {executor.submit(fetch_remote_access_token, pool, name): name for name in names}
+            for future in as_completed(future_map):
+                file_name = future_map[future]
+                try:
+                    token, error = future.result()
+                except Exception as exc:
+                    token, error = None, str(exc)
+
+                if token:
+                    tokens.append(token)
+                else:
+                    self._append_error(pool_id, file_name, error or "unknown error")
+
+                current = self._config.get_import_job(pool_id) or {}
+                failed = len(current.get("errors") or [])
+                self._update_job(pool_id, completed=int(current.get("completed") or 0) + 1, failed=failed)
+
+        if not tokens:
+            current = self._config.get_import_job(pool_id) or {}
+            self._update_job(
+                pool_id,
+                status="failed",
+                completed=int(current.get("total") or 0),
+                failed=len(current.get("errors") or []),
+            )
+            return
+
+        add_result = account_service.add_accounts(tokens)
+        refresh_result = account_service.refresh_accounts(tokens)
+        current = self._config.get_import_job(pool_id) or {}
+        self._update_job(
+            pool_id,
+            status="completed",
+            completed=len(names),
+            added=int(add_result.get("added") or 0),
+            skipped=int(add_result.get("skipped") or 0),
+            refreshed=int(refresh_result.get("refreshed") or 0),
+            failed=len(current.get("errors") or []),
+        )
+
+
+cpa_config = CPAConfig(CPA_CONFIG_FILE)
+cpa_import_service = CPAImportService(cpa_config)

web/next.config.ts

@@ -17,10 +17,12 @@ function readAppVersion() {
 const appVersion = process.env.NEXT_PUBLIC_APP_VERSION || readAppVersion()
 
 const nextConfig: NextConfig = {
+    allowedDevOrigins: ['127.0.0.1'],
     env: {
         NEXT_PUBLIC_APP_VERSION: appVersion,
     },
     output: 'export',
+    trailingSlash: true,
     images: {
         unoptimized: true,
     },

web/src/app/image/page.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ArrowUp, LoaderCircle, MessageSquarePlus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
+import { ImageLightbox } from "@/components/image-lightbox";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -96,8 +97,10 @@ export default function ImagePage() {
   const [conversations, setConversations] = useState<ImageConversation[]>([]);
   const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
-  const [isGenerating, setIsGenerating] = useState(false);
+  const [generatingIds, setGeneratingIds] = useState<Set<string>>(new Set());
   const [availableQuota, setAvailableQuota] = useState("加载中");
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   const resultsViewportRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -106,6 +109,38 @@ export default function ImagePage() {
     () => conversations.find((item) => item.id === selectedConversationId) ?? null,
     [conversations, selectedConversationId],
   );
+  const isSelectedGenerating = selectedConversationId !== null && generatingIds.has(selectedConversationId);
+  const hasAnyGenerating = generatingIds.size > 0;
+
+  const addGeneratingId = useCallback((id: string) => {
+    setGeneratingIds((prev) => new Set(prev).add(id));
+  }, []);
+  const removeGeneratingId = useCallback((id: string) => {
+    setGeneratingIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const lightboxImages = useMemo(
+    () =>
+      (selectedConversation?.images ?? [])
+        .filter((img): img is StoredImage & { b64_json: string } => img.status === "success" && !!img.b64_json)
+        .map((img) => ({ id: img.id, src: `data:image/png;base64,${img.b64_json}` })),
+    [selectedConversation],
+  );
+
+  const openLightbox = useCallback(
+    (imageId: string) => {
+      const idx = lightboxImages.findIndex((img) => img.id === imageId);
+      if (idx >= 0) {
+        setLightboxIndex(idx);
+        setLightboxOpen(true);
+      }
+    },
+    [lightboxImages],
+  );
 
   useEffect(() => {
     let cancelled = false;
@@ -165,7 +200,7 @@ export default function ImagePage() {
   }, [loadQuota]);
 
   useEffect(() => {
-    if (!selectedConversation && !isGenerating) {
+    if (!selectedConversation && !isSelectedGenerating) {
       return;
     }
 
@@ -173,7 +208,7 @@ export default function ImagePage() {
       top: resultsViewportRef.current.scrollHeight,
       behavior: "smooth",
     });
-  }, [selectedConversation, isGenerating]);
+  }, [selectedConversation, isSelectedGenerating]);
 
   const persistConversation = async (conversation: ImageConversation) => {
     setConversations((prev) => {
@@ -260,7 +295,7 @@ export default function ImagePage() {
       status: "generating",
     };
 
-    setIsGenerating(true);
+    addGeneratingId(conversationId);
     setSelectedConversationId(conversationId);
     setImagePrompt("");
 
@@ -339,7 +374,7 @@ export default function ImagePage() {
       });
       toast.error(message);
     } finally {
-      setIsGenerating(false);
+      removeGeneratingId(conversationId);
     }
   };
 
@@ -379,6 +414,7 @@ export default function ImagePage() {
               ) : (
                 conversations.map((conversation) => {
                   const active = conversation.id === selectedConversationId;
+                  const generating = generatingIds.has(conversation.id);
                   return (
                     <div
                       key={conversation.id}
@@ -394,7 +430,10 @@ export default function ImagePage() {
                         onClick={() => setSelectedConversationId(conversation.id)}
                         className="block w-full pr-8 text-left"
                       >
-                        <div className="truncate text-sm font-semibold">{conversation.title}</div>
+                        <div className="flex items-center gap-1.5 truncate text-sm font-semibold">
+                          {generating && <LoaderCircle className="size-3.5 shrink-0 animate-spin text-stone-400" />}
+                          <span className="truncate">{conversation.title}</span>
+                        </div>
                         <div className={cn("mt-1 text-xs", active ? "text-stone-500" : "text-stone-400")}>
                           {formatConversationTime(conversation.createdAt)}
                         </div>
@@ -471,14 +510,20 @@ export default function ImagePage() {
                         {selectedConversation.images.map((image, index) => (
                           <div key={image.id} className="break-inside-avoid overflow-hidden rounded-[22px]">
                             {image.status === "success" && image.b64_json ? (
-                              <Image
-                                src={`data:image/png;base64,${image.b64_json}`}
-                                alt={`Generated result ${index + 1}`}
-                                width={1024}
-                                height={1024}
-                                unoptimized
-                                className="block h-auto w-full"
-                              />
+                              <button
+                                type="button"
+                                onClick={() => openLightbox(image.id)}
+                                className="group block w-full cursor-zoom-in"
+                              >
+                                <Image
+                                  src={`data:image/png;base64,${image.b64_json}`}
+                                  alt={`Generated result ${index + 1}`}
+                                  width={1024}
+                                  height={1024}
+                                  unoptimized
+                                  className="block h-auto w-full transition duration-200 group-hover:brightness-90"
+                                />
+                              </button>
                             ) : image.status === "error" ? (
                               <div className="flex min-h-[320px] items-center justify-center bg-rose-50 px-6 py-8 text-center text-sm leading-6 text-rose-600">
                                 {image.error || "生成失败"}
@@ -526,9 +571,7 @@ export default function ImagePage() {
                   onKeyDown={(event) => {
                     if (event.key === "Enter" && !event.shiftKey) {
                       event.preventDefault();
-                      if (!isGenerating) {
-                        void handleGenerateImage();
-                      }
+                      void handleGenerateImage();
                     }
                   }}
                   className="min-h-[148px] resize-none rounded-[32px] border-0 bg-transparent px-6 pt-6 pb-20 text-[15px] leading-7 text-stone-900 shadow-none placeholder:text-stone-400 focus-visible:ring-0"
@@ -539,6 +582,12 @@ export default function ImagePage() {
                     <div className="rounded-full bg-stone-100 px-3 py-2 text-xs font-medium text-stone-600">
                       剩余额度 {availableQuota}
                     </div>
+                    {hasAnyGenerating && (
+                      <div className="flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
+                        <LoaderCircle className="size-3 animate-spin" />
+                        {generatingIds.size} 个任务进行中
+                      </div>
+                    )}
                     <Select value={imageModel} onValueChange={(value) => setImageModel(value as ImageModel)}>
                       <SelectTrigger className="h-10 w-[164px] rounded-full border-stone-200 bg-white text-sm font-medium text-stone-700 shadow-none focus-visible:ring-0">
                         <SelectValue />
@@ -569,11 +618,11 @@ export default function ImagePage() {
                   <button
                     type="button"
                     onClick={() => void handleGenerateImage()}
-                    disabled={isGenerating}
+                    disabled={!imagePrompt.trim()}
                     className="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-stone-950 text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:bg-stone-300"
                     aria-label="生成图片"
                   >
-                    {isGenerating ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                    <ArrowUp className="size-4" />
                   </button>
                 </div>
               </div>
@@ -581,6 +630,14 @@ export default function ImagePage() {
           </div>
         </div>
       </section>
+
+      <ImageLightbox
+        images={lightboxImages}
+        currentIndex={lightboxIndex}
+        open={lightboxOpen}
+        onOpenChange={setLightboxOpen}
+        onIndexChange={setLightboxIndex}
+      />
     </>
   );
 }

web/src/app/settings/page.tsx

@@ -0,0 +1,647 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Eye,
+  EyeOff,
+  Import,
+  Link2,
+  LoaderCircle,
+  Pencil,
+  Plus,
+  Save,
+  Search,
+  ServerCog,
+  Trash2,
+  Unplug,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  createCPAPool,
+  deleteCPAPool,
+  fetchCPAPoolFiles,
+  fetchCPAPools,
+  startCPAImport,
+  updateCPAPool,
+  type CPAPool,
+  type CPARemoteFile,
+} from "@/lib/api";
+
+const PAGE_SIZE_OPTIONS = ["50", "100", "200"] as const;
+
+function normalizeFiles(items: CPARemoteFile[]) {
+  const seen = new Set<string>();
+  const files: CPARemoteFile[] = [];
+  for (const item of items) {
+    const name = String(item.name || "").trim();
+    if (!name || seen.has(name)) {
+      continue;
+    }
+    seen.add(name);
+    files.push({
+      name,
+      email: String(item.email || "").trim(),
+    });
+  }
+  return files;
+}
+
+export default function SettingsPage() {
+  const didLoadRef = useRef(false);
+  const pollTimerRef = useRef<number | null>(null);
+
+  const [pools, setPools] = useState<CPAPool[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingPool, setEditingPool] = useState<CPAPool | null>(null);
+  const [formName, setFormName] = useState("");
+  const [formBaseUrl, setFormBaseUrl] = useState("");
+  const [formSecretKey, setFormSecretKey] = useState("");
+  const [showSecret, setShowSecret] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [loadingFilesId, setLoadingFilesId] = useState<string | null>(null);
+
+  const [browserOpen, setBrowserOpen] = useState(false);
+  const [browserPool, setBrowserPool] = useState<CPAPool | null>(null);
+  const [remoteFiles, setRemoteFiles] = useState<CPARemoteFile[]>([]);
+  const [selectedNames, setSelectedNames] = useState<string[]>([]);
+  const [fileQuery, setFileQuery] = useState("");
+  const [filePage, setFilePage] = useState(1);
+  const [pageSize, setPageSize] = useState<(typeof PAGE_SIZE_OPTIONS)[number]>("100");
+  const [isStartingImport, setIsStartingImport] = useState(false);
+
+  const loadPools = async () => {
+    setIsLoading(true);
+    try {
+      const poolData = await fetchCPAPools();
+      setPools(poolData.pools);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "加载 CPA 连接失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (didLoadRef.current) {
+      return;
+    }
+    didLoadRef.current = true;
+    void loadPools();
+  }, []);
+
+  useEffect(() => {
+    const runningPoolIds = pools
+      .filter((pool) => pool.import_job?.status === "pending" || pool.import_job?.status === "running")
+      .map((pool) => pool.id);
+    const hasRunningJobs = runningPoolIds.length > 0;
+    if (!hasRunningJobs) {
+      if (pollTimerRef.current !== null) {
+        window.clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+      return;
+    }
+
+    pollTimerRef.current = window.setInterval(() => {
+      void fetchCPAPools()
+        .then((poolData) => {
+          setPools(poolData.pools);
+        })
+        .catch((error) => {
+          if (pollTimerRef.current !== null) {
+            window.clearInterval(pollTimerRef.current);
+            pollTimerRef.current = null;
+          }
+          toast.error(error instanceof Error ? error.message : "查询导入进度失败");
+        });
+    }, 1500);
+
+    return () => {
+      if (pollTimerRef.current !== null) {
+        window.clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+    };
+  }, [pools]);
+
+  const openAddDialog = () => {
+    setEditingPool(null);
+    setFormName("");
+    setFormBaseUrl("");
+    setFormSecretKey("");
+    setShowSecret(false);
+    setDialogOpen(true);
+  };
+
+  const openEditDialog = (pool: CPAPool) => {
+    setEditingPool(pool);
+    setFormName(pool.name);
+    setFormBaseUrl(pool.base_url);
+    setFormSecretKey("");
+    setShowSecret(false);
+    setDialogOpen(true);
+  };
+
+  const handleSave = async () => {
+    if (!formBaseUrl.trim()) {
+      toast.error("请输入 CPA 地址");
+      return;
+    }
+    if (!editingPool && !formSecretKey.trim()) {
+      toast.error("请输入 Secret Key");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      if (editingPool) {
+        const data = await updateCPAPool(editingPool.id, {
+          name: formName.trim(),
+          base_url: formBaseUrl.trim(),
+          secret_key: formSecretKey.trim() || undefined,
+        });
+        setPools(data.pools);
+        toast.success("连接已更新");
+      } else {
+        const data = await createCPAPool({
+          name: formName.trim(),
+          base_url: formBaseUrl.trim(),
+          secret_key: formSecretKey.trim(),
+        });
+        setPools(data.pools);
+        toast.success("连接已添加");
+      }
+      setDialogOpen(false);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存失败");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async (pool: CPAPool) => {
+    setDeletingId(pool.id);
+    try {
+      const data = await deleteCPAPool(pool.id);
+      setPools(data.pools);
+      toast.success("连接已删除");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "删除失败");
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const handleBrowseFiles = async (pool: CPAPool) => {
+    setLoadingFilesId(pool.id);
+    try {
+      const data = await fetchCPAPoolFiles(pool.id);
+      const files = normalizeFiles(data.files);
+      setBrowserPool(pool);
+      setRemoteFiles(files);
+      setSelectedNames([]);
+      setFileQuery("");
+      setFilePage(1);
+      setBrowserOpen(true);
+      toast.success(`读取成功，共 ${files.length} 个远程账号`);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "读取远程账号失败");
+    } finally {
+      setLoadingFilesId(null);
+    }
+  };
+
+  const filteredFiles = useMemo(() => {
+    const query = fileQuery.trim().toLowerCase();
+    if (!query) {
+      return remoteFiles;
+    }
+    return remoteFiles.filter((item) => {
+      return item.email.toLowerCase().includes(query) || item.name.toLowerCase().includes(query);
+    });
+  }, [fileQuery, remoteFiles]);
+
+  const currentPageSize = Number(pageSize);
+  const filePageCount = Math.max(1, Math.ceil(filteredFiles.length / currentPageSize));
+  const safeFilePage = Math.min(filePage, filePageCount);
+  const pagedFiles = filteredFiles.slice((safeFilePage - 1) * currentPageSize, safeFilePage * currentPageSize);
+  const allFilteredSelected = filteredFiles.length > 0 && filteredFiles.every((item) => selectedNames.includes(item.name));
+
+  const toggleFile = (name: string, checked: boolean) => {
+    setSelectedNames((prev) => {
+      if (checked) {
+        return Array.from(new Set([...prev, name]));
+      }
+      return prev.filter((item) => item !== name);
+    });
+  };
+
+  const handleToggleSelectAllFiltered = (checked: boolean) => {
+    if (checked) {
+      setSelectedNames(Array.from(new Set([...selectedNames, ...filteredFiles.map((item) => item.name)])));
+      return;
+    }
+    const filteredSet = new Set(filteredFiles.map((item) => item.name));
+    setSelectedNames((prev) => prev.filter((name) => !filteredSet.has(name)));
+  };
+
+  const handleStartImport = async () => {
+    if (!browserPool) {
+      return;
+    }
+    if (selectedNames.length === 0) {
+      toast.error("请先选择要导入的账号");
+      return;
+    }
+
+    setIsStartingImport(true);
+    try {
+      const result = await startCPAImport(browserPool.id, selectedNames);
+      setPools((prev) =>
+        prev.map((pool) => (pool.id === browserPool.id ? { ...pool, import_job: result.import_job } : pool)),
+      );
+      setBrowserOpen(false);
+      toast.success("导入任务已启动");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "启动导入失败");
+    } finally {
+      setIsStartingImport(false);
+    }
+  };
+
+  return (
+    <>
+      <section className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="space-y-1">
+          <div className="text-xs font-semibold tracking-[0.18em] text-stone-500 uppercase">Settings</div>
+          <h1 className="text-2xl font-semibold tracking-tight">设置</h1>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <Card className="rounded-2xl border-white/80 bg-white/90 shadow-sm">
+          <CardContent className="space-y-6 p-6">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center gap-3">
+                <div className="flex size-10 items-center justify-center rounded-xl bg-stone-100">
+                  <ServerCog className="size-5 text-stone-600" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold tracking-tight">CPA 连接管理</h2>
+                  <p className="text-sm text-stone-500">先配置连接，再按需查询远程账号并选择导入到本地号池。</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {pools.length > 0 ? <Badge className="rounded-md px-2.5 py-1">{pools.length} 个连接</Badge> : null}
+                <Button className="h-9 rounded-xl bg-stone-950 px-4 text-white hover:bg-stone-800" onClick={openAddDialog}>
+                  <Plus className="size-4" />
+                  添加连接
+                </Button>
+              </div>
+            </div>
+
+            {isLoading ? (
+              <div className="flex items-center justify-center py-10">
+                <LoaderCircle className="size-5 animate-spin text-stone-400" />
+              </div>
+            ) : pools.length === 0 ? (
+              <div className="flex flex-col items-center justify-center gap-3 rounded-xl bg-stone-50 px-6 py-10 text-center">
+                <ServerCog className="size-8 text-stone-300" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-stone-600">暂无 CPA 连接</p>
+                  <p className="text-sm text-stone-400">点击「添加连接」保存你的 CLIProxyAPI 信息。</p>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {pools.map((pool) => {
+                  const isBusy = deletingId === pool.id || loadingFilesId === pool.id;
+                  const importJob = pool.import_job ?? null;
+                  return (
+                    <div key={pool.id} className="flex flex-col gap-3 rounded-xl border border-stone-200 bg-white px-4 py-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="text-sm font-medium text-stone-800">{pool.name || pool.base_url}</div>
+                          <div className="truncate text-xs text-stone-400">{pool.base_url}</div>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <button
+                            type="button"
+                            className="rounded-lg p-2 text-stone-400 transition hover:bg-stone-100 hover:text-stone-700"
+                            onClick={() => openEditDialog(pool)}
+                            disabled={isBusy}
+                            title="编辑"
+                          >
+                            <Pencil className="size-4" />
+                          </button>
+                          <button
+                            type="button"
+                            className="rounded-lg p-2 text-stone-400 transition hover:bg-rose-50 hover:text-rose-500"
+                            onClick={() => void handleDelete(pool)}
+                            disabled={isBusy}
+                            title="删除"
+                          >
+                            {deletingId === pool.id ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          className="h-8 rounded-lg border-stone-200 bg-white px-3 text-xs text-stone-600"
+                          onClick={() => void handleBrowseFiles(pool)}
+                          disabled={isBusy}
+                        >
+                          {loadingFilesId === pool.id ? <LoaderCircle className="size-3.5 animate-spin" /> : <Import className="size-3.5" />}
+                          同步
+                        </Button>
+                      </div>
+
+                      {importJob ? (
+                        <div className="space-y-2 rounded-xl bg-stone-50 px-3 py-3">
+                          <div className="text-xs font-medium tracking-[0.16em] text-stone-400 uppercase">导入任务</div>
+                          {(() => {
+                            const progress = importJob.total > 0 ? Math.round((importJob.completed / importJob.total) * 100) : 0;
+                            return (
+                              <div className="rounded-lg border border-stone-200 bg-white px-3 py-3">
+                                <div className="flex items-center justify-between gap-3">
+                                  <div className="min-w-0">
+                                    <div className="text-sm font-medium text-stone-700">
+                                      状态 {importJob.status}，已处理 {importJob.completed}/{importJob.total}
+                                    </div>
+                                    <div className="truncate text-xs text-stone-400">
+                                      任务 {importJob.job_id.slice(0, 8)} · {importJob.created_at}
+                                    </div>
+                                  </div>
+                                  <Badge
+                                    variant={importJob.status === "completed" ? "success" : importJob.status === "failed" ? "danger" : "info"}
+                                    className="rounded-md"
+                                  >
+                                    {progress}%
+                                  </Badge>
+                                </div>
+                                <div className="mt-3 h-2 overflow-hidden rounded-full bg-stone-200">
+                                  <div className="h-full rounded-full bg-stone-900 transition-all" style={{ width: `${progress}%` }} />
+                                </div>
+                                <div className="mt-2 flex flex-wrap gap-2 text-xs text-stone-500">
+                                  <span>新增 {importJob.added}</span>
+                                  <span>跳过 {importJob.skipped}</span>
+                                  <span>刷新 {importJob.refreshed}</span>
+                                  <span>失败 {importJob.failed}</span>
+                                </div>
+                              </div>
+                            );
+                          })()}
+                        </div>
+                      ) : null}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            <div className="rounded-xl bg-stone-50 px-4 py-3 text-sm leading-6 text-stone-500">
+              <p className="font-medium text-stone-600">使用说明</p>
+              <ul className="mt-1 list-inside list-disc space-y-0.5">
+                <li>页面进入后先读取系统里已配置的 CPA 连接。</li>
+                <li>点击某个连接的「同步」后，会先读取远程账号列表并展示给前端选择。</li>
+                <li>确认选择后，后端后台下载对应 access_token 并导入本地号池。</li>
+                <li>前端只轮询导入进度，不直接参与 download。</li>
+              </ul>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent showCloseButton={false} className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>{editingPool ? "编辑连接" : "添加连接"}</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              {editingPool ? "修改 CPA 连接信息" : "添加一个新的 CLIProxyAPI 连接"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-stone-700">名称（可选）</label>
+              <Input
+                value={formName}
+                onChange={(event) => setFormName(event.target.value)}
+                placeholder="例如：主号池、备用池"
+                className="h-11 rounded-xl border-stone-200 bg-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="flex items-center gap-1.5 text-sm font-medium text-stone-700">
+                <Link2 className="size-3.5" />
+                CPA 地址
+              </label>
+              <Input
+                value={formBaseUrl}
+                onChange={(event) => setFormBaseUrl(event.target.value)}
+                placeholder="http://your-cpa-host:8317"
+                className="h-11 rounded-xl border-stone-200 bg-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="flex items-center gap-1.5 text-sm font-medium text-stone-700">
+                <Unplug className="size-3.5" />
+                Management Secret Key
+              </label>
+              <div className="relative">
+                <Input
+                  type={showSecret ? "text" : "password"}
+                  value={formSecretKey}
+                  onChange={(event) => setFormSecretKey(event.target.value)}
+                  placeholder={editingPool ? "留空则不修改密钥" : "CPA 管理密钥"}
+                  className="h-11 rounded-xl border-stone-200 bg-white pr-10"
+                />
+                <button
+                  type="button"
+                  className="absolute top-1/2 right-3 -translate-y-1/2 text-stone-400 transition hover:text-stone-600"
+                  onClick={() => setShowSecret((prev) => !prev)}
+                >
+                  {showSecret ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                </button>
+              </div>
+            </div>
+          </div>
+          <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={() => setDialogOpen(false)}
+              disabled={isSaving}
+            >
+              取消
+            </Button>
+            <Button
+              className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+              onClick={() => void handleSave()}
+              disabled={isSaving}
+            >
+              {isSaving ? <LoaderCircle className="size-4 animate-spin" /> : <Save className="size-4" />}
+              {editingPool ? "保存修改" : "添加"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={browserOpen} onOpenChange={setBrowserOpen}>
+        <DialogContent showCloseButton={false} className="max-h-[90vh] max-w-5xl rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>选择要导入的账号</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              {browserPool ? `来自 ${browserPool.name || browserPool.base_url}` : "读取到的远程账号列表"}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div className="relative min-w-[260px]">
+              <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-stone-400" />
+              <Input
+                value={fileQuery}
+                onChange={(event) => {
+                  setFileQuery(event.target.value);
+                  setFilePage(1);
+                }}
+                placeholder="搜索 email 或文件名"
+                className="h-10 rounded-xl border-stone-200 bg-white pl-10"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Select
+                value={pageSize}
+                onValueChange={(value) => {
+                  setPageSize(value as (typeof PAGE_SIZE_OPTIONS)[number]);
+                  setFilePage(1);
+                }}
+              >
+                <SelectTrigger className="h-10 w-[120px] rounded-xl border-stone-200 bg-white">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PAGE_SIZE_OPTIONS.map((item) => (
+                    <SelectItem key={item} value={item}>
+                      {item} / 页
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                variant="outline"
+                className="h-10 rounded-xl border-stone-200 bg-white px-4 text-stone-700"
+                onClick={() => handleToggleSelectAllFiltered(!allFilteredSelected)}
+              >
+                {allFilteredSelected ? "取消全选" : "全选筛选结果"}
+              </Button>
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-stone-200">
+            <div className="flex items-center justify-between border-b border-stone-100 px-4 py-3 text-sm text-stone-500">
+              <div className="flex items-center gap-3">
+                <Checkbox checked={allFilteredSelected} onCheckedChange={(checked) => handleToggleSelectAllFiltered(Boolean(checked))} />
+                <span>筛选结果 {filteredFiles.length} 个</span>
+              </div>
+              <span>已选 {selectedNames.length} 个</span>
+            </div>
+            <div className="max-h-[420px] overflow-auto">
+              {pagedFiles.length === 0 ? (
+                <div className="flex items-center justify-center py-12 text-sm text-stone-400">没有匹配的远程账号</div>
+              ) : (
+                <div className="divide-y divide-stone-100">
+                  {pagedFiles.map((item) => (
+                    <label key={item.name} className="flex cursor-pointer items-center gap-3 px-4 py-3 hover:bg-stone-50">
+                      <Checkbox
+                        checked={selectedNames.includes(item.name)}
+                        onCheckedChange={(checked) => toggleFile(item.name, Boolean(checked))}
+                      />
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium text-stone-700">{item.email || item.name}</div>
+                        <div className="truncate text-xs text-stone-400">{item.name}</div>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between text-sm text-stone-500">
+            <span>
+              第 {filteredFiles.length === 0 ? 0 : (safeFilePage - 1) * currentPageSize + 1} -{" "}
+              {Math.min(safeFilePage * currentPageSize, filteredFiles.length)} 条，共 {filteredFiles.length} 条
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                className="h-9 rounded-xl border-stone-200 bg-white px-3"
+                onClick={() => setFilePage((prev) => Math.max(1, prev - 1))}
+                disabled={safeFilePage <= 1}
+              >
+                上一页
+              </Button>
+              <span>
+                {safeFilePage}/{filePageCount}
+              </span>
+              <Button
+                variant="outline"
+                className="h-9 rounded-xl border-stone-200 bg-white px-3"
+                onClick={() => setFilePage((prev) => Math.min(filePageCount, prev + 1))}
+                disabled={safeFilePage >= filePageCount}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+
+          <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={() => setBrowserOpen(false)}
+              disabled={isStartingImport}
+            >
+              取消
+            </Button>
+            <Button
+              className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+              onClick={() => void handleStartImport()}
+              disabled={isStartingImport || selectedNames.length === 0}
+            >
+              {isStartingImport ? <LoaderCircle className="size-4 animate-spin" /> : <Import className="size-4" />}
+              导入选中账号
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/components/image-lightbox.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import Image from "next/image";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type LightboxImage = {
+  id: string;
+  src: string;
+};
+
+type ImageLightboxProps = {
+  images: LightboxImage[];
+  currentIndex: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onIndexChange: (index: number) => void;
+};
+
+export function ImageLightbox({
+  images,
+  currentIndex,
+  open,
+  onOpenChange,
+  onIndexChange,
+}: ImageLightboxProps) {
+  const current = images[currentIndex];
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < images.length - 1;
+
+  const goPrev = useCallback(() => {
+    if (hasPrev) onIndexChange(currentIndex - 1);
+  }, [hasPrev, currentIndex, onIndexChange]);
+
+  const goNext = useCallback(() => {
+    if (hasNext) onIndexChange(currentIndex + 1);
+  }, [hasNext, currentIndex, onIndexChange]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        goNext();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, goPrev, goNext]);
+
+  const handleDownload = useCallback(() => {
+    if (!current) return;
+    const link = document.createElement("a");
+    link.href = current.src;
+    link.download = `image-${current.id}.png`;
+    link.click();
+  }, [current]);
+
+  if (!current) return null;
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          className="fixed inset-0 z-50 flex items-center justify-center outline-none"
+          onPointerDownOutside={(e) => e.preventDefault()}
+        >
+          <DialogPrimitive.Title className="sr-only">
+            图片预览
+          </DialogPrimitive.Title>
+
+          {/* toolbar */}
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+            {images.length > 1 && (
+              <span className="rounded-full bg-black/50 px-3 py-1.5 text-xs font-medium text-white/90">
+                {currentIndex + 1} / {images.length}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={handleDownload}
+              className="inline-flex size-9 items-center justify-center rounded-full bg-black/50 text-white/90 transition hover:bg-black/70"
+              aria-label="下载图片"
+            >
+              <Download className="size-4" />
+            </button>
+            <DialogPrimitive.Close className="inline-flex size-9 items-center justify-center rounded-full bg-black/50 text-white/90 transition hover:bg-black/70">
+              <X className="size-4" />
+              <span className="sr-only">关闭</span>
+            </DialogPrimitive.Close>
+          </div>
+
+          {/* prev */}
+          {hasPrev && (
+            <button
+              type="button"
+              onClick={goPrev}
+              className="absolute left-4 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/40 text-white/90 transition hover:bg-black/60"
+              aria-label="上一张"
+            >
+              <ChevronLeft className="size-5" />
+            </button>
+          )}
+
+          {/* image */}
+          <div
+            className="flex max-h-[90vh] max-w-[90vw] items-center justify-center"
+            onClick={() => onOpenChange(false)}
+          >
+            <Image
+              src={current.src}
+              alt=""
+              width={1536}
+              height={1536}
+              unoptimized
+              className="max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+              onClick={(e) => e.stopPropagation()}
+              draggable={false}
+            />
+          </div>
+
+          {/* next */}
+          {hasNext && (
+            <button
+              type="button"
+              onClick={goNext}
+              className="absolute right-4 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/40 text-white/90 transition hover:bg-black/60"
+              aria-label="下一张"
+            >
+              <ChevronRight className="size-5" />
+            </button>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

web/src/components/top-nav.tsx

@@ -11,6 +11,7 @@ import { cn } from "@/lib/utils";
 const navItems = [
   { href: "/image", label: "画图" },
   { href: "/accounts", label: "号池管理" },
+  { href: "/settings", label: "设置" },
 ];
 
 export function TopNav() {

web/src/lib/api.ts

@@ -116,3 +116,73 @@ export async function generateImage(prompt: string, model: ImageModel = "gpt-ima
     },
   );
 }
+
+// ── CPA (CLIProxyAPI) ──────────────────────────────────────────────
+
+export type CPAPool = {
+  id: string;
+  name: string;
+  base_url: string;
+  import_job?: CPAImportJob | null;
+};
+
+export type CPARemoteFile = {
+  name: string;
+  email: string;
+};
+
+export type CPAImportJob = {
+  job_id: string;
+  status: "pending" | "running" | "completed" | "failed";
+  created_at: string;
+  updated_at: string;
+  total: number;
+  completed: number;
+  added: number;
+  skipped: number;
+  refreshed: number;
+  failed: number;
+  errors: Array<{ name: string; error: string }>;
+};
+
+export async function fetchCPAPools() {
+  return httpRequest<{ pools: CPAPool[] }>("/api/cpa/pools");
+}
+
+export async function createCPAPool(pool: { name: string; base_url: string; secret_key: string }) {
+  return httpRequest<{ pool: CPAPool; pools: CPAPool[] }>("/api/cpa/pools", {
+    method: "POST",
+    body: pool,
+  });
+}
+
+export async function updateCPAPool(
+  poolId: string,
+  updates: { name?: string; base_url?: string; secret_key?: string },
+) {
+  return httpRequest<{ pool: CPAPool; pools: CPAPool[] }>(`/api/cpa/pools/${poolId}`, {
+    method: "POST",
+    body: updates,
+  });
+}
+
+export async function deleteCPAPool(poolId: string) {
+  return httpRequest<{ pools: CPAPool[] }>(`/api/cpa/pools/${poolId}`, {
+    method: "DELETE",
+  });
+}
+
+export async function fetchCPAPoolFiles(poolId: string) {
+  return httpRequest<{ pool_id: string; files: CPARemoteFile[] }>(`/api/cpa/pools/${poolId}/files`);
+}
+
+export async function startCPAImport(poolId: string, names: string[]) {
+  return httpRequest<{ import_job: CPAImportJob | null }>(`/api/cpa/pools/${poolId}/import`, {
+    method: "POST",
+    body: { names },
+  });
+}
+
+export async function fetchCPAPoolImportJob(poolId: string) {
+  return httpRequest<{ import_job: CPAImportJob | null }>(`/api/cpa/pools/${poolId}/import`);
+}

web/src/lib/request.ts

@@ -30,8 +30,14 @@ request.interceptors.response.use(
         const status = error.response?.status;
         const shouldRedirect = (error.config as RequestConfig | undefined)?.redirectOnUnauthorized !== false;
         if (status === 401 && shouldRedirect && typeof window !== "undefined") {
-            await clearStoredAuthKey();
-            window.location.href = "/login";
+            // Avoid redirect loop — only redirect if not already on /login
+            if (!window.location.pathname.startsWith("/login")) {
+                await clearStoredAuthKey();
+                window.location.replace("/login");
+                // Return a never-resolving promise to prevent further error handling
+                // while the browser navigates away
+                return new Promise(() => {});
+            }
         }
 
         const payload = error.response?.data;