From 12c44f1f774197a7a15112c60de3bb9f3d270eaf Mon Sep 17 00:00:00 2001
From: zefa <zefa@dian.so>
Date: Mon, 15 Jul 2024 20:43:31 +0800
Subject: [PATCH] perf: navi menu & add motion config for antd menu

---
 src/layouts/dashboard/nav-horizontal.tsx | 8 +++++---
 src/layouts/dashboard/nav.tsx            | 8 +++++---
 src/theme/antd/theme.ts                  | 2 ++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/layouts/dashboard/nav-horizontal.tsx b/src/layouts/dashboard/nav-horizontal.tsx
index 101bc405..b2bf72bf 100644
--- a/src/layouts/dashboard/nav-horizontal.tsx
+++ b/src/layouts/dashboard/nav-horizontal.tsx
@@ -1,5 +1,5 @@
 import { Menu, MenuProps } from 'antd';
-import { useState, useEffect, CSSProperties } from 'react';
+import { useState, useEffect, CSSProperties, useMemo } from 'react';
 import { useNavigate, useMatches, useLocation } from 'react-router-dom';
 
 import { useRouteToMenuFn, usePermissionRoutes, useFlattenedRoutes } from '@/router/hooks';
@@ -17,8 +17,10 @@ export default function NavHorizontal() {
 
   const routeToMenuFn = useRouteToMenuFn();
   const permissionRoutes = usePermissionRoutes();
-  const menuRoutes = menuFilter(permissionRoutes);
-  const menuList = routeToMenuFn(menuRoutes);
+  const menuList = useMemo(() => {
+    const menuRoutes = menuFilter(permissionRoutes);
+    return routeToMenuFn(menuRoutes);
+  }, [routeToMenuFn, permissionRoutes]);
 
   // 获取拍平后的路由菜单
   const flattenedRoutes = useFlattenedRoutes();
diff --git a/src/layouts/dashboard/nav.tsx b/src/layouts/dashboard/nav.tsx
index bc2efe52..60aa1d31 100644
--- a/src/layouts/dashboard/nav.tsx
+++ b/src/layouts/dashboard/nav.tsx
@@ -2,7 +2,7 @@ import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
 import { Menu, MenuProps } from 'antd';
 import Color from 'color';
 import { m } from 'framer-motion';
-import { CSSProperties, useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { useLocation, useMatches, useNavigate } from 'react-router-dom';
 
 import MotionContainer from '@/components/animate/motion-container';
@@ -40,8 +40,10 @@ export default function Nav(props: Props) {
 
   const routeToMenuFn = useRouteToMenuFn();
   const permissionRoutes = usePermissionRoutes();
-  const menuRoutes = menuFilter(permissionRoutes);
-  const menuList = routeToMenuFn(menuRoutes);
+  const menuList = useMemo(() => {
+    const menuRoutes = menuFilter(permissionRoutes);
+    return routeToMenuFn(menuRoutes);
+  }, [routeToMenuFn, permissionRoutes]);
 
   // 获取拍平后的路由菜单
   const flattenedRoutes = useFlattenedRoutes();
diff --git a/src/theme/antd/theme.ts b/src/theme/antd/theme.ts
index 0a8dbc2c..e96d6a51 100644
--- a/src/theme/antd/theme.ts
+++ b/src/theme/antd/theme.ts
@@ -27,6 +27,8 @@ const customComponentConfig: ThemeConfig['components'] = {
     fontSize: 14,
     colorFillAlter: 'transparent',
     itemColor: 'rgb(145, 158, 171)',
+    motionDurationMid: '0.125s',
+    motionDurationSlow: '0.125s',
   },
 };