feat: support refresh dashboard version (#122)

src/App.tsx

@@ -6,6 +6,8 @@ import { app } from "./states/app";
 import useSWR from "swr";
 import { InternelServerErrorPage } from "@pages/InternelServerErrorPage";
 import { useAppCheck } from "@hooks/useAppCheck";
+import { useEffect } from "react";
+import pack from "../package.json";
 
 function App() {
   const appSnapshot = useSnapshot(app);
@@ -24,6 +26,10 @@ function App() {
   }
 
   useAppCheck();
+
+  useEffect(() => {
+    window.version = pack.version;
+  }, [])
 
   return (
     <>

src/components/widgets/Footer/index.module.css

@@ -0,0 +1,37 @@
+.footer {
+  font-size: 0.8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  flex-direction: column;
+}
+
+.footer div {
+  margin-bottom: 4px;
+  color: var(--text-color-primary);
+}
+
+.refresh {
+  cursor: pointer;
+  margin-left: 6px;
+  transition: color 0.2s ease-in-out;  
+}
+
+.refresh:hover {
+  @apply text-blue-500;
+}
+
+.refresh:hover svg {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/widgets/Footer/index.tsx

@@ -0,0 +1,37 @@
+import { Refresh } from "@icon-park/react";
+import styles from "./index.module.css";
+import useSWR from "swr";
+import { apiClient } from "@utils/request";
+import { toast } from "sonner";
+export const Footer = () => {
+
+  const { data: coreVersion } = useSWR("/info");
+
+  const handleRefresh = () => {
+    if (window.PATTERN != "CORE") {
+      toast.error("独立部署模式｜无法自动刷新面板版本")
+      return;
+    }
+    const handler = apiClient("/console/refresh")
+    toast.promise(handler, {
+      loading: "正在刷新面板版本...",
+      success: "面板版本刷新成功",
+      error: "面板版本刷新失败"
+    })
+    setTimeout(() => {
+      window.location.reload()
+    }, 1000)
+  }
+
+  return (
+    <div className={styles.footer}>
+      <div>
+        面板版本: {window?.version}
+        <span className={styles.refresh} onClick={handleRefresh}>
+          <Refresh />
+        </span>
+      </div>
+      <div>后端版本: {coreVersion?.version}</div>
+    </div>
+  );
+};

src/index.css

@@ -9,7 +9,7 @@
   --background-color-tertiary: #d5d5d5;
   --background-color-quaternary: #b5b5b5;
   --text-color: #000000;
-  --text-color-primary: #333333;
+  --text-color-primary: #444444;
   --maskbgdeep: rgba(255, 255, 255, 0.8);
   --maskbgdeep-reverse: rgba(0, 0, 0, 0.8);
 }
@@ -22,7 +22,7 @@
     --background-color-tertiary: #3b3b3b;
     --background-color-quaternary: #5b5b5b;
     --text-color: #fff;
-    --text-color-primary: #fff;
+    --text-color-primary: #b8b8b8;
     --maskbgdeep: rgba(0, 0, 0, 0.8);
     --maskbgdeep-reverse: rgba(255, 255, 255, 0.8);
   }

src/pages/Home/index.tsx

@@ -9,6 +9,7 @@ import { GridContainer, Widget, TableContainer, TableItem } from "./universal";
 import { useNavigate } from "react-router-dom";
 import { useSeo } from "@hooks/useSeo";
 import { useHomeAggregateData } from "@hooks/useHomeAggregateData";
+import { Footer } from "@components/widgets/Footer";
 
 interface IHomeTotal {
   posts: {
@@ -250,6 +251,7 @@ export const Home: BasicPage = () => {
           </Tab.Group>
         </Widget>
       </div>
+      <Footer />
     </div>
   );
 };

src/types.d.ts

@@ -5,6 +5,8 @@ declare global {
   export interface Window {
     MOG_API: string;
     MOG_BASE: string;
+    version: string;
+    PATTERN: "CORE" | "STANDALONE";
   }
 }