用途
该技能适用于在 Backstage 前端插件中编写或编辑任何前端组件时使用，帮助开发者从 @backstage/ui（BUI）组件库中挑选合适的组件，并遵循 BUI 的样式与数据获取约定。
主要能力
技能提供按需求选择组件的对照参考，覆盖以下类别：
- 页面布局与包裹：Box、Container、Flex、FullPage、Grid
- 排版：Text
- 按钮与操作：Button、ButtonIcon、ButtonLink
- 表单：TextField、PasswordField、SearchField、Select、Combobox、Checkbox、RadioGroup、Switch、DatePicker、DateRangePicker
- 反馈：Alert、Skeleton、Tooltip、Tag、TagGroup
- 浮层：Dialog、Menu、Popover
- 导航：Tabs、Header、PluginHeader、Link
- 数据：Table（含 useTable hook）、List（含 ListRow）、Avatar、Card
- 图标：@remixicon/react（如 RiSearchLine、RiAddLine）
- 样式：CSS modules 配合 BUI 令牌（--bui-space-、--bui-fg-、--bui-bg-*）
使用方式
安装：使用 yarn new 脚手架创建的新插件会自动包含 @backstage/ui。如需手动安装：
yarn add @backstage/ui @remixicon/react
然后在应用入口（如 packages/app/src/index.tsx）添加样式表：
import '@backstage/ui/css/styles.css';
该技能有两种调用模式：
- 独立模式（开发中途）：用户正在编辑已有插件组件，选择相关参考并应用。
- 脚手架后模式（由 creating-backstage-plugin 对任意前端模板调用）：将 BUI 默认设置应用到新脚手架插件的示例组件，确保导入来自 @backstage/ui，样式使用带 BUI 令牌的 CSS modules。
数据获取约定：不要手动用 useState 管理 loading/error/data，应使用 react-use 的 hooks。useAsync(fn, deps) 在挂载时及 deps 变化时运行异步函数，用于“组件渲染或 props 变化时加载数据”；useAsyncFn(fn) 返回 [state, callback]，用于“用户执行某操作时加载数据”（如按钮点击、表单提交）。手动用 useState 管理 { loading, error, value } 在此代码库中属于反模式，会重复 hook 已正确处理（竞态条件、请求期间卸载等）的逻辑。
示例代码：
import useAsyncFn from 'react-use/lib/useAsyncFn'; import { Button, Skeleton, Alert, Text } from '@backstage/ui';
export const FetchOnDemand = () => { const [{ loading, error, value }, fetch] = useAsyncFn(async (id: string) => { return await someApi.get(id); }, []);
return ( <> <Button onClick={() => fetch('foo')}>Fetch</Button> {loading && <Skeleton width={200} height={20} />} {error && <Alert status="danger" title={error.message} />} {value && <Text>{value.name}</Text>} </> ); };
适用场景
- 在 Backstage 插件中编写或编辑前端组件。
- 为布局、排版、表单输入、对话框、菜单、标签页、表格等选择合适组件。
- 为组件设置样式（BUI 使用 CSS modules + 设计令牌，而非 makeStyles）。
- 添加图标（使用 @remixicon/react）。
限制与注意事项
- BUI 不等于 Material UI，不要混用 prop 名称：disabled → isDisabled；variant="contained" → variant="primary"。
- Flex 使用 justify="between"（不是 space-between）；gap 通过内联样式或 BUI 令牌设置。
- Tooltip 需要 TooltipTrigger 作为父级。
- TextField 的 onChange 直接接收字符串，而非事件对象。
- 已知一处 BUI 没有对应替代的情况：@material-ui/lab Timeline 没有 BUI 替代品，该特定场景可使用 MUI。
关于收费、价格、平台支持范围等信息，资料暂未提供。