From b800ce816a62a5c12ecdf5c43ba93a2aa6797177 Mon Sep 17 00:00:00 2001 From: wood chen Date: Wed, 7 May 2025 15:35:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20GroupSwitch=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=E8=B0=83=E8=AF=95=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E4=BB=A5=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E6=95=B4?= =?UTF-8?q?=E6=B4=81=E6=80=A7=E3=80=82=E5=90=8C=E6=97=B6=E5=9C=A8=20Server?= =?UTF-8?q?=20=E9=A1=B5=E9=9D=A2=E4=B8=AD=E5=BC=95=E5=85=A5=20ref=20?= =?UTF-8?q?=E5=AD=98=E5=82=A8=E7=AD=9B=E9=80=89=E7=8A=B6=E6=80=81=EF=BC=8C?= =?UTF-8?q?=E7=A1=AE=E4=BF=9D=20WebSocket=20=E6=B6=88=E6=81=AF=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=97=B6=20UI=20=E7=8A=B6=E6=80=81=E4=B8=8E=E7=AD=9B?= =?UTF-8?q?=E9=80=89=E7=8A=B6=E6=80=81=E5=90=8C=E6=AD=A5=EF=BC=8C=E6=8F=90?= =?UTF-8?q?=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GroupSwitch.tsx | 8 ----- src/pages/Server.tsx | 53 +++++++++++++++++++--------------- 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/components/GroupSwitch.tsx b/src/components/GroupSwitch.tsx index cd8117c..b24ee8d 100644 --- a/src/components/GroupSwitch.tsx +++ b/src/components/GroupSwitch.tsx @@ -90,15 +90,7 @@ 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) } diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx index 8718c0e..761cfcc 100644 --- a/src/pages/Server.tsx +++ b/src/pages/Server.tsx @@ -33,8 +33,15 @@ export default function Servers() { const [showMap, setShowMap] = useState("0") const containerRef = useRef(null) const [settingsOpen, setSettingsOpen] = useState(false) + + // 使用ref存储筛选状态，防止WebSocket消息刷新时重置 + const groupRef = useRef("All") + const countryRef = useRef("All") const [currentGroup, setCurrentGroup] = useState("All") const [currentCountry, setCurrentCountry] = useState("All") + + // 保存是否已经初始化了筛选状态 + const initializedRef = useRef(false) const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined @@ -46,17 +53,21 @@ export default function Servers() { } const handleTagChange = (newGroup: string) => { - console.log('切换组:', newGroup) + groupRef.current = newGroup + countryRef.current = "All" // 切换组时重置国家筛选 + setCurrentGroup(newGroup) - setCurrentCountry("All") // 切换组时重置国家筛选 + setCurrentCountry("All") + sessionStorage.setItem("selectedGroup", newGroup) sessionStorage.setItem("selectedCountry", "All") sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0)) } const handleCountryChange = (newCountry: string) => { - console.log('切换国家:', newCountry, '当前组:', currentGroup) + countryRef.current = newCountry setCurrentCountry(newCountry) + sessionStorage.setItem("selectedCountry", newCountry) sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0)) } @@ -82,16 +93,19 @@ export default function Servers() { } }, []) + // 仅在组件挂载时初始化一次状态 useEffect(() => { + if (initializedRef.current) return; + const savedGroup = sessionStorage.getItem("selectedGroup") || "All" const savedCountry = sessionStorage.getItem("selectedCountry") || "All" - console.log('初始化分组和国家筛选:', { savedGroup, savedCountry }) + groupRef.current = savedGroup + countryRef.current = savedCountry - // 确保在组件挂载时应用保存的值 setCurrentGroup(savedGroup) setCurrentCountry(savedCountry) - + restoreScrollPosition() // 如果没有保存值，初始化存储 @@ -102,8 +116,18 @@ export default function Servers() { if (!sessionStorage.getItem("selectedCountry")) { sessionStorage.setItem("selectedCountry", "All") } + + initializedRef.current = true }, []) + // 当WebSocket消息更新时，确保UI状态与ref同步 + useEffect(() => { + if (!lastMessage || !initializedRef.current) return; + + setCurrentGroup(groupRef.current) + setCurrentCountry(countryRef.current) + }, [lastMessage]) + const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null // 获取所有可用的国家代码 @@ -113,8 +137,6 @@ export default function Servers() { .sort() : [] - console.log('可用国家代码:', availableCountries) - const groupTabs = [ "All", ...(groupData?.data @@ -129,13 +151,6 @@ export default function Servers() { ...availableCountries.map(code => code.toUpperCase()) ] - console.log('标签信息:', { - 组标签: groupTabs, - 国家标签: countryTabs, - 当前组: currentGroup, - 当前国家: currentCountry - }) - // 获取cycle_transfer_stats数据 const { data: serviceData } = useQuery({ queryKey: ["service"], @@ -190,14 +205,6 @@ export default function Servers() { 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