feat: display the version and backend service status on the page (#848)

### What problem does this PR solve?

#643 feat: display the version and backend service status on the page

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/user-setting/sidebar/index.less

@@ -1,3 +1,6 @@
 .sideBarWrapper {
   padding-top: 32px;
+  .version {
+    color: rgb(17, 206, 17);
+  }
 }

web/src/pages/user-setting/sidebar/index.tsx

@@ -1,7 +1,7 @@
 import { useSecondPathName } from '@/hooks/routeHook';
 import type { MenuProps } from 'antd';
-import { Menu } from 'antd';
-import React, { useMemo } from 'react';
+import { Flex, Menu } from 'antd';
+import React, { useEffect, useMemo } from 'react';
 import { useNavigate } from 'umi';
 import {
   UserSettingBaseKey,
@@ -10,7 +10,7 @@ import {
 } from '../constants';
 
 import { useTranslate } from '@/hooks/commonHooks';
-import { useLogout } from '@/hooks/userSettingHook';
+import { useFetchSystemVersion, useLogout } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
 type MenuItem = Required<MenuProps>['items'][number];
@@ -20,6 +20,11 @@ const SideBar = () => {
   const pathName = useSecondPathName();
   const logout = useLogout();
   const { t } = useTranslate('setting');
+  const { version, fetchSystemVersion } = useFetchSystemVersion();
+
+  useEffect(() => {
+    fetchSystemVersion();
+  }, [fetchSystemVersion]);
 
   function getItem(
     label: string,
@@ -32,7 +37,14 @@ const SideBar = () => {
       key,
       icon,
       children,
-      label: t(label),
+      label: (
+        <Flex justify={'space-between'}>
+          {t(label)}
+          <span className={styles.version}>
+            {label === 'system' && version}
+          </span>
+        </Flex>
+      ),
       type,
     } as MenuItem;
   }