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 {UserContext} from '../context/User';
......@@ -45,8 +45,10 @@ const HeaderBar = () => {
let navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false);
const [dark, setDark] = useState(false);
const systemName = getSystemName();
const logo = getLogo();
var themeMode = localStorage.getItem('theme-mode');
async function logout() {
setShowSidebar(false);
......@@ -57,37 +59,22 @@ const HeaderBar = () => {
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 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 (
<>
......@@ -119,7 +106,7 @@ const HeaderBar = () => {
footer={
<>
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
<Switch checkedText="🌞" size={'large'} uncheckedText="🌙" onChange={switchMode} />
<Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
{userState.user ?
<>
<Dropdown
......
web/src/components/LoginForm.js
......@@ -163,55 +163,55 @@ const LoginForm = () => {
) : (
<></>
)}
{status.wechat_login ? (
<Button
circular
color='green'
icon='wechat'
onClick={onWeChatLoginClicked}
/>
) : (
<></>
)}
{/*{status.wechat_login ? (*/}
{/* <Button*/}
{/* circular*/}
{/* color='green'*/}
{/* icon='wechat'*/}
{/* onClick={onWeChatLoginClicked}*/}
{/* />*/}
{/*) : (*/}
{/* <></>*/}
{/*)}*/}
</div>
</>
) : (
<></>
)}
<Modal
onClose={() => setShowWeChatLoginModal(false)}
onOpen={() => setShowWeChatLoginModal(true)}
open={showWeChatLoginModal}
size={'mini'}
>
<Modal.Content>
<Modal.Description>
<Image src={status.wechat_qrcode} fluid/>
<div style={{textAlign: 'center'}}>
<p>
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
</p>
</div>
<Form size='large'>
<Form.Input
field={'wechat_verification_code'}
placeholder='验证码'
name='wechat_verification_code'
value={inputs.wechat_verification_code}
onChange={handleChange}
/>
<Button
color=''
fluid
size='large'
onClick={onSubmitWeChatVerificationCode}
>
登录
</Button>
</Form>
</Modal.Description>
</Modal.Content>
</Modal>
{/*<Modal*/}
{/* onClose={() => setShowWeChatLoginModal(false)}*/}
{/* onOpen={() => setShowWeChatLoginModal(true)}*/}
{/* open={showWeChatLoginModal}*/}
{/* size={'mini'}*/}
{/*>*/}
{/* <Modal.Content>*/}
{/* <Modal.Description>*/}
{/* <Image src={status.wechat_qrcode} fluid/>*/}
{/* <div style={{textAlign: 'center'}}>*/}
{/* <p>*/}
{/* 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）*/}
{/* </p>*/}
{/* </div>*/}
{/* <Form size='large'>*/}
{/* <Form.Input*/}
{/* field={'wechat_verification_code'}*/}
{/* placeholder='验证码'*/}
{/* name='wechat_verification_code'*/}
{/* value={inputs.wechat_verification_code}*/}
{/* onChange={handleChange}*/}
{/* />*/}
{/* <Button*/}
{/* color=''*/}
{/* fluid*/}
{/* size='large'*/}
{/* onClick={onSubmitWeChatVerificationCode}*/}
{/* >*/}
{/* 登录*/}
{/* </Button>*/}
{/* </Form>*/}
{/* </Modal.Description>*/}
{/* </Modal.Content>*/}
{/*</Modal>*/}
</Card>
{turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
......
web/src/components/SiderBar.js
......@@ -114,34 +114,6 @@ const HeaderBar = () => {
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 (
<>
<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