338 lines
11 KiB
TypeScript
338 lines
11 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
|
|
export const routeMeta: Record<string, {
|
|
title: string;
|
|
roles: string[];
|
|
requiresAuth: boolean;
|
|
}> = {
|
|
'/': { title: 'router.overview', roles: ['admin', 'operator', 'viewer'], requiresAuth: true },
|
|
'/overview': { title: 'router.overview', roles: ['admin', 'operator', 'viewer'], requiresAuth: true },
|
|
'/devices': { title: 'router.devices', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/video': { title: 'router.video', roles: ['admin', 'operator', 'viewer'], requiresAuth: true },
|
|
'/monitor': { title: 'router.monitor', roles: ['admin', 'operator', 'viewer'], requiresAuth: true },
|
|
'/alerts': { title: 'router.alerts', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/AIanalysis': { title: 'router.aiAnalysis', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/clean': { title: 'router.clean', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/task': { title: 'router.task', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/table': { title: 'router.table', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/systemSetting': { title: 'router.systemSetting', roles: ['admin'], requiresAuth: true },
|
|
'/systemSetting/log': { title: 'router.log', roles: ['admin'], requiresAuth: true },
|
|
'/systemSetting/videoManage': { title: 'router.videoManage', roles: ['admin'], requiresAuth: true },
|
|
'/downloads': { title: 'router.downloads', roles: ['admin', 'operator'], requiresAuth: true },
|
|
'/manage/users': { title: 'router.users', roles: ['admin'], requiresAuth: true },
|
|
'/manage/roles': { title: 'router.roles', roles: ['admin'], requiresAuth: true },
|
|
'/manage/menuList': { title: 'router.menuList', roles: ['admin'], requiresAuth: true },
|
|
'/organization': { title: 'router.organization', roles: ['admin'], requiresAuth: true },
|
|
'/station': { title: 'router.station', roles: ['admin'], requiresAuth: true },
|
|
'/RealtimeMonitor': { title: 'router.monitor', roles: ['admin', 'operator', 'viewer'], requiresAuth: true },
|
|
'/profile': { title: 'router.profile', roles: ['admin', 'operator', 'viewer'], requiresAuth: true },
|
|
};
|
|
|
|
// ====================== 全部懒加载的路由配置 ======================
|
|
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 />}><div style={{ padding: 20 }}><h2>通知策略页面</h2></div></Suspense> },
|
|
{ path: 'deviceAccess', element: <Suspense fallback={<PageFallback />}><DeviceAccessPage /></Suspense> },
|
|
{ path: 'dataSafety', element: <Suspense fallback={<PageFallback />}><div style={{ padding: 20 }}><h2>数据与安全页面</h2></div></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: (
|
|
<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">模块开发中</p>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export const router = createBrowserRouter(routes);
|