SuperAPI AI 工具集

iblai-vibe-navbar

前端与建站

查看项目

更新于 10-15 22:16

技能介绍

用途:为 ibl.ai 应用添加响应式顶部导航栏,左侧为 Logo 与页面链接,右侧为通知铃铛与用户资料下拉菜单,桌面端显示内联链接,平板/移动端折叠为汉堡抽屉。

主要能力:导航栏包含左侧 ibl.ai Logo 与三个纯文本链接(Home /、Profile /profile、Account /account),右侧依次为积分余额组件、通知铃铛(跳转 /notifications)和资料下拉菜单;同时创建 profile、account、notifications 页面,使链接指向真实页面。移动端抽屉使用 shadcn Sheet(side="left"),其 SheetTrigger 不支持 asChild。

使用方式:首次使用若 iblai.env 无 ARCHITECTURE=,需先运行 /iblai-vibe-start。前置条件为已完成 /iblai-vibe-auth、安装 @iblai/iblai-js、初始化 shadcn/ui(npx shadcn@latest init)并安装 lucide-react(pnpm add lucide-react)。新项目可复制 vibe-starter 模板:cp -a <skills-dir>/iblai-vibe-ops-init/assets/vibe-starter/. . 或 git clone --depth 1 https://github.com/iblai/vibe.git vibe-tmp && cp -a vibe-tmp/skills/start/iblai-vibe-ops-init/assets/vibe-starter/. . && rm -rf vibe-tmp,然后 pnpm install --ignore-scripts。Logo 需下载到本地:mkdir -p public/images 与 curl -o public/images/iblai-logo.png https://ibl.ai/images/iblai-logo.png。

限制:不要为 ibl.ai SDK 组件添加自定义样式、颜色或 CSS 覆盖;不要实现暗色模式(除非用户明确要求);导航链接标签旁不要加 Lucide 图标,链接为纯文本;优先使用 ibl.ai SDK 组件,其次 shadcn/ui,不要重复造轮子;导航栏须遵循 BRAND.md 的颜色与样式规范。