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

package/es/ProForm/components/combination/Group/component/AddonWrapper/index.js

@@ -9,11 +9,20 @@ const AddonWrapper = props => {
   } = props;
   return /*#__PURE__*/_jsxs("div", {
     className: "addon-wrapper",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px'
+    },
     children: [before && /*#__PURE__*/_jsx("div", {
-      className: "before",
+      style: {
+        whiteSpace: 'nowrap'
+      },
       children: before
     }), children, after && /*#__PURE__*/_jsx("div", {
-      className: "after",
+      style: {
+        whiteSpace: 'nowrap'
+      },
       children: after
     })]
   });

package/es/ProForm/components/combination/Group/style/index.less

@@ -1,4 +1,5 @@
 @import '../../../../../style/variables.less';
+@import '../component/AddonWrapper/index.less';
 
 .pro-group {
   display: flex;
@@ -115,7 +116,7 @@
 
         // 确保输入框完全贴合
         .@{ant-prefix}-input,
-        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-select .@{ant-prefix}-select-content,
         .@{ant-prefix}-input-number,
         .@{ant-prefix}-input-number-input {
           // 重置z-index确保正确的层级关系
@@ -127,7 +128,7 @@
         // 第一个表单项：左边保持圆角
         &:first-child {
           .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number,
           .@{ant-prefix}-input-number-input {
             border-top-left-radius: 6px;
@@ -138,7 +139,7 @@
         // 最后一个表单项：右边保持圆角
         &:last-child {
           .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number,
           .@{ant-prefix}-input-number-input {
             border-top-right-radius: 6px;
@@ -154,7 +155,7 @@
 
           // 聚焦时恢复左边框
           .@{ant-prefix}-input:focus,
-          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number:focus,
           .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
             margin-left: -1px;
@@ -165,7 +166,7 @@
         // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
         &.@{ant-prefix}-form-item-has-error {
           .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number,
           .@{ant-prefix}-input-number-input {
             border-color: #ff4d4f !important;
@@ -174,7 +175,7 @@
           // 错误状态下，中间元素也需要恢复左边框并设置为红色
           &:not(:first-child) {
             .@{ant-prefix}-input,
-            .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+            .@{ant-prefix}-select .@{ant-prefix}-select-content,
             .@{ant-prefix}-input-number {
               border-left-color: #ff4d4f !important;
               border-left-width: 1px !important;
@@ -187,14 +188,14 @@
 
           // 聚焦时保持红色边框
           .@{ant-prefix}-input:focus,
-          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number:focus,
           .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
             border-color: #ff4d4f !important;
           }
 
           // Select 组件的错误状态处理
-          .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-selector {
+          .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-content {
             border-color: #ff4d4f !important;
           }
         }
@@ -317,37 +318,40 @@
         }
 
         // 确保输入框完全贴合
+        .@{ant-prefix}-input-affix-wrapper,
         .@{ant-prefix}-input,
-        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-select .@{ant-prefix}-select-content,
         .@{ant-prefix}-input-number,
         .@{ant-prefix}-input-number-input,
         .@{ant-prefix}-picker {
           // 重置z-index确保正确的层级关系
           position: relative;
-          // 重置圆角
-          border-radius: 0;
+          // 重置圆角（!important 确保覆盖 antd v6 CSS-in-JS 懒注入的 disabled 等状态样式）
+          border-radius: 0 !important;
         }
 
         // 第一个表单项：左边保持圆角
         &:first-child {
+          .@{ant-prefix}-input-affix-wrapper,
           .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number,
           .@{ant-prefix}-input-number-input {
-            border-top-left-radius: 6px;
-            border-bottom-left-radius: 6px;
+            border-top-left-radius: 6px !important;
+            border-bottom-left-radius: 6px !important;
           }
         }
 
         // 最后一个表单项：右边保持圆角
         &:last-child {
+          .@{ant-prefix}-input-affix-wrapper,
           .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number,
           .@{ant-prefix}-input-number-input,
           .@{ant-prefix}-picker {
-            border-top-right-radius: 6px;
-            border-bottom-right-radius: 6px;
+            border-top-right-radius: 6px !important;
+            border-bottom-right-radius: 6px !important;
           }
         }
 
@@ -355,7 +359,7 @@
         &:not(:first-child) {
           // 聚焦时恢复左边框
           .@{ant-prefix}-input:focus,
-          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
           .@{ant-prefix}-input-number:focus,
           .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
             margin-left: -1px;
@@ -426,7 +430,7 @@
   &:not(.pro-group-flexible) {
     // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
     .@{ant-prefix}-input,
-    .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+    .@{ant-prefix}-select .@{ant-prefix}-select-content,
     .@{ant-prefix}-input-number,
     .@{ant-prefix}-input-number-input {
       border-color: #ff4d4f !important;
@@ -435,7 +439,7 @@
     // 错误状态下，中间元素也需要恢复左边框并设置为红色
     &:not(:first-child) {
       .@{ant-prefix}-input,
-      .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+      .@{ant-prefix}-select .@{ant-prefix}-select-content,
       .@{ant-prefix}-input-number {
         border-left-color: #ff4d4f !important;
         border-left-width: 1px !important;
@@ -448,14 +452,14 @@
 
     // 聚焦时保持红色边框
     .@{ant-prefix}-input:focus,
-    .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+    .@{ant-prefix}-select:focus .@{ant-prefix}-select-content,
     .@{ant-prefix}-input-number:focus,
     .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
       border-color: #ff4d4f !important;
     }
 
     // Select 组件的错误状态处理
-    .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-selector {
+    .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-content {
       border-color: #ff4d4f !important;
     }
   }
@@ -464,8 +468,10 @@
 // compact模式容器, 修复antd6定制模式下，Group组件内嵌套Form.Item时，表单样式问题
 .pro-group-compact-container {
   .@{ant-prefix}-select {
-    border-radius: 0;
-    border-radius: 0;
+    border-radius: 0 !important;
+  }
+  .@{ant-prefix}-input-affix-wrapper {
+    border-radius: 0 !important;
   }
 
   > .pro-group-form-item:not(:first-child) {
@@ -492,9 +498,10 @@
   > .pro-group-form-item:first-child {
     .pro-select .@{ant-prefix}-select,
     .@{ant-prefix}-select,
+    .@{ant-prefix}-input-affix-wrapper,
     .@{ant-prefix}-input-number {
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
+      border-top-left-radius: 6px !important;
+      border-bottom-left-radius: 6px !important;
     }
   }
 
@@ -502,9 +509,10 @@
   > .pro-group-form-item:last-child {
     .pro-select .@{ant-prefix}-select,
     .@{ant-prefix}-select,
+    .@{ant-prefix}-input-affix-wrapper,
     .@{ant-prefix}-input-number {
-      border-top-right-radius: 6px;
-      border-bottom-right-radius: 6px;
+      border-top-right-radius: 6px !important;
+      border-bottom-right-radius: 6px !important;
     }
   }
 }

package/es/ProForm/components/combination/Group/utils/index.d.ts

@@ -75,31 +75,36 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     confirm?: boolean | import("antd").ModalFuncProps | import("../../../render/propsType").FunctionArgs<any, boolean | import("antd").ModalFuncProps>;
     show?: boolean | ReactiveFunction<any, boolean>;
     component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
+    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
     trim?: boolean;
     normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
-    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
     className?: string;
     style?: React.CSSProperties;
-    prefixCls?: string;
-    trigger?: string;
+    preserve?: boolean;
     id?: string;
-    isView?: boolean;
-    rootClassName?: string;
     hidden?: boolean;
     onReset?: () => void;
-    status?: "" | "warning" | "error" | "success" | "validating";
+    prefixCls?: string;
+    rootClassName?: string;
+    layout?: import("antd/es/form/Form").FormItemLayout;
+    help?: React.ReactNode;
     vertical?: boolean;
-    validateTrigger?: string | false | string[];
-    preserve?: boolean;
     htmlFor?: string;
-    colon?: boolean;
+    trigger?: string;
+    status?: "" | "warning" | "error" | "success" | "validating";
+    isView?: boolean;
+    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
+    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
+    validateTrigger?: string | false | string[];
+    clearNotShow?: boolean;
     labelAlign?: import("antd/es/form/interface").FormLabelAlign;
+    colon?: boolean;
     labelCol?: import("antd").ColProps;
+    wrapperCol?: import("antd").ColProps;
     getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
     shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
     validateDebounce?: number;
     valuePropName?: string;
-    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
     messageVariables?: Record<string, string>;
     initialValue?: any;
     onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
@@ -110,9 +115,6 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
         icons: import("antd/es/form/FormItem").FeedbackIcons;
     };
     validateStatus?: "" | "warning" | "error" | "success" | "validating";
-    layout?: import("antd/es/form/Form").FormItemLayout;
-    wrapperCol?: import("antd").ColProps;
-    help?: React.ReactNode;
     fieldId?: string;
     valueType?: import("../../../render/propsType").ProFormValueType;
     switchValue?: [any, any];
@@ -125,8 +127,6 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     upperCase?: boolean;
     toISOString?: boolean;
     toCSTString?: boolean;
-    clearNotShow?: boolean;
-    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
     name: any;
     dependencies: any[];
     tooltip: string | {
@@ -141,7 +141,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
  * 创建组件属性
  */
 export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
-    componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
+    componentProps: import("lodash").Omit<any, "format" | "clearNotShow" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "precision">;
     formItemTransform: {
         getValueProps: any;
         normalize: any;

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

@@ -4,9 +4,7 @@ export interface TabsHeaderProps {
     tabsItems: TabsProps['items'];
     onTabChange: (activeKey: string) => void;
     onTabEdit: (targetKey: string, action: 'add' | 'remove') => void;
+    draggable?: boolean;
+    onReorder?: (activeId: string, overId: string) => void;
 }
-/**
- * 标签页头部：监听 window 滚动（实际滚动在 window/documentElement，非 body），
- * 滚动时添加阴影类名；仅此组件随滚动重渲染，不带动父组件内容区。
- */
-export declare function TabsHeader({ activeKey, tabsItems, onTabChange, onTabEdit }: TabsHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsHeader({ activeKey, tabsItems, onTabChange, onTabEdit, draggable, onReorder, }: TabsHeaderProps): import("react/jsx-runtime").JSX.Element;

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,5 +1,6 @@
 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";
@@ -332,6 +333,21 @@ export const useTabsState = options => {
     });
   }, [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)
+      };
+    });
+  }, []);
+
   /**
    * 重置状态
    */
@@ -388,6 +404,7 @@ export const useTabsState = options => {
     closeOtherTabs,
     closeRightTabs,
     closeAllTabs,
-    resetTabs
+    resetTabs,
+    reorderTabs
   };
 };

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

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useTabsState } from "./hooks/useTabsState";
 import { TabItemComponent } from "./components/TabItem";
 import { TabsHeader } from "./components/TabsHeader";
@@ -12,9 +13,10 @@ const TabsManager = /*#__PURE__*/forwardRef(({
   config,
   children,
   dataSource,
-  originalOnMenuClick
+  originalOnMenuClick,
+  tabsBarContainer,
+  onTabsChange
 }, ref) => {
-  // 使用标签页状态管理Hook
   const {
     state,
     addTab,
@@ -23,7 +25,8 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     switchTab,
     closeOtherTabs,
     closeRightTabs,
-    closeAllTabs
+    closeAllTabs,
+    reorderTabs
   } = useTabsState({
     config,
     dataSource
@@ -44,14 +47,16 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     }
   }, [state.activeKey]);
 
+  // 通知父级（ProLayout）当前是否有 Tab
+  useEffect(() => {
+    onTabsChange?.(state.tabsList.length > 0);
+  }, [state.tabsList.length, onTabsChange]);
+
   // 处理菜单点击 - 拦截原有的菜单点击逻辑
   const handleMenuClick = useCallback(params => {
     if (params.item) {
-      // 添加到标签页
       addTab(params.item);
     }
-
-    // 如果有原始的菜单点击处理函数，也调用它
     originalOnMenuClick?.(params);
   }, [addTab, originalOnMenuClick]);
 
@@ -65,11 +70,9 @@ const TabsManager = /*#__PURE__*/forwardRef(({
       } = params;
       const menuItem = {
         id: Date.now(),
-        // 生成临时 ID
         code,
         name,
         url: `/${code}`,
-        // 生成 URL
         extra
       };
       addTab(menuItem, options);
@@ -81,13 +84,9 @@ const TabsManager = /*#__PURE__*/forwardRef(({
       activeComponent: state.activeComponent
     })
   }), [addTab, removeTab, state.tabsList, state.activeKey, state.activeComponent]);
-
-  // 处理标签切换
   const handleTabChange = useCallback(activeKey => {
     switchTab(activeKey);
   }, [switchTab]);
-
-  // 处理标签关闭
   const handleTabEdit = useCallback((targetKey, action) => {
     if (action === 'remove') {
       removeTab(targetKey);
@@ -111,12 +110,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 +125,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 +132,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 +153,26 @@ 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, {
+  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;
@@ -63,6 +67,8 @@ export interface UseTabsStateReturn {
     closeAllTabs: () => void;
     /** 重置状态 */
     resetTabs: () => void;
+    /** 重排标签页顺序 */
+    reorderTabs: (activeId: string, overId: string) => void;
 }
 export interface TabsCacheManager {
     save: (state: TabsState) => void;