refactor: 恢复点击tab时滚动到具体位置

packages/app/src/pages/home/main/tab/hooks.ts

@@ -6,6 +6,26 @@ import {tabStore} from '@stores';
 
 export function useIndicator() {
   const [style, setStyle] = useState<CSSProperties>({display: 'none'});
+  const tabs = useContextSection(context, state => state[0]);
+  const {key} = useStore(tabStore);
+
+  useEffect(
+    function () {
+      const activeEl = document.getElementById(`p_tab_item_${key}`);
+      if (!activeEl) return setStyle({display: 'none'});
+
+      const {width} = activeEl.getBoundingClientRect();
+      const left = activeEl.offsetLeft;
+
+      setStyle({width, transform: `translate(${left}px)`});
+    },
+    [key, tabs],
+  );
+
+  return style;
+}
+
+export function useScrollToView() {
   const visibleTab = useRef<Set<string>>(new Set());
   const tabs = useContextSection(context, state => state[0]);
   const {key} = useStore(tabStore);
@@ -43,15 +63,6 @@ export function useIndicator() {
 
   useEffect(
     function () {
-      const activeEl = document.getElementById(`p_tab_item_${key}`);
-      if (!activeEl) return setStyle({display: 'none'});
-
-      const {width} = activeEl.getBoundingClientRect();
-      const left = activeEl.offsetLeft;
-
-      setStyle({width, transform: `translate(${left}px)`});
-
-      // 判断是否需要滚动到指定位置
       if (!visibleTab.current.has(key)) {
         document
           .querySelector('#p_tab_list')
@@ -63,8 +74,6 @@ export function useIndicator() {
           });
       }
     },
-    [key, tabs],
+    [key],
   );
-
-  return style;
 }

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

@@ -4,6 +4,7 @@ import {useContextSection} from '@hooks';
 import {context} from '../../context';
 import TabItem from './item';
 import {ShowContextMenuParams} from 'react-contexify';
+import {useScrollToView} from './hooks';
 
 type MakeOptional<Type, Key extends keyof Type> = Omit<Type, Key> &
   Partial<Pick<Type, Key>>;
@@ -16,6 +17,7 @@ type Props = {
 
 const Tabs: FC<Props> = function ({onTabItemContentMenu}) {
   const tabs = useContextSection(context, state => state[0]);
+  useScrollToView();
 
   return (
     <ul className={css.tabList} id='p_tab_list'>