配置左侧边栏

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;

创建全局参数配置目录, 配置 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();

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;