init

2025-04-17 17:17:56 +08:00
parent 16eed5ff46
commit 2847df6340
9 changed files with 275 additions and 60 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,14 @@
 // 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 Builds from "./pages/Builds";
+import Battles from "./pages/Battles";
+import News from "./pages/News";
+import Community from "./pages/Community";
 import LoginModal from "./components/LoginModal";

 const App: React.FC = () => {
@@ -38,14 +44,24 @@ const App: React.FC = () => {
 	};

 	return (
-		<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
-			<Navbar onLoginClick={handleLoginClick} />
-			<main className="pt-16">
-				<Home />
-			</main>
-			<Footer />
-			<LoginModal isOpen={isLoginModalOpen} onClose={closeLoginModal} />
-		</div>
+		<Router>
+			<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
+				<Navbar onLoginClick={handleLoginClick} />
+				<main className="pt-16">
+					<Routes>
+						<Route path="/" element={<Home />} />
+						<Route path="/characters" element={<Characters />} />
+						<Route path="/builds" element={<Builds />} />
+						<Route path="/battles" element={<Battles />} />
+						<Route path="/news" element={<News />} />
+						<Route path="/community" element={<Community />} />
+					</Routes>
+				</main>
+				<Footer />
+				<LoginModal isOpen={isLoginModalOpen} onClose={closeLoginModal} />
+			</div>
+		</Router>
 	);
 };
+
 export default App;
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link, useLocation } from "react-router-dom";

 interface NavbarProps {
 	onLoginClick: () => void;
@@ -6,6 +7,7 @@ interface NavbarProps {

 const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const location = useLocation();

 	return (
 		<nav className="fixed top-0 left-0 right-0 z-50 bg-[#1A1412]/95 backdrop-blur-md border-b border-[#C17F59]/30">
@@ -13,48 +15,72 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 				<div className="flex items-center justify-between h-16">
 					<div className="flex items-center">
 						<div className="flex-shrink-0">
-							<span className="text-2xl font-bold text-[#E6B17E]">
+							<Link to="/" className="text-2xl font-bold text-[#E6B17E]">
 								战神纪元
-							</span>
+							</Link>
 						</div>
 						<div className="hidden md:block ml-10">
 							<div className="flex items-baseline space-x-4">
-								<a
-									href="#"
-									className="px-3 py-2 rounded-md text-sm font-medium text-[#E6B17E] bg-[#2A211E] hover:bg-[#3A2E2A] !rounded-button whitespace-nowrap cursor-pointer"
+								<Link
+									to="/"
+									className={`px-3 py-2 rounded-md text-sm font-medium ${
+										location.pathname === "/"
+											? "text-[#E6B17E] bg-[#2A211E]"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									主页
-								</a>
-								<a
-									href="#"
-									className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+								</Link>
+								<Link
+									to="/characters"
+									className={`px-3 py-2 rounded-md text-sm font-medium ${
+										location.pathname === "/characters"
+											? "text-[#E6B17E] bg-[#2A211E]"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									角色列表
-								</a>
-								<a
-									href="#"
-									className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+								</Link>
+								<Link
+									to="/builds"
+									className={`px-3 py-2 rounded-md text-sm font-medium ${
+										location.pathname === "/builds"
+											? "text-[#E6B17E] bg-[#2A211E]"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									配装攻略
-								</a>
-								<a
-									href="#"
-									className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+								</Link>
+								<Link
+									to="/battles"
+									className={`px-3 py-2 rounded-md text-sm font-medium ${
+										location.pathname === "/battles"
+											? "text-[#E6B17E] bg-[#2A211E]"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									对战信息
-								</a>
-								<a
-									href="#"
-									className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+								</Link>
+								<Link
+									to="/news"
+									className={`px-3 py-2 rounded-md text-sm font-medium ${
+										location.pathname === "/news"
+											? "text-[#E6B17E] bg-[#2A211E]"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									资讯中心
-								</a>
-								<a
-									href="#"
-									className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+								</Link>
+								<Link
+									to="/community"
+									className={`px-3 py-2 rounded-md text-sm font-medium ${
+										location.pathname === "/community"
+											? "text-[#E6B17E] bg-[#2A211E]"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									社区
-								</a>
+								</Link>
 							</div>
 						</div>
 					</div>
@@ -81,42 +107,66 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 			{isMenuOpen && (
 				<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30">
 					<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-						<a
-							href="#"
-							className="block px-3 py-2 rounded-md text-base font-medium text-[#E6B17E] bg-[#2A211E] !rounded-button whitespace-nowrap cursor-pointer"
+						<Link
+							to="/"
+							className={`block px-3 py-2 rounded-md text-base font-medium ${
+								location.pathname === "/"
+									? "text-[#E6B17E] bg-[#2A211E]"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							主页
-						</a>
-						<a
-							href="#"
-							className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+						</Link>
+						<Link
+							to="/characters"
+							className={`block px-3 py-2 rounded-md text-base font-medium ${
+								location.pathname === "/characters"
+									? "text-[#E6B17E] bg-[#2A211E]"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							角色列表
-						</a>
-						<a
-							href="#"
-							className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+						</Link>
+						<Link
+							to="/builds"
+							className={`block px-3 py-2 rounded-md text-base font-medium ${
+								location.pathname === "/builds"
+									? "text-[#E6B17E] bg-[#2A211E]"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							配装攻略
-						</a>
-						<a
-							href="#"
-							className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+						</Link>
+						<Link
+							to="/battles"
+							className={`block px-3 py-2 rounded-md text-base font-medium ${
+								location.pathname === "/battles"
+									? "text-[#E6B17E] bg-[#2A211E]"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							对战信息
-						</a>
-						<a
-							href="#"
-							className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+						</Link>
+						<Link
+							to="/news"
+							className={`block px-3 py-2 rounded-md text-base font-medium ${
+								location.pathname === "/news"
+									? "text-[#E6B17E] bg-[#2A211E]"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							资讯中心
-						</a>
-						<a
-							href="#"
-							className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+						</Link>
+						<Link
+							to="/community"
+							className={`block px-3 py-2 rounded-md text-base font-medium ${
+								location.pathname === "/community"
+									? "text-[#E6B17E] bg-[#2A211E]"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							社区
-						</a>
+						</Link>
 						<button
 							onClick={onLoginClick}
 							className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
--- a/src/pages/Battles.tsx
+++ b/src/pages/Battles.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Battles: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1A1412] text-white font-sans">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl font-bold text-[#E6B17E] mb-6">对战信息</h1>
+        <div className="bg-[#2A211E] rounded-lg p-6 border border-[#C17F59]/30">
+          <p className="text-[#C17F59]">对战信息页面内容将在这里显示</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Battles; 
--- a/src/pages/Builds.tsx
+++ b/src/pages/Builds.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Builds: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1A1412] text-white font-sans">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl font-bold text-[#E6B17E] mb-6">配装攻略</h1>
+        <div className="bg-[#2A211E] rounded-lg p-6 border border-[#C17F59]/30">
+          <p className="text-[#C17F59]">配装攻略页面内容将在这里显示</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Builds; 
--- a/src/pages/Characters.tsx
+++ b/src/pages/Characters.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Characters: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1A1412] text-white font-sans">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl font-bold text-[#E6B17E] mb-6">角色列表</h1>
+        <div className="bg-[#2A211E] rounded-lg p-6 border border-[#C17F59]/30">
+          <p className="text-[#C17F59]">角色列表页面内容将在这里显示</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Characters; 
--- a/src/pages/Community.tsx
+++ b/src/pages/Community.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Community: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1A1412] text-white font-sans">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl font-bold text-[#E6B17E] mb-6">社区</h1>
+        <div className="bg-[#2A211E] rounded-lg p-6 border border-[#C17F59]/30">
+          <p className="text-[#C17F59]">社区页面内容将在这里显示</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Community; 
--- a/src/pages/News.tsx
+++ b/src/pages/News.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const News: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-[#1A1412] text-white font-sans">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <h1 className="text-3xl font-bold text-[#E6B17E] mb-6">资讯中心</h1>
+        <div className="bg-[#2A211E] rounded-lg p-6 border border-[#C17F59]/30">
+          <p className="text-[#C17F59]">资讯中心页面内容将在这里显示</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default News;