guanwei 1.1.1

package/src/components/StarField.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef } from 'react';
+
+interface Star {
+  x: number;
+  y: number;
+  size: number;
+  speedX: number;
+  speedY: number;
+  opacity: number;
+  twinkleSpeed: number;
+}
+
+export default function StarField() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const starsRef = useRef<Star[]>([]);
+  const mouseRef = useRef({ x: 0, y: 0 });
+  const animationRef = useRef<number>(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    resize();
+    window.addEventListener('resize', resize);
+
+    // Initialize stars
+    const starCount = Math.floor((canvas.width * canvas.height) / 4000);
+    starsRef.current = Array.from({ length: starCount }, () => ({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      size: Math.random() * 2 + 0.5,
+      speedX: (Math.random() - 0.5) * 0.3,
+      speedY: (Math.random() - 0.5) * 0.3,
+      opacity: Math.random(),
+      twinkleSpeed: Math.random() * 0.02 + 0.005,
+    }));
+
+    const handleMouseMove = (e: MouseEvent) => {
+      mouseRef.current = { x: e.clientX, y: e.clientY };
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      starsRef.current.forEach((star) => {
+        // Update position
+        star.x += star.speedX;
+        star.y += star.speedY;
+
+        // Wrap around
+        if (star.x < 0) star.x = canvas.width;
+        if (star.x > canvas.width) star.x = 0;
+        if (star.y < 0) star.y = canvas.height;
+        if (star.y > canvas.height) star.y = 0;
+
+        // Twinkle
+        star.opacity += star.twinkleSpeed;
+        if (star.opacity > 1 || star.opacity < 0.2) {
+          star.twinkleSpeed = -star.twinkleSpeed;
+        }
+
+        // Mouse parallax
+        const dx = mouseRef.current.x - star.x;
+        const dy = mouseRef.current.y - star.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 200) {
+          star.x -= dx * 0.0005;
+          star.y -= dy * 0.0005;
+        }
+
+        // Draw star
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(224, 224, 224, ${star.opacity})`;
+        ctx.fill();
+
+        // Glow for larger stars
+        if (star.size > 1.5) {
+          ctx.beginPath();
+          ctx.arc(star.x, star.y, star.size * 3, 0, Math.PI * 2);
+          const gradient = ctx.createRadialGradient(
+            star.x, star.y, 0,
+            star.x, star.y, star.size * 3
+          );
+          gradient.addColorStop(0, `rgba(201, 162, 39, ${star.opacity * 0.3})`);
+          gradient.addColorStop(1, 'rgba(201, 162, 39, 0)');
+          ctx.fillStyle = gradient;
+          ctx.fill();
+        }
+      });
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      window.removeEventListener('mousemove', handleMouseMove);
+      cancelAnimationFrame(animationRef.current);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="fixed inset-0 pointer-events-none"
+      style={{ zIndex: 0 }}
+    />
+  );
+}

package/src/components/TarotCard.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import type { TarotCard as TarotCardType } from '@/types';
+
+interface TarotCardProps {
+  card: TarotCardType;
+  isReversed?: boolean;
+  isFlipped?: boolean;
+  onClick?: () => void;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-20 h-32',
+  md: 'w-32 h-48',
+  lg: 'w-44 h-72',
+};
+
+export default function TarotCard({
+  card,
+  isReversed = false,
+  isFlipped = false,
+  onClick,
+  size = 'md',
+  className = '',
+}: TarotCardProps) {
+  const [flipped, setFlipped] = useState(isFlipped);
+
+  const handleClick = () => {
+    if (!flipped) {
+      setFlipped(true);
+    }
+    onClick?.();
+  };
+
+  const suitSymbol = {
+    wands: '⚡',
+    cups: '🏆',
+    swords: '⚔️',
+    pentacles: '💰',
+  };
+
+  const elementColor = {
+    wands: 'text-orange-400',
+    cups: 'text-blue-400',
+    swords: 'text-gray-300',
+    pentacles: 'text-green-400',
+  };
+
+  return (
+    <div
+      className={`relative perspective-1000 cursor-pointer ${className}`}
+      onClick={handleClick}
+    >
+      <div
+        className={`relative preserve-3d transition-transform duration-700 ${
+          flipped ? 'rotate-y-180' : ''
+        } ${sizeClasses[size]}`}
+      >
+        {/* Card Back */}
+        <div className="absolute inset-0 backface-hidden rounded-lg border-2 border-ancient/40 bg-abyss overflow-hidden">
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-full h-full p-2">
+              <div className="w-full h-full border border-ancient/30 rounded flex items-center justify-center relative">
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="w-12 h-12 border border-ancient/50 rotate-45" />
+                </div>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <span className="text-ancient/60 text-2xl">✦</span>
+                </div>
+                <div className="absolute top-1 left-1 text-ancient/30 text-xs">⚜</div>
+                <div className="absolute top-1 right-1 text-ancient/30 text-xs">⚜</div>
+                <div className="absolute bottom-1 left-1 text-ancient/30 text-xs">⚜</div>
+                <div className="absolute bottom-1 right-1 text-ancient/30 text-xs">⚜</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Card Front */}
+        <div
+          className={`absolute inset-0 backface-hidden rotate-y-180 rounded-lg border-2 ${
+            isReversed ? 'border-crimson/60' : 'border-ancient/60'
+          } bg-abyss overflow-hidden`}
+        >
+          <div className="absolute inset-0 flex flex-col items-center justify-between p-2">
+            {/* Top */}
+            <div className="w-full flex justify-between items-start">
+              <span className={`text-xs ${card.suit ? elementColor[card.suit] : 'text-ancient'}`}>
+                {card.number || (card.arcana === 'major' ? '∞' : '')}
+              </span>
+              {card.suit && (
+                <span className="text-xs">{suitSymbol[card.suit]}</span>
+              )}
+            </div>
+
+            {/* Center */}
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <div className="text-3xl mb-1">
+                  {card.arcana === 'major' ? '☽' : suitSymbol[card.suit as keyof typeof suitSymbol]}
+                </div>
+                <div className={`text-xs ${isReversed ? 'text-crimson/80' : 'text-ancient'} font-medium`}>
+                  {card.name}
+                </div>
+                {isReversed && (
+                  <div className="text-[10px] text-crimson/60 mt-0.5">逆位</div>
+                )}
+              </div>
+            </div>
+
+            {/* Bottom */}
+            <div className="w-full flex justify-between items-end">
+              <span className="text-[10px] text-stardust/40">
+                {card.arcana === 'major' ? '大阿卡纳' : card.suit === 'wands' ? '权杖' : card.suit === 'cups' ? '圣杯' : card.suit === 'swords' ? '宝剑' : '星币'}
+              </span>
+              <span className={`text-xs ${card.suit ? elementColor[card.suit] : 'text-ancient'}`}>
+                {card.number || (card.arcana === 'major' ? '∞' : '')}
+              </span>
+            </div>
+          </div>
+
+          {/* Decorative border */}
+          <div className="absolute inset-1 border border-ancient/10 rounded pointer-events-none" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/TimeShichenInput.tsx

@@ -0,0 +1,29 @@
+// 精确出生时刻输入：time 输入 + 自动匹配时辰（东玄以此时辰排盘，星盘用精确时刻）
+import { timeToShichenLabel, timeToHourIndex } from '@/data/shichen';
+
+interface Props {
+  value: string;      // HH:MM
+  onChange: (time: string) => void;
+  id?: string;
+  label?: string;
+}
+
+export default function TimeShichenInput({ value, onChange, id, label = '出生时刻（精确）' }: Props) {
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '.5rem', alignItems: 'stretch' }}>
+        <input
+          className="input-line"
+          type="time"
+          id={id}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <span className="shichen-chip">{timeToShichenLabel(value)}</span>
+      </div>
+    </div>
+  );
+}
+
+export { timeToHourIndex };

package/src/components/arts/AstrologyArt.tsx

@@ -0,0 +1,141 @@
+// 星盘：出生日期/时刻/地点（经纬度→LST 上升点）→ 行星落座/相位/十二宫
+import { useState } from 'react';
+import { astrologyCalc } from '@core/engine/astrology';
+import { ZODIAC, ZODIAC_MEAN, HOUSES } from '@core/data/zodiac';
+import { mod } from '@core/data/ganzhi';
+import type { GeoLocation } from '@core/types';
+import type { UserProfile } from '@/utils/userStore';
+import LocationPicker from '@/components/LocationPicker';
+import { currentUser } from '@/utils/userStore';
+import { ResultCard } from '@/components/ResultCard';
+import SongSelect from '@/components/SongSelect';
+import DateInput from '@/components/DateInput';
+import ProfilePicker from '@/components/ProfilePicker';
+
+interface PanelProps { onDivine: (inputs: unknown, profile?: UserProfile, question?: string, profileId?: string) => void; }
+
+export function AstrologyPanel({ onDivine }: PanelProps) {
+  const user = currentUser();
+  const p = user?.profile;
+  const [date, setDate] = useState(p?.birthDate || '1990-06-15');
+  const [time, setTime] = useState(() => { const h = (p?.birthHourIndex ?? 4) * 2; return String(h).padStart(2, '0') + ':30'; });
+  const [loc, setLoc] = useState<GeoLocation | null>(p?.location || null);
+  const [gender, setGender] = useState<'男' | '女'>(p?.gender || '男');
+  const [profileSrc, setProfileSrc] = useState<{ id: string; name: string } | null>(null);
+
+  const filled = p && date === p.birthDate && gender === p.gender;
+  const go = () => {
+    const [y, m, d] = date.split('-').map(Number);
+    const [hh, mm] = time.split(':').map(Number);
+    if (!y || !m || !d) return;
+    const birthHourIndex = Math.floor(((hh || 0) + 1) % 24 / 2);
+    const profile: UserProfile = { birthDate: date, birthTime: time, birthHourIndex, gender, location: loc };
+    onDivine({ y, m, d, hour: hh || 0, min: mm || 0, lng: loc?.lng, lat: loc?.lat }, profile, undefined, profileSrc?.id || 'main');
+  };
+
+  return (
+    <>
+      <ProfilePicker onPick={(p, src) => { setDate(p.birthDate); setTime(p.birthTime || '08:30'); setGender(p.gender); setLoc(p.location); if (src) setProfileSrc(src); }} />
+      {user && filled && <p className="hint" style={{ color: 'var(--celadon-deep)', marginTop: 'var(--sp-2)' }}>已依主档案预填（可改，改后以所书为准）</p>}
+      <div className="field"><label htmlFor="as-date">出生日期（公历 / 农历）</label>
+        <DateInput id="as-date" value={date} onChange={setDate} /></div>
+      <div className="field-row">
+        <div className="field"><label htmlFor="as-hour">出生时刻</label>
+          <input className="input-line" type="time" id="as-hour" value={time} onChange={e => setTime(e.target.value)} /></div>
+        <div className="field"><label htmlFor="as-gender">性别</label>
+          <SongSelect id="as-gender" value={gender} options={[{ value: '男', label: '男' }, { value: '女', label: '女' }]} onChange={v => setGender(v as '男' | '女')} />
+        </div>
+      </div>
+      <div className="field">
+        <label>出生地点（上升点需经纬度）</label>
+        <LocationPicker value={loc} onChange={setLoc} />
+      </div>
+      <button className="btn-divine" onClick={go}>布 星 图<span className="small">推行星黄经 · 布十二宫</span></button>
+      <p className="hint" style={{ marginTop: '.8rem' }}>行星位置采用简略天文近似（平均运动），上升点按本地恒星时 LST 推算，宫位取整宫制，仅供怡情。</p>
+    </>
+  );
+}
+
+export function AstrologyResult({ data }: { data: ReturnType<typeof astrologyCalc> }) {
+  const r = data;
+  const ascSign = Math.floor(mod(r.asc, 360) / 30);
+  const sunSign = Math.floor(r.sun / 30);
+  const moonSign = Math.floor(r.moon / 30);
+  const signRows = r.planets.map(([name, sym, lon]) => {
+    const s = Math.floor(mod(lon, 360) / 30);
+    const deg = mod(lon, 30);
+    return { name, sym, s, deg };
+  });
+  const detailRows = (r.planetDetails || []).map(p => (
+    <div className="result-cell" key={p.cn}>
+      <div className="k">{p.cn} {p.sym} {p.retrograde ? '· 逆行' : ''}</div>
+      <div className="v">{p.sign} {p.degree.toFixed(1)}°</div>
+      <div className="tiny">落{p.house}宫{p.dignity.status ? ' · ' + p.dignity.status : ''}</div>
+      {p.dignity.note && <div className="tiny muted">{p.dignity.note}</div>}
+    </div>
+  ));
+  const houseRows = (r.houses || []).map(h => (
+    <div className="result-cell" key={h.num}>
+      <div className="k">{h.num}宫</div>
+      <div className="v">{h.sign}</div>
+      <div className="tiny">宫主 {h.ruler}</div>
+    </div>
+  ));
+  const aspectHtml = r.aspects.length
+    ? r.aspects.map((a, i) => <p key={i}><strong>{a[0]}</strong> 与 <strong>{a[1]}</strong> 成 <span className="tag-cool">{a[2]}</span> —— {a[3]}</p>)
+    : <p>诸星无显著相位，气机平和。</p>;
+  return (
+    <>
+      <ResultCard title="命盘之纲">
+        <p>上升 <strong>{ZODIAC[ascSign][0]}</strong> {mod(r.asc, 30).toFixed(1)}°（本地恒星时 {r.lstHours.toFixed(2)}h），中天 <strong>{ZODIAC[Math.floor((r.mc ?? 0) / 30)][0]}</strong>，太阳落 <strong>{ZODIAC[sunSign][0]}</strong>，月亮落 <strong>{ZODIAC[moonSign][0]}</strong>。</p>
+        <p className="tiny muted">回归黄道（Tropical）· VSOP87 精确星历 · 黄赤交角 {r.epsilon?.toFixed(2)}° · 宫位整宫制</p>
+        <p>太阳主自我之核，月亮主情感之底，上升主处世之貌。三者为命盘之纲。</p>
+      </ResultCard>
+      <ResultCard title="行星经纬"
+        cells={signRows.map(p => ({
+          k: `${p.name} ${p.sym}`,
+          v: `${ZODIAC[p.s][2]} ${ZODIAC[p.s][0]}座 ${p.deg.toFixed(1)}°`,
+        }))}>
+        {signRows.map(p => <p key={p.name} className="tiny muted">{ZODIAC_MEAN[ZODIAC[p.s][0]]}</p>)}
+      </ResultCard>
+      <ResultCard title="行星入宫 · 庙旺 · 逆行">
+        <div className="result-grid" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))' }}>
+          {detailRows}
+        </div>
+        <p className="tiny muted" style={{ marginTop: '.6rem' }}>庙=本垣力量最显，旺=擢升助力显著，陷/弱=力量受抑；逆行行星主内省与回炉，其宫位事务易有反复。</p>
+      </ResultCard>
+      <ResultCard title="相位经纬">{aspectHtml}</ResultCard>
+      <ResultCard title="行星落宫参详">
+        {r.planets.map((p) => {
+          const s = Math.floor(mod(p[2], 360) / 30);
+          const house = mod(s - ascSign + 12, 12); // 整宫制：上升起算
+          return <p key={p[0]}><strong>{p[0]}</strong>落{house + 1}宫（{HOUSES[house]}）· {ZODIAC[s][0]}座 —— {houseMeaning(p[0], house)}</p>;
+        })}
+        <p className="tiny muted">整宫制推演，行星入宫主人生领域之侧重；仅供怡情。</p>
+      </ResultCard>
+      <ResultCard title="十二宫位（整宫制）">
+        <p>{HOUSES.map((hname, i) => <span key={hname}><strong>{hname}</strong>·{ZODIAC[mod(ascSign + i, 12)][0]}　</span>)}</p>
+        <div className="result-grid" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(120px,1fr))', marginTop: '.7rem' }}>
+          {houseRows}
+        </div>
+        <p className="mt-1">命宫即上升所落之座，为一生行运之门户；宫主星为该宫头星座之古典守护星（不含三王星）。Placidus 宫位制在迭代计划中。</p>
+      </ResultCard>
+    </>
+  );
+}
+// 行星入宫解读（现代语言）
+function houseMeaning(planet: string, house: number): string {
+  const base: string[] = [
+    '自我形象与人生方向之所在', '财帛运用与价值感之来源', '思维沟通与手足同侪之域',
+    '家宅根基与内在安全之锚', '才艺表现与恋爱子女之场', '日常工作与身体康健之务',
+    '姻缘伴侣与合伙共事之缘', '深渊转化与共享资源之秘', '远行求学与信念追寻之路',
+    '事业名位与社会形象之台', '交友结社与理想愿景之圈', '潜意识与灵性安顿之隅',
+  ];
+  const p: Record<string, string> = {
+    太阳: '光芒所注，此生着力之处', 月亮: '情感所依，心境冷暖之枢',
+    水星: '思虑所驰，学习表达之道', 金星: '喜恶所向，审美人际之趣',
+    火星: '行动所向，冲劲释放之径', 木星: '幸运所至，成长拓展之门',
+    土星: '功课所在，磨砺成就之石',
+  };
+  return (p[planet] || '此星行运') + '，落于' + base[house] + '。';
+}