ci: 添加 Epic UI 构建和部署工作流

- 新增 CI/CD 工作流文件，实现前端项目的自动构建和部署
- 支持 main、master 和 develop 分支的自动构建- 包含代码检出、环境安装、依赖管理、项目构建等步骤
- 实现构建产物的自动部署和 Docker 容器重启

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 => {
+		setLoading(true);
-			// console.log('Heroes:', data);
+		EpicApi.getHeroList()
-			// 类型转换，假设 API 返回的数据包含所需的所有属性
+			.then(data => {
 				const extendedData = data as ExtendedHero[];
 				setHeroes(extendedData);
 				setAllHeroes(extendedData);
-		});
+			})
+			.catch(() => {
+				setHeroes([]);
+				setAllHeroes([]);
+			})
+			.finally(() => setLoading(false));
 	}, []);
 
 	// 过滤逻辑
@@ -202,7 +208,13 @@ const Characters: React.FC = () => {
 					</div>
 				</div>
 
-				{filteredHeroes.length > 0 ? (
+				{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>
+				) : (
+					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
@@ -252,6 +264,7 @@ const Characters: React.FC = () => {
 								请尝试调整搜索条件或筛选条件
 							</div>
 						</div>
+					)
 				)}
 			</div>
 		</div>