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

package/vendor/chatgpt2api/source/web/src/components/date-range-filter.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { format, parse } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Field } from "@/components/ui/field";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+type DateRangeFilterProps = {
+  startDate: string;
+  endDate: string;
+  onChange: (startDate: string, endDate: string) => void;
+};
+
+export function DateRangeFilter({ startDate, endDate, onChange }: DateRangeFilterProps) {
+  const selected: DateRange | undefined = startDate
+    ? {
+        from: parse(startDate, "yyyy-MM-dd", new Date()),
+        to: endDate ? parse(endDate, "yyyy-MM-dd", new Date()) : undefined,
+      }
+    : undefined;
+
+  const label = startDate ? `${startDate} 至 ${endDate || startDate}` : "选择日期范围";
+
+  return (
+    <Field className="w-[240px]">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="h-10 justify-start rounded-xl border-stone-200 bg-white px-3 font-normal text-stone-700">
+            <CalendarIcon className="size-4 text-stone-400" />
+            {label}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-3" align="start">
+          <Calendar
+            mode="range"
+            defaultMonth={selected?.from}
+            selected={selected}
+            onSelect={(value) => onChange(value?.from ? format(value.from, "yyyy-MM-dd") : "", value?.to ? format(value.to, "yyyy-MM-dd") : "")}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </Field>
+  );
+}

package/vendor/chatgpt2api/source/web/src/components/header-actions.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ThemeToggle } from "@/components/theme-toggle";
+import { VersionReleaseDialog } from "@/components/version-release-dialog";
+import { cn } from "@/lib/utils";
+
+export function HeaderActions({ className, showGithubText = true }: { className?: string; showGithubText?: boolean }) {
+  return (
+    <div className={cn("flex items-center gap-2 sm:gap-3", className)}>
+      <ThemeToggle />
+      <a
+        href="https://github.com/basketikun/chatgpt2api"
+        target="_blank"
+        rel="noreferrer"
+        className="inline-flex h-8 items-center justify-center gap-1.5 text-sm text-stone-500 transition hover:text-stone-900 dark:text-stone-300 dark:hover:text-white"
+        aria-label="GitHub repository"
+      >
+        <img src="/github.svg" alt="" className="size-4" />
+        {showGithubText ? <span className="hidden sm:inline">GitHub</span> : null}
+      </a>
+      <VersionReleaseDialog />
+    </div>
+  );
+}

package/vendor/chatgpt2api/source/web/src/components/image-lightbox.tsx

@@ -0,0 +1,434 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type LightboxImage = {
+  id: string;
+  src: string;
+  sizeLabel?: string;
+  dimensions?: string;
+};
+
+type ImageLightboxProps = {
+  images: LightboxImage[];
+  currentIndex: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onIndexChange: (index: number) => void;
+};
+
+type ImageTransform = {
+  scale: number;
+  x: number;
+  y: number;
+};
+
+type TouchPoints = {
+  [index: number]: React.Touch;
+};
+
+type TouchGesture =
+  | {
+      type: "swipe";
+      startX: number;
+      startY: number;
+    }
+  | {
+      type: "pan";
+      startX: number;
+      startY: number;
+      startTransform: ImageTransform;
+    }
+  | {
+      type: "pinch";
+      startDistance: number;
+      startCenterX: number;
+      startCenterY: number;
+      startTransform: ImageTransform;
+    };
+
+const minScale = 1;
+const maxScale = 4;
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function getTouchDistance(touches: TouchPoints) {
+  const first = touches[0];
+  const second = touches[1];
+  return Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY);
+}
+
+function getTouchCenter(touches: TouchPoints) {
+  const first = touches[0];
+  const second = touches[1];
+  return {
+    x: (first.clientX + second.clientX) / 2,
+    y: (first.clientY + second.clientY) / 2,
+  };
+}
+
+function normalizeTransform(transform: ImageTransform) {
+  if (transform.scale <= minScale) {
+    return { scale: minScale, x: 0, y: 0 };
+  }
+
+  const maxX = window.innerWidth * (transform.scale - 1) * 0.5;
+  const maxY = window.innerHeight * (transform.scale - 1) * 0.5;
+  return {
+    scale: transform.scale,
+    x: clamp(transform.x, -maxX, maxX),
+    y: clamp(transform.y, -maxY, maxY),
+  };
+}
+
+export function ImageLightbox({
+  images,
+  currentIndex,
+  open,
+  onOpenChange,
+  onIndexChange,
+}: ImageLightboxProps) {
+  const gestureRef = useRef<TouchGesture | null>(null);
+  const lastTapRef = useRef(0);
+  const pendingTransformRef = useRef<ImageTransform | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const [transform, setTransform] = useState<ImageTransform>({ scale: 1, x: 0, y: 0 });
+  const [isGesturing, setIsGesturing] = useState(false);
+  const current = images[currentIndex];
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < images.length - 1;
+
+  const cancelScheduledTransform = useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    pendingTransformRef.current = null;
+  }, []);
+
+  const scheduleTransform = useCallback((next: ImageTransform) => {
+    pendingTransformRef.current = next;
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      const pending = pendingTransformRef.current;
+      pendingTransformRef.current = null;
+      if (pending) {
+        setTransform(pending);
+      }
+    });
+  }, []);
+
+  const flushScheduledTransform = useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    const pending = pendingTransformRef.current;
+    pendingTransformRef.current = null;
+    if (pending) {
+      setTransform(pending);
+    }
+  }, []);
+
+  const resetTransform = useCallback(() => {
+    cancelScheduledTransform();
+    setTransform({ scale: 1, x: 0, y: 0 });
+    setIsGesturing(false);
+    gestureRef.current = null;
+  }, [cancelScheduledTransform]);
+
+  const goPrev = useCallback(() => {
+    if (hasPrev) onIndexChange(currentIndex - 1);
+  }, [hasPrev, currentIndex, onIndexChange]);
+
+  const goNext = useCallback(() => {
+    if (hasNext) onIndexChange(currentIndex + 1);
+  }, [hasNext, currentIndex, onIndexChange]);
+
+  useEffect(() => {
+    resetTransform();
+  }, [current?.id, open, resetTransform]);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        goNext();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, goPrev, goNext]);
+
+  const handleDownload = useCallback(() => {
+    if (!current) return;
+    const link = document.createElement("a");
+    link.href = current.src;
+    link.download = `image-${current.id}.png`;
+    link.click();
+  }, [current]);
+
+  const toggleZoom = useCallback(() => {
+    setTransform((currentTransform) =>
+      currentTransform.scale > minScale ? { scale: 1, x: 0, y: 0 } : { scale: 2.5, x: 0, y: 0 },
+    );
+  }, []);
+
+  const handleTouchStart = useCallback(
+    (event: React.TouchEvent<HTMLDivElement>) => {
+      if (event.touches.length === 2) {
+        event.preventDefault();
+        const startDistance = getTouchDistance(event.touches);
+        if (startDistance < 1) {
+          gestureRef.current = null;
+          return;
+        }
+        const center = getTouchCenter(event.touches);
+        cancelScheduledTransform();
+        setIsGesturing(true);
+        gestureRef.current = {
+          type: "pinch",
+          startDistance,
+          startCenterX: center.x,
+          startCenterY: center.y,
+          startTransform: transform,
+        };
+        return;
+      }
+
+      if (event.touches.length !== 1) {
+        gestureRef.current = null;
+        return;
+      }
+
+      const touch = event.touches[0];
+      if (transform.scale > minScale) {
+        cancelScheduledTransform();
+        setIsGesturing(true);
+        gestureRef.current = {
+          type: "pan",
+          startX: touch.clientX,
+          startY: touch.clientY,
+          startTransform: transform,
+        };
+      } else {
+        gestureRef.current = {
+          type: "swipe",
+          startX: touch.clientX,
+          startY: touch.clientY,
+        };
+      }
+    },
+    [transform, cancelScheduledTransform],
+  );
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent<HTMLDivElement>) => {
+      const gesture = gestureRef.current;
+      if (!gesture) return;
+
+      if (gesture.type === "pinch" && event.touches.length === 2) {
+        event.preventDefault();
+        const targetScale = clamp(
+          (getTouchDistance(event.touches) / gesture.startDistance) * gesture.startTransform.scale,
+          minScale,
+          maxScale,
+        );
+        const effectiveRatio = targetScale / gesture.startTransform.scale;
+        const center = getTouchCenter(event.touches);
+        const viewportCenterX = window.innerWidth / 2;
+        const viewportCenterY = window.innerHeight / 2;
+        const nextX =
+          center.x -
+          viewportCenterX -
+          (gesture.startCenterX - viewportCenterX - gesture.startTransform.x) * effectiveRatio;
+        const nextY =
+          center.y -
+          viewportCenterY -
+          (gesture.startCenterY - viewportCenterY - gesture.startTransform.y) * effectiveRatio;
+        scheduleTransform(
+          normalizeTransform({ scale: targetScale, x: nextX, y: nextY }),
+        );
+        return;
+      }
+
+      if (gesture.type === "pan" && event.touches.length === 1) {
+        event.preventDefault();
+        const touch = event.touches[0];
+        scheduleTransform(
+          normalizeTransform({
+            scale: gesture.startTransform.scale,
+            x: gesture.startTransform.x + touch.clientX - gesture.startX,
+            y: gesture.startTransform.y + touch.clientY - gesture.startY,
+          }),
+        );
+        return;
+      }
+
+      if (event.touches.length !== 1) {
+        gestureRef.current = null;
+      }
+    },
+    [scheduleTransform],
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: React.TouchEvent<HTMLDivElement>) => {
+      flushScheduledTransform();
+      setIsGesturing(false);
+
+      const gesture = gestureRef.current;
+      gestureRef.current = null;
+      if (!gesture) return;
+
+      if (gesture.type !== "swipe" || event.changedTouches.length !== 1) {
+        return;
+      }
+
+      const touch = event.changedTouches[0];
+      const deltaX = touch.clientX - gesture.startX;
+      const deltaY = touch.clientY - gesture.startY;
+      const now = Date.now();
+
+      if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10 && now - lastTapRef.current < 280) {
+        event.preventDefault();
+        lastTapRef.current = 0;
+        toggleZoom();
+        return;
+      }
+      lastTapRef.current = now;
+
+      if (Math.abs(deltaX) < 48 || Math.abs(deltaX) < Math.abs(deltaY) * 1.4) {
+        return;
+      }
+
+      if (deltaX > 0) {
+        goPrev();
+      } else {
+        goNext();
+      }
+    },
+    [goPrev, goNext, toggleZoom, flushScheduledTransform],
+  );
+
+  const handleTouchCancel = useCallback(() => {
+    cancelScheduledTransform();
+    setIsGesturing(false);
+    gestureRef.current = null;
+  }, [cancelScheduledTransform]);
+
+  if (!current) return null;
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          className="fixed inset-0 z-50 flex items-center justify-center outline-none"
+          onPointerDownOutside={(e) => e.preventDefault()}
+        >
+          <DialogPrimitive.Title className="sr-only">
+            图片预览
+          </DialogPrimitive.Title>
+
+          <div className="absolute top-[calc(env(safe-area-inset-top)+1rem)] right-4 z-10 flex items-center gap-2">
+            {current.sizeLabel || current.dimensions ? (
+              <span className="rounded-full bg-black/50 px-3 py-1.5 text-xs font-medium text-white/90">
+                {[current.sizeLabel, current.dimensions].filter(Boolean).join(" · ")}
+              </span>
+            ) : null}
+            {images.length > 1 && (
+              <span className="rounded-full bg-black/50 px-3 py-1.5 text-xs font-medium text-white/90">
+                {currentIndex + 1} / {images.length}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={handleDownload}
+              className="inline-flex size-9 items-center justify-center rounded-full bg-black/50 text-white/90 transition hover:bg-black/70"
+              aria-label="下载图片"
+            >
+              <Download className="size-4" />
+            </button>
+            <DialogPrimitive.Close className="inline-flex size-9 items-center justify-center rounded-full bg-black/50 text-white/90 transition hover:bg-black/70">
+              <X className="size-4" />
+              <span className="sr-only">关闭</span>
+            </DialogPrimitive.Close>
+          </div>
+
+          {hasPrev && transform.scale <= minScale && (
+            <button
+              type="button"
+              onClick={goPrev}
+              className="absolute left-4 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/40 text-white/90 transition hover:bg-black/60"
+              aria-label="上一张"
+            >
+              <ChevronLeft className="size-5" />
+            </button>
+          )}
+
+          <div
+            className="flex h-full w-full touch-none items-center justify-center overflow-hidden"
+            onClick={() => onOpenChange(false)}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+            onTouchCancel={handleTouchCancel}
+          >
+            <img
+              src={current.src}
+              alt=""
+              className={cn(
+                "max-h-[90vh] max-w-[90vw] rounded-lg object-contain will-change-transform",
+                isGesturing ? "" : "transition-transform duration-150 ease-out",
+                transform.scale > minScale ? "cursor-grab active:cursor-grabbing" : "cursor-zoom-in",
+              )}
+              style={{
+                transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale(${transform.scale})`,
+              }}
+              onClick={(e) => e.stopPropagation()}
+              onDoubleClick={(e) => {
+                e.stopPropagation();
+                toggleZoom();
+              }}
+              draggable={false}
+            />
+          </div>
+
+          {hasNext && transform.scale <= minScale && (
+            <button
+              type="button"
+              onClick={goNext}
+              className="absolute right-4 z-10 inline-flex size-10 items-center justify-center rounded-full bg-black/40 text-white/90 transition hover:bg-black/60"
+              aria-label="下一张"
+            >
+              <ChevronRight className="size-5" />
+            </button>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/vendor/chatgpt2api/source/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>
+  );
+}

package/vendor/chatgpt2api/source/web/src/components/theme-script.tsx

@@ -0,0 +1,18 @@
+const themeScript = `
+(() => {
+  try {
+    const stored = localStorage.getItem("chatgpt2api-theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const theme = stored === "light" || stored === "dark" ? stored : prefersDark ? "dark" : "light";
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.style.colorScheme = theme;
+  } catch {
+    document.documentElement.classList.remove("dark");
+    document.documentElement.style.colorScheme = "light";
+  }
+})();
+`;
+
+export function ThemeScript() {
+  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
+}

package/vendor/chatgpt2api/source/web/src/components/theme-toggle.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
+
+export function ThemeToggle() {
+  return (
+    <AnimatedThemeToggler
+      aria-label="切换主题"
+      title="切换主题"
+      variant="circle"
+      className="inline-flex size-8 shrink-0 items-center justify-center text-stone-500 transition hover:text-stone-900 dark:text-stone-300 dark:hover:text-white [&_svg]:size-4"
+    />
+  );
+}