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 07:47:17 +08:00
parent f9ef592877
commit 16eed5ff46
6 changed files with 204 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@@ -42,6 +42,7 @@
"integrity": "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==", "integrity": "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"license": "MIT OR Apache-2.0",
"bin": { "bin": {
"biome": "bin/biome" "biome": "bin/biome"
}, },

8
src/components/Footer.tsx
View File

@@ -38,7 +38,9 @@ const Footer: React.FC = () => {
</div> </div>
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">快速链接</h3> <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
快速链接
</h3>
<ul className="space-y-2"> <ul className="space-y-2">
<li> <li>
<a <a
@@ -128,7 +130,9 @@ const Footer: React.FC = () => {
</ul> </ul>
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">联系我们</h3> <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
联系我们
</h3>
<ul className="space-y-2"> <ul className="space-y-2">
<li className="text-[#9B8579] flex items-center"> <li className="text-[#9B8579] flex items-center">
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i> <i className="fas fa-envelope mr-2 text-[#C17F59]"></i>

264
src/components/LoginModal.tsx
View File

@@ -1,125 +1,157 @@
import React from "react"; import React from "react";
interface LoginModalProps { interface LoginModalProps {
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
} }
const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => { const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="fixed inset-0 z-50 overflow-y-auto"> <div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 transition-opacity z-50" aria-hidden="true"> <div
<div className="absolute inset-0 bg-black opacity-75"></div> className="fixed inset-0 transition-opacity z-50"
</div> aria-hidden="true"
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> >
<div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50"> <div className="absolute inset-0 bg-black opacity-75"></div>
<div className="absolute top-4 right-4 z-50"> </div>
<button <span
onClick={onClose} className="hidden sm:inline-block sm:align-middle sm:h-screen"
className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-full text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition-colors duration-200" aria-hidden="true"
aria-label="关闭" >
> &#8203;
<i className="fas fa-times text-lg"></i> </span>
</button> <div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
</div> <div className="absolute top-4 right-4 z-50">
<div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <button
<div className="sm:flex sm:items-start"> onClick={onClose}
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-full text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition-colors duration-200"
<h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center"> aria-label="关闭"
登录账号 >
</h3> <i className="fas fa-times text-lg"></i>
<div className="mt-2"> </button>
<div className="mb-4"> </div>
<label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1"> <div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
电子邮箱 <div className="sm:flex sm:items-start">
</label> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<input <h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center">
type="email" 登录账号
id="email" </h3>
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button" <div className="mt-2">
placeholder="your@email.com" <div className="mb-4">
/> <label
</div> htmlFor="email"
<div className="mb-6"> className="block text-sm font-medium text-gray-400 mb-1"
<label htmlFor="password" className="block text-sm font-medium text-gray-400 mb-1"> >
密码 电子邮箱
</label> </label>
<input <input
type="password" type="email"
id="password" id="email"
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button" className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
placeholder="输入密码" placeholder="your@email.com"
/> />
</div> </div>
<div className="flex items-center justify-between mb-6"> <div className="mb-6">
<div className="flex items-center"> <label
<input htmlFor="password"
id="remember-me" className="block text-sm font-medium text-gray-400 mb-1"
name="remember-me" >
type="checkbox" 密码
className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded" </label>
/> <input
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-400"> type="password"
记住我 id="password"
</label> className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
</div> placeholder="输入密码"
<div className="text-sm"> />
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"> </div>
忘记密码? <div className="flex items-center justify-between mb-6">
</a> <div className="flex items-center">
</div> <input
</div> id="remember-me"
<button className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-yellow-500 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 !rounded-button whitespace-nowrap cursor-pointer"> name="remember-me"
登录 type="checkbox"
</button> className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
</div> />
<div className="mt-6"> <label
<div className="relative"> htmlFor="remember-me"
<div className="absolute inset-0 flex items-center"> className="ml-2 block text-sm text-gray-400"
<div className="w-full border-t border-gray-700"></div> >
</div> 记住我
<div className="relative flex justify-center text-sm"> </label>
<span className="px-2 bg-gray-900 text-gray-400"> </div>
或使用以下方式登录 <div className="text-sm">
</span> <a
</div> href="#"
</div> className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
<div className="mt-6 grid grid-cols-3 gap-3"> >
<div> 忘记密码?
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"> </a>
<i className="fab fa-weixin text-xl"></i> </div>
</a> </div>
</div> <button className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-yellow-500 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 !rounded-button whitespace-nowrap cursor-pointer">
<div> 登录
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"> </button>
<i className="fab fa-qq text-xl"></i> </div>
</a> <div className="mt-6">
</div> <div className="relative">
<div> <div className="absolute inset-0 flex items-center">
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"> <div className="w-full border-t border-gray-700"></div>
<i className="fab fa-weibo text-xl"></i> </div>
</a> <div className="relative flex justify-center text-sm">
</div> <span className="px-2 bg-gray-900 text-gray-400">
</div> 或使用以下方式登录
</div> </span>
<div className="mt-6 text-center"> </div>
<p className="text-sm text-gray-400"> </div>
还没有账号?{" "} <div className="mt-6 grid grid-cols-3 gap-3">
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"> <div>
立即注册 <a
</a> href="#"
</p> className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
</div> >
</div> <i className="fab fa-weixin text-xl"></i>
</div> </a>
</div> </div>
</div> <div>
</div> <a
</div> href="#"
); className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
>
<i className="fab fa-qq text-xl"></i>
</a>
</div>
<div>
<a
href="#"
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
>
<i className="fab fa-weibo text-xl"></i>
</a>
</div>
</div>
</div>
<div className="mt-6 text-center">
<p className="text-sm text-gray-400">
还没有账号?{" "}
<a
href="#"
className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
>
立即注册
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}; };
export default LoginModal; export default LoginModal;

4
src/index.css
View File

@@ -1,2 +1,2 @@
@import 'tailwindcss'; @import "tailwindcss";
@import '@fortawesome/fontawesome-free/css/all.min.css'; @import "@fortawesome/fontawesome-free/css/all.min.css";

22
src/index.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import App from './App'; import App from "./App";
import './index.css'; import "./index.css";
const rootEl = document.getElementById('root'); const rootEl = document.getElementById("root");
if (rootEl) { if (rootEl) {
const root = ReactDOM.createRoot(rootEl); const root = ReactDOM.createRoot(rootEl);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,
); );
} }

55
src/pages/Home.tsx
View File

@@ -149,14 +149,16 @@ const Home: React.FC = () => {
if (isDragging && Math.abs(normalizedDragX) > 0) { if (isDragging && Math.abs(normalizedDragX) > 0) {
if (dragX > 0) { if (dragX > 0) {
// 向右拖动，显示上一张 // 向右拖动，显示上一张
const prevIndex = currentSlide === 0 ? slides.length - 1 : currentSlide - 1; const prevIndex =
currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
return [ return [
{ index: prevIndex, opacity: Math.min(normalizedDragX, 1) }, { index: prevIndex, opacity: Math.min(normalizedDragX, 1) },
{ index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) }, { index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) },
]; ];
} else { } else {
// 向左拖动，显示下一张 // 向左拖动，显示下一张
const nextIndex = currentSlide === slides.length - 1 ? 0 : currentSlide + 1; const nextIndex =
currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
return [ return [
{ index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) }, { index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) },
{ index: nextIndex, opacity: Math.min(-normalizedDragX, 1) }, { index: nextIndex, opacity: Math.min(-normalizedDragX, 1) },
@@ -357,8 +359,8 @@ const Home: React.FC = () => {
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
style={{ style={{
cursor: isDragging ? 'grabbing' : 'grab', cursor: isDragging ? "grabbing" : "grab",
touchAction: 'none' touchAction: "none",
}} }}
> >
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
@@ -368,7 +370,9 @@ const Home: React.FC = () => {
className="absolute inset-0" className="absolute inset-0"
style={{ style={{
opacity, opacity,
transition: slideTransition ? 'opacity 0.3s ease-out' : 'none' transition: slideTransition
? "opacity 0.3s ease-out"
: "none",
}} }}
> >
<div className="absolute inset-0 bg-gradient-to-r from-[#1A1412] via-[#1A1412]/90 to-transparent z-10"></div> <div className="absolute inset-0 bg-gradient-to-r from-[#1A1412] via-[#1A1412]/90 to-transparent z-10"></div>
@@ -442,7 +446,9 @@ const Home: React.FC = () => {
新英雄预告 新英雄预告
</span> </span>
</div> </div>
<h2 className="text-2xl font-bold text-[#E6B17E]">即将登场</h2> <h2 className="text-2xl font-bold text-[#E6B17E]">
即将登场
</h2>
</div> </div>
<a <a
href="#" href="#"
@@ -475,9 +481,7 @@ const Home: React.FC = () => {
<h3 className="text-lg font-bold text-[#E6B17E]"> <h3 className="text-lg font-bold text-[#E6B17E]">
{character.name} {character.name}
</h3> </h3>
<span className="text-[#C17F59] text-sm"> <span className="text-[#C17F59] text-sm">即将登场</span>
即将登场
</span>
</div> </div>
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight"> <p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
{character.description} {character.description}
@@ -509,7 +513,9 @@ const Home: React.FC = () => {
平衡性调整 平衡性调整
</span> </span>
</div> </div>
<h2 className="text-2xl font-bold text-[#E6B17E]">最新更新</h2> <h2 className="text-2xl font-bold text-[#E6B17E]">
最新更新
</h2>
</div> </div>
<a <a
href="#" href="#"
@@ -542,9 +548,7 @@ const Home: React.FC = () => {
<h3 className="text-lg font-bold text-[#E6B17E]"> <h3 className="text-lg font-bold text-[#E6B17E]">
{character.name} {character.name}
</h3> </h3>
<span className="text-[#C17F59] text-sm"> <span className="text-[#C17F59] text-sm">最新更新</span>
最新更新
</span>
</div> </div>
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight"> <p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
{character.description} {character.description}
@@ -691,7 +695,10 @@ const Home: React.FC = () => {
</thead> </thead>
<tbody className="divide-y divide-[#3A2E2A]"> <tbody className="divide-y divide-[#3A2E2A]">
{battleData.map((data) => ( {battleData.map((data) => (
<tr key={data.rank} className="hover:bg-[#3A2E2A] transition-colors duration-200"> <tr
key={data.rank}
className="hover:bg-[#3A2E2A] transition-colors duration-200"
>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div <div
className={`w-6 h-6 rounded-full flex items-center justify-center ${ className={`w-6 h-6 rounded-full flex items-center justify-center ${
@@ -735,11 +742,15 @@ const Home: React.FC = () => {
</div> </div>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<span className="text-[#9B8579]">开始时间</span> <span className="text-[#9B8579]">开始时间</span>
<span className="text-[#E6B17E] font-medium">2025-03-15</span> <span className="text-[#E6B17E] font-medium">
2025-03-15
</span>
</div> </div>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<span className="text-[#9B8579]">结束时间</span> <span className="text-[#9B8579]">结束时间</span>
<span className="text-[#E6B17E] font-medium">2025-06-15</span> <span className="text-[#E6B17E] font-medium">
2025-06-15
</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-[#9B8579]">剩余时间</span> <span className="text-[#9B8579]">剩余时间</span>
@@ -769,7 +780,9 @@ const Home: React.FC = () => {
</div> </div>
<span className="text-[#9B8579]">VS</span> <span className="text-[#9B8579]">VS</span>
<div className="flex items-center"> <div className="flex items-center">
<span className="mx-2 text-[#F44336] font-bold">1</span> <span className="mx-2 text-[#F44336] font-bold">
1
</span>
<span className="font-medium text-[#E6B17E]"> <span className="font-medium text-[#E6B17E]">
风暴战队 风暴战队
</span> </span>
@@ -792,7 +805,9 @@ const Home: React.FC = () => {
</div> </div>
<span className="text-[#9B8579]">VS</span> <span className="text-[#9B8579]">VS</span>
<div className="flex items-center"> <div className="flex items-center">
<span className="mx-2 text-[#F44336] font-bold">2</span> <span className="mx-2 text-[#F44336] font-bold">
2
</span>
<span className="font-medium text-[#E6B17E]"> <span className="font-medium text-[#E6B17E]">
雷霆战队 雷霆战队
</span> </span>
@@ -809,7 +824,9 @@ const Home: React.FC = () => {
<span className="font-medium text-[#E6B17E]"> <span className="font-medium text-[#E6B17E]">
幽灵战队 幽灵战队
</span> </span>
<span className="mx-2 text-[#F44336] font-bold">0</span> <span className="mx-2 text-[#F44336] font-bold">
0
</span>
</div> </div>
<span className="text-[#9B8579]">VS</span> <span className="text-[#9B8579]">VS</span>
<div className="flex items-center"> <div className="flex items-center">