@zat-design/sisyphus-react 4.2.0 → 4.3.0-beta.1

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

@@ -9,29 +9,25 @@
   flex-direction: column;
   height: 100%;
 
+  &-header-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.tabs-visible {
+      grid-template-rows: 1fr;
+    }
+
+    > .pro-layout-tabs-header {
+      overflow: hidden;
+    }
+  }
+
   &-header {
     align-items: center;
-    min-height: 48px;
-    padding: 12px 0;
     border-bottom: none;
-    position: sticky;
-    top: 64px;
-    z-index: 90;
-    background: #fff;
-    box-shadow: none;
-    transition: box-shadow 0.3s ease;
-
-    &-shadow {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 1px;
-      background: transparent;
-      pointer-events: none;
-      z-index: 1;
-      box-shadow: 1px 2px 4px 1px rgba(0, 55, 93, 0.2);
-    }
+    // 去掉 sticky 和白色背景：Tab 栏现在在 ProLayout 的渐变区域
+    background: transparent;
 
     .pro-layout-tab-icon {
       display: none !important;
@@ -43,7 +39,7 @@
     .pro-layout-tab-list {
       display: flex;
       flex: 1;
-      gap: 12px;
+      gap: 8px;
 
       &::-webkit-scrollbar {
         height: 3px;
@@ -90,7 +86,6 @@
     // 覆盖 nav 样式，使其匹配 pro-layout-tabs-header
     .@{ant-prefix}-tabs-nav {
       margin: 0;
-      // padding: 0 var(--zaui-space-size-md, 16px);
       padding: 0;
       border-bottom: none;
 
@@ -103,7 +98,7 @@
     .@{ant-prefix}-tabs-nav-list {
       display: flex;
       flex: 1;
-      gap: 12px;
+      gap: 8px;
 
       &::-webkit-scrollbar {
         height: 3px;
@@ -129,7 +124,7 @@
       display: flex;
       flex-shrink: 0;
       align-items: center;
-      min-height: 36px;
+      height: 33px;
       padding: 0 !important;
       margin: 0 !important;
       background: transparent !important;
@@ -151,7 +146,6 @@
       .pro-layout-tab-item {
         width: 100%;
         height: 100%;
-        border: 1px solid rgb(217, 217, 217);
       }
     }
 
@@ -159,9 +153,6 @@
     .@{ant-prefix}-tabs-tab-active {
       background: transparent !important;
       border: none !important;
-      .pro-layout-tab-item {
-        border-color: transparent !important;
-      }
 
       &::before {
         display: none;
@@ -175,40 +166,38 @@
   }
 }
 
+.pro-layout-tabs-antd {
+  &.@{ant-prefix}-tabs {
+    .@{ant-prefix}-tabs-tab {
+      padding: 6px 0 !important;
+      margin-right: 8px !important;
+      margin-left: 0;
+      background: #e5e7e9;
+      transition: none;
+      &.@{ant-prefix}-tabs-tab-active {
+        background: #ffffff;
+      }
+    }
+    .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .pro-layout-tab-item {
   position: relative;
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  min-height: 36px;
   padding: 0;
-  background: #ffffff;
-  border: 1px solid transparent;
-  border-radius: 8px;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.2s ease;
   user-select: none;
 
-  &:hover {
-    background: #ffffff;
-    border-color: rgba(0, 0, 0, 0.06);
-  }
-
-  &.active {
-    z-index: 2;
-    background: var(--zaui-primary);
-    border-color: transparent;
-
-    &::before {
-      display: none;
-    }
-  }
-
   .pro-layout-tab-content {
     display: flex;
     align-items: center;
-    min-width: 100px;
-    padding: 6px 12px;
+    padding: 0 12px;
     text-align: left;
 
     .pro-layout-tab-icon {
@@ -237,7 +226,7 @@
       font-size: 14px;
       white-space: nowrap;
       text-overflow: ellipsis;
-      transition: color 0.3s;
+      transition: color 0.2s;
     }
 
     .pro-layout-tab-close {
@@ -245,38 +234,35 @@
       flex-shrink: 0;
       align-items: center;
       justify-content: center;
-      margin-left: 8px;
-      padding: 3px;
-      color: rgba(0, 0, 0, 0.45);
+      margin-left: 4px;
+      padding: 2px;
+      color: #333;
       border-radius: 4px;
-      opacity: 0.7;
-      transition: all 0.3s;
+      opacity: 1;
+      transition: all 0.2s;
 
       &:hover {
         color: #ff4d4f;
-        background: rgba(255, 77, 79, 0.15);
-        opacity: 1;
+        background: rgba(255, 77, 79, 0.1);
       }
     }
   }
 
+  // hover 时展示 close 按钮
+  &:hover .pro-layout-tab-close,
+  &.active .pro-layout-tab-close {
+    opacity: 1;
+  }
+
   &.active .pro-layout-tab-content {
     .pro-layout-tab-title {
-      color: #ffffff;
+      color: var(--pro-layout-tabs-primary);
       font-weight: 600;
     }
 
     .pro-layout-tab-icon {
       .iconfont {
-        color: #ffffff;
-      }
-    }
-
-    .pro-layout-tab-close {
-      color: #ffffff;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.2);
+        color: var(--pro-layout-tabs-primary);
       }
     }
   }
@@ -298,7 +284,7 @@
 @media (max-width: 768px) {
   .pro-layout-tab-item {
     .pro-layout-tab-content {
-      padding: 6px 8px;
+      padding: 0 8px;
 
       .pro-layout-tab-title {
         max-width: 80px;

package/es/ProLayout/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable func-call-spacing */
 /* eslint-disable no-spaced-func */
-import { createContext, useMemo, useRef, useCallback } from 'react';
+import { createContext, useMemo, useRef, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { useSetState, useToggle, useDeepCompareEffect } from 'ahooks';
 import { ProWaterMark } from "../index";
@@ -51,6 +51,10 @@ const ProLayout = props => {
   const isTabsLayout = isTabsMode(props);
   validateTabsProps(mode, tabs);
   const tabsManagerRef = useRef(null);
+
+  // Tab 栏 Portal 挂载目标及动画状态
+  const [tabsBarEl, setTabsBarEl] = useState(null);
+  const [hasTabs, setHasTabs] = useState(false);
   const [{
     notice,
     menus,
@@ -116,6 +120,8 @@ const ProLayout = props => {
       config: enhancedTabsConfig,
       dataSource: menuDataSource,
       originalOnMenuClick: onMenuClick,
+      tabsBarContainer: tabsBarEl,
+      onTabsChange: setHasTabs,
       children: children
     });
   };
@@ -214,21 +220,28 @@ const ProLayout = props => {
       [`${className}`]: className
     }),
     style: {
-      '--header-bg-image': `url(${headerBg})`
+      '--header-bg-image': `url(${headerBg})`,
+      '--pro-layout-header-height': `${headerHeight}px`
     },
     children: [/*#__PURE__*/_jsx(Header, {
       ...headerProps
     }), /*#__PURE__*/_jsx(Notice, {
       ...noticeProps
+    }), /*#__PURE__*/_jsx("div", {
+      ref: setTabsBarEl,
+      className: `pro-layout-tabs-bar-wrapper${hasTabs ? ' tabs-visible' : ''}${collapsed ? ' tabs-menu-open' : ''}`,
+      style: {
+        marginTop: headerHeight + noticeHeight
+      }
     }), /*#__PURE__*/_jsxs("div", {
       className: contentCls,
       children: [/*#__PURE__*/_jsx(Menu, {
         ...menuProps
       }), /*#__PURE__*/_jsx("div", {
-        className: "pro-layout-content",
+        className: `pro-layout-content${hasTabs ? ' pro-layout-content-has-tabs' : ''}`,
         style: {
           ...contentStyle,
-          marginTop: headerHeight + noticeHeight
+          marginTop: 0
         },
         children: renderContent()
       })]

package/es/ProLayout/propTypes.d.ts

@@ -399,6 +399,11 @@ export interface TabsConfig {
     storage?: TabsStorageStrategy;
     cacheKey?: string;
     onTabChange?: (activeKey: string, activeTab: TabItem | undefined, allTabs: TabItem[]) => void;
+    /**
+     * @description 是否允许标签页拖拽排序
+     * @default true
+     */
+    draggable?: boolean;
     /**
      * @description 激活组件解析函数，根据 component 标识返回对应的 React 组件
      */

package/es/ProLayout/style/index.less

@@ -287,12 +287,52 @@
     }
   }
 
+  /** Tab 栏 Portal 挂载点（位于 header 渐变区，内容区之上） */
+  .pro-layout-tabs-bar-wrapper {
+    // 与 pro-layout-content 对齐：同样的左右边距，无内边距让 tab 从左侧直接对齐
+    margin-right: var(--zaui-space-size-md, 16px);
+    margin-left: 48px;
+    padding: 0;
+    // 滚动时固定在 header 正下方
+    position: sticky;
+    top: var(--pro-layout-header-height, 64px);
+    z-index: 89;
+    // 与 ::before 渐变层像素级对齐：滚动时遮住上滚的白色内容，同时保持渐变背景可见
+    // background-color 作为实体打底，防止渐变图片浅色区域透出白色内容
+    background-color: #f7f9fd;
+    background-image: var(--header-bg-image);
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: 100% auto;
+    background-attachment: fixed;
+    // 高度动画：CSS Grid 技巧，支持不定高度平滑过渡
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: margin-left 0.3s cubic-bezier(0.2, 0, 0, 1), grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    // 菜单展开时与内容区同步右移
+    &.tabs-menu-open {
+      margin-left: 220px;
+    }
+
+    // Tab 存在时展开
+    &.tabs-visible {
+      grid-template-rows: 1fr;
+    }
+
+    // Grid 子元素需要 overflow: hidden 才能实现 0fr 收起
+    > * {
+      overflow: hidden;
+      min-height: 0;
+    }
+  }
+
   /** 内容区 */
   .pro-layout-content {
     position: relative;
     z-index: 10;
     flex: 1;
-    margin-top: 64px;
+    margin-top: 0;
     margin-right: var(--zaui-space-size-md, 16px);
     margin-bottom: 0;
     margin-left: 48px;
@@ -304,6 +344,14 @@
     border-bottom: none;
     border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
     transition: all 0.24s ease;
+
+    // Tab 存在时：顶部边框透明（不用 none，避免 transition:all 产生黑色闪烁）、移除顶部圆角，与 Tab 栏无缝衔接；补上顶部 padding
+    &-has-tabs {
+      border-top-color: transparent;
+      border-radius: 0;
+      padding-top: var(--zaui-space-size-md, 16px);
+      border-top-right-radius: var(--zaui-border-radius, 8px);
+    }
   }
 
   // 纯净模式：隐藏背景图

package/package.json

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