自从三原管理系统上线以来凭借用户管理、角色权限、主题自适应等功NengYi经在行业内部赢得不少好评。近期，研发团队又给产品注入了两枚“强心剂”——混合布局和侧边双栏布局。这两套方案专为菜单层级繁多的企业后台而生，让页面结构geng清晰、操作geng顺手。

在传统的后台系统里Zui常见的只有「垂直侧边栏」和「水平顶部」两种排版。它们在菜单数量有限时表现不错，但当业务模块不断扩张、子页面层级加深时往往出现以下痛点：

信息密度过高：用户需要滚动大量列表才Neng找到目标功Neng。

视觉焦点分散：同一级别的选项混杂在一起，导致误点。

代码维护困难：每次增删菜单dou要手动修改路由结构。

正是基于这些现实困扰，团队决定在「三原管理系统」中加入两套geng具弹性的布局方案，以期在不牺牲美观的前提下提升可操作性。

混合布局把「顶部导航」与「侧边导航」相结合：顶部只展示一级入口，而对应的二三级子项则迁移到左侧栏。换句话说用户在点击顶部主菜单后会kan到一个专属的侧边面板，列出该模块下所有细分功Neng。

层级清晰：一级入口保持在视线Zui上方，二三级内容自动折叠进左侧，使结构一目了然。

空间利用率高：左侧栏宽度可随内容自动伸缩，不会因子菜单过多而导致水平滚动条。

适配性强：无论是桌面端还是宽屏笔记本，douNeng保持良好的排版；移动端则Ke以把左侧栏收起，仅保留顶部快捷入口。

// 读取完整路由树
const allRoutes = ref);
// 顶部只保留一级
const topMenu = computed => {
  return allRoutes.value.map(item => ({
    label: item.title,
    key: item.path,
    // 为后续获取子集Zuo标记
    childrenPath: item.children?.?.path ?? ''
  }));
});
// 左侧根据当前激活的 topMenu 动态生成
watch => route.path,  => {
  const activeTop = topMenu.value.find);
  sideMenu.value = activeTop?.childrenPath ? findChildren : ;
});

上述逻辑核心是：先把完整路由数据拆成「顶层」和「子层」，再通过路由变化实时geng新左侧列表，实现“点即显”的交互效果。

顾名思义，这种方案在页面左侧预留了两个并排的栏目。第一个栏目展示所有一级菜单；第二个栏目则根据用户当前选择，呈现对应二级甚至三级的全部子项。整体kan上去像是一张“树形展开图”，但却采用了平铺式排列，让信息密度大幅下降。

一次定位，多层浏览：用户只需一次点击即可kan到同层级所有兄弟节点，无需来回切换页面。

减少跳转次数：从根目录到深层页面只需一步完成，大幅提升工作效率。

易于 ：当业务继续细分时只需往第二栏添加新节点，不会影响第一栏结构。

// 一级菜单
const levelOne = ref(allRoutes.value.map(item => ({
  label: item.title,
  key: item.path,
}));
// 二级及以后根据选中项动态抽取
function getSubTree {
  const node = findNodeByKey;
  return node?.children || ;
}
// 当用户点击左侧第一列时
function onFirstColumnClick {
  selectedFirst.value = item.key;
  levelTwo.value = getSubTree;
}

通过递归搜索函数findNodeByKeyKe以快速定位任意节点，然后把它的子树直接渲染到第二列，实现“父子联动”。整个过程只依赖 Vue/React 的响应式特性，无需额外状态管理库即可完成。

💡 为每个导航元素添加