From 16eed5ff469046973b68bb79d8e66e629787c751 Mon Sep 17 00:00:00 2001
From: hu xiaotong <416314413@163.com>
Date: Thu, 17 Apr 2025 07:47:17 +0800
Subject: [PATCH] init

---
 package-lock.json             |   1 +
 src/components/Footer.tsx     |   8 +-
 src/components/LoginModal.tsx | 264 +++++++++++++++++++---------------
 src/index.css                 |   4 +-
 src/index.tsx                 |  22 +--
 src/pages/Home.tsx            |  55 ++++---
 6 files changed, 204 insertions(+), 150 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ff953b..e6c6c43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
       "integrity": "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT OR Apache-2.0",
       "bin": {
         "biome": "bin/biome"
       },
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ef9d89d..6882216 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -38,7 +38,9 @@ const Footer: React.FC = () => {
 						</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">
 							<li>
 								<a
@@ -128,7 +130,9 @@ const Footer: React.FC = () => {
 						</ul>
 					</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">
 							<li className="text-[#9B8579] flex items-center">
 								<i className="fas fa-envelope mr-2 text-[#C17F59]"></i>
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index 0e8cf85..cef7041 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -1,125 +1,157 @@
 import React from "react";
 
 interface LoginModalProps {
-  isOpen: boolean;
-  onClose: () => void;
+	isOpen: boolean;
+	onClose: () => void;
 }
 
 const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
-  if (!isOpen) return null;
+	if (!isOpen) return null;
 
-  return (
-    <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="fixed inset-0 transition-opacity z-50" aria-hidden="true">
-          <div className="absolute inset-0 bg-black opacity-75"></div>
-        </div>
-        <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 top-4 right-4 z-50">
-            <button
-              onClick={onClose}
-              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-label="关闭"
-            >
-              <i className="fas fa-times text-lg"></i>
-            </button>
-          </div>
-          <div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-            <div className="sm:flex sm:items-start">
-              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-                <h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center">
-                  登录账号
-                </h3>
-                <div className="mt-2">
-                  <div className="mb-4">
-                    <label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1">
-                      电子邮箱
-                    </label>
-                    <input
-                      type="email"
-                      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"
-                      placeholder="your@email.com"
-                    />
-                  </div>
-                  <div className="mb-6">
-                    <label htmlFor="password" className="block text-sm font-medium text-gray-400 mb-1">
-                      密码
-                    </label>
-                    <input
-                      type="password"
-                      id="password"
-                      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="输入密码"
-                    />
-                  </div>
-                  <div className="flex items-center justify-between mb-6">
-                    <div className="flex items-center">
-                      <input
-                        id="remember-me"
-                        name="remember-me"
-                        type="checkbox"
-                        className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
-                      />
-                      <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-400">
-                        记住我
-                      </label>
-                    </div>
-                    <div className="text-sm">
-                      <a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer">
-                        忘记密码?
-                      </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">
-                    登录
-                  </button>
-                </div>
-                <div className="mt-6">
-                  <div className="relative">
-                    <div className="absolute inset-0 flex items-center">
-                      <div className="w-full border-t border-gray-700"></div>
-                    </div>
-                    <div className="relative flex justify-center text-sm">
-                      <span className="px-2 bg-gray-900 text-gray-400">
-                        或使用以下方式登录
-                      </span>
-                    </div>
-                  </div>
-                  <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">
-                        <i className="fab fa-weixin 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-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>
-  );
+	return (
+		<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="fixed inset-0 transition-opacity z-50"
+					aria-hidden="true"
+				>
+					<div className="absolute inset-0 bg-black opacity-75"></div>
+				</div>
+				<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 top-4 right-4 z-50">
+						<button
+							onClick={onClose}
+							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-label="关闭"
+						>
+							<i className="fas fa-times text-lg"></i>
+						</button>
+					</div>
+					<div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+						<div className="sm:flex sm:items-start">
+							<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+								<h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center">
+									登录账号
+								</h3>
+								<div className="mt-2">
+									<div className="mb-4">
+										<label
+											htmlFor="email"
+											className="block text-sm font-medium text-gray-400 mb-1"
+										>
+											电子邮箱
+										</label>
+										<input
+											type="email"
+											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"
+											placeholder="your@email.com"
+										/>
+									</div>
+									<div className="mb-6">
+										<label
+											htmlFor="password"
+											className="block text-sm font-medium text-gray-400 mb-1"
+										>
+											密码
+										</label>
+										<input
+											type="password"
+											id="password"
+											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="输入密码"
+										/>
+									</div>
+									<div className="flex items-center justify-between mb-6">
+										<div className="flex items-center">
+											<input
+												id="remember-me"
+												name="remember-me"
+												type="checkbox"
+												className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
+											/>
+											<label
+												htmlFor="remember-me"
+												className="ml-2 block text-sm text-gray-400"
+											>
+												记住我
+											</label>
+										</div>
+										<div className="text-sm">
+											<a
+												href="#"
+												className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
+											>
+												忘记密码?
+											</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">
+										登录
+									</button>
+								</div>
+								<div className="mt-6">
+									<div className="relative">
+										<div className="absolute inset-0 flex items-center">
+											<div className="w-full border-t border-gray-700"></div>
+										</div>
+										<div className="relative flex justify-center text-sm">
+											<span className="px-2 bg-gray-900 text-gray-400">
+												或使用以下方式登录
+											</span>
+										</div>
+									</div>
+									<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"
+											>
+												<i className="fab fa-weixin 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-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; 
\ No newline at end of file
+export default LoginModal;
diff --git a/src/index.css b/src/index.css
index bbf35bb..66c0122 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,2 +1,2 @@
-@import 'tailwindcss';
-@import '@fortawesome/fontawesome-free/css/all.min.css';
\ No newline at end of file
+@import "tailwindcss";
+@import "@fortawesome/fontawesome-free/css/all.min.css";
diff --git a/src/index.tsx b/src/index.tsx
index c7034ab..8d0dfca 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-const rootEl = document.getElementById('root');
+const rootEl = document.getElementById("root");
 if (rootEl) {
-  const root = ReactDOM.createRoot(rootEl);
-  root.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>,
-  );
+	const root = ReactDOM.createRoot(rootEl);
+	root.render(
+		<React.StrictMode>
+			<App />
+		</React.StrictMode>,
+	);
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index c76c4bd..703b407 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -149,14 +149,16 @@ const Home: React.FC = () => {
 		if (isDragging && Math.abs(normalizedDragX) > 0) {
 			if (dragX > 0) {
 				// 向右拖动，显示上一张
-				const prevIndex = currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
+				const prevIndex =
+					currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
 				return [
 					{ index: prevIndex, opacity: Math.min(normalizedDragX, 1) },
 					{ index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) },
 				];
 			} else {
 				// 向左拖动，显示下一张
-				const nextIndex = currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
+				const nextIndex =
+					currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
 				return [
 					{ index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) },
 					{ index: nextIndex, opacity: Math.min(-normalizedDragX, 1) },
@@ -357,8 +359,8 @@ const Home: React.FC = () => {
 						onTouchMove={handleTouchMove}
 						onTouchEnd={handleTouchEnd}
 						style={{
-							cursor: isDragging ? 'grabbing' : 'grab',
-							touchAction: 'none'
+							cursor: isDragging ? "grabbing" : "grab",
+							touchAction: "none",
 						}}
 					>
 						<div className="absolute inset-0 z-0">
@@ -368,7 +370,9 @@ const Home: React.FC = () => {
 									className="absolute inset-0"
 									style={{
 										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>
@@ -442,7 +446,9 @@ const Home: React.FC = () => {
 											新英雄预告
 										</span>
 									</div>
-									<h2 className="text-2xl font-bold text-[#E6B17E]">即将登场</h2>
+									<h2 className="text-2xl font-bold text-[#E6B17E]">
+										即将登场
+									</h2>
 								</div>
 								<a
 									href="#"
@@ -475,9 +481,7 @@ const Home: React.FC = () => {
 												<h3 className="text-lg font-bold text-[#E6B17E]">
 													{character.name}
 												</h3>
-												<span className="text-[#C17F59] text-sm">
-													即将登场
-												</span>
+												<span className="text-[#C17F59] text-sm">即将登场</span>
 											</div>
 											<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
 												{character.description}
@@ -509,7 +513,9 @@ const Home: React.FC = () => {
 											平衡性调整
 										</span>
 									</div>
-									<h2 className="text-2xl font-bold text-[#E6B17E]">最新更新</h2>
+									<h2 className="text-2xl font-bold text-[#E6B17E]">
+										最新更新
+									</h2>
 								</div>
 								<a
 									href="#"
@@ -542,9 +548,7 @@ const Home: React.FC = () => {
 												<h3 className="text-lg font-bold text-[#E6B17E]">
 													{character.name}
 												</h3>
-												<span className="text-[#C17F59] text-sm">
-													最新更新
-												</span>
+												<span className="text-[#C17F59] text-sm">最新更新</span>
 											</div>
 											<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
 												{character.description}
@@ -691,7 +695,10 @@ const Home: React.FC = () => {
 											</thead>
 											<tbody className="divide-y divide-[#3A2E2A]">
 												{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">
 															<div
 																className={`w-6 h-6 rounded-full flex items-center justify-center ${
@@ -735,11 +742,15 @@ const Home: React.FC = () => {
 									</div>
 									<div className="flex items-center justify-between mb-4">
 										<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 className="flex items-center justify-between mb-4">
 										<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 className="flex items-center justify-between">
 										<span className="text-[#9B8579]">剩余时间</span>
@@ -769,7 +780,9 @@ const Home: React.FC = () => {
 												</div>
 												<span className="text-[#9B8579]">VS</span>
 												<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>
@@ -792,7 +805,9 @@ const Home: React.FC = () => {
 												</div>
 												<span className="text-[#9B8579]">VS</span>
 												<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>
@@ -809,7 +824,9 @@ const Home: React.FC = () => {
 													<span className="font-medium text-[#E6B17E]">
 														幽灵战队
 													</span>
-													<span className="mx-2 text-[#F44336] font-bold">0</span>
+													<span className="mx-2 text-[#F44336] font-bold">
+														0
+													</span>
 												</div>
 												<span className="text-[#9B8579]">VS</span>
 												<div className="flex items-center">