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 ( -
-
-
- ); -} - -// 占位页(国际化) -const NoticePolicyPlaceholder = () => { - const { t } = useTranslation(); - return ( -
-

{t('router.noticePolicy')}

-
- ); -}; - -const DataSafetyPlaceholder = () => { - const { t } = useTranslation(); - return ( -
-

{t('router.dataSafety')}

-
- ); -}; - -const ModuleDeveloping = () => { - const { t } = useTranslation(); - return ( -
- 🚧 -

{t('router.moduleDeveloping')}

-
- ); -}; - - -// ====================== 全部懒加载的路由配置 ====================== -const routes: RouteObject[] = [ - { - path: '/login', - element: ( - }> - - - ), - }, - { - element: ( - }> - - - ), - children: [ - { - element: ( - }> - - - ), - children: [ - { - index: true, - element: ( - }> - - - ) - }, - { - path: 'overview', - element: ( - }> - - - ) - }, - { - path: 'devices/overview', - element: ( - }> - - - ) - }, - { - path: 'devices/status', - element: ( - }> - - - ) - }, - { - path: 'devices/wayLineTask', - element: ( - }> - - - ) - }, - { - path: 'devices/robotTask', - element: ( - }> - - - ) - }, - { - path: 'video', - element: ( - }> - - ) - }, - { - path: 'RealtimeMonitor', - element: ( - }> - - - ) - }, - { - path: 'monitor', - element: ( - }> - - - ) - }, - { - path: 'agri', - element: ( - }> - - - ) - }, - { - path: 'alerts/all', - element: ( - }> - - - ) - }, - { - path: 'AIanalysis', - element: ( - }> - - - ) - }, - { - path: 'clean', - element: ( - }> - - - ) - }, - { - path: 'task', - element: ( - }> - - - ) - }, - { - path: 'table', - element: ( - }> - - - ) - }, - { - path: 'systemSetting', - element: ( - }> - - - ), - children: [ - { index: true, element: }> }, - { path: 'basic', element: }> }, - { path: 'User', element: }> }, - { path: 'menu', element: }> }, - { path: 'org', element: }> }, - { path: 'site', element: }> }, - { path: 'notice', element: }> }, - { path: 'deviceAccess', element: }> }, - { path: 'dataSafety', element: }> }, - { path: 'systemMaintenance', element: }> }, - { path: 'monitor', element: }> }, - { path: 'devices', element: }> }, - { path: 'log', element: }> }, - { path: 'videoManage', element: }> }, - ] - }, - { - path: 'downloads', - element: ( - }> - - - ) - }, - { - path: 'manage/users', - element: ( - }> - - - ) - }, - { - path: 'manage/roles', - element: ( - }> - - - ) - }, - { - path: 'manage/menuList', - element: ( - }> - - - ) - }, - { - path: 'organization', - element: ( - }> - - - ) - }, - { - path: 'station', - element: ( - }> - - - ) - }, - { - path: 'system', - element: ( - }> - - - ) - }, - { - path: 'profile', - element: ( - }> - - - ) - }, - { - path: '*', - element: , - }, - ], - }, - ], - }, -]; +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 ( +
+
+
+ ); +} + +// 封装高阶组件,消除重复 Suspense +export const withSuspense = (Comp: React.LazyExoticComponent) => { + return }>{}; +}; + +// 占位页(国际化) +const NoticePolicyPlaceholder = () => { + const { t } = useTranslation(); + return ( +
+

{t('router.noticePolicy')}

+
+ ); +}; + +const DataSafetyPlaceholder = () => { + const { t } = useTranslation(); + return ( +
+

{t('router.dataSafety')}

+
+ ); +}; + +const ModuleDeveloping = () => { + const { t } = useTranslation(); + return ( +
+ 🚧 +

{t('router.moduleDeveloping')}

+
+ ); +}; + +// ====================== 路由配置数组 ====================== +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: }> }, + { path: 'deviceAccess', element: withSuspense(DeviceAccessPage) }, + { path: 'dataSafety', element: }> }, + { 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: , + }, + ], + }, + ], + }, +];