dekun/zhimingge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Narrow desktop layout margins and fix taiji icon in light mode.

Browse Source 
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>
This commit is contained in:
dekun
2026-06-11 00:04:10 +08:00
parent 04c77dbf77
commit 18dd2e3501
5 changed files with 47 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+4 -3
View File
@@ -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">
融合周易智慧与人工智能
components/layout/mode-workspace.tsx
+2 -2
View File
@@ -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}
components/layout/taiji-backdrop.tsx
+5 -5
View File
@@ -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>
);
}
components/svg/taiji.tsx
+26 -13
View File
@@ -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>
);
}
lib/layout.ts
+10 -3
View File
@@ -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`;