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

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

@@ -1,37 +1,29 @@
 @import '../../../../style/variables.less'; // 引入变量
 
 .pro-layout-tabs {
-  --pro-layout-tabs-primary: var(--ant-primary-color, #1677ff);
-  --pro-layout-tabs-active-bg: var(--ant-color-success, #00b578);
-  --pro-layout-tabs-text-color: var(--ant-color-text, #1f1f1f);
-
   display: flex;
   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 +35,7 @@
     .pro-layout-tab-list {
       display: flex;
       flex: 1;
-      gap: 12px;
+      gap: 8px;
 
       &::-webkit-scrollbar {
         height: 3px;
@@ -90,7 +82,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 +94,7 @@
     .@{ant-prefix}-tabs-nav-list {
       display: flex;
       flex: 1;
-      gap: 12px;
+      gap: 8px;
 
       &::-webkit-scrollbar {
         height: 3px;
@@ -129,7 +120,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 +142,6 @@
       .pro-layout-tab-item {
         width: 100%;
         height: 100%;
-        border: 1px solid rgb(217, 217, 217);
       }
     }
 
@@ -159,9 +149,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 +162,39 @@
   }
 }
 
+.pro-layout-tabs-antd {
+  &.@{ant-prefix}-tabs {
+    .@{ant-prefix}-tabs-tab {
+      padding: 4px 0 5px !important;
+      margin-right: 8px !important;
+      margin-left: 0;
+      background: #e7e8ee;
+      transition: none;
+      &.@{ant-prefix}-tabs-tab-active {
+        background: #ffffff;
+        border-top: 2px solid var(--zaui-brand, #006aff);
+      }
+    }
+    .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 {
@@ -232,12 +218,12 @@
     .pro-layout-tab-title {
       flex: 1;
       overflow: hidden;
-      color: var(--pro-layout-tabs-text-color);
+      color: var(--zaui-text, #464646);
       font-weight: 500;
       font-size: 14px;
       white-space: nowrap;
       text-overflow: ellipsis;
-      transition: color 0.3s;
+      transition: color 0.2s;
     }
 
     .pro-layout-tab-close {
@@ -245,38 +231,44 @@
       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(--zaui-brand, #006aff);
       font-weight: 600;
     }
 
     .pro-layout-tab-icon {
       .iconfont {
-        color: #ffffff;
+        color: var(--zaui-brand, #006aff);
       }
     }
 
     .pro-layout-tab-close {
-      color: #ffffff;
+      color: var(--zaui-brand, #006aff);
 
       &:hover {
-        background: rgba(255, 255, 255, 0.2);
+        color: #ff4d4f;
+        background: rgba(255, 77, 79, 0.1);
       }
     }
   }
@@ -298,7 +290,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/components/TabsManager/utils/index.d.ts

@@ -1,4 +1,9 @@
 import { TabItem, MenusType } from '../../../propTypes';
+/**
+ * 获取菜单实际用于路由/签页的路径
+ * 约定优先使用 redirectUrl，其次回退 url
+ */
+export declare const getMenuRoute: (menuItem: MenusType) => string;
 /**
  * 根据菜单项生成TabItem
  */
@@ -39,3 +44,12 @@ export declare const flattenMenuData: (menus?: MenusType[]) => MenusType[];
  * 只有当菜单项没有子菜单或子菜单为空时，才认为是叶子节点
  */
 export declare const isLeafMenuItem: (menuItem: MenusType) => boolean;
+/**
+ * 判断菜单项是否为根节点
+ */
+export declare const isRootMenuItem: (menuItem: MenusType) => boolean;
+/**
+ * 判断菜单项是否可以在 Tabs 模式下打开
+ * 规则：只有叶子节点（无 children）才可打开
+ */
+export declare const canOpenAsTab: (menuItem: MenusType) => boolean;

package/es/ProLayout/components/TabsManager/utils/index.js

@@ -1,17 +1,27 @@
+/**
+ * 获取菜单实际用于路由/签页的路径
+ * 约定优先使用 redirectUrl，其次回退 url
+ */
+export const getMenuRoute = menuItem => {
+  return menuItem.redirectUrl || menuItem.url || '';
+};
+
 /**
  * 根据菜单项生成TabItem
  */
 export const createTabFromMenu = (menuItem, index = 0) => {
-  return {
+  const route = getMenuRoute(menuItem);
+  const result = {
     id: String(menuItem.id || menuItem.code || menuItem.url || index),
     code: menuItem.code,
     name: menuItem.name,
     title: menuItem.name,
-    url: menuItem.url,
-    closable: true,
+    url: route,
+    closable: menuItem.closable !== false,
     menuItem,
     icon: menuItem.icon || menuItem.imgUrl
   };
+  return result;
 };
 
 /**
@@ -34,16 +44,17 @@ export const generateTabId = (menuItem, existingIds) => {
  * 检查菜单项是否应该外部跳转
  */
 export const shouldOpenExternal = (menuItem, target) => {
-  return target === '_blank' || menuItem.redirectUrl && menuItem.redirectUrl !== menuItem.url || menuItem.type === 'EXTERNAL';
+  const menuTarget = menuItem?.target || target;
+  return menuTarget === '_blank' || menuItem.type === 'EXTERNAL';
 };
 
 /**
  * 处理外部跳转
  */
 export const handleExternalOpen = menuItem => {
-  const url = menuItem.redirectUrl || menuItem.url;
+  const url = getMenuRoute(menuItem);
   if (url) {
-    window.open(url, '_blank');
+    window.open(url, menuItem.target || '_blank');
   }
 };
 
@@ -109,4 +120,25 @@ export const isLeafMenuItem = menuItem => {
   } = menuItem || {};
   // 如果 children 不存在、为 null、为 undefined，或者为空数组，则认为是叶子节点
   return !children || Array.isArray(children) && children.length === 0;
+};
+
+/**
+ * 判断菜单项是否为根节点
+ */
+export const isRootMenuItem = menuItem => {
+  if (!menuItem) return false;
+  if (menuItem.parentId === null || menuItem.parentId === undefined) {
+    return true;
+  }
+  return Array.isArray(menuItem.keyIdPath) && menuItem.keyIdPath.length === 1;
+};
+
+/**
+ * 判断菜单项是否可以在 Tabs 模式下打开
+ * 规则：只有叶子节点（无 children）才可打开
+ */
+export const canOpenAsTab = menuItem => {
+  if (!menuItem) return false;
+  if (!(menuItem.url || menuItem.redirectUrl)) return false;
+  return isLeafMenuItem(menuItem);
 };

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";
@@ -11,7 +11,7 @@ import { isTabsMode, validateTabsProps } from "./propTypes";
 import { useProLayoutTabs } from "./components/TabsManager/hooks/useProLayoutTabs";
 import { useActiveTab } from "./components/TabsManager/hooks/useActiveTab";
 import { transformMenus } from "./utils";
-import { isLeafMenuItem } from "./components/TabsManager/utils";
+import { canOpenAsTab } from "./components/TabsManager/utils";
 import headerBg from "../assets/header_bg.png";
 
 // 全局上下文
@@ -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,
@@ -78,9 +82,22 @@ const ProLayout = props => {
       menus: menuData
     });
   }, [dataSource]);
-  const menuDataSource = useMemo(() => Array.isArray(menus) ? {
-    menus
-  } : menus, [menus]);
+  const menuDataSource = useMemo(() => {
+    // menus 已通过 useDeepCompareEffect 填充，直接使用
+    if (Array.isArray(menus) && menus.length > 0) {
+      return {
+        menus
+      };
+    }
+    // menus state 尚未填充（初始为 []），直接用 dataSource 原始 menus，
+    // 确保 tabsInstance 第一次创建时就能查到完整菜单数据（含 closable 等属性）
+    if (!Array.isArray(dataSource) && Array.isArray(dataSource?.menus)) {
+      return dataSource;
+    }
+    return {
+      menus: menus || []
+    };
+  }, [menus, dataSource]);
   const enhancedTabsConfig = useMemo(() => {
     if (!isTabsLayout || !tabs) {
       return tabs;
@@ -95,7 +112,7 @@ const ProLayout = props => {
           });
           return;
         }
-        const targetPath = activeTab?.url || activeTab?.menuItem?.router || activeTab?.menuItem?.url || activeTab?.menuItem?.redirectUrl;
+        const targetPath = activeTab?.url || activeTab?.menuItem?.router || activeTab?.menuItem?.redirectUrl || activeTab?.menuItem?.url;
         if (targetPath && targetPath !== selectedPath) {
           setState({
             selectedPath: targetPath
@@ -116,6 +133,8 @@ const ProLayout = props => {
       config: enhancedTabsConfig,
       dataSource: menuDataSource,
       originalOnMenuClick: onMenuClick,
+      tabsBarContainer: tabsBarEl,
+      onTabsChange: setHasTabs,
       children: children
     });
   };
@@ -128,13 +147,16 @@ const ProLayout = props => {
 
     // tabs 模式：调用 TabsManager 的 handleMenuClick 来添加标签页
     tabsManagerRef.current?.handleMenuClick?.(params);
-
-    // 非叶子节点，直接允许激活
-    if (!params.item || !isLeafMenuItem(params.item)) {
+    if (!params.item) {
       return true;
     }
 
-    // 叶子节点：检查是否可以添加标签页（检查 max 限制）
+    // 只有叶子节点（无 children）可入签；有 children 的节点不激活
+    if (!canOpenAsTab(params.item)) {
+      return false;
+    }
+
+    // 可入签节点：检查是否可以添加标签页（检查 max 限制、_blank 等）
     const canAdd = tabsManagerRef.current?.canAddTab?.(params.item);
     if (!canAdd) {
       // 超过限制，返回 false 阻止菜单激活
@@ -142,13 +164,14 @@ const ProLayout = props => {
     }
 
     // 可以添加标签页，设置选中路径（激活菜单）
-    const targetPath = params.item?.url || params.item?.redirectUrl || params.item?.router;
+    const targetPath = params.item?.redirectUrl || params.item?.url || params.item?.router;
     if (targetPath && targetPath !== selectedPath) {
       setState({
         selectedPath: targetPath
       });
     }
-    return true;
+    // tabs 模式下由 Tab 管理内容，阻止菜单默认 Link 跳转
+    return false;
   }, [isTabsLayout, onMenuClick, selectedPath]);
 
   /**
@@ -214,21 +237,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

@@ -124,6 +124,11 @@ export interface MenusType {
      * @default -
      */
     type?: string;
+    /**
+     * @description 当前菜单点击后的打开方式
+     * @default "_self"
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
     /**
      * @description 允许扩展字段
      */
@@ -399,6 +404,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 组件
      */
@@ -419,6 +429,11 @@ export interface TabsConfig {
         tab: TabItem;
         tabs: TabItem[];
     }) => void;
+    /**
+     * @description 声明式固定标签页，传入菜单 code 数组，这些 tab 会在初始化时自动添加且不可关闭
+     * @example fixed: ['Workspace', 'PolicyInput']
+     */
+    fixed?: string[];
 }
 export type ProLayoutMode = 'normal' | 'tabs';
 export interface ProLayoutTabsProps extends ProLayoutBaseProps {

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/es/assets/edit.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1775025459029" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7119" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><path d="M181.10185262 930.4882664c-18.69801175 0-33.42977859-15.29837325-33.42977858-33.42977858 0-18.69801175 15.29837325-33.42977859 33.42977858-33.4297786h691.25982844c18.69801175 0 33.42977859 15.29837325 33.42977859 33.4297786 0 18.69801175-15.29837325 33.42977859-33.42977859 33.42977858h-691.25982844z m671.42860384-747.92047012L752.80772713 82.84506694c-12.46534117-12.46534117-32.86317217-12.46534117-45.32851335 0l-100.85594218 100.85594218 145.05124269 145.05124269 100.85594217-100.85594218c12.46534117-12.46534117 12.46534117-32.29656575 0-45.32851335z m-275.93732495 31.16335293L240.59552637 549.72875434c-9.06570266 9.06570266-16.9981925 28.89692726-16.9981925 28.89692726l-52.12779033 165.44907369c-3.96624492 12.46534117 7.93248983 23.7974695 20.397831 20.397831l164.31586085-52.12779034s19.83122459-7.36588342 29.46353368-17.56479891L721.6443742 358.7823919 576.59313151 213.73114921z" fill="#2C2C2C" p-id="7120"></path></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.2.0",
+  "version": "4.3.0-beta.10",
   "license": "MIT",
   "files": [
     "es",
@@ -94,7 +94,6 @@
     "react-resizable": {
       "react-draggable": "<4.5.0"
     },
-    "@ant-design/icons": "^6.1.0",
     "@babel/core": "^7.26.0",
     "react-docgen-typescript-dumi-tmp": {
       "typescript": "^4.9.5"
@@ -104,7 +103,6 @@
   },
   "resolutions": {
     "react-resizable/react-draggable": "<4.5.0",
-    "@ant-design/icons": "^6.1.0",
     "@babel/core": "^7.26.0",
     "react-docgen-typescript-dumi-tmp/typescript": "^4.9.5",
     "esbuild": "0.21.4",