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

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

@@ -85,6 +85,68 @@ const TabsManager = /*#__PURE__*/forwardRef(({
     }
   }, [state.activeKey]);
 
+  // tab 内子视图栈：按 tabId 隔离。栈底→栈顶顺序，入口页不在其中。
+  // 只活在内存、不进缓存（详情/工作流是运行态 ReactNode，无法 JSON 序列化）。
+  const [viewStacks, setViewStacks] = useState({});
+
+  // 用 ref 持有 activeKey，供稳定的 pushView/back 读取当前激活 tab，避免因 activeKey 变化重建实例
+  const activeKeyRef = useRef(state.activeKey);
+  activeKeyRef.current = state.activeKey;
+
+  // 同步持有最新 viewStacks，使 getViewStack 成为稳定引用且读取不受渲染时序影响
+  const viewStacksRef = useRef(viewStacks);
+  viewStacksRef.current = viewStacks;
+
+  // 在当前激活 tab 内压入一层子视图（入口页/下层随之隐藏但不卸载）
+  const pushView = useCallback(node => {
+    const tabId = activeKeyRef.current;
+    if (!tabId) return;
+    setViewStacks(prev => ({
+      ...prev,
+      [tabId]: [...(prev[tabId] || []), node]
+    }));
+  }, []);
+
+  // 返回：销毁当前激活 tab 的栈顶子视图（栈空时 no-op）
+  const back = useCallback(() => {
+    const tabId = activeKeyRef.current;
+    if (!tabId) return;
+    setViewStacks(prev => {
+      const stack = prev[tabId];
+      if (!stack || stack.length === 0) return prev;
+      const nextStack = stack.slice(0, -1);
+      const next = {
+        ...prev
+      };
+      if (nextStack.length === 0) {
+        delete next[tabId];
+      } else {
+        next[tabId] = nextStack;
+      }
+      return next;
+    });
+  }, []);
+
+  // 获取当前激活 tab 的子视图栈（从 ref 读最新值，稳定引用）
+  const getViewStack = useCallback(() => viewStacksRef.current[activeKeyRef.current] || [], []);
+
+  // 子视图栈与 tabsList 对账：任何关闭路径（removeTab / closeOthers / closeRight /
+  // closeAll）导致某 tab 消失后，清除其残留子视图栈，避免关闭后 node 仍驻留内存。
+  useEffect(() => {
+    setViewStacks(prev => {
+      const keys = Object.keys(prev);
+      if (keys.length === 0) return prev;
+      const aliveIds = new Set(state.tabsList.map(tab => tab.id));
+      const staleKeys = keys.filter(id => !aliveIds.has(id));
+      if (staleKeys.length === 0) return prev;
+      const next = {
+        ...prev
+      };
+      staleKeys.forEach(id => delete next[id]);
+      return next;
+    });
+  }, [state.tabsList]);
+
   // 通知父级（ProLayout）当前是否有 Tab
   useEffect(() => {
     onTabsChange?.(state.tabsList.length > 0);
@@ -169,8 +231,11 @@ const TabsManager = /*#__PURE__*/forwardRef(({
       tabsList: state.tabsList,
       activeTabInfo: state.tabsList.find(tab => tab.id === state.activeKey),
       activeComponent: state.activeComponent
-    })
-  }), [addTab, removeTab, updateTab, state.tabsList, state.activeKey, state.activeComponent, dataSource]);
+    }),
+    pushView,
+    back,
+    getViewStack
+  }), [addTab, removeTab, updateTab, state.tabsList, state.activeKey, state.activeComponent, dataSource, pushView, back, getViewStack]);
   const handleTabChange = useCallback(activeKey => {
     switchTab(activeKey);
   }, [switchTab]);
@@ -227,11 +292,30 @@ const TabsManager = /*#__PURE__*/forwardRef(({
             });
           }
         }
+
+        // 该 tab 的子视图栈：栈底→栈顶。只有「当前激活 tab 的栈顶层」可见，
+        // 入口页与下层子视图 display:none 但保持挂载 → 返回秒回、状态不丢。
+        const stack = viewStacks[tab.id] || [];
+        // 入口页可见条件：该 tab 激活 且 无子视图
+        const entryVisible = isActive && stack.length === 0;
         return /*#__PURE__*/_jsx("div", {
-          className: `tab-pane ${isActive ? '' : 'hidden'}`,
+          className: `tab-pane ${entryVisible ? '' : 'hidden'}`,
           "data-testid": `tab-pane-${tab.id}`,
           children: content
         }, tab.id);
+      }), state.tabsList.map(tab => {
+        const isActive = tab.id === state.activeKey;
+        const stack = viewStacks[tab.id] || [];
+        if (stack.length === 0) return null;
+        const topIndex = stack.length - 1;
+        return stack.map((node, index) => {
+          const layerVisible = isActive && index === topIndex;
+          return /*#__PURE__*/_jsx("div", {
+            className: `tab-pane ${layerVisible ? '' : 'hidden'}`,
+            "data-testid": `tab-subview-${tab.id}-${index}`,
+            children: node
+          }, `${tab.id}-subview-${index}`);
+        });
       }), state.tabsList.length === 0 && /*#__PURE__*/_jsx("div", {
         className: "tab-pane",
         "data-testid": "default-content",

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/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/es/ProTable/components/RenderColumn/index.js

@@ -7,6 +7,7 @@ import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
 import { isEmpty, isEllipsisActive } from "../../../utils";
 import copySvg from "../../../assets/copy.svg";
+import locale from "../../../locale";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   Paragraph,
@@ -198,7 +199,7 @@ const RenderColumn = props => {
             className: "drag-icon",
             src: copySvg
           }, "copy-icon"), /*#__PURE__*/_jsx(CheckOutlined, {}, "copied-icon")],
-          tooltips: ['复制', '复制成功']
+          tooltips: locale.ProHeader.copyTooltips
         },
         children: node
       })

package/es/ProUpload/components/FileItem.js

@@ -9,6 +9,7 @@ import WORD from "../style/icon-word.png";
 import lookSvg from "../../assets/look.svg";
 import deleteSvg from "../../assets/delete.svg";
 import downloadSvg from "../../assets/download.svg";
+import locale from "../../locale";
 
 /**
  * @description: b 转成 Kb
@@ -119,10 +120,10 @@ const FileItem = props => {
               src: lookSvg
             })
           }), _showRemoveIcon && !disabled && (isConfirmDelete ? /*#__PURE__*/_jsx(Popconfirm, {
-            title: "\u786E\u5B9A\u5220\u9664?",
+            title: locale.ProUpload.deleteConfirmTitle,
             onConfirm: _onRemove,
-            okText: "\u786E\u8BA4",
-            cancelText: "\u53D6\u6D88",
+            okText: locale.ProDrawerForm.confirm,
+            cancelText: locale.ProDrawerForm.cancel,
             children: /*#__PURE__*/_jsx(Button, {
               type: "link",
               className: "file-action-item",

package/es/locale/en_US.d.ts

@@ -10,6 +10,10 @@ declare const _default: {
         tipAlt: string;
         closeAlt: string;
         tabMaxLimitMessage: string;
+        tabMenuClose: string;
+        tabMenuCloseOthers: string;
+        tabMenuCloseRight: string;
+        tabMenuCloseAll: string;
     };
     ProHeader: {
         versionTitle: string;
@@ -18,6 +22,8 @@ declare const _default: {
         confirmTitle: string;
         backText: string;
         copyTooltips: string[];
+        itemsCountPrefix: string;
+        itemsSeparator: string;
     };
     ProDownload: {
         errorMessage: string;
@@ -39,6 +45,8 @@ declare const _default: {
         formListConfirmMessage: string;
         noData: string;
         moreItems: string;
+        confirmTitle: string;
+        confirmContent: string;
     };
     ProAction: {
         errorMessage: string;
@@ -80,6 +88,7 @@ declare const _default: {
         view: string;
         delete: string;
         download: string;
+        deleteConfirmTitle: string;
     };
     ProStep: {
         catalogue: string;

package/es/locale/en_US.js

@@ -4,45 +4,53 @@ export default {
     confirm: 'Confirm',
     cancel: 'Cancel',
     isSureClose: 'Confirm to close the current page',
-    secondTipsWhenSave: 'Close the current page content will not be saved, need to click the Save button to save'
+    secondTipsWhenSave: 'Unsaved changes will be lost. Click Save to keep your changes.'
   },
   ProLayout: {
     tipAlt: 'Tips',
     closeAlt: 'Close',
-    tabMaxLimitMessage: 'Menu tabs cannot exceed the maximum limit of {max}'
+    tabMaxLimitMessage: 'Menu tabs cannot exceed the maximum limit of {max}',
+    tabMenuClose: 'Close',
+    tabMenuCloseOthers: 'Close others',
+    tabMenuCloseRight: 'Close tabs to the right',
+    tabMenuCloseAll: 'Close all'
   },
   ProHeader: {
     versionTitle: 'Version number',
     confirm: 'Confirm',
     cancel: 'Cancel',
     confirmTitle: 'Confirm return?',
-    backText: 'Return',
-    copyTooltips: ['Copy', 'Copy successfully']
+    backText: 'Back',
+    copyTooltips: ['Copy', 'Copied successfully'],
+    itemsCountPrefix: '{count} items in total, ',
+    itemsSeparator: ', '
   },
   ProDownload: {
     errorMessage: 'Request failed!'
   },
   ProForm: {
     unfold: 'Unfold',
-    packUp: 'PackUp',
+    packUp: 'Collapse',
     inputPlaceholder: 'Please enter',
     treeSelectPlaceholder: 'Please select',
     selectPlaceHolder: 'Please select',
     switchText: ['Yes', 'No'],
-    ruleStartEndText: ['start value', 'end value'],
+    ruleStartEndText: ['Start value', 'End value'],
     search: 'Search',
     reset: 'Reset',
-    ruleText: 'correct',
-    completeText: 'enter in full',
+    ruleText: 'valid',
+    completeText: 'Please complete all fields',
     halfRuleText: 'Enter the value of ({total})',
     formListActions: ['Add', 'Delete', 'Copy', 'Move up', 'Move down', 'Add a new line', 'Click add'],
-    formListConfirmMessage: 'Are you sure delete it?',
+    formListConfirmMessage: 'Are you sure you want to delete?',
     noData: 'No data',
-    moreItems: '{count} more...'
+    moreItems: '{count} more...',
+    confirmTitle: 'Confirm action',
+    confirmContent: 'Are you sure you want to modify this field?'
   },
   ProAction: {
     errorMessage: 'The configuration config for ProAction must be data',
-    defaultTitle: 'Are you sure delete it?'
+    defaultTitle: 'Are you sure you want to delete?'
   },
   ProTable: {
     noData: 'No data',
@@ -51,7 +59,7 @@ export default {
     transformResponseMsg: 'Please return the correct data type',
     deselect: 'Deselect',
     selectCurPage: 'Select the current page ({total} items)',
-    selectAll: 'Select All ({total} items)',
+    selectAll: 'Select all ({total} items)',
     hasSelected: '{selectedNum} items selected',
     total: '{total} items in total'
   },
@@ -61,25 +69,26 @@ export default {
   },
   ProTree: {
     inputPlaceholder: 'Please enter',
-    unExpand: 'Put it all away',
+    unExpand: 'Collapse all',
     expand: 'Expand all',
     all: 'Select all',
-    emptyTips: "what you were looking for couldn't be found"
+    emptyTips: 'No results found'
   },
   ProUpload: {
     exampleTitle: 'View sample',
-    errorInfoExt: 'Only {} format files are supported',
+    errorInfoExt: 'Supported file formats:',
     errorInfoSize: 'File size cannot exceed ',
     buttonText: 'Upload',
     draggerSelect: 'Select file',
     draggerDelete: 'Delete',
-    draggerTips: 'Click or drag file to this area to upload',
-    draggerBtnTxt: 'Click to upload',
-    draggerFileExt: 'Support for extensions',
-    draggerLimitless: 'Limitless',
+    draggerTips: 'Click or drag file to this area to ',
+    draggerBtnTxt: 'upload',
+    draggerFileExt: 'Supported extensions',
+    draggerLimitless: 'No limit',
     view: 'View',
     delete: 'Delete',
-    download: 'Download'
+    download: 'Download',
+    deleteConfirmTitle: 'Are you sure you want to delete?'
   },
   ProStep: {
     catalogue: 'Catalogue'
@@ -138,27 +147,27 @@ export default {
     clearAll: 'Clear all',
     checkNumber: '{num} items selected',
     noFinal: 'Oops, the content you are looking for is not found.',
-    specifyMode: ['all', 'specify']
+    specifyMode: ['All', 'Specify']
   },
   ProTimeLimit: {
-    foreverText: 'long term'
+    foreverText: 'Permanent'
   },
   ProThemeTools: {
-    title: 'Global style customization ',
-    copySuccess: 'Copy success! ',
+    title: 'Global style customization',
+    copySuccess: 'Copied successfully!',
     layout: 'Layout',
-    layoutMode: ['Compact ', 'Regular', 'Loose'],
+    layoutMode: ['Compact', 'Regular', 'Loose'],
     themeColor: 'Theme color',
     formLabel: 'Form label',
     bigText: 'Large text mode',
-    flex: ['Left align ', 'Right align'],
-    switchText: ['on', 'off'],
+    flex: ['Left align', 'Right align'],
+    switchText: ['On', 'Off'],
     tableBorder: 'Table border',
-    tableStripe: 'Table zebra',
+    tableStripe: 'Table zebra stripe',
     reset: 'Reset'
   },
   ProViewer: {
-    preview: 'preview'
+    preview: 'Preview'
   },
   ProIcon: {
     language: 'en'
@@ -166,10 +175,10 @@ export default {
   RangePicker: {
     ranges: {
       today: 'Today',
-      lastWeek: 'Last Week',
-      lastMonth: 'Last Month',
-      last3Months: 'Last 3 Months',
-      lastYear: 'Last Year'
+      lastWeek: 'Last week',
+      lastMonth: 'Last month',
+      last3Months: 'Last 3 months',
+      lastYear: 'Last year'
     }
   }
 };

package/es/locale/zh_CN.d.ts

@@ -10,6 +10,10 @@ declare const _default: {
         tipAlt: string;
         closeAlt: string;
         tabMaxLimitMessage: string;
+        tabMenuClose: string;
+        tabMenuCloseOthers: string;
+        tabMenuCloseRight: string;
+        tabMenuCloseAll: string;
     };
     ProHeader: {
         versionTitle: string;
@@ -18,6 +22,8 @@ declare const _default: {
         cancel: string;
         backText: string;
         copyTooltips: string[];
+        itemsCountPrefix: string;
+        itemsSeparator: string;
     };
     ProDownload: {
         errorMessage: string;
@@ -39,6 +45,8 @@ declare const _default: {
         formListConfirmMessage: string;
         noData: string;
         moreItems: string;
+        confirmTitle: string;
+        confirmContent: string;
     };
     ProAction: {
         errorMessage: string;
@@ -80,6 +88,7 @@ declare const _default: {
         view: string;
         delete: string;
         download: string;
+        deleteConfirmTitle: string;
     };
     ProStep: {
         catalogue: string;

package/es/locale/zh_CN.js

@@ -9,7 +9,11 @@ export default {
   ProLayout: {
     tipAlt: '提示',
     closeAlt: '关闭',
-    tabMaxLimitMessage: '菜单tab不能超过上限{max}'
+    tabMaxLimitMessage: '菜单tab不能超过上限{max}',
+    tabMenuClose: '关闭',
+    tabMenuCloseOthers: '关闭其他',
+    tabMenuCloseRight: '关闭右侧标签页',
+    tabMenuCloseAll: '关闭全部'
   },
   ProHeader: {
     versionTitle: '版本号',
@@ -17,7 +21,9 @@ export default {
     confirm: '确定',
     cancel: '取消',
     backText: '返回',
-    copyTooltips: ['复制', '复制成功']
+    copyTooltips: ['复制', '复制成功'],
+    itemsCountPrefix: '共{count}个，',
+    itemsSeparator: ' 、'
   },
   ProDownload: {
     errorMessage: '请求失败！'
@@ -38,7 +44,9 @@ export default {
     formListActions: ['新增', '删除', '复制', '上移', '下移', '新增一行', '点击添加'],
     formListConfirmMessage: '确认删除吗?',
     noData: '暂无数据',
-    moreItems: '更多{count}项...'
+    moreItems: '更多{count}项...',
+    confirmTitle: '操作提示',
+    confirmContent: '确定要修改该字段吗？'
   },
   ProAction: {
     errorMessage: 'ProAction 配置 config 必须为数据',
@@ -79,7 +87,8 @@ export default {
     draggerLimitless: '无限制',
     view: '查看',
     delete: '删除',
-    download: '下载'
+    download: '下载',
+    deleteConfirmTitle: '确定删除?'
   },
   ProStep: {
     catalogue: '目录'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.5.6-beta.1",
+  "version": "4.5.6-beta.3",
   "license": "MIT",
   "files": [
     "es",
@@ -66,6 +66,7 @@
     "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx --ignore-pattern '**/__tests__/**' --ignore-pattern '**/*.test.*' --ignore-pattern '**/*.spec.*'",
     "code-standards:check": "node ./scripts/code-standards-check.mjs",
     "check:types": "node ./scripts/check-public-types.mjs",
+    "check:locale": "node ./scripts/check-locale.mjs",
     "commit-msg:format": "node ./scripts/format-commit-msg.mjs",
     "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
     "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
@@ -122,7 +123,7 @@
     "lodash": "^4.17.21",
     "react-intersection-observer": "^9.13.0",
     "react-resizable": "^3.0.5",
-    "react-svg": "^15.1.7"
+    "react-svg": "^17.2.4"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=6.0.0",