deploy-ease-platform/frontend/src/router/index.tsx

import { createBrowserRouter, Navigate } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import { Spin } from 'antd';
import Login from '../pages/Login';
import BasicLayout from '../layouts/BasicLayout';
import { useSelector } from 'react-redux';
import { RootState } from '../store';

// 加中组件
const LoadingComponent = () => (
    <div style={{ padding: 24, textAlign: 'center' }}>
        <Spin size="large" />
    </div>
);

// 路由守卫
const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
    const token = useSelector((state: RootState) => state.user.token);

    if (!token) {
        return <Navigate to="/login" />;
    }

    return <>{children}</>;
};

// 懒加载组件
const Dashboard = lazy(() => import('../pages/Dashboard'));
const User = lazy(() => import('../pages/System/User'));
const Role = lazy(() => import('../pages/System/Role'));
const Menu = lazy(() => import('../pages/System/Menu'));
const Department = lazy(() => import('../pages/System/Department'));
const X6Test = lazy(() => import('../pages/X6Test'));
const WorkflowDefinitionList = lazy(() => import('../pages/Workflow/Definition'));
const WorkflowDesign = lazy(() => import('../pages/Workflow/Definition/Design'));
const WorkflowInstance = lazy(() => import('../pages/Workflow/Instance'));
const WorkflowMonitor = lazy(() => import('../pages/Workflow/Monitor'));
const LogStreamPage = lazy(() => import('../pages/LogStream'));
const NodeDesign = lazy(() => import('../pages/Workflow/NodeDesign'));
const NodeDesignForm = lazy(() => import('../pages/Workflow/NodeDesign/Design'));
const ProjectGroupList = lazy(() => import('../pages/Deploy/ProjectGroup/List'));
const ApplicationList = lazy(() => import('../pages/Deploy/Application/List'));
const EnvironmentList = lazy(() => import('../pages/Deploy/Environment/List'));
const DeploymentConfigList = lazy(() => import('../pages/Deploy/Deployment/List'));
const JenkinsList = lazy(() => import('../pages/Jenkins/List'));
const External = lazy(() => import('../pages/Deploy/External'));

// 创建路由
const router = createBrowserRouter([
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/',
        element: (
            <PrivateRoute>
                <BasicLayout />
            </PrivateRoute>
        ),
        children: [
            {
                path: '',
                element: <Navigate to="/dashboard" replace />
            },
            {
                path: 'dashboard',
                element: (
                    <Suspense fallback={<LoadingComponent/>}>
                        <Dashboard/>
                    </Suspense>
                )
            },
            {
                path: 'deploy',
                children: [
                    {
                        path: 'project-group',
                        element: <Suspense fallback={<LoadingComponent/>}><ProjectGroupList/></Suspense>
                    },
                    {
                        path: 'applications',
                        element: <Suspense fallback={<LoadingComponent/>}><ApplicationList/></Suspense>
                    },
                    {
                        path: 'environments',
                        element: <Suspense fallback={<LoadingComponent/>}><EnvironmentList/></Suspense>
                    },
                    {
                        path: 'deployment',
                        element: <Suspense fallback={<LoadingComponent/>}><DeploymentConfigList/></Suspense>
                    },
                    {
                        path: 'jenkins',
                        element: <Suspense fallback={<LoadingComponent/>}><JenkinsList/></Suspense>
                    },
                    {
                        path: 'external',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <External/>
                            </Suspense>
                        )
                    }
                ]
            },
            {
                path: 'system',
                children: [
                    {
                        path: 'user',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <User/>
                            </Suspense>
                        )
                    },
                    {
                        path: 'role',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <Role/>
                            </Suspense>
                        )
                    },
                    {
                        path: 'menu',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <Menu/>
                            </Suspense>
                        )
                    },
                    {
                        path: 'department',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <Department/>
                            </Suspense>
                        )
                    }
                ]
            },
            // {
            //     path: 'x6-test',
            //     element: (
            //         <Suspense fallback={<LoadingComponent/>}>
            //             <X6Test/>
            //         </Suspense>
            //     )
            // },
            {
                path: 'workflow',
                children: [
                    {
                        path: 'definition',
                        children: [
                            {
                                path: '',
                                element: (
                                    <Suspense fallback={<LoadingComponent/>}>
                                        <WorkflowDefinitionList/>
                                    </Suspense>
                                )
                            },
                            {
                                path: ':id/design',
                                element: (
                                    <Suspense fallback={<LoadingComponent/>}>
                                        <WorkflowDesign/>
                                    </Suspense>
                                )
                            }
                        ]
                    },
                    {
                        path: 'instance',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <WorkflowInstance/>
                            </Suspense>
                        )
                    },
                    {
                        path: 'node-design',
                        children: [
                            {
                                index: true,
                                element: (
                                    <Suspense fallback={<LoadingComponent/>}>
                                        <NodeDesign/>
                                    </Suspense>
                                )
                            },
                            {
                                path: 'create',
                                element: (
                                    <Suspense fallback={<LoadingComponent/>}>
                                        <NodeDesignForm/>
                                    </Suspense>
                                )
                            },
                            {
                                path: 'design/:id',
                                element: (
                                    <Suspense fallback={<LoadingComponent/>}>
                                        <NodeDesignForm/>
                                    </Suspense>
                                )
                            }
                        ]
                    },
                    {
                        path: 'monitor',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <WorkflowMonitor/>
                            </Suspense>
                        )
                    },
                    {
                        path: 'log-stream/:processInstanceId',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <LogStreamPage/>
                            </Suspense>
                        )
                    }
                ]
            },
            {
                path: '*',
                element: <Navigate to="/dashboard"/>
            }
        ]
    }
]);

export default router;