feat: scaffold headless frontend integration per design doc

2026-08-06 15:51:59 +08:00
parent b0919bf8b5
commit 7e30631c68
28 changed files with 708 additions and 126 deletions
@@ -0,0 +1,34 @@
+import { revalidateTag } from "next/cache";
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * 接收 Wagtail `page_published` signal 发出的发布通知，
+ * 对 fetch 缓存标签做精准失效（详见 documents/设计方案分析与完善版.md §2.7）。
+ *
+ * 后端调用示例（apps/core/signals.py）：
+ *   POST {FRONTEND_REVALIDATE_URL}
+ *   Headers: Authorization: Bearer {REVALIDATE_SECRET}
+ *   Body: { "tags": ["page:1", "/some/url/"] }
+ */
+export async function POST(request: NextRequest) {
+  const authHeader = request.headers.get("authorization");
+  const expected = `Bearer ${process.env.REVALIDATE_SECRET}`;
+
+  if (!process.env.REVALIDATE_SECRET || authHeader !== expected) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const body = await request.json().catch(() => null);
+  const tags: string[] = body?.tags ?? [];
+
+  if (!Array.isArray(tags) || tags.length === 0) {
+    return NextResponse.json({ error: "No tags provided" }, { status: 400 });
+  }
+
+  for (const tag of tags) {
+    // Next.js 16 要求传入 cache profile；"max" 表示立即使该标签下的缓存完全失效。
+    revalidateTag(tag, "max");
+  }
+
+  return NextResponse.json({ revalidated: tags });
+}
@@ -0,0 +1,35 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { getBlogBySlug } from "@/services/blog.service";
+import { BlockRenderer } from "@/blocks/BlockRenderer";
+
+interface BlogDetailPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: BlogDetailPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await getBlogBySlug(slug).catch(() => null);
+  return { title: post?.title ?? "文章未找到" };
+}
+
+export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
+  const { slug } = await params;
+  const post = await getBlogBySlug(slug).catch(() => null);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <article className="mx-auto max-w-3xl px-6 py-24">
+      <h1 className="mb-4 text-4xl font-bold text-slate-900">{post.title}</h1>
+      {post.published_at && (
+        <p className="mb-12 text-sm text-slate-500">{post.published_at}</p>
+      )}
+      <BlockRenderer blocks={post.body} />
+    </article>
+  );
+}
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { getBlogList } from "@/services/blog.service";
+
+export const metadata: Metadata = {
+  title: "技术博客",
+};
+
+export default async function BlogListPage() {
+  const posts = await getBlogList().catch(() => []);
+
+  return (
+    <div className="mx-auto max-w-4xl px-6 py-24">
+      <h1 className="mb-12 text-4xl font-bold text-slate-900">技术博客</h1>
+      <ul className="space-y-6">
+        {posts.map((post) => (
+          <li key={post.id} className="border-b border-slate-100 pb-6">
+            <Link
+              href={`/blog/${post.meta.slug}`}
+              className="text-2xl font-semibold text-slate-900 hover:text-primary"
+            >
+              {post.title}
+            </Link>
+            {post.intro && <p className="mt-2 text-slate-600">{post.intro}</p>}
+          </li>
+        ))}
+        {posts.length === 0 && (
+          <p className="text-slate-500">暂无文章，或后端服务未连接。</p>
+        )}
+      </ul>
+    </div>
+  );
+}
@@ -3,13 +3,18 @@
 :root {
  --background: #ffffff;
  --foreground: #171717;
+  /* 主色调，对应 documents/设计方案分析与完善版.md UI 风格约定 */
+  --color-primary: #2563eb;
+  --color-dark: #0f172a;
 }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-primary: var(--color-primary);
+  --color-dark: var(--color-dark);
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Microsoft YaHei", sans-serif;
 }

@media (prefers-color-scheme: dark) {
@@ -22,5 +27,4 @@
 body {
  background: var(--background);
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }
@@ -1,29 +1,30 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+import ReactQueryProvider from "@/providers/react-query-provider";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+// 面向中国大陆用户，避免依赖 next/font/google（构建期需访问 Google 服务器）。
+// 生产环境建议自托管思源黑体 / HarmonyOS Sans 子集，这里先用系统字体栈占位。

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: "企业官网",
+    template: "%s | 企业官网",
+  },
+  description: "企业级 Headless CMS 驱动的现代化官网",
 };

 export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="zh-hans" className="h-full antialiased">
+      <body className="min-h-full flex flex-col font-sans">
+        <ReactQueryProvider>
+          <Header />
+          <main className="flex-1">{children}</main>
+          <Footer />
+        </ReactQueryProvider>
+      </body>
    </html>
  );
 }
@@ -1,69 +1,27 @@
-import Image from "next/image";
+import type { Metadata } from "next";
+import { getHomePage } from "@/services/page.service";
+import { BlockRenderer } from "@/blocks/BlockRenderer";

-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+export const metadata: Metadata = {
+  title: "首页",
+};
+
+export default async function Home() {
+  const homePage = await getHomePage().catch(() => null);
+
+  if (!homePage) {
+    return (
+      <div className="mx-auto max-w-3xl px-6 py-32 text-center">
+        <h1 className="mb-4 text-3xl font-semibold text-slate-900">
+          尚未连接到 Wagtail CMS
+        </h1>
+        <p className="text-slate-600">
+          请确认后端服务已启动，并在 <code>.env.local</code> 中配置了{" "}
+          <code>NEXT_PUBLIC_API_URL</code>（默认 http://localhost:8000）。
+        </p>
+      </div>
+    );
+  }
+
+  return <BlockRenderer blocks={homePage.body} />;
 }