编辑视图

编辑视图（Edit View）是用户在管理面板中与单个集合和全局文档交互的地方。编辑视图包含实际向服务器提交数据的表单，用户可以在此查看、编辑和保存内容。它包含保存、发布和预览文档的控件，所有这些都可以高度自定义。

编辑视图可以完全替换为自定义视图，也可以通过注入多个自定义组件来添加额外功能或展示元素，而无需替换整个视图。

注意： 编辑视图是 Payload 管理面板中众多文档视图之一。每个文档视图负责与单个文档交互的不同方面。

自定义编辑视图

要使用自定义视图完全替换编辑视图，可以在集合配置或全局配置中使用 views.edit.default 属性：

import { buildConfig } from 'payload'

const config = buildConfig({
  // ...
  admin: {
    components: {
      views: {
        edit: {
          // highlight-start
          default: {
            Component: '/path/to/MyCustomEditViewComponent',
          },
          // highlight-end
        },
      },
    },
  },
})

以下是自定义编辑视图的示例：

服务端组件

import React from 'react'
import type { DocumentViewServerProps } from 'payload'

export function MyCustomServerEditView(props: DocumentViewServerProps) {
  return <div>这是一个自定义编辑视图（服务端）</div>
}

客户端组件

'use client'
import React from 'react'
import type { DocumentViewClientProps } from 'payload'

export function MyCustomClientEditView(props: DocumentViewClientProps) {
  return <div>这是一个自定义的编辑视图（客户端）</div>
}

关于如何构建自定义视图（包括所有可用属性）的详细信息，请参阅构建自定义视图。

自定义组件

除了使用自定义视图完全替换整个编辑视图外，你还可以覆盖单个组件。这允许你自定义编辑视图的特定部分，而无需替换整个视图。

重要提示： Collection 和 Global 在 admin.components 对象中对应不同的属性键，且选项略有不同。请确保为你正在处理的实体使用正确的键。

集合（Collections）

要为集合（Collection）覆盖编辑视图组件，请在 Collection Config 中使用 admin.components.edit 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      edit: {
        // ...
      },
      // highlight-end
    },
  },
}

可用的选项如下：

Path描述
beforeDocumentControls在保存/发布按钮前注入自定义组件。更多详情。
editMenuItems在文档控制栏的三点菜单下拉框中注入自定义组件。更多详情。
SaveButton保存当前文档的按钮。更多详情。
SaveDraftButton将当前文档保存为草稿的按钮。更多详情。
PublishButton发布当前文档的按钮。更多详情。
PreviewButton预览当前文档的按钮。更多详情。
Description集合的描述信息。更多详情。
Upload文件上传组件。更多详情。

全局配置

要为全局配置覆盖编辑视图组件，请在 Global Config 中使用 admin.components.elements 属性：

import type { GlobalConfig } from 'payload'

export const MyGlobal: GlobalConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      elements: {
        // ...
      },
      // highlight-end
    },
  },
}

以下是可用的配置选项：

Path描述
beforeDocumentControls在保存/发布按钮前注入自定义组件。更多详情。
editMenuItems在文档控制栏的三点菜单下拉框中注入自定义组件。更多详情。
SaveButton保存当前文档的按钮。更多详情。
SaveDraftButton将当前文档保存为草稿的按钮。更多详情。
PublishButton发布当前文档的按钮。更多详情。
PreviewButton预览当前文档的按钮。更多详情。
Description全局配置的描述。更多详情。

SaveButton

SaveButton 属性允许你在编辑视图中渲染自定义的保存按钮。

要添加 SaveButton 组件，可以在 Collection 配置 中使用 components.edit.SaveButton 属性，或在 Global 配置 中使用 components.elements.SaveButton：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      edit: {
        // highlight-start
        SaveButton: '/path/to/MySaveButton',
        // highlight-end
      },
    },
  },
}

以下是自定义 SaveButton 组件的示例：

服务端组件

import React from 'react'
import { SaveButton } from '@payloadcms/ui'
import type { SaveButtonServerProps } from 'payload'

export function MySaveButton(props: SaveButtonServerProps) {
  return <SaveButton label="保存" />
}

客户端组件

'use client'
import React from 'react'
import { SaveButton } from '@payloadcms/ui'
import type { SaveButtonClientProps } from 'payload'

export function MySaveButton(props: SaveButtonClientProps) {
  return <SaveButton label="保存" />
}

beforeDocumentControls

beforeDocumentControls 属性允许你在默认文档操作按钮（如保存、发布或预览）之前渲染自定义组件。这对于在内置控件之前注入自定义按钮、状态指示器或其他 UI 元素非常有用。

要添加 beforeDocumentControls 组件，可以在 Collection 配置 中使用 components.edit.beforeDocumentControls 属性，或在 Global 配置 中使用 components.elements.beforeDocumentControls：

集合 (Collections)

export const MyCollection: CollectionConfig = {
  admin: {
    components: {
      edit: {
        // highlight-start
        beforeDocumentControls: ['/path/to/CustomComponent'],
        // highlight-end
      },
    },
  },
}

全局 (Globals)

export const MyGlobal: GlobalConfig = {
  admin: {
    components: {
      elements: {
        // highlight-start
        beforeDocumentControls: ['/path/to/CustomComponent'],
        // highlight-end
      },
    },
  },
}

以下是一个自定义 beforeDocumentControls 组件的示例：

服务端组件 (Server Component)

import React from 'react'
import type { BeforeDocumentControlsServerProps } from 'payload'

export function MyCustomDocumentControlButton(
  props: BeforeDocumentControlsServerProps,
) {
  return <div>这是一个自定义的 beforeDocumentControl 按钮 (服务端)</div>
}

客户端组件 (Client Component)

'use client'
import React from 'react'
import type { BeforeDocumentControlsClientProps } from 'payload'

export function MyCustomDocumentControlButton(
  props: BeforeDocumentControlsClientProps,
) {
  return <div>这是一个自定义的 beforeDocumentControl 按钮 (客户端)</div>
}

editMenuItems

editMenuItems 属性允许你将自定义组件注入到文档控制栏中的三点菜单下拉框中。该下拉菜单包含默认选项，如 创建新文档、复制、删除，以及启用其他功能时的附加选项。你添加的任何自定义组件都会显示在这些默认项目下方。

要添加 editMenuItems，请在你的 Collection Config 中使用 components.edit.editMenuItems 属性：

配置示例

import type { CollectionConfig } from 'payload'

export const Pages: CollectionConfig = {
  slug: 'pages',
  admin: {
    components: {
      edit: {
        // highlight-start
        editMenuItems: ['/path/to/CustomEditMenuItem'],
        // highlight-end
      },
    },
  },
}

以下是自定义 editMenuItems 组件的示例：

服务端组件

import React from 'react'
import { PopupList } from '@payloadcms/ui'

import type { EditMenuItemsServerProps } from 'payload'

export const EditMenuItems = async (props: EditMenuItemsServerProps) => {
  const href = `/custom-action?id=${props.id}`

  return (
    <PopupList.ButtonGroup>
      <PopupList.Button href={href}>自定义编辑菜单项</PopupList.Button>
      <PopupList.Button href={href}>
        另一个自定义编辑菜单项 - 按需添加任意数量！
      </PopupList.Button>
    </PopupList.ButtonGroup>
  )
}

客户端组件

'use client'

import React from 'react'
import { PopupList } from '@payloadcms/ui'

import type { EditViewMenuItemClientProps } from 'payload'

export const EditMenuItems = (props: EditViewMenuItemClientProps) => {
  const handleClick = () => {
    console.log('Custom button clicked!')
  }

  return (
    <PopupList.ButtonGroup>
      <PopupList.Button onClick={handleClick}>
        自定义编辑菜单项
      </PopupList.Button>
      <PopupList.Button onClick={handleClick}>
        另一个自定义编辑菜单项 - 按需添加任意数量！
      </PopupList.Button>
    </PopupList.ButtonGroup>
  )
}

样式说明： 使用 Payload 内置的 PopupList.Button 可以确保你的菜单项自动匹配默认的下拉样式。如果需要不同的外观，可以通过向 PopupList.Button 传递自定义的 className 来定制样式，或者使用完全自定义的按钮组件，可以是标准的 HTML <button> 元素，也可以是符合你设计偏好的任何其他组件。

SaveDraftButton

SaveDraftButton 属性允许你在编辑视图中渲染自定义的"保存草稿"按钮。

要添加 SaveDraftButton 组件，可以在 Collection 配置 中使用 components.edit.SaveDraftButton 属性，或在 Global 配置 中使用 components.elements.SaveDraftButton：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      edit: {
        // highlight-start
        SaveDraftButton: '/path/to/MySaveDraftButton',
        // highlight-end
      },
    },
  },
}

以下是自定义 SaveDraftButton 组件的示例：

服务器组件

import React from 'react'
import { SaveDraftButton } from '@payloadcms/ui'
import type { SaveDraftButtonServerProps } from 'payload'

export function MySaveDraftButton(props: SaveDraftButtonServerProps) {
  return <SaveDraftButton />
}

客户端组件

'use client'
import React from 'react'
import { SaveDraftButton } from '@payloadcms/ui'
import type { SaveDraftButtonClientProps } from 'payload'

export function MySaveDraftButton(props: SaveDraftButtonClientProps) {
  return <SaveDraftButton />
}

PublishButton

PublishButton 属性允许你在编辑视图中渲染自定义的发布按钮。

要添加 PublishButton 组件，可以在 Collection 配置 中使用 components.edit.PublishButton 属性，或在 Global 配置 中使用 components.elements.PublishButton：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      edit: {
        // highlight-start
        PublishButton: '/path/to/MyPublishButton',
        // highlight-end
      },
    },
  },
}

以下是自定义 PublishButton 组件的示例：

服务器组件

import React from 'react'
import { PublishButton } from '@payloadcms/ui'
import type { PublishButtonClientProps } from 'payload'

export function MyPublishButton(props: PublishButtonServerProps) {
  return <PublishButton label="发布" />
}

客户端组件

'use client'
import React from 'react'
import { PublishButton } from '@payloadcms/ui'
import type { PublishButtonClientProps } from 'payload'

export function MyPublishButton(props: PublishButtonClientProps) {
  return <PublishButton label="发布" />
}

PreviewButton

PreviewButton 属性允许你在编辑视图中渲染自定义的预览按钮。

要添加 PreviewButton 组件，可以在 Collection Config 中使用 components.edit.PreviewButton 属性，或在 Global Config 中使用 components.elements.PreviewButton：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      edit: {
        // highlight-start
        PreviewButton: '/path/to/MyPreviewButton',
        // highlight-end
      },
    },
  },
}

以下是自定义 PreviewButton 组件的示例：

服务端组件

import React from 'react'
import { PreviewButton } from '@payloadcms/ui'
import type { PreviewButtonServerProps } from 'payload'

export function MyPreviewButton(props: PreviewButtonServerProps) {
  return <PreviewButton />
}

客户端组件

'use client'
import React from 'react'
import { PreviewButton } from '@payloadcms/ui'
import type { PreviewButtonClientProps } from 'payload'

export function MyPreviewButton(props: PreviewButtonClientProps) {
  return <PreviewButton />
}

描述

Description 属性允许你在编辑视图中自定义 Collection 或 Global 的描述显示。

要添加 Description 组件，可以在 Collection 配置 中使用 components.edit.Description 属性，或在 Global 配置 中使用 components.elements.Description：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      // highlight-start
      Description: '/path/to/MyDescriptionComponent',
      // highlight-end
    },
  },
}

注意： Description 组件在编辑视图和 列表视图 之间是共享的。

以下是自定义 Description 组件的示例：

服务端组件

import React from 'react'
import type { ViewDescriptionServerProps } from 'payload'

export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
  return <div>这是一个自定义描述组件（服务端）</div>
}

客户端组件

'use client'
import React from 'react'
import type { ViewDescriptionClientProps } from 'payload'

export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
  return <div>这是一个自定义描述组件（客户端）</div>
}

上传组件

Upload 属性允许你在编辑视图中渲染自定义的文件上传组件。

要添加 Upload 组件，可以在 Collection Config 中使用 components.edit.Upload 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  // ...
  admin: {
    components: {
      edit: {
        // highlight-start
        Upload: '/path/to/MyUploadComponent',
        // highlight-end
      },
    },
  },
}

注意： Upload 组件仅适用于 Collections。

以下是自定义 Upload 组件的示例：

import React from 'react'

export function MyUploadComponent() {
  return <input type="file" />
}