增加禁用标签页功能。

src/components/Tab.module.css

@@ -18,5 +18,9 @@
     &:hover {
       color: var(--color-primary-hover);
     }
+    &.disabled {
+      color: var(--color-primary-disabled);
+      cursor: not-allowed;
+    }
   }
 }

src/components/Tab.tsx

@@ -3,20 +3,30 @@ import { isEqual, isNil } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
 import styles from './Tab.module.css';
 
-type TabProps = {
+type TabOption = {
-  tabs: { title: string; id: unknown }[];
+  title: string;
-  activeTab?: unknown;
+  id: unknown;
-  onActive?: (id: unknown) => void;
 };
 
-export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
+type TabProps = {
+  tabs: TabOption[];
+  activeTab?: unknown;
+  onActive?: (id: TabOption['id']) => void;
+  disabled?: { [d: keyof TabOption['id']]: boolean };
+};
+
+export function Tab({ tabs = [], activeTab, onActive, disabled }: TabProps) {
   const [active, setActive] = useState(() =>
     isNil(activeTab) ? 0 : tabs.findIndex((tab) => isEqual(tab.id, activeTab)),
   );
-  const handleActivate = useCallback((index: number) => {
+  const handleActivate = useCallback(
+    (index: number) => {
+      if (disabled?.[tabs[index].id] ?? false) return;
       setActive(index);
       onActive?.(tabs[index].id);
-  }, []);
+    },
+    [tabs, onActive, disabled],
+  );
 
   useEffect(() => {
     const activeIndex = tabs.findIndex((tab) => isEqual(tab.id, activeTab));
@@ -30,7 +40,11 @@ export function Tab({ tabs = [], activeTab, onActive }: TabProps) {
       {tabs.map((tab, index) => (
         <div
           key={`tab_${index}_${tab.id}`}
-          className={cx(styles.tab, isEqual(index, active) && styles.actived)}
+          className={cx(
+            styles.tab,
+            isEqual(index, active) && styles.actived,
+            (disabled?.[tab.id] ?? false) && styles.disabled,
+          )}
           onClick={() => handleActivate(index)}>
           {tab.title}
         </div>