Feat: Add a notification logic to the team member invite feature #6610 (#6729)

### What problem does this PR solve?
Feat: Add a notification logic to the team member invite feature #6610

### Type of change


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

web/src/layouts/components/right-toolbar/index.tsx

@@ -2,14 +2,16 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { DownOutlined, GithubOutlined } from '@ant-design/icons';
 import { Dropdown, MenuProps, Space } from 'antd';
 import camelCase from 'lodash/camelCase';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import User from '../user';
 
 import { useTheme } from '@/components/theme-provider';
 import { LanguageList, LanguageMap } from '@/constants/common';
 import { useChangeLanguage } from '@/hooks/logic-hooks';
-import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
+import { useFetchUserInfo, useListTenant } from '@/hooks/user-setting-hooks';
-import { CircleHelp, MoonIcon, SunIcon } from 'lucide-react';
+import { TenantRole } from '@/pages/user-setting/constants';
+import { BellRing, CircleHelp, MoonIcon, SunIcon } from 'lucide-react';
+import { useNavigate } from 'umi';
 import styled from './index.less';
 
 const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
@@ -32,6 +34,7 @@ const RightToolBar = () => {
   const { t } = useTranslate('common');
   const changeLanguage = useChangeLanguage();
   const { setTheme, theme } = useTheme();
+  const navigate = useNavigate();
 
   const {
     data: { language = 'English' },
@@ -41,6 +44,12 @@ const RightToolBar = () => {
     changeLanguage(key);
   };
 
+  const { data } = useListTenant();
+
+  const showBell = useMemo(() => {
+    return data.some((x) => x.role === TenantRole.Invite);
+  }, [data]);
+
   const items: MenuProps['items'] = LanguageList.map((x) => ({
     key: x,
     label: <span>{LanguageMap[x as keyof typeof LanguageMap]}</span>,
@@ -55,6 +64,10 @@ const RightToolBar = () => {
     setTheme('dark');
   }, [setTheme]);
 
+  const handleBellClick = useCallback(() => {
+    navigate('/user-setting/team');
+  }, [navigate]);
+
   return (
     <div className={styled.toolbarWrapper}>
       <Space wrap size={16}>
@@ -77,6 +90,14 @@ const RightToolBar = () => {
             <SunIcon onClick={onSunClick} size={20} />
           )}
         </Circle>
+        {showBell && (
+          <Circle>
+            <div className="relative" onClick={handleBellClick}>
+              <BellRing className="size-4 " />
+              <span className="absolute size-1 rounded -right-1 -top-1 bg-red-600"></span>
+            </div>
+          </Circle>
+        )}
         <User></User>
       </Space>
     </div>