fix(style): body scroll

src/components/version-info/index.less

@@ -22,6 +22,7 @@
   }
 
   .ver {
+    margin-bottom: 20px;
     line-height: 32px;
     display: flex;
     justify-content: center;
@@ -53,7 +54,6 @@
 
   .upgrade {
     display: flex;
-    margin-top: 20px;
     justify-content: space-between;
     padding-block: 20px 4px;
     align-items: center;

src/global.less

@@ -171,6 +171,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
   .ant-modal-confirm-title {
     display: none;
   }

src/layouts/index.tsx

@@ -24,6 +24,7 @@ import {
 } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import { useAtom } from 'jotai';
+import 'overlayscrollbars/overlayscrollbars.css';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Exception from './Exception';
 import './Layout.css';
@@ -89,7 +90,7 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 };
 
 export default (props: any) => {
-  const { initialize } = useOverlayScroller();
+  const { initialize: initialize } = useOverlayScroller();
   const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
   const [version] = useAtom(GPUStackVersionAtom);
@@ -185,13 +186,19 @@ export default (props: any) => {
   }, [updateCheck, version, initialState]);
 
   useEffect(() => {
-    initialize(document.body);
+    const body = document.querySelector('body');
+    if (body) {
+      initialize(body);
+    }
   }, [initialize]);
 
   useEffect(() => {
-    initializeMenu(
+    const menuWrap = document.querySelector(
-      document.querySelector('.ant-menu.ant-menu-root')?.parentElement
+      '.ant-menu.ant-menu-root'
-    );
+    )?.parentElement;
+    if (menuWrap) {
+      initializeMenu(menuWrap);
+    }
   }, [initializeMenu]);
 
   const renderMenuHeader = useCallback(

src/pages/playground/style/ground-left.less

@@ -11,6 +11,10 @@
     padding-top: 16px;
     overflow-y: auto;
 
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
     .box {
       width: 390px;
       padding-inline: var(--layout-content-inlinepadding);

src/pages/resources/components/gpus.tsx

@@ -200,7 +200,14 @@ const GPUList: React.FC = () => {
           render={(text, record: GPUDeviceItem) => {
             return (
               <ProgressBar
-                percent={_.round(record.memory?.utilization_rate, 0)}
+                percent={
+                  record.memory?.used
+                    ? _.round(record.memory?.utilization_rate, 0)
+                    : _.round(
+                        record.memory?.allocated / record.memory?.total,
+                        0
+                      )
+                }
                 label={
                   <span className="flex-column">
                     <span>

src/pages/resources/components/workers.tsx

@@ -454,7 +454,16 @@ const Resources: React.FC = () => {
                           </span>
                           <ProgressBar
                             key={index}
-                            percent={_.round(item.memory?.utilization_rate, 0)}
+                            percent={
+                              item.memory?.used
+                                ? _.round(item.memory?.utilization_rate, 0)
+                                : _.round(
+                                    (item.memory?.allocated /
+                                      item.memory?.total) *
+                                      100,
+                                    0
+                                  )
+                            }
                             label={
                               <span className="flex-column">
                                 <span>