feat: 试验性深色模式!

BalloonUpdate · Dec 11, 2024 · 158b5e5 · 158b5e5
1 parent 818de3b
commit 158b5e5
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 64 deletions.
diff --git a/src/components/FileBreadcrumb/index.jsx b/src/components/FileBreadcrumb/index.jsx
@@ -14,11 +14,11 @@ const Index = ({path, handlerBreadcrumb}) => {
                 <li key={index} className="flex items-center cursor-default">
                   {
                     items.length - 1 !== index ?
-                      <div className="text-base text-gray-800 font-medium">
+                      <div className="text-base text-gray-800 dark:text-gray-500 font-medium">
                         <button onClick={() => handlerBreadcrumb(index)}>{item}</button>
                         <span className="px-3 text-body-color">{" / "}</span>
                       </div> :
-                      <div className="text-base text-gray-400 font-medium">
+                      <div className="text-base text-gray-400 dark:text-white font-medium">
                         {item}
                       </div>
                   }

diff --git a/src/components/TileViewFileExplorer/index.css b/src/components/TileViewFileExplorer/index.css
@@ -1,3 +1,3 @@
 .text-item {
-    @apply flex rounded-md items-center w-full text-sm text-gray-700;
+    @apply flex rounded-md items-center w-full text-sm text-gray-700 dark:text-white;
 }
diff --git a/src/components/TileViewFileExplorer/index.jsx b/src/components/TileViewFileExplorer/index.jsx
@@ -116,7 +116,7 @@ const Index = ({path, getFileList, items, handlerNextPath}) => {
         isOpen ?
           <div
             ref={menuRef}
-            className="absolute bg-white rounded-md shadow-lg w-60"
+            className="absolute bg-white dark:bg-gray-900 rounded-md shadow-lg w-60"
             style={{
               left: `${menuPosition.x}px`,
               top: `${menuPosition.y}px`,
@@ -127,7 +127,7 @@ const Index = ({path, getFileList, items, handlerNextPath}) => {
           >
             <div className="p-1">
               <div
-                className="flex flex-col rounded-md w-full p-2 text-sm cursor-pointer hover:bg-gray-200 duration-200">
+                className="flex flex-col rounded-md w-full p-2 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800 duration-200">
                 <div className="text-item">名称: {selectedItem.name}</div>
                 <div className="text-item">类型: {selectedItem.is_directory ? "文件夹" : "文件"}</div>
                 <div className="text-item">大小: {showFileSize(selectedItem.size)}</div>
@@ -140,7 +140,7 @@ const Index = ({path, getFileList, items, handlerNextPath}) => {
                 <>
                   <button
                     onClick={() => fsOpenOrDownload(selectedItem)}
-                    className="flex items-center rounded-md w-full p-2 text-sm text-indigo-500 hover:bg-indigo-100 duration-200">
+                    className="flex items-center rounded-md w-full p-2 text-sm text-indigo-500 hover:bg-indigo-100 dark:hover:bg-gray-800 duration-200">
                     打开
                   </button>
                 </>
@@ -150,15 +150,15 @@ const Index = ({path, getFileList, items, handlerNextPath}) => {
                 <>
                   <button
                     onClick={() => fsOpenOrDownload(selectedItem)}
-                    className="flex items-center rounded-md w-full p-2 text-sm text-indigo-500 hover:bg-indigo-100 duration-200">
+                    className="flex items-center rounded-md w-full p-2 text-sm text-indigo-500 hover:bg-indigo-100 dark:hover:bg-gray-800 duration-200">
                     下载
                   </button>
                 </>
               }
               {
                 <button
                   onClick={() => fsDelete(selectedItem)}
-                  className="flex items-center rounded-md w-full p-2 text-sm text-red-500 hover:bg-red-100 duration-200">
+                  className="flex items-center rounded-md w-full p-2 text-sm text-red-500 hover:bg-red-100 dark:hover:bg-gray-800 duration-200">
                   删除
                 </button>
               }

diff --git a/src/main.jsx b/src/main.jsx
@@ -7,14 +7,11 @@ import {Provider} from "react-redux";
 
 import router from "@/router/index.jsx";
 import store from "@/store/index.js";
-import {ConfigProvider} from "antd";
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <ConfigProvider theme={{token: {colorPrimary: '#4f46e5'}}}>
-      <Provider store={store}>
-        <RouterProvider router={router}/>
-      </Provider>
-    </ConfigProvider>
+    <Provider store={store}>
+      <RouterProvider router={router}/>
+    </Provider>
   </StrictMode>
 )
diff --git a/src/pages/App.jsx b/src/pages/App.jsx
@@ -1,10 +1,33 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Outlet} from "react-router-dom";
+import {ConfigProvider, FloatButton, theme} from "antd";
+import {MoonStar, Sun} from "lucide-react";
 
 const App = () => {
+
+  const [darkMode, setDarkMode] = useState(localStorage.getItem("darkMode") === "true");
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    localStorage.setItem('darkMode', darkMode.toString());
+  }, [darkMode]);
+
   return (
     <>
-      <Outlet/>
+      <ConfigProvider
+        theme={{token: {colorPrimary: '#4f46e5'}, algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm}}>
+        <div className="dark:bg-gray-950">
+          <Outlet/>
+          <FloatButton
+            icon={darkMode ? <Sun className="w-full h-full"/> : <MoonStar className="w-full h-full"/>}
+            tooltip={<div>深色模式</div>}
+            onClick={() => setDarkMode(!darkMode)}/>
+        </div>
+      </ConfigProvider>
     </>
   );
 };

diff --git a/src/pages/Dashboard/Folder/index.jsx b/src/pages/Dashboard/Folder/index.jsx
@@ -29,14 +29,14 @@ const Index = () => {
 
   return (
     <>
-      <div className="flex flex-col min-h-[calc(100vh-5rem)]">
+      <div className="flex flex-col min-h-screen p-10">
         <div>
           <FileBreadcrumb path={path} handlerBreadcrumb={handlerBreadcrumb}/>
         </div>
         <div className="mt-2 pt-4 pb-2">
           <FolderButtonGroup path={path} getFileList={getFileList}/>
         </div>
-        <div className="flex-1 mt-2 h-full bg-gray-100">
+        <div className="flex-1 mt-2 h-full bg-gray-100 dark:bg-gray-800">
           <TileViewFileExplorer
             path={path}
             getFileList={getFileList}

diff --git a/src/pages/Dashboard/Help/index.jsx b/src/pages/Dashboard/Help/index.jsx
@@ -3,12 +3,14 @@ import {SquareArrowOutUpRight} from "lucide-react";
 const Index = () => {
   return (
     <>
-      <div className="flex items-center mt-2 text-base font-bold text-indigo-600">
-        <span>官方文档:</span>
-        <a className="flex items-center ml-2 text-gray-500 w-40" target="_blank"
-           href="https://balloonupdate.github.io/McPatchDocs/">
-          [打开<SquareArrowOutUpRight size={12} strokeWidth={1.5}/>]
-        </a>
+      <div className="p-10 min-h-screen">
+        <div className="flex items-center text-base font-bold text-indigo-600">
+          <span>官方文档:</span>
+          <a className="flex items-center ml-2 text-gray-500 dark:text-white w-40" target="_blank"
+             href="https://balloonupdate.github.io/McPatchDocs/">
+            [打开&nbsp;<SquareArrowOutUpRight size={12} strokeWidth={1.5}/>]
+          </a>
+        </div>
       </div>
     </>
   );

diff --git a/src/pages/Dashboard/Log/index.jsx b/src/pages/Dashboard/Log/index.jsx
@@ -153,7 +153,7 @@ const Index = () => {
   return (
     <>
       {contextHolder}
-      <div className="flex flex-col min-h-[calc(100vh-80px)]">
+      <div className="flex flex-col p-10 min-h-screen">
         <div className="flex justify-start items-center h-8">
           <Popconfirm title="风险操作,请再次确认!" onConfirm={taskStatus} okText="确定" cancelText="取消">
             <Button type="primary" size="large">检查文件修改</Button>
@@ -183,7 +183,7 @@ const Index = () => {
         </div>
         <div
           ref={logsRef}
-          className="flex-1 mt-4 bg-black text-white overflow-auto min-h-[calc(100vh-160px)] max-h-[calc(100vh-160px)]">
+          className="flex-1 mt-8 bg-black dark:bg-gray-800 text-white overflow-auto min-h-[calc(100vh-160px)] max-h-[calc(100vh-160px)]">
           {
             logs.map((item, index) => {
               return (

diff --git a/src/pages/Dashboard/Overview/index.jsx b/src/pages/Dashboard/Overview/index.jsx
@@ -17,7 +17,7 @@ const Index = () => {
 
   return (
     <>
-      <div className="mt-2">
+      <div className="p-10 min-h-screen">
         <div className="text-2xl font-bold text-indigo-600">磁盘使用量</div>
         <div className='h-8 mt-2 mb-2 bg-indigo-100 dark:bg-dark-3 relative w-full rounded-2xl'>
           <div

diff --git a/src/pages/Dashboard/Settings/index.jsx b/src/pages/Dashboard/Settings/index.jsx
@@ -34,8 +34,8 @@ const Index = () => {
   return (
     <>
       {contextHolder}
-      <div>
-        <Card title="修改用户名" className="w-80 shadow-[0_4px_6px_rgba(0,0,0,0.1)]">
+      <div className="p-10 min-h-screen">
+        <Card title="修改用户名" className="w-80 shadow-[0_4px_6px_rgba(0,0,0,0.1)] ">
           <Form
             layout="vertical"
             initialValues={{layout: 'vertical'}}

diff --git a/src/pages/Dashboard/index.jsx b/src/pages/Dashboard/index.jsx
@@ -76,7 +76,7 @@ const Index = () => {
       {contextHolder}
       <div className="flex">
         <div
-          className="fixed top-0 left-0 w-full h-full border-r bg-white space-y-8 sm:w-60">
+          className="fixed top-0 left-0 w-full h-full border-r dark:border-gray-900 bg-white dark:bg-gray-950 space-y-8 sm:w-60">
           <div className="flex flex-col h-full">
             <div className='h-20 flex justify-center items-center px-8'>
               <div className='flex-none cursor-pointer' onClick={() => navigate('/')}>
@@ -91,8 +91,8 @@ const Index = () => {
                     return (
                       <li key={idx}>
                         <div onClick={() => navigate(item.nav)}
-                             className={`flex items-center gap-x-2 text-gray-600 p-2 rounded-lg cursor-pointer ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50 active:bg-gray-100 duration-150'}`}>
-                          <div className="text-gray-500">{item.icon}</div>
+                             className={`flex items-center gap-x-2 text-gray-600 dark:text-white p-2 rounded-lg cursor-pointer ${isActive ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 duration-150'}`}>
+                          <div className="text-gray-500 dark:text-white">{item.icon}</div>
                           {item.name}
                         </div>
                       </li>
@@ -108,8 +108,8 @@ const Index = () => {
                       return (
                         <li key={idx}>
                           <div onClick={() => navigate(item.nav)}
-                               className={`flex items-center gap-x-2 text-gray-600 p-2 rounded-lg cursor-pointer ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50 active:bg-gray-100 duration-150'}`}>
-                            <div className="text-gray-500">{item.icon}</div>
+                               className={`flex items-center gap-x-2 text-gray-600 dark:text-white p-2 rounded-lg cursor-pointer ${isActive ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 duration-150'}`}>
+                            <div className="text-gray-500 dark:text-white">{item.icon}</div>
                             {item.name}
                           </div>
                         </li>
@@ -119,18 +119,18 @@ const Index = () => {
                   <li>
                     <div
                       onClick={() => signOut()}
-                      className={`flex items-center gap-x-2 text-gray-600 p-2 rounded-lg cursor-pointer hover:bg-gray-50 active:bg-gray-100 duration-150}`}>
-                      <div className="text-gray-500"><LogOut size={16} strokeWidth={1.5}/></div>
+                      className={`flex items-center gap-x-2 text-gray-600 dark:text-white p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 duration-150}`}>
+                      <div className="text-gray-500 dark:text-white"><LogOut size={16} strokeWidth={1.5}/></div>
                       退出登录
                     </div>
                   </li>
                 </ul>
-                <div className="py-4 px-4 border-t">
+                <div className="py-4 px-4 border-t dark:border-gray-900">
                   <div className="flex items-center gap-x-4">
                     {/*<img src="" className="w-12 h-12 rounded-full"/>*/}
-                    <CircleUserRound size={40} strokeWidth={1.0}/>
+                    <CircleUserRound className="dark:text-white" size={40} strokeWidth={1.0}/>
                     <div>
-                      <span className="block text-gray-700 text-sm font-semibold">ADMIN</span>
+                      <span className="block text-gray-700 dark:text-white text-sm font-semibold">ADMIN</span>
                     </div>
                   </div>
                 </div>
@@ -139,7 +139,7 @@ const Index = () => {
           </div>
         </div>
 
-        <div className="ml-60 p-10 flex-grow">
+        <div className="ml-60 flex-grow">
           <Outlet/>
         </div>
       </div>

diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
@@ -1,10 +1,14 @@
 import {useNavigate} from "react-router-dom";
 import {useSelector} from "react-redux";
+import {theme} from "antd";
+
+const {useToken} = theme;
 
 const Index = () => {
 
   const user = useSelector(state => state.user)
   const navigate = useNavigate();
+  const {token} = useToken();
 
   const checkStatus = () => {
     if (user.token) {
@@ -16,12 +20,12 @@ const Index = () => {
 
   return (
     <>
-      <div className="w-screen h-screen flex flex-col justify-center items-center mt-[-100px] space-y-4">
+      <div className="w-screen h-screen flex flex-col justify-center items-center space-y-4">
         <h2
           className="text-transparent bg-clip-text bg-gradient-to-r from-[#4F46E5] to-[#E114E5] text-4xl font-extrabold md:text-5xl">
           McPatch
         </h2>
-        <p className="max-w-2xl mx-auto text-center">
+        <p className={`max-w-2xl mx-auto text-center dark:text-white`}>
           McPatch 是一个给 Minecraft 客户端做文件更新的独立应用程序.只要你想,你可以通过这个程序向你服务器的玩家提供一切内容.
         </p>
         <button

diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
@@ -42,7 +42,6 @@ const Index = () => {
     e.preventDefault()
 
     const password = e.target[1].value
-    const remember = e.target[2].checked
 
     const {flag, msg} = await dispatch(userLogin(username, password));
     if (flag) {
@@ -56,16 +55,15 @@ const Index = () => {
     <>
       {contextHolder}
       <div className="w-full h-screen flex flex-col items-center justify-center px-4">
-        <div className="max-w-sm w-full text-gray-600 space-y-5">
+        <div className="max-w-sm w-full text-gray-500 dark:text-white space-y-5">
           <div className="text-center pb-8">
             <div className="text-4xl font-bold text-indigo-600">McPatch</div>
           </div>
           <form
             onSubmit={login}
-            className="space-y-5"
-          >
+            className="space-y-5">
             <div>
-              <label className="font-medium">
+              <label>
                 用户名
               </label>
               <input
@@ -74,37 +72,27 @@ const Index = () => {
                 name="username"
                 type="text"
                 required
-                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
+                className="w-full mt-2 px-3 py-2 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
               />
             </div>
             <div>
-              <label className="font-medium">
+              <label>
                 密码
               </label>
               <input
                 name="password"
                 type="password"
                 required
-                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
+                className="w-full mt-2 px-3 py-2 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
               />
             </div>
             <div className="flex items-center justify-between text-sm">
-              <div className="flex items-center gap-x-3">
-                <input type="checkbox" id="remember-me-checkbox" className="checkbox-item peer hidden"
-                       name="rememberMe"/>
-                <label
-                  htmlFor="remember-me-checkbox"
-                  className="relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45"
-                >
-                </label>
-                <span>记住密码</span>
-              </div>
-              <a href="#" className="text-center text-indigo-600 hover:text-indigo-500">忘记密码?</a>
+              <a href="#"
+                 className="text-center text-indigo-600 dark:text-indigo-500 hover:text-indigo-500 dark:hover:text-indigo-400">忘记密码?</a>
             </div>
             <button
               className="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
-              type="submit"
-            >
+              type="submit">
               登录
             </button>
           </form>

diff --git a/src/pages/NotFound/index.jsx b/src/pages/NotFound/index.jsx
@@ -9,7 +9,7 @@ const Index = () => {
       <div className="max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8">
         <div className="max-w-lg mx-auto space-y-3 text-center">
           <div className="text-4xl text-indigo-600">McPatch</div>
-          <p className="text-gray-600">
+          <p className="text-gray-600 dark:text-gray-50">
             404. 对不起,您要查找的页面无法找到或已被删除.
           </p>
           <div onClick={() => navigate(-1)}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'selector',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",