路由组件拆分
This commit is contained in:
@@ -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);
|
||||
|
||||
219
src/router/routes.tsx
Normal file
219
src/router/routes.tsx
Normal file
@@ -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 />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user