guanwei 1.1.1

package/src/hooks/useAIInterpret.ts

@@ -0,0 +1,76 @@
+// AI 解读状态机：idle → streaming（逐字累积）→ done（结构化段落）/ error
+import { useCallback, useRef, useState } from 'react';
+import { aiInterpretStream, type AIInterpretSection, type AIReport } from '@/services/api';
+
+export type AIStatus = 'idle' | 'streaming' | 'done' | 'error';
+
+export function useAIInterpret() {
+  const [status, setStatus] = useState<AIStatus>('idle');
+  const [text, setText] = useState('');
+  const [sections, setSections] = useState<AIInterpretSection[]>([]);
+  const [errorMsg, setErrorMsg] = useState('');
+  const [errorCode, setErrorCode] = useState('');
+  const [report, setReport] = useState<AIReport | null>(null);
+  const [truncated, setTruncated] = useState(false);
+  const [quality, setQuality] = useState<'ok' | 'poor'>('ok');
+  const abortRef = useRef<boolean>(false);
+  const doneRef = useRef<boolean>(false);
+  // 请求代际号：起占/重置会使在途请求失效，防止旧档案的流式结果回流覆盖新状态
+  const reqIdRef = useRef(0);
+
+  const interpret = useCallback(async (params: { artId: string; divineId?: string; question?: string; resultRaw?: unknown; semantic?: unknown; profile?: unknown; reportMode?: boolean; fit?: { suitable: boolean | 'partial'; reason: string; suggestion: string } }) => {
+    const myId = ++reqIdRef.current;
+    abortRef.current = false;
+    doneRef.current = false;
+    setStatus('streaming');
+    setText('');
+    setSections([]);
+    setReport(null);
+    setTruncated(false);
+    setQuality('ok');
+    setErrorMsg('');
+    setErrorCode('');
+    await aiInterpretStream(
+      params,
+      (char) => { if (reqIdRef.current === myId) setText(prev => prev + char); },
+      (secs, _full, rep, trunc, qual) => {
+        // 已重置/发起新请求 → 旧流结果作废
+        if (reqIdRef.current !== myId) return;
+        // done 事件与兜底都可能触发，仅第一次生效（flag 防重）
+        if (doneRef.current) return;
+        doneRef.current = true;
+        setSections(secs);
+        if (rep) setReport(rep);
+        else if (secs.length === 0 && !rep) setReport(null);
+        if (trunc) setTruncated(true);
+        if (qual === 'poor') setQuality('poor');
+        setStatus('done');
+      },
+      (code, message) => {
+        if (reqIdRef.current !== myId) return;
+        // 出错即锁定终态：流结束后若再触发兜底 onDone，也不得覆盖错误状态（否则会误把流式累积的原始文字当结果展示）
+        doneRef.current = true;
+        setErrorMsg(message || code);
+        setErrorCode(code);
+        setStatus('error');
+      },
+    );
+  }, []);
+
+  const reset = useCallback(() => {
+    // 使在途请求失效（旧档案的流式回调不再写入状态）
+    reqIdRef.current++;
+    abortRef.current = true;
+    doneRef.current = true;
+    setStatus('idle');
+    setText('');
+    setSections([]);
+    setErrorMsg('');
+    setErrorCode('');
+    setReport(null);
+    setTruncated(false);
+    setQuality('ok');
+  }, []);
+
+  return { status, text, sections, report, truncated, quality, errorMsg, errorCode, interpret, reset };
+}

package/src/hooks/useDivine.ts

@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react';
+
+export type DivineStatus = 'idle' | 'casting' | 'done' | 'error';
+
+export function useDivine() {
+  const [status, setStatus] = useState<DivineStatus>('idle');
+  const [result, setResult] = useState<unknown>(null);
+  const [divineId, setDivineId] = useState<string | null>(null);
+  const [errorMsg, setErrorMsg] = useState('');
+
+  // fn 为异步计算（后端 /api/divine 调用），返回 { resultRaw, divineId }
+  const divine = useCallback(async (fn: () => Promise<{ resultRaw: unknown; divineId: string }>) => {
+    setStatus('casting');
+    setResult(null);
+    setDivineId(null);
+    setErrorMsg('');
+    // 凝神片刻（保留仪式感）
+    await new Promise(r => setTimeout(r, 420));
+    try {
+      const r = await fn();
+      setResult(r.resultRaw);
+      setDivineId(r.divineId);
+      setStatus('done');
+    } catch (e: any) {
+      console.error(e);
+      setErrorMsg(e?.message || '推演未应机');
+      setStatus('error');
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setResult(null);
+    setDivineId(null);
+    setErrorMsg('');
+  }, []);
+
+  return { status, result, divineId, errorMsg, divine, reset };
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    if (savedTheme) {
+      return savedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    isDark: theme === 'dark'
+  };
+} 

package/src/index.css

@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+  }
+  
+  body {
+    @apply bg-void text-stardust font-body;
+    overflow-x: hidden;
+  }
+  
+  ::selection {
+    @apply bg-ancient/30 text-stardust;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    @apply bg-void;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    @apply bg-ancient/30 rounded-full;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-ancient/50;
+  }
+}
+
+@layer components {
+  .glass-panel {
+    @apply bg-abyss/60 backdrop-blur-md border border-ancient/20 rounded-lg;
+  }
+  
+  .gold-border {
+    @apply border border-ancient/40 hover:border-ancient/80 transition-all duration-500;
+  }
+  
+  .text-glow {
+    text-shadow: 0 0 10px rgba(201, 162, 39, 0.5), 0 0 20px rgba(201, 162, 39, 0.3);
+  }
+  
+  .card-3d {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+  
+  .card-face {
+    backface-visibility: hidden;
+  }
+  
+  .card-back {
+    transform: rotateY(180deg);
+  }
+  
+  .mystic-gradient {
+    background: linear-gradient(135deg, rgba(26,26,46,0.9) 0%, rgba(10,10,15,0.95) 100%);
+  }
+  
+  .shimmer-text {
+    background: linear-gradient(90deg, #c9a227 0%, #ffd700 50%, #c9a227 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 3s linear infinite;
+  }
+}
+
+@layer utilities {
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+  
+  .preserve-3d {
+    transform-style: preserve-3d;
+  }
+  
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
+  
+  .rotate-y-180 {
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% center; }
+  100% { background-position: -200% center; }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(201, 162, 39, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
+  }
+}
+
+@keyframes typing-cursor {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fade-in 0.5s ease-out forwards;
+  }
+  
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+  }
+  
+  .animate-pulse-glow {
+    animation: pulse-glow 2s ease-in-out infinite;
+  }
+  
+  .animate-typing-cursor {
+    animation: typing-cursor 1s step-end infinite;
+  }
+}
+
+/* ===== 打印 / 存为 PDF：仅打印报告区 ===== */
+@media print {
+  /* 只打印报告区：display:none 释放布局空间（visibility 会保留占位导致空白页） */
+  body { background: #fff !important; }
+  header, footer, nav, aside, .site-head, .site-nav, .back-link,
+  .module-hero, .mh-intro, .mh-row, .altar-panel, .fit-card, .fit-note,
+  .btn-row, .ai-streaming, .ai-error, .result-placeholder, .disclaimer,
+  .d-title, .motes, .ink-vein, .bamboo, .cal-grid, .profile-card, .no-print { display: none !important; }
+  main { display: block !important; padding: 0 !important; }
+  .wrap { max-width: none !important; padding: 0 !important; }
+  .altar { display: block !important; }
+  .altar-result { width: 100% !important; max-width: none !important; }
+  .report-view { color: #000 !important; background: #fff !important; }
+  /* 卡片允许跨页（避免整卡跳页在前页留白）；仅小元素防截断 */
+  .report-view .result-card {
+    break-inside: auto;
+    border: 1px solid #ddd !important;
+    background: #fff !important;
+    box-shadow: none !important;
+    color: #000 !important;
+    margin-bottom: 6mm;
+  }
+  .report-view .result-card h3 { break-after: avoid; }
+  .report-view .domain-cell, .report-view li, .report-view .traits-grid .trait { break-inside: avoid; }
+  .report-view .result-title { break-after: avoid; }
+  .report-view .result-text, .report-view p, .report-view li, .report-view h3 { color: #000 !important; }
+  .report-view .domain-name { color: #555 !important; }
+  @page { margin: 12mm; }
+}
+
+@keyframes pulse-soft {
+  0%, 100% { opacity: .55; }
+  50% { opacity: 1; }
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+import './styles/tokens.css'
+import './styles/song.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/pages/AboutPage.tsx

@@ -0,0 +1,25 @@
+// 缘起页（古风提示层文案）
+import SealButton from '@/components/SealButton';
+
+import BambooArt from '@/components/BambooArt';
+
+export default function AboutPage() {
+  return (
+    <div className="page-decor" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)' }}>
+      <BambooArt />
+      <div className="wrap">
+      <div className="section-eyebrow">缘起 · Origin</div>
+      <h2 className="section-title" style={{ marginTop: '.8rem', fontSize: 'var(--fs-2xl)' }}>观微缘起</h2>
+      <div className="result-text mt-4" style={{ maxWidth: '70ch' }}>
+        <p>以纸墨为衣、以留白为韵。玄学问道，贵在内敛沉静——「致虚极，守静笃」，此与观照自身的功夫，本出一源。</p>
+        <p>本馆以纸墨之雅为衣，纳九派术数为里——<strong>四柱八字</strong>论命之经纬，<strong>紫微斗数</strong>布星之宫垣，<strong>奇门遁甲</strong>演时之局盘，<strong>梅花易数</strong>观物之象数，<strong>六爻</strong>承蓍龟之遗法，<strong>大六壬</strong>推天地人三传，<strong>小六壬</strong>藏掐指之玄机，<strong>星盘</strong>应西洋之天穹，<strong>塔罗</strong>照潜识之幽微。</p>
+        <p>术数有中西，观照本无二。愿君于这一方纸墨之间，静得片刻，观微知著。</p>
+      </div>
+      <div className="separator">· · ·</div>
+      <div className="center">
+        <SealButton to="/" onClick={() => {}} ghost>启程问占</SealButton>
+      </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/AcademyPage.tsx

@@ -0,0 +1,128 @@
+// 观微学馆：课程列表（分组）+ 课程详情（章节 + 练习自检）
+import { useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { COURSES, courseById, type Course } from '@core/data/courses';
+import { classicById } from '@core/data/classics';
+import { ARTS } from '@/data/arts';
+
+const artName = (art: string) => {
+  if (art === 'foundation') return '入门基础';
+  if (art === 'dao') return '占问之道';
+  return ARTS.find(a => a.id === art)?.name || art;
+}
+
+export default function AcademyPage() {
+  const { id } = useParams<{ id: string }>();
+
+  if (id) {
+    const course = courseById(id);
+    if (!course) {
+      return (
+        <div className="wrap page-compact" style={{ paddingTop: 'var(--sp-4)', textAlign: 'center' }}>
+          <div className="result-placeholder"><div className="glyph">佚</div><p>课程未寻得 · 请返学馆再择</p></div>
+          <div className="mt-4"><Link className="btn-seal btn-ghost" to="/academy">返 学 馆</Link></div>
+        </div>
+      );
+    }
+    return <CourseDetail course={course} />;
+  }
+
+  const groups = ['foundation', 'dao', ...ARTS.map(a => a.id)];
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)' }}>
+      <div className="section-eyebrow">学馆 · Academy</div>
+      <h2 className="section-title" style={{ marginTop: '.8rem' }}>观微学馆</h2>
+      <p className="section-note">入门基础 · 各术入门 · 占问之道，循序渐进。共 {COURSES.length} 门课程。</p>
+      {groups.map(g => {
+        const list = COURSES.filter(c => c.art === g);
+        if (!list.length) return null;
+        return (
+          <div key={g} className="mt-5">
+            <h3 className="tag-cool" style={{ letterSpacing: '.25em', marginBottom: 'var(--sp-2)' }}>{artName(g)}</h3>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 'var(--sp-3)' }}>
+              {list.map(c => (
+                <Link key={c.id} to={'/academy/' + c.id} className="result-card" style={{ textDecoration: 'none', display: 'block', marginBottom: 0 }}>
+                  <h3>{c.title}</h3>
+                  <p className="result-text" style={{ marginTop: 0 }}>{c.summary}</p>
+                  <div className="mt-2">
+                    <span className="pill">{c.level}</span>
+                    <span className="pill cool">{c.chapters.length} 章 · {c.exercises.length} 练</span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function CourseDetail({ course }: { course: Course }) {
+  const [answers, setAnswers] = useState<Record<number, string>>({});
+  const [checked, setChecked] = useState<Record<number, boolean>>({});
+  const check = (i: number) => setChecked(prev => ({ ...prev, [i]: true }));
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)', maxWidth: 880 }}>
+      <Link className="back-link" to="/academy">‹ 返学馆</Link>
+      <div className="module-kicker">学馆 · {artName(course.art)}</div>
+      <div className="module-title-row">
+        <h2 className="module-title"><span className="cn">{course.title}</span>{course.level}</h2>
+      </div>
+      <p className="module-intro">{course.summary}</p>
+
+      <div className="result-card mt-4">
+        <h3>讲义</h3>
+        {course.chapters.map((ch, i) => (
+          <div key={i} style={{ marginBottom: 'var(--sp-2)' }}>
+            <p className="tag-cool"><strong>{i + 1}. {ch.title}</strong></p>
+            <p className="result-text">{ch.body}</p>
+          </div>
+        ))}
+      </div>
+
+      {course.exercises.length > 0 && (
+        <div className="result-card">
+          <h3>小试牛刀</h3>
+          {course.exercises.map((ex, i) => {
+            const isRight = checked[i] && (answers[i] || '').trim() === ex.answer;
+            return (
+              <div key={i} style={{ marginBottom: 'var(--sp-3)' }}>
+                <p className="result-text"><strong>练习 {i + 1}：</strong>{ex.prompt}</p>
+                <div className="btn-row" style={{ gap: '.6rem', marginTop: '.4rem' }}>
+                  <input
+                    className="input-line"
+                    style={{ maxWidth: 320 }}
+                    placeholder="书答案于此"
+                    value={answers[i] || ''}
+                    onChange={e => { setAnswers(prev => ({ ...prev, [i]: e.target.value })); setChecked(prev => ({ ...prev, [i]: false })); }}
+                    disabled={checked[i]}
+                  />
+                  {!checked[i] && <button className="btn-seal" style={{ fontSize: '.8rem', padding: '.35rem 1rem' }} onClick={() => check(i)}>自 检</button>}
+                </div>
+                {checked[i] && (
+                  <p className={"mt-1 " + (isRight ? 'tag-cool' : 'tag-hot')}>
+                    <strong>{isRight ? '对 · 甚善' : '未中 · 再思'}　</strong>
+                    {isRight ? ex.explain : '参考答案：' + ex.answer + '。' + ex.explain}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {course.relatedClassics.length > 0 && (
+        <div className="result-card">
+          <h3>延伸典藏</h3>
+          <div style={{ display: 'flex', gap: '.5rem', flexWrap: 'wrap' }}>
+            {course.relatedClassics.map(id2 => {
+              const b = classicById(id2);
+              return b ? <Link key={id2} className="pill" to={'/classics/' + id2}>{b.title}</Link> : null;
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/pages/AstrologyPage.tsx

@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom';
+import { CircleDot, Construction, ArrowLeft } from 'lucide-react';
+
+export default function AstrologyPage() {
+  return (
+    <div className="relative min-h-screen pt-20 pb-16 px-4 flex items-center justify-center">
+      <div className="max-w-2xl mx-auto text-center">
+        <div className="glass-panel p-12">
+          <CircleDot className="w-16 h-16 text-ancient/40 mx-auto mb-6" />
+          <h1 className="font-display text-3xl text-ancient tracking-wider mb-4">
+            星盘占星
+          </h1>
+          <p className="text-stardust/60 mb-2">西方占星之术，解读行星语言</p>
+          <div className="flex items-center justify-center gap-2 text-mystic/60 mb-8">
+            <Construction className="w-4 h-4" />
+            <span className="text-sm">功能开发中</span>
+          </div>
+          <p className="text-stardust/40 text-sm mb-8 leading-relaxed">
+            星盘占星通过计算出生时各行星在黄道十二宫的位置，绘制出个人出生星盘。
+            此功能将集成完整的星盘绘制、相位分析和推运系统。
+          </p>
+          <Link
+            to="/tarot"
+            className="inline-flex items-center gap-2 px-6 py-2 border border-ancient/50 text-ancient hover:bg-ancient/10 transition-all rounded-sm text-sm"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            先体验塔罗占卜
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}