style: body and side menu scrollbar style

plugin.ts

@@ -3,12 +3,13 @@ import { IApi } from '@umijs/max';
 export default (api: IApi) => {
   api.modifyHTML(($) => {
     const info = JSON.parse(process.env.VERSION || '{}');
-    const env = process.env.NODE_ENV;
+    const env = info.version ? 'production' : 'development';
+
+    $('html').attr('data-env', env);
+
     $('html').attr(
       'data-version',
-      env === 'production'
-        ? info.version || info.commitId
-        : `dev-${info.commitId}`
+      env === 'production' ? info.version || info.commitId : `${info.commitId}`
     );
     if (env === 'production') {
       $('script[src^="/js/umi"]').first?.().remove?.();

src/components/version-info/index.less

@@ -34,6 +34,21 @@
       justify-content: flex-start;
       font-size: var(--font-size-middle);
     }
+
+    .dev.val {
+      display: flex;
+      flex-direction: column;
+
+      .item {
+        display: flex;
+      }
+
+      .tl {
+        display: flex;
+        justify-content: flex-start;
+        width: 60px;
+      }
+    }
   }
 
   .upgrade {

src/components/version-info/index.tsx

@@ -10,6 +10,11 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
   const latestVersion = getAtomStorage(UpdateCheckAtom).latest_version;
   const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version;
 
+  const isProd =
+    document.documentElement.getAttribute('data-env') === 'production';
+
+  const uiVersion = document.documentElement.getAttribute('data-version');
+
   return (
     <div className="version-box">
       <div className="img">
@@ -17,14 +22,31 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
       </div>
 
       <div className="ver">
-        <span className="label">
-          {' '}
-          {intl.formatMessage({ id: 'common.footer.version' })}
-        </span>
-        <span className="val">
-          {getAtomStorage(GPUStackVersionAtom)?.version ||
-            getAtomStorage(GPUStackVersionAtom)?.git_commit}
-        </span>
+        {isProd && (
+          <span className="label">
+            {intl.formatMessage({ id: 'common.footer.version' })}
+          </span>
+        )}
+        {isProd ? (
+          <span className="val">
+            {getAtomStorage(GPUStackVersionAtom)?.version ||
+              getAtomStorage(GPUStackVersionAtom)?.git_commit}
+          </span>
+        ) : (
+          <span className="val dev">
+            <span className="item">
+              <span className="tl">
+                {' '}
+                {intl.formatMessage({ id: 'common.footer.version.server' })}
+              </span>
+              {getAtomStorage(GPUStackVersionAtom)?.git_commit}
+            </span>
+            <span className="item">
+              <span className="tl">UI</span>
+              {uiVersion}
+            </span>
+          </span>
+        )}
       </div>
       {getAtomStorage(userAtom)?.is_admin && (
         <div className="upgrade">

src/layouts/index.tsx

@@ -5,6 +5,7 @@ import ShortCuts, {
   modalConfig as ShortCutsConfig
 } from '@/components/short-cuts';
 import VersionInfo, { modalConfig } from '@/components/version-info';
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { logout } from '@/pages/login/apis';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
@@ -23,12 +24,13 @@ import {
 } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import { useAtom } from 'jotai';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import Exception from './Exception';
 import './Layout.css';
 import { LogoIcon, SLogoIcon } from './Logo';
 import { getRightRenderContent } from './rightRender';
 import { patchRoutes } from './runtime';
+
 const loginPath = '/login';
 
 type InitialStateType = {
@@ -87,6 +89,8 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 };
 
 export default (props: any) => {
+  const { initialize } = useOverlayScroller();
+  const { initialize: initializeMenu } = useOverlayScroller();
   const [userInfo] = useAtom(userAtom);
   const [version] = useAtom(GPUStackVersionAtom);
   const [updateCheck] = useAtom(UpdateCheckAtom);
@@ -180,6 +184,16 @@ export default (props: any) => {
     );
   }, [updateCheck, version, initialState]);
 
+  useEffect(() => {
+    initialize(document.body);
+  }, [initialize]);
+
+  useEffect(() => {
+    initializeMenu(
+      document.querySelector('.ant-menu.ant-menu-root')?.parentElement
+    );
+  }, [initializeMenu]);
+
   const renderMenuHeader = useCallback(
     (logo, title) => {
       return (

src/locales/en-US/users.ts

@@ -27,5 +27,5 @@ export default {
   'users.password.confirm.error': 'The two passwords entered do not match.',
   'users.login.title': 'Log in to {name}',
   'users.version.islatest': '{version} is the latest version',
-  'users.version.update': 'Version {version} is available for update'
+  'users.version.update': 'Version {version} is available'
 };