# 管理面板 API 概述

> Source: https://strapi.nodejs.cn/cms/plugins-development/admin-panel-api

🌐 Admin Panel API for plugins: An overview

管理面板 API 提供 `register`、`bootstrap` 和 `registerTrads` 钩子，用于向 Strapi 的 UI 注入 React 组件和翻译。菜单、设置、注入区、reducer 和钩子 API 允许插件添加导航、配置面板或自定义操作。

Strapi 插件可以与 Strapi 应用的后端和前端进行交互。管理面板 API 涵盖了前端部分：它允许插件自定义 Strapi 的[管理面板](/cms/intro)。管理面板是一个 [React](https://react.nodejs.cn/) 应用，每个插件都会为其贡献自己的 React 应用。自定义包括编辑[入口文件](#entry-file)以导出所需的界面，并选择要执行的[操作](#available-actions)。

有关插件如何与 Strapi 的后端部分交互的更多信息，请参见 [服务器 API](/cms/plugins-development/server-api)。

🌐 For more information on how plugins can interact with the back end part of Strapi, see [Server API](/cms/plugins-development/server-api).

:::prerequisites

在深入了解本页的概念之前，请确保你已经[创建了一个 Strapi 插件](/cms/plugins-development/create-a-plugin)。

🌐 Before diving deeper into the concepts on this page, please ensure you [created a Strapi plugin](/cms/plugins-development/create-a-plugin).

:::

## 入口文件 {#entry-file}

🌐 Entry file

管理面板 API 的入口文件是 `[plugin-name]/admin/src/index.js`。该文件导出所需的接口，并提供以下功能：

🌐 The entry file for the Admin Panel API is `[plugin-name]/admin/src/index.js`. This file exports the required interface, with the following functions available:

| 功能类型 | 可用功能 |
| --- | --- |
| 生命周期函数 | [`register()`](#register), [`bootstrap()`](#bootstrap) |
| 异步函数 | `registerTrads()`（详情见 [管理员本地化](/cms/plugins-development/admin-localization)） |

所有管理面板代码技术上可以全部放在单个入口文件中，但强烈建议将每个关注点拆分到各自的文件夹中，就像 `strapi generate plugin` CLI 命令生成的那样。本文件中的示例遵循这种结构。

🌐 All admin panel code can technically live in the single entry file, but splitting each concern into its own folder, as generated by the `strapi generate plugin` CLI command, is strongly recommended. The examples in this documentation follow that structure.

### register() {#register}

**类型:** `Function`

此函数在加载插件时被调用，甚至在应用实际上被 [引导](#bootstrap) 之前。它将正在运行的 Strapi 应用作为参数 (`app`)。

🌐 This function is called to load the plugin, even before the app is actually [bootstrapped](#bootstrap). It takes the running Strapi application as an argument (`app`).

在 `register()` 函数中，插件可以：

🌐 Within the `register()` function, a plugin can:

* 使用 [`registerPlugin()`](#registerplugin) 注册自身，使其可以在管理面板中使用
* 在主导航中添加一个新链接（见 [管理员导航与设置](/cms/plugins-development/admin-navigation-settings#navigation-sidebar-menu-links)）
* [创建一个新的设置部分](/cms/plugins-development/admin-navigation-settings#creating-a-new-settings-section)
* 定义[injection zones](/cms/plugins-development/admin-injection-zones)
* [添加 reducers](/cms/plugins-development/admin-redux-store#adding-custom-reducers)

**示例：**

```js title="my-plugin/admin/src/index.js"

  register(app) {
    // highlight-next-line
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};
```
```ts title="my-plugin/admin/src/index.ts"

  register(app: StrapiApp) {
    // highlight-next-line
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};
```

#### registerPlugin() {#registerplugin}

**类型:** `Function`

注册插件以使其在管理面板中可用。此函数在[`register()`](#register)生命周期函数中被调用，并返回一个包含以下参数的对象：

🌐 Registers the plugin to make it available in the admin panel. This function is called within the [`register()`](#register) lifecycle function and returns an object with the following parameters:

| 参数 | 类型 | 描述 |
| --- | --- | --- |
| `id` | 字符串 | 插件 ID |
| `name` | 字符串 | 插件名称 |
| `apis` | `Record<string, unknown>` | 向其他插件开放的 API |
| `initializer` | `React.ComponentType` | 插件初始化的组件 |
| `injectionZones` | 对象 | 可用 [注入区域](/cms/plugins-development/admin-injection-zones) 的声明 |
| `isReady` | 布尔值 | 插件就绪状态（默认值：`true`） |

:::note

一些参数可以从 `package.json` 文件中导入。

🌐 Some parameters can be imported from the `package.json` file.

:::

**示例：**

```js title="my-plugin/admin/src/index.js"

  register(app) {
    app.registerPlugin({
      id: 'my-plugin',
      name: 'My Plugin',
      apis: {
        // APIs exposed to other plugins
      },
      initializer: MyInitializerComponent,
      injectionZones: {
        // Areas where other plugins can inject components
      },
      isReady: false,
    });
  },
};
```
```ts title="my-plugin/admin/src/index.ts"

  register(app: StrapiApp) {
    app.registerPlugin({
      id: 'my-plugin',
      name: 'My Plugin',
      apis: {
        // APIs exposed to other plugins
      },
      initializer: MyInitializerComponent,
      injectionZones: {
        // Areas where other plugins can inject components
      },
      isReady: false,
    });
  },
};
```

### bootstrap() {#bootstrap}

**类型**: `Function`

暴露 bootstrap 函数，在所有插件[注册](#register)之后执行。

🌐 Exposes the bootstrap function, executed after all the plugins are [registered](#register).

在 `bootstrap()` 函数中，插件可以：

🌐 Within the `bootstrap()` function, a plugin can:

* 使用 `getPlugin('plugin-name')` 扩展另一个插件,
* 注册钩子（参见 [Hooks](/cms/plugins-development/admin-hooks)），
* [添加到设置部分的链接](/cms/plugins-development/admin-navigation-settings#adding-links-to-existing-settings-sections),
* 在内容管理器的列表视图和编辑视图中添加操作和选项（参见 [内容管理器 API](/cms/plugins-development/content-manager-apis)）。

**示例：**

```js title="my-plugin/admin/src/index.js"

  // ...
  bootstrap(app) {
    // highlight-next-line
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};
```
```ts title="my-plugin/admin/src/index.ts"

  // ...
  bootstrap(app: StrapiApp) {
    // highlight-next-line
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};
```

## 可用操作 {#available-actions}

🌐 Available actions

管理面板 API 提供了多个构建模块，用于自定义管理面板的用户界面、用户体验和行为。

🌐 The Admin Panel API provides several building blocks to customize the user interface, user experience, and behavior of the admin panel.

使用下表查找要使用的函数以及在哪里声明它。点击任意函数名称以获取详细信息：

🌐 Use the following table to find which function to use and where to declare it. Click any function name for details:

| 操作 | 使用的函数 | 相关的生命周期函数 |
| --- | --- | --- |
| 在主导航中添加新链接 | [`addMenuLink()`](/cms/plugins-development/admin-navigation-settings#navigation-sidebar-menu-links) | [`register()`](#register) |
| 创建一个新的设置部分 | [`addSettingsLink()`](/cms/plugins-development/admin-navigation-settings#creating-a-new-settings-section)（带有一个部分对象） | [`register()`](#register) |
| 添加一个或多个指向设置部分的链接 | [`addSettingsLink()`](/cms/plugins-development/admin-navigation-settings#adding-links-to-existing-settings-sections)（带有部分ID） | [`bootstrap()`](#bootstrap) |
| 在内容管理器的编辑视图和列表视图中添加面板、选项和操作 | <ul><li>[`addEditViewSidePanel()`](/cms/plugins-development/content-manager-apis#addeditviewsidepanel)</li><li>[`addDocumentAction()`](/cms/plugins-development/content-manager-apis#adddocumentaction)</li><li>[`addDocumentHeaderAction()`](/cms/plugins-development/content-manager-apis#adddocumentheaderaction)</li><li>[`addBulkAction()`](/cms/plugins-development/content-manager-apis#addbulkaction)</li></ul> | [`bootstrap()`](#bootstrap) |
| 声明注入区 | [`registerPlugin()`](#registerplugin) | [`register()`](#register) |
| 在注入区域注入组件 | [`injectComponent()`](/cms/plugins-development/admin-injection-zones) | [`bootstrap()`](#bootstrap) |
| 添加一个 reducer | [`addReducers()`](/cms/plugins-development/admin-redux-store#adding-custom-reducers) | [`register()`](#register) |
| 创建一个钩子 | [`createHook()`](/cms/plugins-development/admin-hooks) | [`register()`](#register) |
| 注册一个钩子 | [`registerHook()`](/cms/plugins-development/admin-hooks) | [`bootstrap()`](#bootstrap) |
| 为插件管理界面提供翻译 | [`registerTrads()`](/cms/plugins-development/admin-localization#registertrads) | `registerTrads()` |
| 发起经过身份验证的 HTTP 请求 | [`useFetchClient()`](/cms/plugins-development/admin-fetch-client) / [`getFetchClient()`](/cms/plugins-development/admin-fetch-client#outside-a-react-component) | 任意 |
| 从 React 访问内容管理器编辑视图上下文 | [`unstable_useContentManagerContext`](/cms/migration/v4-to-v5/additional-resources/helper-plugin#usecmeditviewdatamanager) | 任意 |

<br/>
点击以下任意卡片以获取有关特定主题的更多详细信息：

- [导航与设置](/cms/plugins-development/admin-navigation-settings): 为你的插件添加菜单链接并配置设置部分。
- [内容管理器 API](/cms/plugins-development/content-manager-apis): 向内容管理器列表和编辑视图添加面板、操作和选项。
- [注入区](/cms/plugins-development/admin-injection-zones): 将 React 组件注入到管理员面板的预定义或自定义区域。
- [Redux 存储和 reducers](/cms/plugins-development/admin-redux-store): 添加自定义 reducers，读取状态，分发动作，并订阅 Redux 仓库中的更改。
- [钩子](/cms/plugins-development/admin-hooks): 创建并注册钩子，以允许其他插件添加个性化行为。
- [本地化](/cms/plugins-development/admin-localization): 使用 registerTrads 和 react-intl 为你的插件管理界面提供翻译。
- [获取客户端](/cms/plugins-development/admin-fetch-client): 使用 useFetchClient 和 getFetchClient 从管理面板发起经过身份验证的 HTTP 请求。

:::tip Replacing the WYSIWYG

可以通过利用[自定义字段](/cms/features/custom-fields)来替换所见即所得编辑器，例如使用 [CKEditor custom field plugin](https://market.strapi.io/plugins/@ckeditor-strapi-plugin-ckeditor)。

🌐 The WYSIWYG editor can be replaced by taking advantage of [custom fields](/cms/features/custom-fields), for instance using the [CKEditor custom field plugin](https://market.strapi.io/plugins/@ckeditor-strapi-plugin-ckeditor).

:::

:::info

管理面板支持自托管项目中的 dotenv 变量。

🌐 The admin panel supports dotenv variables in self-hosted projects.

所有在 `.env` 文件中定义并以 `STRAPI_ADMIN_` 为前缀的变量，在通过 `process.env` 自定义管理面板时都是可用的。

🌐 All variables defined in a `.env` file and prefixed by `STRAPI_ADMIN_` are available while customizing the admin panel through `process.env`.

此 dotenv 暴露不适用于 Strapi Cloud 项目。

🌐 This dotenv exposure does not apply to Strapi Cloud projects.

:::