From d2b6904a4a25f869220e8b0eafb70c75b6e08240 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 26 Nov 2025 10:40:14 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../slices/deviceSlice.usage.example.jsx      | 190 ------------------
 1 file changed, 190 deletions(-)
 delete mode 100644 src/store/slices/deviceSlice.usage.example.jsx

diff --git a/src/store/slices/deviceSlice.usage.example.jsx b/src/store/slices/deviceSlice.usage.example.jsx
deleted file mode 100644
index 3d715ceb..00000000
--- a/src/store/slices/deviceSlice.usage.example.jsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * deviceSlice 使用示例
- *
- * 本文件展示如何在 React 组件中使用 deviceSlice 来实现响应式设计
- */
-
-import React, { useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { selectIsMobile, updateScreenSize } from '@/store/slices/deviceSlice';
-import { Box, Text, VStack } from '@chakra-ui/react';
-
-/**
- * 示例 1: 基础使用 - 根据设备类型渲染不同内容
- */
-export const BasicUsageExample = () => {
-  const isMobile = useSelector(selectIsMobile);
-
-  return (
-    <Box>
-      {isMobile ? (
-        <Text>📱 移动端视图</Text>
-      ) : (
-        <Text>💻 桌面端视图</Text>
-      )}
-    </Box>
-  );
-};
-
-/**
- * 示例 2: 监听窗口尺寸变化 - 动态更新设备状态
- */
-export const ResizeListenerExample = () => {
-  const isMobile = useSelector(selectIsMobile);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    // 监听窗口尺寸变化
-    const handleResize = () => {
-      dispatch(updateScreenSize());
-    };
-
-    // 监听屏幕方向变化（移动设备）
-    const handleOrientationChange = () => {
-      dispatch(updateScreenSize());
-    };
-
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('orientationchange', handleOrientationChange);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('orientationchange', handleOrientationChange);
-    };
-  }, [dispatch]);
-
-  return (
-    <VStack>
-      <Text>当前设备: {isMobile ? '移动设备' : '桌面设备'}</Text>
-      <Text fontSize="sm" color="gray.500">
-        试试调整浏览器窗口大小
-      </Text>
-    </VStack>
-  );
-};
-
-/**
- * 示例 3: 响应式布局 - 根据设备类型调整样式
- */
-export const ResponsiveLayoutExample = () => {
-  const isMobile = useSelector(selectIsMobile);
-
-  return (
-    <Box
-      p={isMobile ? 4 : 8}
-      bg={isMobile ? 'blue.50' : 'gray.50'}
-      borderRadius={isMobile ? 'md' : 'xl'}
-      maxW={isMobile ? '100%' : '800px'}
-      mx="auto"
-    >
-      <Text fontSize={isMobile ? 'md' : 'lg'}>
-        响应式内容区域
-      </Text>
-      <Text fontSize="sm" color="gray.600" mt={2}>
-        Padding: {isMobile ? '16px' : '32px'}
-      </Text>
-    </Box>
-  );
-};
-
-/**
- * 示例 4: 条件渲染组件 - 移动端显示简化版
- */
-export const ConditionalRenderExample = () => {
-  const isMobile = useSelector(selectIsMobile);
-
-  return (
-    <Box>
-      {isMobile ? (
-        // 移动端：简化版导航栏
-        <Box bg="blue.500" p={2}>
-          <Text color="white" fontSize="sm">☰ 菜单</Text>
-        </Box>
-      ) : (
-        // 桌面端：完整导航栏
-        <Box bg="blue.500" p={4}>
-          <Text color="white" fontSize="lg">
-            首页 | 产品 | 关于我们 | 联系方式
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-/**
- * 示例 5: 在 App.js 中全局监听（推荐方式）
- *
- * 将以下代码添加到 src/App.js 中：
- */
-export const AppLevelResizeListenerExample = () => {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const handleResize = () => {
-      dispatch(updateScreenSize());
-    };
-
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('orientationchange', handleResize);
-
-    // 初始化时也调用一次（可选）
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('orientationchange', handleResize);
-    };
-  }, [dispatch]);
-
-  // 返回 null 或组件内容
-  return null;
-};
-
-/**
- * 示例 6: 自定义 Hook 封装（推荐）
- *
- * 在 src/hooks/useDevice.js 中创建自定义 Hook：
- */
-// import { useSelector } from 'react-redux';
-// import { selectIsMobile } from '@/store/slices/deviceSlice';
-//
-// export const useDevice = () => {
-//   const isMobile = useSelector(selectIsMobile);
-//
-//   return {
-//     isMobile,
-//     isDesktop: !isMobile,
-//   };
-// };
-
-/**
- * 使用自定义 Hook：
- */
-export const CustomHookUsageExample = () => {
-  // const { isMobile, isDesktop } = useDevice();
-
-  return (
-    <Box>
-      {/* <Text>移动设备: {isMobile ? '是' : '否'}</Text> */}
-      {/* <Text>桌面设备: {isDesktop ? '是' : '否'}</Text> */}
-    </Box>
-  );
-};
-
-/**
- * 推荐实践：
- *
- * 1. 在 App.js 中添加全局 resize 监听器
- * 2. 创建自定义 Hook (useDevice) 简化使用
- * 3. 结合 Chakra UI 的响应式 Props（优先使用 Chakra 内置响应式）
- * 4. 仅在需要 JS 逻辑判断时使用 Redux（如条件渲染、动态导入）
- *
- * Chakra UI 响应式示例（推荐优先使用）：
- * <Box
- *   fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}  // Chakra 内置响应式
- *   p={{ base: 4, md: 6, lg: 8 }}
- * >
- *   内容
- * </Box>
- */