From 3da558c0585674f5fb000143fb58b689aec88ed4 Mon Sep 17 00:00:00 2001
From: hu xiaotong <416314413@163.com>
Date: Mon, 7 Jul 2025 11:49:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(pages):=20=E4=BC=98=E5=8C=96=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 allHeroes状态数组，用于保存所有英雄数据
- 优化英雄数据的获取和处理逻辑
- 修改下拉选项过滤逻辑，使用 allHeroes 数组
- 调整下拉菜单的 z-index，提高层级以修复显示问题
- 使用 heroCode 作为英雄卡片的 key，而不是 id
---
 src/pages/Characters.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx
index ae1f85e..0df60f8 100644
--- a/src/pages/Characters.tsx
+++ b/src/pages/Characters.tsx
@@ -39,6 +39,7 @@ const ROLE_LABELS: Record<string, string> = {
 };
 
 const Characters: React.FC = () => {
+	const [allHeroes, setAllHeroes] = useState<any[]>([]);
 	const [selectedStars, setSelectedStars] = useState<number>(0);
 	const [selectedElement, setSelectedElement] = useState<string>("all");
 	const [selectedRole, setSelectedRole] = useState<string>("all");
@@ -53,7 +54,11 @@ const Characters: React.FC = () => {
 
 	// 拉取英雄数据
 	useEffect(() => {
-		EpicApi.getHeroList().then(setHeroes);
+		EpicApi.getHeroList().then(data => {
+			// console.log('Heroes:', data);
+			setHeroes(data);
+			setAllHeroes(data);
+		});
 	}, []);
 
 	// // 拉取 team-list 下拉数据（只请求一次）
@@ -104,7 +109,7 @@ const Characters: React.FC = () => {
 	};
 
 	// 下拉选项过滤
-	const filteredDropdownOptions = dropdownOptions.filter((hero: any) => {
+	const filteredDropdownOptions = allHeroes.filter((hero: any) => {
 		if (!searchTerm) return true;
 		return hero.heroName.toLowerCase().includes(searchTerm.toLowerCase()) ||
 			(hero.nickName && hero.nickName.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -151,7 +156,7 @@ const Characters: React.FC = () => {
 								<span className={`ml-2 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`}>▼</span>
 							</div>
 							{dropdownOpen && (
-								<div className="absolute 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 left-0 right-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-100">
 									<input
 										type="text"
 										value={searchTerm}
@@ -226,7 +231,7 @@ const Characters: React.FC = () => {
 				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
 					{filteredHeroes.map((hero) => (
 						<div
-							key={hero.id}
+							key={hero.heroCode}
 							className="flex items-center bg-[#23201B] rounded-xl border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 shadow-md px-4 py-3 min-h-[96px] max-h-[96px] cursor-pointer backdrop-blur-sm"
 							onClick={() => navigate(`/character/${hero.heroCode}`)}
 						>