Commit 4fe66735 authored by 蒋佳奇's avatar 蒋佳奇

feat: menu style opt

parent bbd5c058
import { useNavigate } from 'react-router-dom' import { UserOutlined, SettingOutlined } from '@ant-design/icons'
import { DashboardOutlined } from '@ant-design/icons'
// src/layouts/BasicLayout.tsx
import { Layout, Menu, theme } from 'antd'
const { Header, Content, Sider } = Layout const { Header, Content, Sider } = Layout
const menuItems = [ const menuItems = [
{ {
key: '/', key: 'user',
icon: <DashboardOutlined />, icon: <UserOutlined />,
label: 'Dashboard', label: '用户管理',
children: [
{
key: '/user/list',
label: '人员列表',
},
{
key: '/user/dept',
label: '组织架构',
},
],
},
{
key: '/system',
icon: <SettingOutlined />,
label: '系统管理',
}, },
] ]
...@@ -21,11 +32,11 @@ const BasicLayout: React.FC<React.PropsWithChildren> = ({ children }) => { ...@@ -21,11 +32,11 @@ const BasicLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<Layout className='min-h-screen text-9xl'> <Layout className='h-screen text-9xl'>
<Header className='p-0' /> <Header className='p-0' />
<Layout> <Layout>
<Sider breakpoint='lg'> <Sider breakpoint='lg' collapsible>
<Menu theme='dark' mode='vertical' items={menuItems} onSelect={({ key }) => navigate(key)} /> <Menu theme='dark' mode='inline' items={menuItems} onSelect={({ key }) => navigate(key)} />
</Sider> </Sider>
<Content className='mt-6 mx-4'> <Content className='mt-6 mx-4'>
<div className='p-6' style={{ background: colorBgContainer }}> <div className='p-6' style={{ background: colorBgContainer }}>
......
import { useNavigate } from 'react-router-dom' const NotFound: React.FC = () => {
export default function NotFound() {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
...@@ -16,3 +14,5 @@ export default function NotFound() { ...@@ -16,3 +14,5 @@ export default function NotFound() {
/> />
) )
} }
export default NotFound
...@@ -16,6 +16,7 @@ const Home: React.FC = () => { ...@@ -16,6 +16,7 @@ const Home: React.FC = () => {
return ( return (
<div> <div>
<header>首页</header> <header>首页</header>
<p>WelCome!</p>
<Button loading={loading} onClick={() => run()}> <Button loading={loading} onClick={() => run()}>
测试 测试
</Button> </Button>
......
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 to comment