简介

这是一个 Vue Composition API 工具函数，用于管理应用程序导航栏的按钮状态，提供全局的导航栏按钮管理功能。

---

接口定义

从 @/types/navbar 导入的类型（仅列出关键项，具体以代码为准）：

• NavButton：导航栏按钮模型
• ButtonVariant：按钮样式变体枚举（'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger'）

---

返回对象结构

调用 useNavbar() 返回以下属性与方法：

• 状态：

  • navbarButtons: Readonly<Ref<NavButton[]>> - 只读的导航栏按钮数组

• 操作方法：

  • setNavbarButtons(buttons: NavButton[]): void - 设置按钮数组
  • addNavbarButton(button: NavButton): void - 添加/更新按钮
  • removeNavbarButton(key: string): void - 移除按钮
  • clearNavbarButtons(): void - 清空所有按钮

---

方法详解

setNavbarButtons(buttons)

• 功能：完全替换当前的导航栏按钮数组
• 参数：buttons - 新的 NavButton 数组
• 作用：用于批量设置或重置整个导航栏
• 使用场景：初始化导航栏、权限变更后重新配置

---

addNavbarButton(button)

• 功能：智能添加或更新单个导航栏按钮
• 算法逻辑：
  • 查找是否已存在相同 key 的按钮
  • 如果存在：用新配置替换现有按钮（更新操作）
  • 如果不存在：将新按钮添加到数组末尾（添加操作）
• 参数：button - 要添加或更新的按钮配置

---

removeNavbarButton(key)

• 功能：移除指定key的导航栏按钮
• 逻辑：
  • 查找匹配 key 的按钮索引
  • 如果找到：使用 splice() 从数组中移除
  • 如果未找到：静默失败（不抛出错误）
• 参数：key - 要移除的按钮的唯一标识符

---

clearNavbarButtons()

• 功能：清空导航栏中的所有按钮
• 作用：将按钮数组重置为空数组
• 使用场景：用户退出登录、应用重置时

---

技术特点

1. 全局状态管理：使用 Vue 的 ref() 创建响应式数据，全局共享状态
2. 类型安全：完整的 TypeScript 类型定义，确保代码可靠性
3. 只读暴露：使用 readonly() 来包装返回的 navbarButtons，防止外部组件直接修改
4. 智能更新：addNavbarButton 方法支持智能添加和更新操作
5. 错误处理：removeNavbarButton 方法具有静默失败特性，避免不必要的错误抛出

---

使用示例（片段）

const { navbarButtons, addNavbarButton, removeNavbarButton, clearNavbarButtons } = useNavbar()

// 添加新按钮
addNavbarButton({
  key: 'home',
  label: '首页',
  to: '/home',
  variant: 'primary',
  onClick: () => console.log('首页被点击')
})

// 更新现有按钮
addNavbarButton({
  key: 'home',
  label: '主页',
  to: '/main',
  variant: 'secondary'
})

// 移除按钮
removeNavbarButton('home')

// 清空所有按钮
clearNavbarButtons()

// 批量设置按钮
setNavbarButtons([
  { key: 'home', label: '首页', to: '/home' },
  { key: 'about', label: '关于', to: '/about' },
  { key: 'contact', label: '联系', to: '/contact' }
])

版权所有

版权归属：Evoliant

许可证：MIT