diff --git a/src/components/GroupSwitch.tsx b/src/components/GroupSwitch.tsx index 381ddf0..cd8117c 100644 --- a/src/components/GroupSwitch.tsx +++ b/src/components/GroupSwitch.tsx @@ -17,6 +17,9 @@ export default function GroupSwitch({ const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined const [isDarkMode, setIsDarkMode] = useState(false) + // 使用一个唯一的ID来确保各个组件的layoutId不会冲突 + const layoutIdPrefix = isCountrySwitch ? "country-switch-" : "tab-switch-" + const scrollRef = useRef(null) const tagRefs = useRef(tabs.map(() => createRef())) @@ -67,9 +70,17 @@ export default function GroupSwitch({ } }, [tabs, setCurrentTab, isCountrySwitch]) + // 当tabs变化时更新tagRefs useEffect(() => { - const currentTagRef = tagRefs.current[tabs.indexOf(currentTab)] + tagRefs.current = tabs.map(() => createRef()) + }, [tabs]) + // 处理选中标签的滚动逻辑 + useEffect(() => { + const currentTagIndex = tabs.indexOf(currentTab) + if (currentTagIndex === -1) return // 如果当前选中的标签不在tabs中,不执行滚动 + + const currentTagRef = tagRefs.current[currentTagIndex] if (currentTagRef && currentTagRef.current) { currentTagRef.current.scrollIntoView({ behavior: "smooth", @@ -79,8 +90,24 @@ export default function GroupSwitch({ } }, [currentTab, tabs]) + // 记录当前组件类型和选中的标签 + console.log(isCountrySwitch ? '国家筛选组件:' : '分组筛选组件:', { + tabs, + currentTab, + layoutIdPrefix + }) + + const handleTabClick = (tab: string) => { + console.log(isCountrySwitch ? '点击国家标签:' : '点击分组标签:', tab) + if (tab === currentTab) return; // 如果点击的是当前选中的标签,不执行操作 + setCurrentTab(tab) + } + return ( -
+
{tabs.map((tab: string, index: number) => (
setCurrentTab(tab)} + onClick={() => handleTabClick(tab)} className={cn( "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500", currentTab === tab ? "text-black dark:text-white" : "text-stone-400 dark:text-stone-500", @@ -98,7 +125,7 @@ export default function GroupSwitch({ > {currentTab === tab && ( { + console.log('切换组:', newGroup) setCurrentGroup(newGroup) setCurrentCountry("All") // 切换组时重置国家筛选 sessionStorage.setItem("selectedGroup", newGroup) @@ -54,6 +55,7 @@ export default function Servers() { } const handleCountryChange = (newCountry: string) => { + console.log('切换国家:', newCountry, '当前组:', currentGroup) setCurrentCountry(newCountry) sessionStorage.setItem("selectedCountry", newCountry) sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0)) @@ -83,21 +85,36 @@ export default function Servers() { useEffect(() => { const savedGroup = sessionStorage.getItem("selectedGroup") || "All" const savedCountry = sessionStorage.getItem("selectedCountry") || "All" + + console.log('初始化分组和国家筛选:', { savedGroup, savedCountry }) + + // 确保在组件挂载时应用保存的值 setCurrentGroup(savedGroup) setCurrentCountry(savedCountry) restoreScrollPosition() + + // 如果没有保存值,初始化存储 + if (!sessionStorage.getItem("selectedGroup")) { + sessionStorage.setItem("selectedGroup", "All") + } + + if (!sessionStorage.getItem("selectedCountry")) { + sessionStorage.setItem("selectedCountry", "All") + } }, []) const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null // 获取所有可用的国家代码 const availableCountries = nezhaWsData?.servers - ? [...new Set(nezhaWsData.servers.map(server => server.country_code))] + ? [...new Set(nezhaWsData.servers.map(server => server.country_code?.toLowerCase()))] .filter(Boolean) .sort() : [] + console.log('可用国家代码:', availableCountries) + const groupTabs = [ "All", ...(groupData?.data @@ -112,6 +129,13 @@ export default function Servers() { ...availableCountries.map(code => code.toUpperCase()) ] + console.log('标签信息:', { + 组标签: groupTabs, + 国家标签: countryTabs, + 当前组: currentGroup, + 当前国家: currentCountry + }) + // 获取cycle_transfer_stats数据 const { data: serviceData } = useQuery({ queryKey: ["service"], @@ -150,17 +174,30 @@ export default function Servers() { const group = groupData?.data?.find( (g: ServerGroup) => g.group.name === currentGroup && Array.isArray(g.servers) && g.servers.includes(server.id), ) - if (!group) return false + if (!group) { + return false + } } // 国家筛选 - if (currentCountry !== "All" && server.country_code?.toUpperCase() !== currentCountry) { - return false + if (currentCountry !== "All") { + const serverCountry = server.country_code?.toUpperCase() + if (serverCountry !== currentCountry) { + return false + } } return true }) || [] + // 记录筛选后的服务器数量 + console.log('筛选结果:', { + 组筛选: currentGroup, + 国家筛选: currentCountry, + 筛选前总数: nezhaWsData?.servers?.length || 0, + 筛选后总数: filteredServers.length, + }) + const totalServers = filteredServers.length || 0 const onlineServers = filteredServers.filter((server) => formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0 const offlineServers = filteredServers.filter((server) => !formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0