feat(ui): 新增 PageContainer 统一页容器(P3-1)+ 作品库采用

This commit is contained in:
Yaojia Wang
2026-07-11 07:26:54 +02:00
parent 83ba47ab8f
commit d3e9ae972f
2 changed files with 33 additions and 2 deletions

View File

@@ -5,6 +5,7 @@ import { AppShell } from "@/components/AppShell";
import { BackendDownNotice } from "@/components/BackendDownNotice";
import { ProjectLibrary } from "@/components/projects/ProjectLibrary";
import { EmptyState } from "@/components/ui/EmptyState";
import { PageContainer } from "@/components/ui/PageContainer";
import { PageHeader } from "@/components/ui/PageHeader";
import { fetchProjects } from "@/lib/api/server";
import type { ProjectResponse } from "@/lib/api/types";
@@ -23,7 +24,7 @@ export default async function DashboardPage() {
return (
<AppShell>
<div className="mx-auto max-w-5xl px-6 py-10 sm:px-8">
<PageContainer>
<PageHeader
title="我的作品"
description="从一个灵感进入正文、设定、审稿与验收闭环。"
@@ -76,7 +77,7 @@ export default async function DashboardPage() {
) : (
<ProjectLibrary projects={projects} />
)}
</div>
</PageContainer>
</AppShell>
);
}

View File

@@ -0,0 +1,30 @@
import type { ReactNode } from "react";
import { cn } from "@/lib/ui/variants";
export type PageWidth = "prose" | "default" | "wide";
const widths: Record<PageWidth, string> = {
prose: "max-w-3xl",
default: "max-w-5xl",
wide: "max-w-6xl",
};
interface PageContainerProps {
children: ReactNode;
width?: PageWidth;
className?: string;
}
// 统一页容器:居中 + 一致的最大宽度与内边距节奏(替换各页手写的 mx-auto max-w-* px-6 py-10
export function PageContainer({
children,
width = "default",
className,
}: PageContainerProps) {
return (
<div className={cn("mx-auto px-6 py-10 sm:px-8", widths[width], className)}>
{children}
</div>
);
}