From 1cde9ffc9ccaff5d85b402f8831ef9480c470933 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Fri, 12 Jun 2026 06:42:02 +0800
Subject: [PATCH] Compact left column layout and require manual cast start.

Stop stretching input cards to match AI panel height, and show a start button before online/offline hexagram casting begins.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/layout/mode-workspace.tsx |  8 ++----
 components/modes/combined-form.tsx   | 15 ++++++++--
 components/modes/liuyao-form.tsx     | 19 ++++++++++--
 components/shared/hexagram-input.tsx | 43 +++++++++++++++++++++++++---
 4 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/components/layout/mode-workspace.tsx b/components/layout/mode-workspace.tsx
index e9a782c..7a7d9be 100644
--- a/components/layout/mode-workspace.tsx
+++ b/components/layout/mode-workspace.tsx
@@ -13,11 +13,9 @@ export function ModeWorkspace({
 }) {
   return (
     <div className="py-6 lg:py-8">
-      <div className="mode-workspace-grid grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
-        <div className="grid h-full min-h-0 auto-rows-fr gap-5 lg:min-h-[calc(100vh-9rem)]">
-          {children}
-        </div>
-        <aside className="flex min-h-[320px] flex-col lg:min-h-[calc(100vh-9rem)]">
+      <div className="mode-workspace-grid grid gap-6 lg:grid-cols-2 lg:items-start lg:gap-8 xl:gap-10">
+        <div className="flex flex-col gap-5">{children}</div>
+        <aside className="flex min-h-[320px] flex-col lg:sticky lg:top-6 lg:max-h-[calc(100vh-7rem)]">
           <div className="zen-card flex min-h-0 flex-1 flex-col rounded-2xl border border-border/60 bg-card/90 shadow-md backdrop-blur-sm">
             <div className="flex items-center gap-2 border-b border-border/50 px-5 py-4">
               <Sparkles size={18} className="text-primary/80" />
diff --git a/components/modes/combined-form.tsx b/components/modes/combined-form.tsx
index 70e3508..a81cd03 100644
--- a/components/modes/combined-form.tsx
+++ b/components/modes/combined-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Compass } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -35,6 +35,7 @@ export default function CombinedForm() {
   const [question, setQuestion] = useState("");
   const [withHexagram, setWithHexagram] = useState(false);
   const [castMode, setCastMode] = useState<"online" | "offline">("online");
+  const [castActive, setCastActive] = useState(false);
   const [guaData, setGuaData] = useState<GuaResult | null>(null);
 
   const [chart, setChart] = useState<BaziChart | null>(null);
@@ -48,6 +49,11 @@ export default function CombinedForm() {
     !withHexagram ||
     (question.trim() !== "" && currentLocation !== null && guaData !== null);
 
+  useEffect(() => {
+    setCastActive(false);
+    setGuaData(null);
+  }, [currentProvince, currentCity, castMode, question, withHexagram]);
+
   function validate(): string | null {
     if (!birthLocation) {
       return "请选择出生地域";
@@ -258,8 +264,13 @@ export default function CombinedForm() {
               key={castMode}
               mode={castMode}
               enabled={question.trim() !== "" && currentLocation !== null}
+              active={castActive}
+              onStart={() => setCastActive(true)}
               onResult={setGuaData}
-              onClear={() => setGuaData(null)}
+              onClear={() => {
+                setGuaData(null);
+                setCastActive(false);
+              }}
             />
             {guaData && (
               <div className="rounded-lg border bg-card p-3">
diff --git a/components/modes/liuyao-form.tsx b/components/modes/liuyao-form.tsx
index 0e9a55d..1b65e3a 100644
--- a/components/modes/liuyao-form.tsx
+++ b/components/modes/liuyao-form.tsx
@@ -29,6 +29,7 @@ export default function LiuyaoForm() {
   const [calcDate, setCalcDate] = useState(nowDateString);
   const [calcTime, setCalcTime] = useState(nowTimeString);
   const [castMode, setCastMode] = useState<"online" | "offline">("online");
+  const [castActive, setCastActive] = useState(false);
   const [guaData, setGuaData] = useState<GuaResult | null>(null);
   const [completion, setCompletion] = useState("");
   const [error, setError] = useState("");
@@ -37,6 +38,11 @@ export default function LiuyaoForm() {
   const location = useRegionLocation(provinceCode, cityCode);
   const formReady = question.trim() !== "" && location !== null;
 
+  useEffect(() => {
+    setCastActive(false);
+    setGuaData(null);
+  }, [provinceCode, cityCode, castMode, question]);
+
   function validate(): string | null {
     if (!question.trim()) {
       return "请输入问事";
@@ -92,6 +98,8 @@ export default function LiuyaoForm() {
     setCityCode("");
     setCalcDate(nowDateString());
     setCalcTime(nowTimeString());
+    setCastMode("online");
+    setCastActive(false);
     setGuaData(null);
     setCompletion("");
     setError("");
@@ -117,7 +125,7 @@ export default function LiuyaoForm() {
         />
       }
     >
-      <ZenCard title="问事 · 心意" subtitle="所求何事，心诚则灵" className="flex h-full min-h-0 flex-col">
+      <ZenCard title="问事 · 心意" subtitle="所求何事，心诚则灵">
         <Textarea
           placeholder="您想算点什么？"
           value={question}
@@ -139,7 +147,7 @@ export default function LiuyaoForm() {
         </div>
       </ZenCard>
 
-      <ZenCard title="起卦 · 时空" subtitle="地域、时辰与六爻" className="flex h-full min-h-0 flex-col">
+      <ZenCard title="起卦 · 时空" subtitle="地域、时辰与六爻">
         <RegionSelect
           label="起卦地域"
           provinceCode={provinceCode}
@@ -182,8 +190,13 @@ export default function LiuyaoForm() {
           key={castMode}
           mode={castMode}
           enabled={formReady}
+          active={castActive}
+          onStart={() => setCastActive(true)}
           onResult={handleGuaResult}
-          onClear={() => setGuaData(null)}
+          onClear={() => {
+            setGuaData(null);
+            setCastActive(false);
+          }}
         />
         {guaData && (
           <div className="rounded-xl border border-primary/20 bg-primary/5 p-4">
diff --git a/components/shared/hexagram-input.tsx b/components/shared/hexagram-input.tsx
index 230fe0d..e12168a 100644
--- a/components/shared/hexagram-input.tsx
+++ b/components/shared/hexagram-input.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { Play } from "lucide-react";
 import { bool } from "aimless.js";
 import Coin from "@/components/coin";
 import Hexagram from "@/components/hexagram";
@@ -18,6 +19,8 @@ const AUTO_DELAY = 800;
 interface HexagramInputProps {
   mode: "online" | "offline";
   enabled: boolean;
+  active: boolean;
+  onStart: () => void;
   onResult: (data: GuaResult) => void;
   onClear: () => void;
 }
@@ -25,6 +28,8 @@ interface HexagramInputProps {
 export default function HexagramInput({
   mode,
   enabled,
+  active,
+  onStart,
   onResult,
   onClear,
 }: HexagramInputProps) {
@@ -43,6 +48,14 @@ export default function HexagramInput({
     setRotation(false);
   }, [mode]);
 
+  useEffect(() => {
+    if (!active) {
+      setHexagramList([]);
+      setOfflineCounts(Array(6).fill(null));
+      setRotation(false);
+    }
+  }, [active]);
+
   const finishList = useCallback(
     (list: GuaResult["list"]) => {
       const result = computeGuaResult(list);
@@ -76,20 +89,28 @@ export default function HexagramInput({
   }, [frontList, finishList]);
 
   const startOnlineCast = useCallback(() => {
-    if (rotation || !enabled || hexagramList.length >= 6) {
+    if (rotation || !enabled || !active || hexagramList.length >= 6) {
       return;
     }
     setFrontList([bool(), bool(), bool()]);
     setRotation(true);
-  }, [rotation, enabled, hexagramList.length]);
+  }, [rotation, enabled, active, hexagramList.length]);
 
   useEffect(() => {
-    if (mode !== "online" || !enabled || rotation || complete) {
+    if (mode !== "online" || !enabled || !active || rotation || complete) {
       return;
     }
     const timer = setTimeout(startOnlineCast, AUTO_DELAY);
     return () => clearTimeout(timer);
-  }, [mode, enabled, rotation, complete, hexagramList.length, startOnlineCast]);
+  }, [
+    mode,
+    enabled,
+    active,
+    rotation,
+    complete,
+    hexagramList.length,
+    startOnlineCast,
+  ]);
 
   function handleOfflineSelect(index: number, frontCount: number) {
     const next = [...offlineCounts];
@@ -123,6 +144,20 @@ export default function HexagramInput({
     );
   }
 
+  if (!active) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-1">
+        <p className="text-center text-sm text-muted-foreground">
+          信息已填写完毕，确认无误后手动开始起卦
+        </p>
+        <Button type="button" onClick={onStart}>
+          <Play size={16} className="mr-1" />
+          开始起卦
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className="flex w-full flex-col items-center gap-4">
       {mode === "online" && (