kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(Lineup): 优化代码格式和布局

Browse Source 
- 调整了代码的缩进和空格，提高了可读性
-修复了一些小的语法问题，如缺少逗号等
- 优化了部分长行的换行方式，提高了代码的整洁度
This commit is contained in:
hxt
2025-04-24 22:02:20 +08:00
parent 04f167d3d6
commit c13ff30924
4 changed files with 195 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -124,7 +124,8 @@ const App: React.FC = () => {
<Navbar onLoginClick={handleLoginClick} />
<main className="pt-16">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/" element={<Lineup />} />
<Route path="/home" element={<Home />} />
<Route path="/characters" element={<Characters />} />
<Route
path="/character/:id"
@@ -133,7 +134,6 @@ const App: React.FC = () => {
<Route path="/news" element={<News />} />
<Route path="/builds" element={<Builds />} />
<Route path="/battles" element={<Battles />} />
<Route path="/lineup" element={<Lineup />} />
<Route path="/community" element={<Community />} />
</Routes>
</main>

24
src/api/index.ts
View File

@@ -16,6 +16,7 @@ export interface GvgTeamQueryParams {
export interface HeroInfo {
heroCode: string;
headImgUrl: string;
heroName: string;
}
// 阵容数据接口
@@ -44,9 +45,22 @@ export interface Response<T> {
msg: string;
}
// 英雄列表接口
export interface Hero {
id: number;
heroCode: string;
heroName: string;
nickName: string;
headImgUrl: string;
}
// 查询 GVG 阵容列表
export const getGvgTeamList = async () => {
const response = await Api.get<GvgTeam[]>("/epic/hero/team-list");
export const getGvgTeamList = async (heroCodes?: string[]) => {
const params = new URLSearchParams();
if (heroCodes && heroCodes.length > 0) {
params.append('heroCodes', heroCodes.join(','));
}
const response = await Api.get<GvgTeam[]>(`/epic/hero/team-list?${params.toString()}`);
return response;
};
@@ -58,3 +72,9 @@ export const getGvgTeamDetail = async (id: number) => {
}
throw new Error(response.msg || "获取阵容详情失败");
};
// 查询所有英雄列表
export const getHeroList = async () => {
const response = await Api.get<Hero[]>("/epic/hero/list-all");
return response;
};

183
src/components/Navbar.tsx
View File

@@ -5,6 +5,21 @@ interface NavbarProps {
onLoginClick: () => void;
}
interface NavItem {
path: string;
label: string;
}
const navItems: NavItem[] = [
{ path: "/", label: "对战阵容" },
{ path: "/home", label: "主页" },
{ path: "/characters", label: "角色列表" },
{ path: "/builds", label: "配装攻略" },
{ path: "/battles", label: "对战信息" },
{ path: "/news", label: "资讯中心" },
{ path: "/community", label: "社区" }
];
const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const location = useLocation();
@@ -16,81 +31,24 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
<div className="flex items-center">
<div className="flex-shrink-0">
<Link to="/" className="text-2xl font-bold text-[#E6B17E] hover:text-[#F5C28A] transition-colors duration-200">
战神纪元
第七史诗
</Link>
</div>
<div className="hidden md:block ml-10">
<div className="flex items-baseline space-x-4">
<Link
to="/"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
主页
</Link>
<Link
to="/characters"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/characters"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
角色列表
</Link>
<Link
to="/builds"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/builds"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
配装攻略
</Link>
<Link
to="/battles"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/battles"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战信息
</Link>
<Link
to="/lineup"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/lineup"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战阵容
</Link>
<Link
to="/news"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/news"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
资讯中心
</Link>
<Link
to="/community"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/community"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
社区
</Link>
{navItems.map((item) => (
<Link
key={item.path}
to={item.path}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === item.path
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
{item.label}
</Link>
))}
</div>
</div>
</div>
@@ -117,76 +75,19 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
{isMenuOpen && (
<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30 shadow-lg">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link
to="/"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
主页
</Link>
<Link
to="/characters"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/characters"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
角色列表
</Link>
<Link
to="/builds"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/builds"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
配装攻略
</Link>
<Link
to="/battles"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/battles"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战信息
</Link>
<Link
to="/lineup"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/lineup"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战阵容
</Link>
<Link
to="/news"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/news"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
资讯中心
</Link>
<Link
to="/community"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/community"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
社区
</Link>
{navItems.map((item) => (
<Link
key={item.path}
to={item.path}
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === item.path
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
{item.label}
</Link>
))}
<button
onClick={onLoginClick}
className="block w-full text-left px-4 py-3 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200"

209
src/pages/Lineup.tsx
View File

@@ -1,20 +1,38 @@
import React, {useState, useEffect} from "react";
import * as EpicApi from '@/api/index';
import { Character } from '@/api/types';
const Lineup: React.FC = () => {
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("All");
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [searchTerm, setSearchTerm] = useState<string>("");
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("简单");
const [lineups, setLineups] = useState<EpicApi.GvgTeam[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const [heroes, setHeroes] = useState<EpicApi.Hero[]>([]);
const [selectedHeroes, setSelectedHeroes] = useState<EpicApi.Hero[]>([]);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [searchInput, setSearchInput] = useState("");
// Fetch data from API
// Fetch heroes data
useEffect(() => {
const fetchHeroes = async () => {
try {
const data = await EpicApi.getHeroList();
setHeroes(data);
} catch (err) {
console.error('Failed to fetch heroes:', err);
}
};
fetchHeroes();
}, []);
// Fetch lineups data
useEffect(() => {
const fetchLineups = async () => {
setLoading(true);
try {
const data = await EpicApi.getGvgTeamList();
const heroCodes = selectedHeroes.map(hero => hero.heroCode);
const data = await EpicApi.getGvgTeamList(heroCodes);
setLineups(data);
setError(null);
} catch (err) {
@@ -26,28 +44,34 @@ const Lineup: React.FC = () => {
};
fetchLineups();
}, []);
}, [selectedHeroes]);
const difficulties = ["简单", "中等", "困难"];
const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];
const handleHeroSelect = (hero: EpicApi.Hero) => {
if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
setSelectedHeroes([...selectedHeroes, hero]);
setSearchInput("");
setIsDropdownOpen(false);
}
};
const handleHeroRemove = (heroId: number) => {
setSelectedHeroes(selectedHeroes.filter(h => h.id !== heroId));
};
const filteredHeroes = heroes.filter(hero => {
const searchLower = searchInput.toLowerCase();
return hero.heroName.toLowerCase().includes(searchLower) ||
(hero.nickName && hero.nickName.toLowerCase().includes(searchLower));
});
const filteredLineups = lineups.filter(lineup => {
const matchesSearch =
lineup.battleStrategy.toLowerCase().includes(searchTerm.toLowerCase()) ||
lineup.defenseHeroes.some(hero => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
lineup.attackHeroes.some(hero => hero.toLowerCase().includes(searchTerm.toLowerCase()));
const matchesDifficulty = selectedDifficulty === "简单" && lineup.id % 3 === 1 ||
selectedDifficulty === "中等" && lineup.id % 3 === 2 ||
selectedDifficulty === "困难" && lineup.id % 3 === 0;
// 根据阵容的难度进行筛选
const matchesDifficulty = selectedDifficulty === "All" ||
(selectedDifficulty === "简单" && lineup.id % 3 === 1) ||
(selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
(selectedDifficulty === "困难" && lineup.id % 3 === 0);
// 根据标签进行筛选
const matchesTags = selectedTags.length === 0 ||
selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
return matchesSearch && matchesDifficulty && matchesTags;
return matchesDifficulty;
});
return (
@@ -57,38 +81,16 @@ const Lineup: React.FC = () => {
<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 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="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="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}
@@ -105,37 +107,88 @@ const Lineup: React.FC = () => {
</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 className="relative">
<div
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] cursor-pointer flex items-center justify-between"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
<div className="flex flex-wrap gap-2">
{selectedHeroes.length > 0 ? (
selectedHeroes.map((hero) => (
<div
key={hero.id}
className="flex items-center gap-2 px-2 py-1 bg-[#2A211E] rounded-md"
>
<span>{hero.heroName}</span>
<button
onClick={(e) => {
e.stopPropagation();
handleHeroRemove(hero.id);
}}
className="text-[#C17F59] hover:text-[#E6B17E]"
>
×
</button>
</div>
))
) : (
<span className="text-[#9B8579]">选择防守英雄（最多3个）</span>
)}
</div>
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}>
▼
</span>
</div>
{isDropdownOpen && (
<div className="absolute top-full left-0 right-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50">
<div className="p-2 border-b border-[#C17F59]/30">
<input
type="text"
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
placeholder="输入英雄名称或昵称搜索..."
className="w-full px-3 py-2 bg-[#1A1412] text-[#E6B17E] border border-[#C17F59]/30 rounded-md focus:outline-none focus:border-[#C17F59]"
onClick={(e) => e.stopPropagation()}
/>
</div>
{filteredHeroes.map((hero) => (
<div
key={hero.id}
className={`px-4 py-2 cursor-pointer ${
selectedHeroes.find(h => h.id === hero.id)
? "bg-[#2A211E] text-[#E6B17E]"
: "text-[#E6B17E] hover:bg-[#2A211E]"
} ${selectedHeroes.length >= 3 && !selectedHeroes.find(h => h.id === hero.id) ? "opacity-50 cursor-not-allowed" : ""}`}
onClick={() => {
if (selectedHeroes.length < 3 || selectedHeroes.find(h => h.id === hero.id)) {
handleHeroSelect(hero);
}
}}
>
<div className="flex items-center gap-2">
<img
src={hero.headImgUrl}
alt={hero.heroName}
className="w-6 h-6 rounded-full"
/>
<span>{hero.heroName}</span>
{hero.nickName && (
<span className="text-[#9B8579] text-sm">({hero.nickName})</span>
)}
</div>
</div>
))}
</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 className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#E6B17E]"></div>
</div>
)}
@@ -161,15 +214,13 @@ const Lineup: React.FC = () => {
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">防守阵容</h4>
<div className="flex flex-wrap gap-4">
{lineup.defenseHeroInfos.map((hero, index) => (
<div key={index}
className="flex flex-col items-center group relative">
<div key={index} className="flex flex-col items-center group relative">
<img
src={hero.headImgUrl}
alt={hero.heroCode}
alt={hero.heroName}
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
/>
<div
className="absolute bottom-full mb-2 px-2 py-1 bg-[#1A1412] text-[#E6B17E] text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap border border-[#C17F59]/30">
<div className="absolute bottom-full mb-2 px-2 py-1 bg-[#1A1412] text-[#E6B17E] text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap border border-[#C17F59]/30">
{hero.heroName}
</div>
</div>
@@ -182,15 +233,13 @@ const Lineup: React.FC = () => {
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">进攻阵容</h4>
<div className="flex flex-wrap gap-4">
{lineup.attackHeroInfos.map((hero, index) => (
<div key={index}
className="flex flex-col items-center group relative">
<div key={index} className="flex flex-col items-center group relative">
<img
src={hero.headImgUrl}
alt={hero.heroCode}
alt={hero.heroName}
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
/>
<div
className="absolute bottom-full mb-2 px-2 py-1 bg-[#1A1412] text-[#E6B17E] text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap border border-[#C17F59]/30">
<div className="absolute bottom-full mb-2 px-2 py-1 bg-[#1A1412] text-[#E6B17E] text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap border border-[#C17F59]/30">
{hero.heroName}
</div>
</div>