@zat-design/sisyphus-react 4.5.8-beta.6 → 4.5.8

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

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { compatStartTransition } from "../../../utils";
 import valueTypeMap from "../../../ProForm/utils/valueType";
 import transformMap from "../../utils/transform";
-import { getNamePath, difference, getDisabled, resolveChangedFields, syncGroupCombinedValues } from "../../utils/tools";
+import { getNamePath, difference, getDisabled, isRecordShallowEqual, resolveChangedFields, syncGroupCombinedValues } from "../../utils/tools";
 import * as componentMap from "../../../ProForm/components";
 import { useProConfig } from "../../../ProConfigProvider";
 import Container from "../../../ProForm/components/Container";
@@ -104,6 +104,11 @@ const RenderField = ({
   const namePath = useMemo(() => getNamePath(name, virtualKey), [namePathKey, name, virtualKey]);
   const rowNamePath = useMemo(() => [...namePath, index], [namePath, index]);
   const rowData = form.getFieldValue(rowNamePath) || record || {};
+
+  // Form.Item shouldUpdate 可能在 RenderField 外层未重渲染时多次执行 render props。
+  // 缓存本次外层渲染期间的最新行计算结果，避免同一行版本重复调用动态配置函数。
+  const shouldUpdateStateCacheRef = useRef(undefined);
+  shouldUpdateStateCacheRef.current = undefined;
   let currentValue = dataIndex ? rowData?.[dataIndex] : null;
 
   // 构建新的参数格式（与 ProForm 保持一致）
@@ -663,45 +668,48 @@ const RenderField = ({
       namePath: rowNamePath
     };
     const latestRowParams = [latestRowData, latestReactiveParams];
+    const cachedState = shouldUpdateStateCacheRef.current;
+    if (cachedState && isRecordShallowEqual(cachedState.rowSnapshot, latestRowData)) {
+      return cachedState.result;
+    }
 
-    // ⭐ 关键修改：shouldUpdate 模式下，跳过缓存，直接重新计算所有响应式属性
-    let latestFieldProps = fieldProps || {};
-    if (_isFunction(fieldProps)) {
+    // 初次 render props 会与外层 RenderField 使用同一行数据，直接复用 hook 已计算结果。
+    const canReuseCurrentState = isRecordShallowEqual(latestRowData, dynamicProps.rowSnapshot);
+    let latestFieldProps = canReuseCurrentState ? lastFieldProps : fieldProps || {};
+    if (!canReuseCurrentState && _isFunction(fieldProps)) {
       latestFieldProps = fieldProps(latestRowData, latestReactiveParams);
     }
-
-    // 重新计算 required（用于可能的后续逻辑）
-    let latestRequired = required;
-    if (_isFunction(required)) {
+    let latestRequired = canReuseCurrentState ? lastRequired : required;
+    if (!canReuseCurrentState && _isFunction(required)) {
       latestRequired = required(latestRowData, latestReactiveParams);
     }
-
-    // 重新计算 rules（用于可能的后续逻辑）
-    let latestRules = rules;
-    if (_isFunction(rules)) {
+    let latestRules = canReuseCurrentState ? lastRules : rules;
+    if (!canReuseCurrentState && _isFunction(rules)) {
       latestRules = rules(latestRowData, latestReactiveParams);
     }
-
-    // 重新计算 desensitization
-    let latestDesensitization = desensitization || [];
-    if (_isFunction(desensitization)) {
+    let latestDesensitization = canReuseCurrentState ? lastDesensitization : desensitization || [];
+    if (!canReuseCurrentState && _isFunction(desensitization)) {
       latestDesensitization = desensitization(latestRowData, latestReactiveParams);
     }
-
-    // 重新计算 component
-    let latestComponent = component || editRender;
-    if (_isFunction(latestComponent)) {
+    let latestComponent = canReuseCurrentState ? lastComponent : component || editRender;
+    if (!canReuseCurrentState && _isFunction(latestComponent)) {
       latestComponent = latestComponent(latestRowData, latestReactiveParams);
     }
-
-    // 重新计算 isEditable（使用原始的 column.isEditable，而不是处理后的 isEditable）
-    let latestIsEditable = column.isEditable ?? true;
-    if (_isFunction(column.isEditable)) {
+    let latestIsEditable = canReuseCurrentState ? isEditable : column.isEditable ?? true;
+    if (!canReuseCurrentState && _isFunction(column.isEditable)) {
       latestIsEditable = column.isEditable(latestRowData, latestReactiveParams);
     }
-
-    // 重新计算 disabled
-    const latestDisabled = getDisabled({
+    let latestValueType = canReuseCurrentState ? lastValueType : valueType;
+    if (!canReuseCurrentState && _isFunction(valueType)) {
+      const latestCurrentValue = dataIndex ? latestRowData?.[dataIndex] : null;
+      latestValueType = valueType(latestCurrentValue, latestRowData, {
+        index,
+        form,
+        namePath: rowNamePath,
+        name: column?.name
+      });
+    }
+    const latestDisabled = canReuseCurrentState ? lastDisabled : getDisabled({
       globalControl: otherProps?.globalControl,
       formDisabled: otherProps?.formDisabled,
       column,
@@ -721,13 +729,8 @@ const RenderField = ({
       onChange: handleChange,
       onBlur: handleBlur
     };
-
-    // ⭐ 关键修改：在 shouldUpdate 模式下，需要重新设置 TargetComponent
-    // 因为 component 函数可能返回不同的结果
     let latestTargetComponent = TargetComponent;
-
-    // 首先检查是否有内置type
-    if (!latestComponent && typeof type === 'string') {
+    if (!canReuseCurrentState && !latestComponent && typeof type === 'string') {
       latestTargetComponent = componentMap[type] ?? /*#__PURE__*/_jsx(_Fragment, {});
     }
 
@@ -741,7 +744,7 @@ const RenderField = ({
       params: latestRowParams,
       rowDisabled: rowDisabled || 'empty'
     });
-    if (latestIsEditable && isEditing) {
+    if (!canReuseCurrentState && latestIsEditable && isEditing) {
       if ( /*#__PURE__*/React.isValidElement(latestComponent)) {
         latestTargetComponent = latestComponent;
       } else if (latestComponent) {
@@ -750,7 +753,7 @@ const RenderField = ({
     }
 
     // 查看模式
-    if (latestIsView) {
+    if (!canReuseCurrentState && latestIsView) {
       if (typeof viewRender === 'function') {
         const latestCurrentValue = dataIndex ? latestRowData?.[dataIndex] : value;
         const View = viewRender(latestCurrentValue, latestRowData || {}, options);
@@ -769,7 +772,8 @@ const RenderField = ({
       ...latestComponentProps,
       otherProps: {
         ...latestComponentProps.otherProps,
-        isView: latestIsView
+        isView: latestIsView,
+        valueType: latestValueType
       }
     };
 
@@ -788,7 +792,7 @@ const RenderField = ({
         };
       }
     }
-    return {
+    const result = {
       finalComponentProps: latestComponentProps,
       targetComponent: latestTargetComponent,
       latestIsView,
@@ -796,6 +800,13 @@ const RenderField = ({
       effectiveRules: latestRules,
       effectiveFieldProps: latestFieldProps
     };
+    shouldUpdateStateCacheRef.current = {
+      rowSnapshot: {
+        ...latestRowData
+      },
+      result
+    };
+    return result;
   };
 
   // 根据 latestIsView 和最新 required/rules 构建正确的 Form.Item props

package/es/ProEditTable/index.js

@@ -17,8 +17,24 @@ import Empty from "../assets/empty.png";
 import locale, { formatMessage } from "../locale";
 import { BaseTable, DraggableTable } from "./components/RcTable";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const EMPTY_VALUE = [];
+const EMPTY_ACTION_PROPS = [];
+const EMPTY_TOOLBAR_PROPS = [];
+
+/** 保留浅层语义相同对象的引用，避免 rest props 每次分配新对象导致整表重算。 */
+const useShallowStableObject = value => {
+  const valueRef = useRef(value);
+  const previous = valueRef.current;
+  const previousKeys = Object.keys(previous);
+  const nextKeys = Object.keys(value);
+  const changed = previousKeys.length !== nextKeys.length || nextKeys.some(key => !Object.is(previous[key], value[key]));
+  if (changed) {
+    valueRef.current = value;
+  }
+  return valueRef.current;
+};
 const ProEditTable = ({
-  value = [],
+  value = EMPTY_VALUE,
   onChange,
   onDrag,
   onDragEnd,
@@ -32,8 +48,8 @@ const ProEditTable = ({
   insertType = 'after',
   emptyBtnText = locale.ProEditTable.clickAdd,
   actionWidth,
-  actionProps = [],
-  toolbarProps = [],
+  actionProps = EMPTY_ACTION_PROPS,
+  toolbarProps = EMPTY_TOOLBAR_PROPS,
   toolbarSticky,
   rowSelection,
   onlyOneLineMsg = locale.ProEditTable.onlyOneLineMsg,
@@ -53,13 +69,14 @@ const ProEditTable = ({
   diffConfig,
   ...resetProps
 }, ref) => {
+  const stableResetProps = useShallowStableObject(resetProps);
   // 上下文form
   const contentForm = Form.useFormInstance();
   const formFieldProps = ProForm.useFieldProps() || {};
   const affixRef = useRef(null);
-  const form = contentForm || formFieldProps?.form || resetProps?.form;
-  let name = formFieldProps?.name || resetProps?.name || resetProps?.id?.split?.('_');
-  const shouldUpdateDebounce = formFieldProps?.shouldUpdateDebounce ?? resetProps?.shouldUpdateDebounce ?? 200;
+  const form = contentForm || formFieldProps?.form || stableResetProps?.form;
+  let name = formFieldProps?.name || stableResetProps?.name || stableResetProps?.id?.split?.('_');
+  const shouldUpdateDebounce = formFieldProps?.shouldUpdateDebounce ?? stableResetProps?.shouldUpdateDebounce ?? 200;
   const {
     isView = false,
     viewEmpty = '-',
@@ -71,6 +88,9 @@ const ProEditTable = ({
     name = [...namePath, ...name.slice(1)];
     disabled = formFieldProps?.disabled || disabled; // formFieldProps?.disabled可能是函数？？
   }
+  const nameSignature = Array.isArray(name) ? name.join('\u0001') : String(name);
+  // ProForm 上下文可能每次渲染都生成新的 namePath 数组，按路径语义稳定引用。
+  name = useMemo(() => name, [nameSignature]);
   const tableRef = useRef(null);
   // 虚拟表格错误存储：脱离 antd Field 生命周期持久化真实报错文案，
   // 解决滚动卸载后报错丢失（报错常驻）。按表格实例隔离。
@@ -95,6 +115,15 @@ const ProEditTable = ({
   const requiredAlign = useMemo(() => {
     return themeConfig?.data?.zauiFormAlign ?? configRequiredAlign ?? 'left';
   }, [themeConfig?.data?.zauiFormAlign, configRequiredAlign]);
+  const renderOtherProps = useMemo(() => ({
+    globalControl: stableResetProps?.otherProps?.globalControl,
+    formDisabled: stableResetProps?.otherProps?.formDisabled,
+    desensitizationKey: stableResetProps?.otherProps?.desensitizationKey
+  }), [stableResetProps?.otherProps?.desensitizationKey, stableResetProps?.otherProps?.formDisabled, stableResetProps?.otherProps?.globalControl]);
+  const mergedDiffConfig = useMemo(() => ({
+    ...stableResetProps?.otherProps?.diffConfig,
+    ...diffConfig
+  }), [diffConfig, stableResetProps?.otherProps?.diffConfig]);
   const [state, setState] = useSetState({
     forceUpdate: {},
     // 表格内部强制刷新开关
@@ -127,7 +156,7 @@ const ProEditTable = ({
     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);
+  const virtualRowName = useMemo(() => getNamePath(_isArray(name) ? name : [name], virtualKey), [name, virtualKey]);
 
   // 样式处理
   const _className = classnames({
@@ -150,7 +179,7 @@ const ProEditTable = ({
   const originalValues = useMemo(() => {
     let nextOriginalValues;
     // 原始值也需要设置对应的rowkey，后续比对通过rowkey对比
-    const originalArr = _get(resetProps?.originalValues, name);
+    const originalArr = _get(stableResetProps?.originalValues, name);
     const isOriginalAllHasKey = originalArr ? originalArr?.every?.(item => item.rowKey) : true;
     const isNeedCoverOriginal = originalArr?.some?.(item => item.rowKey !== getRowKey(item));
     // 初始化默认生成row-key
@@ -164,14 +193,14 @@ const ProEditTable = ({
       _set(nextOriginalValues, name, originalArr);
     }
     return nextOriginalValues;
-  }, [resetProps?.originalValues]);
+  }, [getRowKey, name, stableResetProps?.originalValues]);
   const getIsNew = useCallback(record => {
     const originalArr = _get(originalValues, name);
     if (!originalArr?.length) {
       return false;
     }
     return !originalArr?.find?.(item => getRowKey(item) === getRowKey(record));
-  }, [originalValues, name]);
+  }, [getRowKey, originalValues, name]);
 
   // 分页变更
   const handlePageChange = useCallback(async (current, pageSize) => {
@@ -230,27 +259,27 @@ const ProEditTable = ({
     prefixCls,
     rowDisabled,
     actionDirection,
-    diffConfig: {
-      ...resetProps?.otherProps?.diffConfig,
-      ...diffConfig
-    },
+    diffConfig: mergedDiffConfig,
     shouldUpdateDebounce,
     getIsNew,
     handlePageChange,
-    ...resetProps
+    validateTrigger: stableResetProps?.validateTrigger,
+    validateMessages: stableResetProps?.validateMessages,
+    virtual: stableResetProps?.virtual,
+    otherProps: renderOtherProps
   }), [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, mergedSelectedRowKeys, selectedRows, shouldUpdateDebounce, tableRef, toolbarProps, value?.length, viewEmpty, virtualKey, resolvedPage]);
+  getIsNew, handlePageChange, insertType, isView, max, mergedDiffConfig, mode, mulDeletePoConfirmMsg, name, namePath, onlyOneLineMsg, originalValues, prefixCls, requiredAlign, renderOtherProps, rowDisabled, mergedSelectedRowKeys, selectedRows, shouldUpdateDebounce, stableResetProps?.validateMessages, stableResetProps?.validateTrigger, stableResetProps?.virtual, tableRef, toolbarProps, value?.length, viewEmpty, virtualKey, resolvedPage]);
 
   // 编辑行设置下样式
-  const _rowClassName = record => {
+  const _rowClassName = useCallback(record => {
     const isEdit = !virtualKey || editingKeys.includes(record.rowKey);
-    const className = isEdit ? 'is-editing' : '';
+    const rowClassName = isEdit ? 'is-editing' : '';
     if (getIsNew(record)) {
-      return `is-new-row ${className}`;
+      return `is-new-row ${rowClassName}`;
     }
-    return className;
-  };
+    return rowClassName;
+  }, [editingKeys, getIsNew, virtualKey]);
 
   // 判断是否禁止添加、批量删除
   const isForbiddenBtn = useCallback(type => {
@@ -274,7 +303,7 @@ const ProEditTable = ({
   const isHideCheckBox = !rowSelection && isForbiddenBtn('mulDelete');
 
   // 复选框
-  const _rowSelection = {
+  const _rowSelection = useMemo(() => ({
     fixed: true,
     columnWidth: 48,
     getCheckboxProps: record => {
@@ -296,7 +325,7 @@ const ProEditTable = ({
       });
       rowSelection?.onChange?.(nextSelectedRowKeys, nextSelectedRows, info);
     }
-  };
+  }), [isHideCheckBox, mergedSelectedRowKeys, rowDisabled, rowSelection, setState]);
 
   // 空列表状态
   const emptyDom = useMemo(() => () => /*#__PURE__*/_jsxs("div", {
@@ -321,7 +350,7 @@ const ProEditTable = ({
    * 渲染表格选择器
    * @returns rowSelection
    */
-  const renderRowSelection = () => {
+  const renderRowSelection = useCallback(() => {
     if (disabled || isView) {
       return null;
     }
@@ -332,10 +361,10 @@ const ProEditTable = ({
       return _rowSelection;
     }
     return null;
-  };
+  }, [_rowSelection, disabled, draggable, isHideCheckBox, isView]);
   const _columns = useMemo(() => {
     return transformColumns(columns, config, cellCachesRef.current);
-  }, [disabled, forceUpdate, columns, page, actionProps, editingKeys, config]);
+  }, [columns, config, forceUpdate]);
   const initDataSource = () => {
     // 检查每一项是否有 rowKey 或通过 rowKey 字段获取的 key
     const isAllHasKey = value?.every?.(item => item.rowKey || typeof rowKey === 'string' && item[rowKey]);
@@ -359,7 +388,7 @@ const ProEditTable = ({
   useEffect(() => {
     initDataSource();
   }, [value, originalValues]);
-  useImperativeHandle(resetProps?.ref || ref, () => {
+  useImperativeHandle(stableResetProps?.ref || ref, () => {
     return {
       getInternalState: () => state,
       setInternalState: setState
@@ -377,11 +406,11 @@ const ProEditTable = ({
     }
   }, [toolbarSticky]);
   const _toolbarSticky = _isBoolean(toolbarSticky) ? {} : toolbarSticky;
-  const _summary = typeof summary === 'object' ? data => /*#__PURE__*/_jsx(Summary, {
+  const _summary = useMemo(() => typeof summary === 'object' ? data => /*#__PURE__*/_jsx(Summary, {
     data: data,
     summary: summary,
     rowSelection: renderRowSelection()
-  }) : summary;
+  }) : summary, [renderRowSelection, summary]);
   const TableComponent = draggable ? DraggableTable : BaseTable;
 
   // 给每个 record 附加编辑状态标识，让 shouldCellUpdate 能检测到状态变化
@@ -435,17 +464,18 @@ const ProEditTable = ({
     }) => rest);
     onChange?.(cleanValue);
   }, [onChange]);
+  const draggableProps = useMemo(() => ({
+    onChange: draggable ? handleDragChange : onChange,
+    onDrag,
+    onDragEnd,
+    draggable
+  }), [draggable, handleDragChange, onChange, onDrag, onDragEnd]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ConfigProvider, {
       renderEmpty: value?.length ? undefined : emptyDom,
       children: /*#__PURE__*/_jsx(TableComponent, {
         ...resetProps,
-        draggableProps: {
-          onChange: draggable ? handleDragChange : onChange,
-          onDrag,
-          onDragEnd,
-          draggable
-        },
+        draggableProps: draggableProps,
         tableProps: tableProps
       })
     }), !isView && value?.length ? toolbarSticky ? /*#__PURE__*/_jsx(Affix, {
@@ -485,7 +515,7 @@ const ProEditTable = ({
       virtualKey: virtualKey,
       editingKeys: editingKeys,
       onlyOneLineMsg: onlyOneLineMsg,
-      virtual: resetProps?.virtual,
+      virtual: stableResetProps?.virtual,
       columns: columns,
       config: config,
       errorStore: errorStoreRef.current

package/es/ProEditTable/utils/useShouldUpdateForTable.d.ts

@@ -11,6 +11,8 @@ interface Result {
     desensitization: any;
     valueType: any;
     component: any;
+    /** 当前缓存结果对应的行浅快照，供 RenderField 判断是否可安全复用。 */
+    rowSnapshot: Record<string, any> | undefined;
 }
 declare const useShouldUpdateForTable: (props: UseShouldUpdateForTableProps) => Result;
 export default useShouldUpdateForTable;

package/es/ProEditTable/utils/useShouldUpdateForTable.js

@@ -3,6 +3,7 @@ import _isEqualWith from "lodash/isEqualWith";
 import _isFunction from "lodash/isFunction";
 import { useRef, useState, useEffect } from 'react';
 import { customEqualForFunction } from "../../utils";
+import { isRecordShallowEqual } from "./tools";
 const useShouldUpdateForTable = props => {
   const {
     rowParams,
@@ -18,6 +19,7 @@ const useShouldUpdateForTable = props => {
   const desensitizationRef = useRef(undefined);
   const valueTypeRef = useRef(undefined);
   const componentRef = useRef(undefined);
+  const resolvedRowSnapshotRef = useRef(undefined);
   const [, reRender] = useState({});
   const debouncedUpdateRef = useRef(null);
   const pendingParamsRef = useRef(null);
@@ -107,6 +109,9 @@ const useShouldUpdateForTable = props => {
     } else {
       componentRef.current = componentOrEditRender;
     }
+    resolvedRowSnapshotRef.current = values && typeof values === 'object' ? {
+      ...values
+    } : values;
     if (hasChange) {
       reRender({});
     }
@@ -136,12 +141,15 @@ const useShouldUpdateForTable = props => {
   const fieldPropsFactoryChanged = prevFieldPropsFactoryRef.current !== currentFieldPropsFactory;
   prevFieldPropsFactoryRef.current = currentFieldPropsFactory;
 
-  // 行数据引用 + 行索引均不变时跳过深比较（虚拟滚动常见路径）
+  // 上一次保存的是浅快照，可同时覆盖引用稳定和 onFieldChange 原地修改两种路径。
   const prevRowParams = prevRowParamsRef.current;
-  const rowDataUnchanged = isInitializedRef.current && prevRowParams?.[0] === rowParams[0] && prevRowParams?.[1]?.index === rowParams[1]?.index;
+  const rowDataUnchanged = isInitializedRef.current && isRecordShallowEqual(prevRowParams?.[0], rowParams[0]) && prevRowParams?.[1]?.index === rowParams[1]?.index;
   const shouldProcess = !isInitializedRef.current || fieldPropsFactoryChanged || !rowDataUnchanged && !_isEqualWith(prevRowParams, rowParams, customEqualForFunction);
   if (shouldProcess) {
-    prevRowParamsRef.current = rowParams;
+    const currentRowData = rowParams[0];
+    prevRowParamsRef.current = [currentRowData && typeof currentRowData === 'object' ? {
+      ...currentRowData
+    } : currentRowData, rowParams[1]];
     isInitializedRef.current = true;
     if (fieldPropsFactoryChanged) {
       // 外部依赖变化会生成新的 fieldProps 函数，需要立即替换旧闭包缓存
@@ -162,7 +170,8 @@ const useShouldUpdateForTable = props => {
     fieldProps: fieldPropsRef.current ?? column.fieldProps,
     desensitization: desensitizationRef.current ?? column.desensitization,
     valueType: valueTypeRef.current ?? column.valueType,
-    component: componentRef.current ?? (column.component || column.editRender)
+    component: componentRef.current ?? (column.component || column.editRender),
+    rowSnapshot: resolvedRowSnapshotRef.current
   };
 };
 export default useShouldUpdateForTable;

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

@@ -51,6 +51,7 @@ export function TabsHeader({
   const tabKeys = (tabsItems ?? []).map(item => item.key);
   return /*#__PURE__*/_jsx("div", {
     className: "pro-layout-tabs-header",
+    "data-pro-layout-tabs-measure": "true",
     children: /*#__PURE__*/_jsx(Tabs, {
       activeKey: activeKey,
       onChange: onTabChange,

package/es/ProLayout/index.js

@@ -17,6 +17,7 @@ import headerBg from "../assets/header_bg.png";
 // 全局上下文
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LayoutContext = /*#__PURE__*/createContext(undefined);
+const TABS_HEADER_MEASURE_SELECTOR = '[data-pro-layout-tabs-measure="true"]';
 const ProLayout = props => {
   const {
     children,
@@ -94,26 +95,45 @@ const ProLayout = props => {
   useLayoutEffect(() => {
     const noticeEl = notice && !isIframePure ? noticeElRef.current : null;
     const visibleTabsBarEl = isTabsLayout && hasTabs && !isIframePure ? tabsBarEl : null;
+    const visibleTabsHeaderEl = visibleTabsBarEl?.querySelector(TABS_HEADER_MEASURE_SELECTOR);
     let active = true;
+    let animationFrameId;
     const measureStickyElements = () => {
       if (!active) return;
       const nextHeights = {
         notice: noticeEl?.getBoundingClientRect().height ?? 0,
-        tabsBar: visibleTabsBarEl?.getBoundingClientRect().height ?? 0
+        tabsBar: visibleTabsHeaderEl?.getBoundingClientRect().height ?? 0
       };
       setStickyHeights(currentHeights => currentHeights.notice === nextHeights.notice && currentHeights.tabsBar === nextHeights.tabsBar ? currentHeights : nextHeights);
     };
     measureStickyElements();
-    const observedElements = [noticeEl, visibleTabsBarEl].filter(element => element !== null);
+    if (typeof window.requestAnimationFrame === 'function') {
+      animationFrameId = window.requestAnimationFrame(measureStickyElements);
+    }
+    const handleTabsTransitionEnd = event => {
+      if (event.target === visibleTabsBarEl && event.propertyName === 'grid-template-rows') {
+        measureStickyElements();
+      }
+    };
+    visibleTabsBarEl?.addEventListener('transitionend', handleTabsTransitionEnd);
+    const observedElements = [noticeEl, visibleTabsHeaderEl].filter(element => element !== null && element !== undefined);
     if (observedElements.length === 0 || typeof ResizeObserver === 'undefined') {
       return () => {
         active = false;
+        if (animationFrameId !== undefined) {
+          window.cancelAnimationFrame(animationFrameId);
+        }
+        visibleTabsBarEl?.removeEventListener('transitionend', handleTabsTransitionEnd);
       };
     }
     const resizeObserver = new ResizeObserver(measureStickyElements);
     observedElements.forEach(element => resizeObserver.observe(element));
     return () => {
       active = false;
+      if (animationFrameId !== undefined) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+      visibleTabsBarEl?.removeEventListener('transitionend', handleTabsTransitionEnd);
       resizeObserver.disconnect();
     };
   }, [hasTabs, isIframePure, isTabsLayout, notice, tabsBarEl]);

package/es/ProLayout/style/index.less

@@ -388,11 +388,10 @@
 
       .pro-layout-tabs-content {
         > .tab-pane {
-          // ProStep 以 ProHeader 开头时，去掉 tabs 内容区的顶部/右侧外层留白。
-          // ProStep 保持默认 right: 0，内容与收起态步骤条保留 16px 间距；左侧缩进不变。
+          // ProStep 以 ProHeader 开头时，仅去掉 tabs 内容区的顶部留白。
+          // 保留右侧内边距，让 ProStep wrapper 继续为贴右步骤条预留 16px 间距。
           > .pro-step-wrapper:has(> .pro-header:first-child) {
             margin-top: calc(-1px - var(--zaui-space-size-md, 16px));
-            margin-right: calc(-1px - var(--zaui-space-size-md, 16px));
           }
 
           > .pro-header.pro-header-no-describe:first-child {

package/es/ProTable/components/EditableCell/EditIcon.js

@@ -1,6 +1,5 @@
+import { EditOutlined } from '@ant-design/icons';
 import React from 'react';
-import ProIcon from "../../../ProIcon";
-import editSvg from "../../../assets/edit.svg";
 import styles from "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditIcon = ({
@@ -9,10 +8,7 @@ const EditIcon = ({
   return /*#__PURE__*/_jsx("span", {
     className: styles['editable-cell-edit-icon'],
     onClick: onClick,
-    children: /*#__PURE__*/_jsx(ProIcon, {
-      src: editSvg,
-      size: "20px"
-    })
+    children: /*#__PURE__*/_jsx(EditOutlined, {})
   });
 };
 export default EditIcon;

package/es/ProTable/components/EditableCell/index.less

@@ -14,10 +14,6 @@
   color: rgba(0, 0, 0, 0.65);
   flex-shrink: 0;
 
-  svg path {
-    fill: currentColor !important;
-  }
-
   &:hover {
     color: var(--zaui-brand, #006aff);
   }
@@ -26,4 +22,3 @@
 td:hover .editable-cell-edit-icon {
   visibility: visible;
 }
-