-
- 
- {config.siteName}
-
+
+ {config.siteName}
diff --git a/src/pages/password/index.tsx b/src/pages/password/index.tsx
deleted file mode 100644
index 9b200972..00000000
--- a/src/pages/password/index.tsx
+++ /dev/null
@@ -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 (
-
-
-
- );
-};
-
-export default Password;
diff --git a/src/pages/password/index.less b/src/pages/setting/index.less
similarity index 100%
rename from src/pages/password/index.less
rename to src/pages/setting/index.less
diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
new file mode 100644
index 00000000..a2af9962
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Password;