From 58dc001146957637eb12d65b53fe3dbe3947474d Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Sun, 26 Apr 2026 01:53:15 +0800
Subject: [PATCH] feat(ui): unify content shell layout

---
 app/(account)/layout.tsx             |  6 +++---
 app/(account)/notifications/page.tsx |  2 +-
 app/(account)/settings/page.tsx      |  2 +-
 app/(account)/verify/page.tsx        |  2 +-
 app/(account)/wallet/page.tsx        |  2 +-
 app/(dashboard)/layout.tsx           |  4 ++--
 app/(main)/layout.tsx                |  2 +-
 app/(order)/chat/[id]/page.tsx       |  2 +-
 app/(order)/dispute/[id]/page.tsx    | 10 +++++-----
 app/(order)/layout.tsx               |  6 ++----
 app/(order)/order/[id]/page.tsx      |  2 +-
 app/(order)/order/new/page.tsx       |  6 +++---
 app/(order)/orders/page.tsx          |  8 ++++----
 app/(order)/review/[id]/page.tsx     | 12 ++++++------
 components/account-sidebar.tsx       |  2 +-
 components/dashboard-sidebar.tsx     | 13 +++++++++----
 16 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/app/(account)/layout.tsx b/app/(account)/layout.tsx
index 12fc92e..85ec160 100644
--- a/app/(account)/layout.tsx
+++ b/app/(account)/layout.tsx
@@ -4,13 +4,13 @@ import { Header } from "@/components/header"
 
 export default function AccountLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col bg-muted/20">
       <Header />
-      <div className="container mx-auto flex flex-1 px-4">
+      <div className="mx-auto flex w-full max-w-5xl flex-1 px-4">
         <div className="hidden md:block">
           <AccountSidebar />
         </div>
-        <main className="flex-1 p-6">
+        <main className="flex-1 py-8 md:px-6">
           <AuthGuard>{children}</AuthGuard>
         </main>
       </div>
diff --git a/app/(account)/notifications/page.tsx b/app/(account)/notifications/page.tsx
index 4638645..7ef277e 100644
--- a/app/(account)/notifications/page.tsx
+++ b/app/(account)/notifications/page.tsx
@@ -223,7 +223,7 @@ export default function NotificationsPage() {
   )
 
   return (
-    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
+    <div className="mx-auto max-w-2xl space-y-6">
       <div className="flex items-center justify-between pb-2 border-b border-border/40">
         <div className="flex items-center gap-3">
           <h1 className="text-2xl font-bold tracking-tight">通知中心</h1>
diff --git a/app/(account)/settings/page.tsx b/app/(account)/settings/page.tsx
index 2b48d7d..05e414c 100644
--- a/app/(account)/settings/page.tsx
+++ b/app/(account)/settings/page.tsx
@@ -94,7 +94,7 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
+    <div className="mx-auto max-w-2xl space-y-6">
       <h1 className="text-2xl font-bold">个人设置</h1>
 
       <Card>
diff --git a/app/(account)/verify/page.tsx b/app/(account)/verify/page.tsx
index bf0b2db..07197ab 100644
--- a/app/(account)/verify/page.tsx
+++ b/app/(account)/verify/page.tsx
@@ -156,7 +156,7 @@ export default function VerifyPage() {
   }
 
   return (
-    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-8">
+    <div className="mx-auto max-w-2xl space-y-8">
       <h1 className="text-2xl font-bold">身份认证</h1>
 
       <section className="space-y-4">
diff --git a/app/(account)/wallet/page.tsx b/app/(account)/wallet/page.tsx
index 95e87cc..8daecc3 100644
--- a/app/(account)/wallet/page.tsx
+++ b/app/(account)/wallet/page.tsx
@@ -202,7 +202,7 @@ export default function WalletPage() {
   }
 
   return (
-    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
+    <div className="mx-auto max-w-2xl space-y-6">
       <h1 className="text-2xl font-bold">钱包</h1>
 
       <Card className="border-border/60 shadow-sm">
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 398031a..a01d573 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -7,9 +7,9 @@ import { RoleGuard } from "@/components/role-guard"
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col bg-muted/20">
       <Header />
-      <div className="container mx-auto flex flex-1 px-4">
+      <div className="mx-auto flex w-full max-w-7xl flex-1 px-4">
         <div className="hidden md:block">
           <DashboardSidebar />
         </div>
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index b8d4708..2a4d846 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -3,7 +3,7 @@ import { Header } from "@/components/header"
 
 export default function MainLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col bg-muted/20">
       <Header />
       <main className="flex-1">{children}</main>
       <Footer />
diff --git a/app/(order)/chat/[id]/page.tsx b/app/(order)/chat/[id]/page.tsx
index ad98c7a..2bdd69c 100644
--- a/app/(order)/chat/[id]/page.tsx
+++ b/app/(order)/chat/[id]/page.tsx
@@ -103,7 +103,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
   const other = session.participants.find((p) => p.id !== userId) ?? session.participants[0]
 
   return (
-    <div className="container mx-auto max-w-3xl px-4 py-8 h-[calc(100vh-3.5rem)] flex flex-col">
+    <div className="container mx-auto max-w-2xl px-4 py-8 h-[calc(100vh-3.5rem)] flex flex-col">
       <Card className="flex-1 flex flex-col overflow-hidden border-border/80 shadow-sm">
         <div className="border-b border-border/60 px-4 py-3 flex items-center gap-3 bg-background">
           <Link href="/chat" className="text-muted-foreground hover:text-foreground">
diff --git a/app/(order)/dispute/[id]/page.tsx b/app/(order)/dispute/[id]/page.tsx
index 42dc48f..d3dcbca 100644
--- a/app/(order)/dispute/[id]/page.tsx
+++ b/app/(order)/dispute/[id]/page.tsx
@@ -197,7 +197,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
   if (loading) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="争议加载中" icon={Clock} />
       </div>
     )
@@ -205,7 +205,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
   if (!order) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="订单不存在" description="无法找到对应订单。" icon={FileText} />
       </div>
     )
@@ -216,7 +216,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
   )
   if (!isParticipant) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState
           title="无法访问争议页面"
           description="仅该订单参与方可访问争议页面。"
@@ -474,7 +474,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
   if (showSubmitted) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState
           title="争议已提交，请等待平台处理"
           description={`平台将在约 ${Math.floor(DISPUTE_TO_RESOLVED_MS / 1000)} 秒内给出模拟处理结果。`}
@@ -490,7 +490,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
   }
 
   return (
-    <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-4">
       <Link
         href={`/order/${id}`}
         className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
diff --git a/app/(order)/layout.tsx b/app/(order)/layout.tsx
index a9f68a8..8d7421c 100644
--- a/app/(order)/layout.tsx
+++ b/app/(order)/layout.tsx
@@ -12,11 +12,9 @@ export default function OrderLayout({ children }: { children: React.ReactNode })
   )
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col bg-muted/20">
       <Header />
-      <main className="flex-1 bg-muted/30">
-        {shouldGuard ? <AuthGuard>{children}</AuthGuard> : children}
-      </main>
+      <main className="flex-1">{shouldGuard ? <AuthGuard>{children}</AuthGuard> : children}</main>
     </div>
   )
 }
diff --git a/app/(order)/order/[id]/page.tsx b/app/(order)/order/[id]/page.tsx
index f1f65ff..ee0f49d 100644
--- a/app/(order)/order/[id]/page.tsx
+++ b/app/(order)/order/[id]/page.tsx
@@ -167,7 +167,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
   })()
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-3xl">
+    <div className="container mx-auto py-8 px-4 max-w-2xl">
       <Link
         href="/orders"
         className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
diff --git a/app/(order)/order/new/page.tsx b/app/(order)/order/new/page.tsx
index f6f5195..cddf217 100644
--- a/app/(order)/order/new/page.tsx
+++ b/app/(order)/order/new/page.tsx
@@ -95,7 +95,7 @@ export default function NewOrderPage() {
 
   if (loading) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="加载中" description="正在读取服务信息..." icon={CreditCard} />
       </div>
     )
@@ -103,7 +103,7 @@ export default function NewOrderPage() {
 
   if (!service || !player) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="服务不存在" description="该服务可能已下架或暂不可访问。" />
       </div>
     )
@@ -113,7 +113,7 @@ export default function NewOrderPage() {
 
   if (submitted) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState
           title="下单成功"
           description="订单已创建，等待打手接单。你可以在订单列表中查看进度。"
diff --git a/app/(order)/orders/page.tsx b/app/(order)/orders/page.tsx
index 358611c..c1cabbf 100644
--- a/app/(order)/orders/page.tsx
+++ b/app/(order)/orders/page.tsx
@@ -75,7 +75,7 @@ export default function OrderListPage() {
 
   if (currentRole === "owner" && shopLoading) {
     return (
-      <div className="container mx-auto max-w-3xl px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="加载中" description="正在读取店铺订单视角..." icon={RefreshCw} />
       </div>
     )
@@ -83,7 +83,7 @@ export default function OrderListPage() {
 
   if (currentRole === "owner" && shopError) {
     return (
-      <div className="container mx-auto max-w-3xl px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="无法读取订单" description={shopError} icon={ClipboardList} />
       </div>
     )
@@ -175,7 +175,7 @@ function OrderListContent({
   })
 
   return (
-    <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">我的订单</h1>
         <Badge variant="outline" className="text-xs">
@@ -216,7 +216,7 @@ function OrderListContent({
               filtered.map((order) => (
                 <Card key={order.id} className="border-border/80 shadow-sm">
                   <CardHeader className="pb-3">
-                    <div className="flex items-center justify-between">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                       <CardTitle className="text-base">{order.service.title}</CardTitle>
                       <StatusBadge
                         status={statusVariants[order.status]}
diff --git a/app/(order)/review/[id]/page.tsx b/app/(order)/review/[id]/page.tsx
index eec15d5..4d5a69e 100644
--- a/app/(order)/review/[id]/page.tsx
+++ b/app/(order)/review/[id]/page.tsx
@@ -55,7 +55,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (loading) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="加载中" description="正在读取评价信息..." icon={Star} />
       </div>
     )
@@ -63,7 +63,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (!order) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState title="订单不存在" description="该订单可能已被删除或暂不可访问。" />
       </div>
     )
@@ -74,7 +74,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (order.status !== "pending_review") {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState
           title="当前阶段不可评价"
           description="仅待评价状态的订单可以提交评价。"
@@ -91,7 +91,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (hasSubmitted && !isRevealed) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState
           title="评价已提交"
           description="等待对方提交评价，双方都提交后将同时揭晓。"
@@ -108,7 +108,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (hasSubmitted && isRevealed) {
     return (
-      <div className="container mx-auto max-w-lg px-4 py-8">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
         <EmptyState
           title="评价已揭晓"
           description="双方评价已同步公开，可在订单详情查看。"
@@ -124,7 +124,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
   }
 
   return (
-    <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-4">
       <Link
         href={`/order/${id}`}
         className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
diff --git a/components/account-sidebar.tsx b/components/account-sidebar.tsx
index e3ee940..7bbf4cf 100644
--- a/components/account-sidebar.tsx
+++ b/components/account-sidebar.tsx
@@ -17,7 +17,7 @@ export function AccountSidebar() {
   const pathname = usePathname()
 
   return (
-    <aside className="w-56 shrink-0 border-r border-border/60">
+    <aside className="w-56 shrink-0 border-r border-border/60 bg-background/80">
       <div className="flex h-14 items-center border-b border-border/60 px-6 font-semibold">
         账号设置
       </div>
diff --git a/components/dashboard-sidebar.tsx b/components/dashboard-sidebar.tsx
index 902348d..28bc914 100644
--- a/components/dashboard-sidebar.tsx
+++ b/components/dashboard-sidebar.tsx
@@ -40,8 +40,8 @@ export function DashboardSidebar() {
   const links = currentRole === "owner" ? ownerLinks : playerLinks
 
   return (
-    <aside className="w-56 shrink-0 border-r bg-muted/30">
-      <div className="flex h-14 items-center gap-2 border-b px-4 font-semibold">
+    <aside className="w-56 shrink-0 border-r border-border/60 bg-background/80">
+      <div className="flex h-14 items-center gap-2 border-b border-border/60 px-4 font-semibold">
         <Gamepad2 className="h-4 w-4" />
         管理后台
       </div>
@@ -52,8 +52,13 @@ export function DashboardSidebar() {
           return (
             <Button
               key={link.href}
-              variant={isActive ? "secondary" : "ghost"}
-              className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
+              variant="ghost"
+              className={cn(
+                "h-10 w-full justify-start rounded-md border-l-2 transition-colors",
+                isActive
+                  ? "border-primary bg-primary/5 text-foreground font-medium"
+                  : "border-transparent text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+              )}
               asChild
             >
               <Link href={link.href}>