import { useEffect, useState, useMemo } from 'react'; import useGameStore from '@/stores/gameStore'; import { GameMainTypesEnum, defaultHomeGameTabMenus, gameMainTypesMap } from '@/constants/game'; import { ThemeEnum } from '@/constants/theme'; import { forEach, cloneDeep, map, filter } from 'lodash-es'; import { useIsLoggedIn } from '@/stores/userStore'; import { useShallow } from 'zustand/react/shallow'; // 有子菜单的游戏类型 const hasSubGameMainTypes = [ GameMainTypesEnum.CHESS, GameMainTypesEnum.ELECTRONIC, GameMainTypesEnum.FISHING, GameMainTypesEnum.BLOCK_THIRD, ]; export const useGameMainMenus = (theme: ThemeEnum) => { // 在 hook 顶层调用 useIsLoggedIn const isLogin = useIsLoggedIn(); // 从 store 获取必要的数据 - 直接获取,不使用 useShallow const menuSort = useGameStore((state) => state.menuSort); const gameBigClass = useGameStore((state) => state.gameBigClass); if (__DEV__) { console.log('🎮 useGameMainMenus - menuSort:', menuSort, 'length:', menuSort?.length); } // 使用 useMemo 缓存计算结果,避免每次都创建新对象 return useMemo(() => { const defaultMenus = cloneDeep(defaultHomeGameTabMenus); if (theme === ThemeEnum.DARK) { forEach(defaultMenus, (item) => { if (item.key === GameMainTypesEnum.RECENT) { item.icon = 'clock-solid_dark'; } }); } const gameMenu = map(menuSort, (item: Record) => { const typeName = gameMainTypesMap[item.type as GameMainTypesEnum]; const children = hasSubGameMainTypes.includes(item.type) ? map(gameBigClass?.[typeName], (it) => { return { name: it.play_cname, key: `${it.play_id}`, play_sort: it.play_sort, darkImgSrc: `/images/game/${typeName}/dark_${it.play_id}.png`, lightImgSrc: `/images/game/${typeName}/light_${it.play_id}.png`, colorImgSrc: it.logo3_img_url || `/images/game/${typeName}/color_${it.play_id}.png`, }; }) : []; return { name: item.play_name, key: `${item.type}`, icon: typeName, logo: item.logo_url1, children, }; }); if (__DEV__) { console.log(gameMenu, 'gameMenu'); } return map( [ ...filter(defaultMenus, (item) => [GameMainTypesEnum.RECOMMEND].includes(item.key)), ...(isLogin ? filter(gameMenu, (item) => Number(item.key) !== GameMainTypesEnum.TRIAL) : gameMenu), ...filter(defaultMenus, (item) => [GameMainTypesEnum.COLLECT, GameMainTypesEnum.RECENT].includes(item.key) ), ], (item) => ({ ...item, key: `${item.key}`, }) ); }, [theme, isLogin, menuSort, gameBigClass]); }; export const useMenuDataLoaded = () => useGameStore((state) => state.menuSort?.length > 0);