Skip to content

Commit

Permalink
feat: update
Browse files Browse the repository at this point in the history
  • Loading branch information
zhangtao25 committed Sep 10, 2023
1 parent 1d2366d commit 3b9c4d4
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 25 deletions.
2 changes: 2 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
#-----------------------System Config------------------------------#
SYSTEM_MODE=["coverage"]
#-----------------------Backend Config------------------------------#
# Prisma Config
DATABASE_URL=postgresql://root:[email protected]:5432/canyon
Expand Down
24 changes: 16 additions & 8 deletions packages/app-ui/src/layouts/CustomSider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@ interface CustomSiderProps {
activeMenu: string[];
routerConfig: RouteConfig[];
}
function getModes() {
try {
return JSON.parse(localStorage.getItem('SYSTEM_MODE') || '[]');
} catch (e) {
return [];
}
}
const CustomSider: FC<CustomSiderProps> = ({ activeMenu, routerConfig }) => {
const nav = useNavigate();
const [collapsed, setCollapsed] = useState(false);

return (
<Sider
collapsible
Expand Down Expand Up @@ -70,13 +76,15 @@ const CustomSider: FC<CustomSiderProps> = ({ activeMenu, routerConfig }) => {
onClick={(e) => {
nav(`${e.key}`);
}}
items={routerConfig.map((i) => {
return {
label: i.menuName,
key: i.name,
icon: <Icon component={i.menuIcon} />,
};
})}
items={routerConfig
.filter((i) => getModes().includes(i.name))
.map((i) => {
return {
label: i.menuName,
key: i.name,
icon: <Icon component={i.menuIcon} />,
};
})}
css={css`
border-inline-end: none !important;
display: ${activeMenu[2] ? 'none' : 'block'};
Expand Down
77 changes: 60 additions & 17 deletions packages/app-ui/src/layouts/MainBox.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import Icon, { QuestionCircleOutlined } from '@ant-design/icons';
import Icon, { LogoutOutlined, QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
import { css } from '@emotion/react';
import { Avatar, Breadcrumb, Layout, Space } from 'antd';
import { useRequest } from 'ahooks';
import { Avatar, Breadcrumb, Dropdown, Layout, MenuProps, Space } from 'antd';
import axios from 'axios';
import { match } from 'path-to-regexp';
import { FC, ReactNode, Suspense, useEffect, useState } from 'react';
import { useLocation, useNavigate, useRoutes } from 'react-router-dom';
Expand All @@ -13,7 +15,24 @@ import { routerConfig } from '../router.tsx';
import CustomSider from './CustomSider.tsx';

const { Header, Content } = Layout;

const items: MenuProps['items'] = [
{
key: 'settings',
label: <a>个人设置</a>,
icon: <SettingOutlined />,
},
{
key: '3',
type: 'divider',
// label: '退出登录',
// icon:<LogoutOutlined/>
},
{
key: 'logout',
label: '退出登录',
icon: <LogoutOutlined />,
},
];
const HoverEffect: FC<{ children: ReactNode }> = ({ children }) => {
return (
<div
Expand All @@ -33,6 +52,14 @@ const HoverEffect: FC<{ children: ReactNode }> = ({ children }) => {
};

const MainBox = () => {
useRequest(() => axios.get<{ SYSTEM_MODE: string }>('/api/base').then((res) => res.data), {
onSuccess(res) {
if (res) {
localStorage.setItem('SYSTEM_MODE', res.SYSTEM_MODE);
}
},
});

const nav = useNavigate();
const loc = useLocation();
const [activeMenu, setActiveMenu] = useState(['', '', '', '', '']);
Expand All @@ -43,9 +70,18 @@ const MainBox = () => {
const { t0, t1, t2, t3, t4, t5 } = urlMatch(loc.pathname).params;
setActiveMenu([t0, t1, t2, t3, t4, t5]);
}, [loc]);
function onClick(e: any) {
if (e.key === 'settings') {
nav(`/settings`);
}
if (e.key === 'logout') {
localStorage.clear();
nav(`/welcome`);
}
}
return (
<div>
{!(loc.pathname.includes('welcome')||loc.pathname.includes('login')) ? (
{!(loc.pathname.includes('welcome') || loc.pathname.includes('login')) ? (
<>
<Layout>
<Header
Expand Down Expand Up @@ -105,19 +141,25 @@ const MainBox = () => {
/>
</HoverEffect>

<HoverEffect>
<Avatar
size={'small'}
src={'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'}
/>
<span
css={css`
margin-left: 6px;
`}
>
Allen Zhang
</span>
</HoverEffect>
<Dropdown menu={{ items, onClick }}>
<div>
<HoverEffect>
<Avatar
size={'small'}
src={
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
}
/>
<span
css={css`
margin-left: 6px;
`}
>
Allen Zhang
</span>
</HoverEffect>
</div>
</Dropdown>
</Space>
</div>
</Header>
Expand All @@ -136,6 +178,7 @@ const MainBox = () => {
background-color: rgb(240, 242, 245);
`}
>
{/*{JSON.stringify(data.SYSTEM_MODE)}*/}
<Breadcrumb
style={{ margin: '16px 0' }}
items={activeMenu
Expand Down
5 changes: 5 additions & 0 deletions packages/app-ui/src/pages/settings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const Settings = () => {
return <div>{localStorage.getItem('token')}</div>;
};

export default Settings;

0 comments on commit 3b9c4d4

Please sign in to comment.