Skip to content

phsl / new-api

Go to a project
Commit 63c4b162 by CaIon
Options

钱包页面完善

parent 767c7e3e
Showing with 56 additions and 97 deletions
web/src/components/HeaderBar.js
import React, {useContext, 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';
...@@ -45,8 +45,10 @@ const HeaderBar = () => { ...@@ -45,8 +45,10 @@ 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');
async function logout() { async function logout() {
setShowSidebar(false); setShowSidebar(false);
...@@ -57,37 +59,22 @@ const HeaderBar = () => { ...@@ -57,37 +59,22 @@ const HeaderBar = () => {
navigate('/login'); navigate('/login');
} }
useEffect(() => {
if (themeMode === 'dark') {
switchMode(true);
}
}, []);
const renderButtons = (isMobile) => {
return headerButtons.map((button) => {
if (button.admin && !isAdmin()) return <></>;
if (isMobile) {
return (
<Menu.Item
onClick={() => {
navigate(button.to);
setShowSidebar(false);
}}
>
{button.name}
</Menu.Item>
);
}
return (
<Menu.Item key={button.name} as={Link} to={button.to}>
<Icon name={button.icon}/>
{button.name}
</Menu.Item>
);
});
};
const switchMode = (model) => { const switchMode = (model) => {
const body = document.body; const body = document.body;
if (!model) { if (!model) {
body.removeAttribute('theme-mode'); body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light');
} else { } else {
body.setAttribute('theme-mode', 'dark'); body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark');
} }
setDark(model);
}; };
return ( return (
<> <>
...@@ -119,7 +106,7 @@ const HeaderBar = () => { ...@@ -119,7 +106,7 @@ const HeaderBar = () => {
footer={ footer={
<> <>
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} /> <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
<Switch checkedText="🌞" size={'large'} uncheckedText="🌙" onChange={switchMode} /> <Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
{userState.user ? {userState.user ?
<> <>
<Dropdown <Dropdown
......
web/src/components/LoginForm.js
...@@ -163,55 +163,55 @@ const LoginForm = () => { ...@@ -163,55 +163,55 @@ const LoginForm = () => {
) : ( ) : (
<></> <></>
)} )}
{status.wechat_login ? ( {/*{status.wechat_login ? (*/}
<Button {/* <Button*/}
circular {/* circular*/}
color='green' {/* color='green'*/}
icon='wechat' {/* icon='wechat'*/}
onClick={onWeChatLoginClicked} {/* onClick={onWeChatLoginClicked}*/}
/> {/* />*/}
) : ( {/*) : (*/}
<></> {/* <></>*/}
)} {/*)}*/}
</div> </div>
</> </>
) : ( ) : (
<></> <></>
)} )}
<Modal {/*<Modal*/}
onClose={() => setShowWeChatLoginModal(false)} {/* onClose={() => setShowWeChatLoginModal(false)}*/}
onOpen={() => setShowWeChatLoginModal(true)} {/* onOpen={() => setShowWeChatLoginModal(true)}*/}
open={showWeChatLoginModal} {/* open={showWeChatLoginModal}*/}
size={'mini'} {/* size={'mini'}*/}
> {/*>*/}
<Modal.Content> {/* <Modal.Content>*/}
<Modal.Description> {/* <Modal.Description>*/}
<Image src={status.wechat_qrcode} fluid/> {/* <Image src={status.wechat_qrcode} fluid/>*/}
<div style={{textAlign: 'center'}}> {/* <div style={{textAlign: 'center'}}>*/}
<p> {/* <p>*/}
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） {/* 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）*/}
</p> {/* </p>*/}
</div> {/* </div>*/}
<Form size='large'> {/* <Form size='large'>*/}
<Form.Input {/* <Form.Input*/}
field={'wechat_verification_code'} {/* field={'wechat_verification_code'}*/}
placeholder='验证码' {/* placeholder='验证码'*/}
name='wechat_verification_code' {/* name='wechat_verification_code'*/}
value={inputs.wechat_verification_code} {/* value={inputs.wechat_verification_code}*/}
onChange={handleChange} {/* onChange={handleChange}*/}
/> {/* />*/}
<Button {/* <Button*/}
color='' {/* color=''*/}
fluid {/* fluid*/}
size='large' {/* size='large'*/}
onClick={onSubmitWeChatVerificationCode} {/* onClick={onSubmitWeChatVerificationCode}*/}
> {/* >*/}
登录 {/* 登录*/}
</Button> {/* </Button>*/}
</Form> {/* </Form>*/}
</Modal.Description> {/* </Modal.Description>*/}
</Modal.Content> {/* </Modal.Content>*/}
</Modal> {/*</Modal>*/}
</Card> </Card>
{turnstileEnabled ? ( {turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}> <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
......
web/src/components/SiderBar.js
...@@ -114,34 +114,6 @@ const HeaderBar = () => { ...@@ -114,34 +114,6 @@ const HeaderBar = () => {
navigate('/login'); navigate('/login');
} }
const toggleSidebar = () => {
setShowSidebar(!showSidebar);
};
const renderButtons = (isMobile) => {
return headerButtons.map((button) => {
if (button.admin && !isAdmin()) return <></>;
if (isMobile) {
return (
<Menu.Item
onClick={() => {
navigate(button.to);
setShowSidebar(false);
}}
>
{button.name}
</Menu.Item>
);
}
return (
<Menu.Item key={button.name} as={Link} to={button.to}>
<Icon name={button.icon}/>
{button.name}
</Menu.Item>
);
});
};
return ( return (
<> <>
<Layout> <Layout>
......
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