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

package/es/ProEditTable/components/RcTable/BaseTable.js

@@ -27,6 +27,7 @@ const BaseTable = ({
     isHideCheckBox,
     rowDraggable,
     pagination,
+    paginationValidationEnabled,
     scroll,
     summary,
     page,
@@ -37,7 +38,7 @@ const BaseTable = ({
   const [errorLength] = useEditTableError({
     containerNode: tableRef.current,
     className: 'ant-form-item-explain-error',
-    isEnabled: pagination // 分页时启用
+    isEnabled: paginationValidationEnabled
   });
   const getScroll = useCallback(() => {
     if (!scroll) return null;
@@ -87,17 +88,17 @@ const BaseTable = ({
         });
       },
       itemRender: (index, type, originalElement) => {
-        return type === 'page' && page.pageNum === index && errorLength ? /*#__PURE__*/_jsxs("div", {
+        return paginationValidationEnabled && type === 'page' && page.pageNum === index && errorLength ? /*#__PURE__*/_jsxs("div", {
           className: "pro-edit-table-pagination-item-badge",
           children: [/*#__PURE__*/_jsx(Badge, {
             count: errorLength
           }), originalElement]
         }) : originalElement;
       },
-      onChange: handlePageChange,
-      ...pagination,
-      current: page.pageNum,
-      pageSize: page.pageSize
+      ...(typeof pagination === 'object' ? pagination : {}),
+      current: (typeof pagination === 'object' ? pagination.current : undefined) ?? page.pageNum,
+      pageSize: (typeof pagination === 'object' ? pagination.pageSize : undefined) ?? page.pageSize,
+      onChange: handlePageChange
     } : false,
     scroll: getScroll()
   };

package/es/ProEditTable/components/RcTable/DraggableTable.js

@@ -165,8 +165,6 @@ const DraggableTable = ({
     ...resetProps,
     rowKey: tableRowKey,
     pagination: pagination ? {
-      current: page.pageNum,
-      pageSize: page.pageSize,
       showSizeChanger: false,
       showQuickJumper: true,
       total: value?.length,
@@ -176,8 +174,10 @@ const DraggableTable = ({
           total
         });
       },
-      onChange: handlePageChange,
-      ...pagination
+      ...(typeof pagination === 'object' ? pagination : {}),
+      current: (typeof pagination === 'object' ? pagination.current : undefined) ?? page.pageNum,
+      pageSize: (typeof pagination === 'object' ? pagination.pageSize : undefined) ?? page.pageSize,
+      onChange: handlePageChange
     } : false,
     scroll: getScroll(),
     summary

package/es/ProEditTable/components/RenderField/index.js

@@ -25,7 +25,7 @@ import ConfirmWrapper from "../../../ProForm/components/render/ConfirmWrapper";
 import { getDefaultProps } from "../../utils/getDefaultProps";
 import ListChangedWrapper from "./ListChangedWrapper";
 import useShouldUpdateForTable from "../../utils/useShouldUpdateForTable";
-import { OMIT_FORM_ITEM_AND_DOM_KEYS, arePropsEqual } from "./tools";
+import { OMIT_FORM_ITEM_AND_DOM_KEYS, arePropsEqual, hasRowFunctionDependency, mergeOnFieldChangeRow } from "./tools";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const RenderField = ({
   text: value,
@@ -237,21 +237,7 @@ const RenderField = ({
   // 因为这些函数依赖行数据，当行数据变化时需要重新计算
   // 扩展到所有模式（single/multiple/cell），统一行为
   // 注意：需要检查原始的 component/editRender，而不是处理后的 lastComponent
-  const hasFunctionDependency = _isFunction(column?.disabled) ||
-  // disabled 是函数
-  _isFunction(fieldProps) ||
-  // fieldProps 是函数
-  _isFunction(required) ||
-  // required 是函数
-  _isFunction(rules) ||
-  // rules 是函数
-  _isFunction(column?.isEditable) ||
-  // isEditable 是函数
-  _isFunction(component) ||
-  // component 是函数
-  _isFunction(editRender) ||
-  // editRender 是函数
-  _isFunction(viewRender); // viewRender 是函数
+  const hasFunctionDependency = hasRowFunctionDependency(column);
 
   // 移除 isSingleMode 限制，让所有模式都支持响应式更新
   // 性能优化已通过 useShouldUpdateForTable hook 的缓存和防抖机制实现
@@ -349,8 +335,8 @@ const RenderField = ({
   if (isView) {
     // 存在viewRender覆盖默认值
     if (typeof viewRender === 'function') {
-      currentValue = column?.dataIndex?.includes('-') ? value : currentValue;
-      const View = viewRender(currentValue, record || {}, options);
+      const latestCurrentValue = dataIndex ? rowData?.[dataIndex] : value;
+      const View = viewRender(latestCurrentValue, rowData || {}, options);
       TargetComponent = /*#__PURE__*/_jsx(Container, {
         viewEmpty: viewEmpty,
         children: View
@@ -438,7 +424,20 @@ const RenderField = ({
         TargetComponent?.props?.onFieldChange && (await TargetComponent.props.onFieldChange(...callArgs));
         onFieldChange && (await onFieldChange(...callArgs));
 
-        // onFieldChange 内已通过 form.setFieldValue(子路径) 或原地改 record 更新 store；此处再整行 setFieldValue(rowPath, rowAfter) 易用滞后快照覆盖 Field 刚写入的新值（如 formType）。仅延后读表做校验与 forceUpdate，不再整行回写。
+        // 原地修改 row 会改变 store 内的对象，但不会通知 Form 和只读单元格重新渲染。
+        // 只通知相对回调前真正变化的子字段，避免整行回写覆盖回调内显式 setFieldValue 的新值。
+        const latestStoreRow = form.getFieldValue(rowPath, true) || {};
+        const nextStoreRow = mergeOnFieldChangeRow(orgRow, row, latestStoreRow);
+        if (nextStoreRow !== latestStoreRow) {
+          // ProEditTable 注册在整个列表路径上，子行写入不会通知该 Form.Item。
+          // 以最新列表为底只替换当前行，确保其他行与显式 store 写入不被覆盖。
+          const latestList = form.getFieldValue(namePath, true) || [];
+          const nextList = [...latestList];
+          nextList[index] = nextStoreRow;
+          form.setFieldValue(namePath, nextList);
+        }
+
+        // 延后读取通知后的最新 store，统一处理联动校验与行刷新。
         setTimeout(() => {
           const rowAfter = form.getFieldValue(rowPath, true) ?? row;
           if (validateTrigger && validateTrigger.includes('onChange')) {
@@ -597,7 +596,9 @@ const RenderField = ({
       source: 'ProEditTable'
     }
   }), [cellName, lastFieldProps, TargetComponent?.props, namePath, index, lastDisabled, handleChange, handleBlur, confirm, lastDesensitization, names, originalName, viewEmpty, lastValueType, isView, otherProps?.desensitizationKey]);
-  componentProps = _omit(componentProps, ['onFieldChange', 'namePath', 'index', ...OMIT_FORM_ITEM_AND_DOM_KEYS]);
+  componentProps = _omit(componentProps, ['onFieldChange', 'namePath', 'index',
+  // precision 是 InputNumber 的有效 fieldProps，仅在真正渲染原生 DOM 时过滤
+  ...OMIT_FORM_ITEM_AND_DOM_KEYS.filter(key => key !== 'precision')]);
   if (['Switch', 'SwitchCheckbox'].includes(type)) {
     lastFormItemProps.valuePropName = 'checked';
   }
@@ -751,7 +752,7 @@ const RenderField = ({
     // 查看模式
     if (latestIsView) {
       if (typeof viewRender === 'function') {
-        const latestCurrentValue = dataIndex ? latestRowData?.[dataIndex] : null;
+        const latestCurrentValue = dataIndex ? latestRowData?.[dataIndex] : value;
         const View = viewRender(latestCurrentValue, latestRowData || {}, options);
         latestTargetComponent = /*#__PURE__*/_jsx(Container, {
           viewEmpty: viewEmpty,

package/es/ProEditTable/components/RenderField/tools.d.ts

@@ -1,5 +1,12 @@
 import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
 import { GetOriginalValueParams, RenderFieldComparableProps } from './propsType';
+/** 判断列是否包含可能依赖整行数据的函数型配置。 */
+export declare const hasRowFunctionDependency: (column: Record<string, any> | null | undefined) => boolean;
+/**
+ * 将 onFieldChange 中原地修改的字段合并到最新 Form Store 行。
+ * Store 若已将同一字段显式写成其他值，则保留 Store 值。
+ */
+export declare const mergeOnFieldChangeRow: (beforeRow: Record<string, any> | null | undefined, mutatedRow: Record<string, any> | null | undefined, latestStoreRow: Record<string, any> | null | undefined) => Record<string, any>;
 /** 列配置中不应透传到 Form.Item 或 DOM 的字段（与 ProForm Render 保持一致） */
 export declare const OMIT_FORM_ITEM_AND_DOM_KEYS: string[];
 /** 克隆子元素时需从 props 中剔除，避免透传到 div 等 DOM 导致 React 警告 */

package/es/ProEditTable/components/RenderField/tools.js

@@ -4,6 +4,33 @@ import _isEqual from "lodash/isEqual";
 import _get from "lodash/get";
 import { customEqualForFunction } from "../../../utils";
 import { getNamePath, isRecordShallowEqual } from "../../utils/tools";
+const ROW_FUNCTION_DEPENDENCY_KEYS = ['component', 'editRender', 'fieldProps', 'rules', 'required', 'disabled', 'isEditable', 'valueType', 'viewRender'];
+
+/** 判断列是否包含可能依赖整行数据的函数型配置。 */
+export const hasRowFunctionDependency = column => ROW_FUNCTION_DEPENDENCY_KEYS.some(key => _isFunction(column?.[key]));
+
+/**
+ * 将 onFieldChange 中原地修改的字段合并到最新 Form Store 行。
+ * Store 若已将同一字段显式写成其他值，则保留 Store 值。
+ */
+export const mergeOnFieldChangeRow = (beforeRow, mutatedRow, latestStoreRow) => {
+  const before = beforeRow || {};
+  const mutated = mutatedRow || {};
+  const latest = latestStoreRow || {};
+  const changedKeys = Array.from(new Set([...Object.keys(before), ...Object.keys(mutated)])).filter(key => !_isEqual(before[key], mutated[key]));
+  let nextRow = latest;
+  changedKeys.forEach(key => {
+    const storeChangedExplicitly = !_isEqual(latest[key], before[key]) && !_isEqual(latest[key], mutated[key]);
+    if (!storeChangedExplicitly) {
+      nextRow = {
+        ...nextRow,
+        [key]: mutated[key]
+      };
+    }
+  });
+  return nextRow;
+};
+
 /** 列配置中不应透传到 Form.Item 或 DOM 的字段（与 ProForm Render 保持一致） */
 export const OMIT_FORM_ITEM_AND_DOM_KEYS = ['format', 'toISOString', 'toCSTString', 'switchValue', 'precision', 'clearNotShow', 'dependNames', 'shouldCellUpdate' // 表格内部性能优化属性，不应传递给 Form.Item
 ];
@@ -91,9 +118,9 @@ export const arePropsEqual = (prevProps, nextProps) => {
     config: nextConfig
   } = nextProps;
 
-  // 函数型动态属性（component/editRender/fieldProps/rules/required/disabled/isEditable/valueType）
+  // 函数型动态属性（component/editRender/fieldProps/rules/required/disabled/isEditable/valueType/viewRender）
   // 可能依赖行内兄弟字段；行对象为同引用（原地修改）时，浅比较无法区分，需强制重渲染
-  const hasFunctionDependency = _isFunction(prevColumn?.component) || _isFunction(prevColumn?.editRender) || _isFunction(prevColumn?.fieldProps) || _isFunction(prevColumn?.rules) || _isFunction(prevColumn?.required) || _isFunction(prevColumn?.disabled) || _isFunction(prevColumn?.isEditable) || _isFunction(prevColumn?.valueType) || _isFunction(nextColumn?.component) || _isFunction(nextColumn?.editRender) || _isFunction(nextColumn?.fieldProps) || _isFunction(nextColumn?.rules) || _isFunction(nextColumn?.required) || _isFunction(nextColumn?.disabled) || _isFunction(nextColumn?.isEditable) || _isFunction(nextColumn?.valueType);
+  const hasFunctionDependency = hasRowFunctionDependency(prevColumn) || hasRowFunctionDependency(nextColumn);
   if (hasFunctionDependency && prevRecord === nextRecord) {
     return false;
   }

package/es/ProEditTable/index.js

@@ -25,6 +25,7 @@ const ProEditTable = ({
   className,
   columns,
   mode = 'multiple',
+  paginationMode = 'normal',
   stripe = true,
   draggable = false,
   disabled = false,
@@ -118,6 +119,14 @@ const ProEditTable = ({
     selectedRows,
     page
   } = state;
+  const paginationEnabled = Boolean(pagination);
+  const paginationValidationEnabled = paginationEnabled && paginationMode === 'validate';
+  const paginationConfig = typeof pagination === 'object' ? pagination : undefined;
+  const resolvedPage = useMemo(() => ({
+    pageNum: paginationConfig?.current ?? page.pageNum,
+    pageSize: paginationConfig?.pageSize ?? page.pageSize
+  }), [page.pageNum, page.pageSize, paginationConfig?.current, paginationConfig?.pageSize]);
+  const mergedSelectedRowKeys = rowSelection?.selectedRowKeys ?? selectedRowKeys;
   const virtualRowName = getNamePath(_isArray(name) ? name : [name], virtualKey);
 
   // 样式处理
@@ -166,31 +175,26 @@ const ProEditTable = ({
 
   // 分页变更
   const handlePageChange = useCallback(async (current, pageSize) => {
-    try {
-      if (pagination) {
-        if (pageSize !== page.pageSize) {
-          setState({
-            page: {
-              pageNum: current,
-              pageSize
-            }
-          });
-          return;
-        }
+    if (!paginationEnabled) return;
+    const isPageSizeChange = pageSize !== resolvedPage.pageSize;
+    if (paginationValidationEnabled && !isPageSizeChange) {
+      try {
         await form.validateFields([name], {
           recursive: true
         });
-        setState({
-          page: {
-            pageNum: current,
-            pageSize: pageSize ?? page.pageSize
-          }
-        });
+      } catch (error) {
+        handleScrollToError();
+        return;
       }
-    } catch (error) {
-      handleScrollToError();
     }
-  }, [pagination, page.pageSize, form, name]);
+    setState({
+      page: {
+        pageNum: current,
+        pageSize: pageSize ?? resolvedPage.pageSize
+      }
+    });
+    paginationConfig?.onChange?.(current, pageSize);
+  }, [form, name, paginationConfig?.onChange, paginationEnabled, paginationValidationEnabled, resolvedPage.pageSize]);
   const config = useMemo(() => ({
     form,
     mode,
@@ -205,7 +209,7 @@ const ProEditTable = ({
     actionProps,
     toolbarProps,
     setState,
-    selectedRowKeys,
+    selectedRowKeys: mergedSelectedRowKeys,
     selectedRows,
     onlyOneLineMsg,
     deletePoConfirmMsg,
@@ -220,7 +224,7 @@ const ProEditTable = ({
     tableRef,
     max,
     tableLength: value?.length,
-    page,
+    page: resolvedPage,
     originalValues,
     errorStore: errorStoreRef.current,
     prefixCls,
@@ -236,7 +240,7 @@ const ProEditTable = ({
     ...resetProps
   }), [actionDirection, actionProps, actionWidth, columns, deletePoConfirmMsg, diffConfig, editingKeys, emptyBtnText, form,
   // forceUpdate 不应该作为依赖项，因为它是触发刷新的信号，而非用于比较的数据
-  getIsNew, handlePageChange, insertType, isView, max, mode, mulDeletePoConfirmMsg, name, namePath, onlyOneLineMsg, originalValues, prefixCls, requiredAlign, resetProps, rowDisabled, selectedRowKeys, selectedRows, shouldUpdateDebounce, tableRef, toolbarProps, value?.length, viewEmpty, virtualKey, page]);
+  getIsNew, handlePageChange, insertType, isView, max, mode, mulDeletePoConfirmMsg, name, namePath, onlyOneLineMsg, originalValues, prefixCls, requiredAlign, resetProps, rowDisabled, mergedSelectedRowKeys, selectedRows, shouldUpdateDebounce, tableRef, toolbarProps, value?.length, viewEmpty, virtualKey, resolvedPage]);
 
   // 编辑行设置下样式
   const _rowClassName = record => {
@@ -267,19 +271,12 @@ const ProEditTable = ({
   }, [toolbarProps]);
 
   // 是否隐藏勾选框
-  const isHideCheckBox = isForbiddenBtn('mulDelete');
+  const isHideCheckBox = !rowSelection && isForbiddenBtn('mulDelete');
 
   // 复选框
   const _rowSelection = {
     fixed: true,
-    selectedRowKeys,
     columnWidth: 48,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setState({
-        selectedRowKeys,
-        selectedRows
-      });
-    },
     getCheckboxProps: record => {
       if (rowDisabled) {
         const _disabled = rowDisabled(record);
@@ -290,7 +287,15 @@ const ProEditTable = ({
       return {};
     },
     hideSelectAll: isHideCheckBox,
-    ...rowSelection
+    ...rowSelection,
+    selectedRowKeys: mergedSelectedRowKeys,
+    onChange: (nextSelectedRowKeys, nextSelectedRows, info) => {
+      setState({
+        selectedRowKeys: nextSelectedRowKeys,
+        selectedRows: nextSelectedRows
+      });
+      rowSelection?.onChange?.(nextSelectedRowKeys, nextSelectedRows, info);
+    }
   };
 
   // 空列表状态
@@ -411,13 +416,14 @@ const ProEditTable = ({
     isHideCheckBox,
     rowDraggable,
     pagination,
+    paginationValidationEnabled,
     scroll,
     summary: _summary,
-    page,
+    page: resolvedPage,
     formatMessage,
     locale,
     handlePageChange
-  }), [_className, _columns, _rowClassName, disabled, editingKeys, formatMessage, handlePageChange, headerRender, isHideCheckBox, locale, page, pagination, renderRowSelection, rowDraggable, rowKey, tableRowKey, scroll, _summary, tableRef, enrichedValue, virtualKey]);
+  }), [_className, _columns, _rowClassName, disabled, editingKeys, formatMessage, handlePageChange, headerRender, isHideCheckBox, locale, pagination, paginationValidationEnabled, renderRowSelection, rowDraggable, rowKey, tableRowKey, scroll, _summary, tableRef, enrichedValue, resolvedPage, virtualKey]);
 
   // 拖拽排序后，enrichedValue 中含 _dragIndex/_rowIndex（内部字段），需清除后再传给外部 onChange
   const handleDragChange = useCallback(newValue => {
@@ -446,20 +452,20 @@ const ProEditTable = ({
       ref: affixRef,
       ..._toolbarSticky,
       children: /*#__PURE__*/_jsx("div", {
-        className: `pro-edit-table-toolbar${pagination ? ' pro-edit-table-toolbar-fixed' : ''}`,
+        className: `pro-edit-table-toolbar${paginationEnabled ? ' pro-edit-table-toolbar-fixed' : ''}`,
         children: /*#__PURE__*/_jsx(RenderToolbar, {
           ...config
         })
       })
     }) : /*#__PURE__*/_jsx("div", {
-      className: `pro-edit-table-toolbar${pagination ? ' pro-edit-table-toolbar-fixed' : ''}`,
+      className: `pro-edit-table-toolbar${paginationEnabled ? ' pro-edit-table-toolbar-fixed' : ''}`,
       children: /*#__PURE__*/_jsx(RenderToolbar, {
         ...config
       })
     }) : null, footerRender ? /*#__PURE__*/_jsx("div", {
       className: "pro-edit-table-footer",
       children: footerRender
-    }) : null, pagination ? /*#__PURE__*/_jsx("div", {
+    }) : null, paginationValidationEnabled ? /*#__PURE__*/_jsx("div", {
       id: `pro-edit-table-pagination-${Array.isArray(config.name) ? config.name.filter(Boolean).join('-') : config.name || 'default'}`,
       onClick: () => {
         onPageCheck({
@@ -467,7 +473,7 @@ const ProEditTable = ({
           name,
           value,
           columns,
-          page,
+          page: resolvedPage,
           pagination,
           isView,
           disabled,

package/es/ProEditTable/propsType.d.ts

@@ -232,6 +232,7 @@ export type ProEditTableRefType = ProEditTableRefProps;
  */
 export type ProEditTableMode = 'single' | 'multiple';
 export type ProEditTableModeType = ProEditTableMode;
+export type ProEditTablePaginationMode = 'normal' | 'validate';
 /**
  * 表格插入类型
  */
@@ -268,6 +269,11 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
      * @default multiple
      */
     mode?: ProEditTableMode;
+    /**
+     * 分页行为模式。normal 仅使用 antd 分页，validate 会在切页前校验当前表格
+     * @default normal
+     */
+    paginationMode?: ProEditTablePaginationMode;
     /**
      * 必填对齐方式, 默认右对齐
      * @default right

package/es/ProEditTable/utils/index.js

@@ -12,6 +12,7 @@ import { customValidate, getNamePath, splitNames, handleScrollToError, cloneDeep
 import { filterInternalFields } from "../../ProForm/utils";
 import ProTooltip from "../../ProTooltip";
 import { RenderField, ActionButton } from "../components";
+import { hasRowFunctionDependency } from "../components/RenderField/tools";
 import locale from "../../locale";
 
 /**
@@ -345,7 +346,7 @@ export const transformColumns = (columns = [], config, caches) => {
       const hasComponent = _isFunction(item.component);
       // 函数型动态属性会依赖整行数据（可能是当前列之外的兄弟字段），
       // 这类列在行内任意字段变化时都需重渲染，不能只比对本列 dataIndex
-      const hasFunctionDependency = hasComponent || _isFunction(item.editRender) || _isFunction(item.fieldProps) || _isFunction(item.rules) || _isFunction(item.required) || _isFunction(item.disabled) || _isFunction(item.isEditable) || _isFunction(item.valueType);
+      const hasFunctionDependency = hasRowFunctionDependency(item);
       const columnCacheKey = `${Array.isArray(name) ? name.join('.') : String(name)}::${String(columnName)}`;
 
       // Fix 问题1：用原始列引用（克隆前）比对 dataSource
@@ -399,7 +400,7 @@ export const transformColumns = (columns = [], config, caches) => {
             return true;
           }
         }
-        // 函数型动态属性（component/fieldProps/rules/required/disabled/isEditable/valueType）
+        // 函数型动态属性（component/fieldProps/rules/required/disabled/isEditable/valueType/viewRender）
         // 可能依赖行内其他字段（兄弟字段），需比较整行；
         // 同引用原地修改时 isEqual 恒为 true，无法感知，必须强制重渲染
         if (hasFunctionDependency) {

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

@@ -431,6 +431,7 @@ const ProHeader = props => {
       } : {}),
       zIndex
     },
+    "data-pro-step-sticky-header": hasFixedTop ? 'true' : undefined,
     children: finalTitle ? /*#__PURE__*/_jsx("div", {
       className: "pro-header-title",
       children: finalTitle

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/es/ProStep/components/Anchor/index.js

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import { Badge } from 'antd';
-import { handleScroll } from "../../utils";
+import { handleScroll as defaultHandleScroll } from "../../utils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnchorSvg = ({
   color
@@ -42,7 +42,8 @@ export const MenuItem = props => {
     errorNum,
     currentNum,
     targetOffset,
-    scrollToError = true
+    scrollToError = true,
+    onAnchorClick = defaultHandleScroll
   } = props;
   const renderMenuIcon = () => {
     if (isCurrentStep) {
@@ -81,7 +82,7 @@ export const MenuItem = props => {
       current: isCurrentStep && onOff
     }),
     onClick: () => {
-      handleScroll(code, {
+      onAnchorClick(code, {
         targetOffset,
         scrollToError
       });

package/es/ProStep/components/Item/index.js

@@ -1,6 +1,6 @@
 import _isBoolean from "lodash/isBoolean";
 // @ts-nocheck
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import LazyLoad, { forceCheck } from "../LazyLoad";
 import { useStep } from "../../index";
 import ProCollapse from "../../../ProLayout/components/ProCollapse";
@@ -25,9 +25,9 @@ const ProStepItem = ({
   const {
     register,
     collapse,
-    lazyLoad: globalLazyLoad,
-    targetOffset
+    lazyLoad: globalLazyLoad
   } = useStep();
+  const itemRef = useRef(null);
   const lazyLoad = stepLazyLoad ?? globalLazyLoad;
   useEffect(() => {
     // Schedule registration to avoid re-render issues
@@ -37,6 +37,7 @@ const ProStepItem = ({
         title,
         order,
         lazyLoad,
+        element: itemRef.current,
         ...restProps
       });
     }, 0);
@@ -59,10 +60,11 @@ const ProStepItem = ({
   // If there's no `register` function or if collapsing is enabled, wrap in ProCollapse
   if (!register || collapse && collapseItem && title) {
     return /*#__PURE__*/_jsx("div", {
+      ref: itemRef,
       className: "pro-step-item",
       id: id,
       style: {
-        scrollMarginTop: targetOffset ? `${targetOffset}px` : undefined
+        scrollMarginTop: 'var(--pro-step-anchor-offset)'
       },
       children: /*#__PURE__*/_jsx(ProCollapse, {
         title: title,
@@ -85,10 +87,11 @@ const ProStepItem = ({
 
   // Otherwise, just render children
   return /*#__PURE__*/_jsx("div", {
+    ref: itemRef,
     className: "pro-step-item",
     id: id,
     style: {
-      scrollMarginTop: targetOffset ? `${targetOffset}px` : undefined
+      scrollMarginTop: 'var(--pro-step-anchor-offset)'
     },
     children: renderChildren()
   });

package/es/ProStep/components/Step/index.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import { ProStepType } from '../../propsType';
-export declare const Step: ({ fixedTop, dataSource, activeKey, errorCollection, style, targetOffset, scrollToError, }: import("../../propsType").ProStepPropsType & {
+export declare const Step: ({ fixedTop, dataSource, activeKey, errorCollection, style, targetOffset, scrollToError, onAnchorClick, }: import("../../propsType").ProStepPropsType & {
     errorCollection: object;
+    onAnchorClick?: (id: string, options?: {
+        targetOffset?: string | number;
+        scrollToError?: boolean;
+    }) => void;
 }) => React.JSX.Element;
 export default Step;

package/es/ProStep/components/Step/index.js

@@ -4,8 +4,8 @@ import ProIcon from "../../../ProIcon/index";
 import catalogSvg from "../../../assets/catalog.svg";
 import Anchor from "../Anchor";
 import locale from "../../../locale";
+import { DEFAULT_FIXED_TOP } from "../../constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_FIXED_TOP = 'var(--pro-layout-content-sticky-top, 64px)';
 const toCssLength = value => typeof value === 'number' ? `${value}px` : value;
 export const Step = ({
   fixedTop = DEFAULT_FIXED_TOP,
@@ -14,7 +14,8 @@ export const Step = ({
   errorCollection,
   style,
   targetOffset,
-  scrollToError
+  scrollToError,
+  onAnchorClick
 }) => {
   const [onOff, setOnOff] = useState(false);
   const fixedTopCss = toCssLength(fixedTop);
@@ -36,9 +37,10 @@ export const Step = ({
       item.currentNum = index + 1;
       item.errorNum = errorNum;
       item.targetOffset = targetOffset;
+      item.onAnchorClick = onAnchorClick;
     });
     return nextDataSource;
-  }, [dataSource, activeKey, errorCollection]);
+  }, [dataSource, activeKey, errorCollection, onAnchorClick, targetOffset]);
   const handleMouseEnter = () => {
     setOnOff(true);
   };

package/es/ProStep/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_FIXED_TOP = "var(--pro-layout-content-sticky-top, 64px)";