feat: Add the ability to get the latest version

2026-05-11 18:10:10 +08:00 · 2025-08-27 15:37:23 +08:00
parent 2f2e1db536
commit fd02a4bbe5
7 changed files with 159 additions and 29 deletions
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -11,6 +11,7 @@
        "date-fns": "^4.1.0",
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
+        "react-markdown": "^10.1.0",
        "react-router": "^7.8.0",
      },
      "devDependencies": {
@@ -751,7 +752,7 @@

    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],

-    "react-markdown": ["react-markdown@9.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-Yk7Z94dbgYTOrdk41Z74GoKA7rThnsbbqBTRYuxoe08qvfQ9tJVhmAKw6BJS/ZORG7kTy/s1QvYzSuaoBA1qfw=="],
+    "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],

    "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],

@@ -899,6 +900,8 @@

    "@typescript-eslint/typescript-estree/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],

+    "@uiw/react-markdown-preview/react-markdown": ["react-markdown@9.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-Yk7Z94dbgYTOrdk41Z74GoKA7rThnsbbqBTRYuxoe08qvfQ9tJVhmAKw6BJS/ZORG7kTy/s1QvYzSuaoBA1qfw=="],
+
    "@uiw/react-markdown-preview/rehype-prism-plus": ["rehype-prism-plus@2.0.0", "", { "dependencies": { "hast-util-to-string": "^3.0.0", "parse-numeric-range": "^1.3.0", "refractor": "^4.8.0", "rehype-parse": "^9.0.0", "unist-util-filter": "^5.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-FeM/9V2N7EvDZVdR2dqhAzlw5YI49m9Tgn7ZrYJeYHIahM6gcXpH0K1y2gNnKanZCydOMluJvX2cB9z3lhY8XQ=="],

    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,7 @@
    "date-fns": "^4.1.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
+    "react-markdown": "^10.1.0",
    "react-router": "^7.8.0"
  },
  "devDependencies": {
--- a/web/src/api/config.ts
+++ b/web/src/api/config.ts
@@ -25,3 +25,7 @@ export interface SystemStatus {
 export async function status() {
  return request<SystemStatus>('/config/status');
 }
+
+export async function getLatestVersion() {
+  return request<{ latest_version: string | null, body: string | null }>('/config/latest-version');
+}
--- a/web/src/layout/SideNav.tsx
+++ b/web/src/layout/SideNav.tsx
@@ -1,11 +1,19 @@
-import { Layout, Menu, theme, Button, Modal } from 'antd';
+import { Layout, Menu, theme, Button, Modal, Tag, Tooltip } from 'antd';
 import { navGroups } from './nav.ts';
 import type { NavItem, NavGroup } from './nav.ts';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useSystemStatus } from '../contexts/SystemContext.tsx';
-import { GithubOutlined, MenuFoldOutlined, SendOutlined, WechatOutlined } from '@ant-design/icons';
+import {
+  CheckCircleOutlined,
+  GithubOutlined,
+  MenuFoldOutlined,
+  SendOutlined,
+  WechatOutlined,
+  WarningOutlined
+} from '@ant-design/icons';
 import '../styles/sider-menu.css';
-
+import { getLatestVersion } from '../api/config.ts';
+import ReactMarkdown from 'react-markdown';
 const { Sider } = Layout;

 export interface SideNavProps {
@@ -19,6 +27,28 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
  const status = useSystemStatus();
  const { token } = theme.useToken();
  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
+  const [latestVersion, setLatestVersion] = useState<{
+    version: string;
+    body: string;
+  } | null>(null);
+
+  useEffect(() => {
+    getLatestVersion().then(resp => {
+      if (resp.latest_version && resp.body) {
+        setLatestVersion({
+          version: resp.latest_version,
+          body: resp.body
+        });
+      }
+    });
+  }, []);
+
+  const showVersionModal = () => {
+    setIsVersionModalOpen(true);
+  };
+
+  const hasUpdate = latestVersion && latestVersion.version !== status?.version;
  return (
    <>
      <Sider
@@ -105,29 +135,72 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
            width: '100%',
            padding: '12px 8px',
            display: 'flex',
-            justifyContent: 'center',
-            gap: 8,
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 12,
            flexShrink: 0,
            borderTop: `1px solid ${token.colorBorderSecondary}`
          }}
        >
-          <Button
-            shape="circle"
-            icon={<GithubOutlined />}
-            href="https://github.com/DrizzleTime/Foxel"
-            target="_blank"
-          />
-          <Button
-            shape="circle"
-            icon={<WechatOutlined />}
-            onClick={() => setIsModalOpen(true)}
-          />
-          <Button
-            shape="circle"
-            icon={<SendOutlined />}
-            href="https://t.me/+thDsBfyqJxZkNTU1"
-            target="_blank"
-          />
+          <div style={{
+            fontSize: 12,
+            color: token.colorTextSecondary,
+            textAlign: 'center',
+            height: 22,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer'
+          }} onClick={showVersionModal}>
+            {hasUpdate ? (
+              <Tooltip title={`发现新版本: ${latestVersion?.version}`} placement={collapsed ? 'right' : 'top'}>
+                <a href="https://github.com/DrizzleTime/Foxel/releases" target="_blank" rel="noopener noreferrer"
+                   style={{ textDecoration: 'none' }}>
+                  {collapsed ? (
+                    <Tag icon={<WarningOutlined />} color="warning" style={{ marginInlineEnd: 0 }} />
+                  ) : (
+                    <Tag icon={<WarningOutlined />} color="warning">
+                      {status?.version} - 有更新 [{latestVersion?.version}]
+                    </Tag>
+                  )}
+                </a>
+              </Tooltip>
+            ) : (
+              latestVersion ? (
+                <Tooltip title={`当前为最新版: ${status?.version}`} placement={collapsed ? 'right' : 'top'}>
+                  {collapsed ? (
+                    <Tag icon={<CheckCircleOutlined />} color="success" style={{ marginInlineEnd: 0 }} />
+                  ) : (
+                    <Tag icon={<CheckCircleOutlined />} color="success">
+                      已是最新版
+                    </Tag>
+                  )}
+                </Tooltip>
+              ) : (
+                collapsed ? null : <Tag>{status?.version}</Tag>
+              )
+            )}
+          </div>
+          <div style={{ display: 'flex', flexDirection: collapsed ? 'column' : 'row', gap: 8 }}>
+            <Button
+              shape="circle"
+              icon={<GithubOutlined />}
+              href="https://github.com/DrizzleTime/Foxel"
+              target="_blank"
+            />
+            <Button
+              shape="circle"
+              icon={<WechatOutlined />}
+              onClick={() => setIsModalOpen(true)}
+            />
+            <Button
+              shape="circle"
+              icon={<SendOutlined />}
+              href="https://t.me/+thDsBfyqJxZkNTU1"
+              target="_blank"
+            />
+          </div>
+          
        </div>
      </Sider>
      <Modal
@@ -147,6 +220,22 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
          </div>
        </div>
      </Modal>
+      <Modal
+        open={isVersionModalOpen}
+        onCancel={() => setIsVersionModalOpen(false)}
+        title="版本信息"
+        footer={null}
+      >
+        <div>
+          <p>当前版本: {status?.version}</p>
+          {latestVersion && (
+            <div>
+              <p>最新版本: {latestVersion.version}</p>
+              <ReactMarkdown>{latestVersion.body}</ReactMarkdown>
+            </div>
+          )}
+        </div>
+      </Modal>
    </>
  );
 });