mobile-bottom-navbar - 实现响应式移动端底部导航栏
为 Next.js 提供支持角色过滤、动画子菜单、状态持久化和手风琴式“更多”菜单的移动端底部导航系统。
标签
更新于: 2026-10-04能力
典型输入
典型输出
该技能可以做什么
- 渲染移动端底部导航
- 按角色过滤导航
- 展开网格子菜单
- 显示手风琴更多菜单
- 持久化导航状态
- 为交互添加动画
- 高亮当前路由
- 支持 iOS 安全区域
输入
- Next.js 应用
- 导航分组配置
- 当前路径
- 用户角色或权限
- 组件资源文件
输出
- 移动端底部导航栏
- 展开的网格子菜单
- 手风琴式更多菜单
- 活动导航指示器
- 持久化的导航状态
要求
- Next.js 14 或更高版本
- App Router
- TypeScript
- Zustand
- Framer Motion
- lucide-react
- shadcn/ui Sheet 和 Accordion 组件
- 移动端视口支持