From 3e68ff91749e696486b728dead844fb18190c505 Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Mon, 18 Dec 2023 09:44:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9C=AA=E7=9F=A5?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  |  2 +-
 src/components/header.jsx     | 12 ++++++++++++
 src/components/siteStatus.jsx | 22 ++++++++++++++++------
 src/style/index.scss          | 20 ++++++++++++++++++++
 src/utils/getSiteData.js      |  6 +++++-
 5 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 53dd39fb..9c63efaa 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "site-status",
   "alia": "SiteStatus",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/header.jsx b/src/components/header.jsx
index e6128b95..c9d46437 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -127,6 +127,18 @@ const Header = observer(({ getSiteData }) => {
                         />
                       </span>
                     </div>
+                    {status.siteOverview?.unknownCount ? (
+                      <div className="unknownCount-count">
+                        <span className="name">未知</span>
+                        <span className="num">
+                          <CountUp
+                            className="num"
+                            end={status.siteOverview.unknownCount}
+                            duration={1}
+                          />
+                        </span>
+                      </div>
+                    ) : null}
                   </div>
                 </div>
               ) : (
diff --git a/src/components/siteStatus.jsx b/src/components/siteStatus.jsx
index f873ad67..1b046e7a 100644
--- a/src/components/siteStatus.jsx
+++ b/src/components/siteStatus.jsx
@@ -35,25 +35,35 @@ const SiteStatus = ({ siteData, days, status }) => {
                   className={`site ${
                     site.status !== "ok" ? "error" : "normal"
                   }`}
-                  onClick={() => {
-                    showSiteDetails(site);
-                  }}
                 >
                   <div className="meta">
                     <div className="name">{site.name}</div>
                     <CustomLink iconDom={<LinkTwo />} to={site.url} />
                     <div
                       className={`status ${
-                        site.status === "ok" ? "normal" : "error"
+                        site.status === "ok"
+                          ? "normal"
+                          : site.status === "unknown"
+                          ? "unknown"
+                          : "error"
                       }`}
                     >
                       <div className="icon" />
                       <span className="tip">
-                        {site.status === "ok" ? "正常访问" : "无法访问"}
+                        {site.status === "ok"
+                          ? "正常访问"
+                          : site.status === "unknown"
+                          ? "状态未知"
+                          : "无法访问"}
                       </span>
                     </div>
                   </div>
-                  <div className="timeline">
+                  <div
+                    className="timeline"
+                    onClick={() => {
+                      showSiteDetails(site);
+                    }}
+                  >
                     {site.daily.map((data, index) => {
                       const { uptime, down, date } = data;
                       const time = date.format("YYYY-MM-DD");
diff --git a/src/style/index.scss b/src/style/index.scss
index 2811d52f..4d7422e8 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -6,6 +6,8 @@ $normal-color: #63ffbd;
 $normal-background-color: #3bd672;
 $error-color: #ff9595;
 $error-background-color: #de484a;
+$unknown-color: #4f4f4f;
+$unknown-background-color: #2f2f2f;
 $allErrors-color: #ff8c8c;
 $loading-color: #58d0ff;
 
@@ -170,6 +172,15 @@ body {
                 margin: 0 6px;
               }
             }
+            .unknownCount-count {
+              display: flex;
+              align-items: center;
+              &::before {
+                content: "/";
+                font-size: 16px;
+                margin: 0 6px;
+              }
+            }
             .name {
               margin-right: 4px;
             }
@@ -290,6 +301,15 @@ body {
                     }
                   }
                 }
+                &.unknown {
+                  color: $unknown-background-color;
+                  .icon {
+                    background-color: $unknown-background-color;
+                    &::after {
+                      background-color: $unknown-background-color;
+                    }
+                  }
+                }
                 .icon {
                   position: relative;
                   width: 12px;
diff --git a/src/utils/getSiteData.js b/src/utils/getSiteData.js
index 19fd5986..79bccf41 100644
--- a/src/utils/getSiteData.js
+++ b/src/utils/getSiteData.js
@@ -13,7 +13,7 @@ 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));
 
@@ -175,6 +175,9 @@ const changeSite = (data, status) => {
     const isAnyStatusOk = data.some((item) => item.status === "ok");
     const okCount = data.filter((item) => item.status === "ok").length;
     const downCount = data.filter((item) => item.status === "down").length;
+    const unknownCount = data.filter(
+      (item) => item.status === "unknown"
+    ).length;
 
     // 更改图标
     const faviconLink = document.querySelector('link[rel="shortcut icon"]');
@@ -196,6 +199,7 @@ const changeSite = (data, status) => {
       count: data.length,
       okCount,
       downCount,
+      unknownCount,
     });
   } catch (error) {
     console.error("更改站点状态时发生错误：", error);