优化：菜单栏问题修复

package.json

@@ -17,17 +17,17 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@ant-design/icons": "^5.2.6",
-    "@reduxjs/toolkit": "^1.9.2",
+    "@reduxjs/toolkit": "^2.0.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
     "antd": "^5.12.2",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.7",
+    "axios": "^1.6.2",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "js-base64": "^3.7.3",
-    "js-cookie": "^3.0.1",
+    "js-base64": "^3.7.5",
+    "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
@@ -36,10 +36,10 @@
     "prop-types": "^15.8.1",
     "qs": "^6.10.3",
     "query-string": "^8.1.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.21.0",
     "react-viewer": "^3.2.2",
     "sort-by": "^1.2.0",
     "wangeditor": "^4.7.15",
@@ -47,28 +47,28 @@
     "big.js": "^6.2.1"
   },
   "devDependencies": {
-    "@types/file-saver": "^2.0.5",
-    "@types/js-cookie": "^3.0.1",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^20.1.3",
+    "@types/file-saver": "^2.0.7",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "@types/react-redux": "^7.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "@vitejs/plugin-react": "^1.3.0",
+    "@types/react-redux": "^7.1.33",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "@types/big.js": "^6.2.2",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "prettier": "^2.6.2",
-    "sass": "^1.62.0",
-    "typescript": "^4.6.3",
-    "vite": "^4.3.9",
-    "vite-tsconfig-paths": "^3.5.0"
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.1.1",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.2"
   }
 }

src/components/layout/menu/index.scss

 .sider-view {
   .menu-view {
-    .menu-tag,.menu-subTag{
+    .menu-tag{
       position: absolute;
       top: calc((100% - 16px) / 2);
       right: 0;
@@ -16,5 +16,19 @@
       color: #FFFFFF;
       transform: scale(0.8);
     }
+    .menu-subTag{
+      position: absolute;
+      right: 0;
+      background: #FF2741;
+      border-radius: 20px;
+      text-align: center;
+      line-height: 16px;
+      box-sizing: border-box;
+      padding: 0 5px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #FFFFFF;
+      transform: scale(0.8);
+    }
   }
 }

src/components/layout/menu/index.tsx

@@ -16,7 +16,7 @@ const menuKeyMap = [
   { key: 230, label: 'pilotMessage' },
   { key: 240, label: 'joinApplyMessage' },
   { key: 430, label: 'orderMessage' },
-  { key: 1020, label: 'dynamicMessage' },
+  { key: 1010, label: 'dynamicMessage' },
 ];
 
 export function MenuView() {
@@ -77,12 +77,20 @@ export function MenuView() {
     if (res && res.code === '200') {
       if (!res.result) return;
       const arr = Object.entries(res.result);
-      setItemsAlert(
-        arr.map((i) => {
-          const key = menuKeyMap?.find((k) => k.label === i[0])?.key || 0;
-          return { key, number: i[1] };
-        }),
-      );
+      const list = arr.map((i) => {
+        const key = menuKeyMap?.find((k) => k.label === i[0])?.key || 0;
+        return { key, number: i[1] };
+      });
+      const brr = [...new Set(list.map((i) => Math.floor(i.key / 100) * 100))].map((i) => {
+        return {
+          key: i,
+          number: list
+            .filter((n) => Math.floor(n.key / 100) * 100 === i)
+            .reduce((a, b) => a + b.number, 0),
+        };
+      });
+      // console.log('红点 --->', brr);
+      setItemsAlert([...list, ...brr]);
     }
   };
   // 组件挂载
@@ -102,6 +110,7 @@ export function MenuView() {
     setOpenKeys([getRoutePid(routerList, location.pathname).toString()]);
     // 设置当前选中的项目的subMenu
     setSelectedKeys([getRouteID(routerList, location.pathname).toString()]);
+    // 获取展示的红点
     getMessageNumber().then();
   }, [location.pathname]);
   return (
@@ -125,18 +134,21 @@ export function MenuView() {
       >
         {items?.map((i: any) =>
           i?.children ? (
-            <Menu.SubMenu title={i.label} key={i.key} icon={i.icon}>
-              {i?.children?.map((n: any) => (
-                <Menu.Item title={n.label} key={n.key} icon={n.icon}>
-                  {n.label}
-                  {!!getTag(n.key) && <div className={'menu-subTag'}>{getTag(n.key)}</div>}
-                </Menu.Item>
-              ))}
-            </Menu.SubMenu>
+            <Menu.ItemGroup key={i.key}>
+              {!!getTag(i.key) && <div className={'menu-subTag'}>{getTag(i.key)}</div>}
+              <Menu.SubMenu title={i.label} key={i.key} icon={i.icon}>
+                {i?.children?.map((n: any) => (
+                  <Menu.Item title={n.label} key={n.key} icon={n.icon}>
+                    {n.label}
+                    {!!getTag(n.key) && <div className={'menu-tag'}>{getTag(n.key)}</div>}
+                  </Menu.Item>
+                ))}
+              </Menu.SubMenu>
+            </Menu.ItemGroup>
           ) : (
             <Menu.Item title={i.label} key={i.key} icon={i.icon}>
               {i.label}
-              {!!getTag(i.key) && <div className={'menu-subTag'}>{getTag(i.key)}</div>}
+              {!!getTag(i.key) && <div className={'menu-tag'}>{getTag(i.key)}</div>}
             </Menu.Item>
           ),
         )}