From 0f5952a6e11bfe73a8538b48b4e9b27ff7aae8ca Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Mon, 30 Jun 2025 16:39:48 +0800
Subject: [PATCH] fix: block model

---
 .../src/flow/models/base/BlockModel.tsx       |  15 +-
 .../models/data-blocks/table/TableModel.tsx   | 130 ++++++++----------
 .../core/flow-engine/src/data-source/index.ts |   9 +-
 3 files changed, 81 insertions(+), 73 deletions(-)

diff --git a/packages/core/client/src/flow/models/base/BlockModel.tsx b/packages/core/client/src/flow/models/base/BlockModel.tsx
index 6154c89a17..e2bc39d9b4 100644
--- a/packages/core/client/src/flow/models/base/BlockModel.tsx
+++ b/packages/core/client/src/flow/models/base/BlockModel.tsx
@@ -8,8 +8,21 @@
  */
 
 import { APIResource, BaseRecordResource, Collection, DefaultStructure, FlowModel } from '@nocobase/flow-engine';
+import { Card } from 'antd';
+import React from 'react';
 
-export class BlockModel<T = DefaultStructure> extends FlowModel<T> {}
+export class BlockModel<T = DefaultStructure> extends FlowModel<T> {
+  decoratorProps: Record<string, any> = {};
+
+  renderComponent() {
+    throw new Error('renderComponent method must be implemented in subclasses of BlockModel');
+    return null;
+  }
+
+  render() {
+    return <Card {...this.decoratorProps}>{this.renderComponent()}</Card>;
+  }
+}
 
 export class DataBlockModel<T = DefaultStructure> extends BlockModel<T> {
   resource: APIResource;
diff --git a/packages/core/client/src/flow/models/data-blocks/table/TableModel.tsx b/packages/core/client/src/flow/models/data-blocks/table/TableModel.tsx
index 20a9aee5cc..5ba7f3d5d2 100644
--- a/packages/core/client/src/flow/models/data-blocks/table/TableModel.tsx
+++ b/packages/core/client/src/flow/models/data-blocks/table/TableModel.tsx
@@ -216,78 +216,70 @@ export class TableModel extends DataBlockModel<TableModelStructure> {
     },
   };
 
-  render() {
+  renderComponent() {
     return (
-      <Card>
-        <Spin spinning={this.resource.loading}>
-          <DndProvider>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-              <Space>
-                {this.mapSubModels('actions', (action) => {
-                  // @ts-ignore
-                  if (action.props.position === 'left') {
-                    return (
-                      <FlowModelRenderer
-                        model={action}
-                        showFlowSettings={{ showBackground: false, showBorder: false }}
-                      />
-                    );
-                  }
+      <Spin spinning={this.resource.loading}>
+        <DndProvider>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+            <Space>
+              {this.mapSubModels('actions', (action) => {
+                // @ts-ignore
+                if (action.props.position === 'left') {
+                  return (
+                    <FlowModelRenderer model={action} showFlowSettings={{ showBackground: false, showBorder: false }} />
+                  );
+                }
 
-                  return null;
-                })}
-                {/* 占位 */}
-                <span></span>
-              </Space>
-              <Space>
-                {this.mapSubModels('actions', (action) => {
-                  // @ts-ignore
-                  if (action.props.position !== 'left') {
-                    return (
-                      <FlowModelRenderer
-                        model={action}
-                        showFlowSettings={{ showBackground: false, showBorder: false }}
-                      />
-                    );
-                  }
+                return null;
+              })}
+              {/* 占位 */}
+              <span></span>
+            </Space>
+            <Space>
+              {this.mapSubModels('actions', (action) => {
+                // @ts-ignore
+                if (action.props.position !== 'left') {
+                  return (
+                    <FlowModelRenderer model={action} showFlowSettings={{ showBackground: false, showBorder: false }} />
+                  );
+                }
 
-                  return null;
-                })}
-                <AddActionButton model={this} subModelBaseClass="GlobalActionModel" subModelKey="actions" />
-              </Space>
-            </div>
-          </DndProvider>
-          <Table
-            components={this.components}
-            tableLayout="fixed"
-            rowKey={this.collection.filterTargetKey}
-            rowSelection={{
-              columnWidth: 50,
-              type: 'checkbox',
-              onChange: (_, selectedRows) => {
-                this.resource.setSelectedRows(selectedRows);
-              },
-              selectedRowKeys: this.resource.getSelectedRows().map((row) => row.id),
-            }}
-            virtual={this.props.virtual}
-            scroll={{ x: 'max-content', y: 600 }}
-            dataSource={this.resource.getData()}
-            columns={this.getColumns()}
-            pagination={{
-              current: this.resource.getPage(),
-              pageSize: this.resource.getPageSize(),
-              total: this.resource.getMeta('count'),
-            }}
-            onChange={(pagination) => {
-              console.log('onChange pagination:', pagination);
-              this.resource.loading = true;
-              this.resource.setPage(pagination.current);
-              this.resource.setPageSize(pagination.pageSize);
-              this.resource.refresh();
-            }}
-          />
-        </Spin>
-      </Card>
+                return null;
+              })}
+              <AddActionButton model={this} subModelBaseClass="GlobalActionModel" subModelKey="actions" />
+            </Space>
+          </div>
+        </DndProvider>
+        <Table
+          components={this.components}
+          tableLayout="fixed"
+          rowKey={this.collection.filterTargetKey}
+          rowSelection={{
+            columnWidth: 50,
+            type: 'checkbox',
+            onChange: (_, selectedRows) => {
+              this.resource.setSelectedRows(selectedRows);
+            },
+            selectedRowKeys: this.resource.getSelectedRows().map((row) => row.id),
+          }}
+          virtual={this.props.virtual}
+          scroll={{ x: 'max-content', y: 600 }}
+          dataSource={this.resource.getData()}
+          columns={this.getColumns()}
+          pagination={{
+            current: this.resource.getPage(),
+            pageSize: this.resource.getPageSize(),
+            total: this.resource.getMeta('count'),
+          }}
+          onChange={(pagination) => {
+            console.log('onChange pagination:', pagination);
+            this.resource.loading = true;
+            this.resource.setPage(pagination.current);
+            this.resource.setPageSize(pagination.pageSize);
+            this.resource.refresh();
+          }}
+        />
+      </Spin>
     );
   }
 }
diff --git a/packages/core/flow-engine/src/data-source/index.ts b/packages/core/flow-engine/src/data-source/index.ts
index 6a79fddb4c..53422aa565 100644
--- a/packages/core/flow-engine/src/data-source/index.ts
+++ b/packages/core/flow-engine/src/data-source/index.ts
@@ -436,6 +436,10 @@ export class CollectionField {
     return this.options.uiSchema || {};
   }
 
+  get targetCollection() {
+    return this.collection.collectionManager.getCollection(this.options.target);
+  }
+
   getComponentProps() {
     return this.options.uiSchema?.['x-component-props'] || {};
   }
@@ -444,11 +448,10 @@ export class CollectionField {
     if (!this.options.target) {
       return [];
     }
-    const targetCollection = this.collection.collectionManager.getCollection(this.options.target);
-    if (!targetCollection) {
+    if (!this.targetCollection) {
       throw new Error(`Target collection ${this.options.target} not found for field ${this.name}`);
     }
-    return targetCollection.getFields();
+    return this.targetCollection.getFields();
   }
 
   getInterfaceOptions() {