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

11
hooks/index.ts
View File

@@ -3,7 +3,7 @@
*/
// Debounce
export { useDebounce, useDebouncedCallback } from './useDebounce';
export { useDebounce, useDebounceValue } from './useDebounce';
// Throttle
export { useThrottle } from './useThrottle';
@@ -15,15 +15,10 @@ export { useHaptics } from './useHaptics';
export { useRequest } from './useRequest';
// Theme
export {
useColorScheme,
useThemeColor,
useThemeColors,
useThemeInfo,
} from './useTheme';
export { useColorScheme, useThemeColor, useThemeColors, useThemeInfo } from './useTheme';
// Client-only value (for SSR/Web compatibility)
export { useClientOnlyValue } from './useClientOnlyValue';
// Game Menus
export { useGameMainMenus, useMenuDataLoaded, useSelectedCategory } from './useGameMenus';
export { useGameMainMenus, useMenuDataLoaded, useGameMenuTabs } from './useGameMenus';

7
hooks/useClientOnlyValue.ts
View File

@@ -1,14 +1,14 @@
/**
* Client-only value Hook
*
*
* This hook is used to provide different values for server-side rendering (SSR)
* and client-side rendering. It's particularly useful for React Native Web
* to prevent hydration errors.
*
*
* @param server - Value to use during server-side rendering
* @param client - Value to use during client-side rendering
* @returns The appropriate value based on the rendering context
*
*
* @example
* ```tsx
* // Disable header on server, enable on client
@@ -20,4 +20,3 @@
export function useClientOnlyValue<S, C>(server: S, client: C): S | C {
return client;
}

11
hooks/useClientOnlyValue.web.ts
View File

@@ -1,16 +1,16 @@
/**
* Client-only value Hook (Web version)
*
*
* This hook is used to provide different values for server-side rendering (SSR)
* and client-side rendering on web platforms.
*
*
* On web, we use `useEffect` to detect if we're on the client or server,
* since `useEffect` is not invoked during server rendering.
*
*
* @param server - Value to use during server-side rendering
* @param client - Value to use during client-side rendering
* @returns The appropriate value based on the rendering context
*
*
* @example
* ```tsx
* // Disable header on server, enable on client
@@ -24,11 +24,10 @@ import React from 'react';
// we can use this to determine if we're on the server or not.
export function useClientOnlyValue<S, C>(server: S, client: C): S | C {
const [value, setValue] = React.useState<S | C>(server);
React.useEffect(() => {
setValue(client);
}, [client]);
return value;
}

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,
};
};

18
hooks/useTheme.ts
View File

@@ -91,12 +91,14 @@ export function useThemeInfo() {
const theme = useColorScheme();
const colors = useThemeColors();
return useMemo(() => ({
theme,
colors,
isDark: theme === ThemeEnum.DARK,
isLight: theme === ThemeEnum.LIGHT,
isOrange: theme === ThemeEnum.ORANGE,
}), [theme, colors]);
return useMemo(
() => ({
theme,
colors,
isDark: theme === ThemeEnum.DARK,
isLight: theme === ThemeEnum.LIGHT,
isOrange: theme === ThemeEnum.ORANGE,
}),
[theme, colors]
);
}