From 1d887a7a10c3d7f261eb6d99535740fcf6d46c0c Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 11 Jun 2026 00:46:39 +0800
Subject: [PATCH] Add responsive content width for ultrawide while keeping
 1080p layout.

Scale from 896px on 1080p up to 1440px on 3440px screens via viewport breakpoints in site-width.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/footer.tsx           |  5 ++++-
 components/header.tsx           |  7 ++-----
 components/layout/site-width.ts | 18 ++++++++++++++++++
 components/page-shell.tsx       |  8 ++++----
 tailwind.config.ts              | 17 ++++++++++++++++-
 5 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 components/layout/site-width.ts

diff --git a/components/footer.tsx b/components/footer.tsx
index 2c44891..17fc603 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { VERSION } from "@/lib/constant";
+import { SITE_WIDTH_INNER } from "@/components/layout/site-width";
 
 function Footer() {
   return (
     <footer className="relative z-10 flex items-center justify-center gap-1 border-t border-border/40 bg-card/70 py-4 text-xs text-muted-foreground/80">
-      <div className="mx-auto flex w-full max-w-4xl items-center justify-center gap-1 px-4 sm:px-6 lg:px-8">
+      <div
+        className={`${SITE_WIDTH_INNER} flex items-center justify-center gap-1`}
+      >
         <span className="italic">心诚则灵</span>
         <span className="text-muted-foreground/60">·</span>
         <span>知命阁 v{VERSION}</span>
diff --git a/components/header.tsx b/components/header.tsx
index 1b18879..5b23210 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -3,10 +3,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { TaijiIcon } from "@/components/svg/taiji";
 import { ModeToggle } from "@/components/mode-toggle";
-
-/** 与 PageShell 同宽 — 类名须完整书写供 Tailwind 扫描 */
-const HEADER_INNER =
-  "mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8";
+import { SITE_WIDTH_INNER } from "@/components/layout/site-width";
 
 const NAV_ITEMS = [
   { href: "/learn", label: "易经学习" },
@@ -40,7 +37,7 @@ export default function Header() {
   return (
     <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
       <div
-        className={`${HEADER_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
+        className={`${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
       >
         <Link href="/" className="flex items-center gap-2">
           <TaijiIcon />
diff --git a/components/layout/site-width.ts b/components/layout/site-width.ts
new file mode 100644
index 0000000..0014612
--- /dev/null
+++ b/components/layout/site-width.ts
@@ -0,0 +1,18 @@
+/**
+ * 响应式内容宽度（类名须完整书写，供 Tailwind 扫描）
+ * - ≤1920px（1080p）：约 896px
+ * - 1921px+（超宽入门）：约 1152px
+ * - 2560px+（带鱼屏）：约 1280px
+ * - 3440px+（超宽带鱼）：约 1440px
+ */
+export const SITE_PAD = "px-4 sm:px-6 lg:px-8";
+
+export const SITE_WIDTH =
+  `w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
+
+export const SITE_WIDTH_NARROW =
+  `w-full max-w-3xl ${SITE_PAD} min-[1921px]:max-w-4xl min-[2560px]:max-w-5xl min-[3440px]:max-w-6xl`;
+
+/** 页眉 / 页脚内层，与主内容同宽 */
+export const SITE_WIDTH_INNER =
+  `mx-auto w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
diff --git a/components/page-shell.tsx b/components/page-shell.tsx
index 840dd5e..180cc4b 100644
--- a/components/page-shell.tsx
+++ b/components/page-shell.tsx
@@ -1,13 +1,13 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import TaijiBackdrop from "@/components/layout/taiji-backdrop";
+import { SITE_WIDTH, SITE_WIDTH_NARROW } from "@/components/layout/site-width";
 import { cn } from "@/lib/utils";
 
-/** 必须在组件内写完整类名，Tailwind 才能生成对应 CSS */
 const SHELL_WIDTH = {
-  default: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
-  narrow: "w-full max-w-3xl px-4 sm:px-6 lg:px-8",
-  wide: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
+  default: SITE_WIDTH,
+  narrow: SITE_WIDTH_NARROW,
+  wide: SITE_WIDTH,
 } as const;
 
 export type ContentShellWidth = keyof typeof SHELL_WIDTH;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 94e70d0..638fad4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,22 @@ module.exports = {
     "./components/**/*.{ts,tsx}",
     "./lib/**/*.{ts,tsx}",
   ],
-  safelist: ["max-w-3xl", "max-w-4xl"],
+  safelist: [
+    "max-w-3xl",
+    "max-w-4xl",
+    "max-w-5xl",
+    "max-w-6xl",
+    "max-w-7xl",
+    "max-w-[1440px]",
+    "min-[1921px]:max-w-4xl",
+    "min-[1921px]:max-w-5xl",
+    "min-[1921px]:max-w-6xl",
+    "min-[2560px]:max-w-5xl",
+    "min-[2560px]:max-w-6xl",
+    "min-[2560px]:max-w-7xl",
+    "min-[3440px]:max-w-6xl",
+    "min-[3440px]:max-w-[1440px]",
+  ],
   theme: {
     container: {
       center: true,