diff --git a/app/bazi/page.tsx b/app/bazi/page.tsx index 5d8d4c3..c53194b 100644 --- a/app/bazi/page.tsx +++ b/app/bazi/page.tsx @@ -4,9 +4,9 @@ import BaziForm from "@/components/modes/bazi-form"; export default function BaziPage() { return ( -
-

生辰八字

-

+

+

生辰八字

+

四柱排盘 · 十神大运 · AI 命理解读

diff --git a/app/combined/page.tsx b/app/combined/page.tsx index ccc3126..cd671cc 100644 --- a/app/combined/page.tsx +++ b/app/combined/page.tsx @@ -4,9 +4,9 @@ import CombinedForm from "@/components/modes/combined-form"; export default function CombinedPage() { return ( -
-

综合测算

-

+

+

综合测算

+

天时 · 地利 · 人和 · 六爻可选

diff --git a/app/globals.css b/app/globals.css index 0384f3d..57db292 100644 --- a/app/globals.css +++ b/app/globals.css @@ -72,7 +72,7 @@ } body { - @apply gap flex flex-col bg-background text-foreground; + @apply gap flex flex-col bg-background text-foreground zen-bg; } body { @@ -106,4 +106,20 @@ ::-webkit-scrollbar-thumb { @apply rounded-md bg-border; } + + .zen-bg { + background-image: + radial-gradient(ellipse 80% 50% at 50% -20%, hsl(40 20% 90% / 0.5), transparent), + radial-gradient(circle at 100% 100%, hsl(30 15% 92% / 0.4), transparent 40%); + } + + .dark .zen-bg { + background-image: + radial-gradient(ellipse 80% 50% at 50% -20%, hsl(30 10% 20% / 0.5), transparent), + radial-gradient(circle at 100% 100%, hsl(25 8% 15% / 0.4), transparent 40%); + } + + .zen-card-glow { + background: radial-gradient(circle, hsl(var(--primary) / 0.06) 0%, transparent 70%); + } } diff --git a/app/layout.tsx b/app/layout.tsx index 78decce..f5b7dcd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import "./globals.css"; import type { Metadata, Viewport } from "next"; import React from "react"; import Umami from "@/components/umami"; +import PwaProvider from "@/components/pwa/pwa-provider"; import { ThemeProvider } from "next-themes"; export const metadata: Metadata = { @@ -9,8 +10,11 @@ export const metadata: Metadata = { description: "知命阁 — 融合周易智慧与人工智能，提供易经学习、六爻算卦、生辰八字排盘、综合测算等服务", appleWebApp: { + capable: true, title: "知命阁", + statusBarStyle: "default", }, + manifest: "/manifest.webmanifest", }; export const viewport: Viewport = { @@ -45,6 +49,7 @@ export default function RootLayout({ disableTransitionOnChange > {children} + diff --git a/app/learn/other/page.tsx b/app/learn/other/page.tsx index e0f5cd6..07cb34b 100644 --- a/app/learn/other/page.tsx +++ b/app/learn/other/page.tsx @@ -1,5 +1,7 @@ import Link from "next/link"; import PageShell from "@/components/page-shell"; +import { GuaGrid } from "@/components/learn/gua-grid"; +import { ZenCard } from "@/components/ui/zen-card"; import { getGuaName, guaNumFromMark, @@ -8,48 +10,47 @@ import { export default async function LearnOtherPage() { const guaMarks = await listGuaMarks("simplified"); + const items = guaMarks.map((mark) => ({ + num: guaNumFromMark(mark), + name: getGuaName(mark), + href: `/learn/other/${guaNumFromMark(mark)}`, + })); return ( - -
-

易经学习 · 简体图文版

-

- 含互卦、错卦、综卦及更多注释（部分卦象图片待补全） + +

+

易经学习

+

+ 简体图文版 · 六十四卦详览

- - ← 返回繁体精简版 +
+ +
+ + +

+ 精简版卦辞，适合速读。 +

+ ← 返回 + + +

+ 含互卦、错卦、综卦及卦象图。 +

+ 已选中 +
-
- - - - - - - - - {guaMarks.map((mark) => ( - - - - - ))} - -
序号卦名
- {guaNumFromMark(mark)} - - - {getGuaName(mark)} - -
-
+ + ); } diff --git a/app/learn/page.tsx b/app/learn/page.tsx index bc164b3..4506b24 100644 --- a/app/learn/page.tsx +++ b/app/learn/page.tsx @@ -1,5 +1,7 @@ import Link from "next/link"; import PageShell from "@/components/page-shell"; +import { GuaGrid } from "@/components/learn/gua-grid"; +import { ZenCard } from "@/components/ui/zen-card"; import { getGuaName, guaNumFromMark, @@ -8,48 +10,47 @@ import { export default async function LearnPage() { const guaMarks = await listGuaMarks("traditional"); + const items = guaMarks.map((mark) => ({ + num: guaNumFromMark(mark), + name: getGuaName(mark), + href: `/learn/${guaNumFromMark(mark)}`, + })); return ( - -
-

易经学习

-

- 周易六十四卦原文详解（繁体精简版） + +

+

易经学习

+

+ 周易六十四卦 · 择卦而读

- + +
+ - 切换到简体图文版 → +

+ 张铭仁解卦等精简内容，适合快速阅读与 AI 解读引用。 +

+ 已选中 + + + +

+ 含卦象图片与更多注释，适合系统学习。 +

+ 点击进入 → +
-
- - - - - - - - - {guaMarks.map((mark) => ( - - - - - ))} - -
序号卦名
- {guaNumFromMark(mark)} - - - {getGuaName(mark)} - -
-
+ + ); } diff --git a/app/liuyao/page.tsx b/app/liuyao/page.tsx index ddfb391..79ec8c5 100644 --- a/app/liuyao/page.tsx +++ b/app/liuyao/page.tsx @@ -4,9 +4,9 @@ import LiuyaoForm from "@/components/modes/liuyao-form"; export default function LiuyaoPage() { return ( -
-

六爻算卦

-

+

+

六爻算卦

+

问事 · 起卦时空 · 线上 / 线下六爻

diff --git a/app/manifest.ts b/app/manifest.ts new file mode 100644 index 0000000..d6d57d3 --- /dev/null +++ b/app/manifest.ts @@ -0,0 +1,36 @@ +import type { MetadataRoute } from "next"; + +export default function manifest(): MetadataRoute.Manifest { + return { + name: "知命阁", + short_name: "知命阁", + description: + "融合周易智慧与人工智能 — 易经学习、六爻算卦、生辰八字、综合测算", + start_url: "/", + display: "standalone", + orientation: "portrait-primary", + background_color: "#f5f5f4", + theme_color: "#525252", + lang: "zh-CN", + icons: [ + { + src: "/apple-icon.png", + sizes: "180x180", + type: "image/png", + purpose: "any", + }, + { + src: "/apple-icon.png", + sizes: "192x192", + type: "image/png", + purpose: "maskable", + }, + { + src: "/apple-icon.png", + sizes: "512x512", + type: "image/png", + purpose: "any", + }, + ], + }; +} diff --git a/app/page.tsx b/app/page.tsx index 8437f39..27fb497 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,55 +1,65 @@ import Link from "next/link"; import PageShell from "@/components/page-shell"; import { BookOpen, BrainCircuit, Compass, Sparkles } from "lucide-react"; +import { ZenCard } from "@/components/ui/zen-card"; const MODULES = [ { href: "/learn", title: "易经学习", - description: "64 卦原文阅读，繁体精简版与简体图文版", + description: "64 卦卡片择读，繁体精简与简体图文", icon: BookOpen, + accent: "from-amber-500/10 to-transparent", }, { href: "/liuyao", title: "六爻算卦", - description: "三钱法起卦，结合卦辞 AI 智能解读", + description: "三钱法起卦，卦辞 AI 智能解读", icon: Sparkles, + accent: "from-stone-500/10 to-transparent", }, { href: "/bazi", title: "生辰八字", - description: "四柱排盘，十神大运流年，AI 命理解读", + description: "四柱排盘，十神大运，AI 命理解读", icon: BrainCircuit, + accent: "from-zinc-500/10 to-transparent", }, { href: "/combined", title: "综合测算", - description: "天时地利人和融合分析，六爻可选", + description: "天时地利人和，六爻可选", icon: Compass, + accent: "from-neutral-500/10 to-transparent", }, ]; export default function Home() { return ( - -
-

知命阁

-

+ +

+

☯

+

知命阁

+

融合周易智慧与人工智能

- {MODULES.map(({ href, title, description, icon: Icon }) => ( - -
- - {title} -
-

{description}

+ {MODULES.map(({ href, title, description, icon: Icon, accent }) => ( + + +
+ + + + {title} +
+

+ {description} +

+ ))}
diff --git a/components/header.tsx b/components/header.tsx index 099d71e..b1ff160 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -34,8 +34,8 @@ function NavLink({ href, label }: { href: string; label: string }) { export default function Header() { return ( -
-
+
+
知命阁 diff --git a/components/layout/mode-workspace.tsx b/components/layout/mode-workspace.tsx new file mode 100644 index 0000000..9f3944d --- /dev/null +++ b/components/layout/mode-workspace.tsx @@ -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 ( +
+
+
{children}
+ +
+
+ ); +} diff --git a/components/learn/gua-grid.tsx b/components/learn/gua-grid.tsx new file mode 100644 index 0000000..a7503e5 --- /dev/null +++ b/components/learn/gua-grid.tsx @@ -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 ( +
+ {items.map(({ num, name, href }) => ( + + + {num} + + + {name} + + + ))} +
+ ); +} diff --git a/components/modes/bazi-form.tsx b/components/modes/bazi-form.tsx index cf0b4c3..080867a 100644 --- a/components/modes/bazi-form.tsx +++ b/components/modes/bazi-form.tsx @@ -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 ( -
-
+ + } + > + 时辰不详 - -
- -
- {(["male", "female"] as const).map((g) => ( - - ))} -
+
+ {(["male", "female"] as const).map((g) => ( + + ))}
- + -
- -