epic-ui/src/App.tsx

// The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Home from "./pages/Home";
import Characters from "./pages/Characters";
import CharacterDetail from "./pages/CharacterDetail";
import Builds from "./pages/Builds";
import Battles from "./pages/Battles";
import News from "./pages/News";
import Community from "./pages/Community";
import LoginModal from "./components/LoginModal";
import Lineup from "./pages/Lineup";

// 导入类型定义
import { Skill, ImprintConcentration } from './pages/CharacterDetail';

// 示例数据
const mockCharacterData = {
	id: 1,
	name: "Boss Arunka",
	stars: 5,
	class: "Light Knight",
	element: "light",
	baseStats: {
		attack: 821,
		health: 6751,
		defense: 648,
		speed: 106
	},
	skills: [
		{
			name: "Road Sign Smash",
			type: "Active" as const,
			soulBurn: 1,
			description: "Attacks the enemy with a road sign, with a 65% chance to decrease Defense for 2 turns.",
			enhancements: [
				{
					stars: 2,
					attack: "+5%",
					effectiveness: "+10%"
				},
				{
					stars: 3,
					attack: "+10%",
					effectiveness: "+15%"
				}
			]
		},
		{
			name: "Vanguard of the Silent Expanse",
			type: "Passive" as const,
			description: "At the start of battle and at the end of the turn, when the caster is in the front row, increases Attack of all allies for 2 turns.",
			enhancements: [
				{
					stars: 3,
					attack: "+20%",
					health: "+60"
				}
			]
		}
	] as Skill[],
	imprintConcentration: [
		{
			type: "Attack Concentration",
			values: [
				{ rank: "SSS", value: "10.8%" },
				{ rank: "SS", value: "9.0%" },
				{ rank: "S", value: "7.2%" },
				{ rank: "A", value: "5.4%" },
				{ rank: "B", value: "3.6%" }
			]
		},
		{
			type: "Defense Concentration",
			values: [
				{ rank: "SSS", value: "18%" },
				{ rank: "SS", value: "15%" },
				{ rank: "S", value: "12%" },
				{ rank: "A", value: "9%" },
				{ rank: "B", value: "6%" }
			]
		}
	] as ImprintConcentration[],
	imageUrl: "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20pink%20hair%20and%20red%20eyes%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=1&orientation=squarish"
};

const App: React.FC = () => {
	const [isMenuOpen, setIsMenuOpen] = useState(false);
	const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
	const [currentSlide, setCurrentSlide] = useState(0);
	useEffect(() => {
		const interval = setInterval(() => {
			setCurrentSlide((prev) => (prev === 2 ? 0 : prev + 1));
		}, 5000);
		return () => clearInterval(interval);
	}, []);

	// 添加 ESC 键关闭功能
	useEffect(() => {
		const handleEscKey = (event: KeyboardEvent) => {
			if (event.key === "Escape" && isLoginModalOpen) {
				closeLoginModal();
			}
		};

		window.addEventListener("keydown", handleEscKey);
		return () => {
			window.removeEventListener("keydown", handleEscKey);
		};
	}, [isLoginModalOpen]);

	const handleLoginClick = () => {
		setIsLoginModalOpen(true);
	};
	const closeLoginModal = () => {
		setIsLoginModalOpen(false);
	};

	return (
		<Router>
			<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
				<Navbar onLoginClick={handleLoginClick} />
				<main className="pt-16">
					<Routes>
						<Route path="/" element={<Characters />} />
						<Route path="/home" element={<Home />} />
						<Route path="/characters" element={<Characters />} />
						<Route 
							path="/character/:heroCode"
							element={<CharacterDetail />}
						/>
						<Route path="/gvg" element={<Lineup />} />
						<Route path="/builds" element={<Builds />} />
						<Route path="/battles" element={<Battles />} />
						<Route path="/community" element={<Community />} />
					</Routes>
				</main>
				<Footer />
				<LoginModal isOpen={isLoginModalOpen} onClose={closeLoginModal} />
			</div>
		</Router>
	);
};

export default App;