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

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

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

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

@@ -9,6 +9,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { cloneDeep } from 'lodash';
 import { LayoutContext } from "../../../../index";
 import { getIdsByPathName, findMenuItemByKey } from "../../../../utils";
+import { isLeafMenuItem } from "../../../TabsManager/utils";
 import { Icon } from "../../index";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -39,16 +40,19 @@ var OpenMenu = props => {
     router = _useSetState2$.router,
     setState = _useSetState2[1];
   var query = new URLSearchParams(window.location.search);
-  var _useContext = useContext(LayoutContext),
-    onSelected = _useContext.onSelected,
-    target = _useContext.target;
+  var layoutContext = useContext(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 = classnames({
     'pro-layout-open-menu': true,
     [`${className}`]: className
   });
 
-  // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
-  var selectKeyIdPath = ((_getIdsByPathName = 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 = getIdsByPathName(menus, preferredPath)) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(item => String(item))) || [] : [];
   var itemsTransform = useMemo(() => {
     var result = cloneDeep(menus);
     if (!Array.isArray(result) || !result.length) {
@@ -105,11 +109,14 @@ var OpenMenu = props => {
     return result;
   }, [dataSource]);
   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]);
 
@@ -141,7 +148,6 @@ var OpenMenu = props => {
         });
       },
       onClick: _ref2 => {
-        var _item$props, _item$props2;
         var item = _ref2.item,
           keyPath = _ref2.keyPath,
           key = _ref2.key,
@@ -163,23 +169,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 && 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/es/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/es/ProLayout/components/TabsManager/components/TabContextMenu.js

@@ -0,0 +1,96 @@
+import "antd/es/dropdown/style";
+import _Dropdown from "antd/es/dropdown";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useCallback } from 'react';
+import { jsx as _jsx } from "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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleMenuClick = 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__*/_jsx(_Dropdown, {
+    menu: {
+      items: menuItems,
+      onClick: _ref2 => {
+        var key = _ref2.key;
+        return handleMenuClick(key);
+      }
+    },
+    trigger: ['contextMenu'],
+    open: visible,
+    onOpenChange: setVisible,
+    placement: "bottomLeft",
+    children: children
+  });
+}
+export default TabContextMenu;
+export { TabContextMenu };

package/es/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/es/ProLayout/components/TabsManager/components/TabItem.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import { TabContextMenu } from "./TabContextMenu";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "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__*/_jsx(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__*/_jsx("div", {
+      className: `pro-layout-tab-item ${active ? 'active' : ''} ${tab.closable ? 'closable' : ''}`,
+      onClick: onClick,
+      "data-testid": `tab-${tab.id}`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "pro-layout-tab-content",
+        children: [tab.icon && /*#__PURE__*/_jsx("span", {
+          className: "pro-layout-tab-icon",
+          children: typeof tab.icon === 'string' ? /*#__PURE__*/_jsx("i", {
+            className: `iconfont ${tab.icon}`
+          }) : tab.icon
+        }), /*#__PURE__*/_jsx("span", {
+          className: "pro-layout-tab-title",
+          title: tab.title,
+          children: tab.title
+        }), tab.closable && /*#__PURE__*/_jsx("span", {
+          className: "pro-layout-tab-close",
+          onClick: handleCloseClick,
+          "data-testid": `tab-close-${tab.id}`,
+          children: /*#__PURE__*/_jsx(CloseOutlined, {})
+        })]
+      })
+    })
+  });
+};
+export { TabItemComponent };

package/es/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/es/ProLayout/components/TabsManager/components/TabsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+/**
+ * 标签页实例 Context，用于在 ProLayout children 中访问标签页 API
+ */
+export var TabsContext = /*#__PURE__*/createContext(null);

package/es/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/es/ProLayout/components/TabsManager/hooks/useActiveTab.js

@@ -0,0 +1,14 @@
+import { useContext, useMemo } from 'react';
+import { TabsContext } from "../components/TabsContext";
+
+/**
+ * 获取当前激活的 Tab 信息 Hook
+ * @returns 当前激活的 Tab 对象，如果没有激活则返回 undefined
+ */
+export var useActiveTab = () => {
+  var tabsInstance = useContext(TabsContext);
+  return useMemo(() => {
+    if (!tabsInstance) return undefined;
+    return tabsInstance.getTabInfo().activeTabInfo;
+  }, [tabsInstance]);
+};

package/es/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/es/ProLayout/components/TabsManager/hooks/useProLayoutTabs.js

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

package/es/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/es/ProLayout/components/TabsManager/hooks/useTabsCache.js

@@ -0,0 +1,93 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useCallback, useMemo } from 'react';
+/**
+ * 简化的标签页缓存管理器
+ */
+class SimpleTabsCache {
+  constructor(keyPrefix, strategy) {
+    _defineProperty(this, "cacheKey", void 0);
+    _defineProperty(this, "storage", void 0);
+    this.cacheKey = `${keyPrefix}_tabs_cache`;
+    this.storage = strategy === 'localStorage' ? localStorage : sessionStorage;
+  }
+
+  /** 保存标签页状态 */
+  save(state) {
+    try {
+      var cacheData = _objectSpread(_objectSpread({}, 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
+ */
+export var useTabsCache = options => {
+  var cacheKey = options.cacheKey,
+    storage = options.storage,
+    _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled;
+
+  // 创建缓存管理器实例
+  var cacheManager = useMemo(() => {
+    if (!enabled) return null;
+    return new SimpleTabsCache(cacheKey, storage);
+  }, [cacheKey, storage, enabled]);
+
+  // 保存状态到缓存
+  var saveToCache = useCallback(state => {
+    if (cacheManager) {
+      cacheManager.save(state);
+    }
+  }, [cacheManager]);
+
+  // 从缓存恢复状态
+  var restoreFromCache = useCallback(() => {
+    if (cacheManager) {
+      return cacheManager.restore();
+    }
+    return null;
+  }, [cacheManager]);
+
+  // 清空缓存
+  var clearCache = useCallback(() => {
+    if (cacheManager) {
+      cacheManager.clear();
+    }
+  }, [cacheManager]);
+  return {
+    saveToCache,
+    restoreFromCache,
+    clearCache,
+    cacheManager
+  };
+};

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

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