fix: 修复侧边导航栏需要刷新才出现选项的问题

web/src/components/SiderBar.js

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useMemo, useState} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {UserContext} from '../context/User';
 
@@ -21,86 +21,6 @@ import {
 import {Nav, Avatar, Dropdown, Layout} from '@douyinfe/semi-ui';
 
 // HeaderBar Buttons
-let headerButtons = [
-    {
-        text: '首页',
-        itemKey: 'home',
-        to: '/',
-        icon: <IconHome/>
-    },
-    {
-        text: '渠道',
-        itemKey: 'channel',
-        to: '/channel',
-        icon: <IconLayers/>,
-        className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
-    },
-    {
-        text: '聊天',
-        itemKey: 'chat',
-        to: '/chat',
-        icon: <IconComment />,
-        className: localStorage.getItem('chat_link')?'semi-navigation-item-normal':'tableHiddle',
-    },
-    {
-        text: '令牌',
-        itemKey: 'token',
-        to: '/token',
-        icon: <IconKey/>
-    },
-    {
-        text: '兑换码',
-        itemKey: 'redemption',
-        to: '/redemption',
-        icon: <IconGift/>,
-        className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
-    },
-    {
-        text: '钱包',
-        itemKey: 'topup',
-        to: '/topup',
-        icon: <IconCreditCard/>
-    },
-    {
-        text: '用户管理',
-        itemKey: 'user',
-        to: '/user',
-        icon: <IconUser/>,
-        className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
-    },
-    {
-        text: '日志',
-        itemKey: 'log',
-        to: '/log',
-        icon: <IconHistogram/>
-    },
-    {
-        text: '数据看版',
-        itemKey: 'detail',
-        to: '/detail',
-        icon: <IconCalendarClock />,
-        className: localStorage.getItem('enable_data_export') === 'true'?'semi-navigation-item-normal':'tableHiddle',
-    },
-    {
-        text: '绘图',
-        itemKey: 'midjourney',
-        to: '/midjourney',
-        icon: <IconImage/>,
-        className: localStorage.getItem('enable_drawing') === 'true'?'semi-navigation-item-normal':'tableHiddle',
-    },
-    {
-        text: '设置',
-        itemKey: 'setting',
-        to: '/setting',
-        icon: <IconSetting/>
-    },
-    // {
-    //     text: '关于',
-    //     itemKey: 'about',
-    //     to: '/about',
-    //     icon: <IconAt/>
-    // }
-];
 
 const SiderBar = () => {
     const [userState, userDispatch] = useContext(UserContext);
@@ -109,6 +29,87 @@ const SiderBar = () => {
     const [showSidebar, setShowSidebar] = useState(false);
     const systemName = getSystemName();
     const logo = getLogo();
+    const headerButtons = useMemo(() => [
+        {
+            text: '首页',
+            itemKey: 'home',
+            to: '/',
+            icon: <IconHome/>
+        },
+        {
+            text: '渠道',
+            itemKey: 'channel',
+            to: '/channel',
+            icon: <IconLayers/>,
+            className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
+        },
+        {
+            text: '聊天',
+            itemKey: 'chat',
+            to: '/chat',
+            icon: <IconComment />,
+            className: localStorage.getItem('chat_link')?'semi-navigation-item-normal':'tableHiddle',
+        },
+        {
+            text: '令牌',
+            itemKey: 'token',
+            to: '/token',
+            icon: <IconKey/>
+        },
+        {
+            text: '兑换码',
+            itemKey: 'redemption',
+            to: '/redemption',
+            icon: <IconGift/>,
+            className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
+        },
+        {
+            text: '钱包',
+            itemKey: 'topup',
+            to: '/topup',
+            icon: <IconCreditCard/>
+        },
+        {
+            text: '用户管理',
+            itemKey: 'user',
+            to: '/user',
+            icon: <IconUser/>,
+            className: isAdmin()?'semi-navigation-item-normal':'tableHiddle',
+        },
+        {
+            text: '日志',
+            itemKey: 'log',
+            to: '/log',
+            icon: <IconHistogram/>
+        },
+        {
+            text: '数据看版',
+            itemKey: 'detail',
+            to: '/detail',
+            icon: <IconCalendarClock />,
+            className: localStorage.getItem('enable_data_export') === 'true'?'semi-navigation-item-normal':'tableHiddle',
+        },
+        {
+            text: '绘图',
+            itemKey: 'midjourney',
+            to: '/midjourney',
+            icon: <IconImage/>,
+            className: localStorage.getItem('enable_drawing') === 'true'?'semi-navigation-item-normal':'tableHiddle',
+        },
+        {
+            text: '设置',
+            itemKey: 'setting',
+            to: '/setting',
+            icon: <IconSetting/>
+        },
+        // {
+        //     text: '关于',
+        //     itemKey: 'about',
+        //     to: '/about',
+        //     icon: <IconAt/>
+        // }
+    ], [localStorage.getItem('enable_data_export'), localStorage.getItem('enable_drawing'), localStorage.getItem('chat_link'), isAdmin()]);
+
 
     async function logout() {
         setShowSidebar(false);