fix: page error while route changing

src/config/theme/dark.ts

@@ -96,6 +96,7 @@ export default {
     colorText: '#ccc',
     colorPrimary: COLOR_PRIMARY,
     colorSuccess: '#48A77E',
+    colorBorder: '#3a3a3a',
     borderRadius: 4,
     borderRadiusSM: 2,
     fontSize: 14,

src/global.less

@@ -88,6 +88,8 @@ html {
   --ant-line-type: solid;
   --ant-line-width: 1px;
   --color-esc-hint-bg: rgba(0, 0, 0, 75%);
+  // ======== container ============
+  --color-border-container: #ededed;
 }
 
 html[data-theme='realDark'] {
@@ -104,6 +106,7 @@ html[data-theme='realDark'] {
   --color-modal-box-shadow: none;
   --color-spotlight-bg: #3e3e3e;
   --color-esc-hint-bg: rgba(150, 150, 150, 75%);
+  --color-border-container: #3a3a3a;
 
   background: #141414;
 

src/hooks/use-body-scroll.ts

@@ -16,7 +16,7 @@ export default function useBodyScroll() {
     instanceRef.current = window.__GPUSTACK_BODY_SCROLLER__;
   };
 
-  const saveScrollHeight = React.useCallback(() => {
+  const saveScrollHeight = () => {
     if (!bodyScroller.current) {
       init();
     }
@@ -27,12 +27,12 @@ export default function useBodyScroll() {
     instanceRef.current?.options?.({
       overflow: {
         x: 'hidden',
-        y: 'visible'
+        y: 'hidden'
       }
     });
-  }, []);
+  };
 
-  const restoreScrollHeight = React.useCallback(() => {
+  const restoreScrollHeight = () => {
     if (timer.current) {
       clearTimeout(timer.current);
     }
@@ -44,7 +44,7 @@ export default function useBodyScroll() {
         }
       });
     }, 650);
-  }, []);
+  };
 
   React.useEffect(() => {
     init();

src/pages/_components/styles/page-box.less

@@ -21,7 +21,7 @@
       height: calc(100vh - 56px);
       display: flex;
       flex-direction: column;
-      border: 1px solid rgb(237, 237, 237);
+      border: 1px solid var(--color-border-container);
       border-radius: 8px;
       overflow: hidden;
       background-color: var(--ant-color-bg-container);