@hzab/list-render 1.10.11 → 1.10.12-beta2

package/CHANGELOG.md

@@ -1,6 +1,13 @@
+# @hzab/list-render@1.10.12
+
+feat: schema title 支持传入 ReactNode，支持通过 schemaScope 传入
+fix: table 响应数据 去除 inTable == false 的字段
+fix: table 响应表单 FormilyField 环境变量 scenario: "tableReactionsForm"
+fix: 行内编辑 清除上一次的数据，解决切换表单数据未清除问题
+
 # @hzab/list-render@1.10.11
 
-fix: 行内编辑统一onEdit获取数据，单元格编辑支持传入其他参数
+fix: 行内编辑统一 onEdit 获取数据，单元格编辑支持传入其他参数
 
 # @hzab/list-render@1.10.10
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.11",
+  "version": "1.10.12-beta2",
   "description": "",
   "main": "src",
   "scripts": {
@@ -27,15 +27,16 @@
     "@hzab/permissions": "^1.0.0",
     "@hzab/schema-descriptions": "^1.3.0",
     "@hzab/webpack-config": "^0.7.2",
+    "@hzab/utils": "^1.0.7",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",
     "axios": "^1.4.0",
     "eslint": "^8.30.0",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
     "less": "^4.1.3",
     "lodash": "^4.17.21",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.8.1",
@@ -49,6 +50,7 @@
     "@hzab/form-render": ">=1.0.0",
     "@hzab/formily-result-utils": ">=1.2.0",
     "@hzab/schema-descriptions": ">=1.0.0",
+    "@hzab/utils": ">=1.0.7",
     "antd": "4.x",
     "axios": ">=1.4.0",
     "c-formily-antd": "2.3.1",

package/src/common/cloneSchema.ts

@@ -0,0 +1,63 @@
+import React from "react";
+
+/**
+ * 检测是否为原生 HTML DOM 节点
+ * @param {any} node 待检测对象
+ * @returns {boolean} 是否为原生 DOM 节点
+ */
+function isHtmlDomNode(node) {
+  // 先判断浏览器环境，避免 SSR 报错；兼容 Node/HTMLElement 类型
+  return !!(typeof window !== "undefined" && node && (node instanceof HTMLElement || node instanceof Node));
+}
+
+/**
+ * 增强版 Formily Schema 克隆函数
+ * 解决 lodash cloneDeep 丢失 React DOM/原生 DOM 的问题，兼容多种特殊类型
+ * @param {object} schema 待克隆的 Formily Schema
+ * @returns {object} 克隆后的 Schema
+ */
+export function cloneSchema(schema) {
+  // 1. 基础类型（null/undefined/字符串/数字/布尔）直接返回
+  if (schema === null || typeof schema !== "object") {
+    return schema;
+  }
+
+  // 2. React 虚拟DOM：直接保留原引用，不拷贝
+  if (React.isValidElement(schema)) {
+    return schema;
+  }
+
+  // 3. 原生 HTML DOM 节点：直接保留原引用
+  if (isHtmlDomNode(schema)) {
+    return schema;
+  }
+
+  // 4. 函数：Formily Schema 中的校验/格式化函数等，保留原引用
+  if (typeof schema === "function") {
+    return schema;
+  }
+
+  // 5. 日期对象：创建新的 Date 实例，保证值相同但引用不同
+  if (schema instanceof Date) {
+    return new Date(schema.getTime());
+  }
+
+  // 6. 正则对象：创建新的 RegExp 实例，保留源和标志
+  if (schema instanceof RegExp) {
+    return new RegExp(schema.source, schema.flags);
+  }
+
+  // 7. 数组：递归克隆每一项
+  if (Array.isArray(schema)) {
+    return schema.map((item) => cloneSchema(item));
+  }
+
+  // 8. 普通对象：递归克隆自有属性
+  const clonedObj = {};
+  for (const key in schema) {
+    if (Object.prototype.hasOwnProperty.call(schema, key)) {
+      clonedObj[key] = cloneSchema(schema[key]);
+    }
+  }
+  return clonedObj;
+}

package/src/common/formily-utils.jsx

@@ -1,5 +1,5 @@
 import { observer } from "@formily/react";
-import { untracked, autorun, observable } from "@formily/reactive";
+import { autorun, observable } from "@formily/reactive";
 
 export function handleTableProps(field, { scope, value, record }) {
   if (!field) {
@@ -45,6 +45,25 @@ export function getColRender(render) {
   };
 }
 
+/**
+ * 根据 formily 函数字符串 {{xxx}}，获取变量或可执行函数
+ * @param {*} funcStr
+ * @param {*} opt
+ * @returns
+ */
+export const getScopeVal = function (funcStr = "", opt = {}) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  const res = opt?.scope?.[stateStr];
+  // 存在对应变量直接返回
+  if (res) {
+    return res;
+  }
+  return getFunc(stateStr, opt);
+};
+
 /**
  * 根据 formily 函数字符串 {{xxx}}，获取可执行函数
  * @param {string} funcStr
@@ -52,8 +71,11 @@ export function getColRender(render) {
  * @returns
  */
 export function getStateFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
   const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFunc(`return ${stateStr};`, opt);
+  return getFunc(stateStr, opt);
 }
 
 /**
@@ -79,7 +101,7 @@ export function getFunc(
     "opt",
     `const { ${Object.keys(_opt).join(", ")} } = opt || {}; const {${Object.keys(_opt.scope || {}).join(
       ", ",
-    )}} = scope || {}; ${funcStr}`,
+    )}} = scope || {}; return ${funcStr}; `,
   );
 
   return function (opt) {
@@ -100,8 +122,11 @@ export function getFunc(
  * @returns
  */
 export function getStateSyncFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
   const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFuncSync(`return ${stateStr}`, opt);
+  return getFuncSync(stateStr, opt);
 }
 
 /**
@@ -134,7 +159,7 @@ export function getFuncSync(
     "opt",
     `try {const {${Object.keys(_opt).join(", ")}} = opt || {};  const {${Object.keys(_opt.scope || {}).join(
       ", ",
-    )}} = scope || {}; ${funcStr}} catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
+    )}} = scope || {}; return ${funcStr}; } catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
   );
 
   return function (opt) {

package/src/common/handleQuerySchema.ts

@@ -1,12 +1,13 @@
 import _ from "lodash";
-import { getFieldMap } from "./utils";
 import {
   isRunStr,
   handleSchemaStrVal,
   isScopeKey as formIsScopeKey,
   getScopeKeyVal,
 } from "@hzab/form-render/src/common/schema-handler";
+import { cloneSchema } from "@hzab/utils/src/formily/cloneSchema";
 import { URL_PARAM_NAME } from "./constant";
+import { getFieldMap } from "./utils";
 
 // ===================== 类型定义 =====================
 
@@ -72,7 +73,7 @@ export const handleQuerySchema = (opt) => {
     index += 1;
   }
 
-  const fieldMap = getFieldMap(_.cloneDeep(schema));
+  const fieldMap = getFieldMap(cloneSchema(schema));
   filters?.forEach((key) => {
     const item = fieldMap[key];
     if (item) {

package/src/common/handleReactions.js

@@ -1,5 +1,6 @@
-import { cloneDeep } from "lodash";
 import { autorun, observable } from "@formily/reactive";
+
+import { cloneSchema } from "@hzab/utils/src/formily/cloneSchema";
 import { getStateFunc } from "./formily-utils";
 
 /**
@@ -14,7 +15,7 @@ export function handleReactions(fieldList, opt = {}) {
     return fieldList;
   }
   const resList = [];
-  cloneDeep(fieldList).forEach((item) => {
+  cloneSchema(fieldList).forEach((item) => {
     handleReaction(item, opt);
     resList.push(item);
   });

package/src/common/utils.js

@@ -1,279 +1,305 @@
-import { Schema } from "@formily/json-schema";
-import _ from "lodash";
-import dayjs from "dayjs";
-import advancedFormat from "dayjs/plugin/advancedFormat";
-import weekOfYear from "dayjs/plugin/weekOfYear";
-
-dayjs.extend(advancedFormat);
-dayjs.extend(weekOfYear);
-
-const dateFormatEnum = {
-  time: "YYYY-MM-DD HH:mm:ss",
-  date: "YYYY-MM-DD",
-  week: "YYYY年 w周",
-  quarter: "YYYY年 Q季度",
-  month: "YYYY-MM",
-  year: "YYYY",
-};
-
-/**
- * 获取 field 对应的值
- * @param {Object} field schema 项
- * @param {Object} data 数据
- * @param {Object} opt 配置项
- * @returns
- */
-export function getVal(field = {}, data = {}, opt = {}) {
-  const {} = opt;
-  let val = _.get(data, field.name);
-  const {} = field || {};
-  const xComponent = field["x-component"];
-  const xComponentProps = field["x-component-props"] || {};
-
-  if (val && (xComponent === "DatePicker" || xComponent === "DatePicker.RangePicker")) {
-    const { picker, showTime } = xComponentProps || {};
-    const mode = showTime === true ? "time" : picker || "date";
-    const _formatEnum = opt.dateFormatEnum || dateFormatEnum;
-    const format = xComponentProps?.format || _formatEnum[mode];
-
-    if (Array.isArray(val)) {
-      return val.map((it) => getDateVal(it, format)).join(" ~ ");
-    }
-    return getDateVal(val, format);
-  }
-
-  if (val && (xComponent === "TimePicker" || xComponent === "TimePicker.RangePicker")) {
-    const format = xComponentProps?.format || "HH:mm:ss";
-    if (Array.isArray(val)) {
-      return val.map((it) => dayjs(it).format(format)).join(" ~ ");
-    }
-    return dayjs(val).format(format);
-  }
-
-  if (xComponent === "Switch") {
-    if (val === undefined || val === false || val === field.inactiveValue) {
-      return field.inactiveText || "否";
-    }
-    if (val === true || val === field.activeValue) {
-      return field.activeText || "是";
-    }
-    return val;
-  }
-  if (typeof field.relation === "object") {
-    const { key, name, label } = field.relation;
-    return data[key]?.[name];
-  }
-
-  const dataSource = field?.dataSource || field.enum;
-  if (
-    (xComponent === "Select" || xComponent === "Radio.Group" || xComponent === "Checkbox.Group") &&
-    Array.isArray(dataSource)
-  ) {
-    if (!Array.isArray(val)) {
-      return getFieldOptItByVal(val, field, opt)?.label || val;
-    } else if (Array.isArray(val)) {
-      let _val = [];
-      val.forEach((valIt) => {
-        _val.push(getFieldOptItByVal(val, field, opt)?.label || valIt);
-      });
-      val = _val;
-    }
-  }
-
-  if (Array.isArray(val)) {
-    return val.join("、");
-  }
-
-  return val;
-}
-
-export function getDateVal(val, format) {
-  return dayjs(val).format(format);
-}
-
-export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex = false) {
-  const schema = _schema?.schema || _schema;
-
-  // 解决 schema 字符串可执行代码、变量等
-  const properties = Schema.getOrderProperties(schema);
-  const { boxList = [] } = opt || {};
-  let _boxList = ["FormGrid", "FormGrid.GridColumn"];
-  if (Array.isArray(boxList)) {
-    _boxList = [..._boxList, ...boxList];
-  } else if (boxList === false) {
-    _boxList = [];
-  }
-
-  schema?.properties &&
-    properties.forEach((item) => {
-      const field = item.schema;
-      if (!field.name) {
-        field.name = item.key;
-      }
-      const componentName = field["x-component"];
-      if (_boxList.includes(componentName)) {
-        getFieldList(field, fieldList, opt);
-      } else {
-        fieldList.push(field);
-      }
-    });
-  isTableSortXIdex && fieldList.sort((a, b) => a["x-index"] - b["x-index"]);
-  return fieldList;
-}
-
-export function getFieldMap(_schema, fieldMap = {}) {
-  // const fieldMap = _.keyBy(getFieldList(_schema), "name");
-  const schema = _schema?.schema || _schema;
-  schema?.properties &&
-    Object.keys(schema?.properties).forEach((key) => {
-      const field = schema?.properties[key];
-      if (field["x-component"] === "FormGrid") {
-        getFieldMap(field, fieldMap);
-      } else if (field["x-component"] === "FormGrid.GridColumn") {
-        getFieldMap(field, fieldMap);
-      } else {
-        fieldMap[key] = field;
-      }
-    });
-
-  return fieldMap;
-}
-
-export function objToFormData(data) {
-  const formData = new FormData();
-  Object.keys(data)?.forEach((key) => {
-    formData.set(key, data[key]);
-  });
-  return formData;
-}
-
-/**
- * 根据 val 获取对应的 options 项数据
- * @param {string|number|boolean} val
- * @param {Object} field
- */
-export const getFieldOptItByVal = function (val, field, opt) {
-  if (!field) {
-    return {};
-  }
-  const options = Array.isArray(field.enum)
-    ? field.enum
-    : Array.isArray(field.options)
-    ? field.options
-    : field.dataSource || [];
-  return getOptItByVal(val, options, {
-    fieldNames: field.fieldNames || field["x-component-props"]?.fieldNames,
-    ...opt,
-  });
-};
-
-/**
- * 根据 val 获取对应的 options 项数据，并进行数据归一化处理
- * value, label, children
- * @param {string|number|boolean} val
- * @param {Object} field
- */
-export const getOptItByVal = function (val, options, opt) {
-  const { fieldNames } = opt || {};
-  const { value = "value", label = "label", children = "children" } = fieldNames || {};
-  for (let i = 0; i < options.length; i++) {
-    const it = options[i];
-    if (it?.[value] === val) {
-      return {
-        ...it,
-        value: it?.[value],
-        label: it?.[label],
-        children: it?.[children],
-      };
-    }
-    // 递归处理
-    const _children = it?.[children];
-    if (Array.isArray(_children) && _children.length > 0) {
-      const child = getOptItByVal(val, _children, opt);
-      return {
-        ...child,
-        value: child?.[value],
-        label: child?.[label],
-        children: child?.[children],
-      };
-    }
-  }
-};
-
-/**
- * 移除 schema.properties 中包含 "inTable": false 的字段
- * @param {Object} data - 原始数据对象
- * @returns {Object} - 处理后的新对象
- */
-
-/**
- * 移除表格中标记为inTable:false的字段
- * @param {Object} data - 原始数据
- * @param {Object} [opt={}] - 配置选项
- * @param {Array} [opt.boxList=[]] - 需要递归处理的组件类型列表
- * @returns {Object} 处理后的数据
- */
-
-export function removeInTableFalseFields(_schema, opt = {}) {
-  // 1. 深拷贝原始数据
-  const result = _.cloneDeep(_schema);
-
-  // 2. 获取schema对象（支持直接传入schema或包含schema的对象）
-  const schema = result?.schema || result;
-
-  // 3. 处理容器组件配置
-  const { boxList = [] } = opt;
-  const _boxList =
-    boxList === false
-      ? []
-      : [
-          "Card",
-          "FormGrid",
-          "ArrayCards",
-          "Collapse",
-          "Tabs",
-          "FormGrid.GridColumn",
-          ...(Array.isArray(boxList) ? boxList : []),
-        ];
-
-  // 4. 递归删除inTable:false的字段
-  const processProperties = (properties) => {
-    if (!properties || typeof properties !== "object") return;
-
-    Object.keys(properties).forEach((key) => {
-      const item = properties[key];
-
-      // 处理容器组件递归
-      if (item["x-component"] && _boxList.includes(item["x-component"])) {
-        if (item.properties) {
-          processProperties(item.properties);
-        }
-      }
-      // 处理数组类型的子项
-      else if (item.items?.properties) {
-        processProperties(item.items.properties);
-      }
-      // 处理普通字段
-      else if (item.inTable === false) {
-        delete properties[key];
-      }
-      // 移除x-display
-      else if (item["x-display"]) {
-        delete item["x-display"];
-      }
-    });
-  };
-
-  // 5. 处理主properties
-  if (schema.properties) {
-    processProperties(schema.properties);
-  }
-
-  // 6. 移除form的布局属性
-  if (result.form) {
-    delete result.form.labelCol;
-    delete result.form.wrapperCol;
-  }
-
-  return result;
-}
+import { autorun, observable } from "@formily/reactive";
+import { Schema } from "@formily/json-schema";
+import _ from "lodash";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+
+import { cloneSchema } from "@hzab/utils/src/formily/cloneSchema";
+import { getScopeVal } from "./formily-utils";
+
+dayjs.extend(advancedFormat);
+dayjs.extend(weekOfYear);
+
+const dateFormatEnum = {
+  time: "YYYY-MM-DD HH:mm:ss",
+  date: "YYYY-MM-DD",
+  week: "YYYY年 w周",
+  quarter: "YYYY年 Q季度",
+  month: "YYYY-MM",
+  year: "YYYY",
+};
+
+/**
+ * 获取 field 对应的值
+ * @param {Object} field schema 项
+ * @param {Object} data 数据
+ * @param {Object} opt 配置项
+ * @returns
+ */
+export function getVal(field = {}, data = {}, opt = {}) {
+  const {} = opt;
+  let val = _.get(data, field.name);
+  const {} = field || {};
+  const xComponent = field["x-component"];
+  const xComponentProps = field["x-component-props"] || {};
+
+  if (val && (xComponent === "DatePicker" || xComponent === "DatePicker.RangePicker")) {
+    const { picker, showTime } = xComponentProps || {};
+    const mode = showTime === true ? "time" : picker || "date";
+    const _formatEnum = opt.dateFormatEnum || dateFormatEnum;
+    const format = xComponentProps?.format || _formatEnum[mode];
+
+    if (Array.isArray(val)) {
+      return val.map((it) => getDateVal(it, format)).join(" ~ ");
+    }
+    return getDateVal(val, format);
+  }
+
+  if (val && (xComponent === "TimePicker" || xComponent === "TimePicker.RangePicker")) {
+    const format = xComponentProps?.format || "HH:mm:ss";
+    if (Array.isArray(val)) {
+      return val.map((it) => dayjs(it).format(format)).join(" ~ ");
+    }
+    return dayjs(val).format(format);
+  }
+
+  if (xComponent === "Switch") {
+    if (val === undefined || val === false || val === field.inactiveValue) {
+      return field.inactiveText || "否";
+    }
+    if (val === true || val === field.activeValue) {
+      return field.activeText || "是";
+    }
+    return val;
+  }
+  if (typeof field.relation === "object") {
+    const { key, name, label } = field.relation;
+    return data[key]?.[name];
+  }
+
+  const dataSource = field?.dataSource || field.enum;
+  if (
+    (xComponent === "Select" || xComponent === "Radio.Group" || xComponent === "Checkbox.Group") &&
+    Array.isArray(dataSource)
+  ) {
+    if (!Array.isArray(val)) {
+      return getFieldOptItByVal(val, field, opt)?.label || val;
+    } else if (Array.isArray(val)) {
+      let _val = [];
+      val.forEach((valIt) => {
+        _val.push(getFieldOptItByVal(val, field, opt)?.label || valIt);
+      });
+      val = _val;
+    }
+  }
+
+  if (Array.isArray(val)) {
+    return val.join("、");
+  }
+
+  return val;
+}
+
+export function getDateVal(val, format) {
+  return dayjs(val).format(format);
+}
+
+export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex = false) {
+  const schema = cloneSchema(_schema?.schema || _schema);
+
+  // 解决 schema 字符串可执行代码、变量等
+  const properties = Schema.getOrderProperties(schema);
+  const { boxList = [] } = opt || {};
+  let _boxList = ["FormGrid", "FormGrid.GridColumn"];
+  if (Array.isArray(boxList)) {
+    _boxList = [..._boxList, ...boxList];
+  } else if (boxList === false) {
+    _boxList = [];
+  }
+
+  schema?.properties &&
+    properties.forEach((item) => {
+      const field = { ...item.schema };
+      if (!field.name) {
+        field.name = item.key;
+      }
+      const componentName = field["x-component"];
+      // 处理 title 渲染逻辑，解析 scope 字符串变量
+      if (typeof field.title === "string" && field.title.startsWith("{{")) {
+        field.title = getScopeVal(field.title, { scope: opt.schemaScope });
+        if (typeof field.title === "function") {
+          field.title = field.title({
+            ...opt,
+            scope: opt.schemaScope,
+            scenario: "listRender",
+            // $deps,
+            $self: field,
+            $effect: autorun.effect,
+            // $form: $form,
+            // $values: $values,
+            $observable: observable,
+            $memo: autorun.memo,
+            $props: {
+              // formilyRef.current.fields  formilyRef.current.fieldSchemas
+              formilyRef: opt.formilyRef,
+            },
+          });
+        }
+      }
+      if (_boxList.includes(componentName)) {
+        getFieldList(field, fieldList, opt);
+      } else {
+        fieldList.push(field);
+      }
+    });
+  isTableSortXIdex && fieldList.sort((a, b) => a["x-index"] - b["x-index"]);
+  return fieldList;
+}
+
+export function getFieldMap(_schema, fieldMap = {}) {
+  // const fieldMap = _.keyBy(getFieldList(_schema), "name");
+  const schema = _schema?.schema || _schema;
+  schema?.properties &&
+    Object.keys(schema?.properties).forEach((key) => {
+      const field = schema?.properties[key];
+      if (field["x-component"] === "FormGrid") {
+        getFieldMap(field, fieldMap);
+      } else if (field["x-component"] === "FormGrid.GridColumn") {
+        getFieldMap(field, fieldMap);
+      } else {
+        fieldMap[key] = field;
+      }
+    });
+
+  return fieldMap;
+}
+
+export function objToFormData(data) {
+  const formData = new FormData();
+  Object.keys(data)?.forEach((key) => {
+    formData.set(key, data[key]);
+  });
+  return formData;
+}
+
+/**
+ * 根据 val 获取对应的 options 项数据
+ * @param {string|number|boolean} val
+ * @param {Object} field
+ */
+export const getFieldOptItByVal = function (val, field, opt) {
+  if (!field) {
+    return {};
+  }
+  const options = Array.isArray(field.enum)
+    ? field.enum
+    : Array.isArray(field.options)
+    ? field.options
+    : field.dataSource || [];
+  return getOptItByVal(val, options, {
+    fieldNames: field.fieldNames || field["x-component-props"]?.fieldNames,
+    ...opt,
+  });
+};
+
+/**
+ * 根据 val 获取对应的 options 项数据，并进行数据归一化处理
+ * value, label, children
+ * @param {string|number|boolean} val
+ * @param {Object} field
+ */
+export const getOptItByVal = function (val, options, opt) {
+  const { fieldNames } = opt || {};
+  const { value = "value", label = "label", children = "children" } = fieldNames || {};
+  for (let i = 0; i < options.length; i++) {
+    const it = options[i];
+    if (it?.[value] === val) {
+      return {
+        ...it,
+        value: it?.[value],
+        label: it?.[label],
+        children: it?.[children],
+      };
+    }
+    // 递归处理
+    const _children = it?.[children];
+    if (Array.isArray(_children) && _children.length > 0) {
+      const child = getOptItByVal(val, _children, opt);
+      return {
+        ...child,
+        value: child?.[value],
+        label: child?.[label],
+        children: child?.[children],
+      };
+    }
+  }
+};
+
+/**
+ * 移除 schema.properties 中包含 "inTable": false 的字段
+ * @param {Object} data - 原始数据对象
+ * @returns {Object} - 处理后的新对象
+ */
+
+/**
+ * 移除表格中标记为inTable:false的字段
+ * @param {Object} data - 原始数据
+ * @param {Object} [opt={}] - 配置选项
+ * @param {Array} [opt.boxList=[]] - 需要递归处理的组件类型列表
+ * @returns {Object} 处理后的数据
+ */
+
+export function removeInTableFalseFields(_schema, opt = {}) {
+  // 1. 深拷贝原始数据
+  const result = cloneSchema(_schema);
+
+  // 2. 获取schema对象（支持直接传入schema或包含schema的对象）
+  const schema = result?.schema || result;
+
+  // 3. 处理容器组件配置
+  const { boxList = [] } = opt;
+  const _boxList =
+    boxList === false
+      ? []
+      : [
+          "Card",
+          "FormGrid",
+          "ArrayCards",
+          "Collapse",
+          "Tabs",
+          "FormGrid.GridColumn",
+          ...(Array.isArray(boxList) ? boxList : []),
+        ];
+
+  // 4. 递归删除inTable:false的字段
+  const processProperties = (properties) => {
+    if (!properties || typeof properties !== "object") return;
+
+    Object.keys(properties).forEach((key) => {
+      const item = properties[key];
+
+      // 处理容器组件递归
+      if (item["x-component"] && _boxList.includes(item["x-component"])) {
+        if (item.properties) {
+          processProperties(item.properties);
+        }
+      }
+      // 处理数组类型的子项
+      else if (item.items?.properties) {
+        processProperties(item.items.properties);
+      }
+      // 处理普通字段
+      else if (item.inTable === false) {
+        delete properties[key];
+      }
+      // 移除x-display
+      else if (item["x-display"]) {
+        delete item["x-display"];
+      }
+    });
+  };
+
+  // 5. 处理主properties
+  if (schema.properties) {
+    processProperties(schema.properties);
+  }
+
+  // 6. 移除form的布局属性
+  if (result.form) {
+    delete result.form.labelCol;
+    delete result.form.wrapperCol;
+  }
+
+  return result;
+}

package/src/components/Formily/FormilyEditTable.tsx

@@ -15,7 +15,7 @@ export interface Item {
 
 export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   SchemaField: any;
-  field: {
+  getField: () => {
     type: string;
     name: string;
   };
@@ -38,7 +38,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
 
 export const EditableCell: React.FC<EditableCellProps> = ({
   SchemaField,
-  field,
+  getField,
   editing,
   dataIndex,
   title,
@@ -53,6 +53,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   children,
   ...restProps
 }) => {
+  const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
   const { editMode = "modal" } = topProps || {};
@@ -80,7 +81,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
             schema={{
               type: "object",
               properties: {
-                [field.name]: {
+                [field?.name]: {
                   ...field,
                   title: "",
                   ["x-component-props"]: {
@@ -195,6 +196,9 @@ export const useEditTable = (props) => {
   const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null }) => {
     const { fieldRef } = opt || {};
     editingFiledRef.current = fieldRef;
+    // 清除上一次的数据，解决切换表单数据未清除问题
+    // TODO: 拆分表单解决
+    formRender.values = {};
     formRender?.setValues(record);
     setEditingId(record[idKey]);
     setEditingKey(key);
@@ -222,7 +226,7 @@ export const useEditTable = (props) => {
     try {
       // 点击保存，数据抛出
       (await formRender?.validate()) as Item;
-      onEditSubmit && (await onEditSubmit(formRender.values, { field } ));
+      onEditSubmit && (await onEditSubmit(formRender.values, { field }));
       // 清除编辑目标
       setEditingId("");
       setEditingKey("");
@@ -243,7 +247,8 @@ export const useEditTable = (props) => {
         ...(col.onCell ? col.onCell(record, ...args) : {}),
         record,
         SchemaField,
-        field: col.field,
+        // 函数获取解决 cloneDepp 报错问题
+        getField: col.getField,
         dataIndex: col.dataIndex,
         title: col.title,
         editable: col.editable,

package/src/components/Formily/FormilyField.tsx

@@ -1,10 +1,11 @@
-import { memo, useEffect, useState, useMemo, useCallback, useRef } from "react";
+import { memo, useMemo, useCallback } from "react";
 import { createForm } from "@formily/core";
-import { createSchemaField, useField, useFieldSchema, observer, FormProvider, Schema } from "@formily/react";
+import { antdComponents, customComponents } from "@hzab/form-render";
+import { createSchemaField, useField, useFieldSchema, Schema } from "@formily/react";
 import { Form } from "c-formily-antd";
-import { handleReaction } from "../../common/handleReactions";
+import { cloneSchema } from "@hzab/utils/src/formily/cloneSchema";
 
-import { antdComponents, customComponents } from "@hzab/form-render";
+import { handleReaction } from "../../common/handleReactions";
 
 type formilyFieldPropsT = {
   schema: Schema;
@@ -19,6 +20,17 @@ type formilyFieldPropsT = {
 export const FormilyField = memo(function (props: formilyFieldPropsT) {
   const { schema, formilyRef, schemaScope, components, reactionOpts } = props;
   const { fields, fieldSchemas } = formilyRef.current || {};
+  const _schema = useMemo(() => {
+    const schemaRmInTable = cloneSchema(schema);
+    // 去除 inTable = false 的字段
+    schemaRmInTable?.properties &&
+      Object.keys(schemaRmInTable?.properties)?.forEach((key) => {
+        if (schemaRmInTable?.properties?.[key]?.inTable === false) {
+          delete schemaRmInTable?.properties?.[key];
+        }
+      });
+    return schemaRmInTable;
+  }, [schema]);
   const SchemaField = useCallback(
     createSchemaField({
       // @ts-ignore
@@ -38,7 +50,7 @@ export const FormilyField = memo(function (props: formilyFieldPropsT) {
           return Com && <Com {...props} />;
         },
       },
-      scope: { ...schemaScope },
+      scope: { ...schemaScope, scenario: "tableReactionsForm" },
     } as any),
     [],
   );
@@ -60,7 +72,7 @@ export const FormilyField = memo(function (props: formilyFieldPropsT) {
       style={{ display: "none", width: 0, height: 0, overflow: "hidden" }}
       form={formRender}
     >
-      <SchemaField schema={schema}></SchemaField>
+      <SchemaField schema={_schema}></SchemaField>
     </Form>
   );
 });

package/src/list-render.jsx

@@ -512,7 +512,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           setShowSearch={handleSetShowSearch}
           loading={listLoading}
           tableProps={props.tableProps}
-          getFieldListOpt={props.getFieldListOpt}
+          getFieldListOpt={{ ...props.getFieldListOpt, schemaScope: props.schemaScope }}
           components={props.components}
           schemaScope={props.schemaScope}
           i18n={i18n}

package/src/query-render/index.jsx

@@ -4,10 +4,10 @@ import dayjs from "dayjs";
 import _ from "lodash";
 
 import FormRender from "@hzab/form-render";
+import { cloneSchema } from "@hzab/utils/src/formily/cloneSchema";
 import { handleQuerySchema } from "../common/handleQuerySchema";
 
 import "./index.less";
-import { onFieldValueChange } from "@formily/core";
 
 function QueryRender(props, parentRef) {
   const [schema, setSchema] = useState({});
@@ -20,7 +20,7 @@ function QueryRender(props, parentRef) {
       handleQuerySchema({
         ...props?.config,
         schemaScope: { ...props.schemaScope, scenario: "query" },
-        schema: _.cloneDeep(props.schema),
+        schema: cloneSchema(props.schema),
         search: props.search,
         filters: _.cloneDeep(props.filters),
         onSearch,

package/src/table-render/index.jsx

@@ -102,7 +102,7 @@ const TableRender = forwardRef(function (props, tableRef) {
     if (!(props.schema && props.schema.properties)) {
       return;
     }
-    const fieldList = getFieldList(props.schema, [], props.getFieldListOpt, isTableSortXIdex);
+    const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
     const columns = [];
 
     // 序号列
@@ -218,12 +218,14 @@ const TableRender = forwardRef(function (props, tableRef) {
         }
 
         columns.push({
-          field,
+          // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
+          getField: () => field,
           editable: true,
           ..._colConf,
           onCell: (record, rowIndex) =>
             _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
-          title: isFunction(_colConf?.title) ? _colConf?.title() : _title,
+          // 函数式传入，解决 title ReactNode 传入报错问题
+          title: () => (isFunction(_colConf?.title) ? _colConf?.title() : _title),
           key: name,
           dataIndex: name,
           render: getColRender(colRender),
@@ -426,7 +428,7 @@ const TableRender = forwardRef(function (props, tableRef) {
         <Table {...tableProps} />
       )}
       <FormilyField
-        schema={props.schema}
+        schema={topProps.schema}
         formilyRef={formilyRef}
         components={props.components}
         schemaScope={{