# @fleetbase/ember-ui 中文文档

规范地址：https://npmcn.com/package/%40fleetbase/ember-ui/

版本：0\.4\.6
npm 元数据更新时间：2026-10-14T05:02:27.835Z
中文译文更新时间：2026-11-14T22:15:15.922Z
软件包许可：AGPL-3\.0-or-later

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fleetbase/ember-ui
原文对照：https://npmcn.com/package/%40fleetbase/ember-ui/?lang=original
项目主页：https://github.com/fleetbase/ember-ui#readme
源码仓库：https://github.com/fleetbase/ember-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.7 MB，1257 个文件
- TypeScript 类型：未声明
- Node.js 要求：\>= 18
- 运行依赖：86 个
- 首次发布：2023-05-17T09:17:46.022Z
- 最新版本发布：2026-10-14T05:02:27.662Z
- 近 30 天下载量：5011（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：107（近 12 个月 38 个）

## 中文简介

Fleetbase UI提供所有接口组件,帮助器,服务和公用设备,用于将Fleetbase扩展至Console.

## 安装

```sh
npm install @fleetbase/ember-ui
```

也可以使用：`pnpm add @fleetbase/ember-ui`、`yarn add @fleetbase/ember-ui`、`bun add @fleetbase/ember-ui`

## README

![Fleetbase](https://npmcn.com/package/%40fleetbase/ember-ui/docs/brand/fleetbase-icon.png)

# 舰队基地Ember UI

舰队基地控制台后面的组件库——布局、数据、表格、日历和模式 用于Ember应用程序和Fleetbase扩展.

[![npm](https://img.shields.io/npm/v/@fleetbase/ember-ui.svg?color=1c6cc7)](https://www.npmjs.com/package/@fleetbase/ember-ui) [![CI](https://github.com/fleetbase/ember-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/fleetbase/ember-ui/actions/workflows/ci.yml) [![Coverage](https://codecov.io/gh/fleetbase/ember-ui/graph/badge.svg?flag=ember-ui)](https://codecov.io/gh/fleetbase/ember-ui) [![Downloads](https://img.shields.io/npm/dm/@fleetbase/ember-ui.svg?color=1c6cc7)](https://www.npmjs.com/package/@fleetbase/ember-ui) [![License](https://img.shields.io/badge/license-AGPL--3.0--or--later-blue.svg)](https://npmcn.com/package/%40fleetbase/ember-ui/LICENSE.md)

[**文档**](https://fleetbase.io/docs/ui) • 妇女 [游戏场](https://fleetbase.github.io/ember-ui/) • 妇女 [游戏场指南](https://npmcn.com/package/%40fleetbase/ember-ui/PLAYGROUND.md) • 妇女 [捐款](https://npmcn.com/package/%40fleetbase/ember-ui/CONTRIBUTING.md)

* * *

## 文档

参考文献 **[页:1](https://fleetbase.io/docs/ui)** ——每个 和关于何时到达哪个部分的指导意见.

这个 **[游乐场](https://fleetbase.github.io/ember-ui/)** 它的交互伴奏: 文档组件有一个页面,用于修改参数并监视真实组件的反应.

## 安装

```bash
pnpm add @fleetbase/ember-ui
```

需要节点 18 或更新。 附加符会带出自己的样式;不需要额外的CSS导入.

## 使用量

安装后组件会像其他 Ember 组件一样解决:

```hbs
<Layout::Container>
    <Layout::Header />
    <Layout::Sidebar />
    <Layout::Main>
        <ContentPanel @title="Orders" @open={{true}}>
            <Table @columns={{this.columns}} @rows={{this.orders}} @selectable={{true}} />
        </ContentPanel>

        <Button @type="primary" @text="New order" @icon="plus" @onClick={{this.createOrder}} />
    </Layout::Main>
</Layout::Container>
```

服务以通常的方式注入:

```js
import { inject as service } from '@ember/service';

export default class OrdersController extends Controller {
    @service modalsManager;

    @action confirmDelete(order) {
        return this.modalsManager.confirm({
            title: 'Delete this order?',
            body: `${order.reference} will be removed permanently.`,
            confirm: () => order.destroyRecord(),
        });
    }
}
```

## 构成部分

记录的表面是 **63个构成部分**. 每一个链接到其参考页面和一个活的, 可编辑示例.

**布局结构( S)** - 17个组成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<Layout::Container />` | [文档](https://fleetbase.io/docs/ui/layout/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-container) |
| `<Layout::Header />` | [文档](https://fleetbase.io/docs/ui/layout/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-header) |
| `<Layout::Sidebar />` | [文档](https://fleetbase.io/docs/ui/layout/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-sidebar) |
| `<Layout::Main />` | [文档](https://fleetbase.io/docs/ui/layout/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-main) |
| `<Layout::Section />` | [文档](https://fleetbase.io/docs/ui/layout/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-section) |
| `<Layout::MobileNavbar />` | [文档](https://fleetbase.io/docs/ui/layout/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-mobile-navbar) |
| `<ContentPanel />` | [文档](https://fleetbase.io/docs/ui/layout/content-panel) | [试试看](https://fleetbase.github.io/ember-ui/#/components/content-panel) |
| `<Overlay />` | [文档](https://fleetbase.io/docs/ui/layout/overlay) | [试试看](https://fleetbase.github.io/ember-ui/#/components/overlay) |
| `<Drawer />` | [文档](https://fleetbase.io/docs/ui/layout/drawer) | [试试看](https://fleetbase.github.io/ember-ui/#/components/drawer) |
| `<Layout::Resource::Tabular />` | [文档](https://fleetbase.io/docs/ui/layout/resource-tabular) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-resource-tabular) |
| `<Layout::Resource::Card />` | [文档](https://fleetbase.io/docs/ui/layout/resource-tabular) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-resource-card) |
| `<Layout::Resource::CardsGrid />` | [文档](https://fleetbase.io/docs/ui/layout/resource-tabular) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-resource-cards-grid) |
| `<Layout::Resource::Panel />` | [文档](https://fleetbase.io/docs/ui/layout/resource-tabular) | [试试看](https://fleetbase.github.io/ember-ui/#/components/layout-resource-panel) |
| `<Floating />` | [文档](https://fleetbase.io/docs/ui/layout/floating) | [试试看](https://fleetbase.github.io/ember-ui/#/components/floating) |
| `<Attach::Tooltip />` | [文档](https://fleetbase.io/docs/ui/layout/attach-tooltip) | [试试看](https://fleetbase.github.io/ember-ui/#/components/attach-tooltip) |
| `<Attach::Popover />` | [文档](https://fleetbase.io/docs/ui/layout/attach-popover) | [试试看](https://fleetbase.github.io/ember-ui/#/components/attach-popover) |
| `<Spacer />` | [文档](https://fleetbase.io/docs/ui/layout/spacer) | [试试看](https://fleetbase.github.io/ember-ui/#/components/spacer) |

**导航** - 3个组成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<TabNavigation />` | [文档](https://fleetbase.io/docs/ui/navigation/tab-navigation) | [试试看](https://fleetbase.github.io/ember-ui/#/components/tab-navigation) |
| `<Tabs />` | [文档](https://fleetbase.io/docs/ui/navigation/tabs) | [试试看](https://fleetbase.github.io/ember-ui/#/components/tabs) |
| `<DropdownButton />` | [文档](https://fleetbase.io/docs/ui/navigation/dropdown-button) | [试试看](https://fleetbase.github.io/ember-ui/#/components/dropdown-button) |

**按钮动作( A)** - 3个组成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<Button />` | [文档](https://fleetbase.io/docs/ui/actions/button) | [试试看](https://fleetbase.github.io/ember-ui/#/components/button) |
| `<ClickToCopy />` | [文档](https://fleetbase.io/docs/ui/actions/click-to-copy) | [试试看](https://fleetbase.github.io/ember-ui/#/components/click-to-copy) |
| `<ClickToReveal />` | [文档](https://fleetbase.io/docs/ui/actions/click-to-reveal) | [试试看](https://fleetbase.github.io/ember-ui/#/components/click-to-reveal) |

**窗体输入( I)** - 15个构成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<InputGroup />` | [文档](https://fleetbase.io/docs/ui/inputs/input-group) | [试试看](https://fleetbase.github.io/ember-ui/#/components/input-group) |
| `<Checkbox />` | [文档](https://fleetbase.io/docs/ui/inputs/checkbox) | [试试看](https://fleetbase.github.io/ember-ui/#/components/checkbox) |
| `<Toggle />` | [文档](https://fleetbase.io/docs/ui/inputs/toggle) | [试试看](https://fleetbase.github.io/ember-ui/#/components/toggle) |
| `<Select />` | [文档](https://fleetbase.io/docs/ui/inputs/select) | [试试看](https://fleetbase.github.io/ember-ui/#/components/select) |
| `<MultiSelect />` | [文档](https://fleetbase.io/docs/ui/inputs/multi-select) | [试试看](https://fleetbase.github.io/ember-ui/#/components/multi-select) |
| `<ComboBox />` | [文档](https://fleetbase.io/docs/ui/inputs/combo-box) | [试试看](https://fleetbase.github.io/ember-ui/#/components/combo-box) |
| `<ModelSelect />` | [文档](https://fleetbase.io/docs/ui/inputs/model-select) | [试试看](https://fleetbase.github.io/ember-ui/#/components/model-select) |
| `<DatePicker />` | [文档](https://fleetbase.io/docs/ui/inputs/date-picker) | [试试看](https://fleetbase.github.io/ember-ui/#/components/date-picker) |
| `<DateTimeInput />` | [文档](https://fleetbase.io/docs/ui/inputs/date-time-input) | [试试看](https://fleetbase.github.io/ember-ui/#/components/date-time-input) |
| `<PhoneInput />` | [文档](https://fleetbase.io/docs/ui/inputs/phone-input) | [试试看](https://fleetbase.github.io/ember-ui/#/components/phone-input) |
| `<CoordinatesInput />` | [文档](https://fleetbase.io/docs/ui/inputs/coordinates-input) | [试试看](https://fleetbase.github.io/ember-ui/#/components/coordinates-input) |
| `<ModelCoordinatesInput />` | [文档](https://fleetbase.io/docs/ui/inputs/model-coordinates-input) | [试试看](https://fleetbase.github.io/ember-ui/#/components/model-coordinates-input) |
| `<UnitInput />` | [文档](https://fleetbase.io/docs/ui/inputs/unit-input) | [试试看](https://fleetbase.github.io/ember-ui/#/components/unit-input) |
| `<MoneyInput />` | [文档](https://fleetbase.io/docs/ui/inputs/money-input) | [试试看](https://fleetbase.github.io/ember-ui/#/components/money-input) |
| `<FileUpload />` | [文档](https://fleetbase.io/docs/ui/inputs/file-upload) | [试试看](https://fleetbase.github.io/ember-ui/#/components/file-upload) |

**数据显示** - 9个构成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<Table />` | [文档](https://fleetbase.io/docs/ui/display/table) | [试试看](https://fleetbase.github.io/ember-ui/#/components/table) |
| `<Badge />` | [文档](https://fleetbase.io/docs/ui/display/badge) | [试试看](https://fleetbase.github.io/ember-ui/#/components/badge) |
| `<Pill />` | [文档](https://fleetbase.io/docs/ui/display/pill) | [试试看](https://fleetbase.github.io/ember-ui/#/components/pill) |
| `<ProgressBar />` | [文档](https://fleetbase.io/docs/ui/display/progress-bar) | [试试看](https://fleetbase.github.io/ember-ui/#/components/progress-bar) |
| `<Spinner />` | [文档](https://fleetbase.io/docs/ui/display/spinner) | [试试看](https://fleetbase.github.io/ember-ui/#/components/spinner) |
| `<Timeline />` | [文档](https://fleetbase.io/docs/ui/display/timeline) | [试试看](https://fleetbase.github.io/ember-ui/#/components/timeline) |
| `<ActivityLog />` | [文档](https://fleetbase.io/docs/ui/display/activity-log) | [试试看](https://fleetbase.github.io/ember-ui/#/components/activity-log) |
| `<File />` | [文档](https://fleetbase.io/docs/ui/display/file) | [试试看](https://fleetbase.github.io/ember-ui/#/components/file) |
| `<CommentThread />` | [文档](https://fleetbase.io/docs/ui/display/comment-thread) | [试试看](https://fleetbase.github.io/ember-ui/#/components/comment-thread) |

**日历和董事会** - 3个组成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<FullCalendar />` | [文档](https://fleetbase.io/docs/ui/scheduling/full-calendar) | [试试看](https://fleetbase.github.io/ember-ui/#/components/full-calendar) |
| `<EventCalendar />` | [文档](https://fleetbase.io/docs/ui/scheduling/event-calendar) | [试试看](https://fleetbase.github.io/ember-ui/#/components/event-calendar) |
| `<Kanban />` | [文档](https://fleetbase.io/docs/ui/scheduling/kanban) | [试试看](https://fleetbase.github.io/ember-ui/#/components/kanban) |

**模块** - 9个构成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<Modal::Default />` | [文档](https://fleetbase.io/docs/ui/modals/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-default) |
| `<Modal::Layouts::Confirm />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-confirm) |
| `<Modal::Layouts::Alert />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-alert) |
| `<Modal::Layouts::Prompt />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-prompt) |
| `<Modal::Layouts::BulkAction />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-bulk-action) |
| `<Modal::Layouts::Progress />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-progress) |
| `<Modal::Layouts::Process />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-process) |
| `<Modal::Layouts::Loading />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-loading) |
| `<Modal::Layouts::OptionPrompt />` | [文档](https://fleetbase.io/docs/ui/modals/modal-layouts) | [试试看](https://fleetbase.github.io/ember-ui/#/components/modal-layouts-option-prompt) |

**盘子** - 1个构成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<Dashboard />` | [文档](https://fleetbase.io/docs/ui/dashboard/overview) | [试试看](https://fleetbase.github.io/ember-ui/#/components/dashboard) |

**构建器** - 2个构成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<ReportBuilder />` | [文档](https://fleetbase.io/docs/ui/builders/report-builder) | [试试看](https://fleetbase.github.io/ember-ui/#/components/report-builder) |
| `<TemplateBuilder />` | [文档](https://fleetbase.io/docs/ui/builders/template-builder) | [试试看](https://fleetbase.github.io/ember-ui/#/components/template-builder) |

**登记和分区** - 1个构成部分

| 构成部分 | 文档 | 游戏场 |
| --- | --- | --- |
| `<RegistryYield />` | [文档](https://fleetbase.io/docs/ui/registry/registry-yield) | [试试看](https://fleetbase.github.io/ember-ui/#/components/registry-yield) |

附加输出的组件比这个多 —— 表格单元格、聊天内部组件、构建子组件 以及其他执行细节。 这些是蓄意无证的:它们是内部的 以上组件,且不包含在文档、游乐场或任何兼容性中 答应.

## 游戏场

由这个加登自己的假程序所建 所以它让真正的组件通过正常 具有真实外加样式的 Ember 分辨率 .

```bash
pnpm start                    # http://localhost:4200
pnpm run build:playground     # static GitHub Pages artifact into playground-dist/
```

| 路线 | 目的 |
| --- | --- |
| `/components` | 可搜索的分类目录 |
| `/components/:slug` | 完整页面: 控制、 预设、 事件日志、 使用片断 |
| `/embed/:slug` | 最小 Iframe 视图, 嵌入在文档站点 |

参数状态在一个编码的查询参数中进行,因此配置的示例是可共享的 链接和嵌入式显示整个页面显示的内容.

见 **[佩克鲁德·姆德](https://npmcn.com/package/%40fleetbase/ember-ui/PLAYGROUND.md)** 如何添加 例如, iframe 集成和调整消息大小, 以及如何在 舰队基地.io/docs/ui更改.

## 发展

```bash
pnpm install --frozen-lockfile

pnpm start                # serve the playground / dummy app
pnpm test                 # lint + the full suite
pnpm run test:ember       # the suite on its own
pnpm run lint             # eslint, ember-template-lint, stylelint
pnpm run build            # production build
```

在一个组件上运行子集 :

```bash
pnpm exec ember test --filter="Integration | Component | button"
```

## 测试和覆盖范围

套房以无头Chrome通过Testem运行. 覆盖范围设于 **100%的第一党 `addon/` 来源** - 声明、分支、职能和线条,并在CI中执行:

```bash
pnpm run test:coverage       # run the suite with coverage
pnpm run coverage:check      # enforce the gate
```

## 捐款

见 [捐款](https://npmcn.com/package/%40fleetbase/ember-ui/CONTRIBUTING.md) 向导.

## 许可证

凭 [GNU 阿费罗通用公共许可证 v3.0 或以后](https://npmcn.com/package/%40fleetbase/ember-ui/LICENSE.md)。 。 。 .

## 常见问题

### @fleetbase/ember-ui 是什么？

Fleetbase UI提供所有接口组件,帮助器,服务和公用设备,用于将Fleetbase扩展至Console\.

### 如何安装 @fleetbase/ember-ui？

在项目目录运行 npm install @fleetbase/ember-ui，或使用 pnpm add / yarn add / bun add。

### @fleetbase/ember-ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fleetbase\_\_ember-ui 是否存在。

### @fleetbase/ember-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fleetbase/ember-ui 可以商用吗？

@fleetbase/ember-ui 使用 AGPL-3\.0-or-later 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。

### @fleetbase/ember-ui 的下载量有多少？

根据 npm 官方下载统计，@fleetbase/ember-ui 在 2026/10/15 – 2026/11/13 这 30 天内被下载 5,011 次，日均约 167 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fleetbase/ember-ui 还在维护吗？

最新版本 0\.4\.6 发布于 2026/10/14（1 个月前）；至今共发布 107 个版本，其中过去 12 个月发布了 38 个；首次发布于 2023/05/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。