witNav 导航组件

witNav是一个应用导航组件，提供了顶部导航栏功能，支持不同布局模式，包含左侧面板（Logo和标签页）和右侧工具栏，实现了路由标签页切换和导航功能。

用法实例

<template>
  <div>
    <!-- 基本用法 -->
    <witNav layout="comprehensive" />
    
    <!-- 自定义布局 -->
    <witNav layout="other-layout" />
  </div>
</template>

<script lang="ts" setup>
// 组件会自动从路由配置和store中获取导航数据
</script>

API

属性名	类型	默认值	描述
layout	[String]	''	布局类型，影响导航栏显示样式，如'comprehensive'

插槽

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

事件

事件名	描述	参数
无	组件不直接触发事件	-

TIP

组件支持不同布局模式：

• 综合布局（comprehensive）：显示标签页导航
• 其他布局：显示简化的导航栏

标签页点击时会处理路由跳转，支持外部链接和内部路由：

• 外部链接：在新窗口打开
• 内部路由：根据配置跳转到指定页面或重定向到第一个子菜单

组件依赖路由配置和routesStore来获取导航数据，确保这些数据正确加载。

功能说明

1. 多布局支持：根据传入的layout属性显示不同的导航样式
2. 标签页导航：在综合布局下显示路由标签页，支持点击切换
3. 路由处理：处理内部路由跳转和外部链接打开
4. 响应式设计：在小屏幕设备上自动隐藏部分工具栏
5. 国际化支持：使用translate函数支持导航项的多语言显示

核心代码解析

// 标签页点击处理
const handleTabClick = () => {
  nextTick(() => {
    if (isExternal(tabMenu.value.path)) {
      // 外部链接在新窗口打开
      window.open(tabMenu.value.path)
      router.push('/redirect')
    } else if (openFirstMenu) {
      // 内部路由跳转，支持重定向到第一个子菜单
      router.push(tabMenu.value.redirect || tabMenu.value)
    }
  })
}

依赖说明

依赖项	用途
wit-logo	提供应用Logo显示
wit-right-tools	提供右侧工具栏功能
useRoutesStore	获取路由和标签页数据
useRouter	Vue Router实例，处理路由跳转
storeToRefs	从Pinia store中解构响应式数据
isExternal	验证链接是否为外部链接
translate	国际化翻译函数
openFirstMenu	配置项，控制是否默认打开第一个子菜单