89c64ccf53
- 添加 selectIsMobile 导入 在 NotificationProvider 组件开头添加移动端检测 移动端返回空壳 Provider - 桌面端保持原有完整功能 移除 ConnectionStatusBar 组件和 ConnectionStatusBarWrapper（所有端） - 移除了不再使用的 useNotification、useLocation、logger 导入 - 添加了 Redux selectIsMobile 检测 - 移动端不渲染 NotificationContainer
58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
// src/components/GlobalComponents.js
|
|
// 集中管理应用的全局组件
|
|
|
|
import React, { useMemo } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { selectIsMobile } from '@/store/slices/deviceSlice';
|
|
|
|
// Global Components
|
|
import AuthModalManager from './Auth/AuthModalManager';
|
|
import NotificationContainer from './NotificationContainer';
|
|
import ScrollToTop from './ScrollToTop';
|
|
|
|
// Bytedesk客服组件
|
|
import BytedeskWidget from '../bytedesk-integration/components/BytedeskWidget';
|
|
import { getBytedeskConfig } from '../bytedesk-integration/config/bytedesk.config';
|
|
|
|
/**
|
|
* GlobalComponents - 全局组件容器
|
|
* 集中管理所有全局级别的组件,如弹窗、通知、状态栏等
|
|
*
|
|
* 包含的组件:
|
|
* - ScrollToTop: 路由切换时自动滚动到顶部
|
|
* - AuthModalManager: 认证弹窗管理器
|
|
* - NotificationContainer: 通知容器（仅桌面端渲染）
|
|
* - BytedeskWidget: Bytedesk在线客服
|
|
*
|
|
* 注意:
|
|
* - ConnectionStatusBar 已移除（所有端）
|
|
* - NotificationContainer 在移动端不渲染（通知功能已在 NotificationContext 层禁用）
|
|
*/
|
|
export function GlobalComponents() {
|
|
const isMobile = useSelector(selectIsMobile);
|
|
|
|
// ✅ 缓存 Bytedesk 配置对象，避免每次渲染都创建新引用导致重新加载
|
|
const bytedeskConfigMemo = useMemo(() => getBytedeskConfig(), []);
|
|
|
|
return (
|
|
<>
|
|
{/* 路由切换时自动滚动到顶部 */}
|
|
<ScrollToTop />
|
|
|
|
{/* 认证弹窗管理器 */}
|
|
<AuthModalManager />
|
|
|
|
{/* 通知容器（仅桌面端渲染） */}
|
|
{!isMobile && <NotificationContainer />}
|
|
|
|
{/* Bytedesk在线客服 - 使用缓存的配置对象 */}
|
|
<BytedeskWidget
|
|
config={bytedeskConfigMemo}
|
|
autoLoad={true}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default GlobalComponents;
|