124 lines
4.1 KiB
TypeScript
124 lines
4.1 KiB
TypeScript
import React, { Suspense } from "react";
|
|
import "./index.less";
|
|
import {
|
|
VideoCameraAddOutlined,
|
|
UserSwitchOutlined,
|
|
AuditOutlined,
|
|
} from "@ant-design/icons";
|
|
import { Layout, Menu, MenuProps, Spin, theme } from "antd";
|
|
import { Route, Routes, useNavigate } from "react-router-dom";
|
|
import { Guard } from "../router/Guard";
|
|
import { navMenuList, navRoutes, sideMenuRoutes } from "../router";
|
|
|
|
const navMenus: MenuProps["items"] = navMenuList;
|
|
|
|
const sideMenus: MenuProps["items"] = [
|
|
{
|
|
key: "course",
|
|
icon: <VideoCameraAddOutlined />,
|
|
label: "课程",
|
|
children: [
|
|
{
|
|
key: "create",
|
|
label: "创建",
|
|
},
|
|
{
|
|
key: "list",
|
|
label: "课程列表",
|
|
},
|
|
{
|
|
key: "library",
|
|
label: "视频库",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: "user",
|
|
icon: <UserSwitchOutlined />,
|
|
label: "用户",
|
|
},
|
|
{
|
|
key: "xcode",
|
|
icon: <AuditOutlined />,
|
|
label: "神秘代码",
|
|
},
|
|
];
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
const Index: React.FC = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const onClickNavMenuItem = (p: any) => {
|
|
navigate(p.key);
|
|
};
|
|
|
|
const onClickSideMenuItem = (p: any) => {
|
|
const path = p.keyPath.reverse().join("/");
|
|
navigate(path.startsWith("/") ? path : "/" + path);
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<header>
|
|
<div className="logo">
|
|
<svg
|
|
fill="currentColor"
|
|
className="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M158.165333 499.498667A42.496 42.496 0 0 0 170.666667 469.333333V256a42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 0 0-85.333333C142.762667 128 85.333333 185.429333 85.333333 256v195.669333l-30.165333 30.165334a42.666667 42.666667 0 0 0 0 60.330666l30.165333 30.165334V768c0 70.570667 57.429333 128 128 128a42.666667 42.666667 0 0 0 0-85.333333 42.666667 42.666667 0 0 1-42.666666-42.666667v-213.333333a42.496 42.496 0 0 0-12.501334-30.165334L145.664 512l12.501333-12.501333zM978.090667 495.658667a42.709333 42.709333 0 0 0-9.258667-13.824L938.666667 451.669333V256c0-70.570667-57.429333-128-128-128a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 1 42.666666 42.666667v213.333333a42.581333 42.581333 0 0 0 12.501334 30.165334l12.501333 12.501333-12.501333 12.501333A42.496 42.496 0 0 0 853.333333 554.666667v213.333333a42.666667 42.666667 0 0 1-42.666666 42.666667 42.666667 42.666667 0 1 0 0 85.333333c70.570667 0 128-57.429333 128-128v-195.669333l30.165333-30.165334a42.709333 42.709333 0 0 0 9.258667-46.506666zM669.738667 225.450667a42.752 42.752 0 0 0-69.546667 14.762666l-255.829333 512a42.624 42.624 0 0 0 23.893333 55.424 42.922667 42.922667 0 0 0 55.552-23.765333l255.786667-512a42.538667 42.538667 0 0 0-9.813334-46.421333z"></path>
|
|
</svg>
|
|
<span>Backset</span>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="horizontal"
|
|
defaultSelectedKeys={["/"]}
|
|
style={{ flex: 1 }}
|
|
items={navMenus}
|
|
onClick={onClickNavMenuItem}
|
|
/>
|
|
</header>
|
|
<aside>
|
|
<Sider width={200} style={{ background: colorBgContainer }}>
|
|
<Menu
|
|
mode="inline"
|
|
defaultSelectedKeys={["1"]}
|
|
defaultOpenKeys={["course"]}
|
|
style={{ height: "100%", borderRight: 0 }}
|
|
items={sideMenus}
|
|
onClick={onClickSideMenuItem}
|
|
/>
|
|
</Sider>
|
|
</aside>
|
|
<main className="bs-scrollbar">
|
|
<div className="view">
|
|
<Routes>
|
|
{[...navRoutes, ...sideMenuRoutes].map((router) => (
|
|
<Route
|
|
key={router.path}
|
|
path={router.path}
|
|
element={
|
|
<Suspense fallback={<Spin />}>
|
|
<Guard>{<router.element />}</Guard>
|
|
</Suspense>
|
|
}
|
|
/>
|
|
))}
|
|
<Route path="*" element={<span>404</span>} />
|
|
</Routes>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Index;
|