diff --git a/src/App.js b/src/App.js
index 6b09fd81..dfa9f1f8 100755
--- a/src/App.js
+++ b/src/App.js
@@ -28,6 +28,7 @@ import { useGlobalErrorHandler } from './hooks/useGlobalErrorHandler';
// Redux
import { initializePostHog } from './store/slices/posthogSlice';
+import { updateScreenSize } from './store/slices/deviceSlice';
// Utils
import { logger } from './utils/logger';
@@ -63,6 +64,27 @@ function AppContent() {
performanceMonitor.mark('react-ready');
}, []);
+ // 📱 设备检测:监听窗口尺寸变化
+ useEffect(() => {
+ let resizeTimer;
+ const handleResize = () => {
+ // 防抖:避免频繁触发
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(() => {
+ dispatch(updateScreenSize());
+ }, 150);
+ };
+
+ window.addEventListener('resize', handleResize);
+ window.addEventListener('orientationchange', handleResize);
+
+ return () => {
+ clearTimeout(resizeTimer);
+ window.removeEventListener('resize', handleResize);
+ window.removeEventListener('orientationchange', handleResize);
+ };
+ }, [dispatch]);
+
// ✅ 首次访问追踪
useEffect(() => {
const hasVisited = localStorage.getItem('has_visited');
diff --git a/src/hooks/useDevice.js b/src/hooks/useDevice.js
new file mode 100644
index 00000000..dce853c0
--- /dev/null
+++ b/src/hooks/useDevice.js
@@ -0,0 +1,35 @@
+/**
+ * useDevice Hook
+ *
+ * 封装设备类型检测,提供简洁的 API 供组件使用
+ *
+ * @example
+ * const { isMobile, isTablet, isDesktop, deviceType } = useDevice();
+ *
+ * if (isMobile) return ;
+ * if (isTablet) return ;
+ * return ;
+ */
+import { useSelector } from 'react-redux';
+import {
+ selectIsMobile,
+ selectIsTablet,
+ selectIsDesktop,
+ selectDeviceType,
+} from '@/store/slices/deviceSlice';
+
+export const useDevice = () => {
+ const isMobile = useSelector(selectIsMobile);
+ const isTablet = useSelector(selectIsTablet);
+ const isDesktop = useSelector(selectIsDesktop);
+ const deviceType = useSelector(selectDeviceType);
+
+ return {
+ isMobile,
+ isTablet,
+ isDesktop,
+ deviceType,
+ };
+};
+
+export default useDevice;