From e431134d59cd02413d762cf7d866b3d733fca8b6 Mon Sep 17 00:00:00 2001 From: hxt Date: Thu, 17 Apr 2025 20:43:44 +0800 Subject: [PATCH] init --- src/pages/Characters.tsx | 663 +++++++++++++++++++++++++++------------ 1 file changed, 471 insertions(+), 192 deletions(-) diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx index 0c9659e..bf3212c 100644 --- a/src/pages/Characters.tsx +++ b/src/pages/Characters.tsx @@ -118,6 +118,277 @@ const Characters: React.FC = () => { imageUrl: "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20soul%20weaver%20with%20dark%20purple%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=12&orientation=squarish", }, + // 新增30个英雄数据 + { + id: 13, + name: "Alencia", + stars: 5, + element: "earth", + class: "Earth Knight", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=13&orientation=squarish", + }, + { + id: 14, + name: "Ambitious Tywin", + stars: 5, + element: "light", + class: "Light Knight", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20blonde%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=14&orientation=squarish", + }, + { + id: 15, + name: "Angelica", + stars: 4, + element: "water", + class: "Water Soul Weaver", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=15&orientation=squarish", + }, + { + id: 16, + name: "Angel of Light Angelica", + stars: 5, + element: "light", + class: "Light Soul Weaver", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20white%20hair%20and%20wings%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=16&orientation=squarish", + }, + { + id: 17, + name: "Arbiter Vildred", + stars: 5, + element: "dark", + class: "Dark Thief", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20black%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=17&orientation=squarish", + }, + { + id: 18, + name: "Architect Laika", + stars: 5, + element: "fire", + class: "Fire Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=18&orientation=squarish", + }, + { + id: 19, + name: "Armin", + stars: 4, + element: "earth", + class: "Earth Knight", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20brown%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=19&orientation=squarish", + }, + { + id: 20, + name: "Assassin Cartuja", + stars: 4, + element: "dark", + class: "Dark Thief", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=20&orientation=squarish", + }, + { + id: 21, + name: "Assassin Coli", + stars: 4, + element: "dark", + class: "Dark Thief", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=21&orientation=squarish", + }, + { + id: 22, + name: "Auxiliary Lots", + stars: 5, + element: "light", + class: "Light Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=22&orientation=squarish", + }, + { + id: 23, + name: "Baal & Sezan", + stars: 5, + element: "fire", + class: "Fire Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=23&orientation=squarish", + }, + { + id: 24, + name: "Basar", + stars: 5, + element: "earth", + class: "Earth Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=24&orientation=squarish", + }, + { + id: 25, + name: "Batisse", + stars: 3, + element: "fire", + class: "Fire Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=25&orientation=squarish", + }, + { + id: 26, + name: "Bellona", + stars: 5, + element: "earth", + class: "Earth Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=26&orientation=squarish", + }, + { + id: 27, + name: "Benevolent Romann", + stars: 5, + element: "light", + class: "Light Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=27&orientation=squarish", + }, + { + id: 28, + name: "Blaze Dingo", + stars: 4, + element: "fire", + class: "Fire Soul Weaver", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20healer%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=28&orientation=squarish", + }, + { + id: 29, + name: "Blood Blade Karin", + stars: 5, + element: "dark", + class: "Dark Thief", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=29&orientation=squarish", + }, + { + id: 30, + name: "Blue Krau", + stars: 5, + element: "water", + class: "Water Knight", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=30&orientation=squarish", + }, + { + id: 31, + name: "Briar Witch Iseria", + stars: 5, + element: "dark", + class: "Dark Ranger", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=31&orientation=squarish", + }, + { + id: 32, + name: "Butcher Corps Inquisitor", + stars: 4, + element: "dark", + class: "Dark Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=32&orientation=squarish", + }, + { + id: 33, + name: "Cecilia", + stars: 5, + element: "earth", + class: "Earth Knight", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=33&orientation=squarish", + }, + { + id: 34, + name: "Celestial Mercedes", + stars: 5, + element: "light", + class: "Light Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=34&orientation=squarish", + }, + { + id: 35, + name: "Cerise", + stars: 5, + element: "fire", + class: "Fire Ranger", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=35&orientation=squarish", + }, + { + id: 36, + name: "Challenger Dominiel", + stars: 5, + element: "light", + class: "Light Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=36&orientation=squarish", + }, + { + id: 37, + name: "Champion Zerato", + stars: 5, + element: "dark", + class: "Dark Mage", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=37&orientation=squarish", + }, + { + id: 38, + name: "Charles", + stars: 5, + element: "earth", + class: "Earth Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=38&orientation=squarish", + }, + { + id: 39, + name: "Charlotte", + stars: 5, + element: "fire", + class: "Fire Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=39&orientation=squarish", + }, + { + id: 40, + name: "Chloe", + stars: 5, + element: "fire", + class: "Fire Knight", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=40&orientation=squarish", + }, + { + id: 41, + name: "Cidd", + stars: 4, + element: "earth", + class: "Earth Thief", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=41&orientation=squarish", + }, + { + id: 42, + name: "Clarissa", + stars: 4, + element: "water", + class: "Water Warrior", + imageUrl: + "https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=42&orientation=squarish", + }, ]; const renderStars = (count: number) => { @@ -231,222 +502,230 @@ const Characters: React.FC = () => { }); return ( -
-

- All Epic Seven Heroes -

+
+ {/* 背景装饰 */} +
-
-
- setSearchTerm(e.target.value)} - /> +
+

+ + All Epic Seven Heroes + +

-
- {["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => ( +
+
+ setSearchTerm(e.target.value)} + /> +
+ +
+
+ {["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => ( + + ))} +
+
+ +
+
- ))} -
-
-
-
- - - - - - - - - - - -
-
- -
-
- - - {[ - "Knight", - "Warrior", - "Thief", - "Ranger", - "Mage", - "Soul Weaver", - ].map((classType) => ( - ))} -
-
-
-
- - - {[...Array(12)].map((_, index) => ( - ))} -
-
-
-
-

Select Buffs

-
-
-

Select Debuffs

-
-
-
+ -
- {filteredHeroes.map((hero) => ( -
-
- {hero.name} -
- {getElementIcon(hero.element)} -
-
+ -
-

- {hero.name} -

-
{renderStars(hero.stars)}
-

{hero.class}

+
- ))} + +
+
+ + + {[ + "Knight", + "Warrior", + "Thief", + "Ranger", + "Mage", + "Soul Weaver", + ].map((classType) => ( + + ))} +
+
+ +
+
+ + + {[...Array(12)].map((_, index) => ( + + ))} +
+
+ +
+
+

Select Buffs

+
+
+

Select Debuffs

+
+
+
+ +
+ {filteredHeroes.map((hero) => ( +
+
+ {hero.name} +
+ {renderStars(hero.stars)} +
+
+ {getElementIcon(hero.element)} +
+
+
+

{hero.name}

+
+ {getClassIcon(hero.class)} + {hero.class} +
+
+
+ ))} +
);