witHeader 顶部导航栏

witHeader是一个顶部导航栏组件，包含系统Logo、水平菜单和右侧工具区域，支持动态路由菜单生成和主题样式定制。

用法实例

<template>
  <div class="app-container">
    <witHeader />
    <main class="app-main">
      <!-- 主要内容区域 -->
    </main>
  </div>
</template>

<script lang="ts" setup>
// 组件会自动从 routesStore 获取路由数据并渲染菜单
</script>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>

API

属性名	类型	默认值	描述
layout	[String]	'horizontal'	菜单布局方式，当前仅支持 'horizontal'

插槽

插槽名	描述
无	组件不提供插槽

事件

事件名	描述	参数
无	组件不触发外部事件	-

功能说明

1. 系统Logo：集成 wit-logo 组件，显示系统标志
2. 水平菜单：基于 Element Plus Menu 组件实现，仅支持水平布局
3. 动态路由：从 routesStore 获取路由数据，自动生成菜单项
4. 菜单高亮：根据当前激活菜单自动高亮显示
5. 右侧工具：集成 wit-right-tools 组件，提供系统工具按钮
6. 主题适配：使用 Element Plus CSS 变量，支持主题切换

路由配置说明

菜单数据来源于路由配置，路由对象需包含以下元信息：

属性名	类型	描述
meta.title	[String]	菜单项显示文本
meta.icon	[String]	菜单项图标名称
meta.levelHidden	[Boolean]	是否隐藏当前级别，直接显示子级菜单

使用提示

TIP

1. 组件依赖 routesStore 获取路由数据，需确保路由配置正确
2. 当前仅支持水平布局 (layout="horizontal")
3. 菜单项激活状态由 routesStore 中的 activeMenu 控制
4. 支持多级菜单，子菜单会以弹出层形式显示
5. 组件样式使用了 CSS 变量，可通过主题配置进行自定义
6. 右侧工具区域集成了 wit-right-tools 组件，需确保该组件已正确安装
7. 菜单项点击事件由 wit-menu 组件内部处理，实现路由跳转