@nocobase/client 2.0.0-alpha.14 → 2.0.0-alpha.15

package/es/flow/components/BlockItemCard.d.ts

@@ -9,5 +9,7 @@
 import { CardProps } from 'antd';
 import React from 'react';
 export declare const BlockItemCard: React.ForwardRefExoticComponent<CardProps & {
+    beforeContent?: React.ReactNode;
+    afterContent?: React.ReactNode;
     description?: any;
 } & React.RefAttributes<unknown>>;

package/es/flow/components/filter/FilterContainer.d.ts

@@ -34,15 +34,15 @@ interface FilterContentProps {
  * 支持新的数据结构格式：
  * ```typescript
  * {
- *   "logic": "or",
+ *   "logic": "$or",
  *   "items": [
  *     {
  *       "path": "isAdmin",
- *       "operator": "eq",
+ *       "operator": "$eq",
  *       "value": true
  *     },
  *     {
- *       "logic": "and",
+ *       "logic": "$and",
  *       "items": [...]
  *     }
  *   ]
@@ -52,7 +52,7 @@ interface FilterContentProps {
  * @example
  * ```typescript
  * const filterValue = observable({
- *   logic: 'and',
+ *   logic: '$and',
  *   items: []
  * });
  *

package/es/flow/models/blocks/details/DetailsCustomItemModel.d.ts

@@ -6,8 +6,8 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-import { FlowModel, FlowModelContext, ModelRenderMode } from '@nocobase/flow-engine';
+import { FlowModel, FlowModelContext, ModelRenderMode, SubModelItem } from '@nocobase/flow-engine';
 export declare class DetailsCustomItemModel extends FlowModel {
     static renderMode: ModelRenderMode;
-    static defineChildren(ctx: FlowModelContext): any[];
+    static defineChildren(ctx: FlowModelContext): Promise<SubModelItem[]> | SubModelItem[];
 }

package/es/flow/models/blocks/details/DetailsJSFieldItemModel.d.ts

@@ -6,7 +6,7 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-import { FlowModelContext } from '@nocobase/flow-engine';
+import { FlowModelContext, type SubModelItem } from '@nocobase/flow-engine';
 import { DetailsCustomItemModel } from './DetailsCustomItemModel';
 /**
  * “JavaScript 字段”菜单入口（详情）：
@@ -15,5 +15,5 @@ import { DetailsCustomItemModel } from './DetailsCustomItemModel';
  * - 点击后创建 DetailsItemModel，并将其 subModels.field 固定为 JSFieldModel。
  */
 export declare class DetailsJSFieldItemModel extends DetailsCustomItemModel {
-    static defineChildren(ctx: FlowModelContext): import("@nocobase/flow-engine").SubModelItem[];
+    static defineChildren(ctx: FlowModelContext): Promise<SubModelItem[]>;
 }

package/es/flow/models/blocks/form/FormJSFieldItemModel.d.ts

@@ -14,5 +14,5 @@ import { FlowModel, FlowModelContext } from '@nocobase/flow-engine';
  * - 点击后创建标准 FormItemModel，并将子字段设置为 JSEditableFieldModel。
  */
 export declare class FormJSFieldItemModel extends FlowModel {
-    static defineChildren(ctx: FlowModelContext): import("@nocobase/flow-engine").SubModelItem[];
+    static defineChildren(ctx: FlowModelContext): Promise<import("@nocobase/flow-engine").SubModelItem[]>;
 }

package/es/flow/models/blocks/table/TableBlockModel.d.ts

@@ -35,6 +35,10 @@ export declare class TableBlockModel extends CollectionBlockModel<TableBlockMode
     };
     customModelClasses: CustomTableBlockModelClassesEnum;
     get resource(): MultiRecordResource<any>;
+    private readonly columns;
+    private disposeAutorun;
+    onMount(): void;
+    onUnmount(): void;
     createResource(ctx: any, params: any): MultiRecordResource<unknown>;
     getColumns(): any[];
     EditableRow: (props: any) => React.JSX.Element;

package/es/flow/models/blocks/table/TableJSFieldItemModel.d.ts

@@ -6,7 +6,7 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-import { FlowModelContext } from '@nocobase/flow-engine';
+import { FlowModelContext, type SubModelItem } from '@nocobase/flow-engine';
 import { TableCustomColumnModel } from './TableCustomColumnModel';
 /**
  * “JavaScript 字段”菜单入口（表格）：
@@ -15,5 +15,5 @@ import { TableCustomColumnModel } from './TableCustomColumnModel';
  * - 点击后创建 TableColumnModel，并将其 subModels.field 固定为 JSFieldModel。
  */
 export declare class TableJSFieldItemModel extends TableCustomColumnModel {
-    static defineChildren(ctx: FlowModelContext): import("@nocobase/flow-engine").SubModelItem[];
+    static defineChildren(ctx: FlowModelContext): Promise<SubModelItem[]>;
 }

package/es/flow/models/blocks/utils/transformChildrenToJS.d.ts

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { type FlowModelContext, type SubModelItem } from '@nocobase/flow-engine';
+export interface TransformOptions {
+    fieldUseModel: string;
+    refreshTargets: string[];
+}
+/**
+ * 递归将 SubModelItem 列表中的叶子节点 createModelOptions 重写为指定的 JS 字段模型。
+ * - 保留 children 的形态：数组或函数；
+ * - 对函数型 children 做一层包裹，确保返回结果继续被转换；
+ * - 对已有 createModelOptions（对象或函数）做二次包装并追加 subModels.field.use。
+ */
+export declare function transformChildrenToJS(items: SubModelItem[] | false | undefined, options: TransformOptions): SubModelItem[];
+/**
+ * 构造“关联字段（JS 化）”分组节点，支持懒加载 children 并在返回时完成 JS 化。
+ */
+export declare function buildAssociationJSGroup(ctx: FlowModelContext, provider: (ctx: FlowModelContext) => SubModelItem[] | Promise<SubModelItem[]>, options: TransformOptions & {
+    key?: string;
+    label?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+}): SubModelItem;
+export declare function buildFormAssociationChildren(ctx: FlowModelContext): SubModelItem[];
+export interface JSFieldMenuChildrenOptions {
+    useModel: string;
+    fieldUseModel: string;
+    refreshTargets: string[];
+    associationPathName?: string;
+    associationProvider: (ctx: FlowModelContext) => SubModelItem[] | Promise<SubModelItem[]>;
+}
+export declare function buildJSFieldMenuChildren(ctx: FlowModelContext, opts: JSFieldMenuChildrenOptions): Promise<SubModelItem[]>;

package/es/index.mjs

@@ -9588,7 +9588,7 @@ function addAppVersion(e, t) {
       addAppVersion((n = e.properties) == null ? void 0 : n[o], t);
     }), e;
 }
-const name = "@nocobase/client", version = "2.0.0-alpha.14", license = "AGPL-3.0", main = "lib/index.js", module = "es/index.mjs", types = "es/index.d.ts", dependencies = {
+const name = "@nocobase/client", version = "2.0.0-alpha.15", license = "AGPL-3.0", main = "lib/index.js", module = "es/index.mjs", types = "es/index.d.ts", dependencies = {
   "@ahooksjs/use-url-state": "3.5.1",
   "@ant-design/cssinjs": "^1.11.1",
   "@ant-design/icons": "^5.6.1",
@@ -9611,10 +9611,10 @@ const name = "@nocobase/client", version = "2.0.0-alpha.14", license = "AGPL-3.0
   "@formily/reactive-react": "^2.2.27",
   "@formily/shared": "^2.2.27",
   "@formily/validator": "^2.2.27",
-  "@nocobase/evaluators": "2.0.0-alpha.14",
-  "@nocobase/flow-engine": "2.0.0-alpha.14",
-  "@nocobase/sdk": "2.0.0-alpha.14",
-  "@nocobase/utils": "2.0.0-alpha.14",
+  "@nocobase/evaluators": "2.0.0-alpha.15",
+  "@nocobase/flow-engine": "2.0.0-alpha.15",
+  "@nocobase/sdk": "2.0.0-alpha.15",
+  "@nocobase/utils": "2.0.0-alpha.15",
   "@tanstack/react-table": "^8.21.3",
   "@types/tabulator-tables": "^6.2.6",
   ahooks: "^3.7.2",
@@ -10436,6 +10436,7 @@ const opacityStyle = {
   /* @__PURE__ */ jsx(Spin, I(f({}, _.omit(e, "children")), { style: e.spinning ? spinStyle : displayNone$3 })),
   /* @__PURE__ */ jsx("div", { style: e.spinning ? opacityStyle : null, children: e.children })
 ] }));
+HighPerformanceSpin.displayName = "HighPerformanceSpin";
 var FilterBlockType = /* @__PURE__ */ ((e) => (e[e.FORM = 0] = "FORM", e[e.TABLE = 1] = "TABLE", e[e.TREE = 2] = "TREE", e[e.COLLAPSE = 3] = "COLLAPSE", e))(FilterBlockType || {});
 const mergeFilter = (e, t = "$and") => {
   const o = e.filter((n) => {
@@ -65400,7 +65401,7 @@ const BlockConfigsContext = createContext({
   (e) => {
     var l;
     const { value: t, FilterItem: o, ctx: n } = e;
-    t.logic || (t.logic = "and"), Array.isArray(t.items) || (t.items = []);
+    t.logic || (t.logic = "$and"), Array.isArray(t.items) || (t.items = []);
     const r = () => {
       var c;
       (c = n == null ? void 0 : n.model) != null && c.dispatchEvent && n.model.dispatchEvent("reset");
@@ -67135,7 +67136,7 @@ class GridModel extends FlowModel {
                       MemoFlowModelRenderer,
                       {
                         model: a,
-                        fallback: this.itemFallback,
+                        fallback: r.skeleton || this.itemFallback,
                         showFlowSettings: this.flowEngine.flowSettings.enabled ? this.getItemFlowSettings() : !1,
                         showErrorFallback: !0,
                         settingsMenuLevel: (l = a == null ? void 0 : a.settingsMenuLevel) != null ? l : this.itemSettingsMenuLevel,
@@ -67503,41 +67504,47 @@ const useMarkdownStyles = () => {
     }
   );
   return /* @__PURE__ */ jsx(Fragment$1, { children: t ? r : i });
-}, useBlockHeight = ({ height: e, heightMode: t }) => t !== "specifyValue" ? null : e, BlockItemCard = React.forwardRef((e, t) => {
-  const { t: o } = useTranslation(), { token: n } = theme.useToken(), p = e, { title: r, description: i, children: a, className: l } = p, c = W(p, ["title", "description", "children", "className"]), u = useBlockHeight(e), d = (r || i) && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 0px 8px" }, children: [
-    /* @__PURE__ */ jsxs("span", { children: [
-      " ",
-      o(r, { ns: NAMESPACE_UI_SCHEMA })
-    ] }),
-    i && /* @__PURE__ */ jsx(
-      DisplayMarkdown,
-      {
-        value: o(i, { ns: NAMESPACE_UI_SCHEMA }),
-        style: {
-          overflowWrap: "break-word",
-          whiteSpace: "normal",
-          fontWeight: 400,
-          color: n.colorTextDescription,
-          borderRadius: "4px"
+}, useBlockHeight = ({ height: e, heightMode: t }) => t !== "specifyValue" ? null : e, BlockItemCard = React.forwardRef(
+  (e, t) => {
+    const { t: o } = useTranslation(), { token: n } = theme.useToken(), p = e, { title: r, description: i, children: a, className: l } = p, c = W(p, ["title", "description", "children", "className"]), u = useBlockHeight(e), d = (r || i) && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 0px 8px" }, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        " ",
+        o(r, { ns: NAMESPACE_UI_SCHEMA })
+      ] }),
+      i && /* @__PURE__ */ jsx(
+        DisplayMarkdown,
+        {
+          value: o(i, { ns: NAMESPACE_UI_SCHEMA }),
+          style: {
+            overflowWrap: "break-word",
+            whiteSpace: "normal",
+            fontWeight: 400,
+            color: n.colorTextDescription,
+            borderRadius: "4px"
+          }
         }
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx(
-    Card,
-    I(f({
-      ref: t,
-      title: d,
-      style: { display: "flex", flexDirection: "column", height: u },
-      styles: {
-        body: { flex: 1, display: "flex", flexDirection: "column", overflow: "auto" }
-      },
-      className: l
-    }, c), {
-      children: a
-    })
-  );
-}), getContentWidth = (e) => {
+      )
+    ] });
+    return /* @__PURE__ */ jsxs(
+      Card,
+      I(f({
+        ref: t,
+        title: d,
+        style: { display: "flex", flexDirection: "column", height: u },
+        styles: {
+          body: { flex: 1, display: "flex", flexDirection: "column", overflow: "auto" }
+        },
+        className: l
+      }, c), {
+        children: [
+          e.beforeContent,
+          a,
+          e.afterContent
+        ]
+      })
+    );
+  }
+), getContentWidth = (e) => {
   if (e) {
     const t = document.createRange();
     return t.selectNodeContents(e), t.getBoundingClientRect().width;
@@ -67548,6 +67555,10 @@ const useMarkdownStyles = () => {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
   wordBreak: "break-all"
+}, wrappingDefaultStyle = {
+  overflowWrap: "break-word",
+  whiteSpace: "normal",
+  wordBreak: "break-word"
 }, isOverflowTooltip = (e) => {
   if (!e)
     return !1;
@@ -67569,10 +67580,19 @@ const useMarkdownStyles = () => {
   const l = useCallback((u) => {
     const d = u.target;
     isOverflowTooltip(a.current) && n(d.scrollWidth >= d.clientWidth);
-  }, []), c = useMemo(
-    () => e.ellipsis ? /* @__PURE__ */ jsx("div", { ref: a, role: e.role, style: ellipsisDefaultStyle, onMouseEnter: l, children: e.children }) : e.children,
-    [l, e.children, e.ellipsis, e.role]
-  );
+  }, []), c = useMemo(() => {
+    const u = e.ellipsis ? { onMouseEnter: l } : {};
+    return /* @__PURE__ */ jsx(
+      "div",
+      I(f({
+        ref: a,
+        role: e.role,
+        style: e.ellipsis ? ellipsisDefaultStyle : wrappingDefaultStyle
+      }, u), {
+        children: e.children
+      })
+    );
+  }, [l, e.children, e.ellipsis, e.role]);
   return !e.ellipsis || !o ? c : /* @__PURE__ */ jsx(
     Popover,
     {
@@ -71886,15 +71906,82 @@ DetailsGridModel.registerFlow({
     }
   }
 });
+function transformChildrenToJS(e, t) {
+  const { fieldUseModel: o, refreshTargets: n } = t, r = (i) => Array.isArray(i) ? i.map((a) => {
+    const l = f({}, a);
+    if (l.children)
+      if (typeof l.children == "function") {
+        const c = l.children;
+        l.children = (u) => O(this, null, function* () {
+          const d = yield c(u);
+          return r(d);
+        });
+      } else
+        Array.isArray(l.children) && (l.children = r(l.children));
+    if (l.createModelOptions) {
+      const c = l.createModelOptions;
+      l.createModelOptions = (u, d) => O(this, null, function* () {
+        const p = yield typeof c == "function" ? c(u, d) : c;
+        return p.subModels = p.subModels || {}, p.subModels.field = I(f({}, p.subModels.field || {}), { use: o }), p;
+      }), l.refreshTargets = l.refreshTargets || n;
+    }
+    return l;
+  }) : [];
+  return r(e);
+}
+function buildAssociationJSGroup(e, t, o) {
+  var u, d, p, m;
+  const { fieldUseModel: n, refreshTargets: r } = o, i = (u = o.key) != null ? u : "js-association-fields", a = (d = o.label) != null ? d : escapeT("Display association fields"), l = (p = o.searchable) != null ? p : !0, c = (m = o.searchPlaceholder) != null ? m : escapeT("Search fields");
+  return {
+    key: i,
+    type: "group",
+    label: a,
+    searchable: l,
+    searchPlaceholder: c,
+    children: (h) => O(this, null, function* () {
+      const g = yield t(h);
+      return transformChildrenToJS(g, { fieldUseModel: n, refreshTargets: r });
+    })
+  };
+}
+class FormAssociationFieldGroupShim extends AssociationFieldGroupModel {
+}
+k(FormAssociationFieldGroupShim, "itemModelName", "FormItemModel");
+function buildFormAssociationChildren(e) {
+  return FormAssociationFieldGroupShim.defineChildren(e);
+}
+function buildJSFieldMenuChildren(e, t) {
+  return O(this, null, function* () {
+    var m;
+    const { useModel: o, fieldUseModel: n, refreshTargets: r, associationPathName: i, associationProvider: a } = t, l = buildWrapperFieldChildren(e, {
+      useModel: o,
+      fieldUseModel: n,
+      associationPathName: i,
+      refreshTargets: r
+    });
+    let c = [];
+    const u = (m = l == null ? void 0 : l[0]) == null ? void 0 : m.children;
+    Array.isArray(u) && (c = u);
+    let d = [...c];
+    const p = yield a(e);
+    if (Array.isArray(p) && p.length > 0) {
+      const h = buildAssociationJSGroup(e, a, {
+        fieldUseModel: n,
+        refreshTargets: r
+      });
+      d = [...c, h];
+    }
+    return d;
+  });
+}
 class DetailsJSFieldItemModel extends DetailsCustomItemModel {
   static defineChildren(t) {
-    var n;
-    const o = buildWrapperFieldChildren(t, {
+    return buildJSFieldMenuChildren(t, {
       useModel: "DetailsItemModel",
       fieldUseModel: "JSFieldModel",
-      refreshTargets: ["DetailsItemModel"]
+      refreshTargets: ["DetailsItemModel"],
+      associationProvider: (o) => DetailsAssociationFieldGroupModel.defineChildren(o)
     });
-    return ((n = o == null ? void 0 : o[0]) == null ? void 0 : n.children) || [];
   }
 }
 DetailsJSFieldItemModel.define({
@@ -73831,14 +73918,13 @@ FormCustomItemModel.define({
 });
 class FormJSFieldItemModel extends FlowModel {
   static defineChildren(t) {
-    var n;
-    const o = buildWrapperFieldChildren(t, {
+    return buildJSFieldMenuChildren(t, {
       useModel: "FormItemModel",
       fieldUseModel: "JSEditableFieldModel",
       associationPathName: t.prefixFieldPath,
-      refreshTargets: ["FormItemModel", "FilterFormItemModel"]
+      refreshTargets: ["FormItemModel", "FilterFormItemModel"],
+      associationProvider: buildFormAssociationChildren
     });
-    return ((n = o == null ? void 0 : o[0]) == null ? void 0 : n.children) || [];
   }
 }
 FormJSFieldItemModel.define({
@@ -74363,7 +74449,7 @@ function adjustColumnOrder(e) {
     r.fixed === "left" ? t.push(r) : r.fixed === "right" ? n.push(r) : o.push(r);
   }), [...t, ...o, ...n];
 }
-const TableIndex = (e) => {
+const MemoizedTable = React.memo(Table$3), TableIndex = (e) => {
   const n = e, { index: t } = n, o = W(n, ["index"]);
   return /* @__PURE__ */ jsx("div", I(f({ className: classNames("nb-table-index"), style: { padding: "0 8px 0 16px" } }, o), { children: t }));
 }, rowSelectCheckboxWrapperClass = css`
@@ -74433,6 +74519,8 @@ class TableBlockModel extends CollectionBlockModel {
       TableCustomColumnModel: "TableCustomColumnModel"
     });
     k(this, "customModelClasses", {});
+    k(this, "columns", observable$1.ref([]));
+    k(this, "disposeAutorun");
     k(this, "EditableRow", (o) => /* @__PURE__ */ jsx("tr", f({}, o)));
     k(this, "EditableCell", observer((o) => {
       const g = o, { className: n, title: r, editable: i, width: a, record: l, recordIndex: c, dataIndex: u, children: d, model: p } = g, m = W(g, ["className", "title", "editable", "width", "record", "recordIndex", "dataIndex", "children", "model"]), h = useRef(null);
@@ -74551,6 +74639,14 @@ class TableBlockModel extends CollectionBlockModel {
   get resource() {
     return super.resource;
   }
+  onMount() {
+    super.onMount(), this.disposeAutorun = autorun$1(() => {
+      this.columns.value = this.getColumns();
+    });
+  }
+  onUnmount() {
+    super.onUnmount(), this.disposeAutorun && this.disposeAutorun();
+  }
   createResource(o, n) {
     return this.context.createResource(MultiRecordResource);
   }
@@ -74618,7 +74714,7 @@ class TableBlockModel extends CollectionBlockModel {
     };
   }
   renderComponent() {
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    return this.columns.value.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(DndProvider, { children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -74661,34 +74757,18 @@ class TableBlockModel extends CollectionBlockModel {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(
-        Table$3,
+      /* @__PURE__ */ jsx(HighPerformanceSpin, { spinning: !!this.resource.loading, children: /* @__PURE__ */ jsx(
+        HighPerformanceTable,
         {
-          components: this.components,
-          tableLayout: "fixed",
+          model: this,
           size: this.props.size,
-          rowKey: this.collection.filterTargetKey,
-          rowSelection: f({
-            columnWidth: 50,
-            type: "checkbox",
-            onChange: (o, n) => {
-              this.resource.setSelectedRows(n);
-            },
-            selectedRowKeys: this.resource.getSelectedRows().map((o) => o[this.collection.filterTargetKey]),
-            renderCell: this.renderCell
-          }, this.rowSelectionProps),
-          loading: this.resource.loading,
           virtual: this.props.virtual,
-          scroll: { x: "max-content" },
           dataSource: this.resource.getData(),
-          columns: this.getColumns(),
-          pagination: this.pagination(),
-          onChange: (o) => {
-            console.log("onChange pagination:", o), this.resource.loading = !0, this.resource.setPage(o.current), this.resource.setPageSize(o.pageSize), this.resource.refresh();
-          }
+          columns: this.columns.value,
+          pagination: this.pagination()
         }
-      )
-    ] });
+      ) })
+    ] }) : /* @__PURE__ */ jsx(Skeleton, { paragraph: { rows: 3 } });
   }
 }
 k(TableBlockModel, "scene", BlockSceneEnum.many);
@@ -74837,6 +74917,41 @@ TableBlockModel.define({
   },
   sort: 300
 });
+const tableScroll = { x: "max-content" }, HighPerformanceTable = React.memo(
+  (e) => {
+    const { model: t, size: o, virtual: n, dataSource: r, columns: i, pagination: a } = e, l = useMemo(() => f({
+      columnWidth: 50,
+      type: "checkbox",
+      onChange: (d, p) => {
+        t.resource.setSelectedRows(p);
+      },
+      selectedRowKeys: t.resource.getSelectedRows().map((d) => d[t.collection.filterTargetKey]),
+      renderCell: t.renderCell
+    }, t.rowSelectionProps), [t]), c = useCallback(
+      (d) => {
+        console.log("onChange pagination:", d), t.resource.loading = !0, t.resource.setPage(d.current), t.resource.setPageSize(d.pageSize), t.resource.refresh();
+      },
+      [t]
+    ), u = useMemo(() => a, [r]);
+    return /* @__PURE__ */ jsx(
+      MemoizedTable,
+      {
+        components: t.components,
+        tableLayout: "fixed",
+        size: o,
+        rowKey: t.collection.filterTargetKey,
+        rowSelection: l,
+        virtual: n,
+        scroll: tableScroll,
+        dataSource: r,
+        columns: i,
+        pagination: u,
+        onChange: c
+      }
+    );
+  }
+);
+HighPerformanceTable.displayName = "HighPerformanceTable";
 function FieldDeletePlaceholder() {
   const { t: e } = useTranslation(), t = useFlowModel(), o = t.context.blockModel, n = o.collection.dataSource, r = o.collection, i = t.fieldPath, a = useMemo(() => {
     const c = `${e(n.displayName || n.key)} > `, u = r ? `${e(r.title) || r.name || r.tableName} > ` : "";
@@ -75177,13 +75292,12 @@ TableSelectModel.define({
 });
 class TableJSFieldItemModel extends TableCustomColumnModel {
   static defineChildren(t) {
-    var n;
-    const o = buildWrapperFieldChildren(t, {
+    return buildJSFieldMenuChildren(t, {
       useModel: "TableColumnModel",
       fieldUseModel: "JSFieldModel",
-      refreshTargets: ["TableColumnModel"]
+      refreshTargets: ["TableColumnModel"],
+      associationProvider: (o) => TableAssociationFieldGroupModel.defineChildren(o)
     });
-    return ((n = o == null ? void 0 : o[0]) == null ? void 0 : n.children) || [];
   }
 }
 TableJSFieldItemModel.define({
@@ -78697,37 +78811,20 @@ class ClickableFieldModel extends FieldModel {
    * 基类统一渲染逻辑
    */
   render() {
-    const { value: t, displayStyle: o, fieldNames: n, overflowMode: r, width: i } = this.props, a = this.props.titleField || (n == null ? void 0 : n.label), l = {
-      ellipsis: r === "ellipsis" ? {
-        tooltip: {
-          rootClassName: css`
-                  .ant-tooltip-inner {
-                    color: #000;
-                  }
-                `,
-          color: "#fff"
-        }
-      } : !1,
-      // 处理省略显示
-      style: {
-        whiteSpace: r === "wrap" ? "normal" : "nowrap",
-        // 控制换行
-        width: i || "auto"
-      }
-    };
-    if (a)
+    const { value: t, displayStyle: o, fieldNames: n, overflowMode: r } = this.props, i = this.props.titleField || (n == null ? void 0 : n.label), a = r === "ellipsis";
+    if (i)
       if (o === "tag") {
-        const c = castArray(t).map((u, d) => /* @__PURE__ */ jsx(React.Fragment, { children: this.renderInDisplayStyle(u == null ? void 0 : u[a], u) }, d));
-        return /* @__PURE__ */ jsx(Typography.Text, I(f({}, l), { children: c }));
+        const l = castArray(t).map((c, u) => /* @__PURE__ */ jsx(React.Fragment, { children: this.renderInDisplayStyle(c == null ? void 0 : c[i], c) }, u));
+        return /* @__PURE__ */ jsx(EllipsisWithTooltip, { ellipsis: a, children: l });
       } else {
-        const c = castArray(t).flatMap((u, d) => {
-          const p = this.renderInDisplayStyle(u == null ? void 0 : u[a], u);
-          return d === 0 ? [p] : [/* @__PURE__ */ jsx("span", { children: ", " }, `sep-${d}`), p];
+        const l = castArray(t).flatMap((c, u) => {
+          const d = this.renderInDisplayStyle(c == null ? void 0 : c[i], c);
+          return u === 0 ? [d] : [/* @__PURE__ */ jsx("span", { children: ", " }, `sep-${u}`), d];
         });
-        return /* @__PURE__ */ jsx(Typography.Text, I(f({}, l), { children: c }));
+        return /* @__PURE__ */ jsx(EllipsisWithTooltip, { ellipsis: a, children: l });
       }
     else
-      return /* @__PURE__ */ jsx(Typography.Text, I(f({}, l), { children: this.renderInDisplayStyle(t) }));
+      return /* @__PURE__ */ jsx(EllipsisWithTooltip, { ellipsis: a, children: this.renderInDisplayStyle(t) });
   }
 }
 ClickableFieldModel.registerFlow({