feat: 删除路由拦截器，添加二级路由

.env.development

@@ -18,3 +18,6 @@ VITE_APP_TOKEN_KEY='schisandra'
 
 # the upload url
 VITE_UPLOAD_URL='http://127.0.0.1:3000'
+
+# the websocket url
+VITE_WEB_SOCKET_URL='ws://127.0.0.1:3010/wx/socket'

src/App.tsx

@@ -1,10 +0,0 @@
-/** @format */
-
-import routes from "@/router/routes.ts";
-import { RouterGuard } from "@/router/guard.ts";
-
-function App() {
-	return <div className="App">{RouterGuard(routes)}</div>;
-}
-
-export default App;

src/components/Main/Bucket/index.tsx

@@ -0,0 +1,7 @@
+/** @format */
+import { FunctionComponent } from "react";
+
+const Bucket: FunctionComponent = () => {
+	return <div>存储桶</div>;
+};
+export default Bucket;

src/components/Main/File/index.tsx

@@ -0,0 +1,7 @@
+/** @format */
+import { FunctionComponent } from "react";
+
+const File: FunctionComponent = () => {
+	return <div>文件管理</div>;
+};
+export default File;

src/components/Main/Home/index.tsx

@@ -0,0 +1,7 @@
+/** @format */
+import { FunctionComponent } from "react";
+
+const MainHome: FunctionComponent = () => {
+	return <div>首页</div>;
+};
+export default MainHome;

src/components/Main/User/index.tsx

@@ -0,0 +1,7 @@
+/** @format */
+import { FunctionComponent } from "react";
+
+const User: FunctionComponent = () => {
+	return <div>用户中心</div>;
+};
+export default User;

src/main.tsx

@@ -5,13 +5,12 @@ import "./assets/styles/index.less";
 import "virtual:svg-icons-register";
 import { Provider as MobxProvider } from "mobx-react";
 import { RootStore } from "@/store";
-import { BrowserRouter } from "react-router-dom";
-import App from "@/App.tsx";
+import routeConfig from "@/router/routes.ts";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+const router = createBrowserRouter(routeConfig);
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<MobxProvider {...RootStore}>
-		<BrowserRouter>
-			<App />
-		</BrowserRouter>
+		<RouterProvider router={router} />
 	</MobxProvider>,
 );

src/router/guard.ts

@@ -1,75 +0,0 @@
-/** @format */
-
-import { useEffect } from "react";
-import {
-	Location,
-	NavigateFunction,
-	RouteObject,
-	useLocation,
-	useNavigate,
-	useRoutes,
-} from "react-router-dom";
-
-/**
- * 递归查询对应的路由
- * @param path
- * @param routes
- */
-export function searchRouteDetail(path: string, routes: RouteObject[]): RouteObject | null {
-	for (const item of routes) {
-		if (item.path === path) return item;
-		if (item.children) {
-			return searchRouteDetail(path, item.children);
-		}
-	}
-	return null;
-}
-
-/**
- * 全局路由守卫
- * @param location
- * @param navigate
- * @param routes
- */
-async function guard(location: Location, navigate: NavigateFunction, routes: RouteObject[]) {
-	const { pathname } = location;
-
-	//找到对应的路由信息
-	const routerDetail: RouteObject | null = searchRouteDetail(pathname, routes);
-
-	//没有找到路由，跳转404
-	if (!routerDetail) {
-		navigate("/404");
-		return false;
-	}
-	//如果需要权限验证
-	// if (
-	// 	routerDetail.path !== "/login" &&
-	// 	routerDetail.path !== "/register" &&
-	// 	routerDetail.path !== "/" &&
-	// 	routerDetail.path !== "/404" &&
-	// 	routerDetail.path !== "/forget"
-	// ) {
-	// 	const token: string | null = getStorageFromKey("token");
-	// 	if (!token) {
-	// 		message.warning("请先登录！").then();
-	// 		navigate("/login");
-	// 		return false;
-	// 	}
-	// }
-	return true;
-}
-
-/**
- * 路由守卫
- * @param routes
- * @constructor
- */
-export const RouterGuard = (routes: RouteObject[]) => {
-	const location: Location<any> = useLocation();
-	const navigate: NavigateFunction = useNavigate();
-	useEffect(() => {
-		guard(location, navigate, routes).then();
-	}, [location, navigate, routes]);
-	return useRoutes(routes);
-};

src/router/modules/main/bucket/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			setTimeout(() => resolve(import("@/components/Main/Bucket")), 500);
+		}),
+);
+export default MainBucket;

src/router/modules/main/file/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainFile = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			setTimeout(() => resolve(import("@/components/Main/File")), 500);
+		}),
+);
+export default MainFile;

src/router/modules/main/home/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainHome = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			setTimeout(() => resolve(import("@/components/Main/Home")), 500);
+		}),
+);
+export default MainHome;

src/router/modules/main/user/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainUser = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			setTimeout(() => resolve(import("@/components/Main/User")), 500);
+		}),
+);
+export default MainUser;

src/router/routes.ts

@@ -10,6 +10,10 @@ import ComponentLoading from "@/components/ComponentLoading";
 import Loading from "./modules/loading";
 import Forget from "@/router/modules/forget";
 import Home from "@/router/modules/home";
+import MainHome from "@/router/modules/main/home";
+import MainBucket from "@/router/modules/main/bucket";
+import MainFile from "@/router/modules/main/file";
+import MainUser from "@/router/modules/main/user";
 
 const routes: RouteObject[] = [
 	{
@@ -35,6 +39,25 @@ const routes: RouteObject[] = [
 	{
 		path: "/main",
 		Component: (props) => ComponentLoading(Main, props),
+		children: [
+			{
+				index: true,
+				path: "/main/home",
+				Component: MainHome,
+			},
+			{
+				path: "/main/bucket",
+				Component: MainBucket,
+			},
+			{
+				path: "/main/file",
+				Component: MainFile,
+			},
+			{
+				path: "/main/user",
+				Component: MainUser,
+			},
+		],
 	},
 	{
 		path: "/home",

src/views/Main/_defaultProps.tsx

@@ -0,0 +1,86 @@
+/** @format */
+
+import { SmileFilled } from "@ant-design/icons";
+
+export default {
+	route: {
+		path: "/",
+		routes: [
+			{
+				path: "main/home",
+				name: "首 页",
+				icon: <SmileFilled />,
+			},
+			{
+				path: "main/bucket",
+				name: "存储桶",
+				icon: <SmileFilled />,
+			},
+			{
+				path: "main/file",
+				name: "文件管理",
+				icon: <SmileFilled />,
+			},
+			{
+				path: "main/user",
+				name: "个人中心",
+				icon: <SmileFilled />,
+			},
+		],
+	},
+	location: {
+		pathname: "/",
+	},
+	appList: [
+		{
+			icon: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
+			title: "Ant Design",
+			desc: "杭州市较知名的 UI 设计语言",
+			url: "https://ant.design",
+		},
+		{
+			icon: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
+			title: "AntV",
+			desc: "蚂蚁集团全新一代数据可视化解决方案",
+			url: "https://antv.vision/",
+			target: "_blank",
+		},
+		{
+			icon: "https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg",
+			title: "Pro Components",
+			desc: "专业级 UI 组件库",
+			url: "https://procomponents.ant.design/",
+		},
+		{
+			icon: "https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png",
+			title: "umi",
+			desc: "插件化的企业级前端应用框架。",
+			url: "https://umijs.org/zh-CN/docs",
+		},
+
+		{
+			icon: "https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png",
+			title: "qiankun",
+			desc: "可能是你见过最完善的微前端解决方案🧐",
+			url: "https://qiankun.umijs.org/",
+		},
+		{
+			icon: "https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg",
+			title: "语雀",
+			desc: "知识创作与分享工具",
+			url: "https://www.yuque.com/",
+		},
+		{
+			icon: "https://gw.alipayobjects.com/zos/rmsportal/LFooOLwmxGLsltmUjTAP.svg",
+			title: "Kitchen ",
+			desc: "Sketch 工具集",
+			url: "https://kitchen.alipay.com/",
+		},
+		{
+			icon: "https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png",
+			title: "dumi",
+			desc: "为组件开发场景而生的文档工具",
+			url: "https://d.umijs.org/zh-CN",
+		},
+	],
+};

src/views/Main/index.tsx

@@ -1,14 +1,57 @@
 /** @format */
 
-import DefaultLayOut from "@/layout/default";
-import { useEffect } from "react";
-import { observer } from "mobx-react";
+import { GithubFilled, InfoCircleFilled, QuestionCircleFilled } from "@ant-design/icons";
+import { PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
+import { useState } from "react";
+import defaultProps from "./_defaultProps";
+import { Link, Outlet } from "react-router-dom";
+
+export default () => {
+	const [pathname, setPathname] = useState("/mainRouter/homeRouter");
 
-export default observer(() => {
-	useEffect(() => {}, []);
 	return (
-		<>
-			<DefaultLayOut />
-		</>
+		<div
+			id="test-pro-layout"
+			style={{
+				height: "100vh",
+			}}>
+			<ProLayout
+				siderWidth={216}
+				menuItemRender={(menuItemProps, defaultDom) => {
+					if (menuItemProps.isUrl || !menuItemProps.path) {
+						return defaultDom;
+					}
+					return <Link to={menuItemProps.path}>{defaultDom}</Link>;
+				}}
+				{...defaultProps}
+				location={{
+					pathname,
+				}}
+				avatarProps={{
+					src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
+					title: "七妮妮",
+					size: "small",
+				}}
+				actionsRender={(props) => {
+					if (props.isMobile) return [];
+					return [
+						<InfoCircleFilled key="InfoCircleFilled" />,
+						<QuestionCircleFilled key="QuestionCircleFilled" />,
+						<GithubFilled key="GithubFilled" />,
+					];
+				}}>
+				<PageContainer>
+					<ProCard
+						style={{
+							height: "100vh",
+							minHeight: 800,
+						}}>
+						<div>
+							<Outlet />
+						</div>
+					</ProCard>
+				</PageContainer>
+			</ProLayout>
+		</div>
 	);
-});
+};

src/views/User/Forget/index.tsx

@@ -172,7 +172,7 @@ export default observer(() => {
 						<Space align="center" className={styles.mp_code}>
 							<Space direction="vertical" align="center">
 								<span className={styles.mp_code_title}>微信扫码登录</span>
-								<Spin spinning={loading}>
+								<Spin tip="Loading" size="large" spinning={loading}>
 									<Image
 										preview={false}
 										height={200}

src/views/User/Login/index.tsx

@@ -278,7 +278,7 @@ export default observer(() => {
 						<Space align="center" className={styles.mp_code}>
 							<Space direction="vertical" align="center">
 								<span className={styles.mp_code_title}>微信扫码登录</span>
-								<Spin spinning={loading}>
+								<Spin tip="Loading" size="large" spinning={loading}>
 									<Image
 										preview={false}
 										height={200}

src/views/User/Register/index.tsx

@@ -176,7 +176,7 @@ export default observer(() => {
 						<Space align="center" className={styles.mp_code}>
 							<Space direction="vertical" align="center">
 								<span className={styles.mp_code_title}>微信扫码登录</span>
-								<Spin spinning={loading}>
+								<Spin tip="Loading" size="large" spinning={loading}>
 									<Image
 										preview={false}
 										height={200}