SuperAPI AI 工具集

iblai-notifications

前端与建站

查看项目

更新于 10-16 05:56

技能介绍

用途:为 Next.js 应用添加通知功能,包括导航栏中的紧凑铃铛图标(带未读角标)和完整的通知中心页面(含 Inbox 与 Alerts 标签页)。

主要能力:NotificationDisplay 提供整页通知中心,支持 org、userId、isAdmin、selectedNotificationId、enableRbac 等属性;NotificationDropdown 提供铃铛图标,支持 org、userId、onViewNotifications 回调。普通用户可查看 Inbox、标记已读;管理员额外可见 Alerts 标签页和发送通知按钮。支持通过 selectedNotificationId 深链到指定通知。

使用方式:前置条件为已通过 /iblai-auth 完成认证,相关包 @iblai/iblai-js、@reduxjs/toolkit、react-redux 已安装。先调用 MCP 工具 get_component_info("NotificationDisplay") 与 get_component_info("NotificationDropdown") 获取组件信息。创建 app/notifications/page.tsx,从 @iblai/iblai-js/web-containers 导入 NotificationDisplay,从 localStorage 读取 userData、current_tenant/tenant、tenants 以解析用户名、租户键和管理员状态,再渲染组件。铃铛组件创建于 components/iblai/notification-bell.tsx,放入导航栏并传入 onViewAll 跳转回调。完成后必须运行 /iblai-test 验证,npm run build 需零错误通过。

限制与注意:不要为 ibl.ai SDK 组件添加自定义样式、颜色或 CSS 覆盖,组件自带样式。自定义 UI 应使用 shadcn 组件并遵循 ibl.ai 品牌色。Redux store 必须包含 mentorReducer 和 mentorMiddleware;initializeDataLayer() 在 v1.2+ 需 5 个参数;@reduxjs/toolkit 通过 next.config.ts 中的 webpack 别名去重;配置从 @/lib/iblai/config 导入。资料未提供收费、价格或平台支持范围等信息。