用途:为 ibl.ai 应用添加响应式顶部导航栏,匹配 ibl.ai skillsai 参考应用。左侧为 logo 加页面链接,右侧为通知铃铛与用户资料下拉菜单;桌面端显示内联链接,平板与移动端折叠为汉堡抽屉。
主要能力:导航栏包含左侧 ibl.ai logo 与三个纯文本链接(Home /、Profile /profile、Account /account),右侧依次为积分余额组件、通知铃铛(跳转 /notifications)和资料下拉菜单。同时创建 profile、account、notifications 页面,使链接指向真实页面。移动端抽屉使用 shadcn Sheet(side="left")。
使用方式:前置条件为已配置认证(/iblai-auth)、安装 @iblai/iblai-js SDK、初始化 shadcn/ui(npx shadcn@latest init)、安装 lucide-react(pnpm add lucide-react)。新项目可先询问是否使用 vibe-starter,若是则执行 git clone -b spa https://github.com/iblai/vibe-starter.git vibe-starter-init,再 cp -a vibe-starter-init/. . && rm -rf vibe-starter-init,然后 pnpm install。否则按步骤创建 logo、积分余额组件、用户资料按钮、移动抽屉、主导航栏与相关页面。
限制:不要为 ibl.ai SDK 组件添加自定义样式、颜色或 CSS 覆盖;不要实现暗色模式,除非用户明确要求;导航链接标签旁不要添加 Lucide 图标,链接为纯文本;优先使用 ibl.ai SDK 组件与 shadcn/ui,不要编写已有等价物的自定义组件;logo 必须使用 ibl.ai logo 并从 public/images/ 本地提供,不要使用租户或平台 logo,也不要使用外部 URL。积分余额组件受租户 show_paywall 标志控制,为假时不渲染。其他细节暂未提供。