kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 添加 allHeroes状态数组，用于保存所有英雄数据
- 优化英雄数据的获取和处理逻辑
- 修改下拉选项过滤逻辑，使用 allHeroes 数组
- 调整下拉菜单的 z-index，提高层级以修复显示问题
- 使用 heroCode 作为英雄卡片的 key，而不是 id
This commit is contained in:
hu xiaotong
2025-07-07 11:49:55 +08:00
parent 069235a065
commit 3da558c058
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/Characters.tsx
View File

@@ -39,6 +39,7 @@ const ROLE_LABELS: Record<string, string> = {
}; };
const Characters: React.FC = () => { const Characters: React.FC = () => {
const [allHeroes, setAllHeroes] = useState<any[]>([]);
const [selectedStars, setSelectedStars] = useState<number>(0); const [selectedStars, setSelectedStars] = useState<number>(0);
const [selectedElement, setSelectedElement] = useState<string>("all"); const [selectedElement, setSelectedElement] = useState<string>("all");
const [selectedRole, setSelectedRole] = useState<string>("all"); const [selectedRole, setSelectedRole] = useState<string>("all");
@@ -53,7 +54,11 @@ const Characters: React.FC = () => {
// 拉取英雄数据 // 拉取英雄数据
useEffect(() => { useEffect(() => {
EpicApi.getHeroList().then(setHeroes); EpicApi.getHeroList().then(data => {
// console.log('Heroes:', data);
setHeroes(data);
setAllHeroes(data);
});
}, []); }, []);
// // 拉取 team-list 下拉数据（只请求一次） // // 拉取 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; if (!searchTerm) return true;
return hero.heroName.toLowerCase().includes(searchTerm.toLowerCase()) || return hero.heroName.toLowerCase().includes(searchTerm.toLowerCase()) ||
(hero.nickName && hero.nickName.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> <span className={`ml-2 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`}>▼</span>
</div> </div>
{dropdownOpen && ( {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 <input
type="text" type="text"
value={searchTerm} 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"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
{filteredHeroes.map((hero) => ( {filteredHeroes.map((hero) => (
<div <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" 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}`)} onClick={() => navigate(`/character/${hero.heroCode}`)}
> >