@zat-design/sisyphus-react 4.5.10-beta.1 → 4.5.10-beta.2

package/es/ProLayout/components/TabsManager/index.js

@@ -1,5 +1,15 @@
-import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useEffect, useLayoutEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { createPortal } from "react-dom";
 import { useTabsState } from "./hooks/useTabsState";
 import { useTabsUrlSync } from "./hooks/useTabsUrlSync";
 import { useIframeRoute } from "./hooks/useIframeRoute";
@@ -7,406 +17,412 @@ import { flattenMenuData, resolveTabMenuItem, derivePinned } from "./utils";
 import { TabItemComponent } from "./components/TabItem";
 import { TabsHeader } from "./components/TabsHeader";
 import { TabsContext } from "./components/TabsContext";
-
-/**
- * 标签页管理器主组件
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TabsManager = /*#__PURE__*/forwardRef(({
-  config,
-  children,
-  dataSource,
-  originalOnMenuClick,
-  tabsBarContainer,
-  onTabsChange,
-  onIframePureChange
-}, ref) => {
-  // iframe 模式检测(在 useTabsState 之前,因为 cacheEnabled 依赖 pure)
-  // addTab 由后续 useTabsState 提供,此处先用占位,后面用 ref 透传
-  const iframeAddTabRef = useRef(undefined);
-  const {
-    pure: isIframePure
-  } = useIframeRoute({
-    config: config?.iframe,
-    addTab: params => iframeAddTabRef.current?.(params)
-  });
-
-  // 通知父级(ProLayout)pure 状态变化
-  useLayoutEffect(() => {
-    onIframePureChange?.(isIframePure);
-  }, [isIframePure, onIframePureChange]);
-
-  // TabsManager 退出 tabs 模式或上报目标变更时，释放旧父级持有的 pure 状态。
-  useLayoutEffect(() => () => {
-    onIframePureChange?.(false);
-  }, [onIframePureChange]);
-  const {
-    state,
-    isInitialized,
-    addTab,
-    canAddTab,
-    removeTab,
-    updateTab,
-    updateTabUrl,
-    switchTab,
-    rollbackTabActivation,
-    closeOtherTabs,
-    closeRightTabs,
-    closeAllTabs,
-    reorderTabs,
-    pinTab,
-    unpinTab
-  } = useTabsState({
+const TabsManager = forwardRef(
+  ({
     config,
+    children,
     dataSource,
-    cacheEnabled: !isIframePure
-  });
-  const tabInteractionSequenceRef = useRef(0);
-  const markTabInteraction = useCallback(() => {
-    tabInteractionSequenceRef.current += 1;
-  }, []);
-  useTabsUrlSync({
-    config,
-    dataSource,
-    state,
-    isInitialized,
-    addTab,
-    switchTab,
-    updateTabUrl,
-    rollbackTabActivation,
-    interactionSequence: tabInteractionSequenceRef.current
-  });
-
-  // 桥接 useIframeRoute 的 { code, name, extra } → addTab(menuItem)
-  iframeAddTabRef.current = params => {
-    const sourceMenus = Array.isArray(dataSource?.menus) ? flattenMenuData(dataSource.menus) : [];
-    const matchedMenu = sourceMenus.find(item => item.code === params.code);
-    const menuItem = matchedMenu ? {
-      ...matchedMenu,
-      name: params.name || matchedMenu.name,
-      extra: params.extra ?? matchedMenu.extra
-    } : {
-      id: Date.now(),
-      code: params.code,
-      name: params.name,
-      url: `/${params.code}`,
-      extra: params.extra
-    };
-    addTab(menuItem);
-  };
-
-  // 记录已访问过的 Tab ID，用于懒加载
-  const [visitedTabIds, setVisitedTabIds] = useState(new Set());
-
-  // 监听 activeKey 变化，更新 visitedTabIds
-  useEffect(() => {
-    if (state.activeKey) {
-      setVisitedTabIds(prev => {
-        if (prev.has(state.activeKey)) return prev;
-        const newSet = new Set(prev);
-        newSet.add(state.activeKey);
-        return newSet;
-      });
-    }
-  }, [state.activeKey]);
-
-  // tab 内子视图栈：按 tabId 隔离。栈底→栈顶顺序，入口页不在其中。
-  // 只活在内存、不进缓存（详情/工作流是运行态 ReactNode，无法 JSON 序列化）。
-  const [viewStacks, setViewStacks] = useState({});
-
-  // 用 ref 持有 activeKey，供稳定的 pushView/back 读取当前激活 tab，避免因 activeKey 变化重建实例
-  const activeKeyRef = useRef(state.activeKey);
-  activeKeyRef.current = state.activeKey;
-
-  // 同步持有最新 viewStacks，使 getViewStack 成为稳定引用且读取不受渲染时序影响
-  const viewStacksRef = useRef(viewStacks);
-  viewStacksRef.current = viewStacks;
-
-  // 在当前激活 tab 内压入一层子视图（入口页/下层随之隐藏但不卸载）
-  const pushView = useCallback(node => {
-    const tabId = activeKeyRef.current;
-    if (!tabId) return;
-    setViewStacks(prev => ({
-      ...prev,
-      [tabId]: [...(prev[tabId] || []), node]
-    }));
-  }, []);
-
-  // 返回：销毁当前激活 tab 的栈顶子视图（栈空时 no-op）
-  const back = useCallback(() => {
-    const tabId = activeKeyRef.current;
-    if (!tabId) return;
-    setViewStacks(prev => {
-      const stack = prev[tabId];
-      if (!stack || stack.length === 0) return prev;
-      const nextStack = stack.slice(0, -1);
-      const next = {
-        ...prev
-      };
-      if (nextStack.length === 0) {
-        delete next[tabId];
-      } else {
-        next[tabId] = nextStack;
+    originalOnMenuClick,
+    tabsBarContainer,
+    onTabsChange,
+    onIframePureChange
+  }, ref) => {
+    const iframeAddTabRef = useRef(void 0);
+    const { pure: isIframePure } = useIframeRoute({
+      config: config == null ? void 0 : config.iframe,
+      addTab: (params) => {
+        var _a;
+        return (_a = iframeAddTabRef.current) == null ? void 0 : _a.call(iframeAddTabRef, params);
       }
-      return next;
     });
-  }, []);
-
-  // 获取当前激活 tab 的子视图栈（从 ref 读最新值，稳定引用）
-  const getViewStack = useCallback(() => viewStacksRef.current[activeKeyRef.current] || [], []);
-
-  // 子视图栈与 tabsList 对账：任何关闭路径（removeTab / closeOthers / closeRight /
-  // closeAll）导致某 tab 消失后，清除其残留子视图栈，避免关闭后 node 仍驻留内存。
-  useEffect(() => {
-    setViewStacks(prev => {
-      const keys = Object.keys(prev);
-      if (keys.length === 0) return prev;
-      const aliveIds = new Set(state.tabsList.map(tab => tab.id));
-      const staleKeys = keys.filter(id => !aliveIds.has(id));
-      if (staleKeys.length === 0) return prev;
-      const next = {
-        ...prev
-      };
-      staleKeys.forEach(id => delete next[id]);
-      return next;
+    useLayoutEffect(() => {
+      onIframePureChange == null ? void 0 : onIframePureChange(isIframePure);
+    }, [isIframePure, onIframePureChange]);
+    useLayoutEffect(
+      () => () => {
+        onIframePureChange == null ? void 0 : onIframePureChange(false);
+      },
+      [onIframePureChange]
+    );
+    const {
+      state,
+      isInitialized,
+      addTab,
+      canAddTab,
+      removeTab,
+      updateTab,
+      updateTabUrl,
+      switchTab,
+      rollbackTabActivation,
+      closeOtherTabs,
+      closeRightTabs,
+      closeAllTabs,
+      reorderTabs,
+      pinTab,
+      unpinTab
+    } = useTabsState({ config, dataSource, cacheEnabled: !isIframePure });
+    const tabInteractionSequenceRef = useRef(0);
+    const markTabInteraction = useCallback(() => {
+      tabInteractionSequenceRef.current += 1;
+    }, []);
+    useTabsUrlSync({
+      config,
+      dataSource,
+      state,
+      isInitialized,
+      addTab,
+      switchTab,
+      updateTabUrl,
+      rollbackTabActivation,
+      interactionSequence: tabInteractionSequenceRef.current
     });
-  }, [state.tabsList]);
-
-  // 通知父级（ProLayout）当前是否有 Tab
-  useLayoutEffect(() => {
-    onTabsChange?.(state.tabsList.length > 0);
-  }, [state.tabsList.length, onTabsChange]);
-
-  // 卸载时显式复位，避免 ProLayout 在动态退出 tabs 模式后保留偏移状态。
-  useLayoutEffect(() => () => {
-    onTabsChange?.(false);
-  }, [onTabsChange]);
-
-  // 处理声明式固定标签页：config.fixed 中的 code 在初始化完成后自动添加，强制 closable=false
-  // 用 ref 持有 addTab，避免 addTab 引用变化引起无限循环
-  const addTabRef = useRef(addTab);
-  addTabRef.current = addTab;
-  useEffect(() => {
-    // iframe pure 模式下不应用 fixed(嵌入页面只显示路由命中的单个 tab)
-    if (isIframePure) return;
-    if (!isInitialized || !config.fixed || config.fixed.length === 0) return;
-    const sourceMenus = Array.isArray(dataSource?.menus) ? flattenMenuData(dataSource.menus) : [];
-
-    // menus 为空说明异步数据尚未返回，等 dataSource 变化后重跑，避免用 code 创建占位 tab
-    if (sourceMenus.length === 0) return;
-    config.fixed.forEach(code => {
-      // 已存在（如缓存恢复）：仅校正 closable/pinned，不调 addTab 以保留缓存中的 activeKey
-      const existing = state.tabsList.find(tab => tab.menuItem?.code === code || tab.code === code);
-      if (existing) {
-        if (existing.closable !== false || existing.pinned !== true) {
-          updateTab(existing.id, {
-            closable: false,
-            pinned: true
-          });
-        }
-        return;
-      }
-      const matchedMenu = sourceMenus.find(item => item.code === code);
-      // pinned:true 使声明式固定标签与用户手动固定统一走 pinned 分区逻辑
+    iframeAddTabRef.current = (params) => {
+      const sourceMenus = Array.isArray(dataSource == null ? void 0 : dataSource.menus) ? flattenMenuData(dataSource.menus) : [];
+      const matchedMenu = sourceMenus.find((item) => item.code === params.code);
       const menuItem = matchedMenu ? {
         ...matchedMenu,
-        closable: false,
-        pinned: true
+        name: params.name || matchedMenu.name,
+        extra: params.extra ?? matchedMenu.extra
       } : {
         id: Date.now(),
-        code,
-        name: code,
-        url: `/${code}`,
-        closable: false,
-        pinned: true
+        code: params.code,
+        name: params.name,
+        url: `/${params.code}`,
+        extra: params.extra
       };
-      // silent: 已有 active(如 iframe 路由命中)时不抢 active;无 active 时仍激活以保留默认行为
-      addTabRef.current(menuItem, {
-        silent: true
+      addTab(menuItem);
+    };
+    const [visitedTabIds, setVisitedTabIds] = useState(/* @__PURE__ */ new Set());
+    useEffect(() => {
+      if (state.activeKey) {
+        setVisitedTabIds((prev) => {
+          if (prev.has(state.activeKey))
+            return prev;
+          const newSet = new Set(prev);
+          newSet.add(state.activeKey);
+          return newSet;
+        });
+      }
+    }, [state.activeKey]);
+    const [viewStacks, setViewStacks] = useState({});
+    const activeKeyRef = useRef(state.activeKey);
+    activeKeyRef.current = state.activeKey;
+    const viewStacksRef = useRef(viewStacks);
+    viewStacksRef.current = viewStacks;
+    const pushView = useCallback((node) => {
+      const tabId = activeKeyRef.current;
+      if (!tabId)
+        return;
+      setViewStacks((prev) => ({
+        ...prev,
+        [tabId]: [...prev[tabId] || [], node]
+      }));
+    }, []);
+    const back = useCallback(() => {
+      const tabId = activeKeyRef.current;
+      if (!tabId)
+        return;
+      setViewStacks((prev) => {
+        const stack = prev[tabId];
+        if (!stack || stack.length === 0)
+          return prev;
+        const nextStack = stack.slice(0, -1);
+        const next = { ...prev };
+        if (nextStack.length === 0) {
+          delete next[tabId];
+        } else {
+          next[tabId] = nextStack;
+        }
+        return next;
       });
-    });
-  }, [isInitialized, config.fixed, dataSource, state.tabsList, updateTab, isIframePure]);
-
-  // 处理菜单点击 - 拦截原有的菜单点击逻辑
-  const handleMenuClick = useCallback(params => {
-    if (params.item) {
-      markTabInteraction();
-      addTab(params.item);
-    }
-    originalOnMenuClick?.(params);
-  }, [addTab, markTabInteraction, originalOnMenuClick]);
-
-  // 切换固定状态：已固定→取消固定，未固定→固定
-  const handleTogglePin = useCallback(tabId => {
-    const target = state.tabsList.find(tab => tab.id === tabId);
-    if (!target) return;
-    if (derivePinned(target)) {
-      unpinTab(tabId);
-    } else {
-      pinTab(tabId);
-    }
-  }, [state.tabsList, pinTab, unpinTab]);
-
-  // 创建标签页实例 API
-  const tabsInstance = useMemo(() => ({
-    addTab: (params, options) => {
-      markTabInteraction();
-      const sourceMenus = Array.isArray(dataSource?.menus) ? dataSource.menus : [];
-      const menuItem = resolveTabMenuItem(params, sourceMenus);
-      addTab(menuItem, options);
-    },
-    removeTab: tabId => {
-      markTabInteraction();
-      removeTab(tabId);
-    },
-    updateTab,
-    getTabInfo: () => ({
-      tabsList: state.tabsList,
-      activeTabInfo: state.tabsList.find(tab => tab.id === state.activeKey),
-      activeComponent: state.activeComponent
-    }),
-    pushView,
-    back,
-    getViewStack
-  }), [addTab, markTabInteraction, removeTab, updateTab, state.tabsList, state.activeKey, state.activeComponent, dataSource, pushView, back, getViewStack]);
-  const handleTabChange = useCallback(activeKey => {
-    markTabInteraction();
-    switchTab(activeKey);
-  }, [markTabInteraction, switchTab]);
-  const handleRemoveTab = useCallback(tabId => {
-    markTabInteraction();
-    removeTab(tabId);
-  }, [markTabInteraction, removeTab]);
-  const handleCloseOtherTabs = useCallback(tabId => {
-    markTabInteraction();
-    closeOtherTabs(tabId);
-  }, [closeOtherTabs, markTabInteraction]);
-  const handleCloseRightTabs = useCallback(tabId => {
-    markTabInteraction();
-    closeRightTabs(tabId);
-  }, [closeRightTabs, markTabInteraction]);
-  const handleCloseAllTabs = useCallback(() => {
-    markTabInteraction();
-    closeAllTabs();
-  }, [closeAllTabs, markTabInteraction]);
-  const handleTabEdit = useCallback((targetKey, action) => {
-    if (action === 'remove') {
-      handleRemoveTab(targetKey);
-    }
-  }, [handleRemoveTab]);
-
-  // 构建 Tabs items
-  const tabsItems = useMemo(() => {
-    if (state.tabsList.length === 0) return [];
-
-    // config.fixed 声明的 code 集合：这些标签是强制固定，不允许用户取消固定
-    const forcedFixedCodes = new Set(config?.fixed ?? []);
-    return state.tabsList.map(tab => {
-      const pinned = derivePinned(tab);
-      const pinDisabled = forcedFixedCodes.has(tab.menuItem?.code ?? tab.code);
-      return {
-        key: tab.id,
-        label: /*#__PURE__*/_jsx(TabItemComponent, {
-          tab: tab,
-          active: tab.id === state.activeKey,
-          onClick: () => handleTabChange(tab.id),
-          onClose: () => handleRemoveTab(tab.id),
-          onCloseOthers: () => handleCloseOtherTabs(tab.id),
-          onCloseRight: () => handleCloseRightTabs(tab.id),
-          onCloseAll: handleCloseAllTabs,
-          pinned: pinned,
-          pinDisabled: pinDisabled,
-          onTogglePin: () => handleTogglePin(tab.id),
+    }, []);
+    const getViewStack = useCallback(
+      () => viewStacksRef.current[activeKeyRef.current] || [],
+      []
+    );
+    useEffect(() => {
+      setViewStacks((prev) => {
+        const keys = Object.keys(prev);
+        if (keys.length === 0)
+          return prev;
+        const aliveIds = new Set(state.tabsList.map((tab) => tab.id));
+        const staleKeys = keys.filter((id) => !aliveIds.has(id));
+        if (staleKeys.length === 0)
+          return prev;
+        const next = { ...prev };
+        staleKeys.forEach((id) => delete next[id]);
+        return next;
+      });
+    }, [state.tabsList]);
+    useLayoutEffect(() => {
+      onTabsChange == null ? void 0 : onTabsChange(state.tabsList.length > 0);
+    }, [state.tabsList.length, onTabsChange]);
+    useLayoutEffect(
+      () => () => {
+        onTabsChange == null ? void 0 : onTabsChange(false);
+      },
+      [onTabsChange]
+    );
+    const addTabRef = useRef(addTab);
+    addTabRef.current = addTab;
+    useEffect(() => {
+      if (isIframePure)
+        return;
+      if (!isInitialized || !config.fixed || config.fixed.length === 0)
+        return;
+      const sourceMenus = Array.isArray(dataSource == null ? void 0 : dataSource.menus) ? flattenMenuData(dataSource.menus) : [];
+      if (sourceMenus.length === 0)
+        return;
+      config.fixed.forEach((code) => {
+        const existing = state.tabsList.find(
+          (tab) => {
+            var _a;
+            return ((_a = tab.menuItem) == null ? void 0 : _a.code) === code || tab.code === code;
+          }
+        );
+        if (existing) {
+          if (existing.closable !== false || existing.pinned !== true) {
+            updateTab(existing.id, { closable: false, pinned: true });
+          }
+          return;
+        }
+        const matchedMenu = sourceMenus.find((item) => item.code === code);
+        const menuItem = matchedMenu ? { ...matchedMenu, closable: false, pinned: true } : {
+          id: Date.now(),
+          code,
+          name: code,
+          url: `/${code}`,
+          closable: false,
+          pinned: true
+        };
+        addTabRef.current(menuItem, { silent: true });
+      });
+    }, [isInitialized, config.fixed, dataSource, state.tabsList, updateTab, isIframePure]);
+    const handleMenuClick = useCallback(
+      (params) => {
+        if (params.item) {
+          markTabInteraction();
+          addTab(params.item);
+        }
+        originalOnMenuClick == null ? void 0 : originalOnMenuClick(params);
+      },
+      [addTab, markTabInteraction, originalOnMenuClick]
+    );
+    const handleTogglePin = useCallback(
+      (tabId) => {
+        const target = state.tabsList.find((tab) => tab.id === tabId);
+        if (!target)
+          return;
+        if (derivePinned(target)) {
+          unpinTab(tabId);
+        } else {
+          pinTab(tabId);
+        }
+      },
+      [state.tabsList, pinTab, unpinTab]
+    );
+    const tabsInstance = useMemo(
+      () => ({
+        addTab: (params, options) => {
+          markTabInteraction();
+          const sourceMenus = Array.isArray(dataSource == null ? void 0 : dataSource.menus) ? dataSource.menus : [];
+          const menuItem = resolveTabMenuItem(params, sourceMenus);
+          addTab(menuItem, options);
+        },
+        removeTab: (tabId) => {
+          markTabInteraction();
+          removeTab(tabId);
+        },
+        updateTab,
+        getTabInfo: () => ({
           tabsList: state.tabsList,
-          menuItems: config?.menuItems,
-          tabMenuClick: config?.tabMenuClick
+          activeTabInfo: state.tabsList.find((tab) => tab.id === state.activeKey),
+          activeComponent: state.activeComponent
         }),
-        closable: false,
-        // 关闭 antd 内置 ×，由 TabItemComponent 自定义按钮处理
-        children: null
-      };
-    });
-  }, [state.tabsList, state.activeKey, config?.menuItems, config?.tabMenuClick, config?.fixed, handleTabChange, handleRemoveTab, handleCloseOtherTabs, handleCloseRightTabs, handleCloseAllTabs, handleTogglePin]);
-  const activeComponent = config?.activeComponent;
-  const emptyComponent = config?.empty;
-
-  // 渲染内容区域
-  const renderContent = () => {
-    return /*#__PURE__*/_jsxs("div", {
-      className: "pro-layout-tabs-content",
-      children: [state.tabsList.map(tab => {
-        const isActive = tab.id === state.activeKey;
-        const hasVisited = visitedTabIds.has(tab.id);
-        if (!isActive && !hasVisited) {
-          return /*#__PURE__*/_jsx("div", {
-            className: "tab-pane hidden",
-            "data-testid": `tab-pane-${tab.id}`
-          }, tab.id);
+        pushView,
+        back,
+        getViewStack
+      }),
+      [
+        addTab,
+        markTabInteraction,
+        removeTab,
+        updateTab,
+        state.tabsList,
+        state.activeKey,
+        state.activeComponent,
+        dataSource,
+        pushView,
+        back,
+        getViewStack
+      ]
+    );
+    const handleTabChange = useCallback(
+      (activeKey) => {
+        markTabInteraction();
+        switchTab(activeKey);
+      },
+      [markTabInteraction, switchTab]
+    );
+    const handleRemoveTab = useCallback(
+      (tabId) => {
+        markTabInteraction();
+        removeTab(tabId);
+      },
+      [markTabInteraction, removeTab]
+    );
+    const handleCloseOtherTabs = useCallback(
+      (tabId) => {
+        markTabInteraction();
+        closeOtherTabs(tabId);
+      },
+      [closeOtherTabs, markTabInteraction]
+    );
+    const handleCloseRightTabs = useCallback(
+      (tabId) => {
+        markTabInteraction();
+        closeRightTabs(tabId);
+      },
+      [closeRightTabs, markTabInteraction]
+    );
+    const handleCloseAllTabs = useCallback(() => {
+      markTabInteraction();
+      closeAllTabs();
+    }, [closeAllTabs, markTabInteraction]);
+    const handleTabEdit = useCallback(
+      (targetKey, action) => {
+        if (action === "remove") {
+          handleRemoveTab(targetKey);
         }
-        let content = children;
-        if (activeComponent && tab.menuItem?.code) {
-          const ResolvedComponent = activeComponent(tab.menuItem.code);
-          if (ResolvedComponent) {
-            content = /*#__PURE__*/_jsx(ResolvedComponent, {
-              ...(tab.menuItem.extra || {})
-            });
+      },
+      [handleRemoveTab]
+    );
+    const tabsItems = useMemo(() => {
+      if (state.tabsList.length === 0)
+        return [];
+      const forcedFixedCodes = new Set((config == null ? void 0 : config.fixed) ?? []);
+      return state.tabsList.map((tab) => {
+        var _a;
+        const pinned = derivePinned(tab);
+        const pinDisabled = forcedFixedCodes.has(((_a = tab.menuItem) == null ? void 0 : _a.code) ?? tab.code);
+        return {
+          key: tab.id,
+          label: /* @__PURE__ */ jsx(
+            TabItemComponent,
+            {
+              tab,
+              active: tab.id === state.activeKey,
+              onClick: () => handleTabChange(tab.id),
+              onClose: () => handleRemoveTab(tab.id),
+              onCloseOthers: () => handleCloseOtherTabs(tab.id),
+              onCloseRight: () => handleCloseRightTabs(tab.id),
+              onCloseAll: handleCloseAllTabs,
+              pinned,
+              pinDisabled,
+              onTogglePin: () => handleTogglePin(tab.id),
+              tabsList: state.tabsList,
+              menuItems: config == null ? void 0 : config.menuItems,
+              tabMenuClick: config == null ? void 0 : config.tabMenuClick
+            }
+          ),
+          closable: false,
+          // 关闭 antd 内置 ×，由 TabItemComponent 自定义按钮处理
+          children: null
+        };
+      });
+    }, [
+      state.tabsList,
+      state.activeKey,
+      config == null ? void 0 : config.menuItems,
+      config == null ? void 0 : config.tabMenuClick,
+      config == null ? void 0 : config.fixed,
+      handleTabChange,
+      handleRemoveTab,
+      handleCloseOtherTabs,
+      handleCloseRightTabs,
+      handleCloseAllTabs,
+      handleTogglePin
+    ]);
+    const activeComponent = config == null ? void 0 : config.activeComponent;
+    const emptyComponent = config == null ? void 0 : config.empty;
+    const renderContent = () => {
+      return /* @__PURE__ */ jsxs("div", { className: "pro-layout-tabs-content", children: [
+        state.tabsList.map((tab) => {
+          var _a;
+          const isActive = tab.id === state.activeKey;
+          const hasVisited = visitedTabIds.has(tab.id);
+          if (!isActive && !hasVisited) {
+            return /* @__PURE__ */ jsx("div", { className: "tab-pane hidden", "data-testid": `tab-pane-${tab.id}` }, tab.id);
           }
-        }
-
-        // 该 tab 的子视图栈：栈底→栈顶。只有「当前激活 tab 的栈顶层」可见，
-        // 入口页与下层子视图 display:none 但保持挂载 → 返回秒回、状态不丢。
-        const stack = viewStacks[tab.id] || [];
-        // 入口页可见条件：该 tab 激活 且 无子视图
-        const entryVisible = isActive && stack.length === 0;
-        return /*#__PURE__*/_jsx("div", {
-          className: `tab-pane ${entryVisible ? '' : 'hidden'}`,
-          "data-testid": `tab-pane-${tab.id}`,
-          children: content
-        }, tab.id);
-      }), state.tabsList.map(tab => {
-        const isActive = tab.id === state.activeKey;
-        const stack = viewStacks[tab.id] || [];
-        if (stack.length === 0) return null;
-        const topIndex = stack.length - 1;
-        return stack.map((node, index) => {
-          const layerVisible = isActive && index === topIndex;
-          return /*#__PURE__*/_jsx("div", {
-            className: `tab-pane ${layerVisible ? '' : 'hidden'}`,
-            "data-testid": `tab-subview-${tab.id}-${index}`,
-            children: node
-          }, `${tab.id}-subview-${index}`);
-        });
-      }), state.tabsList.length === 0 && /*#__PURE__*/_jsx("div", {
-        className: "tab-pane",
-        "data-testid": "default-content",
-        children: emptyComponent || children
-      })]
-    });
-  };
-
-  // TabsHeader 节点：有 tabsBarContainer 时用 Portal 渲染到外部，否则原位 fallback
-  // iframe pure 模式下完全不渲染 tab bar
-  const tabsHeaderNode = state.tabsList.length > 0 && !isIframePure ? /*#__PURE__*/_jsx(TabsHeader, {
-    activeKey: state.activeKey || undefined,
-    tabsItems: tabsItems,
-    onTabChange: handleTabChange,
-    onTabEdit: handleTabEdit,
-    draggable: config?.draggable !== false,
-    onReorder: reorderTabs
-  }) : null;
-  useImperativeHandle(ref, () => ({
-    handleMenuClick,
-    canAddTab,
-    getTabInfo: tabsInstance.getTabInfo
-  }), [handleMenuClick, canAddTab, tabsInstance]);
-  return /*#__PURE__*/_jsxs(TabsContext.Provider, {
-    value: tabsInstance,
-    children: [tabsBarContainer ? /*#__PURE__*/createPortal(tabsHeaderNode, tabsBarContainer) : tabsHeaderNode, /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-tabs",
-      "data-testid": "tabs-manager",
-      children: renderContent()
-    })]
-  });
-});
-TabsManager.displayName = 'TabsManager';
-export default TabsManager;
+          let content = children;
+          if (activeComponent && ((_a = tab.menuItem) == null ? void 0 : _a.code)) {
+            const ResolvedComponent = activeComponent(tab.menuItem.code);
+            if (ResolvedComponent) {
+              content = /* @__PURE__ */ jsx(ResolvedComponent, { ...tab.menuItem.extra || {} });
+            }
+          }
+          const stack = viewStacks[tab.id] || [];
+          const entryVisible = isActive && stack.length === 0;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `tab-pane ${entryVisible ? "" : "hidden"}`,
+              "data-testid": `tab-pane-${tab.id}`,
+              children: content
+            },
+            tab.id
+          );
+        }),
+        state.tabsList.map((tab) => {
+          const isActive = tab.id === state.activeKey;
+          const stack = viewStacks[tab.id] || [];
+          if (stack.length === 0)
+            return null;
+          const topIndex = stack.length - 1;
+          return stack.map((node, index) => {
+            const layerVisible = isActive && index === topIndex;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `tab-pane ${layerVisible ? "" : "hidden"}`,
+                "data-testid": `tab-subview-${tab.id}-${index}`,
+                children: node
+              },
+              `${tab.id}-subview-${index}`
+            );
+          });
+        }),
+        state.tabsList.length === 0 && /* @__PURE__ */ jsx("div", { className: "tab-pane", "data-testid": "default-content", children: emptyComponent || children })
+      ] });
+    };
+    const tabsHeaderNode = state.tabsList.length > 0 && !isIframePure ? /* @__PURE__ */ jsx(
+      TabsHeader,
+      {
+        activeKey: state.activeKey || void 0,
+        tabsItems,
+        onTabChange: handleTabChange,
+        onTabEdit: handleTabEdit,
+        draggable: (config == null ? void 0 : config.draggable) !== false,
+        onReorder: reorderTabs
+      }
+    ) : null;
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleMenuClick,
+        canAddTab,
+        getTabInfo: tabsInstance.getTabInfo
+      }),
+      [handleMenuClick, canAddTab, tabsInstance]
+    );
+    return /* @__PURE__ */ jsxs(TabsContext.Provider, { value: tabsInstance, children: [
+      tabsBarContainer ? createPortal(tabsHeaderNode, tabsBarContainer) : tabsHeaderNode,
+      /* @__PURE__ */ jsx("div", { className: "pro-layout-tabs", "data-testid": "tabs-manager", children: renderContent() })
+    ] });
+  }
+);
+TabsManager.displayName = "TabsManager";
+var TabsManager_default = TabsManager;
+export {
+  TabsManager_default as default
+};