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>

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,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>
   );
 }