From 81a9ed3dd191e2b27df0039c90a6dbfea4ae5092 Mon Sep 17 00:00:00 2001
From: mmc <1556375442@qq.com>
Date: Wed, 19 Aug 2026 11:09:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E7=BB=84=E4=BB=B6=E6=8B=86?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.tsx  | 332 +-----------------------------------------
 src/router/routes.tsx | 219 ++++++++++++++++++++++++++++
 2 files changed, 220 insertions(+), 331 deletions(-)
 create mode 100644 src/router/routes.tsx

diff --git a/src/router/index.tsx b/src/router/index.tsx
index d74be6c..88b00cc 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,334 +1,4 @@
-import React, { lazy, Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
-import type { RouteObject } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-
-
-
-// 🔥 所有组件全部改为懒加载
-const VideoMonitorPage = lazy(() => import('../pages/VideoMonitorPage'));
-const AIDiagnosisPage = lazy(() => import('../pages/AIAnalysis'));
-const CleanOptimizationPage = lazy(() => import('../pages/CleanOptimization'));
-const WorkOrderPage = lazy(() => import('../pages/WorkOrder'));
-const ReportCenterPage = lazy(() => import('../pages/ReportCenter'));
-const RealTimeMonitorPage = lazy(() => import('../pages/RealTimeMonitor'));
-const Agri = lazy(() => import('../pages/Agri'));
-
-const Layout = lazy(() => import('../components/Layout'));
-const ProtectedRoute = lazy(() => import('../components/ProtectedRoute'));
-const Login = lazy(() => import('../pages/Login'));
-
-const Home = lazy(() => import('../pages/Home'));
-
-const Video = lazy(() => import('../pages/Video'));
-const Alerts = lazy(() => import('../pages/Alerts'));
-const Downloads = lazy(() => import('../pages/Downloads'));
-const Roles = lazy(() => import('../pages/Roles'));
-const Users = lazy(() => import('../pages/Users'));
-const MenuList = lazy(() => import('../components/SystemSetting/MenuList'));
-const Organization = lazy(() => import('../components/SystemSetting/Organization'));
-const StationManage = lazy(() => import('../components/SystemSetting/StationManage'));
-const SystemSetting = lazy(() => import('../pages/SystemSetting'));
-const Profile = lazy(() => import('../pages/Profile'));
-
-
-const DeviceStatus = lazy(() => import('../components/devices/DeviceStatusPage'));
-const WayLineTask = lazy(() => import('../components/devices/WayLinePage'));
-const RobotTask = lazy(() => import('../components/devices/RobotTaskPage'));
-const DevicesOverview = lazy(() => import('../components/devices/DeviceOverviewPage'));
-
-
-const BasicSettings = lazy(() => import('../components/SystemSetting/BasicSettings'));
-const UserRolePage = lazy(() => import('../components/SystemSetting/UserPage'));
-const DeviceAccessPage = lazy(() => import('../components/SystemSetting/DeviceAccessPage'));
-const OnlineUserPage = lazy(() => import('../components/SystemSetting/OnlineUser'));
-const DeviceManagementPage = lazy(() => import('../components/SystemSetting/DeviceManagement'));
-const SystemMaintenancePage = lazy(() => import('../components/SystemSetting/SystemMaintain'));
-const LogManagement = lazy(() => import('../components/SystemSetting/LogManagement'));
-const VideoManagement = lazy(() => import('../components/SystemSetting/VideoManagement'));
-//const ErrorManagement = lazy(() => import('../components/SystemSetting/ErrorManagement'));
-//const AlarmSettingsManagement = lazy(() => import('../components/SystemSetting/AlarmSettingsManagement'));
-//const WorkOrderSettingsManagement = lazy(() => import('../components/SystemSetting/WorkOrderSettingsManagement'));
-
-// 加载中动画
-function PageFallback() {
-	return (
-		<div className="flex items-center justify-center h-full min-h-[200px]">
-			<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
-		</div>
-	);
-}
-
-// 占位页（国际化）
-const NoticePolicyPlaceholder = () => {
-	const { t } = useTranslation();
-	return (
-		<div style={{ padding: 20 }}>
-			<h2>{t('router.noticePolicy')}</h2>
-		</div>
-	);
-};
-
-const DataSafetyPlaceholder = () => {
-	const { t } = useTranslation();
-	return (
-		<div style={{ padding: 20 }}>
-			<h2>{t('router.dataSafety')}</h2>
-		</div>
-	);
-};
-
-const ModuleDeveloping = () => {
-	const { t } = useTranslation();
-	return (
-		<div className="flex flex-col items-center justify-center h-full gap-4 text-gray-400 select-none">
-			<span className="text-6xl opacity-20">🚧</span>
-			<p className="text-lg font-medium">{t('router.moduleDeveloping')}</p>
-		</div>
-	);
-};
-
-
-// ====================== 全部懒加载的路由配置 ======================
-const routes: RouteObject[] = [
-	{
-		path: '/login',
-		element: (
-			<Suspense fallback={<PageFallback />}>
-				<Login />
-			</Suspense>
-		),
-	},
-	{
-		element: (
-			<Suspense fallback={<PageFallback />}>
-				<ProtectedRoute />
-			</Suspense>
-		),
-		children: [
-			{
-				element: (
-					<Suspense fallback={<PageFallback />}>
-						<Layout />
-					</Suspense>
-				),
-				children: [
-					{
-						index: true,
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Home />
-							</Suspense>
-						)
-					},
-					{
-						path: 'overview',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Home />
-							</Suspense>
-						)
-					},
-					{
-						path: 'devices/overview',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<DevicesOverview />
-							</Suspense>
-						)
-					},
-					{
-						path: 'devices/status',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<DeviceStatus />
-							</Suspense>
-						)
-					},
-					{
-						path: 'devices/wayLineTask',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<WayLineTask />
-							</Suspense>
-						)
-					},
-					{
-						path: 'devices/robotTask',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<RobotTask />
-							</Suspense>
-						)
-					},
-					{
-						path: 'video',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Video />
-							</Suspense>
-						)
-					},
-					{
-						path: 'RealtimeMonitor',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<RealTimeMonitorPage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'monitor',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<VideoMonitorPage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'agri',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Agri />
-							</Suspense>
-						)
-					},
-					{
-						path: 'alerts/all',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Alerts />
-							</Suspense>
-						)
-					},
-					{
-						path: 'AIanalysis',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<AIDiagnosisPage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'clean',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<CleanOptimizationPage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'task',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<WorkOrderPage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'table',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<ReportCenterPage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'systemSetting',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<SystemSetting />
-							</Suspense>
-						),
-						children: [
-							{ index: true, element: <Suspense fallback={<PageFallback />}><BasicSettings /></Suspense> },
-							{ path: 'basic', element: <Suspense fallback={<PageFallback />}><BasicSettings /></Suspense> },
-							{ path: 'User', element: <Suspense fallback={<PageFallback />}><UserRolePage /></Suspense> },
-							{ path: 'menu', element: <Suspense fallback={<PageFallback />}><MenuList /></Suspense> },
-							{ path: 'org', element: <Suspense fallback={<PageFallback />}><Organization /></Suspense> },
-							{ path: 'site', element: <Suspense fallback={<PageFallback />}><StationManage /></Suspense> },
-							{ path: 'notice', element: <Suspense fallback={<PageFallback />}><NoticePolicyPlaceholder /></Suspense> },
-							{ path: 'deviceAccess', element: <Suspense fallback={<PageFallback />}><DeviceAccessPage /></Suspense> },
-							{ path: 'dataSafety', element: <Suspense fallback={<PageFallback />}><DataSafetyPlaceholder /></Suspense> },
-							{ path: 'systemMaintenance', element: <Suspense fallback={<PageFallback />}><SystemMaintenancePage /></Suspense> },
-							{ path: 'monitor', element: <Suspense fallback={<PageFallback />}><OnlineUserPage /></Suspense> },
-							{ path: 'devices', element: <Suspense fallback={<PageFallback />}><DeviceManagementPage /></Suspense> },
-							{ path: 'log', element: <Suspense fallback={<PageFallback />}><LogManagement /></Suspense> },
-							{ path: 'videoManage', element: <Suspense fallback={<PageFallback />}><VideoManagement /></Suspense> },
-						]
-					},
-					{
-						path: 'downloads',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Downloads />
-							</Suspense>
-						)
-					},
-					{
-						path: 'manage/users',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Users />
-							</Suspense>
-						)
-					},
-					{
-						path: 'manage/roles',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Roles />
-							</Suspense>
-						)
-					},
-					{
-						path: 'manage/menuList',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<MenuList />
-							</Suspense>
-						)
-					},
-					{
-						path: 'organization',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Organization />
-							</Suspense>
-						)
-					},
-					{
-						path: 'station',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<StationManage />
-							</Suspense>
-						)
-					},
-					{
-						path: 'system',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<SystemSetting />
-							</Suspense>
-						)
-					},
-					{
-						path: 'profile',
-						element: (
-							<Suspense fallback={<PageFallback />}>
-								<Profile />
-							</Suspense>
-						)
-					},
-					{
-						path: '*',
-						element: <ModuleDeveloping />,
-					},
-				],
-			},
-		],
-	},
-];
+import { routes } from './routes';
 
 export const router = createBrowserRouter(routes);
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
new file mode 100644
index 0000000..279aae9
--- /dev/null
+++ b/src/router/routes.tsx
@@ -0,0 +1,219 @@
+import React, { lazy, Suspense } from 'react';
+import type { RouteObject } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+// 🔥 所有组件全部改为懒加载
+const VideoMonitorPage = lazy(() => import('../pages/VideoMonitorPage'));
+const AIDiagnosisPage = lazy(() => import('../pages/AIAnalysis'));
+const CleanOptimizationPage = lazy(() => import('../pages/CleanOptimization'));
+const WorkOrderPage = lazy(() => import('../pages/WorkOrder'));
+const ReportCenterPage = lazy(() => import('../pages/ReportCenter'));
+const RealTimeMonitorPage = lazy(() => import('../pages/RealTimeMonitor'));
+const Agri = lazy(() => import('../pages/Agri'));
+
+const Layout = lazy(() => import('../components/Layout'));
+const ProtectedRoute = lazy(() => import('../components/ProtectedRoute'));
+const Login = lazy(() => import('../pages/Login'));
+
+const Home = lazy(() => import('../pages/Home'));
+const Video = lazy(() => import('../pages/Video'));
+const Alerts = lazy(() => import('../pages/Alerts'));
+const Downloads = lazy(() => import('../pages/Downloads'));
+const Roles = lazy(() => import('../pages/Roles'));
+const Users = lazy(() => import('../pages/Users'));
+const MenuList = lazy(() => import('../components/SystemSetting/MenuList'));
+const Organization = lazy(() => import('../components/SystemSetting/Organization'));
+const StationManage = lazy(() => import('../components/SystemSetting/StationManage'));
+const SystemSetting = lazy(() => import('../pages/SystemSetting'));
+const Profile = lazy(() => import('../pages/Profile'));
+
+const DeviceStatus = lazy(() => import('../components/devices/DeviceStatusPage'));
+const WayLineTask = lazy(() => import('../components/devices/WayLinePage'));
+const RobotTask = lazy(() => import('../components/devices/RobotTaskPage'));
+const DevicesOverview = lazy(() => import('../components/devices/DeviceOverviewPage'));
+
+const BasicSettings = lazy(() => import('../components/SystemSetting/BasicSettings'));
+const UserRolePage = lazy(() => import('../components/SystemSetting/UserPage'));
+const DeviceAccessPage = lazy(() => import('../components/SystemSetting/DeviceAccessPage'));
+const OnlineUserPage = lazy(() => import('../components/SystemSetting/OnlineUser'));
+const DeviceManagementPage = lazy(() => import('../components/SystemSetting/DeviceManagement'));
+const SystemMaintenancePage = lazy(() => import('../components/SystemSetting/SystemMaintain'));
+const LogManagement = lazy(() => import('../components/SystemSetting/LogManagement'));
+const VideoManagement = lazy(() => import('../components/SystemSetting/VideoManagement'));
+
+// 加载中动画
+export function PageFallback() {
+	return (
+		<div className="flex items-center justify-center h-full min-h-[200px]">
+			<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
+		</div>
+	);
+}
+
+// 封装高阶组件，消除重复 Suspense
+export const withSuspense = (Comp: React.LazyExoticComponent<React.FC>) => {
+	return <Suspense fallback={<PageFallback />}>{<Comp />}</Suspense>;
+};
+
+// 占位页（国际化）
+const NoticePolicyPlaceholder = () => {
+	const { t } = useTranslation();
+	return (
+		<div style={{ padding: 20 }}>
+			<h2>{t('router.noticePolicy')}</h2>
+		</div>
+	);
+};
+
+const DataSafetyPlaceholder = () => {
+	const { t } = useTranslation();
+	return (
+		<div style={{ padding: 20 }}>
+			<h2>{t('router.dataSafety')}</h2>
+		</div>
+	);
+};
+
+const ModuleDeveloping = () => {
+	const { t } = useTranslation();
+	return (
+		<div className="flex flex-col items-center justify-center h-full gap-4 text-gray-400 select-none">
+			<span className="text-6xl opacity-20">🚧</span>
+			<p className="text-lg font-medium">{t('router.moduleDeveloping')}</p>
+		</div>
+	);
+};
+
+// ====================== 路由配置数组 ======================
+export const routes: RouteObject[] = [
+	{
+		path: '/login',
+		element: withSuspense(Login),
+	},
+	{
+		element: withSuspense(ProtectedRoute),
+		children: [
+			{
+				element: withSuspense(Layout),
+				children: [
+					{
+						index: true,
+						element: withSuspense(Home)
+					},
+					{
+						path: 'overview',
+						element: withSuspense(Home)
+					},
+					{
+						path: 'devices/overview',
+						element: withSuspense(DevicesOverview)
+					},
+					{
+						path: 'devices/status',
+						element: withSuspense(DeviceStatus)
+					},
+					{
+						path: 'devices/wayLineTask',
+						element: withSuspense(WayLineTask)
+					},
+					{
+						path: 'devices/robotTask',
+						element: withSuspense(RobotTask)
+					},
+					{
+						path: 'video',
+						element: withSuspense(Video)
+					},
+					{
+						path: 'RealtimeMonitor',
+						element: withSuspense(RealTimeMonitorPage)
+					},
+					{
+						path: 'monitor',
+						element: withSuspense(VideoMonitorPage)
+					},
+					{
+						path: 'agri',
+						element: withSuspense(Agri)
+					},
+					{
+						path: 'alerts/all',
+						element: withSuspense(Alerts)
+					},
+					{
+						path: 'AIanalysis',
+						element: withSuspense(AIDiagnosisPage)
+					},
+					{
+						path: 'clean',
+						element: withSuspense(CleanOptimizationPage)
+					},
+					{
+						path: 'task',
+						element: withSuspense(WorkOrderPage)
+					},
+					{
+						path: 'table',
+						element: withSuspense(ReportCenterPage)
+					},
+					{
+						path: 'systemSetting',
+						element: withSuspense(SystemSetting),
+						children: [
+							{ index: true, element: withSuspense(BasicSettings) },
+							{ path: 'basic', element: withSuspense(BasicSettings) },
+							{ path: 'User', element: withSuspense(UserRolePage) },
+							{ path: 'menu', element: withSuspense(MenuList) },
+							{ path: 'org', element: withSuspense(Organization) },
+							{ path: 'site', element: withSuspense(StationManage) },
+							{ path: 'notice', element: <Suspense fallback={<PageFallback />}><NoticePolicyPlaceholder /></Suspense> },
+							{ path: 'deviceAccess', element: withSuspense(DeviceAccessPage) },
+							{ path: 'dataSafety', element: <Suspense fallback={<PageFallback />}><DataSafetyPlaceholder /></Suspense> },
+							{ path: 'systemMaintenance', element: withSuspense(SystemMaintenancePage) },
+							{ path: 'monitor', element: withSuspense(OnlineUserPage) },
+							{ path: 'devices', element: withSuspense(DeviceManagementPage) },
+							{ path: 'log', element: withSuspense(LogManagement) },
+							{ path: 'videoManage', element: withSuspense(VideoManagement) },
+						]
+					},
+					{
+						path: 'downloads',
+						element: withSuspense(Downloads)
+					},
+					{
+						path: 'manage/users',
+						element: withSuspense(Users)
+					},
+					{
+						path: 'manage/roles',
+						element: withSuspense(Roles)
+					},
+					{
+						path: 'manage/menuList',
+						element: withSuspense(MenuList)
+					},
+					{
+						path: 'organization',
+						element: withSuspense(Organization)
+					},
+					{
+						path: 'station',
+						element: withSuspense(StationManage)
+					},
+					{
+						path: 'system',
+						element: withSuspense(SystemSetting)
+					},
+					{
+						path: 'profile',
+						element: withSuspense(Profile)
+					},
+					{
+						path: '*',
+						element: <ModuleDeveloping />,
+					},
+				],
+			},
+		],
+	},
+];