Root 组件

根组件（Root Components）是指那些对Admin Panel产生全局影响的组件，例如logo或主导航。你可以用自定义组件替换这些组件，从而创建完全自定义的外观和体验。

当与自定义CSS结合使用时，你可以为用户打造真正独特的体验，比如将Admin Panel进行白标化处理以匹配你的品牌。

要覆盖根组件，请在Payload Config的根配置中使用admin.components属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      // ...
    },
    // highlight-end
  },
})

配置选项

以下是可用的配置选项：

Path描述
actions一个 Custom Components 数组，这些组件会被渲染在 Admin Panel 的头部，提供额外的交互性和功能。更多详情。
afterDashboard一个 Custom Components 数组，这些组件会被注入到内置 Dashboard 中，位于默认仪表板内容之后。更多详情。
afterLogin一个 Custom Components 数组，这些组件会被注入到内置 Login 页面中，位于默认登录表单之后。更多详情。
afterNavLinks一个 Custom Components 数组，这些组件会被注入到内置导航栏中，位于链接之后。更多详情。
beforeDashboard一个 Custom Components 数组，这些组件会被注入到内置 Dashboard 中，位于默认仪表板内容之前。更多详情。
beforeLogin一个 Custom Components 数组，这些组件会被注入到内置 Login 页面中，位于默认登录表单之前。更多详情。
beforeNavLinks一个 Custom Components 数组，这些组件会被注入到内置导航栏中，位于链接之前。更多详情。
graphics.Icon简化版 logo，用于 Nav 组件等场景。更多详情。
graphics.Logo完整版 logo，用于 Login 视图等场景。更多详情。
header一个 Custom Components 数组，这些组件会被注入到 Payload 头部上方。更多详情。
logout.Button侧边栏中显示的用户登出按钮。更多详情。
Nav包含整个侧边栏/移动菜单。更多详情。
providers自定义的 React Context providers，将包裹整个 Admin Panel。更多详情。
views覆盖或创建 Admin Panel 中的新视图。更多详情。

关于如何构建 Custom Components 的详细信息，请参阅构建自定义组件。

注意： 你也可以在各自的配置中使用Collection 组件和Global 组件。

组件

actions

Actions（操作）会在 Admin Panel 的头部区域渲染。通常用于显示按钮以添加额外的交互性和功能，但也可以根据需要自定义任何内容。

要添加 action，可以在 admin.components 配置中使用 actions 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      actions: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 Action 组件示例：

export default function MyCustomAction() {
  return (
    <button onClick={() => alert('Hello, world!')}>
      这是一个自定义操作组件
    </button>
  )
}

注意： 你也可以在 Edit View 和 List View 的配置中添加 Actions。

beforeDashboard

beforeDashboard 属性允许你在内置 Dashboard 的默认内容之前注入自定义组件。

要添加 beforeDashboard 组件，可以在 Payload Config 中使用 admin.components.beforeDashboard 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      beforeDashboard: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 beforeDashboard 组件示例：

export default function MyBeforeDashboardComponent() {
  return <div>这是一个注入到 Dashboard 之前的自定义组件</div>
}

afterDashboard

与 beforeDashboard 类似，afterDashboard 属性允许你在内置 Dashboard 的默认内容之后注入自定义组件。

要添加 afterDashboard 组件，请在 Payload Config 中使用 admin.components.afterDashboard 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      afterDashboard: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 afterDashboard 组件示例：

export default function MyAfterDashboardComponent() {
  return <div>这是一个在 Dashboard 之后注入的自定义组件。</div>
}

beforeLogin

beforeLogin 属性允许你在内置登录视图的默认表单之前注入自定义组件。

要添加 beforeLogin 组件，请在 Payload Config 中使用 admin.components.beforeLogin 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      beforeLogin: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 beforeLogin 组件示例：

export default function MyBeforeLoginComponent() {
  return <div>这是一个在登录表单之前注入的自定义组件。</div>
}

afterLogin

与 beforeLogin 类似，afterLogin 属性允许你在内置的登录视图中注入自定义组件，位置在默认登录表单 之后。

要添加 afterLogin 组件，请在 Payload 配置中使用 admin.components.afterLogin 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      afterLogin: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 afterLogin 组件示例：

export default function MyAfterLoginComponent() {
  return <div>这是一个在登录表单后注入的自定义组件。</div>
}

beforeNavLinks 属性允许你在内置的 Nav 组件中注入自定义组件，位置在导航链接 之前。

要添加 beforeNavLinks 组件，请在 Payload 配置中使用 admin.components.beforeNavLinks 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      beforeNavLinks: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 beforeNavLinks 组件示例：

export default function MyBeforeNavLinksComponent() {
  return <div>这是一个在导航链接前注入的自定义组件。</div>
}

与 beforeNavLinks 类似，afterNavLinks 属性允许你在内置导航栏的链接 之后 注入自定义组件。

要添加 afterNavLinks 组件，请在 Payload 配置中使用 admin.components.afterNavLinks 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      afterNavLinks: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 afterNavLinks 组件示例：

export default function MyAfterNavLinksComponent() {
  return <p>这是一个在导航链接后注入的自定义组件。</p>
}

Nav 属性包含完整的侧边栏/移动菜单。使用此属性可以完全用自定义导航替换内置导航。

要添加自定义导航，请在 Payload 配置中使用 admin.components.Nav 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      Nav: '/path/to/your/component',
    },
    // highlight-end
  },
})

以下是一个简单的 Nav 组件示例：

import { Link } from '@payloadcms/ui'

export default function MyCustomNav() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/dashboard">仪表盘</Link>
        </li>
      </ul>
    </nav>
  )
}

graphics.Icon

Icon 属性是用于 Nav 组件等场景的简化版 logo。这通常是一个代表你品牌的小型方形图标。

要添加自定义图标，请在 Payload Config 中使用 admin.components.graphics.Icon 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      graphics: {
        Icon: '/path/to/your/component',
      },
    },
    // highlight-end
  },
})

以下是一个简单的 Icon 组件示例：

export default function MyCustomIcon() {
  return <img src="/path/to/your/icon.png" alt="我的自定义图标" />
}

Logo 属性是用于 Login 视图等场景的完整版 logo。这通常是一个更大型、更详细的品牌标识。

要添加自定义 logo，请在 Payload Config 中使用 admin.components.graphics.Logo 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      graphics: {
        Logo: '/path/to/your/component',
      },
    },
    // highlight-end
  },
})

以下是一个简单的 Logo 组件示例：

export default function MyCustomLogo() {
  return <img src="/path/to/your/logo.png" alt="我的自定义Logo" />
}

头部组件

Header 属性允许你在 Payload 头部上方注入自定义组件。

自定义头部组件的示例可能包括公告横幅、通知栏，或者任何你想在管理面板顶部显眼位置展示的内容。

要添加 Header 组件，请在你的 Payload 配置中使用 admin.components.header 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      Header: ['/path/to/your/component'],
    },
    // highlight-end
  },
})

以下是一个简单的 Header 组件示例：

export default function MyCustomHeader() {
  return (
    <header>
      <h1>我的自定义头部</h1>
    </header>
  )
}

登出按钮

logout.Button 属性表示侧边栏中显示的按钮，点击后应登出用户。

要添加自定义登出按钮，请在你的 Payload 配置中使用 admin.components.logout.Button 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    // highlight-start
    components: {
      logout: {
        Button: '/path/to/your/component',
      },
    },
    // highlight-end
  },
})

以下是一个简单的 logout.Button 组件示例：

export default function MyCustomLogoutButton() {
  return <button onClick={() => alert('正在登出！')}>登出</button>
}