Redesign UI with zen cards, split AI panel, and PWA install support.

Learn uses 64-gua card grid; liuyao/bazi/combined use two input cards plus sticky right AI panel; add manifest, service worker, and install prompt.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/bazi/page.tsx

@@ -4,9 +4,9 @@ import BaziForm from "@/components/modes/bazi-form";
 export default function BaziPage() {
   return (
     <PageShell>
-      <div className="px-4 pt-6 text-center">
+      <div className="border-b border-border/40 px-4 py-6 text-center">
-        <h1 className="text-xl font-bold">生辰八字</h1>
+        <h1 className="text-2xl font-bold tracking-wide">生辰八字</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="mt-2 text-sm text-muted-foreground">
           四柱排盘 · 十神大运 · AI 命理解读
         </p>
       </div>

app/combined/page.tsx

@@ -4,9 +4,9 @@ import CombinedForm from "@/components/modes/combined-form";
 export default function CombinedPage() {
   return (
     <PageShell>
-      <div className="px-4 pt-6 text-center">
+      <div className="border-b border-border/40 px-4 py-6 text-center">
-        <h1 className="text-xl font-bold">综合测算</h1>
+        <h1 className="text-2xl font-bold tracking-wide">综合测算</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="mt-2 text-sm text-muted-foreground">
           天时 · 地利 · 人和 · 六爻可选
         </p>
       </div>

app/globals.css

@@ -72,7 +72,7 @@
   }
 
   body {
-    @apply gap flex flex-col bg-background text-foreground;
+    @apply gap flex flex-col bg-background text-foreground zen-bg;
   }
 
   body {
@@ -106,4 +106,20 @@
   ::-webkit-scrollbar-thumb {
     @apply rounded-md bg-border;
   }
+
+  .zen-bg {
+    background-image:
+      radial-gradient(ellipse 80% 50% at 50% -20%, hsl(40 20% 90% / 0.5), transparent),
+      radial-gradient(circle at 100% 100%, hsl(30 15% 92% / 0.4), transparent 40%);
+  }
+
+  .dark .zen-bg {
+    background-image:
+      radial-gradient(ellipse 80% 50% at 50% -20%, hsl(30 10% 20% / 0.5), transparent),
+      radial-gradient(circle at 100% 100%, hsl(25 8% 15% / 0.4), transparent 40%);
+  }
+
+  .zen-card-glow {
+    background: radial-gradient(circle, hsl(var(--primary) / 0.06) 0%, transparent 70%);
+  }
 }

app/layout.tsx

@@ -2,6 +2,7 @@ import "./globals.css";
 import type { Metadata, Viewport } from "next";
 import React from "react";
 import Umami from "@/components/umami";
+import PwaProvider from "@/components/pwa/pwa-provider";
 import { ThemeProvider } from "next-themes";
 
 export const metadata: Metadata = {
@@ -9,8 +10,11 @@ export const metadata: Metadata = {
   description:
     "知命阁 — 融合周易智慧与人工智能，提供易经学习、六爻算卦、生辰八字排盘、综合测算等服务",
   appleWebApp: {
+    capable: true,
     title: "知命阁",
+    statusBarStyle: "default",
   },
+  manifest: "/manifest.webmanifest",
 };
 
 export const viewport: Viewport = {
@@ -45,6 +49,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
+          <PwaProvider />
         </ThemeProvider>
         <Umami />
       </body>

app/learn/other/page.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import PageShell from "@/components/page-shell";
+import { GuaGrid } from "@/components/learn/gua-grid";
+import { ZenCard } from "@/components/ui/zen-card";
 import {
   getGuaName,
   guaNumFromMark,
@@ -8,48 +10,47 @@ import {
 
 export default async function LearnOtherPage() {
   const guaMarks = await listGuaMarks("simplified");
+  const items = guaMarks.map((mark) => ({
+    num: guaNumFromMark(mark),
+    name: getGuaName(mark),
+    href: `/learn/other/${guaNumFromMark(mark)}`,
+  }));
 
   return (
-    <PageShell className="max-w-3xl px-4 py-8">
+    <PageShell className="max-w-6xl px-4 py-8">
-      <div className="mb-6">
+      <div className="mb-8 text-center">
-        <h1 className="text-2xl font-bold">易经学习 · 简体图文版</h1>
+        <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
-        <p className="mt-2 text-muted-foreground">
+        <p className="mt-2 text-sm text-muted-foreground">
-          含互卦、错卦、综卦及更多注释（部分卦象图片待补全）
+          简体图文版 · 六十四卦详览
         </p>
-        <Link
-          href="/learn"
-          className="mt-2 inline-block text-sm text-primary underline underline-offset-4"
-        >
-          ← 返回繁体精简版
-        </Link>
       </div>
-      <div className="overflow-x-auto rounded-lg border">
+
-        <table className="w-full text-sm">
+      <div className="mb-8 grid gap-4 sm:grid-cols-2">
-          <thead className="bg-muted/50">
+        <Link href="/learn" className="block">
-            <tr>
+          <ZenCard
-              <th className="px-4 py-2 text-left font-medium">序号</th>
+            title="繁体精简版"
-              <th className="px-4 py-2 text-left font-medium">卦名</th>
+            subtitle="原文精要"
-            </tr>
+            className="h-full transition-colors hover:border-primary/30"
-          </thead>
-          <tbody>
-            {guaMarks.map((mark) => (
-              <tr key={mark} className="border-t">
-                <td className="px-4 py-2 font-mono text-muted-foreground">
-                  {guaNumFromMark(mark)}
-                </td>
-                <td className="px-4 py-2">
-                  <Link
-                    href={`/learn/other/${guaNumFromMark(mark)}`}
-                    className="text-primary underline-offset-4 hover:underline"
           >
-                    {getGuaName(mark)}
+            <p className="text-sm text-muted-foreground">
+              精简版卦辞，适合速读。
+            </p>
+            <span className="inline-block text-xs text-primary">← 返回</span>
+          </ZenCard>
         </Link>
-                </td>
+        <ZenCard
-              </tr>
+          title="简体图文版"
-            ))}
+          subtitle="当前浏览"
-          </tbody>
+          className="ring-1 ring-primary/20"
-        </table>
+        >
+          <p className="text-sm text-muted-foreground">
+            含互卦、错卦、综卦及卦象图。
+          </p>
+          <span className="inline-block text-xs text-primary">已选中</span>
+        </ZenCard>
       </div>
+
+      <GuaGrid items={items} />
     </PageShell>
   );
 }

app/learn/page.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import PageShell from "@/components/page-shell";
+import { GuaGrid } from "@/components/learn/gua-grid";
+import { ZenCard } from "@/components/ui/zen-card";
 import {
   getGuaName,
   guaNumFromMark,
@@ -8,48 +10,47 @@ import {
 
 export default async function LearnPage() {
   const guaMarks = await listGuaMarks("traditional");
+  const items = guaMarks.map((mark) => ({
+    num: guaNumFromMark(mark),
+    name: getGuaName(mark),
+    href: `/learn/${guaNumFromMark(mark)}`,
+  }));
 
   return (
-    <PageShell className="max-w-3xl px-4 py-8">
+    <PageShell className="max-w-6xl px-4 py-8">
-      <div className="mb-6">
+      <div className="mb-8 text-center">
-        <h1 className="text-2xl font-bold">易经学习</h1>
+        <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
-        <p className="mt-2 text-muted-foreground">
+        <p className="mt-2 text-sm text-muted-foreground">
-          周易六十四卦原文详解（繁体精简版）
+          周易六十四卦 · 择卦而读
         </p>
-        <Link
+      </div>
-          href="/learn/other"
+
-          className="mt-2 inline-block text-sm text-primary underline underline-offset-4"
+      <div className="mb-8 grid gap-4 sm:grid-cols-2">
+        <ZenCard
+          title="繁体精简版"
+          subtitle="当前浏览 · 原文精要"
+          className="ring-1 ring-primary/20"
         >
-          切换到简体图文版 →
+          <p className="text-sm text-muted-foreground">
+            张铭仁解卦等精简内容，适合快速阅读与 AI 解读引用。
+          </p>
+          <span className="inline-block text-xs text-primary">已选中</span>
+        </ZenCard>
+        <Link href="/learn/other" className="block">
+          <ZenCard
+            title="简体图文版"
+            subtitle="互卦 · 错卦 · 综卦"
+            className="h-full transition-colors hover:border-primary/30"
+          >
+            <p className="text-sm text-muted-foreground">
+              含卦象图片与更多注释，适合系统学习。
+            </p>
+            <span className="inline-block text-xs text-primary">点击进入 →</span>
+          </ZenCard>
         </Link>
       </div>
-      <div className="overflow-x-auto rounded-lg border">
+
-        <table className="w-full text-sm">
+      <GuaGrid items={items} />
-          <thead className="bg-muted/50">
-            <tr>
-              <th className="px-4 py-2 text-left font-medium">序号</th>
-              <th className="px-4 py-2 text-left font-medium">卦名</th>
-            </tr>
-          </thead>
-          <tbody>
-            {guaMarks.map((mark) => (
-              <tr key={mark} className="border-t">
-                <td className="px-4 py-2 font-mono text-muted-foreground">
-                  {guaNumFromMark(mark)}
-                </td>
-                <td className="px-4 py-2">
-                  <Link
-                    href={`/learn/${guaNumFromMark(mark)}`}
-                    className="text-primary underline-offset-4 hover:underline"
-                  >
-                    {getGuaName(mark)}
-                  </Link>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
     </PageShell>
   );
 }

app/liuyao/page.tsx

@@ -4,9 +4,9 @@ import LiuyaoForm from "@/components/modes/liuyao-form";
 export default function LiuyaoPage() {
   return (
     <PageShell>
-      <div className="px-4 pt-6 text-center">
+      <div className="border-b border-border/40 px-4 py-6 text-center">
-        <h1 className="text-xl font-bold">六爻算卦</h1>
+        <h1 className="text-2xl font-bold tracking-wide">六爻算卦</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="mt-2 text-sm text-muted-foreground">
           问事 · 起卦时空 · 线上 / 线下六爻
         </p>
       </div>

app/manifest.ts

@@ -0,0 +1,36 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "知命阁",
+    short_name: "知命阁",
+    description:
+      "融合周易智慧与人工智能 — 易经学习、六爻算卦、生辰八字、综合测算",
+    start_url: "/",
+    display: "standalone",
+    orientation: "portrait-primary",
+    background_color: "#f5f5f4",
+    theme_color: "#525252",
+    lang: "zh-CN",
+    icons: [
+      {
+        src: "/apple-icon.png",
+        sizes: "180x180",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/apple-icon.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/apple-icon.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+    ],
+  };
+}

app/page.tsx

@@ -1,55 +1,65 @@
 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";
 
 const MODULES = [
   {
     href: "/learn",
     title: "易经学习",
-    description: "64 卦原文阅读，繁体精简版与简体图文版",
+    description: "64 卦卡片择读，繁体精简与简体图文",
     icon: BookOpen,
+    accent: "from-amber-500/10 to-transparent",
   },
   {
     href: "/liuyao",
     title: "六爻算卦",
-    description: "三钱法起卦，结合卦辞 AI 智能解读",
+    description: "三钱法起卦，卦辞 AI 智能解读",
     icon: Sparkles,
+    accent: "from-stone-500/10 to-transparent",
   },
   {
     href: "/bazi",
     title: "生辰八字",
-    description: "四柱排盘，十神大运流年，AI 命理解读",
+    description: "四柱排盘，十神大运，AI 命理解读",
     icon: BrainCircuit,
+    accent: "from-zinc-500/10 to-transparent",
   },
   {
     href: "/combined",
     title: "综合测算",
-    description: "天时地利人和融合分析，六爻可选",
+    description: "天时地利人和，六爻可选",
     icon: Compass,
+    accent: "from-neutral-500/10 to-transparent",
   },
 ];
 
 export default function Home() {
   return (
-    <PageShell className="max-w-2xl px-4 py-8">
+    <PageShell className="max-w-4xl px-4 py-10 sm:py-14">
-      <div className="mb-8 text-center">
+      <div className="mb-10 text-center">
-        <h1 className="text-2xl font-bold tracking-tight">知命阁</h1>
+        <p className="text-4xl opacity-30">☯</p>
-        <p className="mt-2 text-muted-foreground">
+        <h1 className="mt-2 text-3xl font-bold tracking-[0.2em]">知命阁</h1>
+        <p className="mt-3 text-sm tracking-wide text-muted-foreground">
           融合周易智慧与人工智能
         </p>
       </div>
       <div className="grid gap-4 sm:grid-cols-2">
-        {MODULES.map(({ href, title, description, icon: Icon }) => (
+        {MODULES.map(({ href, title, description, icon: Icon, accent }) => (
-          <Link
+          <Link key={href} href={href} className="group block">
-            key={href}
+            <ZenCard
-            href={href}
+              className={`h-full bg-gradient-to-br ${accent} transition-all duration-300 group-hover:-translate-y-0.5 group-hover:shadow-md`}
-            className="group rounded-lg border bg-card p-5 shadow-sm transition-colors hover:border-primary/40 hover:bg-accent/30"
             >
-            <div className="mb-3 flex items-center gap-2">
+              <div className="mb-3 flex items-center gap-3">
-              <Icon size={20} className="text-primary" />
+                <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-background/80">
-              <span className="font-medium">{title}</span>
+                  <Icon size={20} className="text-primary/80" />
+                </span>
+                <span className="text-lg font-medium tracking-wide">{title}</span>
               </div>
-            <p className="text-sm text-muted-foreground">{description}</p>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {description}
+              </p>
+            </ZenCard>
           </Link>
         ))}
       </div>

components/header.tsx

@@ -34,8 +34,8 @@ function NavLink({ href, label }: { href: string; label: string }) {
 
 export default function Header() {
   return (
-    <header className="bg-secondary py-2 shadow">
+    <header className="border-b border-border/40 bg-card/60 py-3 shadow-sm backdrop-blur-md">
-      <div className="mx-auto flex w-full max-w-4xl flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="mx-auto flex w-full max-w-6xl flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between">
         <Link href="/" className="flex items-center justify-center gap-2 sm:justify-start">
           <ChatGPT />
           <span className="font-medium">知命阁</span>

components/layout/mode-workspace.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+
+export function ModeWorkspace({
+  children,
+  aiPanel,
+  aiTitle = "AI 解读",
+}: {
+  children: React.ReactNode;
+  aiPanel: React.ReactNode;
+  aiTitle?: string;
+}) {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-6 lg:py-8">
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,380px)] lg:items-start lg:gap-8">
+        <div className="space-y-5">{children}</div>
+        <aside className="lg:sticky lg:top-6">
+          <div className="zen-card flex min-h-[320px] flex-col rounded-2xl border border-border/60 bg-card/90 shadow-md backdrop-blur-sm lg:min-h-[calc(100vh-8rem)]">
+            <div className="flex items-center gap-2 border-b border-border/50 px-5 py-4">
+              <Sparkles size={18} className="text-primary/80" />
+              <h2 className="text-sm font-medium tracking-widest text-muted-foreground">
+                {aiTitle}
+              </h2>
+            </div>
+            <div className="flex flex-1 flex-col p-4 sm:p-5">{aiPanel}</div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}

components/learn/gua-grid.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+export interface GuaGridItem {
+  num: string;
+  name: string;
+  href: string;
+}
+
+export function GuaGrid({ items }: { items: GuaGridItem[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {items.map(({ num, name, href }) => (
+        <Link
+          key={href}
+          href={href}
+          className={cn(
+            "zen-card group relative flex flex-col items-center justify-center rounded-xl border border-border/50",
+            "bg-card/70 px-3 py-4 text-center shadow-sm transition-all duration-300",
+            "hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md",
+          )}
+        >
+          <span className="mb-2 flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-secondary/80 font-mono text-sm text-muted-foreground transition-colors group-hover:border-primary/40 group-hover:text-primary">
+            {num}
+          </span>
+          <span className="line-clamp-2 text-sm leading-snug text-foreground group-hover:text-primary">
+            {name}
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}

components/modes/bazi-form.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { BrainCircuit } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { ZenCard } from "@/components/ui/zen-card";
+import { ModeWorkspace } from "@/components/layout/mode-workspace";
 import ResultAI from "@/components/result-ai";
 import BaziChartDisplay from "@/components/modes/bazi-chart";
 import DateTimePicker, { nowDateString } from "@/components/shared/datetime-picker";
@@ -25,7 +27,6 @@ export default function BaziForm() {
   const [completion, setCompletion] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [showAi, setShowAi] = useState(false);
 
   const location = useRegionLocation(provinceCode, cityCode);
 
@@ -54,19 +55,28 @@ export default function BaziForm() {
     }
     setError("");
     setChart(calculateBazi(input));
-    setShowAi(false);
     setCompletion("");
   }
 
   async function handleAnalyze() {
     const input = buildInput();
-    if (!input || !chart) {
+    if (!input) {
+      setError("请选择出生地域");
       return;
     }
+    if (!question.trim()) {
+      setError("请输入问事");
+      return;
+    }
+    const activeChart = chart ?? calculateBazi(input);
+    if (!chart) {
+      setChart(activeChart);
+    }
+
     setError("");
     setCompletion("");
     setIsLoading(true);
-    setShowAi(true);
+
     try {
       await streamAiCompletion(
         {
@@ -87,8 +97,19 @@ export default function BaziForm() {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4 px-4 py-6">
+    <ModeWorkspace
-      <div className="mx-auto w-full max-w-lg space-y-4">
+      aiPanel={
+        <ResultAI
+          panel
+          completion={completion}
+          isLoading={isLoading}
+          onCompletion={handleAnalyze}
+          error={error}
+          emptyHint="排盘后点击「AI 测算」获取解读"
+        />
+      }
+    >
+      <ZenCard title="出生 · 命局" subtitle="四柱排盘所需信息">
         <DateTimePicker
           label="出生日期 / 时间"
           date={date}
@@ -105,9 +126,6 @@ export default function BaziForm() {
           />
           时辰不详
         </label>
-
-        <div className="space-y-1">
-          <label className="text-sm font-medium">性别</label>
         <div className="flex gap-4">
           {(["male", "female"] as const).map((g) => (
             <label key={g} className="flex items-center gap-2 text-sm">
@@ -121,8 +139,6 @@ export default function BaziForm() {
             </label>
           ))}
         </div>
-        </div>
-
         <RegionSelect
           label="出生地域"
           provinceCode={provinceCode}
@@ -130,48 +146,30 @@ export default function BaziForm() {
           onProvinceChange={setProvinceCode}
           onCityChange={setCityCode}
         />
+      </ZenCard>
 
-        <div className="space-y-1">
+      <ZenCard title="问事 · 排盘" subtitle="所求与命盘结果">
-          <label className="text-sm font-medium">问事</label>
         <Textarea
           placeholder="事业、婚姻、健康等..."
           value={question}
           onChange={(e) => setQuestion(e.target.value)}
           rows={3}
+          className="border-border/60 bg-background/50"
         />
-        </div>
+        {error && !completion && (
-
-        {error && !showAi && (
           <p className="text-sm text-destructive">{error}</p>
         )}
-
+        <div className="flex gap-2">
-        <Button onClick={handleCalculate} className="w-full">
+          <Button variant="outline" onClick={handleCalculate} className="flex-1">
             排盘
           </Button>
-      </div>
+          <Button onClick={handleAnalyze} disabled={isLoading} className="flex-1">
-
-      {chart && (
-        <div className="mx-auto w-full max-w-lg space-y-4">
-          <BaziChartDisplay chart={chart} />
-          {!showAi && (
-            <Button onClick={handleAnalyze} className="w-full">
             <BrainCircuit size={16} className="mr-1" />
-              测算
+            AI 测算
           </Button>
-          )}
-        </div>
-      )}
-
-      {showAi && (
-        <div className="mx-auto w-full max-w-lg pt-2">
-          <ResultAI
-            completion={completion}
-            isLoading={isLoading}
-            onCompletion={handleAnalyze}
-            error={error}
-          />
-        </div>
-      )}
         </div>
+        {chart && <BaziChartDisplay chart={chart} />}
+      </ZenCard>
+    </ModeWorkspace>
   );
 }

components/modes/combined-form.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { Compass } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { ZenCard } from "@/components/ui/zen-card";
+import { ModeWorkspace } from "@/components/layout/mode-workspace";
 import Result from "@/components/result";
 import ResultAI from "@/components/result-ai";
 import BaziChartDisplay from "@/components/modes/bazi-chart";
@@ -39,7 +41,6 @@ export default function CombinedForm() {
   const [completion, setCompletion] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [showAi, setShowAi] = useState(false);
 
   const birthLocation = useRegionLocation(birthProvince, birthCity);
   const currentLocation = useRegionLocation(currentProvince, currentCity);
@@ -79,7 +80,6 @@ export default function CombinedForm() {
         unknownHour,
       }),
     );
-    setShowAi(false);
     setCompletion("");
   }
 
@@ -104,7 +104,6 @@ export default function CombinedForm() {
     setError("");
     setCompletion("");
     setIsLoading(true);
-    setShowAi(true);
 
     try {
       await streamAiCompletion(
@@ -144,10 +143,20 @@ export default function CombinedForm() {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4 px-4 py-6">
+    <ModeWorkspace
-      <div className="mx-auto w-full max-w-lg space-y-6">
+      aiTitle="综合解读"
-        <section className="space-y-3">
+      aiPanel={
-          <h2 className="text-sm font-semibold text-primary">人和 · 生辰八字</h2>
+        <ResultAI
+          panel
+          completion={completion}
+          isLoading={isLoading}
+          onCompletion={handleAnalyze}
+          error={error}
+          emptyHint="填写完整信息后，点击「综合测算」"
+        />
+      }
+    >
+      <ZenCard title="人和 · 生辰" subtitle="出生时空与地域">
         <DateTimePicker
           label="出生日期 / 时间"
           date={birthDate}
@@ -184,55 +193,43 @@ export default function CombinedForm() {
           onProvinceChange={setBirthProvince}
           onCityChange={setBirthCity}
         />
-        </section>
+      </ZenCard>
 
-        <section className="space-y-3">
+      <ZenCard title="天时地利 · 问事" subtitle="当前时空与所求">
-          <h2 className="text-sm font-semibold text-primary">地利 · 当前位置</h2>
         <RegionSelect
-            label="所在地域"
+          label="当前所在地域"
           provinceCode={currentProvince}
           cityCode={currentCity}
           onProvinceChange={setCurrentProvince}
           onCityChange={setCurrentCity}
         />
-        </section>
-
-        <section className="space-y-3">
-          <h2 className="text-sm font-semibold text-primary">天时 · 测算时刻</h2>
         <DateTimePicker
-            label="日期 / 时间"
+          label="测算时刻"
           date={calcDate}
           time={calcTime}
           onDateChange={setCalcDate}
           onTimeChange={setCalcTime}
         />
-        </section>
-
-        <section className="space-y-3">
-          <h2 className="text-sm font-semibold text-primary">问事</h2>
         <Textarea
           placeholder="具体所求..."
           value={question}
           onChange={(e) => setQuestion(e.target.value)}
           rows={3}
+          className="border-border/60 bg-background/50"
         />
-        </section>
+        <label className="flex items-center gap-2 text-sm">
-
-        <section className="space-y-3">
-          <label className="flex items-center gap-2 text-sm font-medium">
           <input
             type="checkbox"
             checked={withHexagram}
             onChange={(e) => {
               setWithHexagram(e.target.checked);
               setGuaData(null);
-                setShowAi(false);
             }}
           />
           附加六爻（可选）
         </label>
         {withHexagram && (
-            <div className="space-y-3 rounded-md border p-3">
+          <div className="space-y-3 rounded-xl border border-border/50 bg-secondary/20 p-3">
             <div className="flex gap-2">
               <Button
                 type="button"
@@ -265,49 +262,30 @@ export default function CombinedForm() {
               onClear={() => setGuaData(null)}
             />
             {guaData && (
-                <div className="rounded-md border bg-card p-3">
+              <div className="rounded-lg border bg-card p-3">
                 <Result {...guaData.result} />
               </div>
             )}
           </div>
         )}
-        </section>
+        {error && !completion && (
-
-        {error && !showAi && (
           <p className="text-sm text-destructive">{error}</p>
         )}
-
         <div className="flex gap-2">
           <Button variant="outline" onClick={handlePreview} className="flex-1">
             预览排盘
           </Button>
           <Button
             onClick={handleAnalyze}
-            disabled={withHexagram && !hexagramReady}
+            disabled={isLoading || (withHexagram && !hexagramReady)}
             className="flex-1"
           >
             <Compass size={16} className="mr-1" />
             综合测算
           </Button>
         </div>
-      </div>
+        {chart && <BaziChartDisplay chart={chart} />}
-
+      </ZenCard>
-      {chart && (
+    </ModeWorkspace>
-        <div className="mx-auto w-full max-w-lg">
-          <BaziChartDisplay chart={chart} />
-        </div>
-      )}
-
-      {showAi && (
-        <div className="mx-auto w-full max-w-lg pt-2">
-          <ResultAI
-            completion={completion}
-            isLoading={isLoading}
-            onCompletion={handleAnalyze}
-            error={error}
-          />
-        </div>
-      )}
-    </div>
   );
 }

components/modes/liuyao-form.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { BrainCircuit, ListRestart } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { ZenCard } from "@/components/ui/zen-card";
+import { ModeWorkspace } from "@/components/layout/mode-workspace";
 import Result from "@/components/result";
 import ResultAI from "@/components/result-ai";
 import DateTimePicker, {
@@ -31,19 +33,10 @@ export default function LiuyaoForm() {
   const [completion, setCompletion] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [showAi, setShowAi] = useState(false);
-
-  const actionRef = useRef<HTMLDivElement>(null);
 
   const location = useRegionLocation(provinceCode, cityCode);
   const formReady = question.trim() !== "" && location !== null;
 
-  useEffect(() => {
-    if (guaData && actionRef.current) {
-      actionRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }
-  }, [guaData]);
-
   function validate(): string | null {
     if (!question.trim()) {
       return "请输入问事";
@@ -52,7 +45,7 @@ export default function LiuyaoForm() {
       return "请选择起卦省份";
     }
     if (!guaData) {
-      return "请先完成 6 次起卦（线上摇卦或线下录入）";
+      return "请先完成 6 次起卦";
     }
     return null;
   }
@@ -67,7 +60,6 @@ export default function LiuyaoForm() {
     setError("");
     setCompletion("");
     setIsLoading(true);
-    setShowAi(true);
 
     try {
       await streamAiCompletion(
@@ -103,27 +95,35 @@ export default function LiuyaoForm() {
     setGuaData(null);
     setCompletion("");
     setError("");
-    setShowAi(false);
     setIsLoading(false);
   }
 
   function handleGuaResult(data: GuaResult) {
     setGuaData(data);
-    setShowAi(false);
     setCompletion("");
     setError("");
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4 px-4 py-6">
+    <ModeWorkspace
-      <div className="mx-auto w-full max-w-lg space-y-5">
+      aiPanel={
-        <section className="space-y-2">
+        <ResultAI
-          <label className="text-sm font-medium">问事</label>
+          panel
+          completion={completion}
+          isLoading={isLoading}
+          onCompletion={handleAnalyze}
+          error={error}
+          emptyHint="完成起卦后，点击「AI 解读」"
+        />
+      }
+    >
+      <ZenCard title="问事 · 心意" subtitle="所求何事，心诚则灵">
         <Textarea
           placeholder="您想算点什么？"
           value={question}
           onChange={(e) => setQuestion(e.target.value)}
           rows={3}
+          className="border-border/60 bg-background/50"
         />
         <div className="flex flex-wrap gap-2">
           {todayData.map((item, index) => (
@@ -131,14 +131,15 @@ export default function LiuyaoForm() {
               key={index}
               type="button"
               onClick={() => setQuestion(item)}
-                className="rounded-md border bg-secondary px-2 py-1 text-xs text-muted-foreground transition hover:bg-accent"
+              className="rounded-full border border-border/60 bg-secondary/50 px-3 py-1 text-xs text-muted-foreground transition hover:border-primary/30 hover:text-foreground"
             >
               {item}
             </button>
           ))}
         </div>
-        </section>
+      </ZenCard>
 
+      <ZenCard title="起卦 · 时空" subtitle="地域、时辰与六爻">
         <RegionSelect
           label="起卦地域"
           provinceCode={provinceCode}
@@ -146,7 +147,6 @@ export default function LiuyaoForm() {
           onProvinceChange={setProvinceCode}
           onCityChange={setCityCode}
         />
-
         <DateTimePicker
           label="起卦时辰"
           date={calcDate}
@@ -154,9 +154,6 @@ export default function LiuyaoForm() {
           onDateChange={setCalcDate}
           onTimeChange={setCalcTime}
         />
-
-        <section className="space-y-2">
-          <label className="text-sm font-medium">起卦方式</label>
         <div className="flex gap-2">
           <Button
             type="button"
@@ -165,7 +162,6 @@ export default function LiuyaoForm() {
             onClick={() => {
               setCastMode("online");
               setGuaData(null);
-                setShowAi(false);
             }}
           >
             线上摇卦
@@ -177,14 +173,11 @@ export default function LiuyaoForm() {
             onClick={() => {
               setCastMode("offline");
               setGuaData(null);
-                setShowAi(false);
             }}
           >
             线下录入
           </Button>
         </div>
-        </section>
-
         <HexagramInput
           key={castMode}
           mode={castMode}
@@ -192,27 +185,15 @@ export default function LiuyaoForm() {
           onResult={handleGuaResult}
           onClear={() => setGuaData(null)}
         />
-
         {guaData && (
-          <div className="space-y-3 rounded-lg border border-primary/30 bg-primary/5 p-4">
+          <div className="rounded-xl border border-primary/20 bg-primary/5 p-4">
-            <p className="text-sm font-medium text-primary">
-              起卦完成 · 请点击下方「AI 解读」
-            </p>
             <Result {...guaData.result} />
           </div>
         )}
-
+        {error && !completion && (
-        {!guaData && formReady && castMode === "online" && (
-          <p className="text-center text-xs text-muted-foreground">
-            线上模式将自动摇卦 6 次，完成后出现 AI 解读按钮
-          </p>
-        )}
-
-        {error && (
           <p className="text-sm text-destructive">{error}</p>
         )}
-
+        <div className="flex gap-2 pt-1">
-        <div ref={actionRef} className="flex gap-2">
           <Button variant="outline" onClick={handleReset} className="flex-1">
             <ListRestart size={16} className="mr-1" />
             重来
@@ -226,18 +207,7 @@ export default function LiuyaoForm() {
             AI 解读
           </Button>
         </div>
-      </div>
+      </ZenCard>
-
+    </ModeWorkspace>
-      {showAi && (
-        <div className="mx-auto w-full max-w-lg pt-2">
-          <ResultAI
-            completion={completion}
-            isLoading={isLoading}
-            onCompletion={handleAnalyze}
-            error={error}
-          />
-        </div>
-      )}
-    </div>
   );
 }

components/pwa/pwa-provider.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Download, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
+}
+
+export default function PwaProvider() {
+  const [deferred, setDeferred] = useState<BeforeInstallPromptEvent | null>(
+    null,
+  );
+  const [dismissed, setDismissed] = useState(false);
+  const [isIos, setIsIos] = useState(false);
+  const [isStandalone, setIsStandalone] = useState(false);
+
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/sw.js").catch(() => {});
+    }
+
+    setIsStandalone(
+      window.matchMedia("(display-mode: standalone)").matches ||
+        (window.navigator as Navigator & { standalone?: boolean }).standalone ===
+          true,
+    );
+
+    const ua = window.navigator.userAgent;
+    setIsIos(/iPad|iPhone|iPod/.test(ua));
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setDeferred(e as BeforeInstallPromptEvent);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  }, []);
+
+  if (isStandalone || dismissed) {
+    return null;
+  }
+
+  if (deferred) {
+    return (
+      <div className="fixed bottom-4 left-4 right-4 z-50 mx-auto flex max-w-md items-center gap-3 rounded-xl border border-border/60 bg-card/95 p-4 shadow-lg backdrop-blur-md sm:left-auto">
+        <Download size={20} className="shrink-0 text-primary" />
+        <div className="min-w-0 flex-1 text-sm">
+          <p className="font-medium">安装知命阁</p>
+          <p className="text-xs text-muted-foreground">
+            添加到主屏幕，像 App 一样使用
+          </p>
+        </div>
+        <Button
+          size="sm"
+          onClick={async () => {
+            await deferred.prompt();
+            setDeferred(null);
+          }}
+        >
+          安装
+        </Button>
+        <button
+          type="button"
+          aria-label="关闭"
+          className="text-muted-foreground hover:text-foreground"
+          onClick={() => setDismissed(true)}
+        >
+          <X size={16} />
+        </button>
+      </div>
+    );
+  }
+
+  if (isIos) {
+    return (
+      <div className="fixed bottom-4 left-4 right-4 z-50 mx-auto max-w-md rounded-xl border border-border/60 bg-card/95 p-4 text-sm shadow-lg backdrop-blur-md sm:left-auto">
+        <p className="font-medium">安装到 iPhone / iPad</p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          点击 Safari 底部分享按钮 → 「添加到主屏幕」
+        </p>
+        <button
+          type="button"
+          className="mt-2 text-xs text-muted-foreground underline"
+          onClick={() => setDismissed(true)}
+        >
+          知道了
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+}

components/result-ai.tsx

@@ -1,18 +1,23 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Button } from "@/components/ui/button";
 import { RotateCw } from "lucide-react";
 import Markdown from "react-markdown";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 function ResultAI({
   completion,
   isLoading,
   onCompletion,
   error,
+  panel = false,
+  emptyHint = "完成左侧填写并起卦/排盘后，点击「AI 解读」",
 }: {
   completion: string;
   isLoading: boolean;
   onCompletion: () => void;
   error: string;
+  panel?: boolean;
+  emptyHint?: string;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(false);
@@ -39,8 +44,13 @@ function ResultAI({
   }
 
   return (
-    <div className="flex w-full flex-col gap-2">
+    <div
-      {isLoading && (
+      className={cn(
+        "flex w-full flex-col",
+        panel ? "min-h-0 flex-1" : "gap-2",
+      )}
+    >
+      {isLoading && !panel && (
         <div className="flex items-center text-sm text-muted-foreground">
           <RotateCw size={16} className="animate-spin" />
           <span className="ml-1">AI 分析中...</span>
@@ -49,25 +59,41 @@ function ResultAI({
       <div
         ref={scrollRef}
         onScroll={(e) => onScroll(e.currentTarget)}
-        className="min-h-[240px] max-h-[420px] overflow-y-auto rounded-md border bg-background p-3 shadow sm:p-5 dark:border-0 dark:bg-secondary/90 dark:shadow-none"
+        className={cn(
+          "overflow-y-auto",
+          panel
+            ? "min-h-0 flex-1"
+            : "min-h-[240px] max-h-[420px] rounded-md border bg-background p-3 shadow sm:p-5 dark:border-0 dark:bg-secondary/90",
+        )}
       >
+        {isLoading && panel && (
+          <div className="mb-3 flex items-center text-sm text-muted-foreground">
+            <RotateCw size={16} className="animate-spin" />
+            <span className="ml-1">AI 分析中...</span>
+          </div>
+        )}
         {error ? (
           <div className="text-sm text-destructive">
             <p className="font-medium">请求出错了</p>
             <p className="mt-1 whitespace-pre-wrap">{error}</p>
           </div>
         ) : completion ? (
-          <Markdown className="prose max-w-none dark:prose-invert">
+          <Markdown className="prose max-w-none text-sm dark:prose-invert prose-p:leading-relaxed">
             {completion}
           </Markdown>
         ) : isLoading ? (
           <p className="text-sm text-muted-foreground">正在等待 AI 响应...</p>
         ) : (
-          <p className="text-sm text-muted-foreground">暂无解读内容</p>
+          <div className="flex h-full min-h-[200px] flex-col items-center justify-center text-center text-muted-foreground">
+            <p className="text-4xl opacity-20">☯</p>
+            <p className="mt-3 max-w-[200px] text-sm leading-relaxed">
+              {emptyHint}
+            </p>
+          </div>
         )}
-        {!isLoading && (
+        {!isLoading && (completion || error) && (
-          <Button onClick={onCompletion} size="sm" className="mt-3">
+          <Button onClick={onCompletion} size="sm" variant="outline" className="mt-4">
-            <RotateCw size={18} className="mr-1" />
+            <RotateCw size={16} className="mr-1" />
             重新生成
           </Button>
         )}

components/ui/zen-card.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export function ZenCard({
+  title,
+  subtitle,
+  children,
+  className,
+}: {
+  title?: string;
+  subtitle?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "zen-card relative overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-5 shadow-sm backdrop-blur-sm sm:p-6",
+        className,
+      )}
+    >
+      <div className="zen-card-glow pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full opacity-40" />
+      {(title || subtitle) && (
+        <header className="relative mb-4 border-b border-border/50 pb-3">
+          {title && (
+            <h2 className="text-base font-medium tracking-wide text-foreground">
+              {title}
+            </h2>
+          )}
+          {subtitle && (
+            <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
+          )}
+        </header>
+      )}
+      <div className="relative space-y-4">{children}</div>
+    </section>
+  );
+}

docs/DOCKER.md

@@ -77,6 +77,14 @@ ufw allow 3130
 
 域名与 AI 流式反代完整说明见 [BAOTA.md](./BAOTA.md)。
 
+## PWA 安装
+
+应用已支持添加到主屏幕（手机 / 桌面 Chrome、Edge 等）：
+
+- 首次访问会提示「安装知命阁」
+- iOS Safari：分享 → 添加到主屏幕
+- 需 HTTPS 访问（经宝塔域名）
+
 ## 从 PM2 迁移
 
 ```bash

public/sw.js

@@ -0,0 +1,11 @@
+self.addEventListener("install", (event) => {
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(fetch(event.request));
+});