feat(pages): 优化角色页面功能和样式

- 添加 allHeroes状态数组，用于保存所有英雄数据
- 优化英雄数据的获取和处理逻辑
- 修改下拉选项过滤逻辑，使用 allHeroes 数组
- 调整下拉菜单的 z-index，提高层级以修复显示问题
- 使用 heroCode 作为英雄卡片的 key，而不是 id

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}`)}
 						>