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 WorkflowDefinitionList = lazy(() => import('../pages/Workflow/Definition'));
const WorkflowDesign = lazy(() => import('../pages/Workflow/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 JenkinsManagerList = lazy(() => import('../pages/Deploy/JenkinsManager/List'));
const GitManagerList = lazy(() => import('../pages/Deploy/GitManager/List'));
const External = lazy(() => import('../pages/Deploy/External'));

// Workflow2 React Flow 版本
const Workflow2DefinitionList = lazy(() => import('../pages/Workflow2/Definition'));
const Workflow2Design = lazy(() => import('../pages/Workflow2/Design'));
const Workflow2InstanceList = lazy(() => import('../pages/Workflow2/Instance'));
const Workflow2Monitor = lazy(() => import('../pages/Workflow2/Monitor'));

// 创建路由
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-manager',
                        element: <Suspense fallback={<LoadingComponent/>}><JenkinsManagerList/></Suspense>
                    },
                    {
                        path: 'git-manager',
                        element: <Suspense fallback={<LoadingComponent/>}><GitManagerList/></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: 'workflow',
                children: [
                    {
                        path: 'definition',
                        element: (
                            <Suspense fallback={<LoadingComponent/>}>
                                <WorkflowDefinitionList/>
                            </Suspense>
                        )
                    },
                    {
                        path: 'design',
                        children: [
                            {
                                path: ':id',
                                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: 'workflow2',
                    children: [
                        {
                            path: 'definition',
                            element: (
                                <Suspense fallback={<LoadingComponent/>}>
                                    <Workflow2DefinitionList/>
                                </Suspense>
                            )
                        },
                        {
                            path: 'design/:id',
                            element: (
                                <Suspense fallback={<LoadingComponent/>}>
                                    <Workflow2Design/>
                                </Suspense>
                            )
                        },
                        {
                            path: 'instance',
                            element: (
                                <Suspense fallback={<LoadingComponent/>}>
                                    <Workflow2InstanceList/>
                                </Suspense>
                            )
                        },
                        {
                            path: 'monitor',
                            element: (
                                <Suspense fallback={<LoadingComponent/>}>
                                    <Workflow2Monitor/>
                                </Suspense>
                            )
                        }
                    ]
                },
            {
                path: '*',
                element: <Navigate to="/dashboard"/>
            }
        ]
    }
]);

export default router;