Tab增加被动切换标签页的功能。

src/components/Tab.tsx

@@ -1,20 +1,30 @@
 import cx from 'clsx';
-import { isEqual } from 'lodash-es';
+import { isEqual, isNil } from 'lodash-es';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import styles from './Tab.module.css';
 
 type TabProps = {
   tabs: { title: string; id: unknown }[];
+  activeTab?: unknown;
   onActive?: (id: unknown) => void;
 };
 
-export function Tab({ tabs = [], onActive }: TabProps) {
+export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
-  const [active, setActive] = useState(0);
+  const [active, setActive] = useState(() =>
+    isNil(activeTab) ? 0 : tabs.findIndex((tab) => isEqual(tab.id, activeTab)),
+  );
   const handleActivate = useCallback((index: number) => {
     setActive(index);
     onActive?.(tabs[index].id);
   }, []);
 
+  useEffect(() => {
+    const activeIndex = tabs.findIndex((tab) => isEqual(tab.id, activeTab));
+    if (!isNil(activeIndex) && !isEqual(activeIndex, -1) && !isEqual(activeIndex, active)) {
+      setActive(activeIndex);
+    }
+  }, [activeTab]);
+
   return (
     <div className={styles.tabs_container}>
       {tabs.map((tab, index) => (