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

package/vendor/chatgpt2api/source/web/src/app/settings/components/cpa-pools-card.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { Import, LoaderCircle, Pencil, Plus, ServerCog, Trash2 } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+import { useSettingsStore } from "../store";
+
+export function CPAPoolsCard() {
+  const pools = useSettingsStore((state) => state.pools);
+  const isLoadingPools = useSettingsStore((state) => state.isLoadingPools);
+  const deletingId = useSettingsStore((state) => state.deletingId);
+  const loadingFilesId = useSettingsStore((state) => state.loadingFilesId);
+  const openAddDialog = useSettingsStore((state) => state.openAddDialog);
+  const openEditDialog = useSettingsStore((state) => state.openEditDialog);
+  const deletePool = useSettingsStore((state) => state.deletePool);
+  const browseFiles = useSettingsStore((state) => state.browseFiles);
+
+  return (
+    <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>
+
+        {isLoadingPools ? (
+          <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;
+              const progress = importJob?.total
+                ? Math.round((importJob.completed / importJob.total) * 100)
+                : 0;
+
+              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 deletePool(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 browseFiles(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>
+                      <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>
+  );
+}

package/vendor/chatgpt2api/source/web/src/app/settings/components/import-browser-dialog.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { Import, LoaderCircle, Search } from "lucide-react";
+import { useMemo } from "react";
+
+import { Button } from "@/components/ui/button";
+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 { PAGE_SIZE_OPTIONS, useSettingsStore } from "../store";
+
+export function ImportBrowserDialog() {
+  const browserOpen = useSettingsStore((state) => state.browserOpen);
+  const browserPool = useSettingsStore((state) => state.browserPool);
+  const remoteFiles = useSettingsStore((state) => state.remoteFiles);
+  const selectedNames = useSettingsStore((state) => state.selectedNames);
+  const fileQuery = useSettingsStore((state) => state.fileQuery);
+  const filePage = useSettingsStore((state) => state.filePage);
+  const pageSize = useSettingsStore((state) => state.pageSize);
+  const isStartingImport = useSettingsStore((state) => state.isStartingImport);
+  const setBrowserOpen = useSettingsStore((state) => state.setBrowserOpen);
+  const toggleFile = useSettingsStore((state) => state.toggleFile);
+  const replaceSelectedNames = useSettingsStore((state) => state.replaceSelectedNames);
+  const setFileQuery = useSettingsStore((state) => state.setFileQuery);
+  const setFilePage = useSettingsStore((state) => state.setFilePage);
+  const setPageSize = useSettingsStore((state) => state.setPageSize);
+  const startImport = useSettingsStore((state) => state.startImport);
+
+  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 toggleSelectAllFiltered = (checked: boolean) => {
+    if (checked) {
+      replaceSelectedNames([...selectedNames, ...filteredFiles.map((item) => item.name)]);
+      return;
+    }
+    const filteredSet = new Set(filteredFiles.map((item) => item.name));
+    replaceSelectedNames(selectedNames.filter((name) => !filteredSet.has(name)));
+  };
+
+  return (
+    <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)}
+              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])}>
+              <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={() => toggleSelectAllFiltered(!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) => toggleSelectAllFiltered(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(Math.max(1, safeFilePage - 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(Math.min(filePageCount, safeFilePage + 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 startImport()}
+            disabled={isStartingImport || selectedNames.length === 0}
+          >
+            {isStartingImport ? <LoaderCircle className="size-4 animate-spin" /> : <Import className="size-4" />}
+            导入选中账号
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}