feat: 首页更新

pages/HomeScreen/components/GameMainMenus/index.tsx

@@ -8,7 +8,7 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
 import { View, Text, ScrollView, TouchableOpacity, Animated, Image, Platform } from 'react-native';
 // import type { GameCategory } from '@/types/home';
 import { styles } from './styles';
-import { useGameMainMenus, useMenuDataLoaded, useSelectedCategory } from '@/hooks/useGameMenus';
+import { useGameMainMenus, useMenuDataLoaded, useGameMenuTabs } from '@/hooks/useGameMenus';
 // import useGameStore from '@/stores/gameStore';
 // import { ThemeEnum } from '@/constants/theme';
 import { Colors, useColorScheme } from '@/theme';
@@ -21,18 +21,18 @@ if (Platform.OS !== 'web') {
 
 // 游戏菜单图片映射 - 使用 require 加载本地资源
 const MENU_ICON_MAP: Record<string, any> = {
-  'recommend': require('../../../../assets/images/game/menu/recommend.png'),
-  'chess': require('../../../../assets/images/game/menu/chess.png'),
-  'electronic': require('../../../../assets/images/game/menu/electronic.png'),
-  'fishing': require('../../../../assets/images/game/menu/fishing.png'),
-  'lottery': require('../../../../assets/images/game/menu/lottery.png'),
-  'sports': require('../../../../assets/images/game/menu/sports.png'),
-  'trial': require('../../../../assets/images/game/menu/trial.png'),
-  'blockThird': require('../../../../assets/images/game/menu/blockThird.png'),
+  recommend: require('../../../../assets/images/game/menu/recommend.png'),
+  chess: require('../../../../assets/images/game/menu/chess.png'),
+  electronic: require('../../../../assets/images/game/menu/electronic.png'),
+  fishing: require('../../../../assets/images/game/menu/fishing.png'),
+  lottery: require('../../../../assets/images/game/menu/lottery.png'),
+  sports: require('../../../../assets/images/game/menu/sports.png'),
+  trial: require('../../../../assets/images/game/menu/trial.png'),
+  blockThird: require('../../../../assets/images/game/menu/blockThird.png'),
   'clock-solid': require('../../../../assets/images/game/menu/clock-solid.png'),
   'clock-solid_dark': require('../../../../assets/images/game/menu/clock-solid_dark.png'),
   'home-star-solid': require('../../../../assets/images/game/menu/home-star-solid.png'),
-  'live': require('../../../../assets/images/game/menu/live.png'),
+  live: require('../../../../assets/images/game/menu/live.png'),
 };
 
 interface GameMainMenuProps {
@@ -43,25 +43,22 @@ interface GameMainMenuProps {
 /**
  * 游戏分类菜单组件
  */
-export default function GameMainMenu({
-  topHeight = 0,
-  showSubMenus = true,
-}: GameMainMenuProps) {
+export default function GameMainMenu({ topHeight = 0, showSubMenus = true }: GameMainMenuProps) {
   const theme = useColorScheme();
   const s = styles[theme];
   const scrollViewRef = useRef<ScrollView>(null);
   const gameMenus = useGameMainMenus(theme);
 
   // 从 hook 获取选中分类和更新方法
-  const { selectedCategory, setSelectedCategory } = useSelectedCategory();
+  const { activeMainMenuTab, setActiveMainMenuTab } = useGameMenuTabs();
 
   // 检查数据加载完成
   const isDataLoaded = useMenuDataLoaded();
 
   // 使用 useMemo 缓存找到的索引，避免每次都重新计算
   const selectedIndex = useMemo(() => {
-    return gameMenus.findIndex((cat) => cat.key === selectedCategory);
-  }, [selectedCategory, gameMenus]);
+    return gameMenus.findIndex((cat) => cat.key === activeMainMenuTab);
+  }, [activeMainMenuTab, gameMenus]);
 
   // 当分类改变时，滚动到该分类
   useEffect(() => {
@@ -76,9 +73,9 @@ export default function GameMainMenu({
   // 使用 useCallback 稳定 onPress 回调
   const handleCategoryPress = useCallback(
     (categoryKey: string) => {
-      setSelectedCategory(categoryKey);
+      setActiveMainMenuTab(categoryKey);
     },
-    [setSelectedCategory]
+    [setActiveMainMenuTab]
   );
 
   // 骨架屏 - 显示加载中的占位符
@@ -126,21 +123,19 @@ export default function GameMainMenu({
             imageSource = MENU_ICON_MAP[menu.icon];
           }
 
-          const isActive = selectedCategory === menu.key;
+          const isActive = activeMainMenuTab === menu.key;
           const themeColors = Colors[theme];
 
           // 获取渐变色 - 从主题色到透明
           const gradientStart = `${themeColors.tint}40`; // 主题色 + 40% 透明度
-          const gradientEnd = `${themeColors.tint}00`;   // 完全透明
+          const gradientEnd = `${themeColors.tint}00`; // 完全透明
 
           const menuContent = (
             <>
               {imageSource && (
                 <Image source={imageSource} style={s.menuIcon} resizeMode="contain" />
               )}
-              <Text style={[s.menuText, isActive && s.menuTextActive]}>
-                {menu.name}
-              </Text>
+              <Text style={[s.menuText, isActive && s.menuTextActive]}>{menu.name}</Text>
             </>
           );