From 1b9bc1adebd7a851c9e6cd14a413e5c5ca59f115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <liuyuyang1024@yeah.net>
Date: Mon, 9 Dec 2024 20:30:58 +0800
Subject: [PATCH] =?UTF-8?q?UI=EF=BC=9A=E5=AE=8C=E6=88=90Antd=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=BA=93=E6=9A=97=E8=89=B2=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   | 33 ++++++++++++++-----
 .../components/VisitorsStatisChat/index.tsx   |  6 ++--
 tailwind.config.cjs                           |  4 +--
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a04be0d..5487e81 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,44 +2,59 @@ import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import Loader from './common/Loader';
 import useAuthRedirect from '@/hooks/useAuthRedirect';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, theme } from 'antd';
 import RouteList from './components/RouteList';
-import "@/styles/customAntd.scss"
+import "@/styles/customAntd.scss";
 
 import { getConfigDataAPI } from '@/api/Project';
 import { useWebStore } from './stores';
 import { Web } from './types/app/project';
 
 function App() {
-  useAuthRedirect()
+  useAuthRedirect();
 
   const [loading, setLoading] = useState<boolean>(true);
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false);
   const { pathname } = useLocation();
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  // 获取网站数据并把数据共享给全局方便使用
-  const setWeb = useWebStore(state => state.setWeb)
+  const setWeb = useWebStore(state => state.setWeb);
   const getWebData = async () => {
     const { data } = await getConfigDataAPI<Web>("web");
-    setWeb(data)
+    setWeb(data);
   };
+
   useEffect(() => {
-    getWebData()
+    getWebData();
     setTimeout(() => setLoading(false), 1000);
+
+    const bodyClassList = document.body.classList;
+
+    // 监听类名变化
+    const observer = new MutationObserver(() => {
+      setIsDarkTheme(bodyClassList.contains('dark'));
+    });
+
+    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+    return () => observer.disconnect();
   }, []);
 
   return loading ? (
     <Loader />
   ) : (
-    // 自定义主题色
+    // 根据主题切换配置主题
     <ConfigProvider
       theme={{
         token: {
           colorPrimary: '#727cf5',
+          colorBgBase: isDarkTheme ? '#24303F' : '#ffffff',
+          colorTextBase: isDarkTheme ? '#e0e0e0' : '#000000'
         },
+        algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
       }}
     >
       <RouteList />
@@ -47,4 +62,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx b/src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx
index 498dec5..7817f75 100644
--- a/src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx
+++ b/src/pages/Dashboard/components/Stats/components/VisitorsStatisChat/index.tsx
@@ -295,15 +295,15 @@ const VisitorsStatisChat = () => {
 
                 <div className="flex w-full max-w-45 justify-end">
                     <div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
-                        <button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark ${scope === "day" ? "bg-white shadow-card" : ""}`} onClick={() => handleScopeChange("day")}>
+                        <button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-meta-4 dark:text-white dark:hover:bg-boxdark ${scope === "day" ? "bg-white dark:!bg-[#4e5969] shadow-card" : ""}`} onClick={() => handleScopeChange("day")}>
                             天
                         </button>
 
-                        <button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark ${scope === "month" ? "bg-white shadow-card" : ""}`} onClick={() => handleScopeChange("month")}>
+                        <button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-meta-4 dark:text-white dark:hover:bg-boxdark ${scope === "month" ? "bg-white dark:!bg-[#4e5969] shadow-card" : ""}`} onClick={() => handleScopeChange("month")}>
                             月
                         </button>
 
-                        <button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark ${scope === "year" ? "bg-white shadow-card" : ""}`} onClick={() => handleScopeChange("year")}>
+                        <button className={`rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:bg-meta-4 dark:text-white dark:hover:bg-boxdark ${scope === "year" ? "bg-white dark:!bg-[#4e5969] shadow-card" : ""}`} onClick={() => handleScopeChange("year")}>
                             年
                         </button>
                     </div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8419dd0..c9ccfb0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -39,9 +39,9 @@ module.exports = {
         'gray-3': '#FAFAFA',
         whiten: '#F1F5F9',
         whiter: '#F5F7FD',
-        boxdark: '#24303F',
+        boxdark: '#334459',
         'boxdark-2': '#1A222C',
-        strokedark: '#2E3A47',
+        strokedark: '#475f7d',
         'form-strokedark': '#3d4d60',
         'form-input': '#1d2a39',
         'meta-1': '#DC3545',