支持暗黑模式

.umirc.ts

@@ -1,10 +1,4 @@
 import { defineConfig } from 'umi';
-import {
-  SmileOutlined,
-  CrownOutlined,
-  TabletOutlined,
-  AntDesignOutlined,
-} from '@ant-design/icons';
 
 export default defineConfig({
   hash: true,

package.json

@@ -32,6 +32,7 @@
     "celebrate": "^13.0.3",
     "codemirror": "^5.59.4",
     "cors": "^2.8.5",
+    "darkreader": "^4.9.27",
     "dotenv": "^8.2.0",
     "errorhandler": "^1.5.1",
     "event-dispatch": "^0.4.1",

src/layouts/defaultProps.tsx

@@ -5,8 +5,8 @@ import {
   SettingOutlined,
   CodeOutlined,
   FolderOutlined,
-  LockOutlined,
   RadiusSettingOutlined,
+  ControlOutlined,
 } from '@ant-design/icons';
 import logo from '@/assets/logo.png';
 
@@ -28,7 +28,7 @@ export default {
       {
         path: '/config',
         name: '配置文件',
-        icon: <SettingOutlined />,
+        icon: <ControlOutlined />,
         component: '@/pages/config/index',
       },
       {
@@ -62,9 +62,9 @@ export default {
         component: '@/pages/log/index',
       },
       {
-        path: '/password',
-        name: '修改密码',
-        icon: <LockOutlined />,
+        path: '/setting',
+        name: '系统设置',
+        icon: <SettingOutlined />,
         component: '@/pages/password/index',
       },
     ],
@@ -72,8 +72,8 @@ export default {
   location: {
     pathname: '/',
   },
-  fixSiderbar: true,
   navTheme: 'light',
+  fixSiderbar: true,
   contentWidth: 'Fixed',
   splitMenus: false,
   logo: logo,

src/layouts/index.less

@@ -15,9 +15,10 @@ body {
 
 .ant-pro-grid-content.wide {
   max-width: unset;
-  height: calc(100vh - 72px);
   overflow: auto;
-  .ant-pro-page-container-children-content{
+  .ant-pro-page-container-children-content {
     overflow: auto;
+    min-height: calc(100vh - 96px);
+    background-color: #fff;
   }
 }

src/layouts/index.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Descriptions, Result, Avatar, Space, Statistic } from 'antd';
-import { LikeOutlined, UserOutlined } from '@ant-design/icons';
-import ProLayout, {
-  PageContainer,
-  PageLoading,
-  SettingDrawer,
-} from '@ant-design/pro-layout';
+import ProLayout from '@ant-design/pro-layout';
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+  setFetchMethod,
+} from 'darkreader';
 import defaultProps from './defaultProps';
 import { Link, history } from 'umi';
 import config from '@/utils/config';
@@ -19,11 +18,26 @@ export default function (props: any) {
       history.push('/login');
     }
   }, []);
+
   useEffect(() => {
     if (props.location.pathname === '/') {
       history.push('/cookie');
     }
   }, [props.location.pathname]);
+
+  useEffect(() => {
+    const colorScheme =
+      window.matchMedia('(prefers-color-scheme: dark)').matches && 'dark';
+    const theme =
+      localStorage.getItem('qinglong_dark_theme') || colorScheme || 'light';
+    setFetchMethod(window.fetch);
+    if (theme === 'dark') {
+      enableDarkMode({ darkSchemeTextColor: '#fff' });
+    } else if (theme === 'light') {
+      disableDarkMode();
+    }
+  }, []);
+
   if (props.location.pathname === '/login') {
     return props.children;
   }
@@ -41,11 +55,6 @@ export default function (props: any) {
         }
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
-      //   rightContentRender={() => (
-      //       <div>
-      //           <Avatar shape="square" size="small" icon={<UserOutlined />} />
-      //       </div>
-      //   )}
       {...defaultProps}
     >
       {props.children}

src/pages/login/index.less

@@ -26,7 +26,7 @@
   width: 320px;
   height: 320px;
   padding: 36px;
-  // box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
 }
 
 @media (min-width: @screen-md-min) {
@@ -36,10 +36,6 @@
     background-position: center 110px;
     background-size: 100%;
   }
-
-  .content {
-    padding: 32px 0 24px;
-  }
 }
 
 .top {
@@ -49,26 +45,14 @@
 .header {
   height: 44px;
   line-height: 44px;
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .logo {
-  height: 44px;
-  margin-right: 16px;
-  vertical-align: top;
-}
-
-.title {
-  position: relative;
-  top: 2px;
-  color: @heading-color;
-  font-weight: 600;
-  font-size: 33px;
-  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  width: 40px;
+  margin-right: 8px;
 }
 
 .desc {
@@ -79,8 +63,7 @@
 }
 
 .main {
-  width: 320px;
-  margin: 25px auto 0;
+  margin: 35px auto 0;
   @media screen and (max-width: @screen-sm) {
     width: 95%;
     max-width: 320px;

src/pages/login/index.tsx

@@ -44,10 +44,8 @@ const Login = () => {
       <div className={styles.content}>
         <div className={styles.top}>
           <div className={styles.header}>
-            <Link to="/">
-              <img alt="logo" className={styles.logo} src={logo} />
-              <span className={styles.title}>{config.siteName}</span>
-            </Link>
+            <img alt="logo" className={styles.logo} src={logo} />
+            <span className={styles.title}>{config.siteName}</span>
           </div>
         </div>
         <div className={styles.main}>

src/pages/password/index.tsx

@@ -1,97 +0,0 @@
-import React, { PureComponent, Fragment, useState, useEffect } from 'react';
-import { Button, notification, Input, Form } from 'antd';
-import config from '@/utils/config';
-import { PageContainer } from '@ant-design/pro-layout';
-import { Controlled as CodeMirror } from 'react-codemirror2';
-import { request } from '@/utils/http';
-
-const Password = () => {
-  const [width, setWdith] = useState('100%');
-  const [marginLeft, setMarginLeft] = useState(0);
-  const [marginTop, setMarginTop] = useState(-72);
-  const [value, setValue] = useState('');
-  const [loading, setLoading] = useState(true);
-
-  const handleOk = (values: any) => {
-    request
-      .post(`${config.apiPrefix}auth?t=${Date.now()}`, {
-        data: {
-          username: values.username,
-          password: values.password,
-        },
-      })
-      .then((data) => {
-        if (data.err == 0) {
-          localStorage.setItem(config.authKey, 'true');
-        } else {
-          notification.open({
-            message: data.msg,
-          });
-        }
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
-  };
-
-  useEffect(() => {
-    if (document.body.clientWidth < 768) {
-      setWdith('auto');
-      setMarginLeft(0);
-      setMarginTop(0);
-    } else {
-      setWdith('100%');
-      setMarginLeft(0);
-      setMarginTop(-72);
-    }
-  }, []);
-
-  return (
-    <PageContainer
-      className="code-mirror-wrapper"
-      title="修改密码"
-      header={{
-        style: {
-          padding: '4px 16px 4px 15px',
-          position: 'sticky',
-          top: 0,
-          left: 0,
-          zIndex: 20,
-          marginTop,
-          width,
-          marginLeft,
-        },
-      }}
-      style={{
-        height: '100vh',
-      }}
-    >
-      <Form
-        onFinish={handleOk}
-        style={{ padding: 20, height: 'calc(100vh - 96px)' }}
-      >
-        <Form.Item
-          name="username"
-          rules={[{ required: true, message: '请输入用户名' }]}
-          hasFeedback
-          style={{ width: 300 }}
-        >
-          <Input placeholder="用户名" autoFocus />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          rules={[{ required: true, message: '请输入密码' }]}
-          hasFeedback
-          style={{ width: 300 }}
-        >
-          <Input type="password" placeholder="密码" />
-        </Form.Item>
-        <Button type="primary" htmlType="submit">
-          保存
-        </Button>
-      </Form>
-    </PageContainer>
-  );
-};
-
-export default Password;

src/pages/setting/index.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import { Button, notification, Input, Form, Radio, Tabs } from 'antd';
+import config from '@/utils/config';
+import { PageContainer } from '@ant-design/pro-layout';
+import { request } from '@/utils/http';
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+  setFetchMethod,
+} from 'darkreader';
+
+const optionsWithDisabled = [
+  { label: '亮色', value: 'light' },
+  { label: '暗色', value: 'dark' },
+  { label: '跟随系统', value: 'auto' },
+];
+
+const Password = () => {
+  const [width, setWdith] = useState('100%');
+  const [marginLeft, setMarginLeft] = useState(0);
+  const [marginTop, setMarginTop] = useState(-72);
+  const [value, setValue] = useState('');
+  const [loading, setLoading] = useState(true);
+  const colorScheme =
+    window.matchMedia('(prefers-color-scheme: dark)').matches && 'dark';
+  const defaultDarken =
+    localStorage.getItem('qinglong_dark_theme') || colorScheme;
+  const [theme, setTheme] = useState(defaultDarken);
+
+  const handleOk = (values: any) => {
+    request
+      .post(`${config.apiPrefix}auth?t=${Date.now()}`, {
+        data: {
+          username: values.username,
+          password: values.password,
+        },
+      })
+      .then((data) => {
+        if (data.err == 0) {
+          localStorage.setItem(config.authKey, 'true');
+        } else {
+          notification.open({
+            message: data.msg,
+          });
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  };
+
+  const themeChange = (e: any) => {
+    setTheme(e.target.value);
+    localStorage.setItem('qinglong_dark_theme', e.target.value);
+  };
+
+  useEffect(() => {
+    if (document.body.clientWidth < 768) {
+      setWdith('auto');
+      setMarginLeft(0);
+      setMarginTop(0);
+    } else {
+      setWdith('100%');
+      setMarginLeft(0);
+      setMarginTop(-72);
+    }
+  }, []);
+
+  useEffect(() => {
+    setFetchMethod(window.fetch);
+    if (theme === 'dark') {
+      enableDarkMode({ darkSchemeTextColor: '#fff' });
+    } else if (theme === 'light') {
+      disableDarkMode();
+    } else {
+      enableDarkMode({ darkSchemeTextColor: '#fff' });
+    }
+  }, [theme]);
+
+  return (
+    <PageContainer
+      className="code-mirror-wrapper"
+      title="系统设置"
+      header={{
+        style: {
+          padding: '4px 16px 4px 15px',
+          position: 'sticky',
+          top: 0,
+          left: 0,
+          zIndex: 20,
+          marginTop,
+          width,
+          marginLeft,
+        },
+      }}
+      style={{
+        height: '100vh',
+      }}
+    >
+      <Tabs
+        defaultActiveKey="person"
+        tabPosition="left"
+        style={{ padding: '16px 0', height: 'calc(100vh - 96px)' }}
+      >
+        <Tabs.TabPane tab="个人设置" key="person">
+          <Form onFinish={handleOk} layout="vertical">
+            <Form.Item
+              label="用户名"
+              name="username"
+              rules={[{ required: true }]}
+              hasFeedback
+              style={{ width: 300 }}
+            >
+              <Input placeholder="用户名" autoFocus />
+            </Form.Item>
+            <Form.Item
+              label="密码"
+              name="password"
+              rules={[{ required: true }]}
+              hasFeedback
+              style={{ width: 300 }}
+            >
+              <Input type="password" placeholder="密码" />
+            </Form.Item>
+            <Button type="primary" htmlType="submit">
+              保存
+            </Button>
+          </Form>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="其他设置" key="theme">
+          <Form layout="vertical">
+            <Form.Item label="主题设置" name="theme" initialValue={theme}>
+              <Radio.Group
+                options={optionsWithDisabled}
+                onChange={themeChange}
+                value={theme}
+                optionType="button"
+                buttonStyle="solid"
+              />
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+      </Tabs>
+    </PageContainer>
+  );
+};
+
+export default Password;