kenan/rn-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 首页更新

Browse Source
This commit is contained in:
echo
2025-11-13 16:47:10 +08:00
parent 9ef9233797
commit 54bf84b19b
1244 changed files with 3507 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
hooks/useGameMenus.ts
View File

@@ -4,10 +4,9 @@ import { GameMainTypesEnum, defaultHomeGameTabMenus, gameMainTypesMap } from '@/
import { ThemeEnum } from '@/constants/theme';
import { forEach, cloneDeep, map, filter } from 'lodash-es';
import { useIsLoggedIn } from '@/stores/userStore';
import { useShallow } from 'zustand/react/shallow';
// import { useShallow } from 'zustand/react/shallow';
import storageManager, { STORAGE_KEYS } from '@/utils/storageManager';
type GameMenu = {
name: string;
key: string;
@@ -51,16 +50,19 @@ export const useGameMainMenus = (theme: ThemeEnum) => {
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`,
};
})
? map(
gameBigClass?.[typeName].sort((a: any, b: any) => a.play_sort - b.play_sort),
(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 {
@@ -88,8 +90,6 @@ export const useGameMainMenus = (theme: ThemeEnum) => {
],
(item) => ({
...item,
// 为了在 React Native 中正确加载本地图片，使用 require 的方式
// 这里保留原始的 icon 名称，在组件中使用 require 加载
icon: item.icon,
key: `${item.key}`,
})
@@ -99,57 +99,99 @@ export const useGameMainMenus = (theme: ThemeEnum) => {
export const useMenuDataLoaded = () => useGameStore((state) => state.menuSort?.length > 0);
interface UseGameMenuTabsReturn {
activeMainMenuTab: string;
setActiveMainMenuTab: (key: string) => void;
activeSubMenuTab: string;
setActiveSubMenuTab: (key: string) => void;
setActiveMenuTabs: (mainMenuKey: string, subMenuKey: string) => void;
}
/**
* 游戏分类选择 Hook（统一管理）
* 游戏菜单选中状态统一管理 Hook
*
* 管理当前选中的游戏分类，支持：
* - 从 gameStore 获取当前选中分类
* - 更新选中分类并保存到 session storage
* - 页面刷新后恢复选中分类
* 统一管理主菜单和子菜单的选中状态，支持：
* - 从 gameStore 获取当前选中的主菜单和子菜单
* - 更新选中状态并自动保存到 session storage
* - 页面刷新后自动恢复选中状态
*
* @returns {Object} 包含 selectedCategory 和 setSelectedCategory 的对象
* @returns {Object} 包含主菜单和子菜单的选中状态和更新方法
*
* @example
* ```typescript
* const { selectedCategory, setSelectedCategory } = useSelectedCategory();
* const { activeMainMenuTab, setActiveMainMenuTab, activeSubMenuTab, setActiveSubMenuTab } = useGameMenuTabs();
*
* // 获取当前选中分类
* console.log(selectedCategory); // '103'
* // 获取当前选中的主菜单
* console.log(activeMainMenuTab); // '103'
*
* // 更新选中分类
* setSelectedCategory('1');
* // 更新选中的主菜单
* setActiveMainMenuTab('1');
*
* // 获取当前选中的子菜单
* console.log(activeSubMenuTab); // '1001'
*
* // 更新选中的子菜单
* setActiveSubMenuTab('1002');
* ```
*/
export const useSelectedCategory = () => {
const selectedCategory = useGameStore((state) => state.selectedCategory);
const setSelectedCategoryInStore = useGameStore((state) => state.setSelectedCategory);
export const useGameMenuTabs = (): UseGameMenuTabsReturn => {
// 从 store 获取状态
const activeMainMenuTab = useGameStore((state) => state.activeMainMenuTab);
const activeSubMenuTab = useGameStore((state) => state.activeSubMenuTab);
const setActiveMenuTabsInStore = useGameStore((state) => state.setActiveMenuTabs);
const setActiveMainMenuTabInStore = useGameStore((state) => state.setActiveMainMenuTab);
const setActiveSubMenuTabInStore = useGameStore((state) => state.setActiveSubMenuTab);
// 初始化时从 session storage 恢复选中分类
// 初始化时从 session storage 恢复选中状态
useEffect(() => {
const initializeSelectedCategory = async () => {
const initializeMenuTabs = async () => {
try {
const savedCategory = storageManager.session.getItem(STORAGE_KEYS.APP_ACTIVE_MAIN_MENU_TAB);
if (savedCategory) {
setSelectedCategoryInStore(savedCategory);
const savedMainTab = storageManager.session.getItem(STORAGE_KEYS.APP_ACTIVE_MAIN_MENU_TAB);
const savedSubTab = storageManager.session.getItem(STORAGE_KEYS.APP_ACTIVE_SUB_MENU_TAB);
if (savedMainTab) {
setActiveMainMenuTabInStore(savedMainTab);
}
if (savedSubTab) {
setActiveSubMenuTabInStore(savedSubTab);
}
} catch (error) {
console.error('Failed to restore selected category:', error);
console.error('Failed to restore menu tabs:', error);
}
};
initializeSelectedCategory();
}, [setSelectedCategoryInStore]);
initializeMenuTabs();
}, [setActiveMainMenuTabInStore, setActiveSubMenuTabInStore]);
// 更新选中分类的回调函数
const setSelectedCategory = useCallback(
(categoryId: string) => {
setSelectedCategoryInStore(categoryId);
// 更新全部菜单的回调函数
const setActiveMenuTabs = useCallback(
(mainMenuKey: string, subMenuKey: string) => {
setActiveMenuTabsInStore(mainMenuKey, subMenuKey);
},
[setSelectedCategoryInStore]
[setActiveMenuTabsInStore]
);
// 更新主菜单的回调函数
const setActiveMainMenuTab = useCallback(
(key: string) => {
setActiveMainMenuTabInStore(key);
},
[setActiveMainMenuTabInStore]
);
// 更新子菜单的回调函数
const setActiveSubMenuTab = useCallback(
(key: string) => {
setActiveSubMenuTabInStore(key);
},
[setActiveSubMenuTabInStore]
);
return {
selectedCategory,
setSelectedCategory,
setActiveMenuTabs,
activeMainMenuTab,
setActiveMainMenuTab,
activeSubMenuTab,
setActiveSubMenuTab,
};
};