feat: 接入预览模式（Next.js Draft Mode）

2026-08-07 15:34:59 +08:00
parent 1abadd04b8
commit 2457d5ec69
9 changed files with 203 additions and 6 deletions
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { draftMode } from "next/headers";
 import "./globals.css";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
@@ -16,11 +17,24 @@ export const metadata: Metadata = {
  description: "企业级 Headless CMS 驱动的现代化官网",
 };

-export default function RootLayout({ children }: LayoutProps<"/">) {
+export default async function RootLayout({ children }: LayoutProps<"/">) {
+  const { isEnabled: isPreview } = await draftMode();
+
  return (
    <html lang="zh-hans" className="h-full antialiased">
      <body className="min-h-full flex flex-col font-sans">
        <ReactQueryProvider>
+          {isPreview && (
+            <div className="flex items-center justify-center gap-4 bg-amber-400 px-4 py-2 text-sm font-medium text-amber-950">
+              <span>预览模式：当前显示的是未发布的草稿内容</span>
+              <a
+                href="/preview/disable"
+                className="underline underline-offset-2"
+              >
+                退出预览
+              </a>
+            </div>
+          )}
          <Header />
          <main className="flex-1">{children}</main>
          <Footer />