更新 GroupSwitch 组件，增加唯一 ID 前缀以避免布局冲突，优化标签点击处理逻辑。同时在 Server 页面中添加调试信息，记录组和国家切换的状态，提升代码可读性和调试便利性。

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<HTMLDivElement>(null)
   const tagRefs = useRef(tabs.map(() => createRef<HTMLDivElement>()))
 
@@ -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<HTMLDivElement>())
+  }, [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 (
-    <div ref={scrollRef} className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
+    <div className={cn(
+      "scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]",
+      isCountrySwitch ? "border-l border-stone-200 dark:border-stone-700 ml-1 pl-1" : ""
+    )} ref={scrollRef}>
       <div
         className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
           "bg-stone-100/70 dark:bg-stone-800/70": customBackgroundImage,
@@ -88,9 +115,9 @@ export default function GroupSwitch({
       >
         {tabs.map((tab: string, index: number) => (
           <div
-            key={tab}
+            key={isCountrySwitch ? `country-${tab}` : `group-${tab}`}
             ref={tagRefs.current[index]}
-            onClick={() => 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 && (
               <m.div
-                layoutId={isCountrySwitch ? "country-switch" : "tab-switch"}
+                layoutId={`${layoutIdPrefix}${isCountrySwitch ? 'country-' : 'group-'}${tab}`}
                 style={{
                   position: "absolute",
                   inset: 0,

src/pages/Server.tsx

@@ -46,6 +46,7 @@ export default function Servers() {
   }
 
   const handleTagChange = (newGroup: string) => {
+    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