@zat-design/sisyphus-react 4.5.8-beta.3 → 4.5.8-beta.4

package/es/ProLayout/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable no-spaced-func */
 import { createContext, useMemo, useRef, useCallback, useLayoutEffect, useState } from 'react';
 import classNames from 'classnames';
-import { useSetState, useToggle, useDeepCompareEffect, useScroll } from 'ahooks';
+import { useSetState, useToggle, useDeepCompareEffect } from 'ahooks';
 import { ProWaterMark } from "../index";
 import { ProCollapse, ProFooter, ProHeader } from "./components";
 import { Header, Notice, Menu } from "./components/Layout/index";
@@ -82,11 +82,6 @@ const ProLayout = props => {
     notice: 0,
     tabsBar: 0
   });
-
-  // 仅 tabs 模式需要感知滚动位置（用于控制右上角圆弧伪元素的显隐）
-  // 非 tabs 模式传 null，useScroll 不挂载监听器
-  const scrollPos = useScroll(isTabsLayout ? document : null);
-  const isAtTop = (scrollPos?.top ?? 0) === 0;
   const [{
     notice,
     menus,
@@ -324,7 +319,7 @@ const ProLayout = props => {
       ...noticeProps
     }), /*#__PURE__*/_jsx("div", {
       ref: setTabsBarElRef,
-      className: `pro-layout-tabs-bar-wrapper${hasTabs ? ' tabs-visible' : ''}${collapsed ? ' tabs-menu-open' : ''}${isAtTop ? ' tabs-at-top' : ''}`,
+      className: `pro-layout-tabs-bar-wrapper${hasTabs ? ' tabs-visible' : ''}${collapsed ? ' tabs-menu-open' : ''}`,
       style: {
         marginTop: effectiveHeaderHeight + noticeHeight
       }

package/es/ProLayout/style/index.less

@@ -322,34 +322,14 @@
       grid-template-rows: 1fr;
     }
 
-    // 页面顶部的圆角会向内容区延伸，此时放到 content 层级下方，
-    // 让内容区内的 ProStep 能完整遮住圆角；滚动后恢复上方的 89 保持 sticky 遮挡。
-    &.tabs-at-top {
-      z-index: 9;
-    }
-
     // Grid 子元素需要 overflow: hidden 才能实现 0fr 收起
     > * {
       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 {
+    // 稳定遮住 ant-tabs-nav::before 横线的右端，使其在内容区圆弧起点处截止
+    &.tabs-visible::before {
       content: '';
       position: absolute;
       bottom: 0;
@@ -392,6 +372,20 @@
       padding-top: var(--zaui-space-size-md, 16px);
       border-top-right-radius: var(--zaui-border-radius, 8px);
 
+      // 圆弧由内容区独立绘制并随内容滚动；sticky Tab 栏始终保持在其上方。
+      // ::before 在子内容之前绘制，ProStep / ProHeader 仍可完整覆盖圆弧。
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        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;
+      }
+
       .pro-layout-tabs-content {
         > .tab-pane {
           // ProStep 以 ProHeader 开头时，去掉 tabs 内容区的顶部/右侧外层留白。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.5.8-beta.3",
+  "version": "4.5.8-beta.4",
   "license": "MIT",
   "publishConfig": {
     "access": "public",