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

package/vendor/chatgpt2api/source/web/src/app/settings/components/third-party-apps-card.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ExternalLink, LoaderCircle, Save } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+
+import { useSettingsStore } from "../store";
+
+export function ThirdPartyAppsCard() {
+  const config = useSettingsStore((state) => state.config);
+  const isLoadingConfig = useSettingsStore((state) => state.isLoadingConfig);
+  const isSavingConfig = useSettingsStore((state) => state.isSavingConfig);
+  const setInfiniteCanvasField = useSettingsStore((state) => state.setInfiniteCanvasField);
+  const saveConfig = useSettingsStore((state) => state.saveConfig);
+
+  if (isLoadingConfig || !config?.third_party_apps) {
+    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 canvas = config.third_party_apps.infinite_canvas;
+
+  return (
+    <Card className="rounded-2xl border-white/80 bg-white/90 shadow-sm">
+      <CardContent className="space-y-5 p-6">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <div className="flex items-center gap-2 text-base font-semibold text-stone-900">
+              <ExternalLink className="size-5 text-stone-500" />
+              无限画布入口
+            </div>
+            <p className="mt-1 text-xs leading-6 text-stone-500">开启后会在顶部导航显示入口，跳转时自动附带本项目地址和当前密钥。</p>
+          </div>
+          <span className={`rounded-full px-3 py-1 text-xs ${canvas.enabled ? "bg-emerald-50 text-emerald-700" : "bg-stone-100 text-stone-500"}`}>
+            {canvas.enabled ? "已启用" : "未启用"}
+          </span>
+        </div>
+
+        <div className="space-y-4 rounded-xl border border-stone-200 bg-white px-4 py-3">
+          <label className="flex items-center gap-3 text-sm text-stone-700">
+            <Checkbox
+              checked={Boolean(canvas.enabled)}
+              onCheckedChange={(checked) => setInfiniteCanvasField("enabled", Boolean(checked))}
+            />
+            启用无限画布
+          </label>
+          <div className="space-y-2">
+            <label className="text-sm text-stone-700">无限画布地址</label>
+            <Input
+              value={canvas.url}
+              onChange={(event) => setInfiniteCanvasField("url", event.target.value)}
+              placeholder="https://canvas.best"
+              className="h-10 rounded-xl border-stone-200 bg-white"
+            />
+            <p className="text-xs leading-5 text-stone-500">
+              顶部入口跳转时会追加 apiKey 和 baseUrl 参数；关闭后顶部导航不显示无限画布。
+            </p>
+            <p className="text-xs leading-5 text-amber-700">
+              该入口仅供个人测试使用；长期使用建议自行本机部署无限画布。
+            </p>
+          </div>
+        </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>
+  );
+}

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

@@ -0,0 +1,422 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Ban, CheckCircle2, Copy, KeyRound, LoaderCircle, Pencil, Plus, Trash2 } 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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { createUserKey, deleteUserKey, fetchUserKeys, updateUserKey, type UserKey } from "@/lib/api";
+
+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);
+}
+
+export function UserKeysCard() {
+  const didLoadRef = useRef(false);
+  const [items, setItems] = useState<UserKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [pendingIds, setPendingIds] = useState<Set<string>>(() => new Set());
+  const [revealedKey, setRevealedKey] = useState("");
+  const [deletingItem, setDeletingItem] = useState<UserKey | null>(null);
+  const [editingItem, setEditingItem] = useState<UserKey | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editKey, setEditKey] = useState("");
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await fetchUserKeys();
+      setItems(data.items);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "加载用户密钥失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (didLoadRef.current) {
+      return;
+    }
+    didLoadRef.current = true;
+    void load();
+  }, []);
+
+  const handleCreate = async () => {
+    setIsCreating(true);
+    try {
+      const data = await createUserKey(name.trim());
+      setItems(data.items);
+      setRevealedKey(data.key);
+      setName("");
+      setIsDialogOpen(false);
+      toast.success("用户密钥已创建");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "创建用户密钥失败");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const setItemPending = (id: string, isPending: boolean) => {
+    setPendingIds((current) => {
+      const next = new Set(current);
+      if (isPending) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
+      return next;
+    });
+  };
+
+  const handleToggle = async (item: UserKey) => {
+    setItemPending(item.id, true);
+    try {
+      const data = await updateUserKey(item.id, { enabled: !item.enabled });
+      setItems(data.items);
+      toast.success(item.enabled ? "用户密钥已禁用" : "用户密钥已启用");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "更新用户密钥失败");
+    } finally {
+      setItemPending(item.id, false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deletingItem) {
+      return;
+    }
+    const item = deletingItem;
+    setItemPending(item.id, true);
+    try {
+      const data = await deleteUserKey(item.id);
+      setItems(data.items);
+      setDeletingItem(null);
+      toast.success("用户密钥已删除");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "删除用户密钥失败");
+    } finally {
+      setItemPending(item.id, false);
+    }
+  };
+
+  const openEditDialog = (item: UserKey) => {
+    setEditingItem(item);
+    setEditName(item.name);
+    setEditKey("");
+  };
+
+  const handleEdit = async () => {
+    if (!editingItem) {
+      return;
+    }
+    const item = editingItem;
+    const trimmedName = editName.trim();
+    const trimmedKey = editKey.trim();
+    if (trimmedName === item.name && !trimmedKey) {
+      setEditingItem(null);
+      return;
+    }
+    setItemPending(item.id, true);
+    try {
+      const data = await updateUserKey(item.id, {
+        ...(trimmedName !== item.name ? { name: trimmedName } : {}),
+        ...(trimmedKey ? { key: trimmedKey } : {}),
+      });
+      setItems(data.items);
+      setEditingItem(null);
+      setEditKey("");
+      toast.success(trimmedKey ? "用户密钥已更新" : "用户名称已更新");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "更新用户密钥失败");
+    } finally {
+      setItemPending(item.id, false);
+    }
+  };
+
+  const handleCopy = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success("已复制到剪贴板");
+    } catch {
+      toast.error("复制失败，请手动复制");
+    }
+  };
+
+  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">
+                <KeyRound className="size-5 text-stone-600" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold tracking-tight">用户密钥管理</h2>
+                <p className="text-sm text-stone-500">为普通用户创建专用密钥；普通用户只能进入画图页，不能查看设置和号池。</p>
+              </div>
+            </div>
+            <Button className="h-9 rounded-xl bg-stone-950 px-4 text-white hover:bg-stone-800" onClick={() => setIsDialogOpen(true)}>
+              <Plus className="size-4" />
+              创建用户密钥
+            </Button>
+          </div>
+
+          {revealedKey ? (
+            <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-4 text-sm text-emerald-900">
+              <div className="font-medium">新密钥仅展示一次，请立即保存：</div>
+              <div className="mt-3 flex flex-col gap-3 rounded-lg border border-emerald-200 bg-white/80 p-3 md:flex-row md:items-center md:justify-between">
+                <code className="break-all font-mono text-[13px]">{revealedKey}</code>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="h-9 rounded-xl border-emerald-200 bg-white px-4 text-emerald-700"
+                  onClick={() => void handleCopy(revealedKey)}
+                >
+                  <Copy className="size-4" />
+                  复制
+                </Button>
+              </div>
+            </div>
+          ) : null}
+
+          {isLoading ? (
+            <div className="flex items-center justify-center py-10">
+              <LoaderCircle className="size-5 animate-spin text-stone-400" />
+            </div>
+          ) : items.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">
+              {items.map((item) => {
+                const isPending = pendingIds.has(item.id);
+                return (
+                  <div key={item.id} 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="truncate text-sm font-medium text-stone-800">{item.name}</div>
+                        <Badge variant={item.enabled ? "success" : "secondary"} className="rounded-md">
+                          {item.enabled ? "已启用" : "已禁用"}
+                        </Badge>
+                      </div>
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-stone-500">
+                        <span>创建时间 {formatDateTime(item.created_at)}</span>
+                        <span>最近使用 {formatDateTime(item.last_used_at)}</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={() => openEditDialog(item)}
+                        disabled={isPending}
+                      >
+                        {isPending ? <LoaderCircle className="size-4 animate-spin" /> : <Pencil 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 handleToggle(item)}
+                        disabled={isPending}
+                      >
+                        {isPending ? (
+                          <LoaderCircle className="size-4 animate-spin" />
+                        ) : item.enabled ? (
+                          <Ban className="size-4" />
+                        ) : (
+                          <CheckCircle2 className="size-4" />
+                        )}
+                        {item.enabled ? "禁用" : "启用"}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="h-9 rounded-xl border-rose-200 bg-white px-4 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
+                        onClick={() => setDeletingItem(item)}
+                        disabled={isPending}
+                      >
+                        {isPending ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>创建用户密钥</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              可选填写一个备注名称，方便区分不同使用者；创建后会生成一条只能查看一次的原始密钥。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-stone-700">名称（可选）</label>
+            <Input
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="例如：设计同学 A、运营临时账号"
+              className="h-11 rounded-xl border-stone-200 bg-white"
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10 rounded-xl bg-stone-100 px-5 text-stone-700 hover:bg-stone-200"
+              onClick={() => setIsDialogOpen(false)}
+              disabled={isCreating}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+              onClick={() => void handleCreate()}
+              disabled={isCreating}
+            >
+              {isCreating ? <LoaderCircle className="size-4 animate-spin" /> : <Plus className="size-4" />}
+              创建
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={Boolean(deletingItem)} onOpenChange={(open) => (!open ? setDeletingItem(null) : null)}>
+        <DialogContent className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>删除用户密钥</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              确认删除用户密钥「{deletingItem?.name}」吗？删除后该密钥将无法继续调用接口。
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10 rounded-xl bg-stone-100 px-5 text-stone-700 hover:bg-stone-200"
+              onClick={() => setDeletingItem(null)}
+              disabled={deletingItem ? pendingIds.has(deletingItem.id) : false}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              className="h-10 rounded-xl bg-rose-600 px-5 text-white hover:bg-rose-700"
+              onClick={() => void handleDelete()}
+              disabled={deletingItem ? pendingIds.has(deletingItem.id) : false}
+            >
+              {deletingItem && pendingIds.has(deletingItem.id) ? <LoaderCircle className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
+              删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={Boolean(editingItem)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setEditingItem(null);
+            setEditKey("");
+          }
+        }}
+      >
+        <DialogContent className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>编辑用户密钥</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              可以修改备注名称；如需更换专用密钥，直接填写新的原始密钥即可。留空则保持当前密钥不变。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-stone-700">名称</label>
+              <Input
+                value={editName}
+                onChange={(event) => setEditName(event.target.value)}
+                placeholder="例如：设计同学 A、运营临时账号"
+                className="h-11 rounded-xl border-stone-200 bg-white"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-stone-700">新的专用密钥（可选）</label>
+              <Input
+                value={editKey}
+                onChange={(event) => setEditKey(event.target.value)}
+                placeholder="例如：sk-your-custom-user-key"
+                className="h-11 rounded-xl border-stone-200 bg-white font-mono"
+              />
+              <p className="text-xs leading-5 text-stone-500">
+                保存后旧密钥会立即失效，新密钥生效。系统仍只保存哈希，不会回显当前密钥。
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10 rounded-xl bg-stone-100 px-5 text-stone-700 hover:bg-stone-200"
+              onClick={() => {
+                setEditingItem(null);
+                setEditKey("");
+              }}
+              disabled={editingItem ? pendingIds.has(editingItem.id) : false}
+            >
+              取消
+            </Button>
+            <Button
+              type="button"
+              className="h-10 rounded-xl bg-stone-950 px-5 text-white hover:bg-stone-800"
+              onClick={() => void handleEdit()}
+              disabled={editingItem ? pendingIds.has(editingItem.id) : false}
+            >
+              {editingItem && pendingIds.has(editingItem.id) ? <LoaderCircle className="size-4 animate-spin" /> : <Pencil className="size-4" />}
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/vendor/chatgpt2api/source/web/src/app/settings/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { LoaderCircle } from "lucide-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useAuthGuard } from "@/lib/use-auth-guard";
+
+import { BackupSettingsCard } from "./components/backup-settings-card";
+import { ApiDocsCard } from "./components/api-docs-card";
+import { ConfigCard } from "./components/config-card";
+import { CPAPoolDialog } from "./components/cpa-pool-dialog";
+import { CPAPoolsCard } from "./components/cpa-pools-card";
+import { ImportBrowserDialog } from "./components/import-browser-dialog";
+import { ProxyRuntimeCard } from "./components/proxy-runtime-card";
+import { SettingsHeader } from "./components/settings-header";
+import { Sub2APIConnections } from "./components/sub2api-connections";
+import { ThirdPartyAppsCard } from "./components/third-party-apps-card";
+import { UserKeysCard } from "./components/user-keys-card";
+import { useSettingsStore } from "./store";
+
+const settingsTabs = [
+  { value: "basic", title: "基础配置" },
+  { value: "backup", title: "备份" },
+  { value: "keys", title: "用户密钥" },
+  { value: "api-docs", title: "接口接入" },
+  { value: "canvas", title: "画布入口" },
+  { value: "proxy", title: "FlareSolverr" },
+  { value: "cpa", title: "CPA" },
+  { value: "sub2api", title: "Sub2API" },
+];
+
+function SettingsDataController() {
+  const didLoadRef = useRef(false);
+  const initialize = useSettingsStore((state) => state.initialize);
+  const loadPools = useSettingsStore((state) => state.loadPools);
+  const loadBackups = useSettingsStore((state) => state.loadBackups);
+  const pools = useSettingsStore((state) => state.pools);
+  const backupState = useSettingsStore((state) => state.backupState);
+
+  useEffect(() => {
+    if (didLoadRef.current) {
+      return;
+    }
+    didLoadRef.current = true;
+    void initialize();
+  }, [initialize]);
+
+  useEffect(() => {
+    const hasRunningJobs = pools.some((pool) => {
+      const status = pool.import_job?.status;
+      return status === "pending" || status === "running";
+    });
+    if (!hasRunningJobs) {
+      return;
+    }
+
+    const timer = window.setInterval(() => {
+      void loadPools(true);
+    }, 1500);
+    return () => window.clearInterval(timer);
+  }, [loadPools, pools]);
+
+  useEffect(() => {
+    if (!backupState?.running) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      void loadBackups(true);
+    }, 3000);
+    return () => window.clearInterval(timer);
+  }, [backupState?.running, loadBackups]);
+
+  return null;
+}
+
+function SettingsPageContent() {
+  return (
+    <>
+      <SettingsDataController />
+      <SettingsHeader />
+      <Tabs defaultValue="basic" className="space-y-4">
+        <div className="sticky top-3 z-20 overflow-x-auto rounded-xl border border-white/80 bg-white/90 px-3 py-2 shadow-sm backdrop-blur">
+          <TabsList variant="line" className="min-w-max justify-start">
+            {settingsTabs.map((tab) => (
+              <TabsTrigger key={tab.value} value={tab.value} className="px-4">
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+        <TabsContent value="basic">
+          <ConfigCard />
+        </TabsContent>
+        <TabsContent value="proxy">
+          <ProxyRuntimeCard />
+        </TabsContent>
+        <TabsContent value="backup">
+          <BackupSettingsCard />
+        </TabsContent>
+        <TabsContent value="keys">
+          <UserKeysCard />
+        </TabsContent>
+        <TabsContent value="canvas">
+          <ThirdPartyAppsCard />
+        </TabsContent>
+        <TabsContent value="api-docs">
+          <ApiDocsCard />
+        </TabsContent>
+        <TabsContent value="cpa">
+          <CPAPoolsCard />
+        </TabsContent>
+        <TabsContent value="sub2api">
+          <Sub2APIConnections />
+        </TabsContent>
+      </Tabs>
+      <CPAPoolDialog />
+      <ImportBrowserDialog />
+    </>
+  );
+}
+
+export default function SettingsPage() {
+  const { isCheckingAuth, session } = useAuthGuard(["admin"]);
+
+  if (isCheckingAuth || !session || session.role !== "admin") {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center">
+        <LoaderCircle className="size-5 animate-spin text-stone-400" />
+      </div>
+    );
+  }
+
+  return <SettingsPageContent />;
+}