feat: 支持手动刷新

imsyy · Aug 16, 2023 · 30638a3 · 30638a3
1 parent 4bf9f52
commit 30638a3
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 33 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -15,18 +15,23 @@ const App = observer(() => {
   const apiKey = import.meta.env.VITE_API_KEY;
   const countDays = import.meta.env.VITE_COUNT_DAYS;
 
-  useEffect(() => {
-    // 获取站点数据
+  // 获取站点数据
+  const getSiteStatusData = () => {
+    setSiteData(null);
     getSiteData(apiKey, countDays, cache, status).then((res) => {
       console.log(res);
       setSiteData(res);
     });
+  };
+
+  useEffect(() => {
+    getSiteStatusData();
   }, [apiKey, countDays]);
 
   return (
     <>
       <GlobalScrollbar />
-      <Header />
+      <Header getSiteData={getSiteStatusData} />
       <main id="main">
         <div className="container">
           <div className="all-site">

diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -1,21 +1,18 @@
+import { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Statistic } from "antd";
 import { CSSTransition, SwitchTransition } from "react-transition-group";
 import { formatTimestamp } from "@/utils/timeTools";
+import { Refresh } from "@icon-park/react";
+import { message } from "antd";
 import CountUp from "react-countup";
 import useStores from "@/hooks/useStores";
 
-// 倒计时数据
-const { Countdown } = Statistic;
-const deadline = Date.now() + 1000 * 60 * 5;
-
-const refreshNow = () => {
-  console.log("finished");
-};
-
-const Header = observer(() => {
+const Header = observer(({ getSiteData }) => {
+  const [messageApi, contextHolder] = message.useMessage();
   const { status, cache } = useStores();
+  const [lastClickTime, setLastClickTime] = useState(0);
 
+  // 加载配置
   const siteName = import.meta.env.VITE_SITE_NAME;
 
   // 状态文本
@@ -27,8 +24,25 @@ const Header = observer(() => {
     wrong: "数据请求失败",
   };
 
+  // 刷新状态
+  const refreshStatus = () => {
+    const currentTime = Date.now();
+    if (currentTime - lastClickTime < 60000) {
+      messageApi.open({
+        key: "updata",
+        type: "warning",
+        content: "请稍后再尝试刷新",
+      });
+      return false;
+    }
+    cache.changeSiteData(null);
+    getSiteData();
+    setLastClickTime(currentTime);
+  };
+
   return (
     <header id="header" className={status.siteState}>
+      {contextHolder}
       <SwitchTransition mode="out-in">
         <CSSTransition key={status.siteState} classNames="fade" timeout={300}>
           <div className={`cover ${status.siteState}`} />
@@ -68,13 +82,10 @@ const Header = observer(() => {
                           formatTimestamp(cache.siteData?.timestamp).justTime
                         }`}
                       </span>
-                      {/* <span>更新频率 5 分钟</span> */}
-                      <Countdown
-                        className="timeout"
-                        title={null}
-                        value={deadline}
-                        onFinish={refreshNow}
-                      />
+                      <div className="update">
+                        <span>更新频率 5 分钟</span>
+                        <Refresh className="refresh" onClick={refreshStatus} />
+                      </div>
                     </div>
                   )}
                 </CSSTransition>

diff --git a/src/components/siteStatus.jsx b/src/components/siteStatus.jsx
@@ -116,7 +116,7 @@ const SiteStatus = ({ siteData, days, status }) => {
                 footer={null}
                 onOk={closeSiteDetails}
                 onCancel={closeSiteDetails}
-                bodyStyle={{ marginTop: "12px" }}
+                bodyStyle={{ marginTop: "20px" }}
               >
                 <SiteCharts siteDetails={siteDetailsData} />
               </Modal>

diff --git a/src/style/index.scss b/src/style/index.scss
@@ -134,17 +134,10 @@ body {
                   margin: 0 8px;
                 }
               }
-              .timeout {
-                line-height: normal;
-                .ant-statistic-content {
-                  color: #fff;
-                  line-height: normal;
-                  font-size: 14px;
-                  font-family: "HarmonyOS_Regular", sans-serif;
-                  &::before {
-                    content: "距下次更新";
-                    margin-right: 4px;
-                  }
+              .update {
+                .refresh {
+                  cursor: pointer;
+                  margin-left: 6px;
                 }
               }
             }

diff --git a/src/utils/getSiteData.js b/src/utils/getSiteData.js
@@ -12,6 +12,8 @@ import dayjs from "dayjs";
  */
 export const getSiteData = async (apikey, days, cache, status) => {
   try {
+    status.changeSiteState("loading");
+
     const dates = [];
     const today = dayjs(new Date().setHours(0, 0, 0, 0));
 
@@ -79,6 +81,7 @@ export const getSiteData = async (apikey, days, cache, status) => {
     changeSite(processedData, status);
     return processedData;
   } catch (error) {
+    status.changeSiteState("wrong");
     console.error("获取监控数据时出错：" + error);
   }
 };
@@ -155,7 +158,7 @@ const dataProcessing = (data, dates) => {
 
     if (monitor.status === 2) result.status = "ok";
     if (monitor.status === 9) result.status = "down";
-    
+
     return result;
   });
 };