feat: 推广大使按钮添加判断条件

src/components/Header/index.tsx

@@ -90,6 +90,7 @@ const Header = () => {
   const [selectEl, setSelectEl] = useState<null | HTMLElement>(null);
   const [toolList, setToolList] = useState<any[]>(TOOLKIT_LIST);
   const [user, setUser] = useState<any>(null);
+  const [promotionInfo, setPromotionInfo] = useState<any>(null);
   const [keyword, setKeyword] = useState('');
   const open = Boolean(anchorEl);
 
@@ -113,6 +114,16 @@ const Header = () => {
         }
       });
     });
+
+    fetch('/api/v1/promotion_ambassador/info', {
+      credentials: 'include',
+    }).then((res) => {
+      res.json().then((data) => {
+        if (data.code === 0) {
+          setPromotionInfo(data.data);
+        }
+      });
+    });
   }, []);
 
   const handleSearch = (k: string) => {
@@ -441,7 +452,7 @@ const Header = () => {
               >
                 工作台
               </Button>
-              <LoggedInView user={user} />
+              <LoggedInView user={user} promotionInfo={promotionInfo} />
             </>
           ) : (
             <>

src/components/Header/loggedInView.tsx

@@ -8,7 +8,7 @@ export interface LoggedInProps {
   verified: boolean;
 }
 
-const LoggedInView = ({ user }: any) => {
+const LoggedInView = ({ user, promotionInfo }: any) => {
   return (
     <Tooltip
       placement='bottom-end'
@@ -30,7 +30,11 @@ const LoggedInView = ({ user }: any) => {
         },
       }}
       title={
-        <ProfilePanel userInfo={user} verified={user.is_certified === 1} />
+        <ProfilePanel
+          userInfo={user}
+          verified={user.is_certified === 1}
+          promotionInfo={promotionInfo}
+        />
       }
     >
       <Box>

src/components/Header/profilePanel.tsx

@@ -12,7 +12,7 @@ import {
   ListItemText,
   ListItemIcon,
 } from '@mui/material';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import {
   Badge,
@@ -25,33 +25,18 @@ import {
   SpaceIcon,
   OrderIcon,
   PersonIcon,
-  PromotionIcon,
   LogoutIcon,
+  PromotionIcon,
 } from './components';
 import alert from '@/components/Alert';
 export interface ProfilePanelProps {
   userInfo: any | null;
   verified: boolean;
+  promotionInfo?: any;
 }
 
 const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
-  const { userInfo, verified } = props;
-  const handleLogout = () => {
-    fetch('/api/v1/user/signout', {
-      credentials: 'include',
-    }).then(() => {
-      window.location.reload();
-    });
-  };
-
-  const toLink = (link: string) => () => {
-    window.open(link, '_target');
-  };
-
-  const onCopy = useCallback(() => {
-    alert.success('用户ID已复制到剪贴板');
-  }, []);
-
+  const { userInfo, verified, promotionInfo } = props;
   const OPT_LIST = [
     {
       name: '个人中心',
@@ -63,17 +48,42 @@ const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
       icon: <SpaceIcon sx={{ fontSize: 16 }} />,
       link: '/console/space/base',
     },
-    {
-      name: '推广大使',
-      icon: <PromotionIcon sx={{ fontSize: 16 }} />,
-      link: '/console/personal/promotion',
-    },
+
     {
       name: '订单管理',
       icon: <OrderIcon sx={{ fontSize: 16 }} />,
       link: '/console/space/order',
     },
   ];
+  const [optList, setOptList] = useState([...OPT_LIST]);
+  const handleLogout = () => {
+    fetch('/api/v1/user/signout', {
+      credentials: 'include',
+    }).then(() => {
+      window.location.reload();
+    });
+  };
+
+  const toLink = (link: string) => () => {
+    window.open(link, '_target');
+  };
+
+  const onCopy = useCallback(() => {
+    alert.success('用户ID已复制到剪贴板');
+  }, []);
+
+  useEffect(() => {
+    if (promotionInfo?.referral_code) {
+      if (optList.findIndex((item) => item.name === '推广大使') === -1) {
+        optList.splice(2, 0, {
+          name: '推广大使',
+          icon: <PromotionIcon sx={{ fontSize: 16 }} />,
+          link: '/console/personal/promotion',
+        });
+        setOptList([...optList]);
+      }
+    }
+  }, [promotionInfo]);
 
   return (
     <InfoCard>
@@ -173,7 +183,7 @@ const ProfilePanel: React.FC<ProfilePanelProps> = (props) => {
           bgcolor: 'background.paper',
         }}
       >
-        {OPT_LIST.map((item) => {
+        {optList.map((item) => {
           return (
             <ListItem
               key={item.name}