feat: 补全剩余 6 个 StreamField Block 前端渲染 (ProductCard/Pricing/Timeline/Team/TechStack/Video)

- types/wagtail.ts 新增对应 6 个 Block 值类型接口及 StreamFieldBlock 联合类型分支 - 新建 6 个渲染组件：ProductCardGrid/Pricing/Timeline/Team/TechStack/Video，风格与既有 Block 一致 - BlockRenderer.tsx 映射表接入新组件，key 与后端 COMMON_BLOCKS 保持一致 - lint/build 均验证通过
2026-08-07 15:59:08 +08:00
parent 2457d5ec69
commit 4bbd6947da
8 changed files with 314 additions and 1 deletions
@@ -0,0 +1,42 @@
+import type { VideoBlockValue } from "@/types/wagtail";
+
+const DIRECT_VIDEO_EXTENSIONS = [".mp4", ".webm", ".ogg"];
+
+export default function Video({ value }: { value: VideoBlockValue }) {
+  if (!value.video_url) {
+    return null;
+  }
+
+  const isDirectFile = DIRECT_VIDEO_EXTENSIONS.some((ext) =>
+    value.video_url.toLowerCase().includes(ext)
+  );
+
+  return (
+    <section className="py-24">
+      <div className="mx-auto max-w-5xl px-6">
+        {value.heading && (
+          <h2 className="mb-8 text-center text-4xl font-bold text-slate-900">
+            {value.heading}
+          </h2>
+        )}
+        <div className="overflow-hidden rounded-3xl bg-black shadow-lg">
+          {isDirectFile ? (
+            <video
+              src={value.video_url}
+              poster={value.poster?.url}
+              controls
+              className="aspect-video w-full"
+            />
+          ) : (
+            <iframe
+              src={value.video_url}
+              allow="autoplay; fullscreen"
+              allowFullScreen
+              className="aspect-video w-full"
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}