From ee78e00d3ba48332f2a0b1f93351c73f47c3c542 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 26 Nov 2025 11:03:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js             | 22 ++++++++++++++++++++++
 src/hooks/useDevice.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/hooks/useDevice.js

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 <MobileView />;
+ * if (isTablet) return <TabletView />;
+ * return <DesktopView />;
+ */
+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;