feat: tighten dashboard shell density

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;

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="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="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="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>

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="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-3">
+      <div className="space-y-2">
-        <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.26em] text-[var(--ink-faint)]">
+        <p className="font-[var(--font-mono)] text-[11px] uppercase tracking-[0.24em] text-[var(--ink-faint)]">
           {eyebrow}
         </p>
-        <div className="space-y-2">
+        <div className="space-y-1">
-          <h1 className="text-3xl font-semibold tracking-[-0.03em] text-[var(--ink-strong)]">
+          <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}

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();