From 18dd2e35017010b725452726824dc783fd440186 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 11 Jun 2026 00:04:10 +0800
Subject: [PATCH] Narrow desktop layout margins and fix taiji icon in light
 mode.

Cap content width at 1152px with side margins on ultrawide screens, add stroke to taiji logo for light backgrounds, and shrink backdrop watermark.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/page.tsx                         |  7 ++---
 components/layout/mode-workspace.tsx |  4 +--
 components/layout/taiji-backdrop.tsx | 10 +++----
 components/svg/taiji.tsx             | 39 ++++++++++++++++++----------
 lib/layout.ts                        | 13 +++++++---
 5 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 0a8196b..72f3dbf 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,7 +2,8 @@ import Link from "next/link";
 import PageShell from "@/components/page-shell";
 import { BookOpen, BrainCircuit, Compass, Sparkles } from "lucide-react";
 import { ZenCard } from "@/components/ui/zen-card";
-import { APP_CONTAINER } from "@/lib/layout";
+import { HOME_CONTAINER } from "@/lib/layout";
+import { TaijiIcon } from "@/components/svg/taiji";
 
 const MODULES = [
   {
@@ -37,9 +38,9 @@ const MODULES = [
 
 export default function Home() {
   return (
-    <PageShell className={`${APP_CONTAINER} py-10 sm:py-14`}>
+    <PageShell className={`${HOME_CONTAINER} py-10 sm:py-14`}>
       <div className="mb-10 text-center">
-        <p className="text-4xl opacity-30">☯</p>
+        <TaijiIcon className="mx-auto h-12 w-12 opacity-80" />
         <h1 className="mt-2 text-3xl font-bold tracking-[0.2em]">知命阁</h1>
         <p className="mt-3 text-sm tracking-wide text-muted-foreground">
           融合周易智慧与人工智能
diff --git a/components/layout/mode-workspace.tsx b/components/layout/mode-workspace.tsx
index 8fa84fc..f2de4f4 100644
--- a/components/layout/mode-workspace.tsx
+++ b/components/layout/mode-workspace.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Sparkles } from "lucide-react";
-import { APP_CONTAINER } from "@/lib/layout";
+import { MODE_CONTAINER } from "@/lib/layout";
 
 export function ModeWorkspace({
   children,
@@ -13,7 +13,7 @@ export function ModeWorkspace({
   aiTitle?: string;
 }) {
   return (
-    <div className={`${APP_CONTAINER} py-6 lg:py-8`}>
+    <div className={`${MODE_CONTAINER} py-6 lg:py-8`}>
       <div className="grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
         <div className="grid h-full min-h-0 auto-rows-fr gap-5 lg:min-h-[calc(100vh-9rem)]">
           {children}
diff --git a/components/layout/taiji-backdrop.tsx b/components/layout/taiji-backdrop.tsx
index 44a07c5..653d15a 100644
--- a/components/layout/taiji-backdrop.tsx
+++ b/components/layout/taiji-backdrop.tsx
@@ -1,15 +1,15 @@
 import { TaijiWatermark } from "@/components/svg/taiji";
 
-/** 全页太极背景水印 */
+/** 全页太极背景水印（居中，不撑满超宽屏） */
 export default function TaijiBackdrop() {
   return (
     <div
       aria-hidden
-      className="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-background/80"
+      className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
     >
-      <TaijiWatermark className="absolute left-1/2 top-1/2 h-[min(95vmin,1200px)] w-[min(95vmin,1200px)] -translate-x-1/2 -translate-y-1/2 opacity-90" />
-      <TaijiWatermark className="absolute -right-[8%] top-[6%] h-[min(42vmin,520px)] w-[min(42vmin,520px)] opacity-45" />
-      <TaijiWatermark className="absolute -left-[10%] bottom-[4%] h-[min(38vmin,460px)] w-[min(38vmin,460px)] opacity-40" />
+      <TaijiWatermark className="absolute left-1/2 top-1/2 h-[min(72vmin,720px)] w-[min(72vmin,720px)] -translate-x-1/2 -translate-y-1/2" />
+      <TaijiWatermark className="absolute right-[8%] top-[10%] hidden h-[min(28vmin,320px)] w-[min(28vmin,320px)] opacity-60 lg:block" />
+      <TaijiWatermark className="absolute bottom-[8%] left-[8%] hidden h-[min(24vmin,280px)] w-[min(24vmin,280px)] opacity-50 lg:block" />
     </div>
   );
 }
diff --git a/components/svg/taiji.tsx b/components/svg/taiji.tsx
index 1cc73a7..755f5e0 100644
--- a/components/svg/taiji.tsx
+++ b/components/svg/taiji.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 
-const YANG = "fill-stone-100 dark:fill-stone-200";
-const YIN = "fill-stone-800 dark:fill-stone-900";
-
-/** 太极阴阳鱼图标（页眉 Logo） */
+/** 太极阴阳鱼图标（页眉 Logo）— 亮色模式描边保证阴阳分界可见 */
 export const TaijiIcon = React.memo(function TaijiIcon({
   className,
 }: {
@@ -14,16 +11,21 @@ export const TaijiIcon = React.memo(function TaijiIcon({
     <svg
       viewBox="0 0 64 64"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn("h-7 w-7 shrink-0 drop-shadow-sm", className)}
+      className={cn("h-7 w-7 shrink-0", className)}
       aria-hidden
     >
-      <circle cx="32" cy="32" r="30" className={YANG} />
+      <circle
+        cx="32"
+        cy="32"
+        r="30"
+        className="fill-white stroke-stone-600 stroke-[1.5] dark:fill-stone-200 dark:stroke-stone-400"
+      />
       <path
         d="M32 2a30 30 0 0 1 0 60 15 15 0 0 1 0-30 15 15 0 0 0 0-30z"
-        className={YIN}
+        className="fill-stone-800 dark:fill-stone-900"
       />
-      <circle cx="32" cy="17" r="5" className={YANG} />
-      <circle cx="32" cy="47" r="5" className={YIN} />
+      <circle cx="32" cy="17" r="5" className="fill-white dark:fill-stone-200" />
+      <circle cx="32" cy="47" r="5" className="fill-stone-800 dark:fill-stone-900" />
     </svg>
   );
 });
@@ -41,13 +43,24 @@ export function TaijiWatermark({
       className={className}
       aria-hidden
     >
-      <circle cx="100" cy="100" r="98" className={`${YANG} opacity-[0.35]`} />
+      <circle
+        cx="100"
+        cy="100"
+        r="98"
+        className="fill-none stroke-stone-400/30 stroke-[0.75] dark:stroke-stone-500/25"
+      />
+      <circle
+        cx="100"
+        cy="100"
+        r="98"
+        className="fill-white/40 dark:fill-stone-200/10"
+      />
       <path
         d="M100 2a98 98 0 0 1 0 196 49 49 0 0 1 0-98 49 49 0 0 0 0-98z"
-        className={`${YIN} opacity-[0.08] dark:opacity-[0.12]`}
+        className="fill-stone-600/10 dark:fill-stone-300/12"
       />
-      <circle cx="100" cy="51" r="10" className={`${YANG} opacity-50`} />
-      <circle cx="100" cy="149" r="10" className={`${YIN} opacity-20 dark:opacity-30`} />
+      <circle cx="100" cy="51" r="10" className="fill-white/60 dark:fill-stone-200/20" />
+      <circle cx="100" cy="149" r="10" className="fill-stone-600/15 dark:fill-stone-300/20" />
     </svg>
   );
 }
diff --git a/lib/layout.ts b/lib/layout.ts
index 69b4ab9..b3f764f 100644
--- a/lib/layout.ts
+++ b/lib/layout.ts
@@ -1,3 +1,10 @@
-/** 全站内容区宽度：手机满宽，带鱼屏最大约 1920px 并留边距 */
-export const APP_CONTAINER =
-  "mx-auto w-full max-w-[min(100%,1920px)] px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16";
+const CENTER = "mx-auto w-full px-4 sm:px-6 lg:px-8";
+
+/** 页眉 / 页脚 / 学习 / 测算页标题 — 居中留白，最大约 1152px */
+export const APP_CONTAINER = `${CENTER} max-w-6xl`;
+
+/** 首页单列 — 更窄一些 */
+export const HOME_CONTAINER = `${CENTER} max-w-4xl`;
+
+/** 双栏测算工作区 — 与全站同宽，避免带鱼屏拉满 */
+export const MODE_CONTAINER = `${CENTER} max-w-6xl xl:px-10`;