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

package/es/ProLayout/utils/index.js

@@ -47,8 +47,9 @@ export var transformMenu = (menuData, pathPrefix) => {
     if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
       return [];
     }
-    menuDeepItem.forEach((item, index) => {
+    var _loop = function _loop() {
       var _item$keyUrlPath, _item$keyIdPath, _item$children;
+      var item = menuDeepItem[i];
       item.code = item.code || item.id;
       item.url = `${pathPrefix}${item.url}`;
       item.redirectUrl = item !== null && item !== void 0 && item.redirectUrl ? `${pathPrefix}${item.redirectUrl}` : '';
@@ -68,9 +69,8 @@ export var transformMenu = (menuData, pathPrefix) => {
         item.keyIdPath = [item.id];
       }
       if (!['PAGE', 'MENU'].includes(item.type)) {
-        menuDeepItem.splice(index, 1);
-      }
-      if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+        menuDeepItem.splice(i, 1);
+      } else if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
         // 给children注入keyUrlPath，keyIdPath
         item.children.forEach(childrenItem => {
           childrenItem.keyUrlPath = [...item.keyUrlPath];
@@ -78,7 +78,10 @@ export var transformMenu = (menuData, pathPrefix) => {
         });
         menuDeep(item.children);
       }
-    });
+    };
+    for (var i = menuDeepItem.length - 1; i >= 0; i -= 1) {
+      _loop();
+    }
   };
   menuDeep(data);
   return data;

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="typings" />
-export { default as ProLayout } from './ProLayout';
+export { default as ProLayout, useProLayoutTabs } from './ProLayout';
 export { default as ProStep } from './ProStep';
 export { default as ProTabs } from './ProTabs';
 export { default as ProTable } from './ProTable';
@@ -33,6 +33,7 @@ export type { ProTableType, ProTableColumnType, ProTableSummaryType, ProTableUse
 export type { ProUploadType, ProUploadProps } from './ProUpload/propsType';
 export type { ProTabsType, ProTabsItemType, ProTabsProps, ProTabsItemsProps } from './ProTabs/propType';
 export type { BreadcrumbColumnType, SubDescribeColumnType, DescribeColumnType, ProHeaderType, ProHeaderProps, BreadcrumbColumnsProps, SubDescribeColumnsProps, DescribeColumnsProps } from './ProLayout/components/ProHeader/PropTypes';
+export type { ProLayoutTabsInstance, AddTabParams, AddTabOptions } from './ProLayout/propTypes';
 export type { ProTooltipType, ProTooltipProps } from './ProTooltip/propsType';
 export type { ProIconType, ProIconProps } from './ProIcon/propsTypes';
 export type { ProTreeType, ProTreeSelectType, ProTreeProps, PropTreeSelectProps } from './ProTree/propsType';

package/es/index.js

@@ -1,7 +1,7 @@
 /// <reference path="../typings.d.ts" />;
 
 // 布局
-export { default as ProLayout } from "./ProLayout";
+export { default as ProLayout, useProLayoutTabs } from "./ProLayout";
 export { default as ProStep } from "./ProStep";
 export { default as ProTabs } from "./ProTabs";
 

package/lib/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -34,9 +34,12 @@ var FoldMenu = props => {
     'pro-layout-menu-tooltip-has-notice': notice,
     'pro-layout-menu-tooltip-nav-open': collapsed
   });
-  var _useContext = (0, _react.useContext)(_index2.LayoutContext),
-    selectedPath = _useContext.selectedPath,
-    onSelected = _useContext.onSelected;
+  var _ref = (0, _react.useContext)(_index2.LayoutContext) || {
+      selectedPath: '',
+      onSelected: () => {}
+    },
+    selectedPath = _ref.selectedPath,
+    onSelected = _ref.onSelected;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "pro-layout-menu-fold",
     style: (0, _objectSpread2.default)({}, style),
@@ -60,11 +63,12 @@ var FoldMenu = props => {
           return null;
         }
         var selectedMenu = (0, _utils.getUrlParams)('activeMenu');
+        var pathToMatch = selectedPath || selectedMenu || window.location.pathname;
 
         // 取第一级
         var currentKeyIdPath = (0, _utils.getPathNameKey)({
           menus,
-          pathName: selectedMenu || selectedPath || window.location.pathname // 优先匹配URL中定位菜单
+          pathName: pathToMatch // 优先匹配上下文路径
         }) || [];
         var cls = (0, _classnames.default)({
           active: currentKeyIdPath.includes(id)

package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -16,6 +16,7 @@ var _reactRouterDom = require("react-router-dom");
 var _lodash = require("lodash");
 var _index = require("../../../../index");
 var _utils = require("../../../../utils");
+var _utils2 = require("../../../TabsManager/utils");
 var _index2 = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 var Link = _reactRouterDom.Link;
@@ -44,16 +45,19 @@ var OpenMenu = props => {
     router = _useSetState2$.router,
     setState = _useSetState2[1];
   var query = new URLSearchParams(window.location.search);
-  var _useContext = (0, _react.useContext)(_index.LayoutContext),
-    onSelected = _useContext.onSelected,
-    target = _useContext.target;
+  var layoutContext = (0, _react.useContext)(_index.LayoutContext);
+  var layoutSelectedPath = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.selectedPath;
+  var layoutOnSelected = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.onSelected;
+  var layoutTarget = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.target;
   var cls = (0, _classnames.default)({
     'pro-layout-open-menu': true,
     [`${className}`]: className
   });
 
-  // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
-  var selectKeyIdPath = ((_getIdsByPathName = (0, _utils.getIdsByPathName)(menus, query.get('activeMenu'))) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(item => String(item))) || [];
+  // 默认激活菜单优先取selectedPath或activeMenu，默认取pathName进行匹配
+  // 特殊处理：如果layoutSelectedPath是'##EMPTY##'，表示有意清空选中状态
+  var preferredPath = query.get('activeMenu') || (layoutSelectedPath === '##EMPTY##' ? null : layoutSelectedPath) || window.location.pathname;
+  var selectKeyIdPath = preferredPath ? ((_getIdsByPathName = (0, _utils.getIdsByPathName)(menus, preferredPath)) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(item => String(item))) || [] : [];
   var itemsTransform = (0, _react.useMemo)(() => {
     var result = (0, _lodash.cloneDeep)(menus);
     if (!Array.isArray(result) || !result.length) {
@@ -110,11 +114,14 @@ var OpenMenu = props => {
     return result;
   }, [dataSource]);
   (0, _ahooks.useDeepCompareEffect)(() => {
-    if (Array.isArray(selectKeyIdPath) && selectKeyIdPath.length) {
-      setState({
-        selectedKeys: selectKeyIdPath,
-        openKeys: selectKeyIdPath.slice(0, 2)
-      });
+    if (Array.isArray(selectKeyIdPath)) {
+      var newState = {
+        selectedKeys: selectKeyIdPath
+      };
+      if (selectKeyIdPath.length) {
+        newState.openKeys = selectKeyIdPath.slice(0, 2);
+      }
+      setState(newState);
     }
   }, [menus, selectKeyIdPath]);
 
@@ -146,7 +153,6 @@ var OpenMenu = props => {
         });
       },
       onClick: _ref2 => {
-        var _item$props, _item$props2;
         var item = _ref2.item,
           keyPath = _ref2.keyPath,
           key = _ref2.key,
@@ -168,23 +174,28 @@ var OpenMenu = props => {
             keyPath: menuKeyPath
           });
         }
-        setState({
-          selectedKeys: keyPath,
-          router: item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router
-        });
-        onSelected({
-          selectedPath: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.router
-        });
-        if (target) {
-          var _item$props3;
-          window.open(item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.router, target);
-        } else {
-          setTimeout(() => {
-            // 路由变更，且不再demo文档中
-            if (!window.location.href.includes('~demos/prolayout')) {
-              linkRef.current.click();
-            }
-          }, 100);
+
+        // 只有最后一级菜单（叶子节点）才设置选中状态和路径
+        if (menuItem && (0, _utils2.isLeafMenuItem)(menuItem)) {
+          var _item$props, _item$props2;
+          setState({
+            selectedKeys: keyPath,
+            router: item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router
+          });
+          layoutOnSelected === null || layoutOnSelected === void 0 || layoutOnSelected({
+            selectedPath: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.router
+          });
+          if (layoutTarget) {
+            var _item$props3;
+            window.open(item === null || item === void 0 || (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.router, layoutTarget);
+          } else {
+            setTimeout(() => {
+              // 路由变更，且不再demo文档中
+              if (!window.location.href.includes('~demos/prolayout')) {
+                linkRef.current.click();
+              }
+            }, 100);
+          }
         }
       },
       style: {

package/lib/ProLayout/components/TabsManager/components/TabContextMenu.d.ts

@@ -0,0 +1,7 @@
+import { TabContextMenuProps } from '../propTypes';
+/**
+ * 右键菜单组件 - 兼容Antd 4.x和5.x
+ */
+declare function TabContextMenu({ tabId, children, closable, onClose, onCloseOthers, onCloseRight, onCloseAll, menuItems: customMenuItems, tabMenuClick, tab, tabs, }: TabContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export default TabContextMenu;
+export { TabContextMenu };

package/lib/ProLayout/components/TabsManager/components/TabContextMenu.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContextMenu = TabContextMenu;
+exports.default = void 0;
+require("antd/es/dropdown/style");
+var _dropdown = _interopRequireDefault(require("antd/es/dropdown"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 右键菜单组件 - 兼容Antd 4.x和5.x
+ */
+function TabContextMenu(_ref) {
+  var tabId = _ref.tabId,
+    children = _ref.children,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    onClose = _ref.onClose,
+    onCloseOthers = _ref.onCloseOthers,
+    onCloseRight = _ref.onCloseRight,
+    onCloseAll = _ref.onCloseAll,
+    customMenuItems = _ref.menuItems,
+    tabMenuClick = _ref.tabMenuClick,
+    tab = _ref.tab,
+    _ref$tabs = _ref.tabs,
+    tabs = _ref$tabs === void 0 ? [] : _ref$tabs;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleMenuClick = (0, _react.useCallback)(key => {
+    setVisible(false);
+
+    // 优先调用自定义回调
+    if (tabMenuClick && tab) {
+      tabMenuClick({
+        key,
+        tab,
+        tabs
+      });
+    }
+
+    // 处理默认菜单项
+    switch (key) {
+      case 'close':
+        if (!closable) {
+          return;
+        }
+        onClose(tabId);
+        break;
+      case 'closeOthers':
+        onCloseOthers(tabId);
+        break;
+      case 'closeRight':
+        onCloseRight(tabId);
+        break;
+      case 'closeAll':
+        onCloseAll();
+        break;
+    }
+  }, [tabId, closable, onClose, onCloseOthers, onCloseRight, onCloseAll, tabMenuClick, tab, tabs]);
+
+  // 默认右键菜单配置 - 统一使用items方式（antd 4.20+都支持）
+  var defaultMenuItems = [{
+    key: 'close',
+    label: '关闭',
+    disabled: !closable
+  }, {
+    key: 'closeOthers',
+    label: '关闭其他'
+  }, {
+    key: 'closeRight',
+    label: '关闭右侧标签页'
+  }, {
+    key: 'closeAll',
+    label: '关闭全部'
+  }];
+
+  // 合并自定义菜单项和默认菜单项
+  // 如果提供了自定义菜单项，则追加到默认菜单项后面；否则使用默认菜单项
+  var menuItems = customMenuItems && customMenuItems.length > 0 ? [...defaultMenuItems, {
+    type: 'divider'
+  }, ...customMenuItems] : defaultMenuItems;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
+    menu: {
+      items: menuItems,
+      onClick: _ref2 => {
+        var key = _ref2.key;
+        return handleMenuClick(key);
+      }
+    },
+    trigger: ['contextMenu'],
+    open: visible,
+    onOpenChange: setVisible,
+    placement: "bottomLeft",
+    children: children
+  });
+}
+var _default = exports.default = TabContextMenu;

package/lib/ProLayout/components/TabsManager/components/TabItem.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TabItem } from '../../../propTypes';
+interface TabItemComponentProps {
+    tab: TabItem;
+    active: boolean;
+    onClick: () => void;
+    onClose: () => void;
+    onCloseOthers: () => void;
+    onCloseRight: () => void;
+    onCloseAll: () => void;
+    /** 所有标签页列表 */
+    tabsList?: TabItem[];
+    /** 自定义菜单项 */
+    menuItems?: import('antd').MenuProps['items'];
+    /** 自定义菜单项点击回调 */
+    tabMenuClick?: (params: {
+        key: string;
+        tab: TabItem;
+        tabs: TabItem[];
+    }) => void;
+}
+/**
+ * 单个标签页组件
+ */
+declare const TabItemComponent: React.FC<TabItemComponentProps>;
+export { TabItemComponent };

package/lib/ProLayout/components/TabsManager/components/TabItem.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabItemComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@ant-design/icons");
+var _TabContextMenu = require("./TabContextMenu");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 单个标签页组件
+ */
+var TabItemComponent = _ref => {
+  var tab = _ref.tab,
+    active = _ref.active,
+    onClick = _ref.onClick,
+    _onClose = _ref.onClose,
+    _onCloseOthers = _ref.onCloseOthers,
+    _onCloseRight = _ref.onCloseRight,
+    onCloseAll = _ref.onCloseAll,
+    _ref$tabsList = _ref.tabsList,
+    tabsList = _ref$tabsList === void 0 ? [] : _ref$tabsList,
+    menuItems = _ref.menuItems,
+    tabMenuClick = _ref.tabMenuClick;
+  var handleCloseClick = e => {
+    e.stopPropagation();
+    _onClose();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContextMenu.TabContextMenu, {
+    tabId: tab.id,
+    closable: tab.closable,
+    onClose: () => _onClose(),
+    onCloseOthers: () => _onCloseOthers(),
+    onCloseRight: () => _onCloseRight(),
+    onCloseAll: onCloseAll,
+    tab: tab,
+    tabs: tabsList,
+    menuItems: menuItems,
+    tabMenuClick: tabMenuClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `pro-layout-tab-item ${active ? 'active' : ''} ${tab.closable ? 'closable' : ''}`,
+      onClick: onClick,
+      "data-testid": `tab-${tab.id}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "pro-layout-tab-content",
+        children: [tab.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "pro-layout-tab-icon",
+          children: typeof tab.icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: `iconfont ${tab.icon}`
+          }) : tab.icon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "pro-layout-tab-title",
+          title: tab.title,
+          children: tab.title
+        }), tab.closable && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "pro-layout-tab-close",
+          onClick: handleCloseClick,
+          "data-testid": `tab-close-${tab.id}`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {})
+        })]
+      })
+    })
+  });
+};
+exports.TabItemComponent = TabItemComponent;

package/lib/ProLayout/components/TabsManager/components/TabsContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ProLayoutTabsInstance } from '../../../propTypes';
+/**
+ * 标签页实例 Context，用于在 ProLayout children 中访问标签页 API
+ */
+export declare const TabsContext: import("react").Context<ProLayoutTabsInstance>;

package/lib/ProLayout/components/TabsManager/components/TabsContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsContext = void 0;
+var _react = require("react");
+/**
+ * 标签页实例 Context，用于在 ProLayout children 中访问标签页 API
+ */
+var TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/ProLayout/components/TabsManager/hooks/useActiveTab.d.ts

@@ -0,0 +1,6 @@
+import { TabItem } from '../../../propTypes';
+/**
+ * 获取当前激活的 Tab 信息 Hook
+ * @returns 当前激活的 Tab 对象，如果没有激活则返回 undefined
+ */
+export declare const useActiveTab: () => TabItem | undefined;

package/lib/ProLayout/components/TabsManager/hooks/useActiveTab.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActiveTab = void 0;
+var _react = require("react");
+var _TabsContext = require("../components/TabsContext");
+/**
+ * 获取当前激活的 Tab 信息 Hook
+ * @returns 当前激活的 Tab 对象，如果没有激活则返回 undefined
+ */
+var useActiveTab = () => {
+  var tabsInstance = (0, _react.useContext)(_TabsContext.TabsContext);
+  return (0, _react.useMemo)(() => {
+    if (!tabsInstance) return undefined;
+    return tabsInstance.getTabInfo().activeTabInfo;
+  }, [tabsInstance]);
+};
+exports.useActiveTab = useActiveTab;

package/lib/ProLayout/components/TabsManager/hooks/useProLayoutTabs.d.ts

@@ -0,0 +1,18 @@
+import type { ProLayoutTabsInstance } from '../../../propTypes';
+/**
+ * @description 获取 ProLayout 标签页实例的 Hook（类似 Form.useForm）
+ * @returns [ProLayoutTabsInstance] 标签页实例
+ * @example
+ * ```tsx
+ * // 在 ProLayout children 中使用
+ * const [layoutTabs] = useProLayoutTabs();
+ *
+ * // 使用实例方法
+ * layoutTabs.addTab({
+ *   code: 'PolicyInput',
+ *   name: '投保单录入',
+ *   extra: { customData: '自定义数据' }
+ * });
+ * ```
+ */
+export declare function useProLayoutTabs(): [ProLayoutTabsInstance];

package/lib/ProLayout/components/TabsManager/hooks/useProLayoutTabs.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProLayoutTabs = useProLayoutTabs;
+var _react = require("react");
+var _TabsContext = require("../components/TabsContext");
+/**
+ * @description 获取 ProLayout 标签页实例的 Hook（类似 Form.useForm）
+ * @returns [ProLayoutTabsInstance] 标签页实例
+ * @example
+ * ```tsx
+ * // 在 ProLayout children 中使用
+ * const [layoutTabs] = useProLayoutTabs();
+ *
+ * // 使用实例方法
+ * layoutTabs.addTab({
+ *   code: 'PolicyInput',
+ *   name: '投保单录入',
+ *   extra: { customData: '自定义数据' }
+ * });
+ * ```
+ */
+function useProLayoutTabs() {
+  var context = (0, _react.useContext)(_TabsContext.TabsContext);
+  if (!context) {
+    throw new Error('useProLayoutTabs must be used within ProLayout with mode="tabs"');
+  }
+  return [context];
+}

package/lib/ProLayout/components/TabsManager/hooks/useTabsCache.d.ts

@@ -0,0 +1,31 @@
+import { TabsState } from '../../../propTypes';
+import { TabsCacheManager } from '../propTypes';
+/**
+ * 简化的标签页缓存管理器
+ */
+declare class SimpleTabsCache implements TabsCacheManager {
+    private cacheKey;
+    private storage;
+    constructor(keyPrefix: string, strategy: 'localStorage' | 'sessionStorage');
+    /** 保存标签页状态 */
+    save(state: TabsState): void;
+    /** 恢复标签页状态 */
+    restore(): TabsState | null;
+    /** 清空缓存 */
+    clear(): void;
+}
+interface UseTabsCacheOptions {
+    cacheKey: string;
+    storage: 'localStorage' | 'sessionStorage';
+    enabled?: boolean;
+}
+/**
+ * 标签页缓存管理Hook
+ */
+export declare const useTabsCache: (options: UseTabsCacheOptions) => {
+    saveToCache: (state: TabsState) => void;
+    restoreFromCache: () => TabsState | null;
+    clearCache: () => void;
+    cacheManager: SimpleTabsCache;
+};
+export {};

package/lib/ProLayout/components/TabsManager/hooks/useTabsCache.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabsCache = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+/**
+ * 简化的标签页缓存管理器
+ */
+class SimpleTabsCache {
+  constructor(keyPrefix, strategy) {
+    (0, _defineProperty2.default)(this, "cacheKey", void 0);
+    (0, _defineProperty2.default)(this, "storage", void 0);
+    this.cacheKey = `${keyPrefix}_tabs_cache`;
+    this.storage = strategy === 'localStorage' ? localStorage : sessionStorage;
+  }
+
+  /** 保存标签页状态 */
+  save(state) {
+    try {
+      var cacheData = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        timestamp: Date.now()
+      });
+      this.storage.setItem(this.cacheKey, JSON.stringify(cacheData));
+    } catch (error) {
+      console.warn('标签页缓存保存失败:', error);
+    }
+  }
+
+  /** 恢复标签页状态 */
+  restore() {
+    try {
+      var cached = this.storage.getItem(this.cacheKey);
+      if (!cached) return null;
+      var cacheData = JSON.parse(cached);
+      // 移除时间戳字段
+      delete cacheData.timestamp;
+      return cacheData;
+    } catch (error) {
+      console.warn('标签页缓存恢复失败:', error);
+      return null;
+    }
+  }
+
+  /** 清空缓存 */
+  clear() {
+    try {
+      this.storage.removeItem(this.cacheKey);
+    } catch (error) {
+      console.warn('标签页缓存清空失败:', error);
+    }
+  }
+}
+/**
+ * 标签页缓存管理Hook
+ */
+var useTabsCache = options => {
+  var cacheKey = options.cacheKey,
+    storage = options.storage,
+    _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled;
+
+  // 创建缓存管理器实例
+  var cacheManager = (0, _react.useMemo)(() => {
+    if (!enabled) return null;
+    return new SimpleTabsCache(cacheKey, storage);
+  }, [cacheKey, storage, enabled]);
+
+  // 保存状态到缓存
+  var saveToCache = (0, _react.useCallback)(state => {
+    if (cacheManager) {
+      cacheManager.save(state);
+    }
+  }, [cacheManager]);
+
+  // 从缓存恢复状态
+  var restoreFromCache = (0, _react.useCallback)(() => {
+    if (cacheManager) {
+      return cacheManager.restore();
+    }
+    return null;
+  }, [cacheManager]);
+
+  // 清空缓存
+  var clearCache = (0, _react.useCallback)(() => {
+    if (cacheManager) {
+      cacheManager.clear();
+    }
+  }, [cacheManager]);
+  return {
+    saveToCache,
+    restoreFromCache,
+    clearCache,
+    cacheManager
+  };
+};
+exports.useTabsCache = useTabsCache;

package/lib/ProLayout/components/TabsManager/hooks/useTabsState.d.ts

@@ -0,0 +1,5 @@
+import { UseTabsStateOptions, UseTabsStateReturn } from '../propTypes';
+/**
+ * 标签页状态管理Hook
+ */
+export declare const useTabsState: (options: UseTabsStateOptions) => UseTabsStateReturn;