ProLayout 高级布局

ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态、自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑、页面标题，并且提供低成本方案接入页脚工具栏。

基础用法

通过 menu-data 传入树形菜单（path / name / 可选 icon / children），用 layout 切换 side | top | mix；使用 v-model:active-path 与当前路由或业务状态同步；v-model:collapsed 控制侧栏折叠（top 布局下无侧栏，折叠无效）。

切换 side / top / mix；菜单项带图标；menu-active-color / menu-active-background 自定义选中样式（示例 #3992FF / #F7F8FA）；headerContent 内根据 activePath 渲染面包屑（side 顶栏；mix / top 主内容区上方）；可视化 → 数据大屏 演示 hideMenu；无 vue-router 时仅本地状态演示。

vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  Connection,
  Cpu,
  Document,
  Earth,
  Expand,
  Fold,
  Folder,
  Grid,
  Guide,
  House,
  List,
  Lock,
  Map,
  Mute,
  Notify,
  Operation,
  Position,
  Refresh,
  Setting,
  Share,
  UserFilled,
  Warning,
} from '@uniboot/icons-vue'
import { ProLayout } from 'uniboot-ui'

import type { ProLayoutMenuItem } from 'uniboot-ui'

type LayoutKind = 'side' | 'top' | 'mix'

const collapsed = ref(false)
const activePath = ref('/nodes')
const layout = ref<LayoutKind>('side')
const updatedAt = ref(new Date('2025-02-14T17:12:34'))

function findMenuBreadcrumb(
  targetPath: string,
  items: ProLayoutMenuItem[],
  ancestors: ProLayoutMenuItem[] = []
): ProLayoutMenuItem[] | null {
  for (const item of items) {
    if (item.path === targetPath) {
      return [...ancestors, item]
    }
    if (item.children?.length) {
      const found = findMenuBreadcrumb(targetPath, item.children, [
        ...ancestors,
        item,
      ])
      if (found) return found
    }
  }
  return null
}

/** 与 ProLayout 一致：整棵树最长路径前缀匹配，用于演示 `hideMenu` 状态 */
function findDeepestMatchingMenuItem(
  active: string,
  roots: ProLayoutMenuItem[]
): ProLayoutMenuItem | null {
  if (!active || !roots?.length) return null
  let best: ProLayoutMenuItem | null = null
  let bestLen = -1
  function walk(items: ProLayoutMenuItem[]) {
    for (const item of items) {
      if (active === item.path || active.startsWith(`${item.path}/`)) {
        if (item.path.length > bestLen) {
          best = item
          bestLen = item.path.length
        }
      }
      if (item.children?.length) walk(item.children)
    }
  }
  walk(roots)
  return best
}

/** 示意图风格：侧栏菜单（含可展开子菜单） */
const menuData: ProLayoutMenuItem[] = [
  { path: '/resources', name: '资源管理', icon: Folder },
  { path: '/nodes', name: '节点管理', icon: Share },
  { path: '/connections', name: '连接管理', icon: Connection },
  { path: '/access', name: '接入控制', icon: Lock },
  {
    path: '/params',
    name: '参数配置',
    icon: Setting,
    children: [
      { path: '/params/general', name: '通用', icon: Operation },
      {
        path: '/params/advanced',
        name: '参数模板与策略配置中心（侧栏超长文案单行省略演示）',
      },
    ],
  },
  {
    path: '/routing',
    name: '路由转发',
    icon: Guide,
    children: [
      { path: '/routing/rules', name: '转发规则', icon: List },
      { path: '/routing/plugins', name: '插件', icon: Grid },
    ],
  },
  { path: '/trace', name: '消息追踪', icon: Position },
  {
    path: '/viz',
    name: '可视化',
    icon: Map,
    children: [
      {
        path: '/viz/dashboard',
        name: '数据大屏（隐藏菜单）',
        icon: Grid,
        hideMenu: true,
      },
      { path: '/viz/reports', name: '统计报表', icon: Document },
    ],
  },
  {
    path: '/monitor',
    name: '监控告警',
    icon: Warning,
    children: [
      { path: '/monitor/alert', name: '告警策略', icon: Notify },
      { path: '/monitor/silence', name: '静默', icon: Mute },
    ],
  },
  { path: '/dev', name: '开发调试', icon: Cpu },
  { path: '/logs', name: '日志查询', icon: Document },
]

const activeMenuMatch = computed(() =>
  findDeepestMatchingMenuItem(activePath.value, menuData)
)
const immersiveHideMenu = computed(() => !!activeMenuMatch.value?.hideMenu)

const breadcrumbTrail = computed(() => {
  const path = activePath.value
  if (!path) return []
  return findMenuBreadcrumb(path, menuData) ?? []
})

const tableData = [
  {
    name: 'emqx@node1.emqx.com',
    status: 'running' as const,
    uptime: '12 天 3 小时 21 分 08 秒',
    clients: '1,000',
    cpuLoad: '0.12 / 0.08 / 0.05',
    memText: '3.07G / 3.86G',
    memPct: 79,
  },
  {
    name: 'emqx@node2.emqx.com',
    status: 'stopped' as const,
    uptime: '—',
    clients: '0',
    cpuLoad: '—',
    memText: '0.12G / 3.86G',
    memPct: 3,
  },
]

function pad2(n: number) {
  return n < 10 ? `0${n}` : `${n}`
}

function formatUpdated(d: Date) {
  return `${d.getFullYear()}/${pad2(d.getMonth() + 1)}/${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`
}

function refreshData() {
  updatedAt.value = new Date()
}

function exitImmersivePage() {
  activePath.value = '/nodes'
}
</script>

<template>
  <div class="pro-layout-demo">
    <div class="pro-layout-demo__toolbar">
      <span class="label">布局</span>
      <button
        type="button"
        :class="{ active: layout === 'side' }"
        @click="layout = 'side'"
      >
        side
      </button>
      <button
        type="button"
        :class="{ active: layout === 'top' }"
        @click="layout = 'top'"
      >
        top
      </button>
      <button
        type="button"
        :class="{ active: layout === 'mix' }"
        @click="layout = 'mix'"
      >
        mix
      </button>
      <span v-if="layout === 'side'" class="pro-layout-demo__layout-note">
        side：<code>headerContent</code> 在顶栏 Logo / 标题右侧
      </span>
      <span
        v-else-if="layout === 'mix' || layout === 'top'"
        class="pro-layout-demo__layout-note"
      >
        {{ layout }}：<code>headerContent</code> 在主内容区上方
      </span>
      <span
        v-if="immersiveHideMenu"
        class="pro-layout-demo__hint"
        role="status"
      >
        当前为 <code>hideMenu</code> 路由：侧栏与顶栏横向菜单已隐藏，顶栏 Logo /
        操作区仍保留；请用主内容区按钮或其它入口返回。
      </span>
    </div>
    <div class="pro-layout-demo__frame">
      <pro-layout
        v-model:collapsed="collapsed"
        v-model:active-path="activePath"
        :layout="layout"
        title="BlinkQ"
        :menu-data="menuData"
        menu-active-color="#3992FF"
        menu-active-background="#F7F8FA"
      >
        <template #logo>
          <span class="blinkq-mark" aria-hidden="true">B</span>
        </template>

        <template #actions>
          <u-button text class="hdr-icon-btn" aria-label="通知">
            <u-icon><Notify /></u-icon>
          </u-button>
          <u-button text class="hdr-icon-btn" aria-label="语言">
            <u-icon><Earth /></u-icon>
          </u-button>
          <div class="hdr-user">
            <u-avatar :size="32" :icon="UserFilled" />
            <span class="hdr-user__name">User Name100</span>
          </div>
        </template>

        <template #headerContent>
          <u-breadcrumb separator="/" class="demo-header-bc">
            <u-breadcrumb-item>
              <u-icon class="bc-home"><House /></u-icon>
            </u-breadcrumb-item>
            <u-breadcrumb-item v-for="item in breadcrumbTrail" :key="item.path">
              {{ item.name }}
            </u-breadcrumb-item>
          </u-breadcrumb>
        </template>

        <div v-if="immersiveHideMenu" class="demo-immersive">
          <div class="demo-immersive__inner">
            <p class="demo-immersive__title">数据大屏 · 沉浸视图</p>
            <p class="demo-immersive__desc">
              该页对应菜单项设置了
              <code>hideMenu: true</code>
              ，ProLayout 会隐藏全部
              <code>UMenu</code>
              （侧栏菜单、<strong>top</strong> /
              <strong>mix</strong> 下的顶栏横向菜单），顶栏
              <code>UPageHeader</code>
              中的 Logo、标题与
              <code>actions</code>
              仍显示。无菜单时需用页内按钮或路由返回其它页面。
            </p>
            <u-button type="primary" @click="exitImmersivePage">
              返回节点管理
            </u-button>
          </div>
        </div>

        <u-card v-else class="demo-page-card" shadow="never">
          <template #header>
            <div class="demo-card-head">
              <span />
              <div class="demo-card-head__right">
                <span class="demo-card-head__time">
                  数据更新于 {{ formatUpdated(updatedAt) }}
                </span>
                <u-button
                  circle
                  text
                  type="primary"
                  aria-label="刷新"
                  @click="refreshData"
                >
                  <u-icon><Refresh /></u-icon>
                </u-button>
              </div>
            </div>
          </template>

          <u-table :data="tableData" class="demo-table" style="width: 100%">
            <u-table-column label="名称" min-width="200">
              <template #default="{ row }">
                <u-link type="primary" :underline="false">
                  {{ row.name }}
                </u-link>
              </template>
            </u-table-column>
            <u-table-column label="状态" width="120">
              <template #default="{ row }">
                <span
                  class="status"
                  :class="
                    row.status === 'running'
                      ? 'status--running'
                      : 'status--stopped'
                  "
                >
                  <i class="status__dot" aria-hidden="true" />
                  {{ row.status === 'running' ? '运行中' : '停止' }}
                </span>
              </template>
            </u-table-column>
            <u-table-column prop="uptime" label="运行时长" min-width="200" />
            <u-table-column
              prop="clients"
              label="在线客户端数"
              width="130"
              align="right"
            />
            <u-table-column
              prop="cpuLoad"
              label="操作系统 CPU 负载"
              min-width="160"
            />
            <u-table-column label="内存占用" min-width="200">
              <template #default="{ row }">
                <div class="mem-cell">
                  <span class="mem-cell__label">{{ row.memText }}</span>
                  <u-progress
                    :percentage="row.memPct"
                    :show-text="false"
                    :stroke-width="8"
                  />
                </div>
              </template>
            </u-table-column>
          </u-table>
        </u-card>
      </pro-layout>
    </div>
  </div>
</template>

<style scoped>
.pro-layout-demo {
  width: 100%;
}

.pro-layout-demo__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pro-layout-demo__toolbar .label {
  font-size: 13px;
  color: var(--u-text-color-secondary, #909399);
}

.pro-layout-demo__toolbar button {
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid var(--u-border-color, #dcdfe6);
  border-radius: 4px;
  background: var(--u-bg-color, #fff);
  cursor: pointer;
}

.pro-layout-demo__toolbar button.active {
  border-color: var(--u-color-primary, #409eff);
  color: var(--u-color-primary, #409eff);
}

.pro-layout-demo__hint {
  margin-left: 8px;
  font-size: 13px;
  color: var(--u-color-primary, #409eff);
  line-height: 1.5;
}

.pro-layout-demo__hint code {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--u-fill-color-light, #f5f7fa);
}

.pro-layout-demo__layout-note {
  margin-left: 4px;
  font-size: 12px;
  color: var(--u-text-color-secondary, #909399);
  line-height: 1.4;
}

.pro-layout-demo__layout-note code {
  font-size: 11px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--u-fill-color-light, #f5f7fa);
}

.demo-header-bc {
  font-size: 13px;
  line-height: 1.35;
}

.pro-layout-demo__frame {
  height: 560px;
  border: 1px solid var(--u-border-color-lighter, #ebeef5);
  border-radius: 8px;
  overflow: hidden;
  background: var(--u-bg-color, #fff);
}

.blinkq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--u-color-primary, #409eff);
  line-height: 1;
}

.hdr-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0px;
  font-size: 26px;
  color: var(--u-text-color-regular, #87909c);
}

.hdr-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.hdr-user__name {
  font-size: 14px;
  color: var(--u-text-color-primary, #303133);
}

.bc-home {
  font-size: 16px;
  vertical-align: middle;
}

.demo-page-card {
  border-radius: 8px;
}

.demo-page-card :deep(.u-card__header) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--u-border-color-lighter, #ebeef5);
}

.demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.demo-card-head__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-card-head__time {
  font-size: 13px;
  color: var(--u-text-color-secondary, #909399);
}

.demo-table {
  font-size: 13px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status--running {
  color: var(--u-text-color-regular, #606266);
}

.status--running .status__dot {
  background: var(--u-color-success, #67c23a);
}

.status--stopped {
  color: var(--u-text-color-regular, #606266);
}

.status--stopped .status__dot {
  background: var(--u-color-danger, #f56c6c);
}

.mem-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 220px;
}

.mem-cell__label {
  font-size: 12px;
  color: var(--u-text-color-secondary, #909399);
}

.demo-immersive {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  margin: -8px 0;
  border-radius: 8px;
  background: linear-gradient(
    145deg,
    var(--u-fill-color-light, #f5f7fa) 0%,
    var(--u-fill-color-blank, #fafafa) 45%,
    var(--u-color-primary-light-9, #ecf5ff) 100%
  );
  border: 1px dashed var(--u-border-color-lighter, #ebeef5);
  box-sizing: border-box;
}

.demo-immersive__inner {
  max-width: 520px;
  padding: 24px 28px;
  text-align: center;
}

.demo-immersive__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--u-text-color-primary, #303133);
}

.demo-immersive__desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--u-text-color-regular, #606266);
  text-align: left;
}

.demo-immersive__desc code {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--u-bg-color, #fff);
  border: 1px solid var(--u-border-color-lighter, #ebeef5);
}
</style>

菜单项角标（`menuItemBadge` 插槽）

在 ProLayout 上使用具名插槽 #menuItemBadge，作用域参数为 { item }（当前 ProLayoutMenuItem）。插槽内容会渲染在菜单名右侧；侧栏为纵向且已折叠、且该项配置了 icon 时，同一插槽内容会出现在图标右上角（子菜单折叠标题行内仅保留角标区，避免与文案并排重复）。

一级「电子邮件」数字角标，二级菜单项红点（可分别开关），并折叠侧栏查看图标角标。

vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Document, Grid, List, Notify } from '@uniboot/icons-vue'
import { ProLayout, UButton, USpace } from 'uniboot-ui'

import type { ProLayoutMenuItem } from 'uniboot-ui'

const collapsed = ref(false)
const activePath = ref('/mail/options/2')

/** 一级菜单数字角标，为 0 时不展示 */
const mailBadgeCount = ref(5)
const dotOption1 = ref(false)
const dotOption2 = ref(true)
const dotOption3 = ref(true)

const menuData = computed<ProLayoutMenuItem[]>(() => [
  {
    path: '/mail',
    name: '电子邮件',
    icon: Notify,
    children: [
      { path: '/mail/options/1', name: 'option 1', icon: Document },
      { path: '/mail/options/2', name: 'option 2', icon: List },
      {
        path: '/mail/options/3',
        name: 'optionoption 3',
        icon: Grid,
        children: [{ path: '/mail/options/3/a', name: '三级子项' }],
      },
    ],
  },
])

function menuDepth(
  path: string,
  items: ProLayoutMenuItem[],
  depth = 1
): number | null {
  for (const it of items) {
    if (it.path === path) return depth
    if (it.children?.length) {
      const d = menuDepth(path, it.children, depth + 1)
      if (d !== null) return d
    }
  }
  return null
}

function showLevel2Dot(item: ProLayoutMenuItem) {
  if (menuDepth(item.path, menuData.value) !== 2) return false
  if (item.path === '/mail/options/1') return dotOption1.value
  if (item.path === '/mail/options/2') return dotOption2.value
  if (item.path === '/mail/options/3') return dotOption3.value
  return false
}
</script>

<template>
  <div class="menu-dot-demo">
    <div class="menu-dot-demo__controls">
      <USpace wrap>
        <UButton
          size="small"
          @click="mailBadgeCount = mailBadgeCount > 0 ? 0 : 5"
        >
          {{ mailBadgeCount > 0 ? '隐藏' : '显示' }}「电子邮件」数字角标
        </UButton>
        <UButton size="small" @click="dotOption1 = !dotOption1">
          {{ dotOption1 ? '取消' : '显示' }}「option 1」红点
        </UButton>
        <UButton size="small" @click="dotOption2 = !dotOption2">
          {{ dotOption2 ? '取消' : '显示' }}「option 2」红点
        </UButton>
        <UButton size="small" @click="dotOption3 = !dotOption3">
          {{ dotOption3 ? '取消' : '显示' }}「optionoption 3」红点
        </UButton>
        <UButton size="small" @click="collapsed = !collapsed">
          {{ collapsed ? '展开' : '折叠' }}侧栏
        </UButton>
      </USpace>
      <p class="menu-dot-demo__hint">
        使用 <code>#menuItemBadge</code> 作用域插槽（参数
        <code>item</code>）自定义角标；侧栏纵向折叠且该项带
        <code>icon</code> 时，布局会把同一插槽内容显示在图标右上角。
      </p>
    </div>
    <div class="menu-dot-demo__frame">
      <ProLayout
        v-model:collapsed="collapsed"
        v-model:active-path="activePath"
        layout="side"
        title="Demo"
        :menu-data="menuData"
        menu-active-color="#3992FF"
        menu-active-background="#F7F8FA"
      >
        <template #menuItemBadge="{ item }">
          <span
            v-if="menuDepth(item.path, menuData) === 1 && mailBadgeCount > 0"
            class="menu-dot-demo__num"
            >{{ mailBadgeCount }}</span
          >
          <span
            v-else-if="showLevel2Dot(item)"
            class="menu-dot-demo__dot"
            aria-hidden="true"
          />
        </template>
        <template #logo>
          <span class="menu-dot-demo__logo" aria-hidden="true">M</span>
        </template>
        <div class="menu-dot-demo__main">
          <p>
            当前激活路径：<code>{{ activePath }}</code>
          </p>
        </div>
      </ProLayout>
    </div>
  </div>
</template>

<style scoped>
.menu-dot-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-dot-demo__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-dot-demo__hint {
  margin: 0;
  font-size: 13px;
  color: var(--u-text-color-secondary, #909399);
  line-height: 1.5;
}

.menu-dot-demo__frame {
  height: 420px;
  border: 1px solid var(--u-border-color-lighter, #ebeef5);
  border-radius: 8px;
  overflow: hidden;
  background: var(--u-fill-color-light, #f5f7fa);
}

.menu-dot-demo__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #3992ff;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.menu-dot-demo__main {
  padding: 16px;
  font-size: 14px;
  color: var(--u-text-color-primary, #303133);
}

.menu-dot-demo__main code {
  font-size: 13px;
}

.menu-dot-demo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 14px;
  padding: 0 4px;
  border-radius: 14px;
  background: var(--u-color-danger, #f56c6c);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 1px
    var(--u-menu-bg-color, var(--u-fill-color-blank, #fafafa));
}

.menu-dot-demo__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--u-color-danger, #f56c6c);
  box-shadow: 0 0 0 1px
    var(--u-menu-bg-color, var(--u-fill-color-blank, #fafafa));
}
</style>

布局说明

取值	说明
`side`	顶栏（Logo、标题、`headerContent` 插槽位于 Logo/标题之后、`actions` 之前、右侧操作区）+ 左侧整树菜单（`UScrollbar` 包裹，菜单区可纵向滚动）+ 主内容；侧栏文案超出宽度单行省略（`…`），悬停时 `UTooltip` 展示完整名称；侧栏底部为折叠按钮
`top`	顶栏内横向整树菜单由 `UScrollbar` 包裹，项过多时横向滚动；文案溢出省略时悬停 `UTooltip` 展示全名 + 主内容，无侧栏
`mix`	顶栏一级横向菜单 `UScrollbar`（横向滚动 + 溢出 Tooltip）；侧栏二级菜单 `UScrollbar`（纵向滚动 + 省略与 Tooltip）；根据 `active-path` 解析当前一级节点；无子节点时不展示侧栏

菜单选中颜色

通过 menu-active-color（选中文字/图标色，对应 UMenu 的 active-text-color / --u-menu-active-color）与 menu-active-background（选中项与 hover/focus 下的背景色，如 #F7F8FA）统一三种布局下的侧栏与顶栏菜单高亮。未传时沿用主题默认。

菜单图标

菜单项 icon 为可选的 Vue 组件（推荐 @uniboot/icons-vue 图标），由布局在 UMenu / UMenuItem / USubMenu 中与文案一并渲染。不传 icon 时仅展示文字。

import { Folder, Setting } from '@uniboot/icons-vue'

import type { ProLayoutMenuItem } from 'uniboot-ui'

const menuData: ProLayoutMenuItem[] = [
  { path: '/a', name: '模块 A', icon: Folder },
  {
    path: '/b',
    name: '模块 B',
    icon: Setting,
    children: [{ path: '/b/1', name: '子页' }],
  },
]

面包屑与 `activePath`

ProLayout 不负责内置面包屑。常见做法是：在 headerContent 插槽中放置 UBreadcrumb，根据 menuData 与 v-model:active-path 解析从根到当前节点的路径（与路由 matched 思路类似）。基础示例中的 findMenuBreadcrumb 即在树中按 path 精确匹配并返回祖先链，供面包屑 v-for 使用。

layout: 'side'：headerContent 渲染在顶栏内、紧跟 Logo / title，与右侧 actions 同一行。品牌区占位宽度与侧栏一致（扣除 UPageHeader 默认左右 16px 内边距），headerContent 再增加与 UMain 相同的左内边距（默认 20px，与 --upro-main-padding-x 同步），使面包屑与主内容左缘 纵向对齐；长面包屑可在该行内收缩省略（min-width: 0）。
layout: 'top' / mix：headerContent 在 主内容区上方（顶栏与正文之间）；mix 下与顶栏横向一级菜单分离。

隐藏菜单（`hideMenu`）

菜单项可选 hideMenu: true。当 v-model:active-path 在菜单树中按 最长路径前缀 匹配到该项时，布局 不渲染任何 UMenu：

side：左侧整树菜单隐藏，顶栏 UPageHeader（Logo、title、actions）仍显示。
top：顶栏内横向菜单隐藏，UPageHeader 其余区域仍显示。
mix：顶栏一级横向菜单与侧栏二级菜单均隐藏，UPageHeader 仍显示。

适用于大屏、全屏编辑等场景；需在页面内或路由层提供返回入口（基础示例主内容区提供「返回节点管理」按钮）。

与兄弟页对比：同一父级下 统计报表 未设置 hideMenu，菜单照常显示。完整交互见基础示例 可视化 分组。

import { Document, Grid, Map } from '@uniboot/icons-vue'

import type { ProLayoutMenuItem } from 'uniboot-ui'

const vizGroup: ProLayoutMenuItem = {
  path: '/viz',
  name: '可视化',
  icon: Map,
  children: [
    { path: '/viz/dashboard', name: '数据大屏', icon: Grid, hideMenu: true },
    { path: '/viz/reports', name: '统计报表', icon: Document },
  ],
}

侧栏折叠按钮图标

侧栏底部折叠按钮支持两种状态各传入一个图标（均为 Vue 组件）：

Prop	含义	默认（内置）
`siderCollapseIcon`	侧栏已展开时显示（点击后收拢侧栏）	`Fold`
`siderExpandIcon`	侧栏已折叠时显示（点击后展开侧栏）	`Expand`

vue

<pro-layout
  :menu-data="menuData"
  :sider-collapse-icon="Fold"
  :sider-expand-icon="Expand"
/>

样式类 upro-layout__collapse-menu-icon 仍用于控制按钮内图标尺寸与颜色，无需业务侧覆盖即可与侧栏风格一致。

插槽

名称	说明
default	主内容区（`UMain` 内）
logo	自定义 Logo 区域；未使用插槽时可配合 `logo` 属性传入图片 URL
headerContent	`side`：顶栏内、Logo / 标题之后、`actions` 之前（同一行）。`top` / `mix`：主内容区上方工具条（顶栏菜单与正文之间）
actions	顶栏右侧操作区（用户信息、通知等）
footer	传入时渲染页面底部 `UFooter`
menuItemBadge	菜单项附加内容；作用域 `{ item: ProLayoutMenuItem }`。未传入时不渲染角标区域

ProLayout API

ProLayout 属性

名称	说明	类型	默认值
menuData	菜单树，必填	`array`	—
layout	布局形态	`enum`	`side`
title	站点标题	`string`	`''`
logo	Logo 图片 URL；也可用 `logo` 插槽完全自定义	`string`	`''`
siderWidth	侧栏展开宽度	`string`	`200px`
collapsedWidth	侧栏折叠宽度	`string`	`64px`
headerHeight	顶栏区域最小高度	`string`	`60px`
siderCollapseIcon	侧栏展开时，底部按钮图标（点击收拢）	`Component`	`Fold`
siderExpandIcon	侧栏折叠时，底部按钮图标（点击展开）	`Component`	`Expand`
menuActiveColor	菜单选中项文字/图标颜色（如 `#3992FF`）	`string`	`''`
menuActiveBackground	菜单选中项与 hover 背景色（如 `#F7F8FA`）	`string`	`''`

ProLayout 双向绑定

名称	说明	类型	默认值
collapsed	侧栏是否折叠（`v-model:collapsed`）	`boolean`	false
activePath	当前激活路径，与菜单高亮一致（`v-model:active-path`）	`string`	`''`

ProLayout 事件

名称	说明	类型
menuSelect	菜单选中	`Function`

ProLayout 暴露

名称	说明	类型
toggleCollapsed	切换折叠	`Function`

菜单项 ProLayoutMenuItem

名称	说明	类型	默认值
path	唯一路径，作为菜单 `index`	`string`	—
name	展示文案	`string`	—
icon	菜单图标（Vue 组件，可选）	`Component`	—
children	子菜单	`array`	—
hideMenu	为 `true` 且当前路径匹配该项时隐藏全部 `UMenu`（侧栏与顶栏横向菜单），保留 `UPageHeader`	`boolean`	—

开发与联调

源码位于 packages/components 仓库的 pro-layout；安装依赖需能解析 uniboot-ui、@uniboot/icons-vue 与 registry 配置（见开发指南）。

Tooltip 文字提示

PageContainer 页容器

ProLayout 高级布局 ​

基础用法 ​

菜单项角标（menuItemBadge 插槽） ​

布局说明 ​

菜单选中颜色 ​

菜单图标 ​

面包屑与 activePath ​

隐藏菜单（hideMenu） ​

侧栏折叠按钮图标 ​

插槽 ​

ProLayout API ​

ProLayout 属性 ​

ProLayout 双向绑定 ​

ProLayout 事件 ​

ProLayout 暴露 ​

菜单项 ProLayoutMenuItem ​

开发与联调 ​