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-26 17:48:22 +08:00
parent 629cbd79fc
commit 87a8462d63
3 changed files with 235 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/components/Footer.tsx
View File

@@ -4,154 +4,154 @@ const Footer: React.FC = () => {
return (
<footer className="bg-[#1A1412] pt-12 pb-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="text-xl font-bold text-[#E6B17E] mb-4">战神纪元</h3>
<p className="text-[#9B8579] mb-4">
最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
</p>
<div className="flex space-x-4">
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
<i className="fab fa-weixin text-xl"></i>
</a>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
<i className="fab fa-qq text-xl"></i>
</a>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
<i className="fab fa-weibo text-xl"></i>
</a>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
<i className="fab fa-bilibili text-xl"></i>
</a>
</div>
</div>
<div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
快速链接
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
游戏下载
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
新手教程
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
更新日志
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
活动中心
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
商城
</a>
</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">支持</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
常见问题
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
联系我们
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
用户协议
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
隐私政策
</a>
</li>
<li>
<a
href="#"
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
>
关于我们
</a>
</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
联系我们
</h3>
<ul className="space-y-2">
<li className="text-[#9B8579] flex items-center">
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i>
support@epicgame.com
</li>
<li className="text-[#9B8579] flex items-center">
<i className="fas fa-phone mr-2 text-[#C17F59]"></i>
400-123-4567
</li>
<li className="text-[#9B8579] flex items-center">
<i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></i>
上海市浦东新区张江高科技园区
</li>
</ul>
</div>
</div>
{/*<div className="grid grid-cols-1 md:grid-cols-4 gap-8">*/}
{/* <div>*/}
{/* <h3 className="text-xl font-bold text-[#E6B17E] mb-4">战神纪元</h3>*/}
{/* <p className="text-[#9B8579] mb-4">*/}
{/* 最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。*/}
{/* </p>*/}
{/* <div className="flex space-x-4">*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* <i className="fab fa-weixin text-xl"></i>*/}
{/* </a>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* <i className="fab fa-qq text-xl"></i>*/}
{/* </a>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* <i className="fab fa-weibo text-xl"></i>*/}
{/* </a>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* <i className="fab fa-bilibili text-xl"></i>*/}
{/* </a>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div>*/}
{/* <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">*/}
{/* 快速链接*/}
{/* </h3>*/}
{/* <ul className="space-y-2">*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 游戏下载*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 新手教程*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 更新日志*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 活动中心*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 商城*/}
{/* </a>*/}
{/* </li>*/}
{/* </ul>*/}
{/* </div>*/}
{/* <div>*/}
{/* <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">支持</h3>*/}
{/* <ul className="space-y-2">*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 常见问题*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 联系我们*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 用户协议*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 隐私政策*/}
{/* </a>*/}
{/* </li>*/}
{/* <li>*/}
{/* <a*/}
{/* href="#"*/}
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
{/* >*/}
{/* 关于我们*/}
{/* </a>*/}
{/* </li>*/}
{/* </ul>*/}
{/* </div>*/}
{/* <div>*/}
{/* <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">*/}
{/* 联系我们*/}
{/* </h3>*/}
{/* <ul className="space-y-2">*/}
{/* <li className="text-[#9B8579] flex items-center">*/}
{/* <i className="fas fa-envelope mr-2 text-[#C17F59]"></i>*/}
{/* support@epicgame.com*/}
{/* </li>*/}
{/* <li className="text-[#9B8579] flex items-center">*/}
{/* <i className="fas fa-phone mr-2 text-[#C17F59]"></i>*/}
{/* 400-123-4567*/}
{/* </li>*/}
{/* <li className="text-[#9B8579] flex items-center">*/}
{/* <i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></i>*/}
{/* 上海市浦东新区张江高科技园区*/}
{/* </li>*/}
{/* </ul>*/}
{/* </div>*/}
{/*</div>*/}
<div className="mt-8 pt-8 border-t border-[#C17F59]/30 text-center">
<p className="text-[#9B8579] text-sm">
© 2024 战神纪元. All rights reserved.
© 2025 露娜助手. All rights reserved.
</p>
</div>
</div>

24
src/components/Navbar.tsx
View File

@@ -12,12 +12,12 @@ interface NavItem {
const navItems: NavItem[] = [
{ path: "/", label: "对战阵容" },
{ path: "/home", label: "主页" },
{ path: "/characters", label: "角色列表" },
{ path: "/builds", label: "配装攻略" },
{ path: "/battles", label: "对战信息" },
{ path: "/news", label: "资讯中心" },
{ path: "/community", 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 }) => {
@@ -53,12 +53,12 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
</div>
</div>
<div className="hidden md:block">
<button
onClick={onLoginClick}
className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"
>
登录
</button>
{/*<button*/}
{/* onClick={onLoginClick}*/}
{/* className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"*/}
{/*>*/}
{/* 登录*/}
{/*</button>*/}
</div>
<div className="-mr-2 flex md:hidden">
<button

131
src/pages/Lineup.tsx
View File

@@ -3,9 +3,8 @@ import * as EpicApi from '@/api/index';
import { Character } from '@/api/types';
const Lineup: React.FC = () => {
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("简单");
const [lineups, setLineups] = useState<EpicApi.GvgTeam[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const [heroes, setHeroes] = useState<EpicApi.Hero[]>([]);
const [selectedHeroes, setSelectedHeroes] = useState<EpicApi.Hero[]>([]);
@@ -26,27 +25,10 @@ const Lineup: React.FC = () => {
fetchHeroes();
}, []);
// Fetch lineups data
// Initial data fetch
useEffect(() => {
const fetchLineups = async () => {
setLoading(true);
try {
const heroCodes = selectedHeroes.map(hero => hero.heroCode);
const data = await EpicApi.getGvgTeamList(heroCodes);
setLineups(data);
setError(null);
} catch (err) {
console.error('Failed to fetch lineups:', err);
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
} finally {
setLoading(false);
}
};
fetchLineups();
}, [selectedHeroes]);
const difficulties = ["简单", "中等", "困难"];
handleSearch();
}, []);
const handleHeroSelect = (hero: EpicApi.Hero) => {
if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
@@ -60,20 +42,51 @@ const Lineup: React.FC = () => {
setSelectedHeroes(selectedHeroes.filter(h => h.id !== heroId));
};
const handleSearch = async () => {
if (selectedHeroes.length === 0) {
// If no heroes selected, fetch all lineups
setLoading(true);
try {
const data = await EpicApi.getGvgTeamList([]);
setLineups(data);
setError(null);
} catch (err) {
console.error('Failed to fetch lineups:', err);
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
} finally {
setLoading(false);
}
return;
}
setLoading(true);
try {
const heroCodes = selectedHeroes.map(hero => hero.heroCode);
const data = await EpicApi.getGvgTeamList(heroCodes);
setLineups(data);
setError(null);
} catch (err) {
console.error('Failed to fetch lineups:', err);
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
} finally {
setLoading(false);
}
};
const handleReset = () => {
setSelectedHeroes([]);
setSearchInput("");
setLineups([]);
setError(null);
handleSearch(); // Fetch all lineups after reset
};
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 matchesDifficulty = selectedDifficulty === "简单" && lineup.id % 3 === 1 ||
selectedDifficulty === "中等" && lineup.id % 3 === 2 ||
selectedDifficulty === "困难" && lineup.id % 3 === 0;
return matchesDifficulty;
});
return (
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
{/* 背景装饰 */}
@@ -87,33 +100,28 @@ const Lineup: React.FC = () => {
</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="mb-4">
<div className="flex flex-wrap gap-1">
{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 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 min-h-[8rem]">
{/* 数据来源说明 */}
<div className="text-center mb-4 text-[#9B8579]">
<span>对战数据来源于</span>
<a
href="https://docs.qq.com/sheet/DVmVIdGZOSnVJTHBq?tab=BB08J2"
target="_blank"
rel="noopener noreferrer"
className="text-[#E6B17E] hover:text-[#C17F59] mx-1"
>
【鬼殺队GVG通解】
</a>
<span>感谢分享</span>
</div>
{/* 英雄多选下拉框 */}
<div className="relative">
<div className="relative flex gap-2">
<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"
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-[32rem] text-[#E6B17E] cursor-pointer flex items-center justify-between h-12"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-2 flex-1 items-center">
{selectedHeroes.length > 0 ? (
selectedHeroes.map((hero) => (
<div
@@ -136,13 +144,28 @@ const Lineup: React.FC = () => {
<span className="text-[#9B8579]">选择防守英雄（最多3个）</span>
)}
</div>
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}>
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''} ml-2`}>
▼
</span>
</div>
<button
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm text-[#E6B17E] hover:bg-[#2A211E] hover:border-[#C17F59] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
onClick={handleSearch}
disabled={selectedHeroes.length === 0}
>
搜索
</button>
<button
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm text-[#E6B17E] hover:bg-[#2A211E] hover:border-[#C17F59] transition-colors duration-200 whitespace-nowrap"
onClick={handleReset}
>
重置
</button>
{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="absolute top-full left-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50 w-[32rem]">
<div className="p-2 border-b border-[#C17F59]/30">
<input
type="text"
@@ -202,7 +225,7 @@ const Lineup: React.FC = () => {
{/* 阵容列表 */}
{!loading && (
<div className="space-y-4">
{filteredLineups.map((lineup) => (
{lineups.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 backdrop-blur-sm"