@zat-design/sisyphus-react 4.5.5 → 4.5.6-beta.2

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

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import type { MenuProps } from 'antd';
+import { TabsState, MenusType, DataSourceType, TabsConfig, AddTabOptions, TabItem, UpdateTabParams } from '../../propTypes';
+export interface TabsManagerProps {
+    /** 标签页配置 */
+    config: TabsConfig;
+    /** 子元素内容 */
+    children: ReactNode;
+    /** 菜单数据源 */
+    dataSource: DataSourceType | Partial<MenusType>;
+    /** 原始菜单点击处理 */
+    originalOnMenuClick?: (params: {
+        item: MenusType | null;
+        key: string;
+        keyPath: string[];
+    }) => void;
+    /** Tab 栏的 Portal 挂载目标（由 ProLayout 提供），不传则原位渲染 */
+    tabsBarContainer?: HTMLElement | null;
+    /** Tab 有无变化回调，供 ProLayout 控制 wrapper 动画 */
+    onTabsChange?: (hasTabs: boolean) => void;
+    /** iframe pure 模式变化回调,供 ProLayout 决定是否隐藏外壳 */
+    onIframePureChange?: (pure: boolean) => void;
+}
+export interface TabContextMenuProps {
+    tabId: string;
+    children: React.ReactElement;
+    closable?: boolean;
+    onClose: (tabId: string) => void;
+    onCloseOthers: (tabId: string) => void;
+    onCloseRight: (tabId: string) => void;
+    onCloseAll: () => void;
+    /** 自定义菜单项，会与默认菜单项合并 */
+    menuItems?: MenuProps['items'];
+    /** 自定义菜单项点击回调 */
+    tabMenuClick?: (params: {
+        key: string;
+        tab: TabItem;
+        tabs: TabItem[];
+    }) => void;
+    /** 当前标签页信息 */
+    tab?: TabItem;
+    /** 所有标签页列表 */
+    tabs?: TabItem[];
+}
+export interface UseTabsStateOptions {
+    /** 初始状态 */
+    initialState?: Partial<TabsState>;
+    /** 配置 */
+    config: TabsManagerProps['config'];
+    /** 数据源 */
+    dataSource?: TabsManagerProps['dataSource'];
+    /** 是否启用缓存(读+写),默认 true。iframe pure 模式下传 false */
+    cacheEnabled?: boolean;
+}
+export interface UseTabsStateReturn {
+    /** 当前状态 */
+    state: TabsState;
+    /** 缓存是否已恢复完成 */
+    isInitialized: boolean;
+    /** 添加标签页 */
+    addTab: (menuItem: MenusType, options?: AddTabOptions) => void;
+    /** 检查是否可以添加标签页 */
+    canAddTab: (menuItem: MenusType, options?: AddTabOptions) => boolean;
+    /** 移除标签页 */
+    removeTab: (tabId: string) => void;
+    /** 更新指定 id 的标签页字段（替换语义；找不到时 no-op） */
+    updateTab: (tabId: string, updates: UpdateTabParams) => void;
+    /** 切换标签页 */
+    switchTab: (tabId: string) => void;
+    /** 关闭其他标签页 */
+    closeOtherTabs: (currentTabId: string) => void;
+    /** 关闭右侧标签页 */
+    closeRightTabs: (currentTabId: string) => void;
+    /** 关闭全部标签页 */
+    closeAllTabs: () => void;
+    /** 重置状态 */
+    resetTabs: () => void;
+    /** 重排标签页顺序 */
+    reorderTabs: (activeId: string, overId: string) => void;
+}
+export interface TabsCacheManager {
+    save: (state: TabsState) => void;
+    restore: () => TabsState | null;
+    clear: () => void;
+}
+export declare const DEFAULT_TABS_CONFIG: {
+    storage: "localStorage";
+    cacheKey: string;
+};

package/es/ProLayout/components/TabsManager/style/index.less

@@ -84,10 +84,13 @@
       margin: 0;
       padding: 0;
       border-bottom: none;
+    }
 
-      &::before {
-        display: none; // 隐藏底部边框
-      }
+    // 横线右端缩短，空出圆角半径，让横线在圆弧起点处结束
+    // 用属性选择器提升权重，确保覆盖 antd :where() 规则
+    .@{ant-prefix}-tabs-nav[class]::before {
+      right: var(--zaui-border-radius, 8px) !important;
+      left: 0 !important;
     }
 
     // 覆盖 nav-list 样式，使其匹配 pro-layout-tab-list

package/es/ProLayout/components/TabsManager/utils/index.d.ts

@@ -0,0 +1,47 @@
+import { TabItem, MenusType } from '../../../propTypes';
+/**
+ * 获取菜单实际用于路由/签页的路径
+ * 约定优先使用 redirectUrl，其次回退 url
+ */
+export declare const getMenuRoute: (menuItem: MenusType) => string;
+/**
+ * 根据菜单项生成TabItem
+ */
+export declare const createTabFromMenu: (menuItem: MenusType, index?: number) => TabItem;
+/**
+ * 生成唯一的tab ID
+ */
+export declare const generateTabId: (menuItem: MenusType, existingIds: string[]) => string;
+/**
+ * 检查菜单项是否应该外部跳转
+ */
+export declare const shouldOpenExternal: (menuItem: MenusType, target?: string) => boolean;
+/**
+ * 处理外部跳转
+ */
+export declare const handleExternalOpen: (menuItem: MenusType) => void;
+/**
+ * 检查是否超出最大标签页限制
+ * @param currentTabs 当前标签页列表
+ * @param maxTabs 最大标签页数量，如果为 undefined 或 null，表示无限制
+ * @returns 如果超出限制返回 true，否则返回 false
+ */
+export declare const checkTabLimit: (currentTabs: TabItem[], maxTabs?: number | null) => boolean;
+/**
+ * 获取右侧标签页
+ */
+export declare const getRightTabs: (tabs: TabItem[], currentTabId: string) => TabItem[];
+/**
+ * 扁平化菜单数据
+ */
+export declare const flattenMenuData: (menus?: MenusType[]) => MenusType[];
+/**
+ * 判断菜单项是否为最后一级（叶子节点）
+ * 只有当菜单项没有子菜单或子菜单为空时，才认为是叶子节点
+ */
+export declare const isLeafMenuItem: (menuItem: MenusType) => boolean;
+/**
+ * 判断菜单项是否可以在 Tabs 模式下打开
+ * 规则：只有叶子节点（无 children）才可打开
+ */
+export declare const canOpenAsTab: (menuItem: MenusType) => boolean;

package/es/ProLayout/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ProCollapse } from './ProCollapse';
+export { default as ProFooter } from './ProFooter';
+export { default as ProHeader } from './ProHeader';

package/es/ProLayout/index.d.ts

@@ -0,0 +1,19 @@
+import type { ProLayoutStatesType, ProLayoutType } from './propTypes';
+import { useProLayoutTabs } from './components/TabsManager/hooks/useProLayoutTabs';
+import { useActiveTab } from './components/TabsManager/hooks/useActiveTab';
+interface LayoutContextValue {
+    selectedPath: string;
+    onSelected: (params: Partial<ProLayoutStatesType>) => void;
+    target: '_blank' | '_parent' | '_self' | '_top';
+}
+export declare const LayoutContext: import("react").Context<LayoutContextValue>;
+declare const ProLayout: {
+    (props: ProLayoutType): import("react/jsx-runtime").JSX.Element;
+    ProCollapse: (props: import("../index").ProCollapseType) => import("react/jsx-runtime").JSX.Element;
+    ProFooter: import("react").MemoExoticComponent<(props: import("../index").ProFooterType) => import("react/jsx-runtime").JSX.Element>;
+    ProHeader: import("react").MemoExoticComponent<(props: import("../index").ProHeaderType) => import("react/jsx-runtime").JSX.Element>;
+    useProLayoutTabs: typeof useProLayoutTabs;
+    useActiveTab: () => import("./propTypes").TabItem | undefined;
+};
+export { useProLayoutTabs, useActiveTab };
+export default ProLayout;

package/es/ProLayout/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable func-call-spacing */
 /* eslint-disable no-spaced-func */
-import { createContext, useMemo, useRef, useCallback, useState } from 'react';
+import { createContext, useMemo, useRef, useCallback } from 'react';
 import classNames from 'classnames';
-import { useSetState, useToggle, useDeepCompareEffect } from 'ahooks';
+import { useSetState, useToggle, useDeepCompareEffect, useScroll } from 'ahooks';
 import { ProWaterMark } from "../index";
 import { ProCollapse, ProFooter, ProHeader } from "./components";
 import { Header, Notice, Menu } from "./components/Layout/index";
@@ -53,10 +53,24 @@ const ProLayout = props => {
   const tabsManagerRef = useRef(null);
 
   // Tab 栏 Portal 挂载目标及动画状态
-  const [tabsBarEl, setTabsBarEl] = useState(null);
-  const [hasTabs, setHasTabs] = useState(false);
-  // TabsManager 通过 onIframePureChange 报告的 pure 状态(iframe 嵌入 + 默认纯净渲染)
-  const [isIframePure, setIsIframePure] = useState(false);
+  const [{
+    tabsBarEl,
+    hasTabs,
+    isIframePure
+  }, setTabsState] = useSetState({
+    tabsBarEl: null,
+    hasTabs: false,
+    isIframePure: false
+  });
+  // 稳定的 ref 回调，避免内联函数每次渲染都触发 setState 导致无限循环
+  const setTabsBarElRef = useCallback(el => setTabsState({
+    tabsBarEl: el
+  }), []);
+
+  // 仅 tabs 模式需要感知滚动位置（用于控制右上角圆弧伪元素的显隐）
+  // 非 tabs 模式传 null，useScroll 不挂载监听器
+  const scrollPos = useScroll(isTabsLayout ? document : null);
+  const isAtTop = (scrollPos?.top ?? 0) === 0;
   const [{
     notice,
     menus,
@@ -136,8 +150,12 @@ const ProLayout = props => {
       dataSource: menuDataSource,
       originalOnMenuClick: onMenuClick,
       tabsBarContainer: tabsBarEl,
-      onTabsChange: setHasTabs,
-      onIframePureChange: setIsIframePure,
+      onTabsChange: v => setTabsState({
+        hasTabs: v
+      }),
+      onIframePureChange: v => setTabsState({
+        isIframePure: v
+      }),
       children: children
     });
   };
@@ -263,8 +281,8 @@ const ProLayout = props => {
     }), /*#__PURE__*/_jsx(Notice, {
       ...noticeProps
     }), /*#__PURE__*/_jsx("div", {
-      ref: setTabsBarEl,
-      className: `pro-layout-tabs-bar-wrapper${hasTabs ? ' tabs-visible' : ''}${collapsed ? ' tabs-menu-open' : ''}`,
+      ref: setTabsBarElRef,
+      className: `pro-layout-tabs-bar-wrapper${hasTabs ? ' tabs-visible' : ''}${collapsed ? ' tabs-menu-open' : ''}${isAtTop ? ' tabs-at-top' : ''}`,
       style: {
         marginTop: effectiveHeaderHeight + noticeHeight
       }