kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
hu xiaotong
2025-04-17 17:17:56 +08:00
parent 16eed5ff46
commit 2847df6340
9 changed files with 275 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2",
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-router-dom": "^7.5.0"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
@@ -774,6 +775,12 @@
"tailwindcss": "4.1.4"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmmirror.com/@types/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
"license": "MIT"
},
"node_modules/@types/react": {
"version": "19.1.2",
"resolved": "https://registry.npmmirror.com/@types/react/-/react-19.1.2.tgz",
@@ -815,6 +822,15 @@
],
"license": "CC-BY-4.0"
},
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/core-js": {
"version": "3.41.0",
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.41.0.tgz",
@@ -1227,12 +1243,58 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "7.5.0",
"resolved": "https://registry.npmmirror.com/react-router/-/react-router-7.5.0.tgz",
"integrity": "sha512-estOHrRlDMKdlQa6Mj32gIks4J+AxNsYoE0DbTTxiMy2mPzZuWSDU+N85/r1IlNR7kGfznF3VCUlvc5IUO+B9g==",
"license": "MIT",
"dependencies": {
"@types/cookie": "^0.6.0",
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0",
"turbo-stream": "2.4.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.5.0",
"resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-7.5.0.tgz",
"integrity": "sha512-fFhGFCULy4vIseTtH5PNcY/VvDJK5gvOWcwJVHQp8JQcWVr85ENhJ3UpuF/zP1tQOIFYNRJHzXtyhU1Bdgw0RA==",
"license": "MIT",
"dependencies": {
"react-router": "7.5.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/scheduler": {
"version": "0.26.0",
"resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"license": "MIT"
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1274,6 +1336,12 @@
"dev": true,
"license": "0BSD"
},
"node_modules/turbo-stream": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/turbo-stream/-/turbo-stream-2.4.0.tgz",
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
"license": "ISC"
},
"node_modules/typescript": {
"version": "5.8.3",
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.8.3.tgz",

3
package.json
View File

@@ -11,7 +11,8 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2",
"react": "^19.1.0",
"react-dom": "^19.1.0"
"react-dom": "^19.1.0",
"react-router-dom": "^7.5.0"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",

32
src/App.tsx
View File

@@ -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;

150
src/components/Navbar.tsx
View File

@@ -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"

16
src/pages/Battles.tsx Normal file
View File

@@ -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;

16
src/pages/Builds.tsx Normal file
View File

@@ -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;

16
src/pages/Characters.tsx Normal file
View File

@@ -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;

16
src/pages/Community.tsx Normal file
View File

@@ -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;

16
src/pages/News.tsx Normal file
View File

@@ -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;