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

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
       }

package/es/ProLayout/propTypes.d.ts

@@ -431,6 +431,23 @@ export interface ProLayoutTabsInstance {
      * @description 获取标签页信息
      */
     getTabInfo: () => TabsInfoResult;
+    /**
+     * @description 在当前激活标签页内压入一个子视图（如详情页），入口页会被隐藏但不卸载
+     * @param node 要展示的子视图 React 节点
+     * @example
+     * ```tsx
+     * layoutTabs.pushView(<ProductDetail id={record.id} />);
+     * ```
+     */
+    pushView: (node: ReactNode) => void;
+    /**
+     * @description 返回上一层：销毁当前激活标签页的栈顶子视图，露出下一层（栈空时露出入口页）
+     */
+    back: () => void;
+    /**
+     * @description 获取当前激活标签页的子视图栈（栈底→栈顶顺序），入口页不在其中
+     */
+    getViewStack: () => ReactNode[];
 }
 /**
  * @description iframe 路由表配置项

package/es/ProLayout/style/index.less

@@ -325,6 +325,38 @@
       overflow: hidden;
       min-height: 0;
     }
+
+    // 右下角圆弧 + 横线截断：仅在页面顶部（tabs-at-top）时显示
+    // 滚动后 sticky 偏移导致背景错位，此时隐藏伪元素避免视觉异常
+    &.tabs-visible.tabs-at-top::after {
+      content: '';
+      position: absolute;
+      bottom: calc(-1 * var(--zaui-border-radius, 8px));
+      right: 0;
+      width: var(--zaui-border-radius, 8px);
+      height: var(--zaui-border-radius, 8px);
+      border-right: 1px solid rgb(235 236 238);
+      border-top-right-radius: var(--zaui-border-radius, 8px);
+      pointer-events: none;
+    }
+
+    // 遮住 ant-tabs-nav::before 横线的右端（圆角半径宽度），使其在圆弧起点处截止
+    &.tabs-visible.tabs-at-top::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: var(--zaui-border-radius, 8px);
+      height: 2px;
+      background-color: #f7f9fd;
+      background-image: var(--header-bg-image);
+      background-repeat: no-repeat;
+      background-position: top center;
+      background-size: 100% auto;
+      background-attachment: fixed;
+      z-index: 1;
+      pointer-events: none;
+    }
   }
 
   /** 内容区 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.5.6-beta.1",
+  "version": "4.5.6-beta.2",
   "license": "MIT",
   "files": [
     "es",