客户端实时预览

npm install @payloadcms/live-preview-react

'use client'
import { useLivePreview } from '@payloadcms/live-preview-react'
import { Page as PageType } from '@/payload-types'

// 在服务端组件中获取页面数据，传递给客户端组件，再通过钩子传递
// 钩子将接管后续工作，保持预览与你的更改同步
// `data` 属性将包含文档的实时数据
export const PageClient: React.FC<{
  page: {
    title: string
  }
}> = ({ page: initialPage }) => {
  const { data } = useLivePreview<PageType>({
    initialData: initialPage,
    serverURL: PAYLOAD_SERVER_URL,
    depth: 2,
  })

  return <h1>{data.title}</h1>
}

npm install @payloadcms/live-preview-vue

<script setup lang="ts">
import type { PageData } from '~/types';
import { defineProps } from 'vue';
import { useLivePreview } from '@payloadcms/live-preview-vue';

// 在父组件中获取初始数据或使用异步状态
const props = defineProps<{ initialData: PageData }>();

// 该钩子会接管后续工作，保持预览与你的更改同步。
// 只有当从 Admin UI 的预览视图查看时，`data` 属性才会包含文档的实时数据。
const { data } = useLivePreview<PageData>({
  initialData: props.initialData,
  serverURL: "<PAYLOAD_SERVER_URL>",
  depth: 2,
});
</script>

<template>
  <h1>{{ data.title }}</h1>
</template>

npm install @payloadcms/live-preview

import { subscribe, unsubscribe } from '@payloadcms/live-preview'

// 构建自定义钩子时，使用 `subscribe` 函数订阅 Live Preview 事件
// 它处理了以下所有事项：
// 1. 监听 `window.postMessage` 事件
// 2. 合并初始数据和当前表单状态
// 3. 填充关系和上传内容
// 4. 调用 `onChange` 回调并传入结果
// 你的钩子还应该：
// 1. 通知 Admin Panel 何时准备好接收消息
// 2. 处理 `onChange` 回调结果来更新 UI
// 3. 在卸载时取消订阅 `window.postMessage` 事件

import { subscribe, unsubscribe, ready } from '@payloadcms/live-preview'
import { useCallback, useEffect, useState, useRef } from 'react'

export const useLivePreview = <T extends any>(props: {
  depth?: number
  initialData: T
  serverURL: string
}): {
  data: T
  isLoading: boolean
} => {
  const { depth = 0, initialData, serverURL } = props
  const [data, setData] = useState<T>(initialData)
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const hasSentReadyMessage = useRef<boolean>(false)

  const onChange = useCallback((mergedData) => {
    // 当变更发生时，`onChange` 回调会被调用并传入合并后的数据
    // 将合并数据存入状态以触发 React 重新渲染 UI
    setData(mergedData)
    setIsLoading(false)
  }, [])

  useEffect(() => {
    // 监听来自 Admin Panel 的 `window.postMessage` 事件
    // 当变更发生时，`onChange` 回调会被调用并传入合并后的数据
    const subscription = subscribe({
      callback: onChange,
      depth,
      initialData,
      serverURL,
    })

    // 订阅后，向 Admin Panel 发送 `ready` 消息
    // 这表示前端已准备好接收消息
    if (!hasSentReadyMessage.current) {
      hasSentReadyMessage.current = true

      ready({
        serverURL,
      })
    }

    // 组件卸载时取消订阅 `window.postMessage` 事件
    return () => {
      unsubscribe(subscription)
    }
  }, [serverURL, onChange, depth, initialData])

  return {
    data,
    isLoading,
  }
}

// payload.config.ts
{
  // ...
  // 如果你的站点运行在与 Payload 服务器不同的域名上，
  // 这将允许在两个域名之间发起请求
  cors: [
    'http://localhost:3001' // 你的前端应用
  ],
  // 如果你将资源保护在用户认证之后，
  // 这将允许在两个域名之间发送 cookies
  csrf: [
    'http://localhost:3001' // 你的前端应用
  ],
}

// 初始请求
const { docs } = await payload.find({
  collection: 'pages',
  depth: 1, // 确保设置为适合你应用的深度
  where: {
    slug: {
      equals: 'home',
    },
  },
})

// 钩子
const { data } = useLivePreview<PageType>({
  initialData: initialPage,
  serverURL: PAYLOAD_SERVER_URL,
  depth: 1, // 确保与初始请求的深度一致
})

frame-ancestors: "self" localhost:* https://your-site.com;