Skip to content

phsl / new-api

Go to a project
Commit ee14893d by Calcium-Ion Committed by GitHub
Options

Merge pull request #208 from kahosan/refactor_dark_mode 

fix: the dark mode does not work for the `OperationSetting` and `SystemSetting` panels
parents 792a068c ddf72332
Showing with 95 additions and 36 deletions
web/src/components/HeaderBar.js
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { UserContext } from '../context/User'; import { UserContext } from '../context/User';
import { useSetTheme, useTheme } from '../context/Theme';
import { API, getLogo, getSystemName, showSuccess } from '../helpers'; import { API, getLogo, getSystemName, showSuccess } from '../helpers';
import '../index.css'; import '../index.css';
...@@ -34,10 +35,8 @@ const HeaderBar = () => { ...@@ -34,10 +35,8 @@ const HeaderBar = () => {
let navigate = useNavigate(); let navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false); const [showSidebar, setShowSidebar] = useState(false);
const [dark, setDark] = useState(false);
const systemName = getSystemName(); const systemName = getSystemName();
const logo = getLogo(); const logo = getLogo();
var themeMode = localStorage.getItem('theme-mode');
const currentDate = new Date(); const currentDate = new Date();
// enable fireworks on new year(1.1 and 2.9-2.24) // enable fireworks on new year(1.1 and 2.9-2.24)
const isNewYear = const isNewYear =
...@@ -66,26 +65,19 @@ const HeaderBar = () => { ...@@ -66,26 +65,19 @@ const HeaderBar = () => {
}, 3000); }, 3000);
}; };
const theme = useTheme();
const setTheme = useSetTheme();
useEffect(() => { useEffect(() => {
if (themeMode === 'dark') { if (theme === 'dark') {
switchMode(true); document.body.setAttribute('theme-mode', 'dark');
} }
if (isNewYear) { if (isNewYear) {
console.log('Happy New Year!'); console.log('Happy New Year!');
} }
}, []); }, []);
const switchMode = (model) => {
const body = document.body;
if (!model) {
body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light');
} else {
body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark');
}
setDark(model);
};
return ( return (
<> <>
<Layout> <Layout>
...@@ -132,9 +124,11 @@ const HeaderBar = () => { ...@@ -132,9 +124,11 @@ const HeaderBar = () => {
<Switch <Switch
checkedText='🌞' checkedText='🌞'
size={'large'} size={'large'}
checked={dark} checked={theme === 'dark'}
uncheckedText='🌙' uncheckedText='🌙'
onChange={switchMode} onChange={(checked) => {
setTheme(checked);
}}
/> />
{userState.user ? ( {userState.user ? (
<> <>
......
web/src/components/OperationSetting.js
...@@ -8,6 +8,8 @@ import { ...@@ -8,6 +8,8 @@ import {
verifyJSON, verifyJSON,
} from '../helpers'; } from '../helpers';
import { useTheme } from '../context/Theme';
const OperationSetting = () => { const OperationSetting = () => {
let now = new Date(); let now = new Date();
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
...@@ -77,6 +79,9 @@ const OperationSetting = () => { ...@@ -77,6 +79,9 @@ const OperationSetting = () => {
} }
}; };
const theme = useTheme();
const isDark = theme === 'dark';
useEffect(() => { useEffect(() => {
getOptions().then(); getOptions().then();
}, []); }, []);
...@@ -219,8 +224,10 @@ const OperationSetting = () => { ...@@ -219,8 +224,10 @@ const OperationSetting = () => {
return ( return (
<Grid columns={1}> <Grid columns={1}>
<Grid.Column> <Grid.Column>
<Form loading={loading}> <Form loading={loading} inverted={isDark}>
<Header as='h3'>通用设置</Header> <Header as='h3' inverted={isDark}>
通用设置
</Header>
<Form.Group widths={4}> <Form.Group widths={4}>
<Form.Input <Form.Input
label='充值链接' label='充值链接'
...@@ -299,7 +306,9 @@ const OperationSetting = () => { ...@@ -299,7 +306,9 @@ const OperationSetting = () => {
保存通用设置 保存通用设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>绘图设置</Header> <Header as='h3' inverted={isDark}>
绘图设置
</Header>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.DrawingEnabled === 'true'} checked={inputs.DrawingEnabled === 'true'}
...@@ -321,7 +330,9 @@ const OperationSetting = () => { ...@@ -321,7 +330,9 @@ const OperationSetting = () => {
/> />
</Form.Group> </Form.Group>
<Divider /> <Divider />
<Header as='h3'>屏蔽词过滤设置</Header> <Header as='h3' inverted={isDark}>
屏蔽词过滤设置
</Header>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.CheckSensitiveEnabled === 'true'} checked={inputs.CheckSensitiveEnabled === 'true'}
...@@ -381,7 +392,9 @@ const OperationSetting = () => { ...@@ -381,7 +392,9 @@ const OperationSetting = () => {
保存屏蔽词设置 保存屏蔽词设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>日志设置</Header> <Header as='h3' inverted={isDark}>
日志设置
</Header>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.LogConsumeEnabled === 'true'} checked={inputs.LogConsumeEnabled === 'true'}
...@@ -409,7 +422,9 @@ const OperationSetting = () => { ...@@ -409,7 +422,9 @@ const OperationSetting = () => {
清理历史日志 清理历史日志
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>数据看板</Header> <Header as='h3' inverted={isDark}>
数据看板
</Header>
<Form.Checkbox <Form.Checkbox
checked={inputs.DataExportEnabled === 'true'} checked={inputs.DataExportEnabled === 'true'}
label='启用数据看板（实验性）' label='启用数据看板（实验性）'
...@@ -439,7 +454,9 @@ const OperationSetting = () => { ...@@ -439,7 +454,9 @@ const OperationSetting = () => {
/> />
</Form.Group> </Form.Group>
<Divider /> <Divider />
<Header as='h3'>监控设置</Header> <Header as='h3' inverted={isDark}>
监控设置
</Header>
<Form.Group widths={3}> <Form.Group widths={3}>
<Form.Input <Form.Input
label='最长响应时间' label='最长响应时间'
...@@ -484,7 +501,9 @@ const OperationSetting = () => { ...@@ -484,7 +501,9 @@ const OperationSetting = () => {
保存监控设置 保存监控设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>额度设置</Header> <Header as='h3' inverted={isDark}>
额度设置
</Header>
<Form.Group widths={4}> <Form.Group widths={4}>
<Form.Input <Form.Input
label='新用户初始额度' label='新用户初始额度'
...@@ -535,7 +554,9 @@ const OperationSetting = () => { ...@@ -535,7 +554,9 @@ const OperationSetting = () => {
保存额度设置 保存额度设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>倍率设置</Header> <Header as='h3' inverted={isDark}>
倍率设置
</Header>
<Form.Group widths='equal'> <Form.Group widths='equal'>
<Form.TextArea <Form.TextArea
label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）' label='模型固定价格（一次调用消耗多少刀，优先级大于模型倍率）'
......
web/src/components/SystemSetting.js
...@@ -10,6 +10,8 @@ import { ...@@ -10,6 +10,8 @@ import {
} from 'semantic-ui-react'; } from 'semantic-ui-react';
import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers'; import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
import { useTheme } from '../context/Theme';
const SystemSetting = () => { const SystemSetting = () => {
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
PasswordLoginEnabled: '', PasswordLoginEnabled: '',
...@@ -57,6 +59,9 @@ const SystemSetting = () => { ...@@ -57,6 +59,9 @@ const SystemSetting = () => {
const [showPasswordWarningModal, setShowPasswordWarningModal] = const [showPasswordWarningModal, setShowPasswordWarningModal] =
useState(false); useState(false);
const theme = useTheme();
const isDark = theme === 'dark';
const getOptions = async () => { const getOptions = async () => {
const res = await API.get('/api/option/'); const res = await API.get('/api/option/');
const { success, message, data } = res.data; const { success, message, data } = res.data;
...@@ -306,8 +311,8 @@ const SystemSetting = () => { ...@@ -306,8 +311,8 @@ const SystemSetting = () => {
return ( return (
<Grid columns={1}> <Grid columns={1}>
<Grid.Column> <Grid.Column>
<Form loading={loading}> <Form loading={loading} inverted={isDark}>
<Header as='h3'>通用设置</Header> <Header as='h3' inverted={isDark}>通用设置</Header>
<Form.Group widths='equal'> <Form.Group widths='equal'>
<Form.Input <Form.Input
label='服务器地址' label='服务器地址'
...@@ -321,7 +326,7 @@ const SystemSetting = () => { ...@@ -321,7 +326,7 @@ const SystemSetting = () => {
更新服务器地址 更新服务器地址
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as='h3' inverted={isDark}>
支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！） 支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
</Header> </Header>
<Form.Group widths='equal'> <Form.Group widths='equal'>
...@@ -385,7 +390,7 @@ const SystemSetting = () => { ...@@ -385,7 +390,7 @@ const SystemSetting = () => {
</Form.Group> </Form.Group>
<Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button> <Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button>
<Divider /> <Divider />
<Header as='h3'>配置登录注册</Header> <Header as='h3' inverted={isDark}>配置登录注册</Header>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.PasswordLoginEnabled === 'true'} checked={inputs.PasswordLoginEnabled === 'true'}
...@@ -468,7 +473,7 @@ const SystemSetting = () => { ...@@ -468,7 +473,7 @@ const SystemSetting = () => {
/> />
</Form.Group> </Form.Group>
<Divider /> <Divider />
<Header as='h3'> <Header as='h3' inverted={isDark}>
配置邮箱域名白名单 配置邮箱域名白名单
<Header.Subheader> <Header.Subheader>
用以防止恶意用户利用临时邮箱批量注册 用以防止恶意用户利用临时邮箱批量注册
...@@ -533,7 +538,7 @@ const SystemSetting = () => { ...@@ -533,7 +538,7 @@ const SystemSetting = () => {
保存邮箱域名白名单设置 保存邮箱域名白名单设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as='h3' inverted={isDark}>
配置 SMTP 配置 SMTP
<Header.Subheader>用以支持系统的邮件发送</Header.Subheader> <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
</Header> </Header>
...@@ -592,7 +597,7 @@ const SystemSetting = () => { ...@@ -592,7 +597,7 @@ const SystemSetting = () => {
</Form.Group> </Form.Group>
<Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button> <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as='h3' inverted={isDark}>
配置 GitHub OAuth App 配置 GitHub OAuth App
<Header.Subheader> <Header.Subheader>
用以支持通过 GitHub 进行登录注册， 用以支持通过 GitHub 进行登录注册，
...@@ -634,7 +639,7 @@ const SystemSetting = () => { ...@@ -634,7 +639,7 @@ const SystemSetting = () => {
保存 GitHub OAuth 设置 保存 GitHub OAuth 设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as='h3' inverted={isDark}>
配置 WeChat Server 配置 WeChat Server
<Header.Subheader> <Header.Subheader>
用以支持通过微信进行登录注册， 用以支持通过微信进行登录注册，
...@@ -679,7 +684,7 @@ const SystemSetting = () => { ...@@ -679,7 +684,7 @@ const SystemSetting = () => {
保存 WeChat Server 设置 保存 WeChat Server 设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'>配置 Telegram 登录</Header> <Header as='h3' inverted={isDark}>配置 Telegram 登录</Header>
<Form.Group inline> <Form.Group inline>
<Form.Input <Form.Input
label='Telegram Bot Token' label='Telegram Bot Token'
...@@ -700,7 +705,7 @@ const SystemSetting = () => { ...@@ -700,7 +705,7 @@ const SystemSetting = () => {
保存 Telegram 登录设置 保存 Telegram 登录设置
</Form.Button> </Form.Button>
<Divider /> <Divider />
<Header as='h3'> <Header as='h3' inverted={isDark}>
配置 Turnstile 配置 Turnstile
<Header.Subheader> <Header.Subheader>
用以支持用户校验， 用以支持用户校验，
......
web/src/context/Theme/index.js 0 → 100644
import { createContext, useCallback, useContext, useState } from 'react';
const ThemeContext = createContext(null);
export const useTheme = () => useContext(ThemeContext);
const SetThemeContext = createContext(null);
export const useSetTheme = () => useContext(SetThemeContext);
export const ThemeProvider = ({ children }) => {
const [theme, _setTheme] = useState(() => {
try {
return localStorage.getItem('theme-mode') || null;
} catch {
return null;
}
});
const setTheme = useCallback((input) => {
_setTheme(input ? 'dark' : 'light');
const body = document.body;
if (!input) {
body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light');
} else {
body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark');
}
}, []);
return (
<SetThemeContext.Provider value={setTheme}>
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
</SetThemeContext.Provider>
);
};
web/src/index.js
...@@ -12,6 +12,7 @@ import 'react-toastify/dist/ReactToastify.css'; ...@@ -12,6 +12,7 @@ import 'react-toastify/dist/ReactToastify.css';
import { StatusProvider } from './context/Status'; import { StatusProvider } from './context/Status';
import { Layout } from '@douyinfe/semi-ui'; import { Layout } from '@douyinfe/semi-ui';
import SiderBar from './components/SiderBar'; import SiderBar from './components/SiderBar';
import { ThemeProvider } from './context/Theme';
// initialization // initialization
...@@ -22,6 +23,7 @@ root.render( ...@@ -22,6 +23,7 @@ root.render(
<StatusProvider> <StatusProvider>
<UserProvider> <UserProvider>
<BrowserRouter> <BrowserRouter>
<ThemeProvider>
<Layout> <Layout>
<Sider> <Sider>
<SiderBar /> <SiderBar />
...@@ -43,6 +45,7 @@ root.render( ...@@ -43,6 +45,7 @@ root.render(
</Layout> </Layout>
<ToastContainer /> <ToastContainer />
</Layout> </Layout>
</ThemeProvider>
</BrowserRouter> </BrowserRouter>
</UserProvider> </UserProvider>
</StatusProvider> </StatusProvider>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment