|
|
|
|
@ -1,9 +1,6 @@
|
|
|
|
|
import React, { useContext, useEffect } from 'react';
|
|
|
|
|
import {
|
|
|
|
|
Tooltip,
|
|
|
|
|
Input,
|
|
|
|
|
Avatar,
|
|
|
|
|
Select,
|
|
|
|
|
Dropdown,
|
|
|
|
|
Menu,
|
|
|
|
|
Divider,
|
|
|
|
|
@ -11,10 +8,6 @@ import {
|
|
|
|
|
Button
|
|
|
|
|
} from '@arco-design/web-react';
|
|
|
|
|
import {
|
|
|
|
|
IconLanguage,
|
|
|
|
|
IconNotification,
|
|
|
|
|
IconSunFill,
|
|
|
|
|
IconMoonFill,
|
|
|
|
|
IconUser,
|
|
|
|
|
IconSettings,
|
|
|
|
|
IconPoweroff,
|
|
|
|
|
@ -28,14 +21,10 @@ import { useSelector, useDispatch } from 'react-redux';
|
|
|
|
|
import { GlobalState } from '@/store';
|
|
|
|
|
import { GlobalContext } from '@/context';
|
|
|
|
|
import useLocale from '@/utils/useLocale';
|
|
|
|
|
import MessageBox from '@/components/MessageBox';
|
|
|
|
|
import IconButton from './IconButton';
|
|
|
|
|
import Settings from '../Settings';
|
|
|
|
|
import styles from './style/index.module.less';
|
|
|
|
|
import defaultLocale from '@/locale';
|
|
|
|
|
import useStorage from '@/utils/useStorage';
|
|
|
|
|
import { generatePermission } from '@/routes';
|
|
|
|
|
import { Image } from '@arco-design/web-react';
|
|
|
|
|
import logoImage from '@/public/assets/logo.png';
|
|
|
|
|
|
|
|
|
|
function Navbar({ show }: { show: boolean }) {
|
|
|
|
|
@ -56,7 +45,8 @@ function Navbar({ show }: { show: boolean }) {
|
|
|
|
|
function onMenuItemClick(key) {
|
|
|
|
|
if (key === 'logout') {
|
|
|
|
|
logout();
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
Message.info(`You clicked ${key}`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -154,53 +144,6 @@ function Navbar({ show }: { show: boolean }) {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul className={styles.right}>
|
|
|
|
|
<li>
|
|
|
|
|
<Input.Search
|
|
|
|
|
className={styles.round}
|
|
|
|
|
placeholder={t['navbar.search.placeholder']}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<Select
|
|
|
|
|
triggerElement={<IconButton icon={<IconLanguage />} />}
|
|
|
|
|
options={[
|
|
|
|
|
{ label: '中文', value: 'zh-CN' },
|
|
|
|
|
{ label: 'English', value: 'en-US' }
|
|
|
|
|
]}
|
|
|
|
|
value={lang}
|
|
|
|
|
triggerProps={{
|
|
|
|
|
autoAlignPopupWidth: false,
|
|
|
|
|
autoAlignPopupMinWidth: true,
|
|
|
|
|
position: 'br'
|
|
|
|
|
}}
|
|
|
|
|
trigger="hover"
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
setLang(value);
|
|
|
|
|
const nextLang = defaultLocale[value];
|
|
|
|
|
Message.info(`${nextLang['message.lang.tips']}${value}`);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<MessageBox>
|
|
|
|
|
<IconButton icon={<IconNotification />} />
|
|
|
|
|
</MessageBox>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<Tooltip
|
|
|
|
|
content={
|
|
|
|
|
theme === 'light'
|
|
|
|
|
? t['settings.navbar.theme.toDark']
|
|
|
|
|
: t['settings.navbar.theme.toLight']
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<IconButton
|
|
|
|
|
icon={theme !== 'dark' ? <IconMoonFill /> : <IconSunFill />}
|
|
|
|
|
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
|
|
|
|
|
/>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</li>
|
|
|
|
|
<Settings />
|
|
|
|
|
{userInfo && (
|
|
|
|
|
<li>
|
|
|
|
|
<Dropdown droplist={droplist} position="br" disabled={userLoading}>
|
|
|
|
|
|