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

package/vendor/chatgpt2api/source/web/src/components/ui/text-3d-flip.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ElementType,
+} from "react"
+import {
+  useAnimate,
+  type AnimationOptions,
+  type ValueAnimationTransition,
+} from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+const HAS_SEGMENTER = typeof Intl !== "undefined" && "Segmenter" in Intl
+
+const splitIntoCharacters = (text: string): string[] => {
+  if (HAS_SEGMENTER) {
+    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" })
+    return Array.from(segmenter.segment(text), ({ segment }) => segment)
+  }
+  return Array.from(text)
+}
+
+const extractTextFromChildren = (children: React.ReactNode): string => {
+  if (children == null) return ""
+  if (typeof children === "string") return children
+  if (typeof children === "number") return String(children)
+
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join("")
+  }
+
+  if (React.isValidElement(children)) {
+    const props = children.props as Record<string, unknown>
+    const childText = props.children as React.ReactNode
+    if (childText != null) {
+      return extractTextFromChildren(childText)
+    }
+  }
+
+  return ""
+}
+
+const ROTATION_MAP = {
+  top: "rotateX(90deg)",
+  right: "rotateY(90deg)",
+  bottom: "rotateX(-90deg)",
+  left: "rotateY(-90deg)",
+} as const
+
+const DEFAULT_TRANSITION: ValueAnimationTransition = {
+  type: "spring",
+  damping: 30,
+  stiffness: 300,
+}
+
+interface Text3DFlipProps {
+  children: React.ReactNode
+  as?: ElementType
+  className?: string
+  textClassName?: string
+  flipTextClassName?: string
+  staggerDuration?: number
+  staggerFrom?: "first" | "last" | "center" | number | "random"
+  transition?: ValueAnimationTransition | AnimationOptions
+  rotateDirection?: "top" | "right" | "bottom" | "left"
+}
+
+const Text3DFlip = ({
+  children,
+  as: ElementTag = "p",
+  className,
+  textClassName,
+  flipTextClassName,
+  staggerDuration = 0.05,
+  staggerFrom = "first",
+  transition = DEFAULT_TRANSITION,
+  rotateDirection = "right",
+  ...props
+}: Text3DFlipProps) => {
+  const isAnimatingRef = useRef(false)
+  const isMountedRef = useRef(false)
+  const [scope, animate] = useAnimate()
+
+  const rotationTransform = ROTATION_MAP[rotateDirection]
+
+  useEffect(() => {
+    isMountedRef.current = true
+
+    return () => {
+      isMountedRef.current = false
+      isAnimatingRef.current = false
+    }
+  }, [])
+
+  const text = useMemo(() => {
+    try {
+      return extractTextFromChildren(children)
+    } catch {
+      return ""
+    }
+  }, [children])
+
+  const characters = useMemo(() => {
+    const words = text.split(" ")
+    return words.map((word, i) => ({
+      characters: splitIntoCharacters(word),
+      needsSpace: i !== words.length - 1,
+    }))
+  }, [text])
+
+  const charOffsets = useMemo(() => {
+    const offsets = [0]
+    for (const word of characters) {
+      offsets.push(offsets.at(-1)! + word.characters.length)
+    }
+    return offsets
+  }, [characters])
+
+  const getStaggerDelay = useCallback(
+    (index: number, totalChars: number) => {
+      if (staggerFrom === "first") return index * staggerDuration
+      if (staggerFrom === "last")
+        return (totalChars - 1 - index) * staggerDuration
+      if (staggerFrom === "center") {
+        const center = Math.floor(totalChars / 2)
+        return Math.abs(center - index) * staggerDuration
+      }
+      if (staggerFrom === "random") {
+        const randomIndex = Math.floor(Math.random() * totalChars)
+        return Math.abs(randomIndex - index) * staggerDuration
+      }
+      return Math.abs(staggerFrom - index) * staggerDuration
+    },
+    [staggerFrom, staggerDuration]
+  )
+
+  const handleHoverStart = useCallback(async () => {
+    if (isAnimatingRef.current) return
+    isAnimatingRef.current = true
+
+    try {
+      const totalChars = characters.reduce(
+        (sum, word) => sum + word.characters.length,
+        0
+      )
+
+      const delays = Array.from({ length: totalChars }, (_, i) =>
+        getStaggerDelay(i, totalChars)
+      )
+
+      await animate(
+        ".text-3d-flip-char",
+        { transform: rotationTransform },
+        {
+          ...transition,
+          delay: (i: number) => delays[i],
+        }
+      )
+
+      if (!isMountedRef.current) return
+
+      await animate(
+        ".text-3d-flip-char",
+        { transform: "rotateX(0deg) rotateY(0deg)" },
+        { duration: 0 }
+      )
+    } finally {
+      if (isMountedRef.current) {
+        isAnimatingRef.current = false
+      }
+    }
+  }, [characters, transition, getStaggerDelay, rotationTransform, animate])
+
+  return (
+    <ElementTag
+      className={cn("relative flex flex-wrap", className)}
+      onMouseEnter={handleHoverStart}
+      ref={scope}
+      {...props}
+    >
+      <span className="sr-only">{text}</span>
+
+      {characters.map((wordObj, wordIndex) => (
+        <span key={wordIndex} className="inline-flex">
+          {wordObj.characters.map((char, charIndex) => (
+            <CharBox
+              key={charOffsets[wordIndex] + charIndex}
+              char={char}
+              textClassName={textClassName}
+              flipTextClassName={flipTextClassName}
+              rotateDirection={rotateDirection}
+            />
+          ))}
+          {wordObj.needsSpace && <span className="whitespace-pre"> </span>}
+        </span>
+      ))}
+    </ElementTag>
+  )
+}
+
+interface CharBoxProps {
+  char: string
+  textClassName?: string
+  flipTextClassName?: string
+  rotateDirection: "top" | "right" | "bottom" | "left"
+}
+
+const SECOND_FACE_TRANSFORMS = {
+  top: "rotateX(-90deg) translateZ(0.5lh)",
+  right:
+    "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%)",
+  bottom: "rotateX(90deg) translateZ(0.5lh)",
+  left: "rotateY(90deg) translateX(50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) translateX(50%)",
+} as const
+
+const FRONT_FACE_TRANSFORMS = {
+  top: "translateZ(0.5lh)",
+  bottom: "translateZ(0.5lh)",
+  left: "rotateY(90deg) translateX(50%) rotateY(-90deg)",
+  right: "rotateY(-90deg) translateX(50%) rotateY(90deg)",
+} as const
+
+const CONTAINER_TRANSFORMS = {
+  top: "translateZ(-0.5lh)",
+  bottom: "translateZ(-0.5lh)",
+  left: "rotateY(90deg) translateX(50%) rotateY(-90deg)",
+  right: "rotateY(90deg) translateX(50%) rotateY(-90deg)",
+} as const
+
+const CharBox = memo(
+  ({
+    char,
+    textClassName,
+    flipTextClassName,
+    rotateDirection,
+  }: CharBoxProps) => (
+    <span
+      className="text-3d-flip-char inline transform-3d"
+      style={{ transform: CONTAINER_TRANSFORMS[rotateDirection] }}
+    >
+      <span
+        className={cn("relative h-[1lh] backface-hidden", textClassName)}
+        style={{ transform: FRONT_FACE_TRANSFORMS[rotateDirection] }}
+      >
+        {char}
+      </span>
+      <span
+        className={cn(
+          "absolute top-0 left-0 h-[1lh] backface-hidden",
+          flipTextClassName
+        )}
+        style={{ transform: SECOND_FACE_TRANSFORMS[rotateDirection] }}
+      >
+        {char}
+      </span>
+    </span>
+  )
+)
+
+CharBox.displayName = "CharBox"
+Text3DFlip.displayName = "Text3DFlip"
+
+export default Text3DFlip

package/vendor/chatgpt2api/source/web/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 block min-h-32 w-full rounded-[24px] border bg-white/90 px-4 py-3 text-sm shadow-sm outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/vendor/chatgpt2api/source/web/src/components/version-release-dialog.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import webConfig from "@/constants/common-env";
+import { useVersionCheck } from "@/hooks/use-version-check";
+import { cn } from "@/lib/utils";
+
+function typeVariant(type: string): "success" | "danger" | "info" | "violet" | "outline" {
+  if (type === "新增") return "success";
+  if (type === "修复") return "danger";
+  if (type === "调整") return "info";
+  if (type === "文档") return "violet";
+  return "outline";
+}
+
+export function VersionReleaseDialog({ className }: { className?: string }) {
+  const {
+    open,
+    setOpen,
+    openReleaseModal,
+    latestVersion,
+    releases,
+    checking,
+    hasNewVersion,
+    checkLatestRelease,
+  } = useVersionCheck();
+
+  return (
+    <>
+      <button
+        type="button"
+        className={cn(
+          "relative px-1 py-1 text-[11px] font-medium text-stone-500 transition hover:text-stone-900 dark:text-stone-300 dark:hover:text-white",
+          className,
+        )}
+        onClick={openReleaseModal}
+        title="查看版本更新"
+      >
+        v{webConfig.appVersion}
+        {hasNewVersion ? (
+          <span className="absolute -top-1 -right-1 size-2 rounded-full bg-emerald-500" />
+        ) : null}
+      </button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="w-[min(94vw,680px)] rounded-2xl">
+          <DialogHeader>
+            <DialogTitle>版本更新</DialogTitle>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <VersionCard label="当前版本" value={webConfig.appVersion} />
+            <VersionCard
+              label="最新版本"
+              value={latestVersion}
+              action={
+                <button
+                  type="button"
+                  className="text-[11px] text-stone-400 underline-offset-2 hover:text-stone-700 hover:underline dark:hover:text-stone-200"
+                  onClick={() => void checkLatestRelease(true)}
+                >
+                  {checking ? "检查中..." : "检查更新"}
+                </button>
+              }
+            />
+          </div>
+          <div className="max-h-[56vh] space-y-5 overflow-y-auto pr-1">
+            {releases.map((release) => (
+              <div key={release.version} className="border-l border-stone-200 pl-4 dark:border-white/10">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="text-sm font-semibold text-stone-950 dark:text-stone-100">
+                    {release.version === "Unreleased" ? "未发布" : release.version}
+                  </span>
+                  <span className="text-xs text-stone-500 dark:text-stone-400">{release.date}</span>
+                  {release.version === latestVersion ? <Badge variant="success">最新</Badge> : null}
+                  {release.version === webConfig.appVersion ? <Badge variant="outline">当前</Badge> : null}
+                </div>
+                <div className="mt-2 space-y-1.5">
+                  {release.items.map((item, index) => (
+                    <div key={index} className="flex items-start gap-2 text-sm leading-6 text-stone-700 dark:text-stone-300">
+                      <Badge variant={typeVariant(item.type)} className="mt-0.5 shrink-0">
+                        {item.type}
+                      </Badge>
+                      <span className="min-w-0 flex-1">{item.content}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+          <Button variant="outline" size="sm" asChild>
+            <a href="https://github.com/basketikun/chatgpt2api" target="_blank" rel="noreferrer">
+              前往 GitHub 更新
+            </a>
+          </Button>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+function VersionCard({
+  label,
+  value,
+  action,
+}: {
+  label: string;
+  value: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border border-stone-200 bg-white/55 p-3 dark:border-white/10 dark:bg-white/5">
+      <div className="flex items-center justify-between gap-2">
+        <div className="text-xs text-stone-500 dark:text-stone-400">{label}</div>
+        {action}
+      </div>
+      <div className="mt-1 text-base font-semibold text-stone-950 dark:text-stone-100">{value}</div>
+    </div>
+  );
+}

package/vendor/chatgpt2api/source/web/src/constants/common-env.ts

@@ -0,0 +1,6 @@
+const webConfig = {
+    apiUrl: process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:8000' : '',
+    appVersion: process.env.NEXT_PUBLIC_APP_VERSION || '0.0.0',
+}
+
+export default webConfig

package/vendor/chatgpt2api/source/web/src/hooks/use-version-check.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import webConfig from "@/constants/common-env";
+import { parseChangelog, type ReleaseInfo } from "@/lib/release";
+
+const latestVersionUrl =
+  "https://raw.githubusercontent.com/basketikun/chatgpt2api/main/VERSION";
+const latestChangelogUrl =
+  "https://raw.githubusercontent.com/basketikun/chatgpt2api/main/CHANGELOG.md";
+
+function readLocalReleases(): ReleaseInfo[] {
+  return JSON.parse(process.env.NEXT_PUBLIC_APP_RELEASES || "[]");
+}
+
+function toVersionParts(version: string) {
+  const match = version.trim().match(/^v?(\d+)\.(\d+)\.(\d+)/);
+  return match ? match.slice(1).map(Number) : null;
+}
+
+function isNewerVersion(latestVersion: string, currentVersion: string) {
+  const latest = toVersionParts(latestVersion);
+  const current = toVersionParts(currentVersion);
+  if (!latest || !current) return false;
+  return latest.some(
+    (value, index) =>
+      value > current[index] &&
+      latest.slice(0, index).every((part, prevIndex) => part === current[prevIndex]),
+  );
+}
+
+export function useVersionCheck() {
+  const currentVersion = webConfig.appVersion;
+  const localReleases = useMemo(readLocalReleases, []);
+  const [latestVersion, setLatestVersion] = useState(currentVersion);
+  const [releases, setReleases] = useState<ReleaseInfo[]>(localReleases);
+  const [checking, setChecking] = useState(false);
+  const [open, setOpen] = useState(false);
+  const hasNewVersion = isNewerVersion(latestVersion, currentVersion);
+
+  const checkLatestRelease = useCallback(
+    async (showMessage = false) => {
+      setChecking(true);
+      try {
+        const [versionResponse, changelogResponse] = await Promise.all([
+          fetch(latestVersionUrl),
+          fetch(latestChangelogUrl),
+        ]);
+        if (!versionResponse.ok || !changelogResponse.ok) throw new Error();
+        const [version, changelog] = await Promise.all([
+          versionResponse.text(),
+          changelogResponse.text(),
+        ]);
+        setLatestVersion(version.trim() || currentVersion);
+        if (changelog.trim()) setReleases(parseChangelog(changelog));
+        if (showMessage) toast.success("已获取最新版本信息");
+      } catch {
+        setLatestVersion(currentVersion);
+        setReleases(localReleases);
+        if (showMessage) toast.error("获取最新版本信息失败");
+      } finally {
+        setChecking(false);
+      }
+    },
+    [currentVersion, localReleases],
+  );
+
+  const openReleaseModal = () => {
+    setOpen(true);
+    void checkLatestRelease();
+  };
+
+  return {
+    open,
+    setOpen,
+    openReleaseModal,
+    latestVersion,
+    releases,
+    checking,
+    hasNewVersion,
+    checkLatestRelease,
+  };
+}