vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: H5 移动端将隐藏"开启通知"组件，桌面端保持正常显示

Browse Source
This commit is contained in:
zdl
2025-11-26 16:01:58 +08:00
parent 022271947a
commit 217551b6ab
1 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/Community/components/DynamicNewsCard.js
View File

@@ -47,6 +47,7 @@ import { usePagination } from './DynamicNewsCard/hooks/usePagination';
import { PAGINATION_CONFIG, DISPLAY_MODES, REFRESH_DEBOUNCE_DELAY } from './DynamicNewsCard/constants'; import { PAGINATION_CONFIG, DISPLAY_MODES, REFRESH_DEBOUNCE_DELAY } from './DynamicNewsCard/constants';
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme'; import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
import { debounce } from '../../../utils/debounce'; import { debounce } from '../../../utils/debounce';
import { useDevice } from '@hooks/useDevice';
// 🔍 调试：渲染计数器 // 🔍 调试：渲染计数器
let dynamicNewsCardRenderCount = 0; let dynamicNewsCardRenderCount = 0;
@@ -81,6 +82,7 @@ const DynamicNewsCardComponent = forwardRef(({
// 通知权限相关 // 通知权限相关
const { browserPermission, requestBrowserPermission } = useNotification(); const { browserPermission, requestBrowserPermission } = useNotification();
const { isMobile } = useDevice();
// Refs // Refs
const cardHeaderRef = useRef(null); const cardHeaderRef = useRef(null);
@@ -548,59 +550,61 @@ const [currentMode, setCurrentMode] = useState('vertical');
{/* 右侧：通知开关 + 更新时间 */} {/* 右侧：通知开关 + 更新时间 */}
<HStack spacing={3}> <HStack spacing={3}>
{/* 通知开关 */} {/* 通知开关 - 移动端隐藏 */}
<Tooltip {!isMobile && (
label={browserPermission === 'granted' <Tooltip
? '浏览器通知已开启' label={browserPermission === 'granted'
: '开启实时推送通知'} ? '浏览器通知已开启'
placement="left" : '开启实时推送通知'}
hasArrow placement="left"
> hasArrow
<HStack
spacing={2}
px={3}
py={1.5}
borderRadius="md"
bg={browserPermission === 'granted'
? useColorModeValue('green.50', 'green.900')
: useColorModeValue('gray.50', 'gray.700')}
borderWidth="1px"
borderColor={browserPermission === 'granted'
? useColorModeValue('green.200', 'green.700')
: useColorModeValue('gray.200', 'gray.600')}
cursor="pointer"
_hover={{
borderColor: browserPermission === 'granted'
? useColorModeValue('green.300', 'green.600')
: useColorModeValue('blue.300', 'blue.600'),
}}
transition="all 0.2s"
onClick={handleNotificationToggle}
> >
<Icon <HStack
as={BellIcon} spacing={2}
boxSize={3.5} px={3}
color={browserPermission === 'granted' py={1.5}
? useColorModeValue('green.600', 'green.300') borderRadius="md"
: useColorModeValue('gray.500', 'gray.400')} bg={browserPermission === 'granted'
/> ? useColorModeValue('green.50', 'green.900')
<Text : useColorModeValue('gray.50', 'gray.700')}
fontSize="sm" borderWidth="1px"
fontWeight="medium" borderColor={browserPermission === 'granted'
color={browserPermission === 'granted' ? useColorModeValue('green.200', 'green.700')
? useColorModeValue('green.700', 'green.200') : useColorModeValue('gray.200', 'gray.600')}
: useColorModeValue('gray.600', 'gray.300')} cursor="pointer"
_hover={{
borderColor: browserPermission === 'granted'
? useColorModeValue('green.300', 'green.600')
: useColorModeValue('blue.300', 'blue.600'),
}}
transition="all 0.2s"
onClick={handleNotificationToggle}
> >
{browserPermission === 'granted' ? '已开启' : '开启通知'} <Icon
</Text> as={BellIcon}
<Switch boxSize={3.5}
size="sm" color={browserPermission === 'granted'
isChecked={browserPermission === 'granted'} ? useColorModeValue('green.600', 'green.300')
pointerEvents="none" : useColorModeValue('gray.500', 'gray.400')}
colorScheme="green" />
/> <Text
</HStack> fontSize="sm"
</Tooltip> fontWeight="medium"
color={browserPermission === 'granted'
? useColorModeValue('green.700', 'green.200')
: useColorModeValue('gray.600', 'gray.300')}
>
{browserPermission === 'granted' ? '已开启' : '开启通知'}
</Text>
<Switch
size="sm"
isChecked={browserPermission === 'granted'}
pointerEvents="none"
colorScheme="green"
/>
</HStack>
</Tooltip>
)}
{/* 更新时间 */} {/* 更新时间 */}
<Text fontSize="xs" color={PROFESSIONAL_COLORS.text.secondary} whiteSpace="nowrap"> <Text fontSize="xs" color={PROFESSIONAL_COLORS.text.secondary} whiteSpace="nowrap">