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

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

@@ -0,0 +1,447 @@
+"use client";
+
+import { CloudUpload, Download, Eye, LoaderCircle, Play, RefreshCcw, Shield, Trash2 } from "lucide-react";
+import { useState } from "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, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import webConfig from "@/constants/common-env";
+import { fetchBackupDetail, getBackupDownloadUrl, type BackupDetail, type BackupInclude } from "@/lib/api";
+import { getStoredAuthKey } from "@/store/auth";
+import { useSettingsStore } from "../store";
+
+function formatDateTime(value?: string | null) {
+  if (!value) {
+    return "—";
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function formatBytes(value: number) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB"];
+  let size = value;
+  let index = 0;
+  while (size >= 1024 && index < units.length - 1) {
+    size /= 1024;
+    index += 1;
+  }
+  return `${size >= 10 || index === 0 ? size.toFixed(0) : size.toFixed(1)} ${units[index]}`;
+}
+
+function getFilenameFromContentDisposition(value: string | null) {
+  const header = String(value || "").trim();
+  if (!header) {
+    return "";
+  }
+  const utf8Match = header.match(/filename\*\s*=\s*UTF-8''([^;]+)/i);
+  if (utf8Match?.[1]) {
+    try {
+      return decodeURIComponent(utf8Match[1]);
+    } catch {
+      return utf8Match[1];
+    }
+  }
+  const plainMatch = header.match(/filename\s*=\s*"?([^";]+)"?/i);
+  return plainMatch?.[1] || "";
+}
+
+const includeLabels: Array<{ key: keyof BackupInclude; label: string }> = [
+  { key: "config", label: "系统配置" },
+  { key: "cpa", label: "CPA 配置" },
+  { key: "sub2api", label: "Sub2API 配置" },
+  { key: "logs", label: "调度与调用日志" },
+  { key: "image_tasks", label: "图片任务记录" },
+  { key: "accounts_snapshot", label: "账号快照" },
+  { key: "auth_keys_snapshot", label: "用户密钥快照" },
+  { key: "images", label: "图片文件目录" },
+];
+
+export function BackupSettingsCard() {
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [detail, setDetail] = useState<BackupDetail | null>(null);
+  const config = useSettingsStore((state) => state.config);
+  const backups = useSettingsStore((state) => state.backups);
+  const backupState = useSettingsStore((state) => state.backupState);
+  const isLoadingConfig = useSettingsStore((state) => state.isLoadingConfig);
+  const isSavingConfig = useSettingsStore((state) => state.isSavingConfig);
+  const isLoadingBackups = useSettingsStore((state) => state.isLoadingBackups);
+  const isRunningBackup = useSettingsStore((state) => state.isRunningBackup);
+  const deletingBackupKey = useSettingsStore((state) => state.deletingBackupKey);
+  const isTestingBackup = useSettingsStore((state) => state.isTestingBackup);
+  const saveConfig = useSettingsStore((state) => state.saveConfig);
+  const loadBackups = useSettingsStore((state) => state.loadBackups);
+  const runBackup = useSettingsStore((state) => state.runBackup);
+  const removeBackup = useSettingsStore((state) => state.removeBackup);
+  const testBackup = useSettingsStore((state) => state.testBackup);
+  const setBackupField = useSettingsStore((state) => state.setBackupField);
+  const setBackupInclude = useSettingsStore((state) => state.setBackupInclude);
+
+  if (isLoadingConfig) {
+    return (
+      <Card className="rounded-2xl border-white/80 bg-white/90 shadow-sm">
+        <CardContent className="flex items-center justify-center p-10">
+          <LoaderCircle className="size-5 animate-spin text-stone-400" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const backup = config?.backup;
+  if (!backup) {
+    return null;
+  }
+
+  const handleOpenDetail = async (key: string) => {
+    setDetailLoading(true);
+    setDetailOpen(true);
+    try {
+      const data = await fetchBackupDetail(key);
+      setDetail(data.item);
+    } catch (error) {
+      setDetail(null);
+      toast.error(error instanceof Error ? error.message : "读取备份详情失败");
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  const handleDownload = async (key: string, name: string) => {
+    try {
+      const authKey = await getStoredAuthKey();
+      if (!authKey) {
+        toast.error("当前登录态已失效，请重新登录后再下载");
+        return;
+      }
+      const response = await fetch(`${webConfig.apiUrl.replace(/\/$/, "")}${getBackupDownloadUrl(key)}`, {
+        headers: {
+          Authorization: `Bearer ${authKey}`,
+        },
+      });
+      if (!response.ok) {
+        let message = "下载备份失败";
+        try {
+          const data = await response.json() as { detail?: { error?: string }; error?: string; message?: string };
+          message = data.detail?.error || data.error || data.message || message;
+        } catch {
+          message = response.status === 401 ? "登录已失效，请重新登录后再试" : message;
+        }
+        throw new Error(message);
+      }
+      const downloadName = getFilenameFromContentDisposition(response.headers.get("Content-Disposition")) || name || "backup.bin";
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = downloadName;
+      document.body.append(anchor);
+      anchor.click();
+      anchor.remove();
+      window.URL.revokeObjectURL(url);
+      toast.success("备份下载已开始");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "下载备份失败");
+    }
+  };
+
+  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 gap-4">
+            <div className="flex items-center gap-3">
+              <div className="flex size-10 items-center justify-center rounded-xl bg-stone-100">
+                <CloudUpload className="size-5 text-stone-600" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold tracking-tight">R2 备份管理</h2>
+                <p className="text-sm text-stone-500">将关键数据定时备份到 Cloudflare R2，支持可选加密、轮替、手动执行与历史清理。</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant={backupState?.running ? "warning" : backupState?.last_status === "success" ? "success" : "secondary"} className="rounded-md">
+                {backupState?.running ? "备份中" : backupState?.last_status === "success" ? "最近成功" : backupState?.last_status === "error" ? "最近失败" : "未执行"}
+              </Badge>
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm leading-6 text-stone-600">
+            账号与用户密钥会从当前存储后端导出逻辑快照，不依赖底层是 `json`、`sqlite`、`postgres` 还是 `git`。图片目录默认不备份，避免备份体积过大。
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="flex items-center gap-3 rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-700">
+              <Checkbox
+                checked={Boolean(backup.enabled)}
+                onCheckedChange={(checked) => setBackupField("enabled", Boolean(checked))}
+              />
+              启用定时备份
+            </label>
+            <label className="flex items-center gap-3 rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-700">
+              <Checkbox
+                checked={Boolean(backup.encrypt)}
+                onCheckedChange={(checked) => setBackupField("encrypt", Boolean(checked))}
+              />
+              启用备份加密
+            </label>
+
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">Cloudflare Account ID</label>
+            <Input value={String(backup.account_id || "")} onChange={(event) => setBackupField("account_id", event.target.value)} className="h-10 rounded-xl border-stone-200 bg-white" />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">Bucket 名称</label>
+            <Input value={String(backup.bucket || "")} onChange={(event) => setBackupField("bucket", event.target.value)} className="h-10 rounded-xl border-stone-200 bg-white" />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">Access Key ID</label>
+            <Input value={String(backup.access_key_id || "")} onChange={(event) => setBackupField("access_key_id", event.target.value)} className="h-10 rounded-xl border-stone-200 bg-white" />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">Secret Access Key</label>
+            <Input type="password" value={String(backup.secret_access_key || "")} onChange={(event) => setBackupField("secret_access_key", event.target.value)} className="h-10 rounded-xl border-stone-200 bg-white" />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">备份前缀</label>
+            <Input value={String(backup.prefix || "")} onChange={(event) => setBackupField("prefix", event.target.value)} placeholder="backups" className="h-10 rounded-xl border-stone-200 bg-white" />
+            <p className="text-xs text-stone-500">R2 内对象前缀，例如 `backups/prod`。</p>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">定时备份间隔</label>
+            <Input value={String(backup.interval_minutes || "")} onChange={(event) => setBackupField("interval_minutes", event.target.value)} placeholder="360" className="h-10 rounded-xl border-stone-200 bg-white" />
+            <p className="text-xs text-stone-500">单位分钟，服务启动后会按此间隔自动轮询执行。</p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">保留备份数量</label>
+            <Input value={String(backup.rotation_keep || "")} onChange={(event) => setBackupField("rotation_keep", event.target.value)} placeholder="10" className="h-10 rounded-xl border-stone-200 bg-white" />
+            <p className="text-xs text-stone-500">成功上传后自动删除更旧的备份。填 `0` 表示不自动轮替。</p>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">加密口令</label>
+            <Input type="password" value={String(backup.passphrase || "")} onChange={(event) => setBackupField("passphrase", event.target.value)} placeholder={backup.encrypt ? "启用加密后必填" : "留空"} className="h-10 rounded-xl border-stone-200 bg-white" />
+            <p className="text-xs text-stone-500">仅在启用加密时使用。请妥善保管，否则无法解密备份内容。</p>
+          </div>
+          </div>
+
+          <div className="space-y-3 rounded-xl border border-stone-200 bg-white px-4 py-4">
+          <div>
+            <div className="text-sm font-medium text-stone-800">备份内容</div>
+            <p className="mt-1 text-xs text-stone-500">按组件勾选需要进入备份包的数据。</p>
+          </div>
+          <div className="grid gap-3 md:grid-cols-3">
+            {includeLabels.map((item) => (
+              <label key={item.key} className="flex items-center gap-3 text-sm text-stone-700">
+                <Checkbox
+                  checked={Boolean(backup.include[item.key])}
+                  onCheckedChange={(checked) => setBackupInclude(item.key, Boolean(checked))}
+                />
+                {item.label}
+              </label>
+            ))}
+          </div>
+          </div>
+
+          <div className="grid gap-3 rounded-xl border border-stone-200 bg-stone-50 px-4 py-4 text-sm text-stone-600 md:grid-cols-3">
+          <div>
+            <div className="text-xs text-stone-500">最近开始</div>
+            <div className="mt-1 font-medium text-stone-800">{formatDateTime(backupState?.last_started_at)}</div>
+          </div>
+          <div>
+            <div className="text-xs text-stone-500">最近完成</div>
+            <div className="mt-1 font-medium text-stone-800">{formatDateTime(backupState?.last_finished_at)}</div>
+          </div>
+          <div>
+            <div className="text-xs text-stone-500">最近对象</div>
+            <div className="mt-1 break-all font-medium text-stone-800">{backupState?.last_object_key || "—"}</div>
+          </div>
+          {backupState?.last_error ? (
+            <div className="md:col-span-3">
+              <div className="text-xs text-rose-500">最近错误</div>
+              <div className="mt-1 break-all rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-rose-700">{backupState.last_error}</div>
+            </div>
+          ) : null}
+          </div>
+
+          <div className="flex flex-wrap justify-end gap-2">
+          <Button type="button" variant="outline" className="h-9 rounded-xl border-stone-200 bg-white px-4 text-stone-700" onClick={() => void testBackup()} disabled={isTestingBackup}>
+            {isTestingBackup ? <LoaderCircle className="size-4 animate-spin" /> : <Shield className="size-4" />}
+            测试连接
+          </Button>
+          <Button type="button" variant="outline" className="h-9 rounded-xl border-stone-200 bg-white px-4 text-stone-700" onClick={() => void loadBackups()} disabled={isLoadingBackups}>
+            {isLoadingBackups ? <LoaderCircle className="size-4 animate-spin" /> : <RefreshCcw className="size-4" />}
+            刷新列表
+          </Button>
+          <Button type="button" variant="outline" className="h-9 rounded-xl border-stone-200 bg-white px-4 text-stone-700" onClick={() => void runBackup()} disabled={isRunningBackup || Boolean(backupState?.running)}>
+            {isRunningBackup || backupState?.running ? <LoaderCircle className="size-4 animate-spin" /> : <Play className="size-4" />}
+            立即备份
+          </Button>
+          <Button className="h-9 rounded-xl bg-stone-950 px-4 text-white hover:bg-stone-800" onClick={() => void saveConfig()} disabled={isSavingConfig}>
+            {isSavingConfig ? <LoaderCircle className="size-4 animate-spin" /> : <CloudUpload className="size-4" />}
+            保存配置
+          </Button>
+          </div>
+
+          <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h3 className="text-sm font-medium text-stone-800">历史备份</h3>
+              <p className="text-xs text-stone-500">支持查看对象信息并直接删除远端备份。</p>
+            </div>
+          </div>
+
+          {isLoadingBackups ? (
+            <div className="flex items-center justify-center py-10">
+              <LoaderCircle className="size-5 animate-spin text-stone-400" />
+            </div>
+          ) : backups.length === 0 ? (
+            <div className="rounded-xl bg-stone-50 px-6 py-10 text-center text-sm text-stone-500">
+              暂无远端备份记录。保存配置并执行一次手动备份后会出现在这里。
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {backups.map((item) => {
+                const isDeleting = deletingBackupKey === item.key;
+                return (
+                  <div key={item.key} className="flex flex-col gap-3 rounded-xl border border-stone-200 bg-white px-4 py-4 md:flex-row md:items-center md:justify-between">
+                    <div className="min-w-0 space-y-2">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <div className="break-all text-sm font-medium text-stone-800">{item.name}</div>
+                        {item.encrypted ? <Badge variant="secondary" className="rounded-md">已加密</Badge> : null}
+                      </div>
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-stone-500">
+                        <span>大小 {formatBytes(item.size)}</span>
+                        <span>更新时间 {formatDateTime(item.updated_at)}</span>
+                        <span className="break-all">对象 key {item.key}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="h-9 rounded-xl border-stone-200 bg-white px-4 text-stone-700"
+                        onClick={() => void handleDownload(item.key, item.name)}
+                      >
+                        <Download className="size-4" />
+                        下载
+                      </Button>
+                      <Button type="button" variant="outline" className="h-9 rounded-xl border-stone-200 bg-white px-4 text-stone-700" onClick={() => void handleOpenDetail(item.key)}>
+                        <Eye className="size-4" />
+                        查看详情
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="h-9 rounded-xl border-rose-200 bg-white px-4 text-rose-700"
+                        onClick={() => void removeBackup(item.key)}
+                        disabled={isDeleting}
+                      >
+                        {isDeleting ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="flex max-h-[85vh] max-w-3xl flex-col overflow-hidden rounded-2xl border-white/80 bg-white">
+          <DialogHeader className="shrink-0 border-b border-stone-200 pb-3">
+            <DialogTitle>备份详情</DialogTitle>
+          </DialogHeader>
+          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">
+            {detailLoading ? (
+              <div className="flex items-center justify-center py-16">
+                <LoaderCircle className="size-5 animate-spin text-stone-400" />
+              </div>
+            ) : !detail ? (
+              <div className="rounded-xl bg-stone-50 px-6 py-10 text-center text-sm text-stone-500">
+                暂时无法读取备份详情；如果这是加密备份，请确认当前已填写正确的加密口令并先保存配置。
+              </div>
+            ) : (
+              <>
+                <div className="grid gap-3 rounded-xl border border-stone-200 bg-stone-50 px-4 py-4 text-sm text-stone-600 md:grid-cols-2">
+                  <div>
+                    <div className="text-xs text-stone-500">对象名称</div>
+                    <div className="mt-1 break-all font-medium text-stone-800">{detail.name}</div>
+                  </div>
+                  <div>
+                    <div className="text-xs text-stone-500">创建时间</div>
+                    <div className="mt-1 font-medium text-stone-800">{formatDateTime(detail.created_at)}</div>
+                  </div>
+                  <div>
+                    <div className="text-xs text-stone-500">触发方式</div>
+                    <div className="mt-1 font-medium text-stone-800">{detail.trigger || "—"}</div>
+                  </div>
+                  <div>
+                    <div className="text-xs text-stone-500">应用版本</div>
+                    <div className="mt-1 font-medium text-stone-800">{detail.app_version || "—"}</div>
+                  </div>
+                  <div className="md:col-span-2">
+                    <div className="text-xs text-stone-500">存储后端</div>
+                    <pre className="mt-1 overflow-x-auto rounded-lg border border-stone-200 bg-white px-3 py-2 text-xs text-stone-700">{JSON.stringify(detail.storage_backend || {}, null, 2)}</pre>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <h4 className="text-sm font-medium text-stone-800">文件内容</h4>
+                  <div className="space-y-2">
+                    {detail.files.map((item) => (
+                      <div key={item.name} className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm">
+                        <div className="break-all font-medium text-stone-800">{item.name}</div>
+                        <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-stone-500">
+                          <span>{item.exists ? "已包含" : "缺失"}</span>
+                          <span>大小 {formatBytes(item.size)}</span>
+                          <span>{item.content_type || "application/octet-stream"}</span>
+                          <span className="break-all">SHA256 {item.sha256 || "—"}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <h4 className="text-sm font-medium text-stone-800">快照内容</h4>
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {detail.snapshots.map((item) => (
+                      <div key={item.name} className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm">
+                        <div className="font-medium text-stone-800">{item.name}</div>
+                        <div className="mt-2 text-xs text-stone-500">记录数 {item.count}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/vendor/chatgpt2api/source/web/src/app/settings/components/base-url-card.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Globe, LoaderCircle, Save } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+import { useSettingsStore } from "../store";
+
+export function BaseUrlCard() {
+  const config = useSettingsStore((state) => state.config);
+  const isLoadingConfig = useSettingsStore((state) => state.isLoadingConfig);
+  const isSavingConfig = useSettingsStore((state) => state.isSavingConfig);
+  const setBaseUrl = useSettingsStore((state) => state.setBaseUrl);
+  const saveConfig = useSettingsStore((state) => state.saveConfig);
+
+  const baseUrl = String(config?.base_url || "");
+
+  return (
+    <Card className="rounded-2xl border-white/80 bg-white/90 shadow-sm">
+      <CardContent className="space-y-6 p-6">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex size-10 items-center justify-center rounded-xl bg-stone-100">
+              <Globe className="size-5 text-stone-600" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold tracking-tight">基础地址</h2>
+              <p className="text-sm text-stone-500">设置 `CHATGPT2API_BASE_URL` 的本地配置值，保存后立即生效。</p>
+            </div>
+          </div>
+          <Badge variant={baseUrl.trim() ? "success" : "secondary"} className="w-fit rounded-md px-2.5 py-1">
+            {baseUrl.trim() ? "已配置" : "未配置"}
+          </Badge>
+        </div>
+
+        {isLoadingConfig ? (
+          <div className="flex items-center justify-center py-10">
+            <LoaderCircle className="size-5 animate-spin text-stone-400" />
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-stone-700">Base URL</label>
+              <Input
+                value={baseUrl}
+                onChange={(event) => setBaseUrl(event.target.value)}
+                placeholder="https://example.com"
+                className="h-11 rounded-xl border-stone-200 bg-white"
+              />
+              <p className="text-sm text-stone-500">留空则使用环境变量或默认值，保存时会自动去掉首尾空格。</p>
+            </div>
+
+            <div className="flex justify-end">
+              <Button
+                className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+                onClick={() => void saveConfig()}
+                disabled={isSavingConfig}
+              >
+                {isSavingConfig ? <LoaderCircle className="size-4 animate-spin" /> : <Save className="size-4" />}
+                保存配置
+              </Button>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}