UI：完成Antd组件库暗色适配

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;

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>

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',