init
This commit is contained in:
hxt
@@ -1,6 +1,6 @@
|
||||
// The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
|
||||
const Characters: React.FC = () => {
|
||||
const [selectedStars, setSelectedStars] = useState<string>("All Stars");
|
||||
@@ -8,6 +8,37 @@ const Characters: React.FC = () => {
|
||||
const [selectedClass, setSelectedClass] = useState<string>("All");
|
||||
const [selectedZodiac, setSelectedZodiac] = useState<string>("All");
|
||||
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||
const [selectedBuffs, setSelectedBuffs] = useState<string[]>([]);
|
||||
const [selectedDebuffs, setSelectedDebuffs] = useState<string[]>([]);
|
||||
const [isBuffsOpen, setIsBuffsOpen] = useState<boolean>(false);
|
||||
const [isDebuffsOpen, setIsDebuffsOpen] = useState<boolean>(false);
|
||||
|
||||
// 添加ref用于下拉框
|
||||
const buffsDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const debuffsDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 添加全局点击事件监听器
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
// 检查点击是否在增益下拉框外部
|
||||
if (buffsDropdownRef.current && !buffsDropdownRef.current.contains(event.target as Node)) {
|
||||
setIsBuffsOpen(false);
|
||||
}
|
||||
|
||||
// 检查点击是否在减益下拉框外部
|
||||
if (debuffsDropdownRef.current && !debuffsDropdownRef.current.contains(event.target as Node)) {
|
||||
setIsDebuffsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加事件监听器
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const heroes = [
|
||||
{
|
||||
@@ -391,6 +422,77 @@ const Characters: React.FC = () => {
|
||||
},
|
||||
];
|
||||
|
||||
// 测试数据
|
||||
const buffsData = [
|
||||
{ id: "attack_up", name: "攻击力提升" },
|
||||
{ id: "defense_up", name: "防御力提升" },
|
||||
{ id: "speed_up", name: "速度提升" },
|
||||
{ id: "critical_rate_up", name: "暴击率提升" },
|
||||
{ id: "critical_damage_up", name: "暴击伤害提升" },
|
||||
{ id: "effectiveness_up", name: "效果命中提升" },
|
||||
{ id: "effect_resistance_up", name: "效果抗性提升" },
|
||||
{ id: "barrier", name: "护盾" },
|
||||
{ id: "invincible", name: "无敌" },
|
||||
{ id: "immunity", name: "免疫" },
|
||||
{ id: "continuous_heal", name: "持续回复" },
|
||||
{ id: "counter_attack", name: "反击" },
|
||||
];
|
||||
|
||||
const debuffsData = [
|
||||
{ id: "attack_down", name: "攻击力降低" },
|
||||
{ id: "defense_down", name: "防御力降低" },
|
||||
{ id: "speed_down", name: "速度降低" },
|
||||
{ id: "critical_rate_down", name: "暴击率降低" },
|
||||
{ id: "critical_damage_down", name: "暴击伤害降低" },
|
||||
{ id: "effectiveness_down", name: "效果命中降低" },
|
||||
{ id: "effect_resistance_down", name: "效果抗性降低" },
|
||||
{ id: "bleed", name: "出血" },
|
||||
{ id: "burn", name: "燃烧" },
|
||||
{ id: "poison", name: "中毒" },
|
||||
{ id: "stun", name: "眩晕" },
|
||||
{ id: "silence", name: "沉默" },
|
||||
{ id: "sleep", name: "睡眠" },
|
||||
{ id: "provoke", name: "挑衅" },
|
||||
{ id: "unhealable", name: "无法回复" },
|
||||
{ id: "unbuffable", name: "无法获得增益" },
|
||||
];
|
||||
|
||||
// 处理增益选择
|
||||
const handleBuffToggle = (buffId: string) => {
|
||||
setSelectedBuffs(prev =>
|
||||
prev.includes(buffId)
|
||||
? prev.filter(id => id !== buffId)
|
||||
: [...prev, buffId]
|
||||
);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// 处理减益选择
|
||||
const handleDebuffToggle = (debuffId: string) => {
|
||||
setSelectedDebuffs(prev =>
|
||||
prev.includes(debuffId)
|
||||
? prev.filter(id => id !== debuffId)
|
||||
: [...prev, debuffId]
|
||||
);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// 获取选中的增益名称
|
||||
const getSelectedBuffsNames = () => {
|
||||
return selectedBuffs
|
||||
.map(id => buffsData.find(buff => buff.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
};
|
||||
|
||||
// 获取选中的减益名称
|
||||
const getSelectedDebuffsNames = () => {
|
||||
return selectedDebuffs
|
||||
.map(id => debuffsData.find(debuff => debuff.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
};
|
||||
|
||||
const renderStars = (count: number) => {
|
||||
return Array(count)
|
||||
.fill(0)
|
||||
@@ -498,6 +600,9 @@ const Characters: React.FC = () => {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 这里可以添加对增益和减益的筛选逻辑
|
||||
// 目前仅作为示例，实际应用中需要根据英雄数据添加相应的筛选逻辑
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
@@ -513,28 +618,35 @@ const Characters: React.FC = () => {
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30">
|
||||
{/* 固定在顶部的搜索组件 */}
|
||||
<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-[320px]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Hero Name"
|
||||
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)}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 h-10">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
|
||||
<button
|
||||
key={stars}
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedStars === stars
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedStars(stars)}
|
||||
onClick={() => {
|
||||
setSelectedStars(stars);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
{stars}
|
||||
</button>
|
||||
@@ -542,26 +654,32 @@ const Characters: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 h-10">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedElement === "All"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("All")}
|
||||
onClick={() => {
|
||||
setSelectedElement("All");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedElement === "fire"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("fire")}
|
||||
onClick={() => {
|
||||
setSelectedElement("fire");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
|
||||
<i className="fas fa-fire text-white text-xs"></i>
|
||||
@@ -569,12 +687,15 @@ const Characters: React.FC = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedElement === "water"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("water")}
|
||||
onClick={() => {
|
||||
setSelectedElement("water");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
|
||||
<i className="fas fa-tint text-white text-xs"></i>
|
||||
@@ -582,12 +703,15 @@ const Characters: React.FC = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedElement === "earth"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("earth")}
|
||||
onClick={() => {
|
||||
setSelectedElement("earth");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
|
||||
<i className="fas fa-leaf text-white text-xs"></i>
|
||||
@@ -595,12 +719,15 @@ const Characters: React.FC = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedElement === "light"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("light")}
|
||||
onClick={() => {
|
||||
setSelectedElement("light");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
|
||||
<i className="fas fa-sun text-white text-xs"></i>
|
||||
@@ -608,12 +735,15 @@ const Characters: React.FC = () => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedElement === "dark"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("dark")}
|
||||
onClick={() => {
|
||||
setSelectedElement("dark");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center">
|
||||
<i className="fas fa-moon text-white text-xs"></i>
|
||||
@@ -622,15 +752,18 @@ const Characters: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 h-10">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedClass === "All"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedClass("All")}
|
||||
onClick={() => {
|
||||
setSelectedClass("All");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
@@ -645,12 +778,15 @@ const Characters: React.FC = () => {
|
||||
].map((classType) => (
|
||||
<button
|
||||
key={classType}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedClass === classType
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedClass(classType)}
|
||||
onClick={() => {
|
||||
setSelectedClass(classType);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
{getClassIcon(classType)}
|
||||
</button>
|
||||
@@ -658,15 +794,18 @@ const Characters: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 h-10">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedZodiac === "All"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac("All")}
|
||||
onClick={() => {
|
||||
setSelectedZodiac("All");
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
@@ -674,12 +813,15 @@ const Characters: React.FC = () => {
|
||||
{[...Array(12)].map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedZodiac === `zodiac-${index}`
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac(`zodiac-${index}`)}
|
||||
onClick={() => {
|
||||
setSelectedZodiac(`zodiac-${index}`);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
{getZodiacIcon(index)}
|
||||
</button>
|
||||
@@ -688,11 +830,112 @@ const Characters: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
|
||||
<p className="text-[#9B8579]">Select Buffs</p>
|
||||
{/* 增益多选下拉框 */}
|
||||
<div className="relative" ref={buffsDropdownRef}>
|
||||
<div
|
||||
className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30 cursor-pointer flex justify-between items-center min-h-[40px]"
|
||||
onClick={() => setIsBuffsOpen(!isBuffsOpen)}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1 items-center">
|
||||
<p className="text-[#9B8579]">选择增益效果</p>
|
||||
{selectedBuffs.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 ml-2">
|
||||
{selectedBuffs.map(buffId => {
|
||||
const buff = buffsData.find(b => b.id === buffId);
|
||||
return buff ? (
|
||||
<span
|
||||
key={buff.id}
|
||||
className="bg-[#C17F59]/20 text-[#E6B17E] text-xs px-2 py-0.5 rounded-full border border-[#C17F59]/30 flex items-center"
|
||||
>
|
||||
{buff.name}
|
||||
<button
|
||||
className="ml-1 text-[#C17F59] hover:text-[#E6B17E]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleBuffToggle(buff.id);
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
|
||||
<p className="text-[#9B8579]">Select Debuffs</p>
|
||||
)}
|
||||
</div>
|
||||
<i className={`fas fa-chevron-${isBuffsOpen ? 'up' : 'down'} text-[#C17F59]`}></i>
|
||||
</div>
|
||||
|
||||
{isBuffsOpen && (
|
||||
<div className="absolute z-50 w-full mt-1 bg-[#2A211E] border border-[#C17F59]/30 rounded-md max-h-60 overflow-y-auto">
|
||||
{buffsData.map(buff => (
|
||||
<div
|
||||
key={buff.id}
|
||||
className="px-4 py-2 hover:bg-[#1A1412] cursor-pointer flex items-center"
|
||||
onClick={() => handleBuffToggle(buff.id)}
|
||||
>
|
||||
<div className={`w-5 h-5 rounded border ${selectedBuffs.includes(buff.id) ? 'bg-[#C17F59] border-[#C17F59]' : 'border-[#C17F59]/30'} flex items-center justify-center mr-2`}>
|
||||
{selectedBuffs.includes(buff.id) && <i className="fas fa-check text-[#1A1412] text-xs"></i>}
|
||||
</div>
|
||||
<span className="text-[#E6B17E]">{buff.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 减益多选下拉框 */}
|
||||
<div className="relative" ref={debuffsDropdownRef}>
|
||||
<div
|
||||
className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30 cursor-pointer flex justify-between items-center min-h-[40px]"
|
||||
onClick={() => setIsDebuffsOpen(!isDebuffsOpen)}
|
||||
>
|
||||
<div className="flex flex-wrap gap-1 items-center">
|
||||
<p className="text-[#9B8579]">选择减益效果</p>
|
||||
{selectedDebuffs.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 ml-2">
|
||||
{selectedDebuffs.map(debuffId => {
|
||||
const debuff = debuffsData.find(d => d.id === debuffId);
|
||||
return debuff ? (
|
||||
<span
|
||||
key={debuff.id}
|
||||
className="bg-[#C17F59]/20 text-[#E6B17E] text-xs px-2 py-0.5 rounded-full border border-[#C17F59]/30 flex items-center"
|
||||
>
|
||||
{debuff.name}
|
||||
<button
|
||||
className="ml-1 text-[#C17F59] hover:text-[#E6B17E]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDebuffToggle(debuff.id);
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<i className={`fas fa-chevron-${isDebuffsOpen ? 'up' : 'down'} text-[#C17F59]`}></i>
|
||||
</div>
|
||||
|
||||
{isDebuffsOpen && (
|
||||
<div className="absolute z-50 w-full mt-1 bg-[#2A211E] border border-[#C17F59]/30 rounded-md max-h-60 overflow-y-auto">
|
||||
{debuffsData.map(debuff => (
|
||||
<div
|
||||
key={debuff.id}
|
||||
className="px-4 py-2 hover:bg-[#1A1412] cursor-pointer flex items-center"
|
||||
onClick={() => handleDebuffToggle(debuff.id)}
|
||||
>
|
||||
<div className={`w-5 h-5 rounded border ${selectedDebuffs.includes(debuff.id) ? 'bg-[#C17F59] border-[#C17F59]' : 'border-[#C17F59]/30'} flex items-center justify-center mr-2`}>
|
||||
{selectedDebuffs.includes(debuff.id) && <i className="fas fa-check text-[#1A1412] text-xs"></i>}
|
||||
</div>
|
||||
<span className="text-[#E6B17E]">{debuff.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user