概述
OneMenu 是 One Platform 前台的导航菜单组件，基于 Salesforce Lightning Design System 的 GlobalNavigationBar 构建。它集成了应用启动器（App Launcher）和导航标签栏（Navigation Bar），是用户在前台切换应用和浏览数据的主要导航入口。
🖼️
OneMenu 导航栏截图 — 待插入
../../images/product/one_platform/one-menu-overview.png
页面结构
GlobalNavigationBar 结构
▼ 点击展开 App Launcher Modal
App Launcher Modal
[搜索应用...]
Applications
App1
App2
App3
All Items
Tab1 · Tab2 · Tab3
核心功能
1. 应用启动器（App Launcher）
- 搜索栏：实时过滤应用和 Tab 列表
- Applications 区域：以卡片（Tile）形式展示所有应用
- All Items 区域：展示所有 Tab，点击跳转到对应对象列表视图
- 触发按钮：显示当前选中应用的名称
2. 导航标签栏（Navigation Bar）
- 高亮当前激活的 Tab
- 点击 Tab 触发 SPA 导航或路由导航
3. 导航模式
支持两种导航模式，优先级从高到低：
- SPA 模式（优先）：当父组件传入
onNavigate 回调时使用，不改变 URL - 路由模式（后备）：当没有
onNavigate 回调时使用 Next.js Router
4. 数据来源优先级
- Redux 当前应用：
reduxState.currentApplication - 本地缓存：
reduxState.cache 中的第一个缓存应用 - 默认应用：
{ name: "Loading", tabs: [] }
数据流
OneMenu 组件挂载
getAllApplications() → dispatch(setApplications) → Redux
getAllTabs() → dispatch(setTabs) → Redux
useSelector → 获取 applications, tabs, activeMenu
路由检测: usePathname() → dispatch(setActiveMenu)
渲染: AppLauncher + NavigationBar
技术要点
- 状态管理：Redux (
applicationSlice) - 路由检测：Next.js
usePathname() + useRouter() - Tab 数据兼容：同时支持 Tab 对象数组和 Tab ID 字符串数组
- 图标生成：取应用名前两个字符作为 Tile 图标文本
- 组件库：
@salesforce/design-system-react 的 GlobalNavigationBar, AppLauncher, AppLauncherTile - 搜索过滤：
AppLauncher 内置的搜索过滤功能
截图
🖼️
OneMenu 导航栏完整视图 — 待插入
../../images/product/one_platform/one-menu-navbar.png
🖼️
App Launcher 模态窗展开状态 — 待插入
../../images/product/one_platform/one-menu-launcher.png
🖼️
搜索过滤效果 — 待插入
../../images/product/one_platform/one-menu-search.png
🖼️
Tab 高亮状态 — 待插入
../../images/product/one_platform/one-menu-tab-active.png