EasyAudioEncode/web/src/pages/Home.tsx

import { Affix, Col, Menu, Row, type MenuProps } from "antd";
import {
  FileSearchOutlined,
  UnorderedListOutlined,
} from "@ant-design/icons";
import Box from "../components/Box";
import { useState } from "react";
import AudioEncodePage from "../components/AudioEncode";
import AudioTaskPage from "../components/AudioTask";

type MenuItem = Required<MenuProps>["items"][number];
export default function Home() {
  const [currentMenu, setCurrentMenu] = useState("sub0");

  const items: MenuItem[] = [
    {
      key: "sub0",
      label: "文件管理",
      icon: <FileSearchOutlined />,
    },
    {
      key: "sub1",
      label: "任务列表",
      icon: <UnorderedListOutlined />,
    },
  ];

  const onClickMenu = (item: any) => {
    setCurrentMenu(item?.key as string);
  };

  return (
    <Row gutter={16}>
      <Col sm={24} md={24} lg={3} xl={3} xxl={3} className="w-full">
        <Affix className="hidden lg:block" offsetTop={0}>
          <Box
            style={{ minWidth: "10rem", width: "12rem" }}
            className="mr-0 px-0"
          >
            <Menu
              className="litegbs-menu-item select-none"
              key={"config"}
              selectedKeys={[currentMenu]}
              onClick={onClickMenu}
              items={items}
            />
          </Box>
        </Affix>
        <Box
          style={{ minWidth: "10rem", width: "12rem" }}
          className="mr-0 px-0 block lg:hidden"
        >
          <Menu
            className="litegbs-menu-item"
            key={"config"}
            selectedKeys={[currentMenu]}
            onClick={onClickMenu}
            items={items}
          />
        </Box>
      </Col>
      <Col sm={24} md={24} lg={21} xl={21} xxl={21} className="w-full">
        {/* <Col sm={24} md={24}  className="w-full"> */}
        {currentMenu == "sub0" && (
          <Box>
            <AudioEncodePage />
          </Box>
        )}
        {currentMenu == "sub1" && (
          <Box>
            <AudioTaskPage />
          </Box>
        )}
      </Col>
    </Row>
  );
}