feat: 删除事件中心页面不再显示桌面通知提示横幅
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
// src/views/Community/index.js
|
||||
import React, { useEffect, useRef, useState, lazy, Suspense } from 'react';
|
||||
import React, { useEffect, useRef, lazy, Suspense } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
@@ -10,15 +10,6 @@ import {
|
||||
Box,
|
||||
Container,
|
||||
useColorModeValue,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
AlertTitle,
|
||||
AlertDescription,
|
||||
Button,
|
||||
CloseButton,
|
||||
HStack,
|
||||
VStack,
|
||||
Text,
|
||||
useBreakpointValue,
|
||||
Skeleton,
|
||||
} from '@chakra-ui/react';
|
||||
@@ -51,8 +42,6 @@ const Community = () => {
|
||||
|
||||
// 专业配色 - 深色主题
|
||||
const bgColor = PROFESSIONAL_COLORS.background.primary;
|
||||
const alertBgColor = 'rgba(59, 130, 246, 0.1)';
|
||||
const alertBorderColor = PROFESSIONAL_COLORS.border.default;
|
||||
|
||||
// Ref:用于首次滚动到内容区域
|
||||
const containerRef = useRef(null);
|
||||
@@ -80,9 +69,6 @@ const Community = () => {
|
||||
// ⚡ DynamicNewsCard 的 ref(用于触发刷新)
|
||||
const dynamicNewsCardRef = useRef(null);
|
||||
|
||||
// 通知横幅显示状态
|
||||
const [showNotificationBanner, setShowNotificationBanner] = useState(false);
|
||||
|
||||
// 🎯 初始化Community埋点Hook
|
||||
const communityEvents = useCommunityEvents({ navigate });
|
||||
|
||||
@@ -121,39 +107,6 @@ const Community = () => {
|
||||
}
|
||||
}, [events, loading, pagination, filters]);
|
||||
|
||||
// ⚡ 检查通知权限状态,显示横幅提示
|
||||
useEffect(() => {
|
||||
// 延迟3秒显示,让用户先浏览页面
|
||||
const timer = setTimeout(() => {
|
||||
// 如果未授权或未请求过权限,显示横幅
|
||||
if (browserPermission !== 'granted') {
|
||||
const hasClosedBanner = localStorage.getItem('notification_banner_closed');
|
||||
if (!hasClosedBanner) {
|
||||
setShowNotificationBanner(true);
|
||||
logger.info('Community', '显示通知权限横幅');
|
||||
}
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [browserPermission]);
|
||||
|
||||
// 处理开启通知
|
||||
const handleEnableNotifications = async () => {
|
||||
const permission = await requestBrowserPermission();
|
||||
if (permission === 'granted') {
|
||||
setShowNotificationBanner(false);
|
||||
logger.info('Community', '通知权限已授予');
|
||||
}
|
||||
};
|
||||
|
||||
// 处理关闭横幅
|
||||
const handleCloseBanner = () => {
|
||||
setShowNotificationBanner(false);
|
||||
localStorage.setItem('notification_banner_closed', 'true');
|
||||
logger.info('Community', '通知横幅已关闭');
|
||||
};
|
||||
|
||||
// ⚡ 首次进入页面时滚动到内容区域(考虑导航栏高度)
|
||||
const hasScrolled = useRef(false);
|
||||
useEffect(() => {
|
||||
@@ -237,43 +190,6 @@ const Community = () => {
|
||||
<Box minH="100vh" bg={bgColor}>
|
||||
{/* 主内容区域 */}
|
||||
<Container ref={containerRef} maxW={containerMaxW} px={containerPx} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
|
||||
{/* 通知权限提示横幅 */}
|
||||
{showNotificationBanner && (
|
||||
<Alert
|
||||
status="info"
|
||||
variant="subtle"
|
||||
borderRadius="lg"
|
||||
mb={4}
|
||||
boxShadow="md"
|
||||
bg={alertBgColor}
|
||||
borderWidth="1px"
|
||||
borderColor={alertBorderColor}
|
||||
>
|
||||
<AlertIcon />
|
||||
<Box flex="1">
|
||||
<AlertTitle fontSize="md" mb={1}>
|
||||
开启桌面通知,不错过重要事件
|
||||
</AlertTitle>
|
||||
<AlertDescription fontSize="sm">
|
||||
即使浏览器最小化,也能第一时间接收新事件推送通知
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
<HStack spacing={2} ml={4}>
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="blue"
|
||||
onClick={handleEnableNotifications}
|
||||
>
|
||||
立即开启
|
||||
</Button>
|
||||
<CloseButton
|
||||
onClick={handleCloseBanner}
|
||||
position="relative"
|
||||
/>
|
||||
</HStack>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* ⚡ 顶部说明面板(懒加载):产品介绍 + 沪深指数 + 热门概念词云 */}
|
||||
<Suspense fallback={
|
||||
<Box mb={6} p={4} borderRadius="xl" bg="rgba(255,255,255,0.02)">
|
||||
|
||||
Reference in New Issue
Block a user