140 lines
3.9 KiB
TypeScript
140 lines
3.9 KiB
TypeScript
import { BellOutlined } from '@ant-design/icons';
|
|
import { Layout } from 'antd';
|
|
import React, { Suspense, useEffect, useMemo } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Outlet, useNavigate } from 'react-router';
|
|
import { useLocation } from 'react-router-dom';
|
|
import Icon1 from '../../assets/icons/icon.png';
|
|
import { SUBTITLE, TITLE, config } from '../../config';
|
|
import { findLeafMenu, findMenu } from '../../models/auth/menu';
|
|
import { Dispatch, RootState } from '../../models/store';
|
|
import { getParameter } from '../../utils/utils';
|
|
import HeaderUser from './HeaderUser';
|
|
import SiderMenu from './SiderMenu';
|
|
import BottomMenu from './BottomMenu';
|
|
import './style.less';
|
|
|
|
|
|
const { Header, Content, Sider } = Layout;
|
|
|
|
|
|
const DashboardLayout: React.FC = () => {
|
|
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const pathname = location.pathname;
|
|
|
|
const dispatch = useDispatch<Dispatch>();
|
|
|
|
const user = useSelector((state: RootState) => state.auth.user);
|
|
const menu = useSelector((state: RootState) => state.auth.menu);
|
|
|
|
useEffect(() => {
|
|
const token = getParameter('token') || 'demo';
|
|
if (token) {
|
|
dispatch.auth.regByToken(token).then(() => {
|
|
dispatch.auth.loadMenu(undefined);
|
|
});
|
|
} else {
|
|
if (user == null) {
|
|
navigate('/login')
|
|
} else {
|
|
dispatch.auth.loadMenu(undefined);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (user === null) {
|
|
|
|
}
|
|
if (user === 'failed') {
|
|
// 跳到主页面
|
|
return;
|
|
}
|
|
}, [user]);
|
|
|
|
const [menuIndexes, leafMenu] = useMemo(() => [
|
|
findMenu(menu, pathname),
|
|
findLeafMenu(menu, pathname),
|
|
], [menu, pathname]);
|
|
|
|
/*useEffect(() => {
|
|
if (leafMenu) {
|
|
document.title = leafMenu.title
|
|
}
|
|
}, [leafMenu]);*/
|
|
|
|
|
|
if (user === 'failed') {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Layout className="app-root">
|
|
{/*<Header className="app-header">
|
|
<a className='app-icon-a' href='http://219.138.108.99:30046/guide/'>
|
|
<img alt="..." className="app-icon" src={Icon1} />
|
|
<span className="app-title">{TITLE}-{SUBTITLE}</span>
|
|
</a>
|
|
<TopMenu menu={menu} menuIndexes={menuIndexes} />
|
|
<div className='flex-grow-1'></div>
|
|
|
|
<span className='user-menu' style={{ padding: '0 19px' }}>
|
|
<BellOutlined />
|
|
</span>
|
|
|
|
<HeaderUser user={user} />
|
|
</Header>*/}
|
|
|
|
<Layout>
|
|
{/*{
|
|
menuIndexes.length > 1 ? (
|
|
<Sider className="app-sider" width={208}>
|
|
<SiderMenu menu={menu} menuIndexes={menuIndexes} />
|
|
</Sider>
|
|
) : null
|
|
}*/}
|
|
<Content className="app-content index-box">
|
|
<div className="top-menu-box">
|
|
<div className="txt left-txt">
|
|
<img src={`${process.env.PUBLIC_URL}/assets/dw-icon.png`} />
|
|
<div>咸丰</div>
|
|
<img src={`${process.env.PUBLIC_URL}/assets/yun-icon.png`} className="img2"/>
|
|
<div>32℃多云</div>
|
|
</div>
|
|
<div className="txt right-txt">
|
|
<div>2023-10-13 星期五</div>
|
|
<div style={{color:"#979797",margin:"4px 12px"}}>|</div>
|
|
<div>10:30:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="left-line"></div>
|
|
<div className="right-line"></div>
|
|
|
|
<div className="top-all"></div>
|
|
|
|
<div className={menuIndexes.length > 1 ? 'content-root content-box' : 'content-root-fs content-box'}>
|
|
{
|
|
user ? (
|
|
<Suspense fallback={null}>
|
|
<Outlet />
|
|
</Suspense>
|
|
) : null
|
|
}
|
|
</div>
|
|
|
|
<div className="bottom-menu">
|
|
<BottomMenu menu={menu} menuIndexes={menuIndexes} />
|
|
</div>
|
|
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
)
|
|
};
|
|
|
|
export default DashboardLayout
|