guanwei 1.1.1

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+// 错误边界：任何页面渲染崩溃时显示古风占位，避免白屏
+import { Component } from 'react';
+import type { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+interface State { hasError: boolean; message: string }
+
+export default class ErrorBoundary extends Component<{ children: ReactNode }, State> {
+  state: State = { hasError: false, message: '' };
+
+  static getDerivedStateFromError(e: unknown): State {
+    return { hasError: true, message: e instanceof Error ? e.message : '未知之虞' };
+  }
+
+  componentDidCatch(e: unknown) {
+    console.error('[观微] 页面异常:', e);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="wrap" style={{ paddingTop: 'var(--sp-8)', textAlign: 'center' }}>
+          <div className="result-placeholder">
+            <div className="glyph">滞</div>
+            <p>此页一时未应机 · 请返首页再试</p>
+            <p className="tiny muted" style={{ marginTop: '.4rem' }}>{this.state.message}</p>
+          </div>
+          <div className="mt-4">
+            <Link className="btn-seal" to="/" onClick={() => this.setState({ hasError: false })}>
+              <span className="sb-label">返 首 页</span>
+            </Link>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/components/HomeSideAnchor.tsx

@@ -0,0 +1,62 @@
+// 首页左侧锚点目录（竖向固定）：观微之始 / 今日黄历 / 今日星运 / 九术册页 / 观微三法
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ANCHORS = [
+  { id: 'top', label: '观微之始' },
+  { id: 'today', label: '今日黄历' },
+  { id: 'home-arts', label: '九术册页' },
+  { id: 'home-fa', label: '观微三法' },
+];
+
+export default function HomeSideAnchor() {
+  const [active, setActive] = useState('top');
+  const location = useLocation();
+
+  // 跨页跳转带锚点时滚动
+  useEffect(() => {
+    const target = (location.state as { scrollTo?: string } | null)?.scrollTo;
+    if (target) {
+      requestAnimationFrame(() => {
+        if (target === 'top') window.scrollTo({ top: 0, behavior: 'smooth' });
+        else document.getElementById(target)?.scrollIntoView({ behavior: 'smooth' });
+      });
+    }
+  }, [location.state]);
+
+  // 滚动跟随
+  useEffect(() => {
+    const onScroll = () => {
+      const pos = window.scrollY + 140;
+      let cur = 'top';
+      for (const a of ANCHORS) {
+        const el = document.getElementById(a.id);
+        if (el && el.offsetTop <= pos) cur = a.id;
+      }
+      setActive(cur);
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  const go = (id: string) => {
+    if (id === 'top') window.scrollTo({ top: 0, behavior: 'smooth' });
+    else document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <nav className="side-anchor" aria-label="首页目录">
+      {ANCHORS.map(a => (
+        <button
+          key={a.id}
+          className={active === a.id ? 'active' : ''}
+          onClick={() => go(a.id)}
+        >
+          <span className="dot" />
+          {a.label}
+        </button>
+      ))}
+    </nav>
+  );
+}

package/src/components/InkVein.tsx

@@ -0,0 +1,10 @@
+// 韵脚暗纹：右侧竖排淡墨诗句 + 流动云纹暗纹层 + 朱砂小印
+export default function InkVein() {
+  return (
+    <div id="ink-vein" aria-hidden="true">
+      <div className="vein-lines" />
+      <div className="vein-poem">静以观微 · 虚以纳象 · 诚以问占</div>
+      <div className="vein-seal">观微</div>
+    </div>
+  );
+}

package/src/components/LifeEventsInput.tsx

@@ -0,0 +1,47 @@
+// 人生经历校准输入：记录命主已知人生事件（年份 + 事件），AI 解读时呼应并不得矛盾
+import { useState } from 'react';
+
+export interface LifeEvent { year: number; text: string }
+
+interface Props {
+  value: LifeEvent[];
+  onChange: (events: LifeEvent[]) => void;
+}
+
+const toText = (evs: LifeEvent[]) => evs.map(e => e.year + ' ' + e.text).join('\n');
+
+const parseText = (s: string): LifeEvent[] => s
+  .split('\n').map(l => l.trim()).filter(Boolean)
+  .map(l => {
+    const m = /^(\d{4})\s*(.*)$/.exec(l);
+    return m ? { year: Number(m[1]), text: (m[2] || '重要事件').slice(0, 40) } : null;
+  })
+  .filter((e): e is LifeEvent => !!e && e.year >= 1900 && e.year <= 2100)
+  .sort((a, b) => a.year - b.year);
+
+export default function LifeEventsInput({ value, onChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(toText(value));
+
+  const commit = () => onChange(parseText(draft));
+
+  return (
+    <div className="life-events" style={{ marginTop: '.4rem' }}>
+      <button type="button" className="btn-seal btn-ghost" style={{ fontSize: '.82rem', padding: '.4rem 1rem' }} onClick={() => setOpen(v => !v)}>
+        {open ? '收 起' : '📌 补充人生经历（解读校准）'}
+        {value.length > 0 && <span className="tag-cool" style={{ marginLeft: '.4rem' }}>已录 {value.length} 条</span>}
+      </button>
+      {open && (
+        <div style={{ marginTop: '.6rem' }}>
+          <p className="tiny muted" style={{ marginBottom: '.3rem' }}>每行一条：「年份 关键事件」——AI 解读将在对应流年处呼应这些经历，且不与它们矛盾（3-10 条为宜）</p>
+          <textarea className="input-line" rows={5} value={draft} onChange={e => setDraft(e.target.value)}
+            placeholder={'2004 家庭变故\n2016 换城市\n2020 换工作\n2022 结婚\n2024 健康问题'} />
+          <div className="btn-row" style={{ marginTop: '.4rem' }}>
+            <button className="btn-seal" style={{ fontSize: '.82rem', padding: '.35rem 1rem' }} onClick={commit}>保 存 校 准</button>
+            {value.length > 0 && <span className="tiny muted" style={{ alignSelf: 'center' }}>共 {value.length} 条，随排盘一同提交</span>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LocationPicker.tsx

@@ -0,0 +1,117 @@
+// 出生地点选择器：省 → 市 → 区 三级级联 + 经纬度/真太阳时预览
+import { useEffect, useState } from 'react';
+import { allProvinces, citiesOf, districtsOf, resolveLocation, type GeoSelection } from '@core/data/region';
+import SongSearchSelect from '@/components/SongSearchSelect';
+import { trueSolarTime } from '@core/engine/trueSolarTime';
+
+interface Props {
+  value: GeoSelection | null;
+  onChange: (v: GeoSelection | null) => void;
+  // 可选的时刻预览（真太阳时校正显示；hourIndex 0-11）
+  previewHourIndex?: number;
+}
+
+const HOUR_LABELS = ['子时', '丑时', '寅时', '卯时', '辰时', '巳时', '午时', '未时', '申时', '酉时', '戌时', '亥时'];
+
+export default function LocationPicker({ value, onChange, previewHourIndex }: Props) {
+  const [province, setProvince] = useState(value?.province ?? '');
+  const [city, setCity] = useState(value?.city ?? '');
+  const [district, setDistrict] = useState(value?.district ?? '');
+  // 手动经纬度（乡镇/村兜底，优先于行政区划）
+  const [manual, setManual] = useState(false);
+  const [lngTxt, setLngTxt] = useState('');
+  const [latTxt, setLatTxt] = useState('');
+
+  // 外部 value 变化同步（档案切换/回显）：有行政区划则回显省市区；无省名（手动定位来源）则回显手动坐标
+  useEffect(() => {
+    if (!value) return;
+    if (value.province && value.district !== '手动定位') {
+      setProvince(value.province);
+      setCity(value.city || '');
+      setDistrict(value.district || '');
+    } else if (value.lng !== undefined && value.lat !== undefined) {
+      setManual(true);
+      setLngTxt(String(value.lng));
+      setLatTxt(String(value.lat));
+      if (value.province) setProvince(value.province);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value?.province, value?.city, value?.district, value?.lng, value?.lat]);
+
+  // 显示名归一化（档案里可能是无后缀名，如「广东」→「广东省」）
+  const provNames = allProvinces();
+  const provShow = provNames.includes(province) ? province : (provNames.find(p => p.replace(/壮族自治区|回族自治区|维吾尔自治区|特别行政区|自治区|省|市$/, '') === province.replace(/壮族自治区|回族自治区|维吾尔自治区|特别行政区|自治区|省|市$/, '')) || province);
+  const cities = citiesOf(provShow);
+  const districts = districtsOf(provShow, city);
+
+  const handleProvince = (v: string) => {
+    setProvince(v); setCity(''); setDistrict('');
+    onChange(null);
+  };
+  const handleCity = (v: string) => {
+    setCity(v); setDistrict('');
+    onChange(null);
+  };
+  const handleDistrict = (v: string) => {
+    setDistrict(v);
+    const sel = resolveLocation(province, city, v || '城区');
+    onChange(sel);
+  };
+
+  const manualLng = parseFloat(lngTxt);
+  const manualLat = parseFloat(latTxt);
+  const manualValid = manual && !isNaN(manualLng) && !isNaN(manualLat) && Math.abs(manualLng) <= 180 && Math.abs(manualLat) <= 90;
+  const manualSel: GeoSelection | null = manualValid ? { province, city, district: district || '手动定位', lng: manualLng, lat: manualLat } : null;
+  const sel = manualSel ?? resolveLocation(province, city, district || '城区');
+
+  return (
+    <div>
+      <div className="field-row">
+        <div className="field">
+          <label htmlFor="loc-province">省份</label>
+          <SongSearchSelect id="loc-province" value={provShow} placeholder="择省…" options={provNames.map(p => ({ value: p, label: p }))} onChange={handleProvince} />
+        </div>
+        <div className="field">
+          <label htmlFor="loc-city">城市</label>
+          <SongSearchSelect id="loc-city" value={city} placeholder="择市…" options={cities.map(c => ({ value: c.name, label: c.name }))} onChange={handleCity} disabled={!province} />
+        </div>
+      </div>
+      <div className="field">
+        <label htmlFor="loc-district">县/区（选至区县；乡镇村请用下方手动定位）</label>
+        <SongSearchSelect id="loc-district" value={district} placeholder="择区/县…" options={districts.map(d => ({ value: d.name, label: d.name }))} onChange={handleDistrict} disabled={!city} allowCustom />
+      </div>
+      <div className="field">
+        <label style={{ display: 'flex', alignItems: 'center', gap: '.5rem', cursor: 'pointer' }}>
+          <input type="checkbox" checked={manual} onChange={e => { setManual(e.target.checked); onChange(manualSel); }} style={{ width: 'auto' }} />
+          手动定位（乡镇/村等未收录地点：从地图 App 获取经纬度填入）
+        </label>
+        {manual && (
+          <div className="field-row" style={{ marginTop: '.4rem' }}>
+            <div className="field"><label htmlFor="loc-lng">东经（如 121.796）</label>
+              <input className="input-line" id="loc-lng" type="number" step="0.0001" placeholder="121.796" value={lngTxt} onChange={e => { setLngTxt(e.target.value); onChange(manualValid ? manualSel : null); }} /></div>
+            <div className="field"><label htmlFor="loc-lat">北纬（如 41.599）</label>
+              <input className="input-line" id="loc-lat" type="number" step="0.0001" placeholder="41.599" value={latTxt} onChange={e => { setLatTxt(e.target.value); onChange(manualValid ? manualSel : null); }} /></div>
+          </div>
+        )}
+      </div>
+      {sel && !manual && district && !districts.some(d => d.name === district) && (
+        <p className="hint" style={{ color: 'var(--cinnabar)' }}>该区县未收录坐标，暂以城市中心计；如需乡镇/村级精度，请勾选手动定位。</p>
+      )}
+      {manualValid && <p className="hint" style={{ color: 'var(--celadon-deep)' }}>已用手动坐标（优先于行政区划）</p>}
+      {sel && (
+        <p className="hint">
+          经纬 {sel.lng.toFixed(2)}°E · {sel.lat.toFixed(2)}°N
+          {previewHourIndex !== undefined && (() => {
+            // 真太阳时预览：按时辰中点估算
+            const hour = (previewHourIndex * 2) % 24;
+            const t = trueSolarTime(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), hour, 0, sel.lng, false);
+            const corrected = Math.floor(t.trueSolarHours);
+            const mins = Math.round((t.trueSolarHours - corrected) * 60);
+            const correctedIdx = Math.floor(((t.trueSolarHours + 1) % 24) / 2);
+            return ` · ${HOUR_LABELS[previewHourIndex]}校正为 ${String(corrected).padStart(2, '0')}:${String(mins).padStart(2, '0')}（${HOUR_LABELS[correctedIdx]}）`;
+          })()}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/Motes.tsx

@@ -0,0 +1,65 @@
+// 墨尘粒子：玄学字符漂浮（借鉴「青囊」motes 动效，宋式淡墨风格）
+// 固定种子生成位置，组件内稳定；负延迟错峰 + 各异时长实现自然漂移
+import { useMemo } from 'react';
+
+const GLYPHS = [
+  '甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸',
+  '子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥',
+  '观', '微', '知', '著', '星', '卦', '易', '遁', '命', '课', '掌', '镜', '穹', '历', '参', '悟',
+];
+
+function mulberry32(seed: number) {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0; a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+interface MoteSpec {
+  glyph: string;
+  left: string;
+  top: string;
+  delay: string;
+  duration: string;
+  drift: string;
+  size: string;
+}
+
+export default function Motes({ count = 22, seed = 20260818 }: { count?: number; seed?: number }) {
+  const specs = useMemo<MoteSpec[]>(() => {
+    const rnd = mulberry32(seed);
+    return Array.from({ length: count }, () => ({
+      glyph: GLYPHS[Math.floor(rnd() * GLYPHS.length)],
+      left: (rnd() * 96).toFixed(1) + '%',
+      top: (rnd() * 88).toFixed(1) + '%',
+      delay: (-rnd() * 14).toFixed(2) + 's',
+      duration: (7 + rnd() * 6).toFixed(2) + 's',
+      drift: (-(rnd() * 26 - 13)).toFixed(0) + 'px',
+      size: (0.6 + rnd() * 0.9).toFixed(2) + 'rem',
+    }));
+  }, [count, seed]);
+
+  return (
+    <div className="motes" aria-hidden="true">
+      {specs.map((s, i) => (
+        <span
+          key={i}
+          className="mote"
+          style={{
+            left: s.left,
+            top: s.top,
+            animationDelay: s.delay,
+            animationDuration: s.duration,
+            ['--mote-drift' as string]: s.drift,
+            fontSize: s.size,
+          }}
+        >
+          {s.glyph}
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/components/Navigation.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router-dom';
+import { useState } from 'react';
+import { Sparkles, History, Menu, X, Library } from 'lucide-react';
+
+const navItems = [
+  { path: '/', label: '首页', icon: Sparkles },
+  { path: '/tarot', label: '塔罗占卜', icon: Sparkles },
+  { path: '/spread-library', label: '牌阵库', icon: Library },
+  { path: '/history', label: '历史记录', icon: History },
+];
+
+export default function Navigation() {
+  const location = useLocation();
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-void/80 backdrop-blur-md border-b border-ancient/20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <Link to="/" className="flex items-center gap-2 group">
+            <Sparkles className="w-6 h-6 text-ancient group-hover:animate-pulse-glow" />
+            <span className="font-display text-xl text-ancient tracking-wider">玄冥占星</span>
+          </Link>
+
+          {/* Desktop nav */}
+          <div className="hidden md:flex items-center gap-8">
+            {navItems.map((item) => {
+              const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + '/');
+              return (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  className={`relative text-sm tracking-wide transition-colors duration-300 ${
+                    isActive ? 'text-ancient' : 'text-stardust/70 hover:text-ancient'
+                  }`}
+                >
+                  {item.label}
+                  {isActive && (
+                    <span className="absolute -bottom-1 left-0 right-0 h-px bg-ancient animate-pulse-glow" />
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden text-stardust/70 hover:text-ancient"
+            onClick={() => setMobileOpen(!mobileOpen)}
+          >
+            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile nav */}
+      {mobileOpen && (
+        <div className="md:hidden bg-void/95 backdrop-blur-md border-t border-ancient/20">
+          <div className="px-4 py-4 space-y-3">
+            {navItems.map((item) => {
+              const isActive = location.pathname === item.path;
+              return (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setMobileOpen(false)}
+                  className={`block py-2 text-sm tracking-wide ${
+                    isActive ? 'text-ancient' : 'text-stardust/70'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

package/src/components/ProfileForm.tsx

@@ -0,0 +1,40 @@
+// 档案编辑表单：出生日期（公历/农历）+ 精确时刻 + 性别 + 出生地点
+import { useState } from 'react';
+import DateInput from '@/components/DateInput';
+import TimeShichenInput from '@/components/TimeShichenInput';
+import LocationPicker from '@/components/LocationPicker';
+import SongSelect from '@/components/SongSelect';
+import type { GeoLocation } from '@core/types';
+import type { UserProfile } from '@/utils/userStore';
+import { timeToHourIndex } from '@/data/shichen';
+
+interface Props {
+  initial: UserProfile;
+  onChange: (p: UserProfile) => void;
+}
+
+export default function ProfileForm({ initial, onChange }: Props) {
+  const [date, setDate] = useState(initial.birthDate);
+  const [time, setTime] = useState(initial.birthTime || '12:00');
+  const [gender, setGender] = useState<'男' | '女'>(initial.gender);
+  const [loc, setLoc] = useState<GeoLocation | null>(initial.location);
+  const emit = (patch: Partial<UserProfile>) => {
+    onChange({
+      birthDate: patch.birthDate ?? date,
+      birthTime: patch.birthTime ?? time,
+      birthHourIndex: timeToHourIndex(patch.birthTime ?? time),
+      gender: patch.gender ?? gender,
+      location: patch.location !== undefined ? patch.location : loc,
+    });
+  };
+  return (
+    <>
+      <div className="field"><label>出生日期（公历 / 农历）</label><DateInput value={date} onChange={v => { setDate(v); emit({ birthDate: v }); }} /></div>
+      <div className="field"><label>出生时刻（精确）</label><TimeShichenInput value={time} onChange={v => { setTime(v); emit({ birthTime: v }); }} /></div>
+      <div className="field-row">
+        <div className="field"><label>性别</label><SongSelect value={gender} options={[{ value: '男', label: '男' }, { value: '女', label: '女' }]} onChange={v => { setGender(v as '男' | '女'); emit({ gender: v as '男' | '女' }); }} /></div>
+      </div>
+      <div className="field"><label>出生地点</label><LocationPicker value={loc} onChange={v => { setLoc(v); emit({ location: v }); }} previewHourIndex={timeToHourIndex(time)} /></div>
+    </>
+  );
+}

package/src/components/ProfilePicker.tsx

@@ -0,0 +1,40 @@
+// 档案选择器：从已存档案（主档案 + 示例档案）填充面板输入
+import { useState } from 'react';
+import { currentUser, type UserProfile } from '@/utils/userStore';
+import SongSelect from '@/components/SongSelect';
+
+interface Props {
+  onPick: (p: UserProfile, source?: { id: string; name: string }) => void;
+  onPicked?: () => void;
+}
+
+export default function ProfilePicker({ onPick, onPicked }: Props) {
+  const user = currentUser();
+  const [value, setValue] = useState('');
+  if (!user) return null;
+  const items = [
+    { value: 'primary', label: '主档案 · ' + (user.profile.birthDate || '未录') },
+    ...user.samples.map(s => ({ value: s.id, label: s.name + ' · ' + (s.profile.birthDate || '未录') })),
+  ];
+  if (items.length <= 1) return null;
+  const pick = (v: string) => {
+    if (v === 'primary') onPick(user.profile, { id: 'main', name: '主档案' });
+    else {
+      const s = user.samples.find(x => x.id === v);
+      if (s) onPick(s.profile, { id: s.id, name: s.name });
+    }
+    setValue('');
+    onPicked?.();
+  };
+  return (
+    <div className="field" style={{ marginTop: 'var(--sp-2)' }}>
+      <label>取自档案</label>
+      <SongSelect
+        value={value}
+        placeholder="择档案以填…"
+        options={items}
+        onChange={pick}
+      />
+    </div>
+  );
+}

package/src/components/QuestionFields.tsx

@@ -0,0 +1,47 @@
+// 所问之事的统一输入：类型选择 + 问题输入（占问类必填区，命盘类可留白）
+import { useState } from 'react';
+import SongSelect from '@/components/SongSelect';
+
+const DEFAULT_TYPES = [
+  { value: 'love', label: '情感姻缘' },
+  { value: 'career', label: '事业学业' },
+  { value: 'wealth', label: '财运投资' },
+  { value: 'health', label: '健康' },
+  { value: 'travel', label: '出行方位' },
+  { value: 'lost', label: '寻物' },
+  { value: 'decision', label: '抉择决策' },
+  { value: 'other', label: '其他' },
+];
+
+interface Props {
+  question: string;
+  onQuestion: (q: string) => void;
+  qType?: string;
+  onQType?: (t: string) => void;
+  showType?: boolean;      // 占问类：先选类型
+  placeholder?: string;
+}
+
+export default function QuestionFields({ question, onQuestion, qType, onQType, showType = true, placeholder }: Props) {
+  return (
+    <div>
+      {showType && onQType && qType !== undefined && (
+        <div className="field">
+          <label htmlFor="q-type">所问之属</label>
+          <SongSelect id="q-type" value={qType} options={DEFAULT_TYPES} onChange={onQType} />
+        </div>
+      )}
+      <div className="field">
+        <label htmlFor="q-input">所问之事</label>
+        <input
+          className="input-line"
+          id="q-input"
+          placeholder={placeholder || '默念所问，书之于此，心念自随…'}
+          maxLength={60}
+          value={question}
+          onChange={e => onQuestion(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+}