guanwei 1.1.3 → 1.2.0

package/src/components/Navigation.tsx

@@ -1,80 +0,0 @@
-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/TarotCard.tsx

@@ -1,129 +0,0 @@
-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/pages/AstrologyPage.tsx

@@ -1,33 +0,0 @@
-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>
-  );
-}

package/src/pages/BaZiPage.tsx

@@ -1,33 +0,0 @@
-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/Home.tsx

@@ -1,179 +0,0 @@
-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>
-  );
-}