dsh-plugin-image-workbench 1.1.5 → 1.1.7

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

@@ -1,356 +1,356 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { ChevronLeft, ChevronRight, ImageIcon, LoaderCircle, RefreshCw, Search, Trash2 } from "lucide-react";
-import { toast } from "sonner";
-
-import { DateRangeFilter } from "@/components/date-range-filter";
-import { ImageLightbox } from "@/components/image-lightbox";
-import { ImageThumbnail, getImageThumbnailUrl } from "@/components/image-thumbnail";
-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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { deleteSystemLogs, fetchSystemLogs, type SystemLog } from "@/lib/api";
-import { useAuthGuard } from "@/lib/use-auth-guard";
-
-const LogType = {
-  Call: "call",
-  Account: "account",
-} as const;
-
-const typeLabels: Record<string, string> = {
-  [LogType.Call]: "调用日志",
-  [LogType.Account]: "账号管理日志",
-};
-
-function getDetailText(item: SystemLog, key: string) {
-  const value = item.detail?.[key];
-  return typeof value === "string" || typeof value === "number" ? String(value) : "-";
-}
-
-function formatDuration(item: SystemLog) {
-  const value = item.detail?.duration_ms;
-  return typeof value === "number" ? `${(value / 1000).toFixed(2)} s` : "-";
-}
-
-function getUrls(item: SystemLog | null) {
-  const urls = item?.detail?.urls;
-  return Array.isArray(urls) ? urls.filter((url): url is string => typeof url === "string") : [];
-}
-
-function getStatus(item: SystemLog) {
-  const status = item.detail?.status;
-  if (status === "success") return "成功";
-  if (status === "failed") return "失败";
-  return "-";
-}
-
-function LogsContent() {
-  const [items, setItems] = useState<SystemLog[]>([]);
-  const [type, setType] = useState<string>(LogType.Call);
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [detailLog, setDetailLog] = useState<SystemLog | null>(null);
-  const [detailOpen, setDetailOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [page, setPage] = useState(1);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  const [deletingItems, setDeletingItems] = useState<SystemLog[]>([]);
-  const detailUrls = getUrls(detailLog);
-  const detailImages = detailUrls.map((url, index) => ({ id: `${index}`, src: url }));
-  const isCallLog = type === LogType.Call;
-  const pageSize = 10;
-  const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
-  const safePage = Math.min(page, pageCount);
-  const currentRows = items.slice((safePage - 1) * pageSize, safePage * pageSize);
-  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
-  const currentPageSelected = currentRows.length > 0 && currentRows.every((item) => selectedSet.has(item.id));
-  const allSelected = items.length > 0 && items.every((item) => selectedSet.has(item.id));
-
-  const loadLogs = async () => {
-    setIsLoading(true);
-    try {
-      const data = await fetchSystemLogs({ type, start_date: startDate, end_date: endDate });
-      setItems(data.items);
-      setSelectedIds((current) => current.filter((id) => data.items.some((item) => item.id === id)));
-      setPage(1);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "加载日志失败");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const clearFilters = () => {
-    setStartDate("");
-    setEndDate("");
-  };
-
-  const openDetail = (item: SystemLog) => {
-    setDetailLog(item);
-    setDetailOpen(true);
-  };
-
-  const openLogImage = (item: SystemLog, index: number) => {
-    setDetailLog(item);
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  };
-
-  const toggleIds = (ids: string[], checked: boolean) => {
-    setSelectedIds((current) => checked ? Array.from(new Set([...current, ...ids])) : current.filter((id) => !ids.includes(id)));
-  };
-
-  const confirmDelete = async () => {
-    const ids = deletingItems.map((item) => item.id);
-    if (ids.length === 0) return;
-    setIsDeleting(true);
-    try {
-      const data = await deleteSystemLogs(ids);
-      toast.success(`已删除 ${data.removed} 条日志`);
-      setDeletingItems([]);
-      setSelectedIds((current) => current.filter((id) => !ids.includes(id)));
-      if (detailLog && ids.includes(detailLog.id)) {
-        setDetailOpen(false);
-        setDetailLog(null);
-      }
-      await loadLogs();
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "删除日志失败");
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  useEffect(() => {
-    void loadLogs();
-  }, [type, startDate, endDate]);
-
-  return (
-    <section className="space-y-5">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-1">
-          <div className="text-xs font-semibold tracking-[0.18em] text-stone-500 uppercase">Logs</div>
-          <h1 className="text-2xl font-semibold tracking-tight">日志管理</h1>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Select value={type} onValueChange={setType}>
-            <SelectTrigger className="h-10 w-[150px] rounded-xl border-stone-200 bg-white"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value={LogType.Call}>调用日志</SelectItem>
-              <SelectItem value={LogType.Account}>账号管理日志</SelectItem>
-            </SelectContent>
-          </Select>
-          <DateRangeFilter startDate={startDate} endDate={endDate} onChange={(start, end) => { setStartDate(start); setEndDate(end); }} />
-          <Button variant="outline" onClick={clearFilters} className="h-10 rounded-xl border-stone-200 bg-white px-4 text-stone-700">
-            清除筛选条件
-          </Button>
-          <Button onClick={() => void loadLogs()} disabled={isLoading} className="h-10 rounded-xl bg-stone-950 px-4 text-white hover:bg-stone-800">
-            {isLoading ? <LoaderCircle className="size-4 animate-spin" /> : <Search className="size-4" />}
-            查询
-          </Button>
-        </div>
-      </div>
-
-      <Card className="overflow-hidden rounded-2xl border-white/80 bg-white/90 shadow-sm">
-        <CardContent className="p-0">
-          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-stone-100 px-5 py-4">
-            <div className="flex flex-wrap items-center gap-3 text-sm text-stone-600">
-              <span>共 {items.length} 条</span>
-              <label className="flex items-center gap-2">
-                <Checkbox checked={currentPageSelected} onCheckedChange={(checked) => toggleIds(currentRows.map((item) => item.id), Boolean(checked))} />
-                本页全选
-              </label>
-              <label className="flex items-center gap-2">
-                <Checkbox checked={allSelected} onCheckedChange={(checked) => toggleIds(items.map((item) => item.id), Boolean(checked))} />
-                全选结果
-              </label>
-              {selectedIds.length > 0 ? <span>已选 {selectedIds.length} 条</span> : null}
-            </div>
-            <div className="flex items-center gap-2">
-              <Button variant="ghost" className="h-8 rounded-lg px-3 text-stone-500" onClick={() => void loadLogs()} disabled={isLoading}>
-                <RefreshCw className={`size-4 ${isLoading ? "animate-spin" : ""}`} />
-                刷新
-              </Button>
-              <button type="button" className="text-sm text-stone-500 hover:text-stone-900 disabled:text-stone-300" onClick={() => setSelectedIds([])} disabled={selectedIds.length === 0 || isDeleting}>
-                取消选择
-              </button>
-              <Button variant="outline" className="h-8 rounded-lg border-rose-200 bg-white px-3 text-rose-600 hover:bg-rose-50" onClick={() => setDeletingItems(items.filter((item) => selectedSet.has(item.id)))} disabled={selectedIds.length === 0 || isDeleting}>
-                <Trash2 className="size-4" />
-                删除所选
-              </Button>
-            </div>
-          </div>
-          <div className="overflow-x-auto">
-            <Table className="min-w-[900px]">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-12"></TableHead>
-                  <TableHead>时间</TableHead>
-                  <TableHead>类型</TableHead>
-                  {isCallLog ? <TableHead>令牌名称</TableHead> : null}
-                  {isCallLog ? <TableHead>调用耗时</TableHead> : null}
-                  {isCallLog ? <TableHead>状态</TableHead> : null}
-                  {isCallLog ? <TableHead className="w-36">图片</TableHead> : null}
-                  <TableHead>简述</TableHead>
-                  <TableHead className="w-40">操作</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {currentRows.map((item) => {
-                  const urls = getUrls(item);
-                  return (
-                    <TableRow key={item.id} className="text-stone-600">
-                      <TableCell>
-                        <Checkbox checked={selectedSet.has(item.id)} onCheckedChange={(checked) => toggleIds([item.id], Boolean(checked))} />
-                      </TableCell>
-                      <TableCell className="whitespace-nowrap">{item.time}</TableCell>
-                      <TableCell><Badge variant="secondary" className="rounded-md">{typeLabels[item.type] || item.type}</Badge></TableCell>
-                      {isCallLog ? <TableCell>{getDetailText(item, "key_name")}</TableCell> : null}
-                      {isCallLog ? <TableCell>{formatDuration(item)}</TableCell> : null}
-                      {isCallLog ? (
-                        <TableCell>
-                          <Badge variant={item.detail?.status === "failed" ? "danger" : "success"} className="rounded-md">
-                            {getStatus(item)}
-                          </Badge>
-                        </TableCell>
-                      ) : null}
-                      {isCallLog ? (
-                        <TableCell>
-                          {urls.length ? (
-                            <div className="flex items-center gap-1.5">
-                              {urls.slice(0, 3).map((url, imageIndex) => (
-                                <button
-                                  key={`${url}-${imageIndex}`}
-                                  type="button"
-                                  className="relative size-9 overflow-hidden rounded-lg border border-stone-200 bg-stone-100"
-                                  onClick={() => openLogImage(item, imageIndex)}
-                                  title="预览图片"
-                                >
-                                  <ImageThumbnail src={url} thumbnailSrc={getImageThumbnailUrl(url)} className="h-full w-full" />
-                                </button>
-                              ))}
-                              {urls.length > 3 ? <span className="text-xs text-stone-400">+{urls.length - 3}</span> : null}
-                            </div>
-                          ) : (
-                            <span className="inline-flex items-center gap-1 text-xs text-stone-400">
-                              <ImageIcon className="size-3.5" />
-                              -
-                            </span>
-                          )}
-                        </TableCell>
-                      ) : null}
-                      <TableCell className="max-w-[420px] truncate text-stone-500">{item.summary || "-"}</TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-1">
-                          <Button variant="ghost" className="h-8 rounded-lg px-3 text-stone-600" onClick={() => openDetail(item)}>
-                            查看详情
-                          </Button>
-                          <Button variant="ghost" className="h-8 rounded-lg px-3 text-rose-600 hover:bg-rose-50 hover:text-rose-700" onClick={() => setDeletingItems([item])}>
-                            删除
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-          <div className="flex items-center justify-end gap-2 border-t border-stone-100 px-4 py-3 text-sm text-stone-500">
-            <span>第 {safePage} / {pageCount} 页，共 {items.length} 条</span>
-            <Button variant="outline" size="icon" className="size-9 rounded-lg border-stone-200 bg-white" disabled={safePage <= 1} onClick={() => setPage((value) => Math.max(1, value - 1))}>
-              <ChevronLeft className="size-4" />
-            </Button>
-            <Button variant="outline" size="icon" className="size-9 rounded-lg border-stone-200 bg-white" disabled={safePage >= pageCount} onClick={() => setPage((value) => Math.min(pageCount, value + 1))}>
-              <ChevronRight className="size-4" />
-            </Button>
-          </div>
-          {!isLoading && items.length === 0 ? <div className="px-6 py-14 text-center text-sm text-stone-500">没有找到日志</div> : null}
-        </CardContent>
-      </Card>
-      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="flex h-[min(88vh,860px)] w-[min(92vw,920px)] flex-col overflow-hidden rounded-2xl p-0">
-          <DialogHeader className="shrink-0 border-b border-stone-100 px-6 py-5">
-            <DialogTitle>日志详情</DialogTitle>
-          </DialogHeader>
-          <div className="flex-1 overflow-y-auto px-6 py-5">
-            <div className="space-y-4">
-              <div className="grid gap-3 rounded-xl border border-stone-200 bg-white p-4 text-sm text-stone-600 md:grid-cols-2">
-                {Object.entries(detailLog?.detail || {})
-                  .filter(([key, value]) => key !== "urls" && typeof value !== "object")
-                  .map(([key, value]) => (
-                    <div key={key} className="flex items-start justify-between gap-4">
-                      <span className="text-stone-400">{key}</span>
-                      <span className="text-right font-medium break-all text-stone-700">{String(value)}</span>
-                    </div>
-                  ))}
-              </div>
-              {detailUrls.length ? (
-                <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
-                  {detailUrls.map((url, index) => (
-                    <button
-                      key={url}
-                      type="button"
-                      className="aspect-square overflow-hidden rounded-xl border border-stone-200 bg-stone-100"
-                      onClick={() => {
-                        setLightboxIndex(index);
-                        setLightboxOpen(true);
-                      }}
-                    >
-                      <img src={url} alt="" className="h-full w-full object-cover" />
-                    </button>
-                  ))}
-                </div>
-              ) : null}
-              <pre className="max-h-[72vh] overflow-auto rounded-xl border border-stone-200 bg-stone-50 p-4 text-xs leading-6 text-stone-700">
-                {JSON.stringify(detailLog?.detail || {}, null, 2)}
-              </pre>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-      <ImageLightbox
-        images={detailImages}
-        currentIndex={lightboxIndex}
-        open={lightboxOpen}
-        onOpenChange={setLightboxOpen}
-        onIndexChange={setLightboxIndex}
-      />
-      <Dialog open={deletingItems.length > 0} onOpenChange={(open) => (!open ? setDeletingItems([]) : null)}>
-        <DialogContent showCloseButton={false} className="rounded-2xl p-6">
-          <DialogHeader className="gap-2">
-            <DialogTitle>{deletingItems.length === 1 ? "删除日志" : "删除所选日志"}</DialogTitle>
-            <DialogDescription className="text-sm leading-6">
-              确认删除 {deletingItems.length} 条日志吗？删除后无法恢复。
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" className="rounded-xl" onClick={() => setDeletingItems([])} disabled={isDeleting}>
-              取消
-            </Button>
-            <Button className="rounded-xl bg-rose-600 text-white hover:bg-rose-700" onClick={() => void confirmDelete()} disabled={isDeleting || deletingItems.length === 0}>
-              {isDeleting ? <LoaderCircle className="size-4 animate-spin" /> : null}
-              确认删除
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </section>
-  );
-}
-
-export default function LogsPage() {
-  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 <LogsContent />;
-}
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight, ImageIcon, LoaderCircle, RefreshCw, Search, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { DateRangeFilter } from "@/components/date-range-filter";
+import { ImageLightbox } from "@/components/image-lightbox";
+import { ImageThumbnail, getImageThumbnailUrl } from "@/components/image-thumbnail";
+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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { deleteSystemLogs, fetchSystemLogs, type SystemLog } from "@/lib/api";
+import { useAuthGuard } from "@/lib/use-auth-guard";
+
+const LogType = {
+  Call: "call",
+  Account: "account",
+} as const;
+
+const typeLabels: Record<string, string> = {
+  [LogType.Call]: "调用日志",
+  [LogType.Account]: "账号管理日志",
+};
+
+function getDetailText(item: SystemLog, key: string) {
+  const value = item.detail?.[key];
+  return typeof value === "string" || typeof value === "number" ? String(value) : "-";
+}
+
+function formatDuration(item: SystemLog) {
+  const value = item.detail?.duration_ms;
+  return typeof value === "number" ? `${(value / 1000).toFixed(2)} s` : "-";
+}
+
+function getUrls(item: SystemLog | null) {
+  const urls = item?.detail?.urls;
+  return Array.isArray(urls) ? urls.filter((url): url is string => typeof url === "string") : [];
+}
+
+function getStatus(item: SystemLog) {
+  const status = item.detail?.status;
+  if (status === "success") return "成功";
+  if (status === "failed") return "失败";
+  return "-";
+}
+
+function LogsContent() {
+  const [items, setItems] = useState<SystemLog[]>([]);
+  const [type, setType] = useState<string>(LogType.Call);
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [detailLog, setDetailLog] = useState<SystemLog | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [deletingItems, setDeletingItems] = useState<SystemLog[]>([]);
+  const detailUrls = getUrls(detailLog);
+  const detailImages = detailUrls.map((url, index) => ({ id: `${index}`, src: url }));
+  const isCallLog = type === LogType.Call;
+  const pageSize = 10;
+  const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
+  const safePage = Math.min(page, pageCount);
+  const currentRows = items.slice((safePage - 1) * pageSize, safePage * pageSize);
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const currentPageSelected = currentRows.length > 0 && currentRows.every((item) => selectedSet.has(item.id));
+  const allSelected = items.length > 0 && items.every((item) => selectedSet.has(item.id));
+
+  const loadLogs = async () => {
+    setIsLoading(true);
+    try {
+      const data = await fetchSystemLogs({ type, start_date: startDate, end_date: endDate });
+      setItems(data.items);
+      setSelectedIds((current) => current.filter((id) => data.items.some((item) => item.id === id)));
+      setPage(1);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "加载日志失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const clearFilters = () => {
+    setStartDate("");
+    setEndDate("");
+  };
+
+  const openDetail = (item: SystemLog) => {
+    setDetailLog(item);
+    setDetailOpen(true);
+  };
+
+  const openLogImage = (item: SystemLog, index: number) => {
+    setDetailLog(item);
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  };
+
+  const toggleIds = (ids: string[], checked: boolean) => {
+    setSelectedIds((current) => checked ? Array.from(new Set([...current, ...ids])) : current.filter((id) => !ids.includes(id)));
+  };
+
+  const confirmDelete = async () => {
+    const ids = deletingItems.map((item) => item.id);
+    if (ids.length === 0) return;
+    setIsDeleting(true);
+    try {
+      const data = await deleteSystemLogs(ids);
+      toast.success(`已删除 ${data.removed} 条日志`);
+      setDeletingItems([]);
+      setSelectedIds((current) => current.filter((id) => !ids.includes(id)));
+      if (detailLog && ids.includes(detailLog.id)) {
+        setDetailOpen(false);
+        setDetailLog(null);
+      }
+      await loadLogs();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "删除日志失败");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadLogs();
+  }, [type, startDate, endDate]);
+
+  return (
+    <section className="space-y-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div className="space-y-1">
+          <div className="text-xs font-semibold tracking-[0.18em] text-stone-500 uppercase">Logs</div>
+          <h1 className="text-2xl font-semibold tracking-tight">日志管理</h1>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Select value={type} onValueChange={setType}>
+            <SelectTrigger className="h-10 w-[150px] rounded-xl border-stone-200 bg-white"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value={LogType.Call}>调用日志</SelectItem>
+              <SelectItem value={LogType.Account}>账号管理日志</SelectItem>
+            </SelectContent>
+          </Select>
+          <DateRangeFilter startDate={startDate} endDate={endDate} onChange={(start, end) => { setStartDate(start); setEndDate(end); }} />
+          <Button variant="outline" onClick={clearFilters} className="h-10 rounded-xl border-stone-200 bg-white px-4 text-stone-700">
+            清除筛选条件
+          </Button>
+          <Button onClick={() => void loadLogs()} disabled={isLoading} className="h-10 rounded-xl bg-stone-950 px-4 text-white hover:bg-stone-800">
+            {isLoading ? <LoaderCircle className="size-4 animate-spin" /> : <Search className="size-4" />}
+            查询
+          </Button>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden rounded-2xl border-white/80 bg-white/90 shadow-sm">
+        <CardContent className="p-0">
+          <div className="flex flex-wrap items-center justify-between gap-3 border-b border-stone-100 px-5 py-4">
+            <div className="flex flex-wrap items-center gap-3 text-sm text-stone-600">
+              <span>共 {items.length} 条</span>
+              <label className="flex items-center gap-2">
+                <Checkbox checked={currentPageSelected} onCheckedChange={(checked) => toggleIds(currentRows.map((item) => item.id), Boolean(checked))} />
+                本页全选
+              </label>
+              <label className="flex items-center gap-2">
+                <Checkbox checked={allSelected} onCheckedChange={(checked) => toggleIds(items.map((item) => item.id), Boolean(checked))} />
+                全选结果
+              </label>
+              {selectedIds.length > 0 ? <span>已选 {selectedIds.length} 条</span> : null}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" className="h-8 rounded-lg px-3 text-stone-500" onClick={() => void loadLogs()} disabled={isLoading}>
+                <RefreshCw className={`size-4 ${isLoading ? "animate-spin" : ""}`} />
+                刷新
+              </Button>
+              <button type="button" className="text-sm text-stone-500 hover:text-stone-900 disabled:text-stone-300" onClick={() => setSelectedIds([])} disabled={selectedIds.length === 0 || isDeleting}>
+                取消选择
+              </button>
+              <Button variant="outline" className="h-8 rounded-lg border-rose-200 bg-white px-3 text-rose-600 hover:bg-rose-50" onClick={() => setDeletingItems(items.filter((item) => selectedSet.has(item.id)))} disabled={selectedIds.length === 0 || isDeleting}>
+                <Trash2 className="size-4" />
+                删除所选
+              </Button>
+            </div>
+          </div>
+          <div className="overflow-x-auto">
+            <Table className="min-w-[900px]">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-12"></TableHead>
+                  <TableHead>时间</TableHead>
+                  <TableHead>类型</TableHead>
+                  {isCallLog ? <TableHead>令牌名称</TableHead> : null}
+                  {isCallLog ? <TableHead>调用耗时</TableHead> : null}
+                  {isCallLog ? <TableHead>状态</TableHead> : null}
+                  {isCallLog ? <TableHead className="w-36">图片</TableHead> : null}
+                  <TableHead>简述</TableHead>
+                  <TableHead className="w-40">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {currentRows.map((item) => {
+                  const urls = getUrls(item);
+                  return (
+                    <TableRow key={item.id} className="text-stone-600">
+                      <TableCell>
+                        <Checkbox checked={selectedSet.has(item.id)} onCheckedChange={(checked) => toggleIds([item.id], Boolean(checked))} />
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap">{item.time}</TableCell>
+                      <TableCell><Badge variant="secondary" className="rounded-md">{typeLabels[item.type] || item.type}</Badge></TableCell>
+                      {isCallLog ? <TableCell>{getDetailText(item, "key_name")}</TableCell> : null}
+                      {isCallLog ? <TableCell>{formatDuration(item)}</TableCell> : null}
+                      {isCallLog ? (
+                        <TableCell>
+                          <Badge variant={item.detail?.status === "failed" ? "danger" : "success"} className="rounded-md">
+                            {getStatus(item)}
+                          </Badge>
+                        </TableCell>
+                      ) : null}
+                      {isCallLog ? (
+                        <TableCell>
+                          {urls.length ? (
+                            <div className="flex items-center gap-1.5">
+                              {urls.slice(0, 3).map((url, imageIndex) => (
+                                <button
+                                  key={`${url}-${imageIndex}`}
+                                  type="button"
+                                  className="relative size-9 overflow-hidden rounded-lg border border-stone-200 bg-stone-100"
+                                  onClick={() => openLogImage(item, imageIndex)}
+                                  title="预览图片"
+                                >
+                                  <ImageThumbnail src={url} thumbnailSrc={getImageThumbnailUrl(url)} className="h-full w-full" />
+                                </button>
+                              ))}
+                              {urls.length > 3 ? <span className="text-xs text-stone-400">+{urls.length - 3}</span> : null}
+                            </div>
+                          ) : (
+                            <span className="inline-flex items-center gap-1 text-xs text-stone-400">
+                              <ImageIcon className="size-3.5" />
+                              -
+                            </span>
+                          )}
+                        </TableCell>
+                      ) : null}
+                      <TableCell className="max-w-[420px] truncate text-stone-500">{item.summary || "-"}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-1">
+                          <Button variant="ghost" className="h-8 rounded-lg px-3 text-stone-600" onClick={() => openDetail(item)}>
+                            查看详情
+                          </Button>
+                          <Button variant="ghost" className="h-8 rounded-lg px-3 text-rose-600 hover:bg-rose-50 hover:text-rose-700" onClick={() => setDeletingItems([item])}>
+                            删除
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+          <div className="flex items-center justify-end gap-2 border-t border-stone-100 px-4 py-3 text-sm text-stone-500">
+            <span>第 {safePage} / {pageCount} 页，共 {items.length} 条</span>
+            <Button variant="outline" size="icon" className="size-9 rounded-lg border-stone-200 bg-white" disabled={safePage <= 1} onClick={() => setPage((value) => Math.max(1, value - 1))}>
+              <ChevronLeft className="size-4" />
+            </Button>
+            <Button variant="outline" size="icon" className="size-9 rounded-lg border-stone-200 bg-white" disabled={safePage >= pageCount} onClick={() => setPage((value) => Math.min(pageCount, value + 1))}>
+              <ChevronRight className="size-4" />
+            </Button>
+          </div>
+          {!isLoading && items.length === 0 ? <div className="px-6 py-14 text-center text-sm text-stone-500">没有找到日志</div> : null}
+        </CardContent>
+      </Card>
+      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
+        <DialogContent className="flex h-[min(88vh,860px)] w-[min(92vw,920px)] flex-col overflow-hidden rounded-2xl p-0">
+          <DialogHeader className="shrink-0 border-b border-stone-100 px-6 py-5">
+            <DialogTitle>日志详情</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto px-6 py-5">
+            <div className="space-y-4">
+              <div className="grid gap-3 rounded-xl border border-stone-200 bg-white p-4 text-sm text-stone-600 md:grid-cols-2">
+                {Object.entries(detailLog?.detail || {})
+                  .filter(([key, value]) => key !== "urls" && typeof value !== "object")
+                  .map(([key, value]) => (
+                    <div key={key} className="flex items-start justify-between gap-4">
+                      <span className="text-stone-400">{key}</span>
+                      <span className="text-right font-medium break-all text-stone-700">{String(value)}</span>
+                    </div>
+                  ))}
+              </div>
+              {detailUrls.length ? (
+                <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
+                  {detailUrls.map((url, index) => (
+                    <button
+                      key={url}
+                      type="button"
+                      className="aspect-square overflow-hidden rounded-xl border border-stone-200 bg-stone-100"
+                      onClick={() => {
+                        setLightboxIndex(index);
+                        setLightboxOpen(true);
+                      }}
+                    >
+                      <img src={url} alt="" className="h-full w-full object-cover" />
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+              <pre className="max-h-[72vh] overflow-auto rounded-xl border border-stone-200 bg-stone-50 p-4 text-xs leading-6 text-stone-700">
+                {JSON.stringify(detailLog?.detail || {}, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+      <ImageLightbox
+        images={detailImages}
+        currentIndex={lightboxIndex}
+        open={lightboxOpen}
+        onOpenChange={setLightboxOpen}
+        onIndexChange={setLightboxIndex}
+      />
+      <Dialog open={deletingItems.length > 0} onOpenChange={(open) => (!open ? setDeletingItems([]) : null)}>
+        <DialogContent showCloseButton={false} className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>{deletingItems.length === 1 ? "删除日志" : "删除所选日志"}</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              确认删除 {deletingItems.length} 条日志吗？删除后无法恢复。
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" className="rounded-xl" onClick={() => setDeletingItems([])} disabled={isDeleting}>
+              取消
+            </Button>
+            <Button className="rounded-xl bg-rose-600 text-white hover:bg-rose-700" onClick={() => void confirmDelete()} disabled={isDeleting || deletingItems.length === 0}>
+              {isDeleting ? <LoaderCircle className="size-4 animate-spin" /> : null}
+              确认删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+}
+
+export default function LogsPage() {
+  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 <LogsContent />;
+}