From 4ca3ef96b9c965f2e8a4d3ceeab5cd80cb73a2f5 Mon Sep 17 00:00:00 2001
From: afei A <57030625+NewHubBoy@users.noreply.github.com>
Date: Sat, 28 Mar 2026 00:14:00 +0800
Subject: [PATCH] feat: tighten dashboard shell density

---
 app/globals.css                           |  4 ++++
 src/components/layout/dashboard-shell.tsx | 20 ++++++++++----------
 src/components/ui/page-header.tsx         | 14 +++++++-------
 tests/ui/dashboard-shell.test.tsx         |  9 +++++++++
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 823b486..53f3b85 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 :root {
+  --app-bg: #f6f1e8;
   --bg-canvas: #f6f1e8;
   --bg-canvas-strong: #efe5d7;
   --bg-elevated: rgba(255, 250, 243, 0.86);
@@ -23,6 +24,9 @@
   --border-strong: rgba(82, 71, 57, 0.24);
   --shadow-shell: 0 28px 80px rgba(47, 38, 28, 0.12);
   --shadow-card: 0 18px 40px rgba(62, 46, 27, 0.08);
+  --page-gap: 16px;
+  --panel-radius: 14px;
+  --control-height: 38px;
   --font-sans:
     "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
     sans-serif;
diff --git a/src/components/layout/dashboard-shell.tsx b/src/components/layout/dashboard-shell.tsx
index 590c7fa..228e2ff 100644
--- a/src/components/layout/dashboard-shell.tsx
+++ b/src/components/layout/dashboard-shell.tsx
@@ -9,38 +9,38 @@ type DashboardShellProps = {
 
 export function DashboardShell({ children }: DashboardShellProps) {
   return (
-    <div className="min-h-screen bg-transparent px-4 py-5 text-[var(--ink)] md:h-screen md:overflow-hidden md:px-6 md:py-6">
-      <div className="mx-auto grid max-w-7xl gap-4 rounded-[32px] border border-[var(--border-soft)] bg-[var(--bg-elevated)] p-3 shadow-[var(--shadow-shell)] backdrop-blur md:h-full md:grid-cols-[280px_minmax(0,1fr)] md:p-4">
+    <div className="min-h-screen bg-transparent px-3 py-3 text-[var(--ink)] md:h-screen md:overflow-hidden md:px-4 md:py-4">
+      <div className="grid min-h-[calc(100vh-1.5rem)] gap-3 rounded-[18px] border border-[var(--border-soft)] bg-[var(--bg-elevated)] p-2 shadow-[var(--shadow-shell)] backdrop-blur md:h-full md:min-h-0 md:grid-cols-[228px_minmax(0,1fr)] md:p-3">
         <aside
           aria-label="Dashboard rail"
-          className="flex rounded-[28px] border border-[var(--shell-border)] bg-[var(--shell)] p-6 text-white md:h-full"
+          className="flex rounded-[16px] border border-[var(--shell-border)] bg-[var(--shell)] p-4 text-white md:h-full md:w-[228px]"
         >
           <div className="flex min-h-full w-full flex-col">
             <div>
               <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.3em] text-white/48">
                 Auto Tryon Ops
               </p>
-              <h1 className="mt-4 text-2xl font-semibold tracking-[-0.03em] text-white">
+              <h1 className="mt-3 text-xl font-semibold tracking-[-0.03em] text-white">
                 运营控制台
               </h1>
-              <p className="mt-3 max-w-[18rem] text-sm leading-6 text-white/66">
+              <p className="mt-2 max-w-[15rem] text-sm leading-6 text-white/66">
                 保持订单、审核与流程追踪在同一套高密度暖色界面里完成。
               </p>
             </div>
 
-            <nav className="mt-8 space-y-1" aria-label="Primary Navigation">
+            <nav className="mt-6 space-y-1" aria-label="Primary Navigation">
               {primaryNavItems.map((item) => (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className="flex items-center justify-between rounded-[18px] border border-transparent px-3.5 py-3 text-sm text-white/80 transition hover:border-white/8 hover:bg-white/7 hover:text-white"
+                  className="flex items-center justify-between rounded-[12px] border border-transparent px-3 py-2.5 text-sm text-white/80 transition hover:border-white/8 hover:bg-white/7 hover:text-white"
                 >
                   <span>{item.label}</span>
                 </Link>
               ))}
             </nav>
 
-            <div className="mt-auto rounded-[24px] border border-white/8 bg-white/6 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
+            <div className="mt-auto rounded-[14px] border border-white/8 bg-white/6 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
               <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-white/44">
                 Shared shell
               </p>
@@ -52,9 +52,9 @@ export function DashboardShell({ children }: DashboardShellProps) {
         </aside>
         <main
           aria-label="Dashboard content"
-          className="overflow-hidden rounded-[28px] border border-[var(--border-soft)] bg-[var(--surface)] shadow-[inset_0_1px_0_rgba(255,255,255,0.32)] md:h-full md:min-h-0 md:overflow-y-auto"
+          className="overflow-hidden rounded-[16px] border border-[var(--border-soft)] bg-[var(--surface)] shadow-[inset_0_1px_0_rgba(255,255,255,0.32)] md:h-full md:min-h-0 md:overflow-y-auto"
         >
-          <div className="px-5 py-6 md:px-8 md:py-8">{children}</div>
+          <div className="px-4 py-5 md:px-6 md:py-6">{children}</div>
         </main>
       </div>
     </div>
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index bd6ecf0..36ec098 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -16,24 +16,24 @@ export function PageHeader({
   title,
 }: PageHeaderProps) {
   return (
-    <div className="flex flex-col gap-5 border-b border-[var(--border-soft)] pb-6 md:flex-row md:items-end md:justify-between">
-      <div className="space-y-3">
-        <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.26em] text-[var(--ink-faint)]">
+    <div className="flex flex-col gap-4 border-b border-[var(--border-soft)] pb-4 md:flex-row md:items-start md:justify-between">
+      <div className="space-y-2">
+        <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-[var(--ink-faint)]">
           {eyebrow}
         </p>
-        <div className="space-y-2">
-          <h1 className="text-3xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
             {title}
           </h1>
           {description ? (
-            <div className="max-w-3xl text-sm leading-7 text-[var(--ink-muted)]">
+            <div className="max-w-3xl text-sm leading-6 text-[var(--ink-muted)]">
               {description}
             </div>
           ) : null}
         </div>
       </div>
       {actions || meta ? (
-        <div className="flex flex-col gap-3 md:items-end">
+        <div className="flex flex-col gap-2 md:items-end">
           {meta ? (
             <div className="font-[var(--font-mono)] text-xs uppercase tracking-[0.18em] text-[var(--ink-faint)]">
               {meta}
diff --git a/tests/ui/dashboard-shell.test.tsx b/tests/ui/dashboard-shell.test.tsx
index 444cb87..fa6ef44 100644
--- a/tests/ui/dashboard-shell.test.tsx
+++ b/tests/ui/dashboard-shell.test.tsx
@@ -68,6 +68,15 @@ test("locks the rail to the viewport and makes the content pane independently sc
   expect(main).toHaveClass("md:h-full", "md:overflow-y-auto");
 });
 
+test("uses a narrow desktop rail and removes the max-width shell cap", () => {
+  const { container } = render(<DashboardShell>dashboard body</DashboardShell>);
+  const shellFrame = container.firstElementChild;
+  const rail = screen.getByRole("complementary", { name: "Dashboard rail" });
+
+  expect(shellFrame).not.toHaveClass("max-w-7xl");
+  expect(rail.className).toContain("md:w-[228px]");
+});
+
 test("redirects the root page to orders", () => {
   HomePage();