From d3e9ae972f18f029b235d3986180679b5c6adbee Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Sat, 11 Jul 2026 07:26:54 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=96=B0=E5=A2=9E=20PageContainer?=
 =?UTF-8?q?=20=E7=BB=9F=E4=B8=80=E9=A1=B5=E5=AE=B9=E5=99=A8=EF=BC=88P3-1?=
 =?UTF-8?q?=EF=BC=89+=20=E4=BD=9C=E5=93=81=E5=BA=93=E9=87=87=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/page.tsx                    |  5 ++--
 apps/web/components/ui/PageContainer.tsx | 30 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/ui/PageContainer.tsx

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 441d137..5c37b63 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -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>
   );
 }
diff --git a/apps/web/components/ui/PageContainer.tsx b/apps/web/components/ui/PageContainer.tsx
new file mode 100644
index 0000000..7440043
--- /dev/null
+++ b/apps/web/components/ui/PageContainer.tsx
@@ -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>
+  );
+}