重构

src/App.tsx

@@ -1,6 +1,7 @@
+import { Suspense } from "react";
 import styles from "./App.module.less";
 import { useRoutes } from "react-router-dom";
-import routes from "./router/routes";
+import routes from "./routes";
 import { getToken } from "./utils/index";
 import { login } from "./api/index";
 import { useDispatch } from "react-redux";
@@ -9,9 +10,11 @@ import {
   SetUserActionCreator,
   SetPermisssionsActionCreator,
 } from "./store/user/userActions";
+import LoadingPage from "./pages/loading";
 
 function App() {
   const Views = () => useRoutes(routes);
+
   const dispatch = useDispatch();
   const getUser = () => {
     login.getUser().then((res: any) => {
@@ -26,9 +29,11 @@ function App() {
   }
 
   return (
+    <Suspense fallback={<LoadingPage />}>
       <div className={styles.App}>
         <Views />
       </div>
+    </Suspense>
   );
 }
 

src/pages/change-password/index.tsx

@@ -1,11 +1,10 @@
-import React from "react";
 import { Row, Col, Form, Input, Button, message } from "antd";
-import styles from "./create.module.less";
+// import styles from "./create.module.less";
 import { login } from "../../api/index";
 import { useNavigate } from "react-router-dom";
 import { BackBartment } from "../../compenents";
 
-export const ChangePasswordPage: React.FC = () => {
+const ChangePasswordPage = () => {
   const navigate = useNavigate();
   const [form] = Form.useForm();
 
@@ -74,3 +73,5 @@ export const ChangePasswordPage: React.FC = () => {
     </>
   );
 };
+
+export default ChangePasswordPage;

src/pages/course/index.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
 } from "antd";
 import { course } from "../../api";
-import styles from "./index.module.less";
+// import styles from "./index.module.less";
 import {
   PlusOutlined,
   DownOutlined,
@@ -21,7 +21,7 @@ import {
 import type { MenuProps } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { dateFormat } from "../../utils/index";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { TreeDepartment, TreeCategory, PerButton } from "../../compenents";
 import type { TabsProps } from "antd";
 import { CourseCreate } from "./compenents/create";
@@ -39,7 +39,7 @@ interface DataType {
   is_show: number;
 }
 
-export const CoursePage = () => {
+const CoursePage = () => {
   const navigate = useNavigate();
   const [list, setList] = useState<any>([]);
   const [refresh, setRefresh] = useState(false);
@@ -423,3 +423,5 @@ export const CoursePage = () => {
     </>
   );
 };
+
+export default CoursePage;

src/pages/dashboard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import styles from "./index.module.less";
 import { Row, Col } from "antd";
 import { Link, useNavigate } from "react-router-dom";
@@ -12,7 +12,7 @@ import { dashboard } from "../../api/index";
 import { timeFormat } from "../../utils/index";
 import * as echarts from "echarts";
 
-export const Dashboard: React.FC<any> = () => {
+const DashboardPage = () => {
   let chartRef = useRef(null);
   const navigate = useNavigate();
   const [basicData, setBasicData] = useState<any>([]);
@@ -536,3 +536,5 @@ export const Dashboard: React.FC<any> = () => {
     </>
   );
 };
+
+export default DashboardPage;

src/pages/department/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Spin, Button, Tree, Modal, message, Tooltip } from "antd";
-import styles from "./index.module.less";
+// import styles from "./index.module.less";
 import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { department } from "../../api/index";
 import { PerButton } from "../../compenents";
@@ -18,14 +18,7 @@ interface Option {
   children?: Option[];
 }
 
-interface DataType {
+const DepartmentPage = () => {
-  id: React.Key;
-  name: string;
-  created_at: string;
-  sort: number;
-}
-
-export const DepartmentPage: React.FC = () => {
   const navigate = useNavigate();
   const permisssions = useSelector((state: any) => state.permisssions);
   const [loading, setLoading] = useState<boolean>(true);
@@ -398,3 +391,5 @@ export const DepartmentPage: React.FC = () => {
     </>
   );
 };
+
+export default DepartmentPage;

src/pages/error/index.tsx

@@ -1,9 +1,8 @@
 import { Button, Result } from "antd";
-import React from "react";
 import { useNavigate } from "react-router-dom";
 import styles from "./index.module.less";
 
-export const ErrorPage: React.FC<any> = () => {
+const ErrorPage = () => {
   const navigate = useNavigate();
 
   return (
@@ -25,3 +24,5 @@ export const ErrorPage: React.FC<any> = () => {
     />
   );
 };
+
+export default ErrorPage;

src/pages/home/index.tsx

@@ -3,7 +3,7 @@ import styles from "./index.module.less";
 import { Outlet } from "react-router-dom";
 import { Header, LeftMenu } from "../../compenents";
 
-export const HomePage: React.FC = () => {
+const HomePage = () => {
   useEffect(() => {}, []);
 
   return (
@@ -25,3 +25,5 @@ export const HomePage: React.FC = () => {
     </>
   );
 };
+
+export default HomePage;

src/pages/index.ts

@@ -1,17 +0,0 @@
-export * from "./home";
-export * from "./login";
-export * from "./dashboard";
-export * from "./error";
-export * from "./test";
-export * from "./course/index";
-export * from "./member/index";
-export * from "./member/import";
-export * from "./system/config/index";
-export * from "./system/administrator/index";
-export * from "./system/adminroles/index";
-export * from "./department";
-export * from "./change-password";
-export * from "./resource/images";
-export * from "./resource/resource-category/index";
-export * from "./resource/videos";
-

src/pages/init/index.tsx

@@ -0,0 +1,7 @@
+import { Outlet } from "react-router-dom";
+
+const InitPage = () => {
+    return <><Outlet /></>
+};
+
+export default InitPage;

src/pages/loading/index.tsx

@@ -0,0 +1,11 @@
+import { Spin } from "antd";
+
+const LoadingPage = () => {
+  return (
+    <>
+      <Spin />
+    </>
+  );
+};
+
+export default LoadingPage;

src/pages/login/index.tsx

@@ -14,7 +14,7 @@ import banner from "../../assets/images/login/banner.png";
 import icon from "../../assets/images/login/icon.png";
 import "./login.less";
 
-export const Login: React.FC = () => {
+const LoginPage = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(false);
@@ -166,3 +166,5 @@ export const Login: React.FC = () => {
     </div>
   );
 };
+
+export default LoginPage;

src/pages/member/import.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from "react";
+import { useState } from "react";
 import * as XLSX from "xlsx";
-import { Row, Col, Form, Input, Cascader, Button, Upload, message } from "antd";
+import { Row, Col, Button, Upload, message } from "antd";
 import { BackBartment } from "../../compenents";
 import { user } from "../../api/index";
 import { useNavigate } from "react-router-dom";
 import { getHost } from "../../utils/index";
 
-export const MemberImportPage: React.FC = () => {
+const MemberImportPage = () => {
   const navigate = useNavigate();
   const [tableData, setWageTableData] = useState<any>([]);
   const [errorData, setErrorData] = useState<any>([]);
@@ -106,3 +106,5 @@ export const MemberImportPage: React.FC = () => {
     </>
   );
 };
+
+export default MemberImportPage;

src/pages/member/index.tsx

@@ -30,7 +30,7 @@ interface DataType {
   is_lock: number;
 }
 
-export const MemberPage: React.FC = () => {
+const MemberPage = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(10);
@@ -303,3 +303,5 @@ export const MemberPage: React.FC = () => {
     </>
   );
 };
+
+export default MemberPage;

src/pages/resource/images/index.tsx

@@ -31,7 +31,7 @@ interface ImageItem {
   created_at: string;
 }
 
-export const ResourceImagesPage = () => {
+const ResourceImagesPage = () => {
   const [imageList, setImageList] = useState<ImageItem[]>([]);
   const [refresh, setRefresh] = useState(false);
   const [page, setPage] = useState(1);
@@ -273,3 +273,5 @@ export const ResourceImagesPage = () => {
     </>
   );
 };
+
+export default ResourceImagesPage;

src/pages/resource/resource-category/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Spin, Button, Tree, Modal, message, Tooltip } from "antd";
+import { Button, Tree, Modal, message, Tooltip } from "antd";
-import styles from "./index.module.less";
+// import styles from "./index.module.less";
 import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { resourceCategory } from "../../../api/index";
 import { PerButton } from "../../../compenents";
@@ -18,14 +18,7 @@ interface Option {
   children?: Option[];
 }
 
-interface DataType {
+const ResourceCategoryPage = () => {
-  id: React.Key;
-  name: string;
-  created_at: string;
-  sort: number;
-}
-
-export const ResourceCategoryPage: React.FC = () => {
   const navigate = useNavigate();
   const permisssions = useSelector((state: any) => state.permisssions);
   const [loading, setLoading] = useState<boolean>(true);
@@ -406,3 +399,5 @@ export const ResourceCategoryPage: React.FC = () => {
     </>
   );
 };
+
+export default ResourceCategoryPage;

src/pages/resource/videos/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { Button, Modal, Table, message, Space } from "antd";
+import { Modal, Table, message, Space } from "antd";
 import { resource } from "../../../api";
-import styles from "./index.module.less";
+// import styles from "./index.module.less";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import { dateFormat } from "../../../utils/index";
@@ -18,7 +18,7 @@ interface DataType {
   disk: string;
 }
 
-export const ResourceVideosPage = () => {
+const ResourceVideosPage = () => {
   const [videoList, setVideoList] = useState<any>([]);
   const [videosExtra, setVideoExtra] = useState<any>([]);
   const [adminUsers, setAdminUsers] = useState<any>({});
@@ -203,3 +203,5 @@ export const ResourceVideosPage = () => {
     </>
   );
 };
+
+export default ResourceVideosPage;

src/pages/system/administrator/index.tsx

@@ -20,7 +20,7 @@ interface DataType {
   is_ban_login: number;
 }
 
-export const SystemAdministratorPage: React.FC = () => {
+const SystemAdministratorPage = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(true);
   const [page, setPage] = useState(1);
@@ -228,3 +228,5 @@ export const SystemAdministratorPage: React.FC = () => {
     </>
   );
 };
+
+export default SystemAdministratorPage;

src/pages/system/adminroles/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Button, Space, Table, Modal, message } from "antd";
 import type { ColumnsType } from "antd/es/table";
-import styles from "./index.module.less";
+// import styles from "./index.module.less";
 import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { adminRole } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
@@ -17,7 +17,7 @@ interface DataType {
   created_at: string;
 }
 
-export const SystemAdminrolesPage: React.FC = () => {
+const SystemAdminrolesPage = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [list, setList] = useState<any>([]);
   const [refresh, setRefresh] = useState(false);
@@ -153,3 +153,5 @@ export const SystemAdminrolesPage: React.FC = () => {
     </>
   );
 };
+
+export default SystemAdminrolesPage;

src/pages/system/config/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import {
   Row,
   Form,
@@ -17,7 +17,7 @@ import { UploadImageButton } from "../../../compenents";
 import type { TabsProps } from "antd";
 import type { CheckboxChangeEvent } from "antd/es/checkbox";
 
-export const SystemIndexPage: React.FC = () => {
+const SystemConfigPage = () => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(false);
   const [logo, setLogo] = useState<string>("");
@@ -367,3 +367,5 @@ export const SystemIndexPage: React.FC = () => {
     </>
   );
 };
+
+export default SystemConfigPage;

src/pages/test/index.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { UploadVideoButton } from "../../compenents/upload-video-button";
 
-export const TestPage: React.FC = () => {
+const TestPage = () => {
   return (
     <div>
       <UploadVideoButton
@@ -13,3 +12,5 @@ export const TestPage: React.FC = () => {
     </div>
   );
 };
+
+export default TestPage;

src/router/routes.tsx

@@ -1,90 +0,0 @@
-import { RouteObject } from "react-router-dom";
-import {
-  Login,
-  HomePage,
-  Dashboard,
-  ErrorPage,
-  CoursePage,
-  TestPage,
-  MemberPage,
-  MemberImportPage,
-  SystemAdministratorPage,
-  SystemAdminrolesPage,
-  DepartmentPage,
-  ChangePasswordPage,
-  ResourceImagesPage,
-  ResourceCategoryPage,
-  ResourceVideosPage,
-  SystemIndexPage,
-} from "../pages";
-
-const routes: RouteObject[] = [
-  {
-    path: "/",
-    element: <HomePage />,
-    children: [
-      {
-        path: "/",
-        element: <Dashboard />,
-      },
-      {
-        path: "/change-password",
-        element: <ChangePasswordPage />,
-      },
-      {
-        path: "/resource-category",
-        element: <ResourceCategoryPage />,
-      },
-      {
-        path: "/images",
-        element: <ResourceImagesPage />,
-      },
-      {
-        path: "/videos",
-        element: <ResourceVideosPage />,
-      },
-      {
-        path: "/course",
-        element: <CoursePage />,
-      },
-      {
-        path: "/member",
-        element: <MemberPage />,
-      },
-      {
-        path: "/member/import",
-        element: <MemberImportPage />,
-      },
-      {
-        path: "/system/config/index",
-        element: <SystemIndexPage />,
-      },
-      {
-        path: "/system/administrator",
-        element: <SystemAdministratorPage />,
-      },
-      {
-        path: "/system/adminroles",
-        element: <SystemAdminrolesPage />,
-      },
-      {
-        path: "/department",
-        element: <DepartmentPage />,
-      },
-    ],
-  },
-  {
-    path: "/login",
-    element: <Login />,
-  },
-  {
-    path: "/test",
-    element: <TestPage />,
-  },
-  {
-    path: "*",
-    element: <ErrorPage />,
-  },
-];
-
-export default routes;

src/routes/index.tsx

@@ -0,0 +1,102 @@
+import { lazy } from "react";
+import { RouteObject } from "react-router-dom";
+
+import InitPage from "../pages/init";
+
+const LoginPage = lazy(() => import("../pages/login"));
+const HomePage = lazy(() => import("../pages/home"));
+const DashboardPage = lazy(() => import("../pages/dashboard"));
+const ErrorPage = lazy(() => import("../pages/error"));
+const CoursePage = lazy(() => import("../pages/course"));
+const TestPage = lazy(() => import("../pages/test"));
+const MemberPage = lazy(() => import("../pages/member"));
+const MemberImportPage = lazy(() => import("../pages/member/import"));
+const SystemAdministratorPage = lazy(
+  () => import("../pages/system/administrator")
+);
+const SystemAdminrolesPage = lazy(() => import("../pages/system/adminroles"));
+const DepartmentPage = lazy(() => import("../pages/department"));
+const ChangePasswordPage = lazy(() => import("../pages/change-password"));
+const ResourceImagesPage = lazy(() => import("../pages/resource/images"));
+const ResourceCategoryPage = lazy(
+  () => import("../pages/resource/resource-category")
+);
+const ResourceVideosPage = lazy(() => import("../pages/resource/videos"));
+const SystemConfigPage = lazy(() => import("../pages/system/config"));
+
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <InitPage />,
+    children: [
+      {
+        path: "/",
+        element: <HomePage />,
+        children: [
+          {
+            path: "/",
+            element: <DashboardPage />,
+          },
+          {
+            path: "/change-password",
+            element: <ChangePasswordPage />,
+          },
+          {
+            path: "/resource-category",
+            element: <ResourceCategoryPage />,
+          },
+          {
+            path: "/images",
+            element: <ResourceImagesPage />,
+          },
+          {
+            path: "/videos",
+            element: <ResourceVideosPage />,
+          },
+          {
+            path: "/course",
+            element: <CoursePage />,
+          },
+          {
+            path: "/member",
+            element: <MemberPage />,
+          },
+          {
+            path: "/member/import",
+            element: <MemberImportPage />,
+          },
+          {
+            path: "/system/config/index",
+            element: <SystemConfigPage />,
+          },
+          {
+            path: "/system/administrator",
+            element: <SystemAdministratorPage />,
+          },
+          {
+            path: "/system/adminroles",
+            element: <SystemAdminrolesPage />,
+          },
+          {
+            path: "/department",
+            element: <DepartmentPage />,
+          },
+        ],
+      },
+      {
+        path: "/login",
+        element: <LoginPage />,
+      },
+      {
+        path: "/test",
+        element: <TestPage />,
+      },
+      {
+        path: "*",
+        element: <ErrorPage />,
+      },
+    ],
+  },
+];
+
+export default routes;