功能：完成项目版本号展示功能

.env

@@ -1,3 +1,6 @@
+# 项目版本号
+VITE_VERSION=2.1.6
+
 # 项目后端API地址
 VITE_PROJECT_API=
 

src/components/Sidebar/index.tsx

@@ -10,6 +10,7 @@ import { useUserStore } from '@/stores';
 import { getRouteListAPI } from '@/api/Role'
 import { Route } from '@/types/app/route';
 import logo from '@/images/logo/logo.png'
+import useVersionData from '@/hooks/useVersionData';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -20,6 +21,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   const location = useLocation();
   const store = useUserStore();
 
+  const version = useVersionData();
+
   const { pathname } = location;
 
   const trigger = useRef<any>(null);
@@ -235,7 +238,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
           to: "/iter",
           path: "iter",
           icon: <BiBug className='text-[22px]' />,
-          name: "更新日志"
+          // name: <div>更新日志 <b className='inline-block w-3 h-3 ml-2 bg-green-400 rounded-full'></b></div>
+          name: <div>更新日志 <b className={`inline-block w-3 h-3 ml-2 ${version.tag_name === import.meta.env.VITE_VERSION ? 'bg-green-400' : 'bg-red-400'} rounded-full`}></b></div>
+          // version
         }
       ]
     }

src/hooks/useVersionData.tsx

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+interface Version { name: string, tag_name: string, tarball_url: string }
+
+const useVersionData = () => {
+    const [version, setVersion] = useState<Version>({} as Version);
+
+    useEffect(() => {
+        const getVersionData = async () => {
+            const project_version = JSON.parse(sessionStorage.getItem('project_version') || '{}');
+            if (Object.keys(project_version).length !== 0) return setVersion(project_version);
+            const { data } = await axios.get("https://api.github.com/repos/LiuYuYang01/ThriveX-Admin/releases/latest");
+            setVersion(data);
+            sessionStorage.setItem('project_version', JSON.stringify(data));
+        };
+
+        getVersionData();
+    }, []);
+
+    return version;
+};
+
+export default useVersionData;

src/pages/Dashboard/components/HeaderInfo/index.tsx

@@ -1,23 +1,43 @@
-import React from 'react';
-import { EditOutlined } from '@ant-design/icons';
 import { useUserStore } from '@/stores';
+import { FaDownload } from "react-icons/fa6";
+import useVersionData from '@/hooks/useVersionData';
 
-const HeaderInfo: React.FC = () => {
+
+const HeaderInfo = () => {
     const { user } = useUserStore();
 
-    return (
-        <div className="flex items-center xs:px-6 container mx-auto">
-            {/* 头像 */}
-            <img 
-                src={user?.avatar || 'https://q1.qlogo.cn/g?b=qq&nk=3311118881&s=640'} alt="avatar"
-                className="w-16 xs:w-24 h-16 xs:h-24 rounded-full mr-10 transition-transform duration-300 transform hover:scale-125 avatar-animation"
-            />
+    const version = useVersionData();
 
-            {/* 信息 */}
-            <div className="info">
-                <div className="font-medium text-gradient">
-                    <div className='text-2xl'>Hello <span className='pr-4'>{user?.name || '未命名'}!</span></div>
-                    <div className='text-base xsm:text-lg xs:mt-2.5'>欢迎使用现代化博客管理系统</div>
+    return (
+        <div className="flex justify-between items-center xs:px-6 container mx-auto">
+            <div className='flex items-center'>
+                {/* 头像 */}
+                <img
+                    src={user?.avatar || 'https://q1.qlogo.cn/g?b=qq&nk=3311118881&s=640'} alt="avatar"
+                    className="w-16 xs:w-24 h-16 xs:h-24 rounded-full mr-4 transition-transform duration-300 transform hover:scale-125 avatar-animation"
+                />
+
+                {/* 信息 */}
+                <div className="info">
+                    <div className="font-medium text-gradient">
+                        <div className='text-2xl'>Hello <span className='pr-4'>{user?.name || '未命名'}!</span></div>
+                        <div className='text-base xsm:text-lg xs:mt-2.5'>欢迎使用 ThriveX 现代化博客管理系统</div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 项目版本号 */}
+            <div className='hidden md:flex md:flex-col space-y-1 xl:mr-30'>
+                <div className='flex space-x-4'>
+                    <p>当前版本：<b className='inline-block px-2 text-white bg-blue-400 rounded-md'>{import.meta.env.VITE_VERSION}</b></p>
+                    <p>最新版本：<b className='inline-block px-2 text-white bg-red-500 rounded-md'>{version.tag_name}</b></p>
+                </div>
+
+                <p>更新说明：{version.name}</p>
+
+                <div className='group flex items-center'>
+                    <FaDownload className='group-hover:text-primary transition-colors' />
+                    <a href={version.tarball_url} className='group-hover:text-primary pl-2 transition-colors'>点击下载最新版</a>
                 </div>
             </div>
         </div>

src/pages/Iterative/index.tsx

@@ -30,14 +30,20 @@ const Home = () => {
             }
         ))
 
-        sessionStorage.setItem('blog_project_iterative', JSON.stringify(result))
-        project === "ThriveX-Blog" && setBlog_IterativeRecording(result)
-
-        sessionStorage.setItem('admin_project_iterative', JSON.stringify(result))
-        project === "ThriveX-Admin" && setAdmin_IterativeRecording(result)
-
-        sessionStorage.setItem('server_project_iterative', JSON.stringify(result))
-        project === "ThriveX-Server" && setServer_IterativeRecording(result)
+        switch (project) {
+            case "ThriveX-Blog":
+                sessionStorage.setItem('blog_project_iterative', JSON.stringify(result))
+                setBlog_IterativeRecording(result)
+                break;
+            case "ThriveX-Admin":
+                sessionStorage.setItem('admin_project_iterative', JSON.stringify(result))
+                setAdmin_IterativeRecording(result)
+                break;
+            case "ThriveX-Server":
+                sessionStorage.setItem('server_project_iterative', JSON.stringify(result))
+                setServer_IterativeRecording(result)
+                break;
+        }
     }
 
     useEffect(() => {
@@ -80,7 +86,7 @@ const Home = () => {
                 </div>
 
                 <div className='overflow-auto w-full'>
-                    <div className='flex w-[1350px]'>
+                    <div className='flex w-[1350px] mx-auto'>
                         <div className='w-[400px]'>
                             <h3 className='text-xl text-center pb-6 font-bold text-gradient block'>ThriveX-Blog</h3>
                             <Timeline mode="left" items={blog_iterativeRecording} />

src/types/env.d.ts

@@ -1,4 +1,6 @@
 interface ImportMetaEnv {
+    readonly VITE_VERSION: string;
+
     readonly VITE_PROJECT_API: string;
 
     readonly VITE_BAIDU_TONGJI_KEY: string;