feat: tab 和 左侧菜单同步

packages/app/src/pages/home/main/index.tsx

@@ -36,7 +36,6 @@ const Main: FC = function () {
         collisionDetection={closestCenter}
         onDragEnd={onDragEnd}
         sensors={[sensor]}
-        autoScroll
       >
         <SortableContext
           items={tabs.map(val => val.key)}

packages/app/src/pages/home/main/tab/item/index.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  padding: 10px 8px;
+  padding: 10px 16px;
   font-size: 14px;
   cursor: pointer;
 

packages/app/src/pages/home/main/tab/item/index.tsx

@@ -5,7 +5,7 @@ import {useStore} from 'zustand';
 import classNames from 'classnames';
 import {useSortable} from '@dnd-kit/sortable';
 import {ShowContextMenuParams} from 'react-contexify';
-import {CloseOne} from '@icon-park/react';
+import {CloseSmall} from '@icon-park/react';
 import {useContextSection} from '@hooks';
 import {context} from '@pages/home/context';
 import {Modal} from 'antd';
@@ -63,8 +63,8 @@ const TabItem: FC<Props> = function ({id, label, onContentMenu}) {
     >
       {label}
       {id !== '-1' && (
-        <CloseOne
-          theme='filled'
+        <CloseSmall
+          theme='outline'
           size='14'
           fill={id === activeKey ? 'var(--primary-color)' : '#ccc'}
           onClick={onClose}

packages/app/src/pages/home/menu/hooks.tsx

@@ -1,12 +1,11 @@
 import {getRoleMenu} from '@apis';
 import {useContextSection} from '@hooks';
 import {HOME_PATH} from '@routes';
-import {menuStore} from '@stores';
+import {menuStore, tabStore} from '@stores';
 import {useQuery} from '@tanstack/react-query';
-import {MENU_COLLAPSED_STORAGE, ParseMenuType, sortMenu} from '@utils';
+import {MENU_COLLAPSED_STORAGE, sortMenu} from '@utils';
 import {useBoolean, useLocalStorageState} from 'ahooks';
 import {useEffect, useState} from 'react';
-import {useLocation, useNavigate} from 'react-router-dom';
 import {useStore} from 'zustand';
 import {context} from '../context';
 
@@ -47,78 +46,44 @@ export function useMenu() {
   return data!;
 }
 
-export function useOpenKey(menus: ParseMenuType[]) {
-  const navigate = useNavigate();
-  const {pathname} = useLocation();
-  const pages = useStore(menuStore, state => state.menus);
-
-  const [current, setCurrent] = useState<string[]>(function () {
-    const firstKey = menus[0]?.children
-      ? menus[0].children[0].key
-      : menus[0].key;
-
-    return [firstKey];
-  });
-  const [openKeys, setOpenKey] = useState<string[]>(current);
+export function useMenuState() {
+  const [openKeys, setOpenKey] = useState<string[]>(['-1']);
 
   function onOpenChange(keys: string[]) {
     setOpenKey([keys[keys.length - 1]]);
   }
 
+  const pages = useStore(menuStore, state => state.menus);
+  const activeKey = useStore(tabStore, state => state.key);
+  const dispatch = useContextSection(context, state => state[1]);
   function onClick(e: {key: string; keyPath: string[]}) {
     setOpenKey(e.keyPath);
     const data = pages.find(val => val.id === e.key);
     if (!data) return;
 
-    navigate(data.url);
+    dispatch({
+      type: 'ADD',
+      payload: {key: data.id, url: data.url, label: data.name},
+    });
   }
 
+  const [selectKey, setSelectKey] = useState(['-1']);
   useEffect(
     function () {
-      const route = pages.find(val => val.url === pathname);
-      if (!route) return;
-
-      if (route.id !== current[0]) setCurrent([route.id]);
-    },
-    [current, pages, pathname],
-  );
+      const menu = pages.find(val => val.id === activeKey);
+      menu && menu.pId !== '0' ? setOpenKey([menu.pId]) : setOpenKey([]);
 
-  useEffect(
-    function () {
-      pathname === HOME_PATH && setOpenKey([]);
+      setSelectKey([activeKey]);
     },
-    [pathname],
+    [activeKey, pages],
   );
 
   return [
-    {openKeys, current},
+    {openKeys, selectKey},
     {onOpenChange, onClick},
   ] as const;
 }
 
-export function useMenuState() {
-  const [openKeys, setOpenKey] = useState<string[]>(['-1']);
-
-  function onOpenChange(keys: string[]) {
-    setOpenKey([keys[keys.length - 1]]);
-  }
-
-  const pages = useStore(menuStore, state => state.menus);
-  const dispatch = useContextSection(context, state => state[1]);
-  function onClick(e: {key: string; keyPath: string[]}) {
-    setOpenKey(e.keyPath);
-    const data = pages.find(val => val.id === e.key);
-    if (!data) return;
-
-    dispatch({
-      type: 'ADD',
-      payload: {key: data.id, url: data.url, label: data.name},
-    });
-  }
-
-  return [{openKeys}, {onOpenChange, onClick}] as const;
-}
-
 export function useCollapsedMenu() {
   const [storage, setStorage] = useLocalStorageState<'0' | '1' | undefined>(
     MENU_COLLAPSED_STORAGE,

packages/app/src/pages/home/menu/index.tsx

@@ -9,7 +9,7 @@ import lottieData from '@assets/json/wave.json';
 
 const Menu: FC = function () {
   const menus = useMenu();
-  const [{openKeys}, {onOpenChange, onClick}] = useMenuState();
+  const [{openKeys, selectKey}, {onOpenChange, onClick}] = useMenuState();
   const [collapsed, toggle] = useCollapsedMenu();
 
   return (
@@ -33,7 +33,7 @@ const Menu: FC = function () {
         data-testid='menu'
         mode='inline'
         items={menus}
-        selectedKeys={[]}
+        selectedKeys={selectKey}
         onOpenChange={onOpenChange}
         openKeys={openKeys}
         className={css.sliderMenus}