配置左侧边栏

1. Home.tsx 配置为首页, 引入 antd 组件

   import React, { useState } from "react";
   import { Breadcrumb, Layout, Menu, theme } from "antd";
   // 配置参数
   import { tabItem } from "@/pages/config/home";

   const { Header, Content, Footer, Sider } = Layout;

   const Home: React.FC = () => {
     const [collapsed, setCollapsed] = useState(false);
     const {
       token: { colorBgContainer },
     } = theme.useToken();

     return (
       <Layout style={{ minHeight: "100vh" }}>
         {/* 侧边栏 */}
         <Sider
           collapsible
           collapsed={collapsed}
           onCollapse={(value) => setCollapsed(value)}
         >
           <div
             style={{
               height: 32,
               margin: 16,
               background: "rgba(255, 255, 255, 0.2)",
             }}
           />
           <Menu
             theme="dark"
             defaultSelectedKeys={["1"]}
             mode="inline"
             items={tabItem}
           />
         </Sider>

         {/* 右边 */}
         <Layout className="site-layout">
           {/* 头部区域 */}
           <Header style={{ paddingLeft: 16, background: colorBgContainer }}>
             <Breadcrumb style={{ lineHeight: "64px" }}>
               <Breadcrumb.Item>User</Breadcrumb.Item>
               <Breadcrumb.Item>Bill</Breadcrumb.Item>
             </Breadcrumb>
           </Header>

           {/* 内容区 */}
           <Content
             style={{
               margin: "16px 16px 0",
               background: colorBgContainer,
             }}
           >
             要配置Outlet
           </Content>

           {/* 底部, 高度与左边保持一致 */}
           <Footer
             style={{ padding: 0, textAlign: "center", lineHeight: "48px" }}
           >
             Ant Design ©2018 Created by Ant UED
           </Footer>
         </Layout>
       </Layout>
     );
   };

   export default Home;

1. 创建全局参数配置目录, 配置 Home.tsx 页面参数

• src\pages\config\home.tsx

   import { MenuProps } from "antd";
   import {
     DesktopOutlined,
     FileOutlined,
     PieChartOutlined,
     TeamOutlined,
     UserOutlined,
   } from "@ant-design/icons";

   const genItem = () => {
     type MenuItem = Required<MenuProps>["items"][number];

     function getItem(
       label: React.ReactNode,
       key: React.Key,
       icon?: React.ReactNode,
       children?: MenuItem[]
     ): MenuItem {
       return {
         key,
         icon,
         children,
         label,
       } as MenuItem;
     }

     const items: MenuItem[] = [
       getItem("栏目一", "1", <PieChartOutlined />),
       getItem("栏目二", "2", <DesktopOutlined />),
       getItem("栏目三", "sub1", <UserOutlined />, [
         getItem("三目一", "3"),
         getItem("三目二", "4"),
         getItem("三目三", "5"),
       ]),
       getItem("栏目四", "sub2", <TeamOutlined />, [
         getItem("四目一", "6"),
         getItem("四目二", "8"),
       ]),
       getItem("栏目五", "9", <FileOutlined />),
     ];

     return items;
   };

   export const tabItem = genItem();

1. App.tsx 中保持不变

   import React from "react";
   import { useRoutes } from "react-router-dom";
   import router from "@/router/router";

   const App = () => {
     const RouterOutlet = useRoutes(router);

     return <div className="App">{RouterOutlet}</div>;
   };

   export default App;