SuperAPI AI 工具集

epicenter-ui

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:在 Svelte 应用中优先使用本地 @epicenter/ui 组件,避免重复编写一次性 UI;多数状态界面已有处理间距、颜色、无障碍与组合的组件。

主要能力与选择约定:加载状态按等待内容选择组件——仅需 spinner 与可选说明用 Loading;需标题、描述、自定义媒体或与空/错状态结构对齐时用 Empty.Root 加 Spinner;已知进度用 Progress;已知内容形状用 Skeleton;按钮内待处理则禁用按钮并放入小 Spinner;聊天输入待处理用 Chat.BubbleMessage typing,LoadingDots 仅用于聊天气泡;命令无匹配用 Command.Empty;无行、无文件、无结果或失败面板用 Empty.*。不要单独显示 Loading... 纯文本,状态文字要说明正在发生什么,如 Checking session、Loading tabs。

使用方式:应用代码通过公共包 API 导入,如 import { Button } from '@epicenter/ui/button'、import { Loading } from '@epicenter/ui/loading'、import '@epicenter/ui/app.css';包内 src 文件用相对路径导入。应用根元素需带 class="style-vega" 激活预设,否则 cn-* 作用域规则不生效。复合组件按命名空间导入,单组件按名导入。Dialog、Modal、Sheet、Drawer 需无障碍标题,可用 sr-only 标题。Button 与 Link 有内置 tooltip 属性,优先于手写 Tooltip 组合,但需要上层 Tooltip.Provider。

适用场景:选择与审查本地 UI 组件、加载与待处理界面、空状态、命令菜单、表格与列表空状态、聊天组件、工具提示及组件组合边界判断。

限制:改动 packages/ui 内部、公共导出、样式钩子、覆盖层 CSS 或 shadcn-svelte 供应商代码前,需阅读 packages/ui/README.md 作为来源依据;涉及上游行为时应先查证再依赖记忆;拉取上游更新前先提交本地包装状态再协调差异。资料未提供收费、价格、平台或效果信息。