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>
This commit is contained in:
dekun
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+129
-151
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user