mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
优化 GroupSwitch 组件,移除调试信息以提升代码整洁性。同时在 Server 页面中引入 ref 存储筛选状态,确保 WebSocket 消息更新时 UI 状态与筛选状态同步,提升用户体验。
This commit is contained in:
parent
eeddef0efc
commit
b800ce816a
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user