Merge branch 'develop'

kustomization/overlays/dev/kustomization.yaml

@@ -14,4 +14,4 @@ patches:
 images:
 - name: REGISTRY/NAMESPACE/IMAGE:TAG
   newName: mmc-registry.cn-shenzhen.cr.aliyuncs.com/sharefly-dev/admin
-  newTag: df72cd35de4488913d6539c66445029f4bc333d9
+  newTag: 6171c93b54a3968b47f3ee48ad4a730a31976122

package.json

@@ -16,11 +16,11 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@ant-design/icons": "^5.0.1",
+    "@ant-design/icons": "^5.2.6",
     "@reduxjs/toolkit": "^1.9.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
-    "antd": "^5.4.2",
+    "antd": "^5.12.2",
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.3",

src/api/interface/commonType.ts

@@ -178,3 +178,13 @@ type locationType = {
   childInfo: locationType[];
 };
 export type getSecondDistrictInfoType = InterFunction<any, locationType[]>;
+// 后台——消息提示
+export type getMessageType = InterFunction<
+  any,
+  {
+    pilotMessage: number;
+    joinApplyMessage: number;
+    orderMessage: number;
+    dynamicMessage: number;
+  }
+>;

src/api/modules/common.ts

@@ -5,6 +5,7 @@ import {
   batchRemoveBannerInfo,
   exchangeBannerInfo,
   getLoginInfoType,
+  getMessageType,
   getSecondDistrictInfoType,
   getUserAccountByPhoneNumType,
   insertBannerInfo,
@@ -89,4 +90,7 @@ export class CommonAPI {
   //  获取地域
   static getSecondDistrictInfo: getSecondDistrictInfoType = () =>
     axios.get('/pms/appDevice/getSecondDistrictInfo');
+
+  // 后台——消息提示
+  static getMessage: getMessageType = () => axios.get('/userapp/back-user/getMessage');
 }

src/components/layout/menu/index.scss

+.sider-view {
+  .menu-view {
+    .menu-tag,.menu-subTag{
+      position: absolute;
+      top: calc((100% - 16px) / 2);
+      right: 0;
+      height: 16px;
+      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

@@ -6,12 +6,22 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { GetRouteByID, getRouteID, getRoutePid } from '~/utils/router';
 import { useSelector } from 'react-redux';
 import { authRouterList, routerItem } from '~/router';
+import './index.scss';
+import { CommonAPI } from '~/api';
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-const { Sider } = Layout;
+// 消息字段转换菜单key
+const menuKeyMap = [
+  { key: 230, label: 'pilotMessage' },
+  { key: 240, label: 'joinApplyMessage' },
+  { key: 430, label: 'orderMessage' },
+  { key: 1020, label: 'dynamicMessage' },
+];
 
 export function MenuView() {
+  // 菜单栏提醒
+  const [itemsAlert, setItemsAlert] = useState<{ key: number; number: number }[]>([]);
   // 侧边栏是否折叠状态
   const collapsedActive = useSelector((state: any) => state.Menu.collapsedActive);
   // 菜单路由列表
@@ -57,15 +67,34 @@ export function MenuView() {
     }) as MenuItem[];
     return list?.filter((i) => i !== undefined) || [];
   };
+  // 获取当前菜单是否有tag
+  const getTag = (id: number) => {
+    return itemsAlert?.find((i) => i.key === id)?.number;
+  };
+  // 获取侧边栏的数量
+  const getMessageNumber = async () => {
+    const res = await CommonAPI.getMessage();
+    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] };
+        }),
+      );
+    }
+  };
   // 组件挂载
   useEffect(() => {
     // 设置侧边栏数据
-    authRouterList().then((value) => {
+    authRouterList().then(async (value) => {
       // 除了数据看板，其他没有子项的菜单全部过滤掉
       const arr = getItem(value)?.filter((i: any) => i?.key === 100) || [];
       const brr = getItem(value)?.filter((i: any) => i?.children?.length) || [];
       // 设置要展示的菜单列表
       setItems([...arr, ...brr]);
+      await getMessageNumber();
     });
   }, []);
 
@@ -76,7 +105,8 @@ export function MenuView() {
     setSelectedKeys([getRouteID(routerList, location.pathname).toString()]);
   }, [location.pathname]);
   return (
-    <Sider
+    <Layout.Sider
+      className={'sider-view'}
       style={{ paddingTop: '50px' }}
       collapsible
       width={180}
@@ -84,14 +114,26 @@ export function MenuView() {
       collapsed={collapsedActive}
     >
       <Menu
+        className={'menu-view'}
         openKeys={openKeys}
         selectedKeys={selectedKeys}
         onClick={onSelect}
         onOpenChange={onOpenChange}
         mode='inline'
-        items={items}
+        // items={items}
         style={{ backgroundColor: ' #F3F6FF ' }}
-      />
-    </Sider>
+      >
+        {items?.map((i: any) => (
+          <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>
+    </Layout.Sider>
   );
 }