feat(ui): 新增 PageContainer 统一页容器(P3-1)+ 作品库采用
This commit is contained in:
@@ -5,6 +5,7 @@ import { AppShell } from "@/components/AppShell";
|
|||||||
import { BackendDownNotice } from "@/components/BackendDownNotice";
|
import { BackendDownNotice } from "@/components/BackendDownNotice";
|
||||||
import { ProjectLibrary } from "@/components/projects/ProjectLibrary";
|
import { ProjectLibrary } from "@/components/projects/ProjectLibrary";
|
||||||
import { EmptyState } from "@/components/ui/EmptyState";
|
import { EmptyState } from "@/components/ui/EmptyState";
|
||||||
|
import { PageContainer } from "@/components/ui/PageContainer";
|
||||||
import { PageHeader } from "@/components/ui/PageHeader";
|
import { PageHeader } from "@/components/ui/PageHeader";
|
||||||
import { fetchProjects } from "@/lib/api/server";
|
import { fetchProjects } from "@/lib/api/server";
|
||||||
import type { ProjectResponse } from "@/lib/api/types";
|
import type { ProjectResponse } from "@/lib/api/types";
|
||||||
@@ -23,7 +24,7 @@ export default async function DashboardPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<AppShell>
|
<AppShell>
|
||||||
<div className="mx-auto max-w-5xl px-6 py-10 sm:px-8">
|
<PageContainer>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="我的作品"
|
title="我的作品"
|
||||||
description="从一个灵感进入正文、设定、审稿与验收闭环。"
|
description="从一个灵感进入正文、设定、审稿与验收闭环。"
|
||||||
@@ -76,7 +77,7 @@ export default async function DashboardPage() {
|
|||||||
) : (
|
) : (
|
||||||
<ProjectLibrary projects={projects} />
|
<ProjectLibrary projects={projects} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</PageContainer>
|
||||||
</AppShell>
|
</AppShell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
30
apps/web/components/ui/PageContainer.tsx
Normal file
30
apps/web/components/ui/PageContainer.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user