优化 GroupSwitch 组件,移除调试信息以提升代码整洁性。同时在 Server 页面中引入 ref 存储筛选状态,确保 WebSocket 消息更新时 UI 状态与筛选状态同步,提升用户体验。

This commit is contained in:
wood chen 2025-05-07 15:35:30 +08:00
parent eeddef0efc
commit b800ce816a
2 changed files with 30 additions and 31 deletions

View File

@ -90,15 +90,7 @@ export default function GroupSwitch({
} }
}, [currentTab, tabs]) }, [currentTab, tabs])
// 记录当前组件类型和选中的标签
console.log(isCountrySwitch ? '国家筛选组件:' : '分组筛选组件:', {
tabs,
currentTab,
layoutIdPrefix
})
const handleTabClick = (tab: string) => { const handleTabClick = (tab: string) => {
console.log(isCountrySwitch ? '点击国家标签:' : '点击分组标签:', tab)
if (tab === currentTab) return; // 如果点击的是当前选中的标签,不执行操作 if (tab === currentTab) return; // 如果点击的是当前选中的标签,不执行操作
setCurrentTab(tab) setCurrentTab(tab)
} }

View File

@ -33,9 +33,16 @@ export default function Servers() {
const [showMap, setShowMap] = useState<string>("0") const [showMap, setShowMap] = useState<string>("0")
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const [settingsOpen, setSettingsOpen] = useState<boolean>(false) const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
// 使用ref存储筛选状态防止WebSocket消息刷新时重置
const groupRef = useRef<string>("All")
const countryRef = useRef<string>("All")
const [currentGroup, setCurrentGroup] = useState<string>("All") const [currentGroup, setCurrentGroup] = useState<string>("All")
const [currentCountry, setCurrentCountry] = useState<string>("All") const [currentCountry, setCurrentCountry] = useState<string>("All")
// 保存是否已经初始化了筛选状态
const initializedRef = useRef<boolean>(false)
const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined const customBackgroundImage = (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const restoreScrollPosition = () => { const restoreScrollPosition = () => {
@ -46,17 +53,21 @@ export default function Servers() {
} }
const handleTagChange = (newGroup: string) => { const handleTagChange = (newGroup: string) => {
console.log('切换组:', newGroup) groupRef.current = newGroup
countryRef.current = "All" // 切换组时重置国家筛选
setCurrentGroup(newGroup) setCurrentGroup(newGroup)
setCurrentCountry("All") // 切换组时重置国家筛选 setCurrentCountry("All")
sessionStorage.setItem("selectedGroup", newGroup) sessionStorage.setItem("selectedGroup", newGroup)
sessionStorage.setItem("selectedCountry", "All") sessionStorage.setItem("selectedCountry", "All")
sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0)) sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0))
} }
const handleCountryChange = (newCountry: string) => { const handleCountryChange = (newCountry: string) => {
console.log('切换国家:', newCountry, '当前组:', currentGroup) countryRef.current = newCountry
setCurrentCountry(newCountry) setCurrentCountry(newCountry)
sessionStorage.setItem("selectedCountry", newCountry) sessionStorage.setItem("selectedCountry", newCountry)
sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0)) sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0))
} }
@ -82,13 +93,16 @@ export default function Servers() {
} }
}, []) }, [])
// 仅在组件挂载时初始化一次状态
useEffect(() => { useEffect(() => {
if (initializedRef.current) return;
const savedGroup = sessionStorage.getItem("selectedGroup") || "All" const savedGroup = sessionStorage.getItem("selectedGroup") || "All"
const savedCountry = sessionStorage.getItem("selectedCountry") || "All" const savedCountry = sessionStorage.getItem("selectedCountry") || "All"
console.log('初始化分组和国家筛选:', { savedGroup, savedCountry }) groupRef.current = savedGroup
countryRef.current = savedCountry
// 确保在组件挂载时应用保存的值
setCurrentGroup(savedGroup) setCurrentGroup(savedGroup)
setCurrentCountry(savedCountry) setCurrentCountry(savedCountry)
@ -102,8 +116,18 @@ export default function Servers() {
if (!sessionStorage.getItem("selectedCountry")) { if (!sessionStorage.getItem("selectedCountry")) {
sessionStorage.setItem("selectedCountry", "All") 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 const nezhaWsData = lastMessage ? (JSON.parse(lastMessage.data) as NezhaWebsocketResponse) : null
// 获取所有可用的国家代码 // 获取所有可用的国家代码
@ -113,8 +137,6 @@ export default function Servers() {
.sort() .sort()
: [] : []
console.log('可用国家代码:', availableCountries)
const groupTabs = [ const groupTabs = [
"All", "All",
...(groupData?.data ...(groupData?.data
@ -129,13 +151,6 @@ export default function Servers() {
...availableCountries.map(code => code.toUpperCase()) ...availableCountries.map(code => code.toUpperCase())
] ]
console.log('标签信息:', {
组标签: groupTabs,
国家标签: countryTabs,
当前组: currentGroup,
当前国家: currentCountry
})
// 获取cycle_transfer_stats数据 // 获取cycle_transfer_stats数据
const { data: serviceData } = useQuery({ const { data: serviceData } = useQuery({
queryKey: ["service"], queryKey: ["service"],
@ -190,14 +205,6 @@ export default function Servers() {
return true return true
}) || [] }) || []
// 记录筛选后的服务器数量
console.log('筛选结果:', {
组筛选: currentGroup,
国家筛选: currentCountry,
筛选前总数: nezhaWsData?.servers?.length || 0,
筛选后总数: filteredServers.length,
})
const totalServers = filteredServers.length || 0 const totalServers = filteredServers.length || 0
const onlineServers = filteredServers.filter((server) => formatNezhaInfo(nezhaWsData.now, server).online)?.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 const offlineServers = filteredServers.filter((server) => !formatNezhaInfo(nezhaWsData.now, server).online)?.length || 0