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

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";
@@ -26,7 +26,7 @@ import { getDefaultProps } from "../../utils/getDefaultProps";
 import ListChangedWrapper from "./ListChangedWrapper";
 import useShouldUpdateForTable from "../../utils/useShouldUpdateForTable";
 import { OMIT_FORM_ITEM_AND_DOM_KEYS, arePropsEqual, hasRowFunctionDependency, mergeOnFieldChangeRow } from "./tools";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const RenderField = ({
   text: value,
   record,
@@ -90,6 +90,8 @@ const RenderField = ({
 
   // type类型 首字母转大写
   type = type?.replace?.(type[0], type[0].toUpperCase()) || 'Input';
+  const fallbackType = type;
+  const hasCustomComponent = 'component' in column || 'editRender' in column;
 
   // 自定义组件时 防止默认值影像后续判断
   if ('component' in column) {
@@ -104,6 +106,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 保持一致）
@@ -171,7 +178,7 @@ const RenderField = ({
 
   // component 处理 - 优先使用 hook 返回的值
   if (_isFunction(lastComponent)) {
-    lastComponent = dynamicProps.component ?? lastComponent(rowData, reactiveParams);
+    lastComponent = dynamicProps.componentResolved ? dynamicProps.component : lastComponent(rowData, reactiveParams);
   }
 
   // 更新 lastEditRender 为处理后的 lastComponent
@@ -193,6 +200,23 @@ const RenderField = ({
 
   // 多态：可能是内置组件类型、自定义 component，或已渲染的 ReactElement（lastEditRender），保留显式 any
   let TargetComponent;
+  const fallbackTargetComponent = typeof fallbackType === 'string' ? componentMap[fallbackType] : undefined;
+  const invalidComponentWarnedRef = useRef(false);
+  const resolveEditTargetComponent = candidate => {
+    if ( /*#__PURE__*/React.isValidElement(candidate)) {
+      invalidComponentWarnedRef.current = false;
+      return candidate;
+    }
+    if (hasCustomComponent && !invalidComponentWarnedRef.current && process.env.NODE_ENV !== 'production') {
+      const columnName = dataIndex ?? column?.name ?? title ?? originTitle ?? 'unknown';
+      console.warn('[ProEditTable] component 必须返回合法的 ReactElement，已回退到内置组件。', {
+        column: Array.isArray(columnName) ? columnName.join('.') : String(columnName),
+        received: candidate
+      });
+      invalidComponentWarnedRef.current = true;
+    }
+    return fallbackTargetComponent;
+  };
 
   // 将Hooks调用移到组件顶层
   const proConfig = useProConfig();
@@ -315,20 +339,9 @@ const RenderField = ({
       ...valueTypeTransform()
     }, form, names, namesStr, type);
   }, [names, baseName, index, dataIndex, lastFormItemProps, type]);
-  if (!lastEditRender && typeof type === 'string') {
-    // componentMap 为内置组件命名空间，按字符串 type 动态取用，保留显式 any 索引
-    TargetComponent = componentMap[type] ?? /*#__PURE__*/_jsx(_Fragment, {});
-  }
-  if (isEditable && isEditing) {
-    // lastEditRender 已经是处理后的值（通过 dynamicProps.component 或直接计算）
-    // 如果原本是函数，此时 lastEditRender 已经是执行后的 ReactNode
-    // 如果原本是 ReactElement，lastEditRender 就是 ReactElement
-    if ( /*#__PURE__*/React.isValidElement(lastEditRender)) {
-      TargetComponent = lastEditRender;
-    } else if (lastEditRender) {
-      // 其他情况（可能是字符串或其他类型的 ReactNode）
-      TargetComponent = lastEditRender;
-    }
+  TargetComponent = fallbackTargetComponent;
+  if (isEditable && isEditing && hasCustomComponent) {
+    TargetComponent = resolveEditTargetComponent(lastEditRender);
   }
 
   // 查看模式
@@ -663,45 +676,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,15 +737,7 @@ const RenderField = ({
       onChange: handleChange,
       onBlur: handleBlur
     };
-
-    // ⭐ 关键修改：在 shouldUpdate 模式下，需要重新设置 TargetComponent
-    // 因为 component 函数可能返回不同的结果
-    let latestTargetComponent = TargetComponent;
-
-    // 首先检查是否有内置type
-    if (!latestComponent && typeof type === 'string') {
-      latestTargetComponent = componentMap[type] ?? /*#__PURE__*/_jsx(_Fragment, {});
-    }
+    let latestTargetComponent = canReuseCurrentState ? TargetComponent : fallbackTargetComponent;
 
     // 然后处理自定义 component
     const latestIsView = !latestIsEditable || record?.['is-view'] || config.isView || virtualKey && !isEditing || getDisabled({
@@ -741,16 +749,12 @@ const RenderField = ({
       params: latestRowParams,
       rowDisabled: rowDisabled || 'empty'
     });
-    if (latestIsEditable && isEditing) {
-      if ( /*#__PURE__*/React.isValidElement(latestComponent)) {
-        latestTargetComponent = latestComponent;
-      } else if (latestComponent) {
-        latestTargetComponent = latestComponent;
-      }
+    if (!canReuseCurrentState && latestIsEditable && isEditing && hasCustomComponent) {
+      latestTargetComponent = resolveEditTargetComponent(latestComponent);
     }
 
     // 查看模式
-    if (latestIsView) {
+    if (!canReuseCurrentState && latestIsView) {
       if (typeof viewRender === 'function') {
         const latestCurrentValue = dataIndex ? latestRowData?.[dataIndex] : value;
         const View = viewRender(latestCurrentValue, latestRowData || {}, options);
@@ -769,7 +773,8 @@ const RenderField = ({
       ...latestComponentProps,
       otherProps: {
         ...latestComponentProps.otherProps,
-        isView: latestIsView
+        isView: latestIsView,
+        valueType: latestValueType
       }
     };
 
@@ -788,7 +793,7 @@ const RenderField = ({
         };
       }
     }
-    return {
+    const result = {
       finalComponentProps: latestComponentProps,
       targetComponent: latestTargetComponent,
       latestIsView,
@@ -796,6 +801,13 @@ const RenderField = ({
       effectiveRules: latestRules,
       effectiveFieldProps: latestFieldProps
     };
+    shouldUpdateStateCacheRef.current = {
+      rowSnapshot: {
+        ...latestRowData
+      },
+      result
+    };
+    return result;
   };
 
   // 根据 latestIsView 和最新 required/rules 构建正确的 Form.Item props
@@ -925,7 +937,7 @@ const RenderField = ({
     }) : /*#__PURE__*/_jsx(Container, {
       viewEmpty: viewEmpty
     });
-    if (type === 'FormList') {
+    if (type === 'FormList' && !hasCustomComponent && TargetComponent) {
       FormItem = /*#__PURE__*/_jsx(Form.List, {
         name: formNamePath ? cellName.slice(formNamePath?.length - 1) : cellName,
         ..._omit(activeFinalFormItemProps, ['render', 'key', 'width', 'hiddenNames', 'name']),

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/propsType.d.ts

@@ -1,5 +1,5 @@
 import { AffixProps, ModalFuncProps } from 'antd';
-import { Key, ReactNode } from 'react';
+import { Key, ReactElement, ReactNode } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import type { ButtonProps } from 'antd/es/button';
 import type { TooltipProps } from 'antd/es/tooltip';
@@ -134,7 +134,7 @@ export type viewRenderFn<T = any> = (text?: any, record?: T, options?: OptionsPr
  * 组件渲染函数类型（与 ReactiveFunction 保持一致）
  * @template T 记录类型
  */
-export type ComponentRenderFn<T = any> = ReactiveFunction<T, string | number | ReactNode | void>;
+export type ComponentRenderFn<T = any> = ReactiveFunction<T, ReactElement>;
 /**
  * 表格列属性接口
  * @template Values 值类型
@@ -157,8 +157,8 @@ export interface ProColumnsProps<Values = any, T = any> extends Omit<FormItemPro
     tooltip?: string | ({
         icon?: string | ReactNode;
     } & TooltipProps);
-    /** 组件 */
-    component?: string | number | ReactNode | ComponentRenderFn<T>;
+    /** 自定义组件，或返回合法 ReactElement 的响应式渲染函数 */
+    component?: ReactElement | ComponentRenderFn<T>;
     /** 视图渲染 */
     viewRender?: string | number | ReactNode | viewRenderFn<T>;
     /** 隐藏的字段名 */

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

@@ -11,6 +11,10 @@ interface Result {
     desensitization: any;
     valueType: any;
     component: any;
+    /** 动态 component 是否已经执行过，用于区分“返回 undefined”和“尚未计算”。 */
+    componentResolved: boolean;
+    /** 当前缓存结果对应的行浅快照，供 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,8 @@ const useShouldUpdateForTable = props => {
   const desensitizationRef = useRef(undefined);
   const valueTypeRef = useRef(undefined);
   const componentRef = useRef(undefined);
+  const componentResolvedRef = useRef(false);
+  const resolvedRowSnapshotRef = useRef(undefined);
   const [, reRender] = useState({});
   const debouncedUpdateRef = useRef(null);
   const pendingParamsRef = useRef(null);
@@ -99,6 +102,7 @@ const useShouldUpdateForTable = props => {
     const componentOrEditRender = column.component || column.editRender;
     if (_isFunction(componentOrEditRender)) {
       const newComponent = componentOrEditRender(values, reactiveParams);
+      componentResolvedRef.current = true;
       // 对于 ReactNode 类型的返回值，使用深度比较
       if (!_isEqualWith(componentRef.current, newComponent, customEqualForFunction)) {
         componentRef.current = newComponent;
@@ -107,6 +111,9 @@ const useShouldUpdateForTable = props => {
     } else {
       componentRef.current = componentOrEditRender;
     }
+    resolvedRowSnapshotRef.current = values && typeof values === 'object' ? {
+      ...values
+    } : values;
     if (hasChange) {
       reRender({});
     }
@@ -136,12 +143,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 +172,9 @@ 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: componentResolvedRef.current ? componentRef.current : column.component || column.editRender,
+    componentResolved: componentResolvedRef.current,
+    rowSnapshot: resolvedRowSnapshotRef.current
   };
 };
 export default useShouldUpdateForTable;

package/es/ProForm/components/combination/ProModalSelect/hooks/useRequestList.js

@@ -81,9 +81,11 @@ export function useRequestList(service, options, useRequestOptions) {
     });
   }, [onPageChange]);
   const onSearch = useCallback(values => {
+    if (page.pageNum !== 1) {
+      // 查询或重置都从第一页开始，保留当前每页条数
+      onChange(1, page.pageSize);
+    }
     if (!_isEqual(searchValues, values)) {
-      // 保留当前页码和每页条数
-      onChange(page.pageNum, page.pageSize);
       setSearchValues(values);
     }
   }, [onChange, searchValues, page]);

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/components/TabsManager/style/index.less

@@ -171,12 +171,11 @@
       padding: 4px 0 5px !important;
       margin-right: 8px !important;
       margin-left: 0;
-      background: #e7e8ee;
+      background: #F5F5F5;
       transition: none;
       border-color: #e7e8ee;
       &.@{ant-prefix}-tabs-tab-active {
         background: #ffffff;
-        border-top: 2px solid var(--zaui-brand, #006aff);
       }
     }
     .ant-tabs-nav {