From 59d2c5ae3c9f2349a255571e64a20817a5f06879 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 22 Nov 2024 20:15:25 +0800
Subject: [PATCH] fix: safari page blank

---
 src/hooks/use-overlay-scroller.ts | 21 ++++++++-------------
 src/layouts/error-boundary.tsx    |  2 --
 src/layouts/index.tsx             | 26 +++++++++++++++++++-------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/hooks/use-overlay-scroller.ts b/src/hooks/use-overlay-scroller.ts
index 294cfd6d..1a1d44a2 100644
--- a/src/hooks/use-overlay-scroller.ts
+++ b/src/hooks/use-overlay-scroller.ts
@@ -3,7 +3,7 @@ import {
   UseOverlayScrollbarsParams,
   useOverlayScrollbars
 } from 'overlayscrollbars-react';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export const overlaySollerOptions: UseOverlayScrollbarsParams = {
   options: {
@@ -52,7 +52,7 @@ export default function useOverlayScroller(options?: any) {
   const throttledScroll = React.useCallback(
     throttle(() => {
       scrollEventElement.current?.scrollTo?.({
-        top: scrollEventElement.current.scrollHeight,
+        top: scrollEventElement.current?.scrollHeight,
         behavior: 'smooth'
       });
       instanceRef.current?.update?.();
@@ -82,10 +82,6 @@ export default function useOverlayScroller(options?: any) {
 
   // scroll to top
   const updateScrollerPositionToTop = React.useCallback(() => {
-    console.log(
-      ' scrollEventElement.current.scrollHeight====',
-      scrollEventElement.current.scrollHeight
-    );
     scrollEventElement.current?.scrollTo?.({
       top: 0,
       behavior: 'auto'
@@ -107,13 +103,6 @@ export default function useOverlayScroller(options?: any) {
       if (el) {
         initialize(el);
         initialized.current = true;
-        console.log(
-          'createInstance===2',
-          initialized.current,
-          instanceRef.current,
-          instance?.(),
-          instance
-        );
         instanceRef.current = instance?.();
         scrollEventElement.current =
           instanceRef.current?.elements()?.scrollEventElement;
@@ -122,6 +111,12 @@ export default function useOverlayScroller(options?: any) {
     [initialize, instance]
   );
 
+  useEffect(() => {
+    return () => {
+      instanceRef.current?.destroy?.();
+    };
+  }, [instance]);
+
   return {
     initialize: createInstance,
     instance: instanceRef.current,
diff --git a/src/layouts/error-boundary.tsx b/src/layouts/error-boundary.tsx
index afc7d1aa..e8441144 100644
--- a/src/layouts/error-boundary.tsx
+++ b/src/layouts/error-boundary.tsx
@@ -15,13 +15,11 @@ class ErrorBoundary extends Component<
     };
   }
 
-  // 捕获错误并更新状态
   static getDerivedStateFromError(error: any) {
     console.error('Error caught by Error Boundary:', error);
     return { hasError: true };
   }
 
-  // 记录错误信息（可选）
   componentDidCatch(error: any, info: any) {
     console.error('Error caught by Error Boundary:', error);
     console.error(info);
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 889c8c04..fff8919d 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -195,13 +195,25 @@ export default (props: any) => {
   }, [initialize]);
 
   useEffect(() => {
-    const menuWrap = document.querySelector(
-      '.ant-menu.ant-menu-root'
-    )?.parentElement;
-    if (menuWrap) {
-      initializeMenu(menuWrap);
-    }
-  }, [initializeMenu]);
+    const checkAndInitialize = () => {
+      const menuWrap = window.document.querySelector(
+        '.ant-menu.ant-menu-root'
+      )?.parentElement;
+      if (menuWrap) {
+        try {
+          initializeMenu(menuWrap);
+        } catch (error) {
+          console.error('Failed to initialize menu:', error);
+        }
+      } else {
+        console.warn('Menu wrapper not found.');
+      }
+    };
+
+    const timeout = setTimeout(checkAndInitialize, 500);
+
+    return () => clearTimeout(timeout);
+  }, [initializeMenu, matchedRoute, location]);
 
   const renderMenuHeader = useCallback(
     (logo, title) => {