pref: 删除无用组件
This commit is contained in:
zdl
@@ -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>
|
|
||||||
*/
|
|
||||||
Reference in New Issue
Block a user