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>
2026-06-10 23:24:55 +08:00
parent 206673fd90
commit 6265e56a7f
20 changed files with 682 additions and 423 deletions
@@ -34,8 +34,8 @@ function NavLink({ href, label }: { href: string; label: string }) {

 export default function Header() {
  return (
-    <header className="bg-secondary py-2 shadow">
-      <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">
+    <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-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>
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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">
-      <div className="mx-auto w-full max-w-lg space-y-4">
+    <ModeWorkspace
+      aiPanel={
+        <ResultAI
+          panel
+          completion={completion}
+          isLoading={isLoading}
+          onCompletion={handleAnalyze}
+          error={error}
+          emptyHint="排盘后点击「AI 测算」获取解读"
+        />
+      }
+    >
+      <ZenCard title="出生 · 命局" subtitle="四柱排盘所需信息">
        <DateTimePicker
          label="出生日期 / 时间"
          date={date}
@@ -105,24 +126,19 @@ 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">
-                <input
-                  type="radio"
-                  name="gender"
-                  checked={gender === g}
-                  onChange={() => setGender(g)}
-                />
-                {g === "male" ? "男" : "女"}
-              </label>
-            ))}
-          </div>
+        <div className="flex gap-4">
+          {(["male", "female"] as const).map((g) => (
+            <label key={g} className="flex items-center gap-2 text-sm">
+              <input
+                type="radio"
+                name="gender"
+                checked={gender === g}
+                onChange={() => setGender(g)}
+              />
+              {g === "male" ? "男" : "女"}
+            </label>
+          ))}
        </div>
-
        <RegionSelect
          label="出生地域"
          provinceCode={provinceCode}
@@ -130,48 +146,30 @@ export default function BaziForm() {
          onProvinceChange={setProvinceCode}
          onCityChange={setCityCode}
        />
+      </ZenCard>

-        <div className="space-y-1">
-          <label className="text-sm font-medium">问事</label>
-          <Textarea
-            placeholder="事业、婚姻、健康等..."
-            value={question}
-            onChange={(e) => setQuestion(e.target.value)}
-            rows={3}
-          />
-        </div>
-
-        {error && !showAi && (
+      <ZenCard title="问事 · 排盘" subtitle="所求与命盘结果">
+        <Textarea
+          placeholder="事业、婚姻、健康等..."
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          rows={3}
+          className="border-border/60 bg-background/50"
+        />
+        {error && !completion && (
          <p className="text-sm text-destructive">{error}</p>
        )}
-
-        <Button onClick={handleCalculate} className="w-full">
-          排盘
-        </Button>
-      </div>
-
-      {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" />
-              测算
-            </Button>
-          )}
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={handleCalculate} className="flex-1">
+            排盘
+          </Button>
+          <Button onClick={handleAnalyze} disabled={isLoading} className="flex-1">
+            <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>
  );
 }
@@ -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,170 +143,149 @@ export default function CombinedForm() {
  }

  return (
-    <div className="flex flex-1 flex-col gap-4 px-4 py-6">
-      <div className="mx-auto w-full max-w-lg space-y-6">
-        <section className="space-y-3">
-          <h2 className="text-sm font-semibold text-primary">人和 · 生辰八字</h2>
-          <DateTimePicker
-            label="出生日期 / 时间"
-            date={birthDate}
-            time={birthTime}
-            timeDisabled={unknownHour}
-            onDateChange={setBirthDate}
-            onTimeChange={setBirthTime}
+    <ModeWorkspace
+      aiTitle="综合解读"
+      aiPanel={
+        <ResultAI
+          panel
+          completion={completion}
+          isLoading={isLoading}
+          onCompletion={handleAnalyze}
+          error={error}
+          emptyHint="填写完整信息后，点击「综合测算」"
+        />
+      }
+    >
+      <ZenCard title="人和 · 生辰" subtitle="出生时空与地域">
+        <DateTimePicker
+          label="出生日期 / 时间"
+          date={birthDate}
+          time={birthTime}
+          timeDisabled={unknownHour}
+          onDateChange={setBirthDate}
+          onTimeChange={setBirthTime}
+        />
+        <label className="flex items-center gap-2 text-xs text-muted-foreground">
+          <input
+            type="checkbox"
+            checked={unknownHour}
+            onChange={(e) => setUnknownHour(e.target.checked)}
          />
-          <label className="flex items-center gap-2 text-xs text-muted-foreground">
-            <input
-              type="checkbox"
-              checked={unknownHour}
-              onChange={(e) => setUnknownHour(e.target.checked)}
-            />
-            时辰不详
-          </label>
-          <div className="flex gap-4">
-            {(["male", "female"] as const).map((g) => (
-              <label key={g} className="flex items-center gap-2 text-sm">
-                <input
-                  type="radio"
-                  name="combined-gender"
-                  checked={gender === g}
-                  onChange={() => setGender(g)}
-                />
-                {g === "male" ? "男" : "女"}
-              </label>
-            ))}
-          </div>
-          <RegionSelect
-            label="出生地域"
-            provinceCode={birthProvince}
-            cityCode={birthCity}
-            onProvinceChange={setBirthProvince}
-            onCityChange={setBirthCity}
-          />
-        </section>
-
-        <section className="space-y-3">
-          <h2 className="text-sm font-semibold text-primary">地利 · 当前位置</h2>
-          <RegionSelect
-            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="日期 / 时间"
-            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}
-          />
-        </section>
-
-        <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="flex gap-2">
-                <Button
-                  type="button"
-                  size="sm"
-                  variant={castMode === "online" ? "default" : "outline"}
-                  onClick={() => {
-                    setCastMode("online");
-                    setGuaData(null);
-                  }}
-                >
-                  线上摇卦
-                </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  variant={castMode === "offline" ? "default" : "outline"}
-                  onClick={() => {
-                    setCastMode("offline");
-                    setGuaData(null);
-                  }}
-                >
-                  线下录入
-                </Button>
-              </div>
-              <HexagramInput
-                key={castMode}
-                mode={castMode}
-                enabled={question.trim() !== "" && currentLocation !== null}
-                onResult={setGuaData}
-                onClear={() => setGuaData(null)}
+          时辰不详
+        </label>
+        <div className="flex gap-4">
+          {(["male", "female"] as const).map((g) => (
+            <label key={g} className="flex items-center gap-2 text-sm">
+              <input
+                type="radio"
+                name="combined-gender"
+                checked={gender === g}
+                onChange={() => setGender(g)}
              />
-              {guaData && (
-                <div className="rounded-md border bg-card p-3">
-                  <Result {...guaData.result} />
-                </div>
-              )}
-            </div>
-          )}
-        </section>
+              {g === "male" ? "男" : "女"}
+            </label>
+          ))}
+        </div>
+        <RegionSelect
+          label="出生地域"
+          provinceCode={birthProvince}
+          cityCode={birthCity}
+          onProvinceChange={setBirthProvince}
+          onCityChange={setBirthCity}
+        />
+      </ZenCard>

-        {error && !showAi && (
+      <ZenCard title="天时地利 · 问事" subtitle="当前时空与所求">
+        <RegionSelect
+          label="当前所在地域"
+          provinceCode={currentProvince}
+          cityCode={currentCity}
+          onProvinceChange={setCurrentProvince}
+          onCityChange={setCurrentCity}
+        />
+        <DateTimePicker
+          label="测算时刻"
+          date={calcDate}
+          time={calcTime}
+          onDateChange={setCalcDate}
+          onTimeChange={setCalcTime}
+        />
+        <Textarea
+          placeholder="具体所求..."
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          rows={3}
+          className="border-border/60 bg-background/50"
+        />
+        <label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={withHexagram}
+            onChange={(e) => {
+              setWithHexagram(e.target.checked);
+              setGuaData(null);
+            }}
+          />
+          附加六爻（可选）
+        </label>
+        {withHexagram && (
+          <div className="space-y-3 rounded-xl border border-border/50 bg-secondary/20 p-3">
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                size="sm"
+                variant={castMode === "online" ? "default" : "outline"}
+                onClick={() => {
+                  setCastMode("online");
+                  setGuaData(null);
+                }}
+              >
+                线上摇卦
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant={castMode === "offline" ? "default" : "outline"}
+                onClick={() => {
+                  setCastMode("offline");
+                  setGuaData(null);
+                }}
+              >
+                线下录入
+              </Button>
+            </div>
+            <HexagramInput
+              key={castMode}
+              mode={castMode}
+              enabled={question.trim() !== "" && currentLocation !== null}
+              onResult={setGuaData}
+              onClear={() => setGuaData(null)}
+            />
+            {guaData && (
+              <div className="rounded-lg border bg-card p-3">
+                <Result {...guaData.result} />
+              </div>
+            )}
+          </div>
+        )}
+        {error && !completion && (
          <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 && (
-        <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>
+        {chart && <BaziChartDisplay chart={chart} />}
+      </ZenCard>
+    </ModeWorkspace>
  );
 }
@@ -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,42 +95,51 @@ 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">
-      <div className="mx-auto w-full max-w-lg space-y-5">
-        <section className="space-y-2">
-          <label className="text-sm font-medium">问事</label>
-          <Textarea
-            placeholder="您想算点什么？"
-            value={question}
-            onChange={(e) => setQuestion(e.target.value)}
-            rows={3}
-          />
-          <div className="flex flex-wrap gap-2">
-            {todayData.map((item, index) => (
-              <button
-                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"
-              >
-                {item}
-              </button>
-            ))}
-          </div>
-        </section>
+    <ModeWorkspace
+      aiPanel={
+        <ResultAI
+          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) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => setQuestion(item)}
+              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>
+      </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,37 +154,30 @@ 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"
-              size="sm"
-              variant={castMode === "online" ? "default" : "outline"}
-              onClick={() => {
-                setCastMode("online");
-                setGuaData(null);
-                setShowAi(false);
-              }}
-            >
-              线上摇卦
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant={castMode === "offline" ? "default" : "outline"}
-              onClick={() => {
-                setCastMode("offline");
-                setGuaData(null);
-                setShowAi(false);
-              }}
-            >
-              线下录入
-            </Button>
-          </div>
-        </section>
-
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant={castMode === "online" ? "default" : "outline"}
+            onClick={() => {
+              setCastMode("online");
+              setGuaData(null);
+            }}
+          >
+            线上摇卦
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant={castMode === "offline" ? "default" : "outline"}
+            onClick={() => {
+              setCastMode("offline");
+              setGuaData(null);
+            }}
+          >
+            线下录入
+          </Button>
+        </div>
        <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">
-            <p className="text-sm font-medium text-primary">
-              起卦完成 · 请点击下方「AI 解读」
-            </p>
+          <div className="rounded-xl border border-primary/20 bg-primary/5 p-4">
            <Result {...guaData.result} />
          </div>
        )}
-
-        {!guaData && formReady && castMode === "online" && (
-          <p className="text-center text-xs text-muted-foreground">
-            线上模式将自动摇卦 6 次，完成后出现 AI 解读按钮
-          </p>
-        )}
-
-        {error && (
+        {error && !completion && (
          <p className="text-sm text-destructive">{error}</p>
        )}
-
-        <div ref={actionRef} className="flex gap-2">
+        <div className="flex gap-2 pt-1">
          <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>
-
-      {showAi && (
-        <div className="mx-auto w-full max-w-lg pt-2">
-          <ResultAI
-            completion={completion}
-            isLoading={isLoading}
-            onCompletion={handleAnalyze}
-            error={error}
-          />
-        </div>
-      )}
-    </div>
+      </ZenCard>
+    </ModeWorkspace>
  );
 }
@@ -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;
+}
@@ -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">
-      {isLoading && (
+    <div
+      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 && (
-          <Button onClick={onCompletion} size="sm" className="mt-3">
-            <RotateCw size={18} className="mr-1" />
+        {!isLoading && (completion || error) && (
+          <Button onClick={onCompletion} size="sm" variant="outline" className="mt-4">
+            <RotateCw size={16} className="mr-1" />
            重新生成
          </Button>
        )}
@@ -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>
+  );
+}