From d859e54902b1cedaaf4fa0c3f86bcd47282809ff Mon Sep 17 00:00:00 2001
From: hu xiaotong <416314413@163.com>
Date: Wed, 9 Jul 2025 11:44:27 +0800
Subject: [PATCH] =?UTF-8?q?ci:=20=E6=B7=BB=E5=8A=A0=20Epic=20UI=20?=
 =?UTF-8?q?=E6=9E=84=E5=BB=BA=E5=92=8C=E9=83=A8=E7=BD=B2=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 CI/CD 工作流文件，实现前端项目的自动构建和部署
- 支持 main、master 和 develop 分支的自动构建- 包含代码检出、环境安装、依赖管理、项目构建等步骤
- 实现构建产物的自动部署和 Docker 容器重启
---
 src/pages/Characters.tsx | 119 ++++++++++++++++++++++-----------------
 1 file changed, 66 insertions(+), 53 deletions(-)

diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx
index 632e899..00f5f30 100644
--- a/src/pages/Characters.tsx
+++ b/src/pages/Characters.tsx
@@ -82,18 +82,24 @@ const Characters: React.FC = () => {
 	const [selectedRole, setSelectedRole] = useState<string>("all");
 	const [searchTerm, setSearchTerm] = useState<string>("");
 	const [heroes, setHeroes] = useState<ExtendedHero[]>([]);
+	const [loading, setLoading] = useState(true);
 
 	const navigate = useNavigate();
 
 	// 拉取英雄数据
 	useEffect(() => {
-		EpicApi.getHeroList().then(data => {
-			// console.log('Heroes:', data);
-			// 类型转换，假设 API 返回的数据包含所需的所有属性
-			const extendedData = data as ExtendedHero[];
-			setHeroes(extendedData);
-			setAllHeroes(extendedData);
-		});
+		setLoading(true);
+		EpicApi.getHeroList()
+			.then(data => {
+				const extendedData = data as ExtendedHero[];
+				setHeroes(extendedData);
+				setAllHeroes(extendedData);
+			})
+			.catch(() => {
+				setHeroes([]);
+				setAllHeroes([]);
+			})
+			.finally(() => setLoading(false));
 	}, []);
 
 	// 过滤逻辑
@@ -202,56 +208,63 @@ const Characters: React.FC = () => {
 					</div>
 				</div>
 
-				{filteredHeroes.length > 0 ? (
-					<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.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}`)}
-							>
-								{/* 头像+attr */}
-								<div className="relative mr-4 flex-shrink-0">
-									<img
-										src={hero.headImgUrl}
-										alt={hero.heroName}
-										className="w-16 h-16 rounded-full border-2 border-[#C17F59] object-cover object-center"
-									/>
-									<div className="absolute -top-2 -right-2">
-										{getElementIcon(hero.attribute)}
-									</div>
-								</div>
-								{/* 右侧信息 */}
-								<div className="flex flex-col justify-center flex-1 min-w-0">
-									<div className="flex items-center mb-1">
-										<span className="text-[16px] font-bold text-[#E6B17E]">{hero.heroName}</span>
-									</div>
-									<div className="flex items-center mb-1">
-										{renderStars(hero.stars)}
-									</div>
-									<div className="flex items-center text-[#C17F59] text-base font-medium">
-										{hero.role && (
-											<>
-												<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[#E6B17E] mr-2">
-													<img src={`/pic/role/${hero.role}.png`} alt={hero.role} className="w-6 h-6" />
-												</span>
-												<span className="align-middle">{ROLE_LABELS[hero.role] || hero.role}</span>
-											</>
-										)}
-									</div>
-								</div>
-							</div>
-						))}
+				{loading ? (
+					<div className="flex flex-col items-center justify-center py-16">
+						<span className="inline-block w-10 h-10 mb-4 border-4 border-[#C17F59] border-t-transparent rounded-full animate-spin"></span>
+						<div className="text-[#C17F59] text-lg font-medium">加载中...</div>
 					</div>
 				) : (
-					<div className="flex flex-col items-center justify-center py-16">
-						<div className="text-[#9B8579] text-xl font-medium mb-4">
-							暂无匹配的角色数据
+					filteredHeroes.length > 0 ? (
+						<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.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}`)}
+								>
+									{/* 头像+attr */}
+									<div className="relative mr-4 flex-shrink-0">
+										<img
+											src={hero.headImgUrl}
+											alt={hero.heroName}
+											className="w-16 h-16 rounded-full border-2 border-[#C17F59] object-cover object-center"
+										/>
+										<div className="absolute -top-2 -right-2">
+											{getElementIcon(hero.attribute)}
+										</div>
+									</div>
+									{/* 右侧信息 */}
+									<div className="flex flex-col justify-center flex-1 min-w-0">
+										<div className="flex items-center mb-1">
+											<span className="text-[16px] font-bold text-[#E6B17E]">{hero.heroName}</span>
+										</div>
+										<div className="flex items-center mb-1">
+											{renderStars(hero.stars)}
+										</div>
+										<div className="flex items-center text-[#C17F59] text-base font-medium">
+											{hero.role && (
+												<>
+													<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[#E6B17E] mr-2">
+														<img src={`/pic/role/${hero.role}.png`} alt={hero.role} className="w-6 h-6" />
+													</span>
+													<span className="align-middle">{ROLE_LABELS[hero.role] || hero.role}</span>
+												</>
+											)}
+										</div>
+									</div>
+								</div>
+							))}
 						</div>
-						<div className="text-[#7A6B5F] text-sm">
-							请尝试调整搜索条件或筛选条件
+					) : (
+						<div className="flex flex-col items-center justify-center py-16">
+							<div className="text-[#9B8579] text-xl font-medium mb-4">
+								暂无匹配的角色数据
+							</div>
+							<div className="text-[#7A6B5F] text-sm">
+								请尝试调整搜索条件或筛选条件
+							</div>
 						</div>
-					</div>
+					)
 				)}
 			</div>
 		</div>