ci: 添加 Epic UI 构建和部署工作流
- 新增 CI/CD 工作流文件，实现前端项目的自动构建和部署 - 支持 main、master 和 develop 分支的自动构建- 包含代码检出、环境安装、依赖管理、项目构建等步骤 - 实现构建产物的自动部署和 Docker 容器重启
This commit is contained in:
hu xiaotong
@@ -82,18 +82,24 @@ const Characters: React.FC = () => {
|
|||||||
const [selectedRole, setSelectedRole] = useState<string>("all");
|
const [selectedRole, setSelectedRole] = useState<string>("all");
|
||||||
const [searchTerm, setSearchTerm] = useState<string>("");
|
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||||
const [heroes, setHeroes] = useState<ExtendedHero[]>([]);
|
const [heroes, setHeroes] = useState<ExtendedHero[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
// 拉取英雄数据
|
// 拉取英雄数据
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
EpicApi.getHeroList().then(data => {
|
setLoading(true);
|
||||||
// console.log('Heroes:', data);
|
EpicApi.getHeroList()
|
||||||
// 类型转换，假设 API 返回的数据包含所需的所有属性
|
.then(data => {
|
||||||
const extendedData = data as ExtendedHero[];
|
const extendedData = data as ExtendedHero[];
|
||||||
setHeroes(extendedData);
|
setHeroes(extendedData);
|
||||||
setAllHeroes(extendedData);
|
setAllHeroes(extendedData);
|
||||||
});
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setHeroes([]);
|
||||||
|
setAllHeroes([]);
|
||||||
|
})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// 过滤逻辑
|
// 过滤逻辑
|
||||||
@@ -202,56 +208,63 @@ const Characters: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{filteredHeroes.length > 0 ? (
|
{loading ? (
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="flex flex-col items-center justify-center py-16">
|
||||||
{filteredHeroes.map((hero) => (
|
<span className="inline-block w-10 h-10 mb-4 border-4 border-[#C17F59] border-t-transparent rounded-full animate-spin"></span>
|
||||||
<div
|
<div className="text-[#C17F59] text-lg font-medium">加载中...</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>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center justify-center py-16">
|
filteredHeroes.length > 0 ? (
|
||||||
<div className="text-[#9B8579] text-xl font-medium mb-4">
|
<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>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user