@zat-design/sisyphus-react 4.2.0 → 4.3.0-beta.10

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

@@ -1,29 +1,57 @@
-import { useEffect, useState } from 'react';
+import React, { createElement as _createElement } from 'react';
 import { Tabs } from 'antd';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 标签页头部：监听 window 滚动（实际滚动在 window/documentElement，非 body），
- * 滚动时添加阴影类名；仅此组件随滚动重渲染，不带动父组件内容区。
- */
+import { closestCenter, DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
+import { horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DraggableTabNode = props => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id: props['data-node-key']
+  });
+  const style = {
+    ...props.style,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: 'move'
+  };
+  return /*#__PURE__*/React.cloneElement(props.children, {
+    ref: setNodeRef,
+    style,
+    ...attributes,
+    ...listeners
+  });
+};
 export function TabsHeader({
   activeKey,
   tabsItems,
   onTabChange,
-  onTabEdit
+  onTabEdit,
+  draggable = true,
+  onReorder
 }) {
-  const [windowScrollY, setWindowScrollY] = useState(() => typeof window !== 'undefined' ? window.scrollY : 0);
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const onScroll = () => setWindowScrollY(window.scrollY);
-    window.addEventListener('scroll', onScroll, {
-      passive: true
-    });
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
-  const isScrolled = windowScrollY > 0;
-  return /*#__PURE__*/_jsxs("div", {
+  const sensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+  const onDragEnd = ({
+    active,
+    over
+  }) => {
+    if (over && active.id !== over.id) {
+      onReorder?.(String(active.id), String(over.id));
+    }
+  };
+  const tabKeys = (tabsItems ?? []).map(item => item.key);
+  return /*#__PURE__*/_jsx("div", {
     className: "pro-layout-tabs-header",
-    children: [/*#__PURE__*/_jsx(Tabs, {
+    children: /*#__PURE__*/_jsx(Tabs, {
       activeKey: activeKey,
       onChange: onTabChange,
       onEdit: onTabEdit,
@@ -35,10 +63,23 @@ export function TabsHeader({
         popup: {
           root: 'pro-layout-tabs-dropdown-menu'
         }
-      }
-    }), isScrolled && /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-tabs-header-shadow",
-      "aria-hidden": true
-    })]
+      },
+      renderTabBar: draggable ? (tabBarProps, DefaultTabBar) => /*#__PURE__*/_jsx(DndContext, {
+        sensors: [sensor],
+        onDragEnd: onDragEnd,
+        collisionDetection: closestCenter,
+        children: /*#__PURE__*/_jsx(SortableContext, {
+          items: tabKeys,
+          strategy: horizontalListSortingStrategy,
+          children: /*#__PURE__*/_jsx(DefaultTabBar, {
+            ...tabBarProps,
+            children: node => /*#__PURE__*/_createElement(DraggableTabNode, {
+              ...node.props,
+              key: node.key
+            }, node)
+          })
+        })
+      }) : undefined
+    })
   });
 }

package/es/ProLayout/components/TabsManager/hooks/useTabsState.js

@@ -1,9 +1,10 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { message } from 'antd';
+import { arrayMove } from '@dnd-kit/sortable';
 import { DEFAULT_TABS_CONFIG } from "../propTypes";
 import { useTabsCache } from "./useTabsCache";
 import locale, { formatMessage } from "../../../../locale";
-import { createTabFromMenu, generateTabId, shouldOpenExternal, handleExternalOpen, checkTabLimit, getRightTabs, flattenMenuData, isLeafMenuItem } from "../utils";
+import { createTabFromMenu, generateTabId, shouldOpenExternal, handleExternalOpen, checkTabLimit, getRightTabs, flattenMenuData, canOpenAsTab, getMenuRoute } from "../utils";
 
 /**
  * 标签页状态管理Hook
@@ -106,8 +107,8 @@ export const useTabsState = options => {
       forceNew = false
     } = options || {};
 
-    // 只有最后一级菜单（叶子节点）才能添加标签页
-    if (!isLeafMenuItem(menuItem)) {
+    // 非叶子节点默认不入签，仅根节点特例可入签
+    if (!canOpenAsTab(menuItem)) {
       return false;
     }
 
@@ -118,7 +119,8 @@ export const useTabsState = options => {
 
     // 如果 forceNew = false（默认），检查是否已存在相同的标签页
     if (!forceNew) {
-      const existingTab = state.tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuItem.url);
+      const menuRoute = getMenuRoute(menuItem);
+      const existingTab = state.tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuRoute);
       if (existingTab) {
         // 如果已存在，可以添加（会切换到已存在的标签页）
         return true;
@@ -141,48 +143,41 @@ export const useTabsState = options => {
       forceNew = false
     } = options || {};
     setState(prevState => {
-      // 只有最后一级菜单（叶子节点）才能添加标签页
-      if (!isLeafMenuItem(menuItem)) {
-        return prevState;
-      }
-
-      // 检查是否需要外部跳转
+      if (!canOpenAsTab(menuItem)) return prevState;
       if (shouldOpenExternal(menuItem)) {
         handleExternalOpen(menuItem);
         return prevState;
       }
-      const existingIds = prevState.tabsList.map(tab => tab.id);
-      const tabId = generateTabId(menuItem, existingIds);
 
-      // 如果 forceNew = false（默认），检查是否已存在相同的标签页
-      if (!forceNew) {
-        const existingTab = prevState.tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuItem.url);
-        if (existingTab) {
-          // 如果已存在，直接切换到该标签页
-          const newState = {
-            ...prevState,
-            activeKey: existingTab.id,
-            activeTabInfo: existingTab,
-            activeComponent: existingTab.menuItem?.code || existingTab.id
-          };
-          return newState;
-        }
+      // 非强制新建时，查找已存在的标签页并切换
+      const menuRoute = getMenuRoute(menuItem);
+      const existingTab = !forceNew ? prevState.tabsList.find(tab => tab.menuItem?.code === menuItem.code || tab.url === menuRoute) : undefined;
+      if (existingTab) {
+        // 若来源菜单明确标记 closable: false 而已有 tab 未继承，则修正
+        const correctedTab = menuItem.closable === false && existingTab.closable !== false ? {
+          ...existingTab,
+          closable: false
+        } : existingTab;
+        const updatedTabsList = correctedTab !== existingTab ? prevState.tabsList.map(t => t.id === existingTab.id ? correctedTab : t) : prevState.tabsList;
+        return {
+          ...prevState,
+          tabsList: updatedTabsList,
+          activeKey: existingTab.id,
+          activeTabInfo: correctedTab,
+          activeComponent: existingTab.menuItem?.code || existingTab.id
+        };
       }
-
-      // 检查是否超出限制
       if (checkTabLimit(prevState.tabsList, finalConfig.max)) {
-        // 达到最大值时，不添加新标签页，显示提示信息
-        const messageText = formatMessage(locale.ProLayout.tabMaxLimitMessage, {
+        message.info(formatMessage(locale.ProLayout.tabMaxLimitMessage, {
           max: finalConfig.max
-        });
-        message.info(messageText);
+        }));
         return prevState;
       }
-
-      // 创建新标签页
+      const existingIds = prevState.tabsList.map(tab => tab.id);
+      const tabId = generateTabId(menuItem, existingIds);
       const newTab = createTabFromMenu(menuItem, prevState.newTabIndex);
       newTab.id = tabId;
-      const newState = {
+      return {
         ...prevState,
         tabsList: [...prevState.tabsList, newTab],
         activeKey: tabId,
@@ -190,7 +185,6 @@ export const useTabsState = options => {
         newTabIndex: prevState.newTabIndex + 1,
         activeComponent: menuItem.code || tabId
       };
-      return newState;
     });
   }, [finalConfig]);
 
@@ -316,22 +310,38 @@ export const useTabsState = options => {
       shouldSkipSaveRef.current = true;
       clearCache();
 
-      // 如果关闭后没有标签页了，直接调用 onTabChange
-      if (newTabs.length === 0 && finalConfig.onTabChange) {
+      // 直接调用 onTabChange（useEffect 因 shouldSkipSaveRef 会跳过）
+      if (finalConfig.onTabChange) {
+        const firstTab = newTabs.length > 0 ? newTabs[0] : undefined;
         setTimeout(() => {
-          finalConfig.onTabChange('', undefined, []);
+          finalConfig.onTabChange(firstTab?.id ?? '', firstTab, newTabs);
         }, 0);
       }
       return {
         ...prevState,
         tabsList: newTabs,
         activeKey: newActiveKey,
-        activeTabInfo: undefined,
+        activeTabInfo: newTabs.length > 0 ? newTabs[0] : undefined,
         activeComponent: newActiveComponent
       };
     });
   }, [clearCache, finalConfig]);
 
+  /**
+   * 重排标签页顺序（拖拽结束后调用）
+   */
+  const reorderTabs = useCallback((activeId, overId) => {
+    setState(prevState => {
+      const activeIndex = prevState.tabsList.findIndex(tab => tab.id === activeId);
+      const overIndex = prevState.tabsList.findIndex(tab => tab.id === overId);
+      if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) return prevState;
+      return {
+        ...prevState,
+        tabsList: arrayMove(prevState.tabsList, activeIndex, overIndex)
+      };
+    });
+  }, []);
+
   /**
    * 重置状态
    */
@@ -347,40 +357,23 @@ export const useTabsState = options => {
   // 监听 URL 变化并同步 Tabs (仅在初始化和 location 变化时)
   // 放在最后以确保可以使用 addTab 和 switchTab
   useEffect(() => {
-    // 确保数据源存在
     if (!dataSource || !('menus' in dataSource)) return;
     const currentPath = window.location.pathname;
-
-    // 如果当前没有 activeKey 或者 activeKey 对应的 URL 与当前 URL 不一致
     const activeTab = state.tabsList.find(tab => tab.id === state.activeKey);
-
-    // 如果当前已经在正确的 Tab 上，无需处理
     if (activeTab && activeTab.url === currentPath) return;
-
-    // 在菜单中查找当前 URL 对应的菜单项
     const flatMenus = flattenMenuData(dataSource.menus || []);
-    const targetMenu = flatMenus.find(item => item.url === currentPath);
-    if (targetMenu) {
-      // 只有最后一级菜单（叶子节点）才能添加标签页
-      if (!isLeafMenuItem(targetMenu)) {
-        return;
-      }
-
-      // 检查是否已在 Tabs 中
-      const existingTab = state.tabsList.find(tab => tab.menuItem?.code === targetMenu.code || tab.url === targetMenu.url);
-      if (existingTab) {
-        // 如果已存在，切换到该 Tab
-        if (state.activeKey !== existingTab.id) {
-          switchTab(existingTab.id);
-        }
-      } else {
-        // 如果不存在，添加新 Tab
-        addTab(targetMenu);
-      }
+    const targetMenu = flatMenus.find(item => getMenuRoute(item) === currentPath);
+    if (!targetMenu || !canOpenAsTab(targetMenu)) return;
+    const existingTab = state.tabsList.find(tab => tab.menuItem?.code === targetMenu.code || tab.url === getMenuRoute(targetMenu));
+    if (existingTab) {
+      if (state.activeKey !== existingTab.id) switchTab(existingTab.id);
+      return;
     }
+    addTab(targetMenu);
   }, [dataSource, state.tabsList, state.activeKey, addTab, switchTab]);
   return {
     state,
+    isInitialized,
     addTab,
     canAddTab,
     removeTab,
@@ -388,6 +381,7 @@ export const useTabsState = options => {
     closeOtherTabs,
     closeRightTabs,
     closeAllTabs,
-    resetTabs
+    resetTabs,
+    reorderTabs
   };
 };

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

@@ -1,5 +1,7 @@
-import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { useTabsState } from "./hooks/useTabsState";
+import { flattenMenuData } from "./utils";
 import { TabItemComponent } from "./components/TabItem";
 import { TabsHeader } from "./components/TabsHeader";
 import { TabsContext } from "./components/TabsContext";
@@ -12,18 +14,21 @@ const TabsManager = /*#__PURE__*/forwardRef(({
   config,
   children,
   dataSource,
-  originalOnMenuClick
+  originalOnMenuClick,
+  tabsBarContainer,
+  onTabsChange
 }, ref) => {
-  // 使用标签页状态管理Hook
   const {
     state,
+    isInitialized,
     addTab,
     canAddTab,
     removeTab,
     switchTab,
     closeOtherTabs,
     closeRightTabs,
-    closeAllTabs
+    closeAllTabs,
+    reorderTabs
   } = useTabsState({
     config,
     dataSource
@@ -44,14 +49,42 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     }
   }, [state.activeKey]);
 
+  // 通知父级（ProLayout）当前是否有 Tab
+  useEffect(() => {
+    onTabsChange?.(state.tabsList.length > 0);
+  }, [state.tabsList.length, onTabsChange]);
+
+  // 处理声明式固定标签页：config.fixed 中的 code 在初始化完成后自动添加，强制 closable=false
+  // 用 ref 持有 addTab，避免 addTab 引用变化引起无限循环
+  const addTabRef = useRef(addTab);
+  addTabRef.current = addTab;
+  useEffect(() => {
+    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 => {
+      const matchedMenu = sourceMenus.find(item => item.code === code);
+      const menuItem = matchedMenu ? {
+        ...matchedMenu,
+        closable: false
+      } : {
+        id: Date.now(),
+        code,
+        name: code,
+        url: `/${code}`,
+        closable: false
+      };
+      addTabRef.current(menuItem);
+    });
+  }, [isInitialized, config.fixed, dataSource]);
+
   // 处理菜单点击 - 拦截原有的菜单点击逻辑
   const handleMenuClick = useCallback(params => {
     if (params.item) {
-      // 添加到标签页
       addTab(params.item);
     }
-
-    // 如果有原始的菜单点击处理函数，也调用它
     originalOnMenuClick?.(params);
   }, [addTab, originalOnMenuClick]);
 
@@ -63,13 +96,18 @@ const TabsManager = /*#__PURE__*/forwardRef(({
         name,
         extra
       } = params;
-      const menuItem = {
+      const sourceMenus = Array.isArray(dataSource?.menus) ? flattenMenuData(dataSource.menus) : [];
+      const matchedMenu = sourceMenus.find(item => item.code === code);
+      const menuItem = matchedMenu ? {
+        ...matchedMenu,
+        // 允许外部覆盖展示名称和附加数据，但保留菜单原始 closable/url 等配置
+        name: name || matchedMenu.name,
+        extra: extra ?? matchedMenu.extra
+      } : {
         id: Date.now(),
-        // 生成临时 ID
         code,
         name,
         url: `/${code}`,
-        // 生成 URL
         extra
       };
       addTab(menuItem, options);
@@ -80,14 +118,10 @@ const TabsManager = /*#__PURE__*/forwardRef(({
       activeTabInfo: state.tabsList.find(tab => tab.id === state.activeKey),
       activeComponent: state.activeComponent
     })
-  }), [addTab, removeTab, state.tabsList, state.activeKey, state.activeComponent]);
-
-  // 处理标签切换
+  }), [addTab, removeTab, state.tabsList, state.activeKey, state.activeComponent, dataSource]);
   const handleTabChange = useCallback(activeKey => {
     switchTab(activeKey);
   }, [switchTab]);
-
-  // 处理标签关闭
   const handleTabEdit = useCallback((targetKey, action) => {
     if (action === 'remove') {
       removeTab(targetKey);
@@ -111,12 +145,11 @@ const TabsManager = /*#__PURE__*/forwardRef(({
         menuItems: config?.menuItems,
         tabMenuClick: config?.tabMenuClick
       }),
-      closable: tab.closable,
-      children: null // 内容在 renderContent() 中渲染
+      closable: false,
+      // 关闭 antd 内置 ×，由 TabItemComponent 自定义按钮处理
+      children: null
     }));
   }, [state.tabsList, state.activeKey, config?.menuItems, config?.tabMenuClick, switchTab, removeTab, closeOtherTabs, closeRightTabs, closeAllTabs]);
-
-  // 从 config 中获取组件解析函数和空状态组件
   const activeComponent = config?.activeComponent;
   const emptyComponent = config?.empty;
 
@@ -127,8 +160,6 @@ const TabsManager = /*#__PURE__*/forwardRef(({
       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",
@@ -136,12 +167,9 @@ const TabsManager = /*#__PURE__*/forwardRef(({
           }, tab.id);
         }
         let content = children;
-
-        // 如果提供了组件解析函数，尝试解析组件
         if (activeComponent && tab.menuItem?.code) {
           const ResolvedComponent = activeComponent(tab.menuItem.code);
           if (ResolvedComponent) {
-            // 将 extra 中的所有属性作为 props 传递给组件
             content = /*#__PURE__*/_jsx(ResolvedComponent, {
               ...(tab.menuItem.extra || {})
             });
@@ -160,23 +188,27 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     });
   };
 
-  // 暴露方法给父组件
+  // TabsHeader 节点：有 tabsBarContainer 时用 Portal 渲染到外部，否则原位 fallback
+  const tabsHeaderNode = state.tabsList.length > 0 ? /*#__PURE__*/_jsx(TabsHeader, {
+    activeKey: state.activeKey || undefined,
+    tabsItems: tabsItems,
+    onTabChange: handleTabChange,
+    onTabEdit: handleTabEdit,
+    draggable: config?.draggable !== false,
+    onReorder: reorderTabs
+  }) : null;
   useImperativeHandle(ref, () => ({
     handleMenuClick,
-    canAddTab
-  }), [handleMenuClick, canAddTab]);
-  return /*#__PURE__*/_jsx(TabsContext.Provider, {
+    canAddTab,
+    getTabInfo: tabsInstance.getTabInfo
+  }), [handleMenuClick, canAddTab, tabsInstance]);
+  return /*#__PURE__*/_jsxs(TabsContext.Provider, {
     value: tabsInstance,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: [tabsBarContainer ? /*#__PURE__*/createPortal(tabsHeaderNode, tabsBarContainer) : tabsHeaderNode, /*#__PURE__*/_jsx("div", {
       className: "pro-layout-tabs",
       "data-testid": "tabs-manager",
-      children: [state.tabsList.length > 0 && /*#__PURE__*/_jsx(TabsHeader, {
-        activeKey: state.activeKey || undefined,
-        tabsItems: tabsItems,
-        onTabChange: handleTabChange,
-        onTabEdit: handleTabEdit
-      }), renderContent()]
-    })
+      children: renderContent()
+    })]
   });
 });
 TabsManager.displayName = 'TabsManager';

package/es/ProLayout/components/TabsManager/propTypes.d.ts

@@ -14,6 +14,10 @@ export interface TabsManagerProps {
         key: string;
         keyPath: string[];
     }) => void;
+    /** Tab 栏的 Portal 挂载目标（由 ProLayout 提供），不传则原位渲染 */
+    tabsBarContainer?: HTMLElement | null;
+    /** Tab 有无变化回调，供 ProLayout 控制 wrapper 动画 */
+    onTabsChange?: (hasTabs: boolean) => void;
 }
 export interface TabContextMenuProps {
     tabId: string;
@@ -47,6 +51,8 @@ export interface UseTabsStateOptions {
 export interface UseTabsStateReturn {
     /** 当前状态 */
     state: TabsState;
+    /** 缓存是否已恢复完成 */
+    isInitialized: boolean;
     /** 添加标签页 */
     addTab: (menuItem: MenusType, options?: AddTabOptions) => void;
     /** 检查是否可以添加标签页 */
@@ -63,6 +69,8 @@ export interface UseTabsStateReturn {
     closeAllTabs: () => void;
     /** 重置状态 */
     resetTabs: () => void;
+    /** 重排标签页顺序 */
+    reorderTabs: (activeId: string, overId: string) => void;
 }
 export interface TabsCacheManager {
     save: (state: TabsState) => void;