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';
|
import * as EpicApi from '@/api/index';
|
||||||
|
|
||||||
const Lineup: React.FC = () => {
|
const Lineup: React.FC = () => {
|
||||||
@@ -32,21 +32,21 @@ const Lineup: React.FC = () => {
|
|||||||
const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];
|
const availableTags = ["PVP", "PVE", "爆发", "控制", "持续", "防守", "快速"];
|
||||||
|
|
||||||
const filteredLineups = lineups.filter(lineup => {
|
const filteredLineups = lineups.filter(lineup => {
|
||||||
const matchesSearch =
|
const matchesSearch =
|
||||||
lineup.battleStrategy.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
lineup.battleStrategy.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
lineup.defenseHeroes.some(hero => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
lineup.defenseHeroes.some(hero => hero.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||||||
lineup.attackHeroes.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 === 1) ||
|
||||||
(selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
|
(selectedDifficulty === "中等" && lineup.id % 3 === 2) ||
|
||||||
(selectedDifficulty === "困难" && lineup.id % 3 === 0);
|
(selectedDifficulty === "困难" && lineup.id % 3 === 0);
|
||||||
|
|
||||||
// 根据标签进行筛选
|
// 根据标签进行筛选
|
||||||
const matchesTags = selectedTags.length === 0 ||
|
const matchesTags = selectedTags.length === 0 ||
|
||||||
selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
|
selectedTags.some(tag => lineup.battleStrategy.toLowerCase().includes(tag.toLowerCase()));
|
||||||
|
|
||||||
return matchesSearch && matchesDifficulty && matchesTags;
|
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">
|
<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">
|
<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>
|
</span>
|
||||||
</h1>
|
</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">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -132,7 +134,8 @@ const Lineup: React.FC = () => {
|
|||||||
{/* 加载状态 */}
|
{/* 加载状态 */}
|
||||||
{loading && (
|
{loading && (
|
||||||
<div className="flex justify-center items-center py-12">
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -158,32 +161,36 @@ const Lineup: React.FC = () => {
|
|||||||
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">防守阵容</h4>
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">防守阵容</h4>
|
||||||
<div className="flex flex-wrap gap-4">
|
<div className="flex flex-wrap gap-4">
|
||||||
{lineup.defenseHeroInfos.map((hero, index) => (
|
{lineup.defenseHeroInfos.map((hero, index) => (
|
||||||
<div key={index} className="flex flex-col items-center group relative">
|
<div key={index}
|
||||||
<img
|
className="flex flex-col items-center group relative">
|
||||||
src={hero.headImgUrl}
|
<img
|
||||||
|
src={hero.headImgUrl}
|
||||||
alt={hero.heroCode}
|
alt={hero.heroCode}
|
||||||
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
|
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}
|
{hero.heroName}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 进攻阵容 */}
|
{/* 进攻阵容 */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">进攻阵容</h4>
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4">进攻阵容</h4>
|
||||||
<div className="flex flex-wrap gap-4">
|
<div className="flex flex-wrap gap-4">
|
||||||
{lineup.attackHeroInfos.map((hero, index) => (
|
{lineup.attackHeroInfos.map((hero, index) => (
|
||||||
<div key={index} className="flex flex-col items-center group relative">
|
<div key={index}
|
||||||
<img
|
className="flex flex-col items-center group relative">
|
||||||
src={hero.headImgUrl}
|
<img
|
||||||
|
src={hero.headImgUrl}
|
||||||
alt={hero.heroCode}
|
alt={hero.heroCode}
|
||||||
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
|
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}
|
{hero.heroName}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -191,28 +198,28 @@ const Lineup: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
||||||
{/* 装备信息 */}
|
{/* 装备信息 */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">装备信息</h4>
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">装备信息</h4>
|
||||||
<p className="text-[#9B8579]">{lineup.equipmentInfo}</p>
|
<p className="text-[#9B8579]">{lineup.equipmentInfo}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 神器信息 */}
|
{/* 神器信息 */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">神器信息</h4>
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">神器信息</h4>
|
||||||
<p className="text-[#9B8579]">{lineup.artifacts}</p>
|
<p className="text-[#9B8579]">{lineup.artifacts}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
{/* 前置条件 */}
|
{/* 前置条件 */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">前置条件</h4>
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">前置条件</h4>
|
||||||
<p className="text-[#9B8579]">{lineup.prerequisites}</p>
|
<p className="text-[#9B8579]">{lineup.prerequisites}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 重要提示 */}
|
{/* 重要提示 */}
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">重要提示</h4>
|
<h4 className="text-lg font-semibold text-[#E6B17E] mb-2">重要提示</h4>
|
||||||
|
|||||||
Reference in New Issue
Block a user