feat(version): 添加版本更新检查和发布对话框功能

- 实现了版本更新检查Hook useVersionCheck，支持远程版本检测
- 新增版本发布对话框组件VersionReleaseDialog，显示版本信息和更新日志
- 添加了CHANGELOG.md文件解析功能，支持版本历史展示
- 在顶部导航栏中替换静态版本号为可交互的版本对话框
- 集成GitHub远程版本检测，支持手动检查更新功能
- 添加版本卡片UI组件，区分当前版本和最新版本状态

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## Unreleased
+
+## 1.2.0 - 2026-05-28
+
++ [新增] 当前版本基线，包含 Web 面板、画图、号池管理、注册机、图片管理、日志管理和设置能力。
++ [新增] 前端版本号支持点击查看版本更新弹窗，展示当前版本、最新版本和更新日志。
++ [优化] 优化注册机效率，成功率大幅提高。
++ [优化] 优化生图页面配置选项。

web/next.config.ts

@@ -2,6 +2,7 @@ import { readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import type { NextConfig } from 'next'
+import { parseChangelog } from './src/lib/release'
 
 const projectRoot = join(dirname(fileURLToPath(import.meta.url)), '..')
 
@@ -15,11 +16,13 @@ function readAppVersion() {
 }
 
 const appVersion = process.env.NEXT_PUBLIC_APP_VERSION || readAppVersion()
+const appReleases = JSON.stringify(parseChangelog(readFileSync(join(projectRoot, 'CHANGELOG.md'), 'utf-8')))
 
 const nextConfig: NextConfig = {
     allowedDevOrigins: ['127.0.0.1'],
     env: {
         NEXT_PUBLIC_APP_VERSION: appVersion,
+        NEXT_PUBLIC_APP_RELEASES: appReleases,
     },
     output: 'export',
     trailingSlash: true,

web/src/components/top-nav.tsx

@@ -5,8 +5,8 @@ import { useEffect, useState } from "react";
 import { Github } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 
-import webConfig from "@/constants/common-env";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { VersionReleaseDialog } from "@/components/version-release-dialog";
 import { getValidatedAuthSession } from "@/lib/auth-session";
 import { cn } from "@/lib/utils";
 import { clearStoredAuthSession, type StoredAuthSession } from "@/store/auth";
@@ -121,9 +121,7 @@ export function TopNav() {
           <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 dark:bg-white/8 dark:text-stone-300 sm:inline-block sm:text-[11px]">
             {roleLabel} · {displayName}
           </span>
-          <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 dark:bg-white/8 dark:text-stone-300 sm:inline-block sm:text-[11px]">
-            v{webConfig.appVersion}
-          </span>
+          <VersionReleaseDialog />
           <button
             type="button"
             className="py-1 text-xs text-stone-400 transition hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200 sm:text-sm"

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 rounded-md bg-stone-100 px-2 py-1 text-[11px] font-medium text-stone-500 transition hover:text-stone-900 dark:bg-white/8 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>
+  );
+}

web/src/hooks/use-version-check.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback, useEffect, 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 checkLatestVersion = useCallback(async () => {
+    const response = await fetch(latestVersionUrl);
+    if (response.ok) setLatestVersion((await response.text()).trim() || currentVersion);
+  }, [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],
+  );
+
+  useEffect(() => {
+    void checkLatestVersion();
+  }, [checkLatestVersion]);
+
+  const openReleaseModal = () => {
+    setOpen(true);
+    void checkLatestRelease();
+  };
+
+  return {
+    open,
+    setOpen,
+    openReleaseModal,
+    latestVersion,
+    releases,
+    checking,
+    hasNewVersion,
+    checkLatestRelease,
+  };
+}

web/src/lib/release.ts

@@ -0,0 +1,25 @@
+export type ReleaseInfo = {
+  version: string;
+  date: string;
+  items: { type: string; content: string }[];
+};
+
+export function parseChangelog(content: string): ReleaseInfo[] {
+  return content
+    .split(/^## /m)
+    .slice(1)
+    .map((block) => {
+      const [title = "", ...lines] = block.trim().split("\n");
+      const [, version = title.trim(), date = ""] =
+        title.match(/^(.+?)(?:\s+-\s+(.+))?$/) || [];
+      return {
+        version: version.trim(),
+        date: date.trim(),
+        items: lines
+          .map((line) => line.trim().match(/^\+\s+\[(.+?)\]\s+(.+)$/))
+          .filter((match): match is RegExpMatchArray => Boolean(match))
+          .map((match) => ({ type: match[1], content: match[2] })),
+      };
+    })
+    .filter((release) => release.items.length);
+}