Zhengen
4bbd6947da
- types/wagtail.ts 新增对应 6 个 Block 值类型接口及 StreamFieldBlock 联合类型分支 - 新建 6 个渲染组件：ProductCardGrid/Pricing/Timeline/Team/TechStack/Video，风格与既有 Block 一致 - BlockRenderer.tsx 映射表接入新组件，key 与后端 COMMON_BLOCKS 保持一致 - lint/build 均验证通过
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import type { ComponentType } from "react";
|
|
import Hero from "./hero/Hero";
|
|
import Stats from "./stats/Stats";
|
|
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 ProductCardGrid from "./product-card/ProductCardGrid";
|
|
import Pricing from "./pricing/Pricing";
|
|
import Timeline from "./timeline/Timeline";
|
|
import Team from "./team/Team";
|
|
import TechStack from "./tech-stack/TechStack";
|
|
import Video from "./video/Video";
|
|
import type { StreamFieldBlock } from "@/types/wagtail";
|
|
|
|
/**
|
|
* StreamField 类型 → 组件映射表。
|
|
* 必须与后端 apps/core/blocks.py 的 COMMON_BLOCKS 保持一致，
|
|
* 否则新增/重命名 Block 时前后端会出现字段不对齐问题
|
|
* (详见 documents/设计方案分析与完善版.md §2.6)。
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const components: Record<string, ComponentType<{ value: any }>> = {
|
|
hero: Hero,
|
|
stats: Stats,
|
|
feature_grid: FeatureGrid,
|
|
faq: FAQ,
|
|
cta: CTA,
|
|
logo_cloud: LogoCloud,
|
|
case_study: CaseStudyCard,
|
|
form: LeadForm,
|
|
product_card: ProductCardGrid,
|
|
pricing: Pricing,
|
|
timeline: Timeline,
|
|
team: Team,
|
|
tech_stack: TechStack,
|
|
video: Video,
|
|
};
|
|
|
|
export function BlockRenderer({ blocks }: { blocks: StreamFieldBlock[] }) {
|
|
return (
|
|
<>
|
|
{blocks?.map((block) => {
|
|
if (block.type === "richtext") {
|
|
return (
|
|
<div
|
|
key={block.id}
|
|
className="prose mx-auto max-w-3xl px-6 py-12"
|
|
dangerouslySetInnerHTML={{ __html: block.value }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const Component = components[block.type];
|
|
if (!Component) {
|
|
if (process.env.NODE_ENV === "development") {
|
|
console.warn(`未找到 Block 类型 "${block.type}" 对应的前端组件`);
|
|
}
|
|
return null;
|
|
}
|
|
return <Component key={block.id} value={block.value} />;
|
|
})}
|
|
</>
|
|
);
|
|
}
|