# @dweber019/backstage-plugin-relations 中文文档

规范地址：https://npmcn.com/package/%40dweber019/backstage-plugin-relations/

版本：0\.1\.2
npm 元数据更新时间：2025-12-19T07:45:30.738Z
中文译文更新时间：2026-11-13T01:18:37.461Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dweber019/backstage-plugin-relations
原文对照：https://npmcn.com/package/%40dweber019/backstage-plugin-relations/?lang=original
项目主页：https://github.com/dweber019/backstage-plugins/tree/main/plugins/relations
源码仓库：https://github.com/dweber019/backstage-plugins

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

- 包体积（解压后）：32.5 kB，26 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- peer 依赖：react ^16\.13\.1 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^16\.13\.1 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-router-dom 6\.0\.0-beta\.0 \|\| ^6\.3\.0
- 首次发布：2024-04-06T09:56:37.945Z
- 最新版本发布：2025-12-19T07:45:30.540Z
- 近 30 天下载量：4042（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 1 个）

## 中文简介

欢迎使用关系插件 .

## 安装

```sh
npm install @dweber019/backstage-plugin-relations
```

也可以使用：`pnpm add @dweber019/backstage-plugin-relations`、`yarn add @dweber019/backstage-plugin-relations`、`bun add @dweber019/backstage-plugin-relations`

## README

# 关系插件

欢迎使用关系插件 .

此插件在使用时会改进体验 [关系处理器插件](https://npmcn.com/package/%40dweber019/relations-backend/README.md) 通过:

-   为可视化关系提供自定义组件
-   提供 [目录图](https://github.com/backstage/backstage/blob/master/plugins/catalog-graph/README.md) 包装
    -   更好的默认
    -   添加新关系过滤 Als 选项

![](https://npmcn.com/package/%40dweber019/backstage-plugin-relations/docs/graph.png) ![](https://npmcn.com/package/%40dweber019/backstage-plugin-relations/docs/relations-card.png)

## 设置

安装此插件 :

```bash
# From your Backstage root directory
yarn --cwd packages/app add @dweber019/backstage-plugin-relations
```

### 配置

你需要拥有 [关系处理器插件](https://npmcn.com/package/%40dweber019/relations-backend/README.md) 已配置 .

此外,确保至少使用后台版本 `1.27.0`。 。 。 .

### 实体页

在您引入新关系时, 您必须手动添加关系 `EntityCatalogGraphCard` 或替换 `EntityRelationsCatalogGraphCard`。此新卡将添加所有新配置的关系对并启用箭头作为默认值.

```tsx
// packages/app/src/components/catalog/EntityPage.tsx

import { EntityRelationsCatalogGraphCard } from '@dweber019/backstage-plugin-relations';

const groupPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        {entityWarningContent}
        ...
        <Grid item md={6} xs={12}>
          <EntityRelationsCatalogGraphCard variant="gridItem" height={400} />
        </Grid>
        ...
      </Grid>
    </EntityLayout.Route>
  </EntityLayout>
);
```

此外,还有一张名片叫 `EntityRelationsCard` 以显示额外的关系.

```tsx
const userPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        {entityWarningContent}
        ...
        <Grid item md={6} xs={12}>
          <EntityRelationsCard relations={relationLabels} />
        </Grid>
      </Grid>
    </EntityLayout.Route>
  </EntityLayout>
);
```

您可以定义包含的关系列表。 要显示的标签如上 `relationLabels`,看起来像

```ts
export const relationLabels = [
  {
    name: 'applicationOwnerOf',
    label: 'Application owner of',
  },
  {
    name: 'applicationOwnerBy',
    label: 'Application owner',
  },
];
```

如果不定义,则只显示自定义关系(如无所有者).

### 根目录图

目录图 `/catalog-graph` 可以通过使用 `RelationsCatalogGraphPage` 喜欢

```tsx
// packages/app/src/App.tsx

import { RelationsCatalogGraphPage } from '@dweber019/backstage-plugin-relations';

const routes = (
  <FlatRoutes>
    ...
    <Route path="/catalog-graph" element={<RelationsCatalogGraphPage />} />
  </FlatRoutes>
);
```

## 常见问题

### @dweber019/backstage-plugin-relations 是什么？

欢迎使用关系插件 \.

### 如何安装 @dweber019/backstage-plugin-relations？

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

### @dweber019/backstage-plugin-relations 支持 TypeScript 吗？

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

### @dweber019/backstage-plugin-relations 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @dweber019/backstage-plugin-relations 可以商用吗？

@dweber019/backstage-plugin-relations 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dweber019/backstage-plugin-relations 的下载量有多少？

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

### @dweber019/backstage-plugin-relations 还在维护吗？

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