41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
"use client";
|
||
|
||
import dynamic from "next/dynamic";
|
||
import type { Block } from "@/types/page";
|
||
import TextBlockView from "@/components/blocks/TextBlock";
|
||
import HeroBlockView from "@/components/blocks/HeroBlock";
|
||
import SettingsBlockView from "@/components/blocks/SettingsBlock";
|
||
|
||
// 客户端大组件按需加载（减少首屏 JS）
|
||
const ChartBlockView = dynamic(() => import("@/components/blocks/ChartBlock"), {
|
||
ssr: false, // 图表多数只在浏览器渲染
|
||
loading: () => (
|
||
<div className="w-full h-80 rounded-xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800 flex items-center justify-center">
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">图表加载中…</div>
|
||
</div>
|
||
),
|
||
});
|
||
|
||
export function RenderBlock({ block }: { block: Block }) {
|
||
switch (block.__typename) {
|
||
case "TextBlockType":
|
||
return <TextBlockView {...block} />;
|
||
|
||
case "ChartBlockType":
|
||
return <ChartBlockView {...block} />;
|
||
|
||
case "SettingsBlockType":
|
||
return <SettingsBlockView {...block} />;
|
||
|
||
case "HeroBlockType":
|
||
return <HeroBlockView {...block} />;
|
||
|
||
default:
|
||
console.warn(`未知块类型：${(block as any).__typename ?? "Unknown"}`, block);
|
||
return (
|
||
<div className="w-full p-4 text-center text-xs text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
|
||
未知块类型：{(block as any).__typename ?? "Unknown"}
|
||
</div>
|
||
);
|
||
}
|
||
}
|