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