mobile-bottom-navbar - 实现移动端底部导航系统
为 Next.js 提供移动端底部导航系统，支持基于角色过滤、子菜单、手风琴式更多菜单、状态持久化和动画。
标签
更新于: 2026-10-04能力
典型输入
典型输出
该技能可以做什么
- 渲染移动端底部导航
- 按角色过滤导航
- 检测当前导航项
- 展开图标网格子菜单
- 打开手风琴更多菜单
- 持久化导航状态
- 执行导航过渡动画
- 支持 iOS 安全区域
输入
- Next.js 应用
- 导航分组定义
- 用户角色或权限
- 当前路由路径
- 导航图标
- 项目资源文件
输出
- 移动端底部导航界面
- 图标网格子菜单界面
- 手风琴式更多菜单
- 当前导航指示器
- 持久化导航状态
- 导航布局集成
要求
- Next.js 14 或更高版本
- App Router
- TypeScript
- Zustand
- Framer Motion
- lucide-react
- Tailwind CSS
- shadcn/ui Sheet 组件
- shadcn/ui Accordion 组件
- shadcn/ui Scroll Area 组件