optimize(projects): optimize code

Author: Ohh-889

src/components/advanced/DragContent.tsx

@@ -14,6 +14,7 @@ const reorder = (list: AntDesign.TableColumnCheck[], startIndex: number, endInde
   result[endIndex] = list[startIndex];
   return result;
 };
+
 const DragContent: FC<Props> = ({ columns, setColumnChecks }) => {
   const dragEnd: OnDragEndResponder = result => {
     if (!result.destination) {

src/layouts/blank-layout/index.tsx

@@ -1,5 +1,5 @@
 import GlobalContent from '../modules/global-content';
 
 export function Component() {
-  return <GlobalContent showPadding={true} />;
+  return <GlobalContent closePadding={true} />;
 }

src/layouts/modules/global-breadcrumb/index.tsx

@@ -1,15 +1,25 @@
 import { Breadcrumb } from 'antd';
-import { createElement } from 'react';
+import { cloneElement } from 'react';
 import type { MenuInfo } from 'rc-menu/lib/interface';
-import type { ItemType, MenuItemType, SubMenuType } from 'antd/es/menu/interface';
+import type { MenuItemType } from 'antd/es/menu/interface';
 import type { BreadcrumbProps } from 'antd';
-import type { Route } from '@sa/simple-router';
 import { useRouterPush } from '@/hooks/common/routerPush';
+import { getBreadcrumbsByRoute } from './shared';
+
+function BreadcrumbContent({ label, icon }: { label: JSX.Element; icon: JSX.Element }) {
+  return (
+    <div className="i-flex-y-center align-middle">
+      {cloneElement(icon, { className: 'mr-4px text-icon', ...icon.props })}
+      {label}
+    </div>
+  );
+}
 
 const GlobalBreadcrumb: FC<Omit<BreadcrumbProps, 'items'>> = memo(props => {
-  const { allMenus: menus } = useMixMenuContext();
-  const route = useRoute();
+  const { allMenus: menus, route } = useMixMenuContext();
+
   const routerPush = useRouterPush();
+
   const breadcrumb = getBreadcrumbsByRoute(route, menus);
 
   function handleClickMenu(menuInfo: MenuInfo) {
@@ -46,47 +56,4 @@ const GlobalBreadcrumb: FC<Omit<BreadcrumbProps, 'items'>> = memo(props => {
   );
 });
 
-function BreadcrumbContent({ label, icon }: { label: JSX.Element; icon: JSX.Element }) {
-  return (
-    <div className="i-flex-y-center align-middle">
-      {createElement(icon.type, { className: 'mr-4px text-icon', ...icon.props })}
-      {label}
-    </div>
-  );
-}
-
-function removeChildren(menu: SubMenuType): Omit<ItemType, 'children'> {
-  const { children: _, ...rest } = menu;
-
-  return {
-    ...rest
-  };
-}
-// eslint-disable-next-line max-params
-function getBreadcrumbsByRoute(
-  route: Route,
-  menus: ItemType[],
-  index: number = 0,
-  breadcrumbs: Extract<ItemType, MenuItemType | SubMenuType>[] = []
-) {
-  const currentMenu = menus.find(item => item?.key === route.matched[index]?.name) as SubMenuType | undefined;
-
-  if (currentMenu) {
-    const flattenedChildren = currentMenu.children?.map(item => {
-      if (item && 'children' in item) {
-        return removeChildren(item as SubMenuType);
-      }
-      return item;
-    }) as MenuItemType[];
-
-    breadcrumbs.push({ ...currentMenu, children: flattenedChildren });
-
-    if (index < route.matched.length - 1) {
-      getBreadcrumbsByRoute(route, currentMenu.children || [], index + 1, breadcrumbs);
-    }
-  }
-
-  return breadcrumbs;
-}
-
 export default GlobalBreadcrumb;

src/layouts/modules/global-breadcrumb/shared.ts

@@ -0,0 +1,36 @@
+import type { Route } from '@sa/simple-router';
+import type { ItemType, MenuItemType, SubMenuType } from 'antd/es/menu/interface';
+
+function removeChildren(menu: SubMenuType): Omit<ItemType, 'children'> {
+  const { children: _, ...rest } = menu;
+
+  return {
+    ...rest
+  };
+}
+// eslint-disable-next-line max-params
+export function getBreadcrumbsByRoute(
+  route: Route,
+  menus: ItemType[],
+  index: number = 0,
+  breadcrumbs: Extract<ItemType, MenuItemType | SubMenuType>[] = []
+) {
+  const currentMenu = menus.find(item => item?.key === route.matched[index]?.name) as SubMenuType | undefined;
+
+  if (currentMenu) {
+    const flattenedChildren = currentMenu.children?.map(item => {
+      if (item && 'children' in item) {
+        return removeChildren(item as SubMenuType);
+      }
+      return item;
+    }) as MenuItemType[];
+
+    breadcrumbs.push({ ...currentMenu, children: flattenedChildren });
+
+    if (index < route.matched.length - 1) {
+      getBreadcrumbsByRoute(route, currentMenu.children || [], index + 1, breadcrumbs);
+    }
+  }
+
+  return breadcrumbs;
+}

src/layouts/modules/global-content/index.tsx

@@ -7,7 +7,7 @@ import { getReloadFlag, setContentXScrollable } from '@/store/slice/app';
 
 interface Props {
   /** Show padding for content */
-  showPadding?: boolean;
+  closePadding?: boolean;
 }
 
 function resetScroll() {
@@ -16,7 +16,7 @@ function resetScroll() {
   el?.scrollTo({ left: 0, top: 0 });
 }
 
-const GlobalContent: FC<Props> = memo(({ showPadding }) => {
+const GlobalContent: FC<Props> = memo(({ closePadding }) => {
   const currentOutlet = useOutlet();
   const location = useLocation();
   const reloadFlag = useAppSelector(getReloadFlag);
@@ -26,7 +26,7 @@ const GlobalContent: FC<Props> = memo(({ showPadding }) => {
   return (
     <SwitchTransition mode="out-in">
       <CSSTransition
-        key={reloadFlag ? location.pathname : 'reload-page'}
+        key={reloadFlag ? location.key : 'reload-page'}
         nodeRef={nodeRef}
         timeout={300}
         onExit={() => dispatch(setContentXScrollable(true))}
@@ -36,7 +36,7 @@ const GlobalContent: FC<Props> = memo(({ showPadding }) => {
         unmountOnExit
       >
         <div
-          className={ClassNames('h-full flex-grow bg-layout ', { 'p-16px': !showPadding })}
+          className={ClassNames('h-full flex-grow bg-layout ', { 'p-16px': !closePadding })}
           ref={nodeRef}
         >
           {reloadFlag && currentOutlet}

src/layouts/modules/global-footer/index.tsx

@@ -1,4 +1,5 @@
 import DarkModeContainer from '@/components/stateless/common/DarkModeContainer';
+
 const GlobalFooter = memo(() => {
   return (
     <DarkModeContainer className="h-full flex-center">

src/layouts/modules/global-header/index.tsx

@@ -31,6 +31,7 @@ const GlobalHeader: FC<Props> = memo(({ showLogo, showMenuToggler, showMenu, isM
           style={{ width: `${settings.sider.width}px` }}
         />
       )}
+
       {showMenuToggler && <MenuToggler />}
 
       <div