From 87a8462d6334a845ab6a32abd01895fff5785c1e Mon Sep 17 00:00:00 2001
From: hxt <hxt1377@163.com>
Date: Sat, 26 Apr 2025 17:48:22 +0800
Subject: [PATCH] =?UTF-8?q?style(Lineup):=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整了代码的缩进和空格，提高了可读性
-修复了一些小的语法问题，如缺少逗号等
- 优化了部分长行的换行方式，提高了代码的整洁度
---
 src/components/Footer.tsx | 292 +++++++++++++++++++-------------------
 src/components/Navbar.tsx |  24 ++--
 src/pages/Lineup.tsx      | 131 ++++++++++-------
 3 files changed, 235 insertions(+), 212 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6882216..06e7b85 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,154 +4,154 @@ const Footer: React.FC = () => {
 	return (
 		<footer className="bg-[#1A1412] pt-12 pb-8">
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-				<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-					<div>
-						<h3 className="text-xl font-bold text-[#E6B17E] mb-4">战神纪元</h3>
-						<p className="text-[#9B8579] mb-4">
-							最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
-						</p>
-						<div className="flex space-x-4">
-							<a
-								href="#"
-								className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-							>
-								<i className="fab fa-weixin text-xl"></i>
-							</a>
-							<a
-								href="#"
-								className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-							>
-								<i className="fab fa-qq text-xl"></i>
-							</a>
-							<a
-								href="#"
-								className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-							>
-								<i className="fab fa-weibo text-xl"></i>
-							</a>
-							<a
-								href="#"
-								className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-							>
-								<i className="fab fa-bilibili text-xl"></i>
-							</a>
-						</div>
-					</div>
-					<div>
-						<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
-							快速链接
-						</h3>
-						<ul className="space-y-2">
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									游戏下载
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									新手教程
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									更新日志
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									活动中心
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									商城
-								</a>
-							</li>
-						</ul>
-					</div>
-					<div>
-						<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">支持</h3>
-						<ul className="space-y-2">
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									常见问题
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									联系我们
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									用户协议
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									隐私政策
-								</a>
-							</li>
-							<li>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
-								>
-									关于我们
-								</a>
-							</li>
-						</ul>
-					</div>
-					<div>
-						<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>
-								support@epicgame.com
-							</li>
-							<li className="text-[#9B8579] flex items-center">
-								<i className="fas fa-phone mr-2 text-[#C17F59]"></i>
-								400-123-4567
-							</li>
-							<li className="text-[#9B8579] flex items-center">
-								<i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></i>
-								上海市浦东新区张江高科技园区
-							</li>
-						</ul>
-					</div>
-				</div>
+				{/*<div className="grid grid-cols-1 md:grid-cols-4 gap-8">*/}
+				{/*	<div>*/}
+				{/*		<h3 className="text-xl font-bold text-[#E6B17E] mb-4">战神纪元</h3>*/}
+				{/*		<p className="text-[#9B8579] mb-4">*/}
+				{/*			最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。*/}
+				{/*		</p>*/}
+				{/*		<div className="flex space-x-4">*/}
+				{/*			<a*/}
+				{/*				href="#"*/}
+				{/*				className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*			>*/}
+				{/*				<i className="fab fa-weixin text-xl"></i>*/}
+				{/*			</a>*/}
+				{/*			<a*/}
+				{/*				href="#"*/}
+				{/*				className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*			>*/}
+				{/*				<i className="fab fa-qq text-xl"></i>*/}
+				{/*			</a>*/}
+				{/*			<a*/}
+				{/*				href="#"*/}
+				{/*				className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*			>*/}
+				{/*				<i className="fab fa-weibo text-xl"></i>*/}
+				{/*			</a>*/}
+				{/*			<a*/}
+				{/*				href="#"*/}
+				{/*				className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*			>*/}
+				{/*				<i className="fab fa-bilibili text-xl"></i>*/}
+				{/*			</a>*/}
+				{/*		</div>*/}
+				{/*	</div>*/}
+				{/*	<div>*/}
+				{/*		<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">*/}
+				{/*			快速链接*/}
+				{/*		</h3>*/}
+				{/*		<ul className="space-y-2">*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					游戏下载*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					新手教程*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					更新日志*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					活动中心*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					商城*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*		</ul>*/}
+				{/*	</div>*/}
+				{/*	<div>*/}
+				{/*		<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">支持</h3>*/}
+				{/*		<ul className="space-y-2">*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					常见问题*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					联系我们*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					用户协议*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					隐私政策*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*			<li>*/}
+				{/*				<a*/}
+				{/*					href="#"*/}
+				{/*					className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
+				{/*				>*/}
+				{/*					关于我们*/}
+				{/*				</a>*/}
+				{/*			</li>*/}
+				{/*		</ul>*/}
+				{/*	</div>*/}
+				{/*	<div>*/}
+				{/*		<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>*/}
+				{/*				support@epicgame.com*/}
+				{/*			</li>*/}
+				{/*			<li className="text-[#9B8579] flex items-center">*/}
+				{/*				<i className="fas fa-phone mr-2 text-[#C17F59]"></i>*/}
+				{/*				400-123-4567*/}
+				{/*			</li>*/}
+				{/*			<li className="text-[#9B8579] flex items-center">*/}
+				{/*				<i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></i>*/}
+				{/*				上海市浦东新区张江高科技园区*/}
+				{/*			</li>*/}
+				{/*		</ul>*/}
+				{/*	</div>*/}
+				{/*</div>*/}
 				<div className="mt-8 pt-8 border-t border-[#C17F59]/30 text-center">
 					<p className="text-[#9B8579] text-sm">
-						© 2024 战神纪元. All rights reserved.
+						© 2025 露娜助手. All rights reserved.
 					</p>
 				</div>
 			</div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 8e13e27..532bcfd 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -12,12 +12,12 @@ interface NavItem {
 
 const navItems: NavItem[] = [
 	{ path: "/", label: "对战阵容" },
-	{ path: "/home", label: "主页" },
-	{ path: "/characters", label: "角色列表" },
-	{ path: "/builds", label: "配装攻略" },
-	{ path: "/battles", label: "对战信息" },
-	{ path: "/news", label: "资讯中心" },
-	{ path: "/community", label: "社区" }
+	// { path: "/home", label: "主页" },
+	// { path: "/characters", label: "角色列表" },
+	// { path: "/builds", label: "配装攻略" },
+	// { path: "/battles", label: "对战信息" },
+	// { path: "/news", label: "资讯中心" },
+	// { path: "/community", label: "社区" }
 ];
 
 const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
@@ -53,12 +53,12 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 						</div>
 					</div>
 					<div className="hidden md:block">
-						<button
-							onClick={onLoginClick}
-							className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"
-						>
-							登录
-						</button>
+						{/*<button*/}
+						{/*	onClick={onLoginClick}*/}
+						{/*	className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"*/}
+						{/*>*/}
+						{/*	登录*/}
+						{/*</button>*/}
 					</div>
 					<div className="-mr-2 flex md:hidden">
 						<button
diff --git a/src/pages/Lineup.tsx b/src/pages/Lineup.tsx
index 3d72c05..7811a92 100644
--- a/src/pages/Lineup.tsx
+++ b/src/pages/Lineup.tsx
@@ -3,9 +3,8 @@ import * as EpicApi from '@/api/index';
 import { Character } from '@/api/types';
 
 const Lineup: React.FC = () => {
-    const [selectedDifficulty, setSelectedDifficulty] = useState<string>("简单");
     const [lineups, setLineups] = useState<EpicApi.GvgTeam[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
+    const [loading, setLoading] = useState<boolean>(false);
     const [error, setError] = useState<string | null>(null);
     const [heroes, setHeroes] = useState<EpicApi.Hero[]>([]);
     const [selectedHeroes, setSelectedHeroes] = useState<EpicApi.Hero[]>([]);
@@ -26,27 +25,10 @@ const Lineup: React.FC = () => {
         fetchHeroes();
     }, []);
 
-    // Fetch lineups data
+    // Initial data fetch
     useEffect(() => {
-        const fetchLineups = async () => {
-            setLoading(true);
-            try {
-                const heroCodes = selectedHeroes.map(hero => hero.heroCode);
-                const data = await EpicApi.getGvgTeamList(heroCodes);
-                setLineups(data);
-                setError(null);
-            } catch (err) {
-                console.error('Failed to fetch lineups:', err);
-                setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchLineups();
-    }, [selectedHeroes]);
-
-    const difficulties = ["简单", "中等", "困难"];
+        handleSearch();
+    }, []);
 
     const handleHeroSelect = (hero: EpicApi.Hero) => {
         if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
@@ -60,20 +42,51 @@ const Lineup: React.FC = () => {
         setSelectedHeroes(selectedHeroes.filter(h => h.id !== heroId));
     };
 
+    const handleSearch = async () => {
+        if (selectedHeroes.length === 0) {
+            // If no heroes selected, fetch all lineups
+            setLoading(true);
+            try {
+                const data = await EpicApi.getGvgTeamList([]);
+                setLineups(data);
+                setError(null);
+            } catch (err) {
+                console.error('Failed to fetch lineups:', err);
+                setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
+            } finally {
+                setLoading(false);
+            }
+            return;
+        }
+        
+        setLoading(true);
+        try {
+            const heroCodes = selectedHeroes.map(hero => hero.heroCode);
+            const data = await EpicApi.getGvgTeamList(heroCodes);
+            setLineups(data);
+            setError(null);
+        } catch (err) {
+            console.error('Failed to fetch lineups:', err);
+            setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setSelectedHeroes([]);
+        setSearchInput("");
+        setLineups([]);
+        setError(null);
+        handleSearch(); // Fetch all lineups after reset
+    };
+
     const filteredHeroes = heroes.filter(hero => {
         const searchLower = searchInput.toLowerCase();
         return hero.heroName.toLowerCase().includes(searchLower) || 
                (hero.nickName && hero.nickName.toLowerCase().includes(searchLower));
     });
 
-    const filteredLineups = lineups.filter(lineup => {
-        const matchesDifficulty = selectedDifficulty === "简单" && lineup.id % 3 === 1 ||
-            selectedDifficulty === "中等" && lineup.id % 3 === 2 ||
-            selectedDifficulty === "困难" && lineup.id % 3 === 0;
-
-        return matchesDifficulty;
-    });
-
     return (
         <div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
             {/* 背景装饰 */}
@@ -87,33 +100,28 @@ const Lineup: React.FC = () => {
                 </h1>
 
                 {/* 搜索和筛选组件 */}
-                <div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm">
-                    {/* 难度筛选 */}
-                    <div className="mb-4">
-                        <div className="flex flex-wrap gap-1">
-                            {difficulties.map((difficulty) => (
-                                <button
-                                    key={difficulty}
-                                    className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
-                                        selectedDifficulty === difficulty
-                                            ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
-                                            : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
-                                    }`}
-                                    onClick={() => setSelectedDifficulty(difficulty)}
-                                >
-                                    {difficulty}
-                                </button>
-                            ))}
-                        </div>
+                <div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm min-h-[8rem]">
+                    {/* 数据来源说明 */}
+                    <div className="text-center mb-4 text-[#9B8579]">
+                        <span>对战数据来源于</span>
+                        <a
+                            href="https://docs.qq.com/sheet/DVmVIdGZOSnVJTHBq?tab=BB08J2"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-[#E6B17E] hover:text-[#C17F59] mx-1"
+                        >
+                            【鬼殺队GVG通解】
+                        </a>
+                        <span>感谢分享</span>
                     </div>
 
                     {/* 英雄多选下拉框 */}
-                    <div className="relative">
+                    <div className="relative flex gap-2">
                         <div 
-                            className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] cursor-pointer flex items-center justify-between"
+                            className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-[32rem] text-[#E6B17E] cursor-pointer flex items-center justify-between h-12"
                             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                         >
-                            <div className="flex flex-wrap gap-2">
+                            <div className="flex flex-wrap gap-2 flex-1 items-center">
                                 {selectedHeroes.length > 0 ? (
                                     selectedHeroes.map((hero) => (
                                         <div
@@ -136,13 +144,28 @@ const Lineup: React.FC = () => {
                                     <span className="text-[#9B8579]">选择防守英雄（最多3个）</span>
                                 )}
                             </div>
-                            <span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}>
+                            <span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''} ml-2`}>
                                 ▼
                             </span>
                         </div>
                         
+                        <button
+                            className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm text-[#E6B17E] hover:bg-[#2A211E] hover:border-[#C17F59] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+                            onClick={handleSearch}
+                            disabled={selectedHeroes.length === 0}
+                        >
+                            搜索
+                        </button>
+
+                        <button
+                            className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm text-[#E6B17E] hover:bg-[#2A211E] hover:border-[#C17F59] transition-colors duration-200 whitespace-nowrap"
+                            onClick={handleReset}
+                        >
+                            重置
+                        </button>
+                        
                         {isDropdownOpen && (
-                            <div className="absolute top-full left-0 right-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50">
+                            <div className="absolute top-full left-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50 w-[32rem]">
                                 <div className="p-2 border-b border-[#C17F59]/30">
                                     <input
                                         type="text"
@@ -202,7 +225,7 @@ const Lineup: React.FC = () => {
                 {/* 阵容列表 */}
                 {!loading && (
                     <div className="space-y-4">
-                        {filteredLineups.map((lineup) => (
+                        {lineups.map((lineup) => (
                             <div
                                 key={lineup.id}
                                 className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 backdrop-blur-sm"