SuperAPI AI 工具集

payload-admin-components

前端与建站

查看项目

更新于 10-16 02:32

技能介绍

用途:在 Payload CMS 中通过自定义 React 组件替换或扩展管理面板界面,可替换几乎任何界面部分或新增功能。

主要能力:四类组件——Root(全局,如 logo、导航、头部)、Collection(集合视图)、Global(全局文档视图)、Field(自定义字段 UI 与单元格)。组件以文件路径而非直接导入方式定义,支持命名导出(#ExportName 或 exportName)与默认导出,可省略扩展名。可传配置对象,含 path、exportName、clientProps(须可序列化)、serverProps(可非序列化)。可通过 admin.importMap.baseDir 设置基准目录。

服务端与客户端:默认均为 React Server Components,可直接用 Local API、异步操作并访问完整 Payload 实例;客户端组件需 'use client',用于交互、状态与事件,不能接收非序列化 props。默认 props 含 payload、i18n、locale。客户端可用 @payloadcms/ui 的 useAuth、useConfig、useDocumentInfo、useField、useForm、useFormFields、useLocale、useTranslation、usePayload 等 Hooks。

用法要点:Root 组件配置于 admin.components 下(Nav、graphics.Icon、graphics.Logo、logout.Button、actions、header、beforeDashboard、afterDashboard、beforeLogin、afterLogin、beforeNavLinks、afterNavLinks、settingsMenu、providers、views);Collection 与 Global 组件配置于各自 admin.components 的 edit/list 下;字段组件配置于字段 admin.components 的 Field 与 Cell,type: 'ui' 可添加不影响数据的展示型 UI。样式可用 CSS 变量或导入 @payloadcms/ui/scss。导入映射由 Payload 生成,可运行 payload generate:importmap 重新生成,也可用 importMapFile 覆盖位置。

适用场景:需要深度定制 Payload 管理面板外观与交互、添加自定义按钮或视图、定制字段渲染时。

限制:客户端组件无法接收函数、类实例等非序列化 props;客户端拿到的 config 为可序列化版本,函数与校验被剥离;Hooks 仅在管理面板上下文的客户端组件中可用。若出现 useConfig is undefined 等错误,通常是 @payloadcms/* 包版本不一致,需固定为同一版本。