guanwei 1.1.1

package/src/pages/HistoryPage.tsx

@@ -0,0 +1,133 @@
+// 占问记录：列表（按术筛选/搜索/删除）+ 详情（复用九术结果渲染回看）
+import { useMemo, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { getRecords, deleteRecord, getRecord } from '@/utils/recordStore';
+import { artPairOf } from '@/arts/registry';
+import { artById } from '@/data/arts';
+import SongSelect from '@/components/SongSelect';
+
+function formatTime(ts: number) {
+  const d = new Date(ts);
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+export default function HistoryPage() {
+  const { id } = useParams<{ id: string }>();
+  const [tick, setTick] = useState(0);
+  const [artFilter, setArtFilter] = useState('all');
+  const [search, setSearch] = useState('');
+
+  // 详情态：回看某次占问（复用对应术的结果渲染）
+  if (id) {
+    const rec = getRecord(id);
+    if (!rec) {
+      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="/history">返 记 录</Link></div>
+        </div>
+      );
+    }
+    const art = artById(rec.artId);
+    const pair = artPairOf(rec.artId);
+    return (
+      <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)' }}>
+        <Link className="back-link" to="/history">‹ 返记录</Link>
+        <div className="module-kicker">留痕 · {art?.name || rec.artId}</div>
+        <div className="module-title-row">
+          <h2 className="module-title"><span className="cn">{art?.name || '占问'}</span>{formatTime(rec.createdAt)}</h2>
+        </div>
+        {(rec.profile || rec.question) && (
+          <div className="result-card" style={{ marginTop: '1rem' }}>
+            {rec.question && <p className="result-text"><strong>所问：</strong>{rec.question}</p>}
+            {rec.profile && (
+              <p className="result-text tiny" style={{ marginTop: '.4rem' }}>
+                <strong>档案：</strong>{(rec.profile as any).gender || ''}{(rec.profile as any).birthDate ? ' · ' + (rec.profile as any).birthDate : ''}{(rec.profile as any).birthTime ? ' ' + (rec.profile as any).birthTime : ''}
+                {(() => { const l = (rec.profile as any).location; return l ? ' · ' + ((l as any).province || '') + ((l as any).city || '') + ((l as any).district || '') + '（' + (l as any).lng?.toFixed?.(2) + ',' + (l as any).lat?.toFixed?.(2) + '）' : ''; })()}
+              </p>
+            )}
+          </div>
+        )}
+        <div className="mt-4">
+          {pair?.Result ? <pair.Result data={rec.result} /> : <p className="result-text">此术结果暂无法回看。</p>}
+        </div>
+        <button className="btn-seal btn-ghost" style={{ marginTop: 'var(--sp-3)', fontSize: '.85rem', padding: '.4rem 1.2rem' }}
+          onClick={() => { if (confirm('确定删除此占问记录？')) { deleteRecord(rec.id); window.location.hash = '#/history'; } }}>
+          删 此 记 录
+        </button>
+      </div>
+    );
+  }
+
+  const records = useMemo(() => getRecords(), [tick, artFilter, search]);
+  const [profileFilter, setProfileFilter] = useState('all');
+  const filtered = records.filter(r => {
+    if (profileFilter !== 'all' && (r.profileId || 'main') !== profileFilter) return false;
+    if (artFilter !== 'all' && r.artId !== artFilter) return false;
+    if (search) {
+      const art = artById(r.artId);
+      if (!(art?.name || '').includes(search) && !r.id.includes(search)) return false;
+    }
+    return true;
+  });
+
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)' }}>
+      <div className="section-eyebrow">留痕 · Records</div>
+      <h2 className="section-title" style={{ marginTop: '.8rem' }}>占问记录</h2>
+      <p className="section-note">每问留痕，观照来时路。共 {records.length} 次占问（本地上限 200 条）。</p>
+
+      <div className="field-row" style={{ marginTop: 'var(--sp-3)', 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: '全部九术' }, ...['bazi', 'ziwei', 'qimen', 'meihua', 'liuyao', 'liuren', 'xiaoliuren', 'astrology', 'tarot'].map(a => ({ value: a, label: artById(a)?.name || a }))]} onChange={setArtFilter} /></div>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="result-placeholder" style={{ marginTop: 'var(--sp-5)' }}>
+          <div className="glyph">痕</div>
+          <p>{records.length ? '无契合之占 · 请易词再寻' : '尚无占问记录 · 诚心一问，方始留痕'}</p>
+        </div>
+      ) : (
+        <div className="mt-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 'var(--sp-3)' }}>
+          {filtered.map(r => {
+            const art = artById(r.artId);
+            const resultText = summarize(r.result);
+            return (
+              <div className="result-card" key={r.id} style={{ marginBottom: 0, display: 'flex', flexDirection: 'column' }}>
+                <h3 style={{ fontSize: '1rem' }}>{art?.name || r.artId}</h3>
+                <div className="tiny muted">{formatTime(r.createdAt)}</div>
+                <p className="result-text" style={{ flex: 1 }}>{resultText}</p>
+                <div style={{ display: 'flex', gap: '.6rem', marginTop: 'var(--sp-1)' }}>
+                  <Link className="pill cool" to={'/history/' + r.id}>回 看</Link>
+                  <button className="pill hot" onClick={() => { deleteRecord(r.id); setTick(t => t + 1); }}>删 除</button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 从结果中提取一行摘要（按术别取关键字段）
+function summarize(result: unknown): string {
+  const r = result as Record<string, any>;
+  if (!r) return '（结果不可读）';
+  if (r.yearGZ) return `${r.yearGZ}年 ${r.monthGZ}月 ${r.dayGZ}日 ${r.hourGZ}时 · ${r.strength || ''}`;
+  if (r.benGua) return `本卦${r.benGua.name} · ${r.bianGua ? '变' + r.bianGua.name : ''} · ${r.shengke || ''}`;
+  if (r.ju) return `${r.jqName} · ${r.yin ? '阴' : '阳'}遁${r.ju}局 · ${r.dayGZ}日`;
+  if (r.name && r.detail) return `${r.name} · ${r.detail.ji || ''} · ${r.detail.wx || ''}`;
+  if (r.jiang) return `${r.jiang}将加时 · 四课${r.ke1}/${r.ke2}/${r.ke3}/${r.ke4}`;
+  if (r.ming !== undefined) return `命宫@${r.ming} · ${r.juName || ''} · 紫微@${r.zwPos}`;
+  if (Array.isArray(r) && r[0] && r[0].name) return `${r.length} 张牌：${r.map((c: any) => c.name).join('、')}`;
+  if (r.planets) return `太阳落${signOf(r.sun)} · 月亮落${signOf(r.moon)}`;
+  if (r.yin !== undefined) return `${r.jqName || ''} · ${r.yin ? '阴' : '阳'}遁${r.ju}局`;
+  return JSON.stringify(r).slice(0, 40);
+}
+
+function signOf(lon: number): string {
+  const signs = ['白羊', '金牛', '双子', '巨蟹', '狮子', '处女', '天秤', '天蝎', '射手', '摩羯', '水瓶', '双鱼'];
+  return signs[Math.floor(((lon % 360) + 360) % 360 / 30)];
+}

package/src/pages/Home.tsx

@@ -0,0 +1,179 @@
+import { Link } from 'react-router-dom';
+import { Sparkles, Star, CircleDot, Calendar, Moon, Sun } from 'lucide-react';
+import { getCurrentZodiac, getMoonPhase, getDailyFortune } from '@/utils/astrologyCalc';
+import { useEffect, useState } from 'react';
+
+const features = [
+  {
+    title: '塔罗占卜',
+    description: '78张神秘牌面，揭示命运的多维真相',
+    icon: Sparkles,
+    path: '/tarot',
+    color: 'from-ancient/20 to-mystic/20',
+    symbol: '✦',
+  },
+  {
+    title: '紫微斗数',
+    description: '东方星命之学，解析人生格局',
+    icon: Star,
+    path: '/ziwei',
+    color: 'from-mystic/20 to-crimson/20',
+    symbol: '☆',
+  },
+  {
+    title: '四柱八字',
+    description: '天干地支之奥秘，洞察命运起伏',
+    icon: Calendar,
+    path: '/bazi',
+    color: 'from-crimson/20 to-ancient/20',
+    symbol: '☯',
+  },
+  {
+    title: '星盘占星',
+    description: '西方占星之术，解读行星语言',
+    icon: CircleDot,
+    path: '/astrology',
+    color: 'from-ancient/20 to-crimson/20',
+    symbol: '◎',
+  },
+];
+
+export default function Home() {
+  const [fortune, setFortune] = useState('');
+  const [zodiac, setZodiac] = useState('');
+  const [moonPhase, setMoonPhase] = useState('');
+
+  useEffect(() => {
+    setFortune(getDailyFortune());
+    setZodiac(getCurrentZodiac());
+    setMoonPhase(getMoonPhase());
+  }, []);
+
+  return (
+    <div className="relative min-h-screen">
+      {/* Hero Section */}
+      <section className="relative min-h-screen flex items-center justify-center px-4">
+        <div className="text-center max-w-4xl mx-auto">
+          <div className="mb-8">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-ancient/30 bg-ancient/5 mb-6">
+              <Moon className="w-4 h-4 text-ancient" />
+              <span className="text-xs text-ancient/80 tracking-widest">探索宇宙的智慧</span>
+              <Sun className="w-4 h-4 text-ancient" />
+            </div>
+          </div>
+
+          <h1 className="font-display text-5xl md:text-7xl lg:text-8xl text-ancient mb-6 tracking-wider">
+            <span className="shimmer-text">玄冥占星</span>
+          </h1>
+
+          <p className="text-stardust/60 text-lg md:text-xl max-w-2xl mx-auto mb-4 leading-relaxed">
+            东西方玄学体系的交汇之地
+          </p>
+          <p className="text-stardust/40 text-sm md:text-base max-w-xl mx-auto mb-12">
+            塔罗 · 紫微 · 四柱 · 星盘 · 组合占卜
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              to="/tarot"
+              className="inline-flex items-center justify-center gap-2 px-8 py-3 border border-ancient/50 text-ancient hover:bg-ancient/10 hover:border-ancient transition-all duration-500 rounded-sm tracking-wider text-sm"
+            >
+              <Sparkles className="w-4 h-4" />
+              开始占卜
+            </Link>
+            <Link
+              to="/history"
+              className="inline-flex items-center justify-center gap-2 px-8 py-3 border border-stardust/20 text-stardust/70 hover:border-stardust/50 hover:text-stardust transition-all duration-500 rounded-sm tracking-wider text-sm"
+            >
+              查看记录
+            </Link>
+          </div>
+        </div>
+
+        {/* Scroll indicator */}
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+          <div className="w-px h-12 bg-gradient-to-b from-ancient/50 to-transparent" />
+        </div>
+      </section>
+
+      {/* Daily Fortune */}
+      <section className="relative py-16 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="glass-panel p-6 md:p-8 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-ancient/5 rounded-full blur-3xl" />
+            <div className="absolute bottom-0 left-0 w-24 h-24 bg-mystic/5 rounded-full blur-3xl" />
+
+            <div className="relative">
+              <div className="flex items-center gap-3 mb-4">
+                <Sun className="w-5 h-5 text-ancient" />
+                <h2 className="font-display text-xl text-ancient tracking-wider">今日星象</h2>
+              </div>
+
+              <div className="flex flex-wrap gap-4 mb-4 text-sm">
+                <span className="px-3 py-1 rounded-full border border-ancient/20 text-ancient/70">
+                  太阳星座：{zodiac}
+                </span>
+                <span className="px-3 py-1 rounded-full border border-mystic/20 text-mystic/70">
+                  月相：{moonPhase}
+                </span>
+              </div>
+
+              <p className="text-stardust/70 leading-relaxed text-sm md:text-base">
+                {fortune}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="relative py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="font-display text-3xl text-ancient tracking-wider mb-3">占卜之道</h2>
+            <p className="text-stardust/50 text-sm">选择适合你的探索方式</p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {features.map((feature) => (
+              <Link
+                key={feature.path}
+                to={feature.path}
+                className="group relative"
+              >
+                <div className={`absolute inset-0 bg-gradient-to-br ${feature.color} rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
+                <div className="relative glass-panel p-6 h-full hover:border-ancient/50 transition-all duration-500">
+                  <div className="flex items-center justify-between mb-4">
+                    <feature.icon className="w-6 h-6 text-ancient/70 group-hover:text-ancient transition-colors" />
+                    <span className="text-ancient/30 text-lg group-hover:text-ancient/60 transition-colors">
+                      {feature.symbol}
+                    </span>
+                  </div>
+                  <h3 className="font-display text-lg text-stardust group-hover:text-ancient transition-colors mb-2">
+                    {feature.title}
+                  </h3>
+                  <p className="text-stardust/50 text-sm leading-relaxed">
+                    {feature.description}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative py-12 px-4 border-t border-ancient/10">
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="flex items-center justify-center gap-2 mb-4">
+            <Sparkles className="w-4 h-4 text-ancient/40" />
+            <span className="font-display text-sm text-ancient/40 tracking-wider">玄冥占星</span>
+          </div>
+          <p className="text-stardust/30 text-xs">
+            塔罗不是预言，而是镜子 · 命运掌握在你手中
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/src/pages/HomePage.tsx

@@ -0,0 +1,174 @@
+// 首页：Hero + 今日黄历/星运（占位，2.5 步接入数据）+ 九术册页 + 观微三法
+import { useEffect } from 'react';
+import { useLocation, Link } from 'react-router-dom';
+import { ARTS } from '@/data/arts';
+import { dailyAlmanac, dailySky, dailyFortune } from '@core/engine/daily';
+import { currentUser } from '@/utils/userStore';
+import { astrologyCalc } from '@core/engine/astrology';
+import { ZODIAC } from '@core/data/zodiac';
+import { useState } from 'react';
+import SealButton from '@/components/SealButton';
+import HomeSideAnchor from '@/components/HomeSideAnchor';
+
+export default function HomePage() {
+  const location = useLocation();
+  const [now] = useState(() => new Date());
+  const almanac = dailyAlmanac(now);
+  const sky = dailySky(now);
+  // 登录用户 → 按出生档案（日期/时辰/地点）算个人太阳星座 → 个性化运势
+  const user = currentUser();
+  const fortune = useUserFortune(now, user);
+
+  // 从导航「九术/法度」菜单进入时，滚动到对应锚点
+  useEffect(() => {
+    const target = (location.state as { scrollTo?: string } | null)?.scrollTo;
+    if (target) {
+      requestAnimationFrame(() => {
+        document.getElementById(target)?.scrollIntoView({ behavior: 'smooth' });
+      });
+      // 消费一次即清除，避免返回时重复滚动
+      window.history.replaceState({}, '');
+    }
+  }, [location.state]);
+
+  return (
+    <>
+      {/* ============ HERO ============ */}
+      <section className="hero" style={{ position: 'relative' }}>
+        <div className="mist" aria-hidden="true" />
+        <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
+          <p className="hero-kicker fade-up">纸墨玄境 · 玄学九术</p>
+          <h1 className="hero-title fade-up delay-1">
+            观<span className="accent">微</span>知著
+          </h1>
+          <p className="hero-line fade-up delay-2">
+            以 <em>四柱</em> 参命途，以 <em>斗数</em> 观星躔，<br />
+            以 <em>遁甲</em> 演天机，以 <em>卦象</em> 问本心。
+          </p>
+          <p className="hero-desc fade-up delay-2">
+            集八字、紫微、奇门、梅花、六爻、大六壬、小六壬、星盘、塔罗九术于一堂。<br />
+            静气凝神，焚香默坐，方得片刻清明。
+          </p>
+          <div className="hero-actions fade-up delay-3">
+            <SealButton to="/" onClick={() => document.getElementById('home-arts')?.scrollIntoView({ behavior: 'smooth' })}>
+              入九术之门
+            </SealButton>
+            <SealButton to="/art/bazi" ghost>先问八字</SealButton>
+          </div>
+          <ScrollHint />
+          <div className="hero-vert" aria-hidden="true">
+            <span>静以观微</span>
+            <span>虚以纳象</span>
+            <span>诚以问占</span>
+          </div>
+        </div>
+      </section>
+
+      {/* ============ 今日黄历 / 今日星运 ============ */}
+      <section className="wrap" id="today" style={{ scrollMarginTop: '88px', paddingBottom: 'var(--sp-6)' }}>
+        <div className="today-grid">
+          <div className="result-card">
+            <h3>今日黄历</h3>
+            <div className="result-text">
+              <p><strong>{almanac.lunarText}</strong> · {almanac.ganzhi}日 · 生肖{almanac.shengxiao}</p>
+              <p>{almanac.jieQi ? `今日节气：<strong>${almanac.jieQi}</strong> · ` : ''}月相 <strong>{almanac.yueXiang}</strong> · 冲{almanac.chong} 煞{almanac.sha}</p>
+              <p style={{ marginTop: '.4rem' }}>宜：{almanac.yi.length ? almanac.yi.map(y => <span key={y} className="pill cool">{y}</span>) : '—'}</p>
+              <p>忌：{almanac.ji.length ? almanac.ji.map(j => <span key={j} className="pill hot">{j}</span>) : '—'}</p>
+            </div>
+          </div>
+          <div className="result-card">
+            <h3>今日星运</h3>
+            <div className="result-text">
+              <p>太阳落 <strong>{sky.sunSign}</strong> · 月亮落 <strong>{sky.moonSign}</strong> · 月相 {sky.yueXiang}</p>
+              <p className="tiny muted" style={{ marginTop: '.3rem', lineHeight: 2 }}>{sky.planets.slice(0, 7).map(pl => `${pl.name}·${pl.sign}`).join('　')}</p>
+              <p style={{ marginTop: '.4rem', color: 'var(--ink)' }}><strong>{fortune.sign}运势：</strong>{fortune.text}</p>
+              <p className="tiny muted">{fortune.personalized ? '依馆中生辰档案而示。' : '入馆录生辰档案，星运可依君而示。'}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <HomeSideAnchor />
+      {/* ============ 九术册页 ============ */}
+      <div id="home-arts" style={{ scrollMarginTop: '88px', paddingTop: 'var(--sp-2)' }}>
+        <div className="wrap">
+          <div className="section-head fade-up">
+            <div className="section-eyebrow">九术总览 · Nine Arts</div>
+            <h2 className="section-title">九术册页</h2>
+            <p className="section-note">法无高下，术有专攻。择其所应，诚心则灵。</p>
+          </div>
+          <div className="arts-grid">
+            {ARTS.map((a, i) => (
+              <Link key={a.id} className="art-card" to={`/art/${a.id}`} role="button" tabIndex={0}>
+                <div className="art-num">{a.num} · {a.tag}</div>
+                <div className="art-symbol" aria-hidden="true">{a.glyph}</div>
+                <div className="art-name">{a.name}</div>
+                <div className="art-poem">{a.poem}</div>
+                <div className="art-enter">入 观 · {String(i + 1).padStart(2, '0')}</div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ============ 观微三法 ============ */}
+      <div className="about" id="home-fa" style={{ scrollMarginTop: '76px', marginTop: 'var(--sp-7)', padding: 'var(--sp-7) 0' }}>
+        <div className="wrap">
+          <div className="section-head">
+            <div className="section-eyebrow">占问之道 · Ethos</div>
+            <h2 className="section-title">观微三法</h2>
+          </div>
+          <div className="about-grid">
+            <div className="about-item">
+              <h3>静</h3>
+              <p>占问先定心。宋人焚香默坐，去浮躁而见真。凡问卜，宜独处一室，屏息凝神，一念一事，方得应验。</p>
+            </div>
+            <div className="about-item">
+              <h3>诚</h3>
+              <p>《易》曰：「匪我求童蒙，童蒙求我。」心诚则气聚，气聚则象显。同问不三占，三占必有疑，疑则不验。</p>
+            </div>
+            <div className="about-item">
+              <h3>悟</h3>
+              <p>术者，渡舟也，非彼岸也。卦象所指，是镜非命。观照自身，反求诸己，方是问道正途。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+// 登录用户：按出生日期算太阳星座（真太阳时校正时辰由档案时辰决定）
+function useUserFortune(now: Date, user: ReturnType<typeof currentUser>) {
+  if (!user) return dailyFortune(now);
+  try {
+    const [y, m, d] = user.profile.birthDate.split('-').map(Number);
+    const [bh, bm] = (user.profile.birthTime || '12:00').split(':').map(Number);
+    const r = astrologyCalc(y, m, d, bh || 0, bm || 0, user.profile.location?.lng, user.profile.location?.lat);
+    const sign = ZODIAC[Math.floor(r.sun / 30)][0] + '座';
+    return dailyFortune(now, sign);
+  } catch {
+    return dailyFortune(now);
+  }
+}
+// 首屏滚动引导：仅在首屏（Hero 可见）时显示，下滑渐隐，回顶重现
+function ScrollHint() {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const onScroll = () => {
+      const hero = document.querySelector('.hero');
+      if (!hero) return;
+      const rect = hero.getBoundingClientRect();
+      // 首屏判定：hero 底部仍在下半屏内
+      setVisible(rect.bottom > window.innerHeight * 0.55);
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+  return (
+    <div className={'scroll-hint inline-hint' + (visible ? '' : ' hidden')} aria-hidden="true">
+      <span>下滑 · 观九术</span>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M19 12l-7 7-7-7" /></svg>
+    </div>
+  );
+}