# @feast-dev/feast-ui 中文文档

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

版本：0\.68\.0
npm 元数据更新时间：2026-11-10T22:22:59.123Z
中文译文更新时间：2026-11-14T12:47:41.474Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：30.5 MB，487 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：22 个
- peer 依赖：react ^17\.0\.2 \|\| ^18\.0\.0，react-dom ^17\.0\.2 \|\| ^18\.0\.0，@elastic/eui ^95\.12\.0，@emotion/react ^11\.13\.3
- 首次发布：2022-03-06T05:01:50.427Z
- 最新版本发布：2026-11-10T22:22:58.830Z
- 近 30 天下载量：153033（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：67（近 12 个月 4 个）

## 中文简介

网络用户界面 [Feast 特性存储器](https://feast.dev/)

## 安装

```sh
npm install @feast-dev/feast-ui
```

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

## README

# \[实验\]Feast Web UI

![Sample UI](https://github.com/feast-dev/feast/blob/master/ui/sample.png)

这个项目是和 [创建反应应用](https://github.com/facebook/create-react-app)。 。 。 .

## 使用量

有三种使用方式:

-   通过 `feast ui` 查看当前特性存储器的 CLI
-   将 UI 作为模块导入
-   运行整个构建为 React app.

### 导入 UI 为模块

这是建议使用"Feast UI"的出场方式,用于各小队维持自己的内部UI以部署"Feast".

开始于拖曳程序 `create-react-app`

```
npx create-react-app your-feast-ui
```

然后,在您的应用程序文件夹中安装 Feast UI 并选择它的对等依赖性 。 假设您使用纱线

```
yarn add @feast-dev/feast-ui
# For custom UI using the Elastic UI Framework (optional):
yarn add @elastic/eui
# For general custom styling (optional):
yarn add @emotion/react
```

编辑 `index.js` 在反应应用程序中使用"Feast UI".

```js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import FeastUI from "@feast-dev/feast-ui";
import "@feast-dev/feast-ui/dist/feast-ui.css";

ReactDOM.render(
  <React.StrictMode>
    <FeastUI />
  </React.StrictMode>,
  document.getElementById("root")
);
```

当你启动反应应用程序,它会寻找 `projects-list.json` 查找您的项目列表。 JSON应该这样.

```json
{
  "projects": [
    {
      "name": "Credit Score Project",
      "description": "Project for credit scoring team and associated models.",
      "id": "credit_score_project",
      "registryPath": "/registry.json"
    },
  ]
}
```

-   **说明** - 说吧 `registryPath` 只支持文件位置或url.

```
// Start the React App
yarn start
```

#### 自定义

将"Feast UI"作为模块导入的优势在于方便定制. 这个 `<FeastUI>` 组件显示a `feastUIConfigs` 您可以自定义 UI 的道具 。 目前它支持一些参数.

##### 获取工程列表

默认情况下, Feast UI 从 app root 路径获取工程列表. 你用得着 `projectListPromise` 以提供一个承诺 压倒它从哪里得到.

```jsx
<FeastUI
  feastUIConfigs={{
    projectListPromise: fetch(SOME_PATH, {
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => {
      return res.json();
    })
  }}
/>
```

##### 自定义标签

您可以通过 `tabsRegistry`。 。 。 .

```jsx
const tabsRegistry = {
  RegularFeatureViewCustomTabs: [
    {
      label: "Custom Tab Demo", // Navigation Label for the tab
      path: "demo-tab", // Subpath for the tab
      Component: RFVDemoCustomTab, // a React Component
    },
  ]
}

<FeastUI
  feastUIConfigs={{
    tabsRegistry: tabsRegistry,
  }}
/>
```

自定义标签的实例可见于 `/custom-tabs` 文件夹.

## 发展

### 在回放和创建回放 App上

这个工程被用Create React App(英语:Create React App)的脚本所拖住,并使用它的脚本来简化UI的开发. 你可以多学点 [创建 App 文档](https://facebook.github.io/create-react-app/docs/getting-started)。 。 。 .

学回放,看看 [反应文档](https://reactjs.org/)。 。 。 .

### 代码格式

代码格式化使用 [高级](https://prettier.io/)。IDEs 通常具有Pretier 添加或扩展,用于格式化,但也可以运行:

-   `yarn format` 以格式化所有文件
-   `yarn format:check` 以检查文件格式是否正确而不修改它们(在 GitHub 动作检查中使用)

## 常见问题

### @feast-dev/feast-ui 是什么？

网络用户界面 Feast 特性存储器

### 如何安装 @feast-dev/feast-ui？

在项目目录运行 npm install @feast-dev/feast-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.2 \|\| ^18\.0\.0）、react-dom（^17\.0\.2 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @feast-dev/feast-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @feast-dev/feast-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @feast-dev/feast-ui 可以商用吗？

@feast-dev/feast-ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @feast-dev/feast-ui 的下载量有多少？

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

### @feast-dev/feast-ui 还在维护吗？

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