From 878c05848dbfa91cf40f43b2369bce9c91468a89 Mon Sep 17 00:00:00 2001 From: hxt Date: Thu, 17 Apr 2025 21:05:14 +0800 Subject: [PATCH] init --- src/pages/Characters.tsx | 353 +++++++++++++++++++++++++++++++++------ 1 file changed, 298 insertions(+), 55 deletions(-) diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx index bf3212c..96112e5 100644 --- a/src/pages/Characters.tsx +++ b/src/pages/Characters.tsx @@ -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("All Stars"); @@ -8,6 +8,37 @@ const Characters: React.FC = () => { const [selectedClass, setSelectedClass] = useState("All"); const [selectedZodiac, setSelectedZodiac] = useState("All"); const [searchTerm, setSearchTerm] = useState(""); + const [selectedBuffs, setSelectedBuffs] = useState([]); + const [selectedDebuffs, setSelectedDebuffs] = useState([]); + const [isBuffsOpen, setIsBuffsOpen] = useState(false); + const [isDebuffsOpen, setIsDebuffsOpen] = useState(false); + + // 添加ref用于下拉框 + const buffsDropdownRef = useRef(null); + const debuffsDropdownRef = useRef(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 = () => { -
+ {/* 固定在顶部的搜索组件 */} +
setSearchTerm(e.target.value)} + onChange={(e) => { + setSearchTerm(e.target.value); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }} />
-
+
{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => ( @@ -542,26 +654,32 @@ const Characters: React.FC = () => {
-
+
-
+
@@ -645,12 +778,15 @@ const Characters: React.FC = () => { ].map((classType) => ( @@ -658,15 +794,18 @@ const Characters: React.FC = () => {
-
+
@@ -674,12 +813,15 @@ const Characters: React.FC = () => { {[...Array(12)].map((_, index) => ( @@ -688,11 +830,112 @@ const Characters: React.FC = () => {
-
-

Select Buffs

+ {/* 增益多选下拉框 */} +
+
setIsBuffsOpen(!isBuffsOpen)} + > +
+

选择增益效果

+ {selectedBuffs.length > 0 && ( +
+ {selectedBuffs.map(buffId => { + const buff = buffsData.find(b => b.id === buffId); + return buff ? ( + + {buff.name} + + + ) : null; + })} +
+ )} +
+ +
+ + {isBuffsOpen && ( +
+ {buffsData.map(buff => ( +
handleBuffToggle(buff.id)} + > +
+ {selectedBuffs.includes(buff.id) && } +
+ {buff.name} +
+ ))} +
+ )}
-
-

Select Debuffs

+ + {/* 减益多选下拉框 */} +
+
setIsDebuffsOpen(!isDebuffsOpen)} + > +
+

选择减益效果

+ {selectedDebuffs.length > 0 && ( +
+ {selectedDebuffs.map(debuffId => { + const debuff = debuffsData.find(d => d.id === debuffId); + return debuff ? ( + + {debuff.name} + + + ) : null; + })} +
+ )} +
+ +
+ + {isDebuffsOpen && ( +
+ {debuffsData.map(debuff => ( +
handleDebuffToggle(debuff.id)} + > +
+ {selectedDebuffs.includes(debuff.id) && } +
+ {debuff.name} +
+ ))} +
+ )}