feat: add products/cases pages and lead-capture form block

- types: Product/CaseStudy page types, CaseStudyBlockValue, FormBlockValue
- services: product.service.ts, case.service.ts
- app/products, app/cases: list + detail pages
- blocks: CaseStudyCard, LeadForm (submits to /api/v1/custom/leads/)
- Header nav: add 产品/案例 links

app/cases/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { getCaseStudyBySlug } from "@/services/case.service";
+import { BlockRenderer } from "@/blocks/BlockRenderer";
+
+interface CaseStudyDetailPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: CaseStudyDetailPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const item = await getCaseStudyBySlug(slug).catch(() => null);
+  return { title: item?.title ?? "案例未找到" };
+}
+
+export default async function CaseStudyDetailPage({
+  params,
+}: CaseStudyDetailPageProps) {
+  const { slug } = await params;
+  const item = await getCaseStudyBySlug(slug).catch(() => null);
+
+  if (!item) {
+    notFound();
+  }
+
+  return (
+    <article className="mx-auto max-w-3xl px-6 py-24">
+      <h1 className="mb-2 text-4xl font-bold text-slate-900">{item.title}</h1>
+      <p className="mb-12 text-sm text-slate-500">
+        {item.client_name}
+        {item.industry ? ` · ${item.industry}` : ""}
+      </p>
+      <BlockRenderer blocks={item.body} />
+    </article>
+  );
+}

app/cases/page.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { getCaseStudyList } from "@/services/case.service";
+
+export const metadata: Metadata = {
+  title: "客户案例",
+};
+
+export default async function CaseStudyListPage() {
+  const caseStudies = await getCaseStudyList().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">
+        {caseStudies.map((item) => (
+          <li key={item.id} className="border-b border-slate-100 pb-6">
+            <Link
+              href={`/cases/${item.meta.slug}`}
+              className="text-2xl font-semibold text-slate-900 hover:text-primary"
+            >
+              {item.title}
+            </Link>
+            <p className="mt-1 text-sm text-slate-500">
+              {item.client_name}
+              {item.industry ? ` · ${item.industry}` : ""}
+            </p>
+            {item.summary && (
+              <p className="mt-2 text-slate-600">{item.summary}</p>
+            )}
+          </li>
+        ))}
+        {caseStudies.length === 0 && (
+          <p className="text-slate-500">暂无案例，或后端服务未连接。</p>
+        )}
+      </ul>
+    </div>
+  );
+}

app/products/[slug]/page.tsx

@@ -0,0 +1,39 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { getProductBySlug } from "@/services/product.service";
+import { BlockRenderer } from "@/blocks/BlockRenderer";
+
+interface ProductDetailPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: ProductDetailPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const product = await getProductBySlug(slug).catch(() => null);
+  return { title: product?.title ?? "产品未找到" };
+}
+
+export default async function ProductDetailPage({
+  params,
+}: ProductDetailPageProps) {
+  const { slug } = await params;
+  const product = await getProductBySlug(slug).catch(() => null);
+
+  if (!product) {
+    notFound();
+  }
+
+  return (
+    <article className="mx-auto max-w-3xl px-6 py-24">
+      <h1 className="mb-4 text-4xl font-bold text-slate-900">
+        {product.title}
+      </h1>
+      {product.summary && (
+        <p className="mb-12 text-lg text-slate-600">{product.summary}</p>
+      )}
+      <BlockRenderer blocks={product.body} />
+    </article>
+  );
+}

app/products/page.tsx

@@ -0,0 +1,35 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { getProductList } from "@/services/product.service";
+
+export const metadata: Metadata = {
+  title: "产品",
+};
+
+export default async function ProductListPage() {
+  const products = await getProductList().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">
+        {products.map((product) => (
+          <li key={product.id} className="border-b border-slate-100 pb-6">
+            <Link
+              href={`/products/${product.meta.slug}`}
+              className="text-2xl font-semibold text-slate-900 hover:text-primary"
+            >
+              {product.title}
+            </Link>
+            {product.summary && (
+              <p className="mt-2 text-slate-600">{product.summary}</p>
+            )}
+          </li>
+        ))}
+        {products.length === 0 && (
+          <p className="text-slate-500">暂无产品，或后端服务未连接。</p>
+        )}
+      </ul>
+    </div>
+  );
+}

blocks/BlockRenderer.tsx

@@ -5,10 +5,12 @@ import FeatureGrid from "./feature-grid/FeatureGrid";
 import FAQ from "./faq/FAQ";
 import CTA from "./cta/CTA";
 import LogoCloud from "./logo-cloud/LogoCloud";
+import CaseStudyCard from "./case-study/CaseStudyCard";
+import LeadForm from "./form/LeadForm";
 import type { StreamFieldBlock } from "@/types/wagtail";
 
 /**
- * StreamField type → 组件映射表。
+ * StreamField 类型 → 组件映射表。
  * 必须与后端 apps/core/blocks.py 的 COMMON_BLOCKS 保持一致，
  * 否则新增/重命名 Block 时前后端会出现字段不对齐问题
  * （详见 documents/设计方案分析与完善版.md §2.6）。
@@ -21,6 +23,8 @@ const components: Record<string, ComponentType<{ value: any }>> = {
   faq: FAQ,
   cta: CTA,
   logo_cloud: LogoCloud,
+  case_study: CaseStudyCard,
+  form: LeadForm,
 };
 
 export function BlockRenderer({ blocks }: { blocks: StreamFieldBlock[] }) {

blocks/case-study/CaseStudyCard.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import type { CaseStudyBlockValue } from "@/types/wagtail";
+
+export default function CaseStudyCard({ value }: { value: CaseStudyBlockValue }) {
+  if (!value.case_page) {
+    return null;
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-8">
+      <Link
+        href={value.case_page.meta.html_url ?? "#"}
+        className="block rounded-3xl border border-slate-100 p-8 shadow-sm transition hover:shadow-md"
+      >
+        <h3 className="text-xl font-semibold text-slate-900">
+          {value.case_page.title}
+        </h3>
+        {value.summary && (
+          <p className="mt-2 text-slate-600">{value.summary}</p>
+        )}
+      </Link>
+    </div>
+  );
+}

blocks/form/LeadForm.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import type { FormBlockValue } from "@/types/wagtail";
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+export default function LeadForm({ value }: { value: FormBlockValue }) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [status, setStatus] = useState<"idle" | "submitting" | "done" | "error">(
+    "idle",
+  );
+
+  const form = value.form;
+  if (!form) {
+    return null;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setStatus("submitting");
+    try {
+      const res = await fetch(`${API_BASE_URL}/api/v1/custom/leads/`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          form_id: form!.id,
+          data: values,
+          source_url: typeof window !== "undefined" ? window.location.href : "",
+        }),
+      });
+      if (!res.ok) throw new Error("submit failed");
+      setStatus("done");
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  if (status === "done") {
+    return (
+      <div className="mx-auto max-w-xl px-6 py-12 text-center text-slate-700">
+        {form.success_message}
+      </div>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="mx-auto max-w-xl space-y-4 px-6 py-12"
+    >
+      <h3 className="text-2xl font-semibold text-slate-900">{form.name}</h3>
+      {form.fields.map((field) => (
+        <div key={field.field_key}>
+          <label className="mb-1 block text-sm font-medium text-slate-700">
+            {field.label}
+            {field.required && <span className="text-red-500">*</span>}
+          </label>
+          {field.field_type === "textarea" ? (
+            <textarea
+              required={field.required}
+              className="w-full rounded-lg border border-slate-200 px-4 py-2"
+              rows={4}
+              onChange={(e) =>
+                setValues((v) => ({ ...v, [field.field_key]: e.target.value }))
+              }
+            />
+          ) : field.field_type === "select" ? (
+            <select
+              required={field.required}
+              className="w-full rounded-lg border border-slate-200 px-4 py-2"
+              onChange={(e) =>
+                setValues((v) => ({ ...v, [field.field_key]: e.target.value }))
+              }
+            >
+              <option value="">请选择</option>
+              {field.choices.map((choice) => (
+                <option key={choice} value={choice}>
+                  {choice}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              type={field.field_type}
+              required={field.required}
+              className="w-full rounded-lg border border-slate-200 px-4 py-2"
+              onChange={(e) =>
+                setValues((v) => ({ ...v, [field.field_key]: e.target.value }))
+              }
+            />
+          )}
+        </div>
+      ))}
+      <button
+        type="submit"
+        disabled={status === "submitting"}
+        className="w-full rounded-full bg-primary px-6 py-3 font-medium text-white disabled:opacity-50"
+      >
+        {status === "submitting" ? "提交中..." : form.submit_button_text}
+      </button>
+      {status === "error" && (
+        <p className="text-sm text-red-500">提交失败，请稍后重试。</p>
+      )}
+    </form>
+  );
+}

components/layout/Header.tsx

@@ -2,6 +2,8 @@ import Link from "next/link";
 
 const navItems = [
   { title: "首页", href: "/" },
+  { title: "产品", href: "/products" },
+  { title: "案例", href: "/cases" },
   { title: "博客", href: "/blog" },
 ];
 

services/case.service.ts

@@ -0,0 +1,26 @@
+import { fetchAPI } from "./api-client";
+import type {
+  CaseStudyPageDetail,
+  CaseStudyPageSummary,
+  WagtailListResponse,
+} from "@/types/wagtail";
+
+/** 获取客户案例列表（按发布时间倒序）。 */
+export async function getCaseStudyList(): Promise<CaseStudyPageSummary[]> {
+  const res = await fetchAPI<WagtailListResponse<CaseStudyPageSummary>>(
+    "/api/v2/pages/?type=cases.CaseStudyPage&fields=client_name,industry,published_at,summary&order=-published_at",
+    { tags: ["case-study-list"] },
+  );
+  return res.items;
+}
+
+/** 根据 slug 获取客户案例详情。 */
+export async function getCaseStudyBySlug(
+  slug: string,
+): Promise<CaseStudyPageDetail | null> {
+  const res = await fetchAPI<WagtailListResponse<CaseStudyPageDetail>>(
+    `/api/v2/pages/?type=cases.CaseStudyPage&slug=${encodeURIComponent(slug)}&fields=body,client_name,industry,published_at,summary&limit=1`,
+    { tags: [`case-study:${slug}`] },
+  );
+  return res.items[0] ?? null;
+}

services/product.service.ts

@@ -0,0 +1,26 @@
+import { fetchAPI } from "./api-client";
+import type {
+  ProductPageDetail,
+  ProductPageSummary,
+  WagtailListResponse,
+} from "@/types/wagtail";
+
+/** 获取产品列表。 */
+export async function getProductList(): Promise<ProductPageSummary[]> {
+  const res = await fetchAPI<WagtailListResponse<ProductPageSummary>>(
+    "/api/v2/pages/?type=products.ProductPage&fields=summary",
+    { tags: ["product-list"] },
+  );
+  return res.items;
+}
+
+/** 根据 slug 获取产品详情。 */
+export async function getProductBySlug(
+  slug: string,
+): Promise<ProductPageDetail | null> {
+  const res = await fetchAPI<WagtailListResponse<ProductPageDetail>>(
+    `/api/v2/pages/?type=products.ProductPage&slug=${encodeURIComponent(slug)}&fields=body,summary&limit=1`,
+    { tags: [`product:${slug}`] },
+  );
+  return res.items[0] ?? null;
+}

types/wagtail.ts

@@ -75,6 +75,34 @@ export interface LogoCloudBlockValue {
   logos: { url: string; title: string }[];
 }
 
+export interface CaseStudyBlockValue {
+  case_page: WagtailPageSummary | null;
+  summary?: string;
+}
+
+/** 与后端 apps/forms/models.py FIELD_TYPE_CHOICES 保持一致 */
+export type FormFieldType = "text" | "textarea" | "email" | "tel" | "select";
+
+export interface FormFieldDef {
+  label: string;
+  field_key: string;
+  field_type: FormFieldType;
+  required: boolean;
+  choices: string[];
+}
+
+export interface FormDefinitionValue {
+  id: number;
+  name: string;
+  submit_button_text: string;
+  success_message: string;
+  fields: FormFieldDef[];
+}
+
+export interface FormBlockValue {
+  form: FormDefinitionValue | null;
+}
+
 export type StreamFieldBlock =
   | { id: string; type: "hero"; value: HeroBlockValue }
   | { id: string; type: "stats"; value: StatsBlockValue }
@@ -82,6 +110,8 @@ export type StreamFieldBlock =
   | { id: string; type: "faq"; value: FAQBlockValue }
   | { id: string; type: "cta"; value: CTABlockValue }
   | { id: string; type: "logo_cloud"; value: LogoCloudBlockValue }
+  | { id: string; type: "case_study"; value: CaseStudyBlockValue }
+  | { id: string; type: "form"; value: FormBlockValue }
   | { id: string; type: "richtext"; value: string };
 
 export interface HomePageDetail extends WagtailPageSummary {
@@ -98,3 +128,22 @@ export interface BlogPageSummary extends WagtailPageSummary {
 export interface BlogPageDetail extends BlogPageSummary {
   body: StreamFieldBlock[];
 }
+
+export interface ProductPageSummary extends WagtailPageSummary {
+  summary?: string;
+}
+
+export interface ProductPageDetail extends ProductPageSummary {
+  body: StreamFieldBlock[];
+}
+
+export interface CaseStudyPageSummary extends WagtailPageSummary {
+  client_name: string;
+  industry?: string;
+  published_at?: string;
+  summary?: string;
+}
+
+export interface CaseStudyPageDetail extends CaseStudyPageSummary {
+  body: StreamFieldBlock[];
+}