style(Lineup): 优化代码格式和布局
- 调整了代码的缩进和空格，提高了可读性 -修复了一些小的语法问题，如缺少逗号等 - 优化了部分长行的换行方式，提高了代码的整洁度
This commit is contained in:
hxt
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, {useState, useEffect} from "react";
|
||||
import * as EpicApi from '@/api/index';
|
||||
|
||||
const Lineup: React.FC = () => {
|
||||
@@ -32,21 +32,21 @@ const Lineup: React.FC = () => {
|
||||
const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];
|
||||
|
||||
const filteredLineups = lineups.filter(lineup => {
|
||||
const matchesSearch =
|
||||
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 === "All" ||
|
||||
const matchesDifficulty = selectedDifficulty === "All" ||
|
||||
(selectedDifficulty === "简单" && lineup.id % 3 === 1) ||
|
||||
(selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
|
||||
(selectedDifficulty === "困难" && lineup.id % 3 === 0);
|
||||
|
||||
|
||||
// 根据标签进行筛选
|
||||
const matchesTags = selectedTags.length === 0 ||
|
||||
const matchesTags = selectedTags.length === 0 ||
|
||||
selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
|
||||
|
||||
|
||||
return matchesSearch && matchesDifficulty && matchesTags;
|
||||
});
|
||||
|
||||
@@ -57,13 +57,15 @@ 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="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"
|
||||
@@ -132,7 +134,8 @@ const Lineup: React.FC = () => {
|
||||
{/* 加载状态 */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
@@ -158,32 +161,36 @@ 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">
|
||||
<img
|
||||
src={hero.headImgUrl}
|
||||
<div key={index}
|
||||
className="flex flex-col items-center group relative">
|
||||
<img
|
||||
src={hero.headImgUrl}
|
||||
alt={hero.heroCode}
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 进攻阵容 */}
|
||||
<div>
|
||||
<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">
|
||||
<img
|
||||
src={hero.headImgUrl}
|
||||
<div key={index}
|
||||
className="flex flex-col items-center group relative">
|
||||
<img
|
||||
src={hero.headImgUrl}
|
||||
alt={hero.heroCode}
|
||||
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>
|
||||
@@ -191,28 +198,28 @@ const Lineup: React.FC = () => {
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user