文档视图

文档视图（Document Views）由多个独立视图组成，这些视图共同构成了单个 Collection 或 Global 文档的展示界面。所有文档视图都分别位于 /collections/:collectionSlug/:id 或 /globals/:globalSlug 路由下。

系统提供了一些默认的文档视图，例如 编辑视图 和 API 视图，但你也可以根据需要创建 全新的视图。所有文档视图共享相同的布局，并且可以根据需要添加基于标签页的导航。

要自定义文档视图，可以在 Collection Config 或 Global Config 中使用 admin.components.views.edit[key] 属性：

import type { CollectionConfig } from 'payload'

export const MyCollectionOrGlobalConfig: CollectionConfig = {
  // ...
  admin: {
    components: {
      views: {
        // highlight-start
        edit: {
          default: {
            Component: '/path/to/MyCustomEditView',
          },
          // 其他可选配置包括：
          // - root
          // - api
          // - versions
          // - version
          // - livePreview
          // - [key: string]
          // 详见下文
        },
        // highlight-end
      },
    },
  },
}

配置选项

以下选项可用：

PropertyDescription
rootRoot View 会覆盖所有其他嵌套视图和路由。设置此键时不会渲染任何文档控件或标签页。更多详情。
defaultDefault View 是编辑文档的主视图，在"编辑"标签页中渲染。更多详情。
versionsVersions View 用于浏览单个文档的版本历史，在"版本"标签页中渲染。更多详情。
versionVersion View 用于编辑文档的单个版本，在"版本"标签页中渲染。更多详情。
apiAPI View 用于显示给定文档的 REST API JSON 响应，在"API"标签页中渲染。
livePreviewLivePreview 视图用于显示实时预览界面，在"实时预览"标签页中渲染。更多详情。
[key]任何其他键都可以用来添加一个全新的 Document View。

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

文档根视图

文档根视图（Document Root）被挂载在文档的顶级路由上。设置此属性将完全接管整个文档视图布局，包括标题、文档标签页以及所有嵌套的文档视图（如编辑视图、API视图等）。

当设置文档根视图时，你需要负责渲染所有必要的组件和控件，因为系统不会渲染任何文档控件或标签页。如果只需要精确替换编辑视图，请使用 edit.default 键。

要覆盖文档根视图，可以在你的Collection配置或Global配置中使用 views.edit.root 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  slug: 'my-collection',
  admin: {
    components: {
      views: {
        edit: {
          // highlight-start
          root: {
            Component: '/path/to/MyCustomRootComponent', // highlight-line
          },
          // highlight-end
        },
      },
    },
  },
}

编辑视图

编辑视图（Edit View）是用户与单个Collection和Global文档交互的地方。在这里，用户可以查看、编辑和保存内容。编辑视图在 views.edit 对象中通过 default 属性进行配置。

有关自定义编辑视图的更多信息，请参阅编辑视图文档。

文档标签页

如果需要，可以为每个文档视图添加导航标签页。标签页具有高度可配置性，从简单的修改标签文本到完全替换整个组件，都可以按需调整。

要在文档视图中添加或自定义标签页，可以在 Collection Config 或 Global Config 中使用 views.edit.[key].tab 属性：

import type { CollectionConfig } from 'payload'

export const MyCollection: CollectionConfig = {
  slug: 'my-collection',
  admin: {
    components: {
      views: {
        edit: {
          myCustomTab: {
            Component: '/path/to/MyCustomTab',
            path: '/my-custom-tab',
            // highlight-start
            tab: {
              Component: '/path/to/MyCustomTabComponent',
            },
            // highlight-end
          },
          anotherCustomTab: {
            Component: '/path/to/AnotherCustomView',
            path: '/another-custom-view',
            // highlight-start
            tab: {
              label: '另一个自定义视图',
              href: '/another-custom-view',
            },
            // highlight-end
          },
        },
      },
    },
  },
}

注意： 此功能同时适用于 Collections 和 Globals。

标签页支持以下配置选项：

属性描述
label标签页上显示的文本
href点击标签页时跳转的 URL。可选，默认为标签页的 path
Component在标签页中渲染的组件。可以是服务端或客户端组件。更多详情

标签页组件

如果仅修改标签或 href 不能满足需求，你还可以用自定义组件完全替换整个标签页。这可以通过设置 tab.Component 属性为你的自定义组件路径来实现。

以下是创建自定义文档标签页的示例：

服务端组件

import React from 'react'
import type { DocumentTabServerProps } from 'payload'
import { Link } from '@payloadcms/ui'

export function MyCustomTabComponent(props: DocumentTabServerProps) {
  return (
    <Link href="/my-custom-tab">这是一个自定义文档标签页（服务端）</Link>
  )
}

客户端组件

'use client'
import React from 'react'
import type { DocumentTabClientProps } from 'payload'
import { Link } from '@payloadcms/ui'

export function MyCustomTabComponent(props: DocumentTabClientProps) {
  return (
    <Link href="/my-custom-tab">这是一个自定义文档标签页（客户端）</Link>
  )
}