perf: navi menu & add motion config for antd menu

d3george · Jul 15, 2024 · 12c44f1 · 12c44f1
1 parent e7c8c92
commit 12c44f1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -27,6 +27,8 @@ const customComponentConfig: ThemeConfig['components'] = {
     fontSize: 14,
     colorFillAlter: 'transparent',
     itemColor: 'rgb(145, 158, 171)',
+    motionDurationMid: '0.125s',
+    motionDurationSlow: '0.125s',
   },
 };