64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
function SkeletonBlocks() {
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="mx-auto h-9 max-w-lg rounded-lg bg-[var(--muted)] animate-pulse" />
|
||
<div className="mx-auto h-[min(40vh,280px)] w-full max-w-3xl rounded-2xl bg-[var(--muted)]/70 animate-pulse" />
|
||
<div className="flex flex-wrap justify-center gap-3">
|
||
<div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
|
||
<div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
|
||
</div>
|
||
<div className="mx-auto mt-8 max-w-2xl space-y-3">
|
||
<div className="h-4 w-full rounded bg-[var(--muted)] animate-pulse" />
|
||
<div className="h-4 w-[90%] rounded bg-[var(--muted)] animate-pulse" />
|
||
<div className="h-4 w-[75%] rounded bg-[var(--muted)] animate-pulse" />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type HomePageSkeletonProps = {
|
||
className?: string;
|
||
/** full：整页含顶栏；main：仅主内容区（已包在 VipLayout 内时用） */
|
||
variant?: "full" | "main";
|
||
};
|
||
|
||
/**
|
||
* 首页骨架（Server/Client 均可引用），保证首屏 HTML 即有可见结构，避免白屏。
|
||
*/
|
||
export function HomePageSkeleton({
|
||
className = "",
|
||
variant = "full",
|
||
}: HomePageSkeletonProps) {
|
||
const main = (
|
||
<main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-8 sm:px-6">
|
||
<SkeletonBlocks />
|
||
</main>
|
||
);
|
||
|
||
if (variant === "main") {
|
||
return (
|
||
<div
|
||
className={`min-h-[50vh] bg-[var(--background)] text-[var(--foreground)] ${className}`}
|
||
aria-busy="true"
|
||
aria-label="页面加载中"
|
||
>
|
||
{main}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className={`flex min-h-screen flex-col bg-[var(--background)] text-[var(--foreground)] ${className}`}
|
||
aria-busy="true"
|
||
aria-label="页面加载中"
|
||
>
|
||
<header className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3 sm:px-6">
|
||
<div className="h-7 w-28 rounded-md bg-[var(--muted)] animate-pulse" />
|
||
<div className="h-9 w-24 rounded-lg bg-[var(--muted)] animate-pulse" />
|
||
</header>
|
||
{main}
|
||
</div>
|
||
);
|
||
}
|