feat: add image thumbnails in manager and logs

api/system.py

@@ -6,7 +6,7 @@ from pydantic import BaseModel, ConfigDict
 
 from api.support import require_admin, require_identity, resolve_image_base_url
 from services.config import config
-from services.image_service import delete_images, list_images
+from services.image_service import delete_images, get_thumbnail_response, list_images
 from services.log_service import log_service
 from services.proxy_service import test_proxy
 
@@ -59,6 +59,10 @@ def create_router(app_version: str) -> APIRouter:
         require_admin(authorization)
         return list_images(resolve_image_base_url(request), start_date=start_date.strip(), end_date=end_date.strip())
 
+    @router.get("/image-thumbnails/{image_path:path}", include_in_schema=False)
+    async def get_image_thumbnail(image_path: str):
+        return get_thumbnail_response(image_path)
+
     @router.post("/api/images/delete")
     async def delete_images_endpoint(body: ImageDeleteRequest, authorization: str | None = Header(default=None)):
         require_admin(authorization)

services/config.py

@@ -138,6 +138,12 @@ class ConfigStore:
         path.mkdir(parents=True, exist_ok=True)
         return path
 
+    @property
+    def image_thumbnails_dir(self) -> Path:
+        path = DATA_DIR / "image_thumbnails"
+        path.mkdir(parents=True, exist_ok=True)
+        return path
+
     def cleanup_old_images(self) -> int:
         cutoff = time.time() - self.image_retention_days * 86400
         removed = 0

services/image_service.py

@@ -1,9 +1,105 @@
 from __future__ import annotations
 
 from datetime import datetime
+from pathlib import Path
+
+from fastapi import HTTPException
+from fastapi.responses import FileResponse
+from PIL import Image, ImageOps
 
 from services.config import config
 
+THUMBNAIL_SIZE = (320, 320)
+
+
+def _cleanup_empty_dirs(root: Path) -> None:
+    for path in sorted((p for p in root.rglob("*") if p.is_dir()), key=lambda p: len(p.parts), reverse=True):
+        try:
+            path.rmdir()
+        except OSError:
+            pass
+
+
+def _safe_relative_path(path: str) -> str:
+    value = str(path or "").strip().replace("\\", "/").lstrip("/")
+    if not value:
+        raise HTTPException(status_code=404, detail="image not found")
+    parts = Path(value).parts
+    if any(part in {"", ".", ".."} for part in parts):
+        raise HTTPException(status_code=404, detail="image not found")
+    return Path(*parts).as_posix()
+
+
+def _safe_image_path(relative_path: str) -> Path:
+    rel = _safe_relative_path(relative_path)
+    root = config.images_dir.resolve()
+    path = (root / rel).resolve()
+    try:
+        path.relative_to(root)
+    except ValueError as exc:
+        raise HTTPException(status_code=404, detail="image not found") from exc
+    if not path.is_file():
+        raise HTTPException(status_code=404, detail="image not found")
+    return path
+
+
+def _thumbnail_path(relative_path: str) -> Path:
+    rel = _safe_relative_path(relative_path)
+    return config.image_thumbnails_dir / rel
+
+
+def thumbnail_url(base_url: str, relative_path: str) -> str:
+    return f"{base_url.rstrip('/')}/image-thumbnails/{_safe_relative_path(relative_path)}"
+
+
+def _image_dimensions(path: Path) -> tuple[int, int] | None:
+    try:
+        with Image.open(path) as image:
+            return image.size
+    except Exception:
+        return None
+
+
+def ensure_thumbnail(relative_path: str) -> Path:
+    source = _safe_image_path(relative_path)
+    target = _thumbnail_path(relative_path)
+    source_mtime = source.stat().st_mtime
+    if target.exists() and target.stat().st_mtime >= source_mtime:
+        return target
+
+    target.parent.mkdir(parents=True, exist_ok=True)
+    try:
+        with Image.open(source) as image:
+            image = ImageOps.exif_transpose(image)
+            if image.mode not in {"RGB", "RGBA"}:
+                image = image.convert("RGBA" if "A" in image.getbands() else "RGB")
+            image.thumbnail(THUMBNAIL_SIZE, Image.Resampling.LANCZOS)
+            image.save(target, format="PNG", optimize=True)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=422, detail="failed to create thumbnail") from exc
+    return target
+
+
+def get_thumbnail_response(relative_path: str) -> FileResponse:
+    return FileResponse(ensure_thumbnail(relative_path))
+
+
+def cleanup_image_thumbnails() -> int:
+    thumbnails_root = config.image_thumbnails_dir
+    images_root = config.images_dir
+    removed = 0
+    for path in thumbnails_root.rglob("*"):
+        if not path.is_file():
+            continue
+        rel = path.relative_to(thumbnails_root)
+        if not (images_root / rel).exists():
+            path.unlink()
+            removed += 1
+    _cleanup_empty_dirs(thumbnails_root)
+    return removed
+
 
 def _image_items(start_date: str = "", end_date: str = "") -> list[dict[str, object]]:
     items = []
@@ -18,14 +114,30 @@ def _image_items(start_date: str = "", end_date: str = "") -> list[dict[str, obj
             continue
         if end_date and day > end_date:
             continue
-        items.append({"path": rel, "name": path.name, "date": day, "size": path.stat().st_size, "created_at": datetime.fromtimestamp(path.stat().st_mtime).strftime("%Y-%m-%d %H:%M:%S")})
+        dimensions = _image_dimensions(path)
+        items.append({
+            "path": rel,
+            "name": path.name,
+            "date": day,
+            "size": path.stat().st_size,
+            "created_at": datetime.fromtimestamp(path.stat().st_mtime).strftime("%Y-%m-%d %H:%M:%S"),
+            **({"width": dimensions[0], "height": dimensions[1]} if dimensions else {}),
+        })
     items.sort(key=lambda item: str(item["created_at"]), reverse=True)
     return items
 
 
 def list_images(base_url: str, start_date: str = "", end_date: str = "") -> dict[str, object]:
     config.cleanup_old_images()
-    items = [{**item, "url": f"{base_url.rstrip('/')}/images/{item['path']}"} for item in _image_items(start_date, end_date)]
+    cleanup_image_thumbnails()
+    items = [
+        {
+            **item,
+            "url": f"{base_url.rstrip('/')}/images/{item['path']}",
+            "thumbnail_url": thumbnail_url(base_url, str(item["path"])),
+        }
+        for item in _image_items(start_date, end_date)
+    ]
     groups: dict[str, list[dict[str, object]]] = {}
     for item in items:
         groups.setdefault(str(item["date"]), []).append(item)
@@ -44,8 +156,10 @@ def delete_images(paths: list[str] | None = None, start_date: str = "", end_date
             continue
         if path.is_file():
             path.unlink()
+            thumbnail = _thumbnail_path(item)
+            if thumbnail.is_file():
+                thumbnail.unlink()
             removed += 1
-    for path in sorted((p for p in root.rglob("*") if p.is_dir()), key=lambda p: len(p.parts), reverse=True):
-        if not any(path.iterdir()):
-            path.rmdir()
+    _cleanup_empty_dirs(root)
+    _cleanup_empty_dirs(config.image_thumbnails_dir)
     return {"removed": removed}

web/src/app/image-manager/page.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 
 import { DateRangeFilter } from "@/components/date-range-filter";
 import { ImageLightbox } from "@/components/image-lightbox";
+import { ImageThumbnail } from "@/components/image-thumbnail";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -21,6 +22,10 @@ function imageKey(item: ManagedImage) {
   return item.path || item.url;
 }
 
+function imageDimensions(item: ManagedImage) {
+  return item.width && item.height ? `${item.width} x ${item.height}` : "-";
+}
+
 function ImageManagerContent() {
   const [items, setItems] = useState<ManagedImage[]>([]);
   const [startDate, setStartDate] = useState("");
@@ -28,7 +33,6 @@ function ImageManagerContent() {
   const [lightboxIndex, setLightboxIndex] = useState(0);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [page, setPage] = useState(1);
-  const [dimensions, setDimensions] = useState<Record<string, string>>({});
   const [isLoading, setIsLoading] = useState(true);
   const [isDeleting, setIsDeleting] = useState(false);
   const [selectedPaths, setSelectedPaths] = useState<string[]>([]);
@@ -37,7 +41,7 @@ function ImageManagerContent() {
     id: imageKey(item),
     src: item.url,
     sizeLabel: formatSize(item.size),
-    dimensions: dimensions[item.url],
+    dimensions: imageDimensions(item),
   }));
   const pageSize = 12;
   const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
@@ -145,7 +149,7 @@ function ImageManagerContent() {
             </div>
           </div>
           <div className="grid gap-0 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            {currentRows.map((item, index) => {
+            {currentRows.map((item) => {
               const imageIndex = items.findIndex((row) => row.url === item.url);
               return (
               <div key={item.url} className="group border-r border-b border-stone-100 p-4 transition hover:bg-stone-50">
@@ -157,17 +161,12 @@ function ImageManagerContent() {
                     setLightboxOpen(true);
                   }}
                 >
-                  <img
+                  <ImageThumbnail
                     src={item.url}
+                    thumbnailSrc={item.thumbnail_url}
                     alt={item.name}
-                    className="h-full w-full object-cover transition group-hover:scale-[1.02]"
-                    onLoad={(event) => {
-                      const image = event.currentTarget;
-                      setDimensions((current) => ({
-                        ...current,
-                        [item.url]: `${image.naturalWidth} x ${image.naturalHeight}`,
-                      }));
-                    }}
+                    className="h-full w-full"
+                    imageClassName="transition group-hover:scale-[1.02]"
                   />
                   <span className="absolute right-2 bottom-2 rounded-full bg-black/50 p-2 text-white opacity-0 transition group-hover:opacity-100">
                     <Maximize2 className="size-4" />
@@ -196,7 +195,7 @@ function ImageManagerContent() {
                   </div>
                   <div className="flex items-center justify-between gap-2">
                     <span>{formatSize(item.size)}</span>
-                    <span>{dimensions[item.url] || "-"}</span>
+                    <span>{imageDimensions(item)}</span>
                   </div>
                 </div>
               </div>

web/src/app/logs/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { ChevronLeft, ChevronRight, LoaderCircle, RefreshCw, Search } from "lucide-react";
+import { ChevronLeft, ChevronRight, ImageIcon, LoaderCircle, RefreshCw, Search } 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";
@@ -49,7 +50,7 @@ function getStatus(item: SystemLog) {
 
 function LogsContent() {
   const [items, setItems] = useState<SystemLog[]>([]);
-  const [type, setType] = useState(LogType.Call);
+  const [type, setType] = useState<string>(LogType.Call);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
   const [detailLog, setDetailLog] = useState<SystemLog | null>(null);
@@ -89,6 +90,12 @@ function LogsContent() {
     setDetailOpen(true);
   };
 
+  const openLogImage = (item: SystemLog, index: number) => {
+    setDetailLog(item);
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  };
+
   useEffect(() => {
     void loadLogs();
   }, [type, startDate, endDate]);
@@ -137,32 +144,61 @@ function LogsContent() {
                   {isCallLog ? <TableHead>令牌名称</TableHead> : null}
                   {isCallLog ? <TableHead>调用耗时</TableHead> : null}
                   {isCallLog ? <TableHead>状态</TableHead> : null}
+                  {isCallLog ? <TableHead className="w-36">图片</TableHead> : null}
                   <TableHead>简述</TableHead>
                   <TableHead className="w-28">详情</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {currentRows.map((item, index) => (
-                  <TableRow key={`${item.time}-${index}`} className="text-stone-600">
-                    <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 ? (
+                {currentRows.map((item, index) => {
+                  const urls = getUrls(item);
+                  return (
+                    <TableRow key={`${item.time}-${index}`} className="text-stone-600">
+                      <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>
-                        <Badge variant={item.detail?.status === "failed" ? "danger" : "success"} className="rounded-md">
-                          {getStatus(item)}
-                        </Badge>
+                        <Button variant="ghost" className="h-8 rounded-lg px-3 text-stone-600" onClick={() => openDetail(item)}>
+                          查看详情
+                        </Button>
                       </TableCell>
-                    ) : null}
-                    <TableCell className="max-w-[420px] truncate text-stone-500">{item.summary || "-"}</TableCell>
-                    <TableCell>
-                      <Button variant="ghost" className="h-8 rounded-lg px-3 text-stone-600" onClick={() => openDetail(item)}>
-                        查看详情
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
+                    </TableRow>
+                  );
+                })}
               </TableBody>
             </Table>
           </div>
@@ -205,7 +241,7 @@ function LogsContent() {
                     setLightboxOpen(true);
                   }}
                 >
-                  <img src={url} alt="" className="h-full w-full object-cover" />
+                  <ImageThumbnail src={url} thumbnailSrc={getImageThumbnailUrl(url)} className="h-full w-full" />
                 </button>
               ))}
             </div>

web/src/components/image-thumbnail.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ImageThumbnailProps = {
+  src: string;
+  thumbnailSrc?: string;
+  alt?: string;
+  className?: string;
+  imageClassName?: string;
+};
+
+export function getImageThumbnailUrl(src: string) {
+  const marker = "/images/";
+  const index = src.indexOf(marker);
+  if (index < 0) return src;
+  return `${src.slice(0, index)}/image-thumbnails/${src.slice(index + marker.length)}`;
+}
+
+export function ImageThumbnail({ src, thumbnailSrc, alt = "", className, imageClassName }: ImageThumbnailProps) {
+  const initialSrc = useMemo(() => thumbnailSrc || getImageThumbnailUrl(src), [src, thumbnailSrc]);
+  const [currentSrc, setCurrentSrc] = useState(initialSrc);
+
+  useEffect(() => {
+    setCurrentSrc(initialSrc);
+  }, [initialSrc]);
+
+  return (
+    <span className={cn("block overflow-hidden bg-stone-100", className)}>
+      <img
+        src={currentSrc}
+        alt={alt}
+        className={cn("h-full w-full object-cover", imageClassName)}
+        loading="lazy"
+        decoding="async"
+        onError={() => {
+          if (currentSrc !== src) {
+            setCurrentSrc(src);
+          }
+        }}
+      />
+    </span>
+  );
+}

web/src/lib/api.ts

@@ -67,7 +67,10 @@ export type ManagedImage = {
   date: string;
   size: number;
   url: string;
+  thumbnail_url?: string;
   created_at: string;
+  width?: number;
+  height?: number;
 };
 
 export type SystemLog = {