4. 前端路由与页面布局：多级路由设计、左侧导航栏、顶部状态栏、内容区域布局

在自助容量压测作业平台中，前端架构的稳定性与可扩展性直接影响用户体验与后续迭代效率。本章聚焦于前端路由体系与页面布局的工程化设计，涵盖多级路由的嵌套策略、左侧导航栏的菜单结构、顶部状态栏的信息承载以及内容区域的弹性布局方案。

4.1 多级路由设计

压测平台的功能模块具有明显的层级关系：一级模块（如压测任务、数据管理、系统设置）下包含二级子模块（如任务列表、任务详情、任务报告），部分子模块还需进一步细分（如报告中的实时指标与历史趋势）。因此，采用 嵌套路由（Nested Routes） 是合理的选择。

4.2 左侧导航栏

左侧导航栏采用 可折叠的树形菜单，支持多级展开与收起。导航数据由路由配置自动生成，避免手动维护两份菜单数据。

• 一级菜单： 压测任务、数据管理、监控告警、系统设置。
• 二级菜单： 压测任务下包含任务列表、新建任务、任务模板；数据管理下包含数据源配置、数据集管理。
• 三级菜单： 任务列表中的每个任务可展开查看详情、报告、日志。
• 高亮规则： 当前路由匹配时，自动高亮对应的菜单项及其所有父级菜单。
• 折叠状态： 用户可手动折叠导航栏，折叠后只显示图标，鼠标悬停时展开子菜单。

4.3 顶部状态栏

顶部状态栏固定于页面顶部，承载全局状态信息与操作入口，不随内容区域滚动。

4.4 内容区域布局

内容区域采用 弹性布局（Flexbox），左侧导航栏固定宽度（默认 240px，折叠后 64px），右侧内容区域自动填充剩余宽度。内容区域内部可进一步划分为：

• 面包屑导航： 位于内容区域顶部，显示当前页面路径，支持快速跳转。
• 页面标题与操作栏： 显示当前页面名称，右侧放置新增、刷新、导出等操作按钮。
• 主内容区： 根据路由渲染对应的页面组件，支持表格、表单、图表、日志流等。
• 底部状态条（可选）： 显示当前页面的数据加载状态、最后更新时间、分页信息等。

// 布局组件示例（React + TypeScript）
const MainLayout: React.FC = () => {
  return (
    <div className="main-layout">
      <Sidebar />
      <div className="content-wrapper">
        <TopBar />
        <div className="content-body">
          <Breadcrumb />
          <PageHeader />
          <Outlet />  {/* 子路由渲染位置 */}
          <StatusBar />
        </div>
      </div>
    </div>
  );
};

4.5 整体布局架构图

下图展示了压测作业平台的前端页面布局结构，包含左侧导航栏、顶部状态栏、内容区域三大部分，以及内容区域内部的细分区域。

4.6 路由与布局的联动机制

路由配置与布局组件通过 嵌套路由出口（Outlet） 实现联动。每个层级的路由组件都可以定义自己的布局，子路由的页面内容在父布局的 <Outlet /> 位置渲染。

4.7 响应式与折叠策略

4.8 路由守卫与权限控制

压测平台涉及多角色权限（管理员、测试工程师、只读观察者），路由层面需实现 权限守卫。在路由配置中为每个页面定义 requiredRoles 字段，路由跳转前检查当前用户角色是否匹配。

// 路由守卫示例
const ProtectedRoute: React.FC<{ roles: string[] }> = ({ roles, children }) => {
  const { user } = useAuth();
  
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  
  if (!roles.includes(user.role)) {
    return <Navigate to="/403" replace />;
  }
  
  return <>{children}</>;
};

// 路由配置中使用
{
  path: '/tasks/report',
  element: (
    <ProtectedRoute roles={['admin', 'engineer']}>
      <TaskReport />
    </ProtectedRoute>
  )
}

4.9 布局性能优化

• 懒加载： 每个页面组件使用 React.lazy() 动态导入，减少首屏加载体积。
• 缓存布局： 导航栏与顶部状态栏使用 React.memo 包裹，避免因内容区域更新而重新渲染。
• 路由预加载： 用户鼠标悬停在导航菜单项时，预加载对应页面的 JS 资源。
• 骨架屏： 内容区域在页面加载时显示骨架屏，提升感知性能。