guanwei 1.1.1

package/src/pages/AuthPage.tsx

@@ -0,0 +1,263 @@
+// 入馆页：注册/登录 + 档案管理（列表/编辑/切换主档案/删除）
+import { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { apiDivineHistory, apiDivineDetail, apiDivineDelete, downloadReport } from '@/services/api';
+import ReportView from '@/components/ReportView';
+import {
+  register, login, logout, currentUser, updateProfile,
+  addSampleProfile, updateSampleProfile, removeSampleProfile, promoteSampleProfile,
+  DEFAULT_PROFILE, type UserProfile, type NamedProfile,
+} from '@/utils/userStore';
+import { useConfirm } from '@/components/SongDialog';
+import { syncRecordsFromServer } from '@/utils/recordStore';
+import { syncProfileToServer } from '@/utils/userStore';
+import ProfileForm from '@/components/ProfileForm';
+import SongSelect from '@/components/SongSelect';
+
+export default function AuthPage() {
+  const navigate = useNavigate();
+  const confirm = useConfirm();
+  const [, tick] = useState(0);
+  const refresh = () => tick(x => x + 1);
+  const user = currentUser();
+  const [mode, setMode] = useState<'login' | 'register' | 'profile'>(user ? 'profile' : 'register');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [msg, setMsg] = useState('');
+  const [msgOk, setMsgOk] = useState(false);
+  // 编辑态：{ type: 'primary' } 或 { type: 'sample', id }
+  const [editing, setEditing] = useState<{ type: 'primary' } | { type: 'sample'; id: string } | null>(null); // 默认列表态
+
+  const submit = () => {
+    const r = mode === 'register' ? register(username, password) : login(username, password);
+    setMsg(r.message);
+    setMsgOk(r.ok);
+    if (r.ok) {
+      setMode('profile');
+      setEditing({ type: 'primary' });
+      navigate('/auth');
+      syncRecordsFromServer().catch(() => {});
+      if (r.user) syncProfileToServer(r.user.username, r.user.profile, r.user.samples).catch(() => {});
+    }
+  };
+
+  const saveProfile = (p: UserProfile) => {
+    if (!user) return;
+    if (editing?.type === 'primary') {
+      const u = updateProfile(p);
+      if (u) { setMsg('主档案已存'); setMsgOk(true); syncProfileToServer(u.username, u.profile, u.samples).catch(() => {}); }
+    } else if (editing?.type === 'sample') {
+      const u = updateSampleProfile(editing.id, p);
+      if (u) { setMsg('示例档案已存'); setMsgOk(true); syncProfileToServer(u.username, u.profile, u.samples).catch(() => {}); }
+    }
+    refresh();
+  };
+
+  const doLogout = () => { logout(); navigate('/'); };
+
+  // ===== 占卜历史（v6：起占自动入库，可查看/删除） =====
+  const [history, setHistory] = useState<{ divineId: string; artId: string; question: string | null; createdAt: number; hasReport: boolean; status: string }[]>([]);
+  const [histLoaded, setHistLoaded] = useState(false);
+  const [histDetail, setHistDetail] = useState<Record<string, unknown> | null>(null);
+  const refreshHistory = async () => {
+    if (!user) return;
+    try {
+      const r = await apiDivineHistory(user.username);
+      setHistory(r.list);
+      setHistLoaded(true);
+    } catch { /* 后端不可用时忽略 */ }
+  };
+  useEffect(() => { if (user) { refreshHistory(); } /* eslint-disable-next-line */ }, [user?.username]);
+  const openDetail = async (id: string) => {
+    if (!user) return;
+    const d = await apiDivineDetail(id, user.username);
+    if (d) setHistDetail(d);
+  };
+  const delHistory = async (id: string) => {
+    if (!user) return;
+    const ok = await confirm('除「此占」于史册？', { title: '慎问', confirmText: '除 之', danger: true });
+    if (ok && (await apiDivineDelete(id, user.username))) {
+      setHistory(h => h.filter(x => x.divineId !== id));
+    }
+  };
+
+  // 未登录：注册/登录
+  if (!user) {
+    return (
+      <div className="wrap page-compact" style={{ paddingBottom: 'var(--sp-6)', maxWidth: 560 }}>
+        <div className="section-eyebrow">入馆 · Gate</div>
+        <h2 className="section-title" style={{ marginTop: '.8rem' }}>观微入馆</h2>
+        <p className="section-note">录生辰档案，每日星运可依君而示；占问留痕，各归其馆。</p>
+        <div className="altar-panel" style={{ position: 'static', marginTop: 'var(--sp-4)' }}>
+          <div className="btn-row" style={{ marginBottom: 'var(--sp-3)' }}>
+            <button className={"btn-seal " + (mode === 'register' ? '' : 'btn-ghost')} style={{ fontSize: '.9rem', padding: '.45rem 1.2rem' }} onClick={() => setMode('register')}>注 册</button>
+            <button className={"btn-seal " + (mode === 'login' ? '' : 'btn-ghost')} style={{ fontSize: '.9rem', padding: '.45rem 1.2rem' }} onClick={() => setMode('login')}>登 录</button>
+          </div>
+          <div className="field"><label>名号</label><input className="input-line" placeholder="取一雅号" value={username} onChange={e => setUsername(e.target.value)} /></div>
+          <div className="field"><label>密语</label><input className="input-line" type="password" placeholder="四字以上" value={password} onChange={e => setPassword(e.target.value)} /></div>
+          <button className="btn-divine" onClick={submit}>{mode === 'register' ? '入 馆' : '入 座'}</button>
+          {msg && <p className={"mt-3 " + (msgOk ? 'tag-cool' : 'tag-hot')}>{msg}</p>}
+        </div>
+      </div>
+    );
+  }
+
+  // 编辑态：主档案或示例档案表单
+  if (editing) {
+    const target: NamedProfile | null = editing.type === 'sample'
+      ? (user.samples.find(s => s.id === editing.id) || null)
+      : null;
+    const title = editing.type === 'primary' ? '主档案（默认账号档案）' : '示例档案 · ' + (target?.name || '');
+    return (
+      <div className="wrap page-compact" style={{ paddingBottom: 'var(--sp-6)', maxWidth: 640 }}>
+        <div className="mh-row" style={{ marginBottom: 'var(--sp-3)' }}>
+          <button className="back-link" onClick={() => { setEditing(null); refresh(); }}>‹ 返档案列表</button>
+          <h2 className="page-title-compact">编 辑 · {title}</h2>
+        </div>
+        <div className="altar-panel" style={{ position: 'static', marginTop: 'var(--sp-4)' }}>
+          <ProfileForm initial={editing.type === 'primary' ? user.profile : target!.profile} onChange={saveProfile} />
+          <div className="btn-row mt-4">
+            <button className="btn-seal" style={{ fontSize: '.85rem', padding: '.45rem 1.2rem' }} onClick={() => { setEditing(null); refresh(); }}>存 档 完 成</button>
+            {editing.type === 'sample' && target && (
+              <button className="btn-seal btn-ghost" style={{ fontSize: '.85rem', padding: '.45rem 1.2rem' }} onClick={async () => {
+                const ok = await confirm('以「' + target.name + '」为主档案？原主档案将转示例。', { title: '慎问', confirmText: '设 为 主' });
+                if (ok) { promoteSampleProfile(target.id); setEditing({ type: 'primary' }); refresh(); }
+              }}>设为主档案</button>
+            )}
+            {editing.type === 'sample' && target && (
+              <button className="btn-seal btn-ghost" style={{ fontSize: '.85rem', padding: '.45rem 1.2rem' }} onClick={async () => {
+                const ok = await confirm('除「' + target.name + '」此档？', { title: '慎问', confirmText: '除 之', danger: true });
+                if (ok) { removeSampleProfile(target.id); setEditing(null); refresh(); }
+              }}>删 此 档</button>
+            )}
+          </div>
+        </div>
+        {msg && <p className={"mt-3 " + (msgOk ? 'tag-cool' : 'tag-hot')}>{msg}</p>}
+      </div>
+    );
+  }
+
+  // 列表态：主档案 + 示例档案卡片
+  return (
+    <div className="wrap page-compact" style={{ paddingBottom: 'var(--sp-6)', maxWidth: 760 }}>
+      <div className="section-eyebrow">入馆 · 档案</div>
+      <h2 className="section-title" style={{ marginTop: '.8rem' }}>吾之档案 · {user.username}</h2>
+      <p className="section-note">主档案唯一（默认账号档案）；其余为示例档案，皆可编辑、切换。</p>
+
+      <div className="profile-card primary" onClick={() => setEditing({ type: 'primary' })} role="button" tabIndex={0}>
+        <div className="pc-badge">主</div>
+        <div className="pc-body">
+          <div className="pc-title">主档案 · {user.username}</div>
+          <div className="pc-info">{profileLine(user.profile)}</div>
+        </div>
+        <div className="pc-action">编 辑 ›</div>
+      </div>
+
+      {user.samples.length === 0 ? (
+        <div className="result-placeholder" style={{ marginTop: 'var(--sp-4)', minHeight: 140 }}>
+          <div className="glyph" style={{ fontSize: '2rem' }}>档</div>
+          <p>尚无示例档案 · 排盘时可「存为示例档案」</p>
+        </div>
+      ) : (
+        <div className="mt-4" style={{ display: 'grid', gap: '.8rem' }}>
+          {user.samples.map(s => (
+            <div className="profile-card" key={s.id} onClick={() => setEditing({ type: 'sample', id: s.id })} role="button" tabIndex={0}>
+              <div className="pc-badge sample">示</div>
+              <div className="pc-body">
+                <div className="pc-title">{s.name}</div>
+                <div className="pc-info">{profileLine(s.profile)}</div>
+              </div>
+              <div className="pc-action">编 辑 ›</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 占卜历史（起占自动入库；可查看详情、可删除） */}
+      <h3 className="panel-title" style={{ marginTop: 'var(--sp-6)' }}>占卜历史 · {user.username}</h3>
+      {!histLoaded ? (
+        <p className="tiny muted" style={{ marginTop: 'var(--sp-2)' }}>载录中……</p>
+      ) : history.length === 0 ? (
+        <div className="result-placeholder" style={{ marginTop: 'var(--sp-3)', minHeight: 110 }}>
+          <div className="glyph" style={{ fontSize: '1.8rem' }}>史</div>
+          <p>尚无占卜记录 · 起占后自动载入此册</p>
+        </div>
+      ) : (
+        <div className="mt-3" style={{ display: 'grid', gap: '.6rem' }}>
+          {history.map(h => (
+            <div className="profile-card" key={h.divineId} style={{ cursor: 'pointer' }} onClick={() => openDetail(h.divineId)} role="button" tabIndex={0}>
+              <div className="pc-badge sample">{artNameOf(h.artId)}</div>
+              <div className="pc-body">
+                <div className="pc-title">{h.question || '（未书，心念已至）'}</div>
+                <div className="pc-info">
+                  {new Date(h.createdAt).toLocaleString('zh-CN')}
+                  {' · ' + (h.hasReport ? '已有 AI 报告' : h.status === 'ai_poor' ? 'AI 未成' : '仅排盘')}
+                </div>
+              </div>
+              <div className="pc-action" onClick={(e) => { e.stopPropagation(); delHistory(h.divineId); }} role="button" tabIndex={0} style={{ color: 'var(--ink-faint)' }}>删 除</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 历史详情弹层：排盘数据 + AI 报告 */}
+      {histDetail && (
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(15,25,20,.55)', zIndex: 99, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem' }} onClick={() => setHistDetail(null)}>
+          <div className="altar-panel" style={{ position: 'static', maxWidth: 720, maxHeight: '82vh', overflowY: 'auto', background: 'var(--paper)' }} onClick={e => e.stopPropagation()}>
+            <div className="mh-row" style={{ marginBottom: 'var(--sp-2)' }}>
+              <h3 className="panel-title">占 卜 详 情</h3>
+              <button className="btn-seal btn-ghost" style={{ fontSize: '.78rem', padding: '.3rem .9rem' }} onClick={() => setHistDetail(null)}>关 闭</button>
+            </div>
+            <p className="tiny muted" style={{ marginBottom: 'var(--sp-3)' }}>
+              {artNameOf(String(histDetail.artId || ''))} · {new Date(Number(histDetail.createdAt)).toLocaleString('zh-CN')}
+              {histDetail.question ? ' · 所问：' + String(histDetail.question) : ''}
+            </p>
+            {histDetail.report ? (
+              <ReportView report={histDetail.report as any} artName={artNameOf(String(histDetail.artId || ''))} onExport={() => downloadReport(histDetail.report as any, artNameOf(String(histDetail.artId || '')), String(histDetail.question || ''))} />
+            ) : (
+              <div className="result-placeholder" style={{ minHeight: 120 }}>
+                <div className="glyph" style={{ fontSize: '1.8rem' }}>盘</div>
+                <p>此占尚未召 AI 成文，仅存排盘之象</p>
+              </div>
+            )}
+            {histDetail.resultRaw && (
+              <details className="mh-intro" style={{ marginTop: 'var(--sp-2)' }}>
+                <summary>排盘原始数据</summary>
+                <pre style={{ fontSize: '.72rem', lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>{JSON.stringify(histDetail.resultRaw, null, 1)}</pre>
+              </details>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="btn-row mt-5">
+        <button className="btn-seal btn-ghost" style={{ fontSize: '.85rem', padding: '.4rem 1.2rem' }} onClick={doLogout}>离 馆</button>
+        <Link className="btn-seal" style={{ fontSize: '.85rem', padding: '.4rem 1.2rem' }} to="/">返 首 页</Link>
+      </div>
+    </div>
+  );
+}
+
+// 档案摘要行
+function profileLine(p: UserProfile): string {
+  const parts = [p.birthDate + ' ' + (p.birthTime || '--:--')];
+  parts.push('时辰' + (p.birthHourIndex + 1));
+  parts.push(p.gender);
+  if (p.location) {
+    parts.push(p.location.province + p.location.city + (p.location.district || ''));
+    parts.push(p.location.lng.toFixed(2) + '°E ' + p.location.lat.toFixed(2) + '°N');
+  } else {
+    parts.push('未录地');
+  }
+  return parts.join(' · ');
+}
+
+// 术名映射（占卜历史展示用）
+const ART_NAMES: Record<string, string> = {
+  bazi: '八字', ziwei: '紫微', astrology: '星盘',
+  qimen: '奇门', meihua: '梅花', liuyao: '六爻',
+  liuren: '大六壬', xiaoliuren: '小六壬', tarot: '塔罗',
+};
+function artNameOf(id: string): string {
+  return ART_NAMES[id] || id || '占';
+}

package/src/pages/BaZiPage.tsx

@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom';
+import { Calendar, Construction, ArrowLeft } from 'lucide-react';
+
+export default function BaZiPage() {
+  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">
+          <Calendar 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>
+  );
+}

package/src/pages/ClassicsPage.tsx

@@ -0,0 +1,120 @@
+// 古籍典藏：列表（按术筛选/搜索）+ 详情（提要/背景/篇章/原文选段·古籍话术层）
+import { useMemo, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { CLASSICS, classicById, type ClassicBook } from '@core/data/classics';
+import { ARTS } from '@/data/arts';
+import SongSelect from '@/components/SongSelect';
+
+export default function ClassicsPage() {
+  const { id } = useParams<{ id: string }>();
+  const [search, setSearch] = useState('');
+  const [artFilter, setArtFilter] = useState('all');
+
+  // 详情态
+  if (id) {
+    const book = classicById(id);
+    if (!book) {
+      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="/classics">返 典 藏</Link></div>
+        </div>
+      );
+    }
+    return <ClassicDetail book={book} />;
+  }
+
+  const filtered = useMemo(() => CLASSICS.filter(c => {
+    if (artFilter !== 'all' && !c.arts.includes(artFilter)) return false;
+    if (search && !c.title.includes(search) && !c.author.includes(search) && !c.summary.includes(search)) return false;
+    return true;
+  }), [artFilter, search]);
+
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)' }}>
+      <div className="section-eyebrow">典藏 · Classics</div>
+      <h2 className="section-title" style={{ marginTop: '.8rem' }}>古籍典藏</h2>
+      <p className="section-note">溯术数之源流，录先贤之遗文。共 {CLASSICS.length} 部典籍，每部附原文选段、注译与出处。</p>
+
+      <div className="glass-filter" style={{ marginTop: 'var(--sp-3)' }}>
+        <div className="field-row" style={{ marginTop: 0, gridTemplateColumns: '1fr 1fr' }}>
+          <div className="field">
+            <input className="input-line" placeholder="搜书名 · 作者 · 提要" value={search} onChange={e => setSearch(e.target.value)} />
+          </div>
+          <div className="field">
+            <SongSelect value={artFilter} options={[{ value: 'all', label: '全部术数' }, ...ARTS.map(a => ({ value: a.id, label: a.name }))]} onChange={setArtFilter} />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(320px,1fr))', gap: 'var(--sp-3)' }}>
+        {filtered.map(b => <ClassicCard key={b.id} book={b} />)}
+      </div>
+      {filtered.length === 0 && (
+        <div className="result-placeholder mt-4"><div className="glyph">无</div><p>无典籍契合 · 请易词再寻</p></div>
+      )}
+    </div>
+  );
+}
+
+function ClassicCard({ book }: { book: ClassicBook }) {
+  return (
+    <Link to={'/classics/' + book.id} className="result-card" style={{ textDecoration: 'none', display: 'block', marginBottom: 0 }}>
+      <h3>{book.title}</h3>
+      <div className="tiny muted" style={{ marginBottom: '.4rem' }}>{book.author} · {book.era}</div>
+      <p className="result-text" style={{ marginTop: 0 }}>{book.summary}</p>
+      <div className="mt-2">
+        {book.arts.map(a => <span key={a} className="pill cool">{ARTS.find(x => x.id === a)?.name || a}</span>)}
+      </div>
+    </Link>
+  );
+}
+
+function ClassicDetail({ book }: { book: ClassicBook }) {
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)', maxWidth: 880 }}>
+      <Link className="back-link" to="/classics">‹ 返典藏</Link>
+      <div className="module-kicker">典藏 · {book.era}</div>
+      <div className="module-title-row">
+        <h2 className="module-title"><span className="cn">{book.title.replace(/[《》]/g, '')}</span>{book.author}</h2>
+      </div>
+      <div className="mt-2" style={{ display: 'flex', gap: '.5rem', flexWrap: 'wrap' }}>
+        {book.arts.map(a => <Link key={a} className="pill cool" to={'/art/' + a}>观 {ARTS.find(x => x.id === a)?.name}</Link>)}
+      </div>
+
+      <div className="result-card mt-4">
+        <h3>提要</h3>
+        <p className="result-text">{book.summary}</p>
+        <h3 style={{ marginTop: 'var(--sp-3)' }}>成书背景</h3>
+        <p className="result-text">{book.background}</p>
+      </div>
+
+      <div className="result-card">
+        <h3>篇章</h3>
+        {book.chapters.map((c, i) => (
+          <p className="result-text" key={i}><strong>{c.title}</strong> —— {c.summary}</p>
+        ))}
+      </div>
+
+      <div className="result-card">
+        <h3>原文选段</h3>
+        {book.excerpts.map((e, i) => (
+          <div key={i} style={{ marginBottom: 'var(--sp-3)' }}>
+            <p className="tag-cool" style={{ letterSpacing: '.1em' }}><strong>{e.title}</strong></p>
+            <blockquote style={{
+              marginTop: '.5rem', padding: 'var(--sp-2) var(--sp-3)',
+              background: 'var(--paper-deep)', borderLeft: '3px solid var(--celadon)',
+              fontFamily: 'var(--font-song)', lineHeight: 2.2, color: 'var(--ink)',
+            }}>
+              {e.original}
+            </blockquote>
+            {e.translation && <p className="result-text mt-1"><strong>注译：</strong>{e.translation}</p>}
+            {e.annotation && <p className="result-text"><strong>参详：</strong>{e.annotation}</p>}
+            <p className="tiny muted mt-1">出处：{e.source}</p>
+          </div>
+        ))}
+      </div>
+      <p className="tiny muted">版本说明：{book.sourceNote}</p>
+    </div>
+  );
+}

package/src/pages/DemoPage.tsx

@@ -0,0 +1,161 @@
+// 演示模式（Demo Mode）：无需后端 / 无需 API Key 的完整体验页
+// 九术排盘用 shared/core 本地引擎在浏览器计算，AI 报告加载内置示例（静态 JSON）——GitHub Pages 上可直接体验
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { baziCalc } from '@core/engine/bazi';
+import { ziweiCalc } from '@core/engine/ziwei';
+import { astrologyCalc } from '@core/engine/astrology';
+import { qimenCalc } from '@core/engine/qimen';
+import { meihuaCalc } from '@core/engine/meihua';
+import { liuyaoCalc } from '@core/engine/liuyao';
+import { liurenCalc } from '@core/engine/liuren';
+import { xiaoliurenCalc } from '@core/engine/xiaoliuren';
+import { tarotDraw } from '@core/engine/tarot';
+import { allTarotSpreads } from '@core/data/tarotSpreads';
+import { Solar } from 'lunar-typescript';
+import { BaziResult } from '@/components/arts/BaziArt';
+import { ZiweiResult } from '@/components/arts/ZiweiArt';
+import { AstrologyResult } from '@/components/arts/AstrologyArt';
+import { QimenResultView } from '@/components/arts/QimenArt';
+import { MeihuaResult } from '@/components/arts/MeihuaArt';
+import { LiuyaoResult } from '@/components/arts/LiuyaoArt';
+import { LiurenResult } from '@/components/arts/LiurenArt';
+import { XiaoliurenResult } from '@/components/arts/XiaoliurenArt';
+import { TarotResult } from '@/components/arts/TarotArt';
+import ReportView from '@/components/ReportView';
+import { downloadReport, type AIReport } from '@/services/api';
+import sample from '@/data/sample-report.json';
+import Disclaimer from '@/components/Disclaimer';
+
+// 虚构演示档案（中性，无真实个人信息）
+const DEMO_BIRTH = { y: 1988, m: 6, d: 15, hourIndex: 6, time: '12:00', gender: '女' as const, location: { lng: 116.4, lat: 39.9, province: '北京市', city: '北京市', district: '东城区' } };
+
+// 九术本地排盘（与后端 divine.ts 同一引擎、同一输入口径）
+const ARTS: { id: string; name: string; glyph: string; calc: () => unknown }[] = [
+  { id: 'bazi', name: '四柱八字', glyph: '命', calc: () => baziCalc(DEMO_BIRTH) },
+  { id: 'ziwei', name: '紫微斗数', glyph: '星', calc: () => {
+      const lunar = Solar.fromYmd(DEMO_BIRTH.y, DEMO_BIRTH.m, DEMO_BIRTH.d).getLunar();
+      return ziweiCalc({ ganzhi: lunar.getYearInGanZhi(), month: Math.abs(lunar.getMonth()), day: lunar.getDay(), hour: DEMO_BIRTH.hourIndex, time: DEMO_BIRTH.time, location: DEMO_BIRTH.location, gender: DEMO_BIRTH.gender, birthYear: DEMO_BIRTH.y, solarDate: [DEMO_BIRTH.y, DEMO_BIRTH.m, DEMO_BIRTH.d] });
+  } },
+  { id: 'astrology', name: '古典星盘', glyph: '穹', calc: () => astrologyCalc(DEMO_BIRTH.y, DEMO_BIRTH.m, DEMO_BIRTH.d, 12, 0, DEMO_BIRTH.location.lng, DEMO_BIRTH.location.lat) },
+  { id: 'qimen', name: '奇门遁甲', glyph: '遁', calc: () => qimenCalc({ datetime: new Date() }) },
+  { id: 'meihua', name: '梅花易数', glyph: '梅', calc: () => meihuaCalc({ mode: 'time', n1: 3, n2: 5, n3: 7, now: new Date() }) },
+  { id: 'liuyao', name: '六爻', glyph: '爻', calc: () => liuyaoCalc(undefined, { y: new Date().getFullYear(), m: new Date().getMonth() + 1, d: new Date().getDate() }) },
+  { id: 'liuren', name: '大六壬', glyph: '课', calc: () => liurenCalc(new Date()) },
+  { id: 'xiaoliuren', name: '小六壬', glyph: '掌', calc: () => xiaoliurenCalc('time', new Date().getMonth() + 1, new Date().getDate(), new Date().getHours() % 12, 3, 5, 7) },
+  { id: 'tarot', name: '塔罗', glyph: '镜', calc: () => {
+      const spread = allTarotSpreads().find((x: any) => x.id === 'three') || allTarotSpreads()[0];
+      return { spread, cards: tarotDraw(3) };
+  } },
+];
+const RESULT_VIEWS: Record<string, (data: unknown) => React.ReactElement> = {
+  bazi: d => <BaziResult data={d as any} />,
+  ziwei: d => <ZiweiResult data={d as any} />,
+  astrology: d => <AstrologyResult data={d as any} />,
+  qimen: d => <QimenResultView data={d as any} />,
+  meihua: d => <MeihuaResult data={d as any} />,
+  liuyao: d => <LiuyaoResult data={d as any} />,
+  liuren: d => <LiurenResult data={d as any} />,
+  xiaoliuren: d => <XiaoliurenResult data={d as any} />,
+  tarot: d => <TarotResult data={d as any} />,
+};
+
+export default function DemoPage() {
+  const [phase, setPhase] = useState<'idle' | 'casting' | 'done'>('idle');
+  const [report, setReport] = useState<AIReport | null>(null);
+  const [showRaw, setShowRaw] = useState(false);
+  const [artId, setArtId] = useState('bazi');
+  const [localResult, setLocalResult] = useState<unknown>(null);
+  const art = ARTS.find(a => a.id === artId)!;
+  const chart = baziCalc(DEMO_BIRTH);
+
+  const reset = () => {
+    setPhase('idle');
+    setReport(null);
+    setLocalResult(null);
+    setShowRaw(false);
+  };
+
+  const start = () => {
+    setPhase('casting');
+    setReport(null);
+    setLocalResult(null);
+    // 本地引擎排盘（纯浏览器计算，无需后端）
+    setTimeout(() => {
+      try {
+        setLocalResult(art.calc());
+      } catch (e) {
+        console.error('本地排盘失败', e);
+      }
+      if (artId === 'bazi') {
+        // 八字附带示例 AI 报告（演示解读效果）
+        setReport((sample as any).report as AIReport);
+      }
+      setPhase('done');
+    }, 900);
+  };
+
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-6)' }}>
+      <section className="module-hero compact">
+        <div className="wrap">
+          <div className="mh-row">
+            <Link className="back-link" to="/">‹ 返册页</Link>
+            <h2 className="module-title"><span className="cn">体验演示</span><span className="mh-sub">无需注册 · 无需配置 · 点开即玩</span></h2>
+            <p className="mh-kicker">九种术数直接体验，八字附完整 AI 解读示例</p>
+          </div>
+        </div>
+      </section>
+
+      <div className="wrap" style={{ marginTop: 'var(--sp-4)' }}>
+        {phase === 'idle' && (
+          <div className="result-card" style={{ padding: 'var(--sp-5)' }}>
+            <p style={{ fontSize: '1.05rem', marginBottom: 'var(--sp-2)' }}>选一种术数，点一下就能看到排盘结果；八字还会附带一份完整的 AI 解读示例。</p>
+            <p className="tiny muted" style={{ marginBottom: 'var(--sp-2)' }}>示例档案：1988年6月15日 · 北京 · 女；其余术数按当前时刻起例</p>
+            <p className="tiny muted" style={{ marginBottom: 'var(--sp-3)' }}>三步即玩：① 选术数 → ② 点「开始体验」→ ③ 看结果</p>
+            <div className="art-picker" style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem', marginBottom: 'var(--sp-4)' }}>
+              {ARTS.map(a => (
+                <button key={a.id} onClick={() => setArtId(a.id)}
+                  className={"btn-seal btn-ghost" + (a.id === artId ? ' art-active' : '')}
+                  style={{ fontSize: '.85rem', padding: '.45rem 1rem', borderColor: a.id === artId ? 'var(--celadon-deep)' : undefined, color: a.id === artId ? 'var(--celadon-deep)' : undefined }}>
+                  {a.glyph} {a.name}
+                </button>
+              ))}
+            </div>
+            <button className="btn-seal" style={{ fontSize: '1rem', padding: '.7rem 2.2rem' }} onClick={start}>开 始 体 验</button>
+          </div>
+        )}
+
+        {phase === 'casting' && (
+          <div className="result-card" style={{ textAlign: 'center', padding: 'var(--sp-6)' }}>
+            <div className="casting-ring"><div className="casting-glyph" style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-zm)', fontSize: '1.6rem', color: 'var(--celadon-deep)' }}>演</div></div>
+            <p>排盘推演中 · 报告将成</p>
+          </div>
+        )}
+
+        {phase === 'done' && (
+          <>
+            <div className="altar-result stagger">
+              {localResult && RESULT_VIEWS[artId]?.(localResult)}
+              {report && (
+                <div className="result-card mt-3">
+                  <h3>AI 深度解读 <span className="tag-cool" style={{ marginLeft: '.4rem', fontSize: '.72rem' }}>示例报告</span></h3>
+                  <ReportView report={report} artName="四柱八字" onExport={() => downloadReport(report, '四柱八字', '事业与感情运势如何')} />
+                </div>
+              )}
+              <div className="btn-row mt-3 no-print">
+                <button className="btn-seal btn-ghost" style={{ fontSize: '.9rem', padding: '.5rem 1.4rem' }} onClick={reset}>重 新 演 示</button>
+                <button className="btn-seal btn-ghost" style={{ fontSize: '.9rem', padding: '.5rem 1.4rem' }} onClick={() => setShowRaw(v => !v)}>{showRaw ? '隐 藏' : '查 看'}数据（开发者）</button>
+                <Link className="btn-seal btn-ghost" style={{ fontSize: '.9rem', padding: '.5rem 1.4rem', textDecoration: 'none' }} to="/auth">体验完整功能（存档 / AI 实时解读）→</Link>
+              </div>
+              {showRaw && report && (
+                <pre style={{ fontSize: '.68rem', lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-all', background: 'rgba(251,249,243,.6)', border: '1px solid var(--line-soft)', borderRadius: 'var(--r-sm)', padding: 'var(--sp-3)', marginTop: 'var(--sp-3)' }}>{JSON.stringify(report, null, 1).slice(0, 4000)}</pre>
+              )}
+            </div>
+            <Disclaimer />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}