管理面板API Admin Panel API for plugins

// Auto-generated component
import PluginIcon from './components/PluginIcon'
import pluginId from './pluginId'

export default {
  register(app) {
    app.addMenuLink({
      to: `/plugins/${pluginId}`,
      icon: PluginIcon,
      intlLabel: {
        id: `${pluginId}.plugin.name`,
        defaultMessage: 'My plugin',
      },
      Component: async () => {
        const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App')

        return component
      },
      permissions: [], // 权限数组（对象），允许用户根据其权限访问插件
    })
    app.registerPlugin({
      id: pluginId,
      name,
    })
  },
}

module.exports = () => {
  return {
    // ...
    bootstrap(app) {
      // execute some bootstrap code
      app.injectContentManagerComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' })
    },
  }
}

export default {
  async registerTrads({ locales }) {
    const importedTrads = await Promise.all(
      locales.map((locale) => {
        return import(
          /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
        )
          .then(({ default: data }) => {
            return {
              data: prefixPluginTranslations(data, pluginId),
              locale,
            }
          })
          .catch(() => {
            return {
              data: {},
              locale,
            }
          })
      })
    )

    return Promise.resolve(importedTrads)
  },
}

import PluginIcon from './components/PluginIcon'

export default {
  register(app) {
    app.addMenuLink({
      to: '/plugins/my-plugin',
      icon: PluginIcon,
      intlLabel: {
        id: 'my-plugin.plugin.name',
        defaultMessage: 'My plugin',
      },
      Component: () => 'My plugin',
      permissions: [], // permissions to apply to the link
    })
    app.registerPlugin({
      // ...
    })
  },
  bootstrap() {},
}

async function myComponent() {
  const component = await import(
    /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
  )

  return component
}

export default {
  register(app) {
    app.createSettingSection(
      { id: String, intlLabel: { id: String, defaultMessage: String } }, // Section to create
      [
        // links
        {
          intlLabel: { id: String, defaultMessage: String },
          id: String,
          to: String,
          Component: myComponent,
          permissions: Object[0],
        },
      ]
    )
  },
}

async function myComponent() {
  const component = await import(
    /* webpackChunkName: "users-providers-settings-page" */
    './pages/Providers'
  )

  return component
}

export default {
  bootstrap(app) {
    // Adding a single link
    app.addSettingsLink(
      'global', // id of the section to add the link to
      {
        intlLabel: { id: String, defaultMessage: String },
        id: String,
        to: String,
        Component: myComponent,
        permissions: Object[0]
      }
    )
  }
}

async function myComponent() {
  const component = await import(
    /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers'
  )

  return component
}

export default {
  bootstrap(app) {
    // Adding several links at once
    app.addSettingsLinks(
      'global', // id of the section to add the link in
      [{
        intlLabel: { id: String, defaultMessage: String },
        id: String,
        to: String,
        Component: myComponent,
        permissions: Object[0]
      }]
    )
  }
}

export default {
  bootstrap(app) {
    app.injectContentManagerComponent('editView', 'informations', {
      name: 'my-plugin-my-compo',
      Component: () => 'my-compo',
    })
  }
}

// Use the injection zone in a view

import { InjectionZone } from '@strapi/helper-plugin'

function HomePage() {
  return (
    <main>
      <h1>This is the homepage</h1>
      <InjectionZone area="my-plugin.homePage.right" />
    </main>
  )
}

// 在插件的注册生命周期中声明此注入区域

export default {
  register() {
    app.registerPlugin({
      // ...
      injectionZones: {
        homePage: {
          right: []
        }
      }
    })
  },
}

// 将一个插件中的组件注入另一个插件中

export default {
  register() {
    // ...
  },
  bootstrap(app) {
    app.getPlugin('my-plugin').injectComponent('homePage', 'right', {
      name: 'my-other-plugin-component',
      Component: () => 'This component is injected',
    })
  }
}

import { useCMEditViewDataManager } from '@strapi/helper-plugin'

function MyCompo() {
  const {
    createActionAllowedFields = [], // 允许用户编辑的字段数组
    formErrors = {}, // 对象错误
    readActionAllowedFields = [], // 允许用户编辑的字段数组
    slug = 'api::address.address', // 内容类型的 Slug
    updateActionAllowedFields = [],
    allLayoutData: {
      components = {}, // 组件布局
      contentType = {}, // 内容类型布局
    } = {}, // 为 allLayoutData 设置默认值
    initialData = {},
    isCreatingEntry = true,
    isSingleType = true,
    status = 'resolved',
    layout = {}, // 当前内容类型布局
    hasDraftAndPublish = true,
    modifiedData = {},
    onPublish = () => {},
    onUnpublish = () => {},
    addComponentToDynamicZone = () => {},
    addNonRepeatableComponentToField = () => {},
    addRelation = () => {},
    addRepeatableComponentToField = () => {},
    moveComponentDown = () => {},
    moveComponentField = () => {},
    moveComponentUp = () => {},
    moveRelation = () => {},
    onChange = () => {},
    onRemoveRelation = () => {},
    removeComponentFromDynamicZone = () => {},
    removeComponentFromField = () => {},
    removeRepeatableField = () => {},
  } = useCMEditViewDataManager()

  return null
}

import { exampleReducer } from './reducers'

const reducers = {
  // Reducer Syntax
  [`${pluginId}_exampleReducer`]: exampleReducer
}

export default {
  register(app) {
    app.addReducers(reducers)
  },
  bootstrap() {},
}

// 在插件中创建钩子
export default {
  register(app) {
    app.createHook('My-PLUGIN/MY_HOOK')
  }
}

// 在另一个插件中使用钩子
export default {
  bootstrap(app) {
    app.registerHook('My-PLUGIN/MY_HOOK', (...args) => {
      console.log(args)

      // 重要：返回变异数据
      return args
    })

    app.registerPlugin({})
  }
}

import get from 'lodash/get'
import cellFormatter from './components/cellFormatter'

export default {
  bootstrap(app) {
    app.registerHook(
      'Admin/CM/pages/ListView/inject-column-in-table',
      ({ displayedHeaders, layout }) => {
        const isFieldLocalized = get(
          layout,
          'contentType.pluginOptions.i18n.localized',
          false
        )
        if (!isFieldLocalized) {
          return { displayedHeaders, layout }
        }
        return {
          layout,
          displayedHeaders: [
            ...displayedHeaders,
            {
              key: '__locale_key__', // 表格所需
              fieldSchema: { type: 'string' }, // 属性的架构
              metadatas: {
                label: 'Content available in', // 标题的标签，
                sortable: true | false, // 定义列是否可排序
              }, // 标签的元数据
              // 我们将显示的数据中的键的名称
              name: 'locales',
              // 自定义渲染器：props => Object.keys(props).map(key => <p key={key}>key</p>)
              cellFormatter,
            },
          ],
        }
      }
    )
  },
}