377 lines
20 KiB
TypeScript
377 lines
20 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { getGvgTeamList, GvgTeam, GvgTeamQueryParams } from '../api/gvg';
|
|
|
|
const Lineup: React.FC = () => {
|
|
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("All");
|
|
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
|
const [searchTerm, setSearchTerm] = useState<string>("");
|
|
const [lineups, setLineups] = useState<GvgTeam[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [pageNum, setPageNum] = useState<number>(1);
|
|
const [pageSize, setPageSize] = useState<number>(10);
|
|
const [total, setTotal] = useState<number>(0);
|
|
const navigate = useNavigate();
|
|
|
|
// Fetch data from API
|
|
useEffect(() => {
|
|
const fetchLineups = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params: GvgTeamQueryParams = {
|
|
pageNum,
|
|
pageSize,
|
|
// Add other filters as needed
|
|
};
|
|
|
|
const response = await getGvgTeamList(params);
|
|
setLineups(response.list);
|
|
setTotal(response.total);
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('Failed to fetch lineups:', err);
|
|
setError('获取阵容数据失败，请稍后再试');
|
|
// Use mock data as fallback
|
|
setLineups(mockLineups);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchLineups();
|
|
}, [pageNum, pageSize]);
|
|
|
|
// Mock data for fallback
|
|
const mockLineups: GvgTeam[] = [
|
|
{
|
|
id: 1,
|
|
defenseHeroes: ["暗影刺客", "元素法师", "圣骑士", "治疗师"],
|
|
attackHeroes: ["暗影刺客", "元素法师", "圣骑士", "治疗师"],
|
|
equipmentInfo: "攻击套 + 暴击套",
|
|
artifacts: "攻击力 + 暴击率",
|
|
battleStrategy: "以高爆发伤害为主的阵容，适合快速结束战斗",
|
|
prerequisites: "需要高星级角色和优质装备",
|
|
importantNotes: "注意控制技能释放时机",
|
|
createTime: "2023-01-01",
|
|
updateTime: "2023-01-01"
|
|
},
|
|
{
|
|
id: 2,
|
|
defenseHeroes: ["龙骑士", "冰霜法师", "守护者", "圣光牧师"],
|
|
attackHeroes: ["龙骑士", "冰霜法师", "守护者", "圣光牧师"],
|
|
equipmentInfo: "生命套 + 防御套",
|
|
artifacts: "生命值 + 防御力",
|
|
battleStrategy: "以持续输出和防御为主的阵容，适合持久战",
|
|
prerequisites: "需要高生命值和防御力的角色",
|
|
importantNotes: "注意保持治疗技能的持续释放",
|
|
createTime: "2023-01-02",
|
|
updateTime: "2023-01-02"
|
|
}
|
|
];
|
|
|
|
const difficulties = ["简单", "中等", "困难"];
|
|
const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];
|
|
|
|
const filteredLineups = lineups.filter(lineup => {
|
|
const matchesSearch =
|
|
lineup.battleStrategy.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
lineup.defenseHeroes.some((hero: string) => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
lineup.attackHeroes.some((hero: string) => hero.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
|
|
// Since we don't have difficulty in the API data, we'll use a simple filter
|
|
const matchesDifficulty = selectedDifficulty === "All" ||
|
|
(selectedDifficulty === "简单" && lineup.id % 3 === 1) ||
|
|
(selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
|
|
(selectedDifficulty === "困难" && lineup.id % 3 === 0);
|
|
|
|
// Since we don't have tags in the API data, we'll use a simple filter
|
|
const matchesTags = selectedTags.length === 0 ||
|
|
selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
|
|
|
|
return matchesSearch && matchesDifficulty && matchesTags;
|
|
});
|
|
|
|
const handleLineupClick = (id: number) => {
|
|
navigate(`/lineup/${id}`);
|
|
};
|
|
|
|
const handlePageChange = (newPage: number) => {
|
|
setPageNum(newPage);
|
|
};
|
|
|
|
const handlePageSizeChange = (newSize: number) => {
|
|
setPageSize(newSize);
|
|
setPageNum(1); // Reset to first page when changing page size
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
|
|
{/* 背景装饰 */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] via-[#2A211E] to-[#1A1412]"></div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
|
|
<h1 className="text-4xl font-bold text-center mb-8">
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
|
|
对战阵容推荐
|
|
</span>
|
|
</h1>
|
|
|
|
{/* 搜索和筛选组件 */}
|
|
<div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
|
<input
|
|
type="text"
|
|
placeholder="搜索阵容"
|
|
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] placeholder-[#9B8579] focus:border-[#C17F59] focus:outline-none"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 难度筛选 */}
|
|
<div className="mb-4">
|
|
<div className="flex flex-wrap gap-1">
|
|
<button
|
|
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
|
selectedDifficulty === "All"
|
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
|
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
|
}`}
|
|
onClick={() => setSelectedDifficulty("All")}
|
|
>
|
|
全部难度
|
|
</button>
|
|
{difficulties.map((difficulty) => (
|
|
<button
|
|
key={difficulty}
|
|
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
|
selectedDifficulty === difficulty
|
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
|
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
|
}`}
|
|
onClick={() => setSelectedDifficulty(difficulty)}
|
|
>
|
|
{difficulty}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 标签筛选 */}
|
|
<div className="mb-4">
|
|
<div className="flex flex-wrap gap-1">
|
|
{availableTags.map((tag) => (
|
|
<button
|
|
key={tag}
|
|
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
|
selectedTags.includes(tag)
|
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
|
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
|
}`}
|
|
onClick={() => {
|
|
setSelectedTags(prev =>
|
|
prev.includes(tag)
|
|
? prev.filter(t => t !== tag)
|
|
: [...prev, tag]
|
|
);
|
|
}}
|
|
>
|
|
{tag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 加载状态 */}
|
|
{loading && (
|
|
<div className="flex justify-center items-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#E6B17E]"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 错误提示 */}
|
|
{error && (
|
|
<div className="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded mb-6">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* 阵容列表 - 列表格式 */}
|
|
{!loading && (
|
|
<div className="space-y-4">
|
|
{filteredLineups.map((lineup) => (
|
|
<div
|
|
key={lineup.id}
|
|
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
|
|
onClick={() => handleLineupClick(lineup.id)}
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-[#E6B17E] mb-2">阵容 #{lineup.id}</h3>
|
|
<p className="text-[#9B8579]">{lineup.battleStrategy}</p>
|
|
</div>
|
|
<div className="mt-4 md:mt-0 flex items-center">
|
|
<span className="text-[#C17F59] text-sm mr-2">创建时间:</span>
|
|
<span className="text-[#E6B17E]">{lineup.createTime}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
|
{/* 防守阵容 */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">防守阵容</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{lineup.defenseHeroes.map((hero: string, index: number) => (
|
|
<span
|
|
key={index}
|
|
className="px-3 py-1 bg-[#1A1412] text-[#C17F59] text-sm rounded-full border border-[#C17F59]/30"
|
|
>
|
|
{hero}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 进攻阵容 */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">进攻阵容</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{lineup.attackHeroes.map((hero: string, index: number) => (
|
|
<span
|
|
key={index}
|
|
className="px-3 py-1 bg-[#1A1412] text-[#C17F59] text-sm rounded-full border border-[#C17F59]/30"
|
|
>
|
|
{hero}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
|
{/* 装备信息 */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">装备信息</h4>
|
|
<p className="text-[#9B8579]">{lineup.equipmentInfo}</p>
|
|
</div>
|
|
|
|
{/* 神器信息 */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">神器信息</h4>
|
|
<p className="text-[#9B8579]">{lineup.artifacts}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* 前置条件 */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">前置条件</h4>
|
|
<p className="text-[#9B8579]">{lineup.prerequisites}</p>
|
|
</div>
|
|
|
|
{/* 重要提示 */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">重要提示</h4>
|
|
<p className="text-[#9B8579]">{lineup.importantNotes}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 分页控件 */}
|
|
{!loading && total > 0 && (
|
|
<div className="flex justify-center items-center mt-8">
|
|
<div className="flex space-x-2">
|
|
<button
|
|
className={`px-3 py-1 rounded-md ${
|
|
pageNum === 1
|
|
? "bg-[#1A1412] text-[#9B8579] cursor-not-allowed"
|
|
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
|
|
}`}
|
|
onClick={() => pageNum > 1 && handlePageChange(pageNum - 1)}
|
|
disabled={pageNum === 1}
|
|
>
|
|
上一页
|
|
</button>
|
|
|
|
{Array.from({ length: Math.ceil(total / pageSize) }, (_, i) => i + 1)
|
|
.filter(page =>
|
|
page === 1 ||
|
|
page === Math.ceil(total / pageSize) ||
|
|
(page >= pageNum - 1 && page <= pageNum + 1)
|
|
)
|
|
.map((page, index, array) => {
|
|
// Add ellipsis if there's a gap
|
|
if (index > 0 && page - array[index - 1] > 1) {
|
|
return (
|
|
<React.Fragment key={`ellipsis-${page}`}>
|
|
<span className="px-2 py-1 text-[#9B8579]">...</span>
|
|
<button
|
|
className={`px-3 py-1 rounded-md ${
|
|
pageNum === page
|
|
? "bg-[#C17F59] text-[#1A1412]"
|
|
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
|
|
}`}
|
|
onClick={() => handlePageChange(page)}
|
|
>
|
|
{page}
|
|
</button>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
key={page}
|
|
className={`px-3 py-1 rounded-md ${
|
|
pageNum === page
|
|
? "bg-[#C17F59] text-[#1A1412]"
|
|
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
|
|
}`}
|
|
onClick={() => handlePageChange(page)}
|
|
>
|
|
{page}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
className={`px-3 py-1 rounded-md ${
|
|
pageNum === Math.ceil(total / pageSize)
|
|
? "bg-[#1A1412] text-[#9B8579] cursor-not-allowed"
|
|
: "bg-[#2A211E] text-[#E6B17E] hover:bg-[#C17F59] hover:text-[#1A1412]"
|
|
}`}
|
|
onClick={() => pageNum < Math.ceil(total / pageSize) && handlePageChange(pageNum + 1)}
|
|
disabled={pageNum === Math.ceil(total / pageSize)}
|
|
>
|
|
下一页
|
|
</button>
|
|
</div>
|
|
|
|
<div className="ml-4 flex items-center">
|
|
<span className="text-[#9B8579] mr-2">每页显示:</span>
|
|
<select
|
|
className="bg-[#1A1412] border border-[#C17F59]/30 text-[#E6B17E] px-2 py-1 rounded-md"
|
|
value={pageSize}
|
|
onChange={(e) => handlePageSizeChange(Number(e.target.value))}
|
|
>
|
|
<option value={5}>5</option>
|
|
<option value={10}>10</option>
|
|
<option value={20}>20</option>
|
|
<option value={50}>50</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Lineup;
|