用途:该技能帮助在 Nuxt、Vue(Vite)、Laravel(Vite + Inertia)、AdonisJS(Vite + Inertia)中使用 Bitrix24 UI 组件库构建界面,组件数量 130+,强调可访问性,主题基于 Tailwind CSS,构建于 Reka UI、Tailwind CSS 与 Tailwind Variants 之上。
主要能力与规则:应用需用 B24App 包裹,以支持 toast、tooltip 与程序化浮层,并可通过 locale 属性做国际化。始终使用语义颜色(如 text-description、bg-elevated、border-muted),不要用原始 Tailwind 调色板颜色。可读取生成的主题文件查看插槽名:Nuxt 下为 .nuxt/b24ui/<component>.ts,Vue 下为 node_modules/.b24ui-nuxt/b24ui/<component>.ts。覆盖优先级为 b24ui prop/class prop → 全局配置 → 主题默认。图标通过 icons 指南查找。
使用方式:按任务先加载相关参考文件再写代码,避免全部加载。参考文件涵盖 Guidelines(设计系统、组件选择、约定、表单、图标)、Layouts(落地页、仪表盘)、Recipes(数据表格、浮层、导航、卡片选择器、设置、详情面板、任务表单)与 Quick reference(组件索引)。技能给出路由表,按任务组合加载。
安装与接入:Nuxt 使用 pnpm add @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss,在 nuxt.config.ts 的 modules 中加入 '@bitrix24/b24ui-nuxt',引入 CSS 并在 app.vue 中使用 <B24App>。Vue(Vite)同样安装依赖,在 vite.config.ts 使用 @bitrix24/b24ui-nuxt/vite 插件,在 main.ts 使用 vue-plugin,且需在 index.html 根 div 上加 class="isolate"。Inertia 场景在 vite.config.ts 中使用 b24ui({ router: 'inertia' })。
适用场景:构建 Bitrix24 应用、仪表盘、管理界面、落地页、设置页、登录注册表单、数据表格、聊天界面、模态/抽屉、站点导航、Markdown 渲染、富文本编辑器、任务表单和实体信息侧栏。
限制:资料未提供具体价格、性能数据或组件 API 细节;组件属性的完整信息需查阅 Bitrix24 UI 文档(LLMs.txt 说明若未配置需先添加)。部分平台支持与用法仅限资料中列出的框架。