refactor(DataBlock): kanban and gantt and map and calendar (#3792)

* refactor: kanban

* refactor: gantt

* refactor: map

* refactor: calendar

* refactor: compat

* refactor: rename to createKanbanBlockUISchema

* refactor(kanban): use x-use-component-props instead of useProps

* refactor(Gantt): rename to createGanttBlockUISchema

* refactor: use x-use-component-props instead of useProps

* refactor: rename

* refactor(Map): use x-use-component-props instead of useProps

* refactor(Calendar): rename

* refactor(Calendar): should not get collection on getting association in UISchema

* refactor(Calendar): use x-use-component-props instead of useProps

* chore: add comment

* chore: fix unit test

* fix: add scopes to fix e2e

* fix(Calendar): add association property to CalendarBlockProvider decorator

* test: add e2e for Calenndar

packages/core/client/src/block-provider/hooks/index.ts

@@ -36,6 +36,7 @@ import { TableFieldResource } from '../TableFieldProvider';
 
 export * from './useFormActiveFields';
 export * from './useParsedFilter';
+export * from './useDataBlockSourceId';
 
 export const usePickActionProps = () => {
   const form = useForm();

packages/core/client/src/block-provider/hooks/useDataBlockSourceId.tsx

@@ -7,6 +7,7 @@ import {
 } from '../..';
 
 /**
+ * @internal
  * 注意：这里有一个需要更改 schema 才能解决的问题，就是在获取 sourceId 的时候无法确定（在关系字段和当前表同表时）
  * 是需要从 recordData 还是 parentRecordData 中获取;解决方法是通过更改 schema，在不同类型的关系区块中
  * （`通过点击关系字段按钮打开的弹窗中创建的非关系字段区块`和`关系字段区块`）使用不同的 hook。

packages/core/client/src/schema-component/hooks/useProps.ts

@@ -8,6 +8,12 @@ interface Options {
 }
 
 const useDef = () => ({});
+
+/**
+ * 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
+ * @param originalProps
+ * @returns
+ */
 export const useProps = (originalProps: any = {}) => {
   const { useProps: useDynamicHook = useDef, ...others } = originalProps;
   let useDynamicProps = useDynamicHook;

packages/plugins/@nocobase/plugin-calendar/src/client/__e2e__/schemaInitializer.test.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@nocobase/test/e2e';
+import { emptyPageWithCalendarCollection, oneTableWithCalendarCollection } from './templates';
+
+test.describe('where can be added', () => {
+  test('page', async ({ page, mockPage }) => {
+    await mockPage(emptyPageWithCalendarCollection).goto();
+
+    await page.getByLabel('schema-initializer-Grid-page:').hover();
+    await page.getByRole('menuitem', { name: 'form Calendar right' }).hover();
+    await page.getByRole('menuitem', { name: 'calendar', exact: true }).click();
+
+    await page.getByLabel('block-item-Select-Title field').getByTestId('select-single').click();
+    await page.getByRole('option', { name: 'Repeats' }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    await expect(page.getByLabel('block-item-CardItem-calendar-').getByText('Sun', { exact: true })).toBeVisible();
+  });
+
+  test('association block in popup', async ({ page, mockPage, mockRecord }) => {
+    await mockPage(oneTableWithCalendarCollection).goto();
+    await mockRecord('toManyCalendar');
+
+    // 打开弹窗
+    await page.getByLabel('action-Action.Link-View-view-').first().click();
+    await page.getByLabel('schema-initializer-Grid-popup').hover();
+    await page.getByRole('menuitem', { name: 'form Calendar right' }).hover();
+    await page.getByRole('menuitem', { name: 'manyToMany -> calendar' }).click();
+
+    await page.getByLabel('block-item-Select-Title field').getByTestId('select-single').click();
+    await page.getByRole('option', { name: 'Repeats' }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+
+    await expect(page.getByLabel('block-item-CardItem-calendar-').getByText('Sun', { exact: true })).toBeVisible();
+  });
+});

packages/plugins/@nocobase/plugin-calendar/src/client/__e2e__/templates.ts

@@ -0,0 +1,238 @@
+import { PageConfig } from '@nocobase/test/e2e';
+
+const calendarCollection = {
+  name: 'calendar',
+  template: 'calendar',
+};
+
+export const emptyPageWithCalendarCollection: PageConfig = {
+  collections: [calendarCollection],
+};
+
+export const oneTableWithCalendarCollection: PageConfig = {
+  collections: [
+    calendarCollection,
+    {
+      name: 'toManyCalendar',
+      fields: [
+        {
+          name: 'manyToMany',
+          interface: 'm2m',
+          target: 'calendar',
+        },
+      ],
+    },
+  ],
+  pageSchema: {
+    _isJSONSchemaObject: true,
+    version: '2.0',
+    type: 'void',
+    'x-component': 'Page',
+    properties: {
+      lqs2pzl6li1: {
+        _isJSONSchemaObject: true,
+        version: '2.0',
+        type: 'void',
+        'x-component': 'Grid',
+        'x-initializer': 'page:addBlock',
+        properties: {
+          viawniezd4p: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            properties: {
+              s0nef2zgi5m: {
+                _isJSONSchemaObject: true,
+                version: '2.0',
+                type: 'void',
+                'x-component': 'Grid.Col',
+                properties: {
+                  ibwqgtls50q: {
+                    _isJSONSchemaObject: true,
+                    version: '2.0',
+                    type: 'void',
+                    'x-decorator': 'TableBlockProvider',
+                    'x-acl-action': 'toManyCalendar:list',
+                    'x-use-decorator-props': 'useTableBlockDecoratorProps',
+                    'x-decorator-props': {
+                      collection: 'toManyCalendar',
+                      dataSource: 'main',
+                      action: 'list',
+                      params: {
+                        pageSize: 20,
+                      },
+                      rowKey: 'id',
+                      showIndex: true,
+                      dragSort: false,
+                    },
+                    'x-toolbar': 'BlockSchemaToolbar',
+                    'x-settings': 'blockSettings:table',
+                    'x-component': 'CardItem',
+                    'x-filter-targets': [],
+                    properties: {
+                      actions: {
+                        _isJSONSchemaObject: true,
+                        version: '2.0',
+                        type: 'void',
+                        'x-initializer': 'table:configureActions',
+                        'x-component': 'ActionBar',
+                        'x-component-props': {
+                          style: {
+                            marginBottom: 'var(--nb-spacing)',
+                          },
+                        },
+                        'x-uid': 'xi12fv3arso',
+                        'x-async': false,
+                        'x-index': 1,
+                      },
+                      v931jk5mpmg: {
+                        _isJSONSchemaObject: true,
+                        version: '2.0',
+                        type: 'array',
+                        'x-initializer': 'table:configureColumns',
+                        'x-component': 'TableV2',
+                        'x-use-component-props': 'useTableBlockProps',
+                        'x-component-props': {
+                          rowKey: 'id',
+                          rowSelection: {
+                            type: 'checkbox',
+                          },
+                        },
+                        properties: {
+                          actions: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            title: '{{ t("Actions") }}',
+                            'x-action-column': 'actions',
+                            'x-decorator': 'TableV2.Column.ActionBar',
+                            'x-component': 'TableV2.Column',
+                            'x-designer': 'TableV2.ActionColumnDesigner',
+                            'x-initializer': 'table:configureItemActions',
+                            properties: {
+                              w4rc8u7s5q0: {
+                                _isJSONSchemaObject: true,
+                                version: '2.0',
+                                type: 'void',
+                                'x-decorator': 'DndContext',
+                                'x-component': 'Space',
+                                'x-component-props': {
+                                  split: '|',
+                                },
+                                properties: {
+                                  hd95fsevokf: {
+                                    _isJSONSchemaObject: true,
+                                    version: '2.0',
+                                    type: 'void',
+                                    title: '{{ t("View") }}',
+                                    'x-action': 'view',
+                                    'x-toolbar': 'ActionSchemaToolbar',
+                                    'x-settings': 'actionSettings:view',
+                                    'x-component': 'Action.Link',
+                                    'x-component-props': {
+                                      openMode: 'drawer',
+                                    },
+                                    'x-decorator': 'ACLActionProvider',
+                                    'x-designer-props': {
+                                      linkageAction: true,
+                                    },
+                                    properties: {
+                                      drawer: {
+                                        _isJSONSchemaObject: true,
+                                        version: '2.0',
+                                        type: 'void',
+                                        title: '{{ t("View record") }}',
+                                        'x-component': 'Action.Container',
+                                        'x-component-props': {
+                                          className: 'nb-action-popup',
+                                        },
+                                        properties: {
+                                          tabs: {
+                                            _isJSONSchemaObject: true,
+                                            version: '2.0',
+                                            type: 'void',
+                                            'x-component': 'Tabs',
+                                            'x-component-props': {},
+                                            'x-initializer': 'TabPaneInitializers',
+                                            properties: {
+                                              tab1: {
+                                                _isJSONSchemaObject: true,
+                                                version: '2.0',
+                                                type: 'void',
+                                                title: '{{t("Details")}}',
+                                                'x-component': 'Tabs.TabPane',
+                                                'x-designer': 'Tabs.Designer',
+                                                'x-component-props': {},
+                                                properties: {
+                                                  grid: {
+                                                    _isJSONSchemaObject: true,
+                                                    version: '2.0',
+                                                    type: 'void',
+                                                    'x-component': 'Grid',
+                                                    'x-initializer': 'popup:common:addBlock',
+                                                    'x-uid': 'wfpwj2q55xi',
+                                                    'x-async': false,
+                                                    'x-index': 1,
+                                                  },
+                                                },
+                                                'x-uid': 'tvwvyrlvpv6',
+                                                'x-async': false,
+                                                'x-index': 1,
+                                              },
+                                            },
+                                            'x-uid': 'bys1tnlre1o',
+                                            'x-async': false,
+                                            'x-index': 1,
+                                          },
+                                        },
+                                        'x-uid': 'ml2scl3y6se',
+                                        'x-async': false,
+                                        'x-index': 1,
+                                      },
+                                    },
+                                    'x-uid': 'q9gwy03bevt',
+                                    'x-async': false,
+                                    'x-index': 1,
+                                  },
+                                },
+                                'x-uid': 'f8i1npjyidq',
+                                'x-async': false,
+                                'x-index': 1,
+                              },
+                            },
+                            'x-uid': 'h26hp47w83k',
+                            'x-async': false,
+                            'x-index': 1,
+                          },
+                        },
+                        'x-uid': 'bjbs9yvab1k',
+                        'x-async': false,
+                        'x-index': 2,
+                      },
+                    },
+                    'x-uid': '5i6112zy12n',
+                    'x-async': false,
+                    'x-index': 1,
+                  },
+                },
+                'x-uid': '6vh9ncefvs2',
+                'x-async': false,
+                'x-index': 1,
+              },
+            },
+            'x-uid': 'u4b441tpuzq',
+            'x-async': false,
+            'x-index': 1,
+          },
+        },
+        'x-uid': 'mworqfx7jaf',
+        'x-async': false,
+        'x-index': 1,
+      },
+    },
+    'x-uid': 'kgor3l32s12',
+    'x-async': true,
+    'x-index': 1,
+  },
+};

packages/plugins/@nocobase/plugin-calendar/src/client/__tests__/createCalendarBlockSchema.test.ts

@@ -0,0 +1,116 @@
+import { createCalendarBlockUISchema } from '../schema-initializer/createCalendarBlockUISchema';
+
+vi.mock('@formily/shared', async () => {
+  const actual = await vi.importActual('@formily/shared');
+  return {
+    ...actual,
+    uid: () => 'mocked-uid',
+  };
+});
+
+describe('createCalendarBlockSchema', () => {
+  it('should return the correct schema', () => {
+    const options = {
+      collectionName: 'users',
+      dataSource: 'events',
+      fieldNames: {
+        title: 'title',
+        startDate: 'start_date',
+        endDate: 'end_date',
+      },
+      association: 'users.roles',
+    };
+
+    const schema = createCalendarBlockUISchema(options);
+
+    expect(schema).toMatchInlineSnapshot(`
+      {
+        "properties": {
+          "mocked-uid": {
+            "properties": {
+              "event": {
+                "properties": {
+                  "drawer": {
+                    "properties": {
+                      "tabs": {
+                        "properties": {
+                          "tab1": {
+                            "properties": {
+                              "grid": {
+                                "type": "void",
+                                "x-component": "Grid",
+                                "x-initializer": "popup:common:addBlock",
+                                "x-initializer-props": {
+                                  "actionInitializers": "details:configureActions",
+                                },
+                              },
+                            },
+                            "title": "{{t('Details', { ns: 'calendar' })}}",
+                            "type": "void",
+                            "x-component": "Tabs.TabPane",
+                            "x-component-props": {},
+                            "x-designer": "Tabs.Designer",
+                          },
+                        },
+                        "type": "void",
+                        "x-component": "Tabs",
+                        "x-component-props": {},
+                        "x-initializer": "TabPaneInitializers",
+                        "x-initializer-props": {
+                          "gridInitializer": "popup:common:addBlock",
+                        },
+                      },
+                    },
+                    "title": "{{t('View record', { ns: 'calendar' })}}",
+                    "type": "void",
+                    "x-component": "Action.Drawer",
+                    "x-component-props": {
+                      "className": "nb-action-popup",
+                    },
+                  },
+                },
+                "type": "void",
+                "x-component": "CalendarV2.Event",
+              },
+              "toolBar": {
+                "type": "void",
+                "x-component": "CalendarV2.ActionBar",
+                "x-component-props": {
+                  "style": {
+                    "marginBottom": 24,
+                  },
+                },
+                "x-initializer": "calendar:configureActions",
+              },
+            },
+            "type": "void",
+            "x-component": "CalendarV2",
+            "x-use-component-props": "useCalendarBlockProps",
+          },
+        },
+        "type": "void",
+        "x-acl-action": "users.roles:list",
+        "x-component": "CardItem",
+        "x-decorator": "CalendarBlockProvider",
+        "x-decorator-props": {
+          "action": "list",
+          "association": "users.roles",
+          "collection": "users",
+          "dataSource": "events",
+          "fieldNames": {
+            "endDate": "end_date",
+            "id": "id",
+            "startDate": "start_date",
+            "title": "title",
+          },
+          "params": {
+            "paginate": false,
+          },
+        },
+        "x-settings": "blockSettings:calendar",
+        "x-toolbar": "BlockSchemaToolbar",
+        "x-use-decorator-props": "useCalendarBlockDecoratorProps",
+      }
+    `);
+  });
+});

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx

@@ -1,6 +1,12 @@
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { RecursionField, Schema, observer, useFieldSchema } from '@formily/react';
-import { ActionContextProvider, RecordProvider, useCollectionParentRecordData, useProps } from '@nocobase/client';
+import {
+  ActionContextProvider,
+  RecordProvider,
+  useCollectionParentRecordData,
+  useProps,
+  withDynamicSchemaProps,
+} from '@nocobase/client';
 import { parseExpression } from 'cron-parser';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
@@ -171,100 +177,104 @@ const CalendarRecordViewer = (props) => {
   );
 };
 
-export const Calendar: any = observer(
+export const Calendar: any = withDynamicSchemaProps(
-  (props: any) => {
+  observer(
-    const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
+    (props: any) => {
-    const [date, setDate] = useState<Date>(new Date());
+      // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
-    const [view, setView] = useState<View>('month');
+      const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
-    const events = useEvents(dataSource, fieldNames, date, view);
-    const [visible, setVisible] = useState(false);
-    const [record, setRecord] = useState<any>({});
-    const { wrapSSR, hashId, componentCls: containerClassName } = useStyle();
 
-    const components = useMemo(() => {
+      const [date, setDate] = useState<Date>(new Date());
-      return {
+      const [view, setView] = useState<View>('month');
-        toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
+      const events = useEvents(dataSource, fieldNames, date, view);
-        // week: {
+      const [visible, setVisible] = useState(false);
-        //   header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
+      const [record, setRecord] = useState<any>({});
-        // },
+      const { wrapSSR, hashId, componentCls: containerClassName } = useStyle();
-        month: {
+
-          dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
+      const components = useMemo(() => {
-        },
+        return {
+          toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
+          // week: {
+          //   header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
+          // },
+          month: {
+            dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
+          },
+        };
+      }, [showLunar]);
+
+      const messages: any = {
+        allDay: '',
+        previous: (
+          <div>
+            <LeftOutlined />
+          </div>
+        ),
+        next: (
+          <div>
+            <RightOutlined />
+          </div>
+        ),
+        today: i18nt('Today'),
+        month: i18nt('Month'),
+        week: i18nt('Week'),
+        work_week: i18nt('Work week'),
+        day: i18nt('Day'),
+        agenda: i18nt('Agenda'),
+        date: i18nt('Date'),
+        time: i18nt('Time'),
+        event: i18nt('Event'),
+        noEventsInRange: i18nt('None'),
+        showMore: (count) => i18nt('{{count}} more items', { count }),
       };
-    }, [showLunar]);
+      return wrapSSR(
-
+        <div className={`${hashId} ${containerClassName}`} style={{ height: fixedBlock ? '100%' : 700 }}>
-    const messages: any = {
+          <GlobalStyle />
-      allDay: '',
+          <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
-      previous: (
+          <BigCalendar
-        <div>
+            popup
-          <LeftOutlined />
+            selectable
-        </div>
+            events={events}
-      ),
+            view={view}
-      next: (
+            views={Weeks}
-        <div>
+            date={date}
-          <RightOutlined />
+            step={60}
-        </div>
+            showMultiDayTimes
-      ),
+            messages={messages}
-      today: i18nt('Today'),
+            onNavigate={setDate}
-      month: i18nt('Month'),
+            onView={setView}
-      week: i18nt('Week'),
+            onSelectSlot={(slotInfo) => {
-      work_week: i18nt('Work week'),
+              console.log('onSelectSlot', slotInfo);
-      day: i18nt('Day'),
+            }}
-      agenda: i18nt('Agenda'),
+            onDoubleClickEvent={() => {
-      date: i18nt('Date'),
+              console.log('onDoubleClickEvent');
-      time: i18nt('Time'),
+            }}
-      event: i18nt('Event'),
+            onSelectEvent={(event) => {
-      noEventsInRange: i18nt('None'),
+              const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
-      showMore: (count) => i18nt('{{count}} more items', { count }),
+              if (!record) {
-    };
+                return;
-    return wrapSSR(
-      <div className={`${hashId} ${containerClassName}`} style={{ height: fixedBlock ? '100%' : 700 }}>
-        <GlobalStyle />
-        <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
-        <BigCalendar
-          popup
-          selectable
-          events={events}
-          view={view}
-          views={Weeks}
-          date={date}
-          step={60}
-          showMultiDayTimes
-          messages={messages}
-          onNavigate={setDate}
-          onView={setView}
-          onSelectSlot={(slotInfo) => {
-            console.log('onSelectSlot', slotInfo);
-          }}
-          onDoubleClickEvent={() => {
-            console.log('onDoubleClickEvent');
-          }}
-          onSelectEvent={(event) => {
-            const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
-            if (!record) {
-              return;
-            }
-            record.__event = { ...event, start: formatDate(dayjs(event.start)), end: formatDate(dayjs(event.end)) };
-
-            setRecord(record);
-            setVisible(true);
-          }}
-          formats={{
-            monthHeaderFormat: 'YYYY-M',
-            agendaDateFormat: 'M-DD',
-            dayHeaderFormat: 'YYYY-M-DD',
-            dayRangeHeaderFormat: ({ start, end }, culture, local) => {
-              if (dates.eq(start, end, 'month')) {
-                return local.format(start, 'YYYY-M', culture);
               }
-              return `${local.format(start, 'YYYY-M', culture)} - ${local.format(end, 'YYYY-M', culture)}`;
+              record.__event = { ...event, start: formatDate(dayjs(event.start)), end: formatDate(dayjs(event.end)) };
-            },
+
-          }}
+              setRecord(record);
-          components={components}
+              setVisible(true);
-          localizer={localizer}
+            }}
-        />
+            formats={{
-      </div>,
+              monthHeaderFormat: 'YYYY-M',
-    );
+              agendaDateFormat: 'M-DD',
-  },
+              dayHeaderFormat: 'YYYY-M-DD',
-  { displayName: 'Calendar' },
+              dayRangeHeaderFormat: ({ start, end }, culture, local) => {
+                if (dates.eq(start, end, 'month')) {
+                  return local.format(start, 'YYYY-M', culture);
+                }
+                return `${local.format(start, 'YYYY-M', culture)} - ${local.format(end, 'YYYY-M', culture)}`;
+              },
+            }}
+            components={components}
+            localizer={localizer}
+          />
+        </div>,
+      );
+    },
+    { displayName: 'Calendar' },
+  ),
 );

packages/plugins/@nocobase/plugin-calendar/src/client/hooks/useCalendarBlockDecoratorProps.ts

@@ -0,0 +1,18 @@
+import { useDataBlockSourceId } from '@nocobase/client';
+import { useCalendarBlockParams } from './useCalendarBlockParams';
+
+export function useCalendarBlockDecoratorProps(props) {
+  const params = useCalendarBlockParams(props);
+  let sourceId: string;
+
+  // 因为 association 是一个固定的值，所以可以在 hooks 中直接使用
+  if (props.association) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    sourceId = useDataBlockSourceId({ association: props.association });
+  }
+
+  return {
+    params,
+    sourceId,
+  };
+}

packages/plugins/@nocobase/plugin-calendar/src/client/hooks/useCalendarBlockParams.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+
+export function useCalendarBlockParams(props) {
+  const appends = useMemo(() => {
+    const arr: string[] = [];
+    const start = props.fieldNames?.start;
+    const end = props.fieldNames?.end;
+
+    if (Array.isArray(start) && start.length >= 2) {
+      arr.push(start[0]);
+    }
+    if (Array.isArray(end) && end.length >= 2) {
+      arr.push(end[0]);
+    }
+
+    return arr;
+  }, [props.fieldNames]);
+
+  return useMemo(() => {
+    return { ...props.params, appends: [...appends, ...(props.params.appends || [])], paginate: false };
+  }, [appends, props.params]);
+}

packages/plugins/@nocobase/plugin-calendar/src/client/index.tsx

@@ -16,6 +16,7 @@ import {
   useCreateAssociationCalendarBlock,
 } from './schema-initializer/items';
 import { useMemo } from 'react';
+import { useCalendarBlockDecoratorProps } from './hooks/useCalendarBlockDecoratorProps';
 
 export class PluginCalendarClient extends Plugin {
   async load() {
@@ -60,7 +61,7 @@ export class PluginCalendarClient extends Plugin {
       RecordAssociationCalendarBlockInitializer,
       CalendarV2,
     });
-    this.app.addScopes({ useCalendarBlockProps });
+    this.app.addScopes({ useCalendarBlockProps, useCalendarBlockDecoratorProps });
     this.schemaSettingsManager.add(calendarBlockSettings);
     this.app.schemaInitializerManager.add(CalendarActionInitializers_deprecated);
     this.app.schemaInitializerManager.add(calendarActionInitializers);

packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx

@@ -1,8 +1,15 @@
 import { ArrayField } from '@formily/core';
-import { useField } from '@formily/react';
+import { useField, useFieldSchema } from '@formily/react';
-import { BlockProvider, FixedBlockWrapper, useBlockRequestContext, useParsedFilter } from '@nocobase/client';
+import {
+  BlockProvider,
+  FixedBlockWrapper,
+  useBlockRequestContext,
+  useParsedFilter,
+  withDynamicSchemaProps,
+} from '@nocobase/client';
 import _ from 'lodash';
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import { useCalendarBlockParams } from '../hooks/useCalendarBlockParams';
 
 export const CalendarBlockContext = createContext<any>({});
 CalendarBlockContext.displayName = 'CalendarBlockContext';
@@ -38,31 +45,26 @@ const InternalCalendarBlockProvider = (props) => {
   );
 };
 
-export const CalendarBlockProvider = (props) => {
+const useCompatCalendarBlockParams = (props) => {
-  const appends = useMemo(() => {
+  const fieldSchema = useFieldSchema();
-    const arr: string[] = [];
-    const start = props.fieldNames?.start;
-    const end = props.fieldNames?.end;
 
-    if (Array.isArray(start) && start.length >= 2) {
+  // 因为 x-use-decorator-props 的值是固定不变的，所以可以在条件中使用 hooks
-      arr.push(start[0]);
+  if (fieldSchema['x-use-decorator-props']) {
-    }
+    return props.params;
-    if (Array.isArray(end) && end.length >= 2) {
+  } else {
-      arr.push(end[0]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
-    }
+    return useCalendarBlockParams(props);
+  }
+};
 
-    return arr;
+export const CalendarBlockProvider = withDynamicSchemaProps((props) => {
-  }, [props.fieldNames]);
+  const params = useCompatCalendarBlockParams(props);
   return (
-    <BlockProvider
+    <BlockProvider name="calendar" {...props} params={params}>
-      name="calendar"
-      {...props}
-      params={{ ...props.params, appends: [...appends, ...(props.params.appends || [])], paginate: false }}
-    >
       <InternalCalendarBlockProvider {...props} />
     </BlockProvider>
   );
-};
+});
 
 export const useCalendarBlockContext = () => {
   return useContext(CalendarBlockContext);

packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/createCalendarBlockUISchema.ts

@@ -2,16 +2,23 @@ import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
 import { generateNTemplate } from '../../locale';
 
-export const createCalendarBlockSchema = (options) => {
+export const createCalendarBlockUISchema = (options: {
-  const { collection, dataSource, resource, fieldNames, settings, ...others } = options;
+  dataSource: string;
-  const schema: ISchema = {
+  fieldNames: object;
+  collectionName?: string;
+  association?: string;
+}): ISchema => {
+  const { collectionName, dataSource, fieldNames, association } = options;
+
+  return {
     type: 'void',
-    'x-acl-action': `${resource || collection}:list`,
+    'x-acl-action': `${association || collectionName}:list`,
     'x-decorator': 'CalendarBlockProvider',
+    'x-use-decorator-props': 'useCalendarBlockDecoratorProps',
     'x-decorator-props': {
-      collection: collection,
+      collection: collectionName,
       dataSource,
-      resource: resource || collection,
+      association,
       action: 'list',
       fieldNames: {
         id: 'id',
@@ -20,18 +27,15 @@ export const createCalendarBlockSchema = (options) => {
       params: {
         paginate: false,
       },
-      ...others,
     },
     'x-toolbar': 'BlockSchemaToolbar',
-    'x-settings': settings,
+    'x-settings': 'blockSettings:calendar',
     'x-component': 'CardItem',
     properties: {
       [uid()]: {
         type: 'void',
         'x-component': 'CalendarV2',
-        'x-component-props': {
+        'x-use-component-props': 'useCalendarBlockProps',
-          useProps: '{{ useCalendarBlockProps }}',
-        },
         properties: {
           toolBar: {
             type: 'void',
@@ -42,7 +46,6 @@ export const createCalendarBlockSchema = (options) => {
               },
             },
             'x-initializer': 'calendar:configureActions',
-            properties: {},
           },
           event: {
             type: 'void',
@@ -79,7 +82,6 @@ export const createCalendarBlockSchema = (options) => {
                               actionInitializers: 'details:configureActions',
                             },
                             'x-initializer': 'popup:common:addBlock',
-                            properties: {},
                           },
                         },
                       },
@@ -93,6 +95,4 @@ export const createCalendarBlockSchema = (options) => {
       },
     },
   };
-
-  return schema;
 };

packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/items/CalendarBlockInitializer.tsx

@@ -14,7 +14,7 @@ import {
   useSchemaInitializerItem,
 } from '@nocobase/client';
 import React, { useContext } from 'react';
-import { createCalendarBlockSchema } from '../utils';
+import { createCalendarBlockUISchema } from '../createCalendarBlockUISchema';
 import { useTranslation } from '../../../locale';
 
 export const CalendarBlockInitializer = ({
@@ -95,13 +95,12 @@ export const CalendarBlockInitializer = ({
           initialValues: {},
         });
         insert(
-          createCalendarBlockSchema({
+          createCalendarBlockUISchema({
-            collection: item.name,
+            collectionName: item.name,
             dataSource: item.dataSource,
             fieldNames: {
               ...values,
             },
-            settings: 'blockSettings:calendar',
           }),
         );
       }}

packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/items/RecordAssociationCalendarBlockInitializer.tsx

@@ -15,7 +15,7 @@ import {
   useSchemaInitializer,
   SchemaInitializerItem,
 } from '@nocobase/client';
-import { createCalendarBlockSchema } from '../utils';
+import { createCalendarBlockUISchema } from '../createCalendarBlockUISchema';
 import { useTranslation } from '../../../locale';
 
 export const RecordAssociationCalendarBlockInitializer = () => {
@@ -98,10 +98,9 @@ export const RecordAssociationCalendarBlockInitializer = () => {
             initialValues: {},
           });
           insert(
-            createCalendarBlockSchema({
+            createCalendarBlockUISchema({
-              collection: field.target,
-              resource,
               association: resource,
+              dataSource: item.dataSource,
               fieldNames: {
                 ...values,
               },
@@ -183,13 +182,12 @@ export function useCreateAssociationCalendarBlock() {
       initialValues: {},
     });
     insert(
-      createCalendarBlockSchema({
+      createCalendarBlockUISchema({
-        collection: field.target,
         association: `${field.collectionName}.${field.name}`,
+        dataSource: item.dataSource,
         fieldNames: {
           ...values,
         },
-        settings: 'blockSettings:calendar',
       }),
     );
   };

packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockInitializer.tsx

@@ -14,7 +14,7 @@ import {
   DataBlockInitializer,
   SchemaComponentOptions,
 } from '@nocobase/client';
-import { createGanttBlockSchema } from './utils';
+import { createGanttBlockUISchema } from './createGanttBlockUISchema';
 
 export const GanttBlockInitializer = () => {
   const { insert } = useSchemaInitializer();
@@ -120,8 +120,8 @@ export const GanttBlockInitializer = () => {
           initialValues: {},
         });
         insert(
-          createGanttBlockSchema({
+          createGanttBlockUISchema({
-            collection: item.name,
+            collectionName: item.name,
             dataSource: item.dataSource,
             fieldNames: {
               ...values,

packages/plugins/@nocobase/plugin-gantt/src/client/__tests__/createGanttBlockSchema.test.ts

@@ -0,0 +1,143 @@
+import { createGanttBlockUISchema } from '../createGanttBlockUISchema';
+
+vi.mock('@formily/shared', () => {
+  return {
+    uid: () => 'mocked-uid',
+  };
+});
+
+describe('createGanttBlockSchema', () => {
+  it('should generate schema correctly', () => {
+    const options = {
+      collectionName: 'TestCollection',
+      fieldNames: {
+        label: 'field1',
+        value: 'field2',
+      },
+      dataSource: 'TestDataSource',
+    };
+    const schema = createGanttBlockUISchema(options);
+
+    expect(schema).toMatchInlineSnapshot(`
+      {
+        "properties": {
+          "mocked-uid": {
+            "properties": {
+              "detail": {
+                "properties": {
+                  "drawer": {
+                    "properties": {
+                      "tabs": {
+                        "properties": {
+                          "tab1": {
+                            "properties": {
+                              "grid": {
+                                "type": "void",
+                                "x-component": "Grid",
+                                "x-initializer": "popup:common:addBlock",
+                              },
+                            },
+                            "title": "{{t("Details")}}",
+                            "type": "void",
+                            "x-component": "Tabs.TabPane",
+                            "x-component-props": {},
+                            "x-designer": "Tabs.Designer",
+                          },
+                        },
+                        "type": "void",
+                        "x-component": "Tabs",
+                        "x-component-props": {},
+                        "x-initializer": "TabPaneInitializers",
+                      },
+                    },
+                    "title": "{{ t("View record") }}",
+                    "type": "void",
+                    "x-component": "Action.Drawer",
+                    "x-component-props": {
+                      "className": "nb-action-popup",
+                    },
+                  },
+                },
+                "type": "void",
+                "x-component": "Gantt.Event",
+              },
+              "table": {
+                "properties": {
+                  "actions": {
+                    "properties": {
+                      "actions": {
+                        "type": "void",
+                        "x-component": "Space",
+                        "x-component-props": {
+                          "split": "|",
+                        },
+                        "x-decorator": "DndContext",
+                      },
+                    },
+                    "title": "{{ t("Actions") }}",
+                    "type": "void",
+                    "x-action-column": "actions",
+                    "x-component": "TableV2.Column",
+                    "x-decorator": "TableV2.Column.ActionBar",
+                    "x-designer": "TableV2.ActionColumnDesigner",
+                    "x-initializer": "table:configureItemActions",
+                  },
+                },
+                "type": "array",
+                "x-component": "TableV2",
+                "x-component-props": {
+                  "pagination": false,
+                  "rowKey": "id",
+                  "rowSelection": {
+                    "type": "checkbox",
+                  },
+                },
+                "x-decorator": "div",
+                "x-decorator-props": {
+                  "style": {
+                    "float": "left",
+                    "maxWidth": "35%",
+                  },
+                },
+                "x-initializer": "table:configureColumns",
+                "x-use-component-props": "useTableBlockProps",
+              },
+              "toolBar": {
+                "properties": {},
+                "type": "void",
+                "x-component": "ActionBar",
+                "x-component-props": {
+                  "style": {
+                    "marginBottom": 24,
+                  },
+                },
+                "x-initializer": "gantt:configureActions",
+              },
+            },
+            "type": "void",
+            "x-component": "Gantt",
+            "x-use-component-props": "useGanttBlockProps",
+          },
+        },
+        "type": "void",
+        "x-acl-action": "TestCollection:list",
+        "x-component": "CardItem",
+        "x-decorator": "GanttBlockProvider",
+        "x-decorator-props": {
+          "action": "list",
+          "collection": "TestCollection",
+          "dataSource": "TestDataSource",
+          "fieldNames": {
+            "label": "field1",
+            "value": "field2",
+          },
+          "params": {
+            "paginate": false,
+          },
+        },
+        "x-settings": "blockSettings:gantt",
+        "x-toolbar": "BlockSchemaToolbar",
+      }
+    `);
+  });
+});

packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx

@@ -9,6 +9,8 @@ import {
   useCollectionParentRecordData,
   useTableBlockContext,
   useToken,
+  withDynamicSchemaProps,
+  useProps,
 } from '@nocobase/client';
 import { message } from 'antd';
 import { debounce } from 'lodash';
@@ -81,7 +83,8 @@ const debounceHandleProcessChange = debounce(async (task: Task, resource, fieldN
   message.success(t('Saved successfully'));
   await service?.refresh();
 }, 300);
-export const Gantt: any = (props: any) => {
+
+export const Gantt: any = withDynamicSchemaProps((props: any) => {
   const { styles } = useStyles();
   const { token } = useToken();
   const api = useAPIClient();
@@ -116,12 +119,13 @@ export const Gantt: any = (props: any) => {
     viewDate,
     TooltipContent = StandardTooltipContent,
     onDoubleClick,
-    onClick,
     onDelete,
     onSelect,
-    useProps,
+    onExpanderClick,
-  } = props;
+    tasks,
-  const { onExpanderClick, tasks, expandAndCollapseAll } = useProps();
+    expandAndCollapseAll,
+    fieldNames,
+  } = useProps(props); // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
   const ctx = useGanttBlockContext();
   const appInfo = useCurrentAppInfo();
   const { t } = useTranslation();
@@ -129,7 +133,6 @@ export const Gantt: any = (props: any) => {
   const tableCtx = useTableBlockContext();
   const { resource, service } = useBlockRequestContext();
   const fieldSchema = useFieldSchema();
-  const { fieldNames } = useProps(props);
   const viewMode = fieldNames.range || 'day';
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
@@ -559,4 +562,4 @@ export const Gantt: any = (props: any) => {
       </div>
     </div>
   );
-};
+});

packages/plugins/@nocobase/plugin-gantt/src/client/createGanttBlockUISchema.tsx

@@ -0,0 +1,129 @@
+import { ISchema } from '@formily/react';
+import { uid } from '@formily/shared';
+
+export const createGanttBlockUISchema = (options: {
+  collectionName: string;
+  fieldNames: object;
+  dataSource: string;
+}): ISchema => {
+  const { collectionName, fieldNames, dataSource } = options;
+
+  return {
+    type: 'void',
+    'x-acl-action': `${collectionName}:list`,
+    'x-decorator': 'GanttBlockProvider',
+    'x-decorator-props': {
+      collection: collectionName,
+      dataSource,
+      action: 'list',
+      fieldNames,
+      params: {
+        paginate: false,
+      },
+    },
+    'x-toolbar': 'BlockSchemaToolbar',
+    'x-settings': 'blockSettings:gantt',
+    // 'x-designer': 'Gantt.Designer',
+    'x-component': 'CardItem',
+    properties: {
+      [uid()]: {
+        type: 'void',
+        'x-component': 'Gantt',
+        'x-use-component-props': 'useGanttBlockProps',
+        properties: {
+          toolBar: {
+            type: 'void',
+            'x-component': 'ActionBar',
+            'x-component-props': {
+              style: {
+                marginBottom: 24,
+              },
+            },
+            'x-initializer': 'gantt:configureActions',
+            properties: {},
+          },
+          table: {
+            type: 'array',
+            'x-decorator': 'div',
+            'x-decorator-props': {
+              style: {
+                float: 'left',
+                maxWidth: '35%',
+              },
+            },
+
+            'x-initializer': 'table:configureColumns',
+            'x-component': 'TableV2',
+            'x-use-component-props': 'useTableBlockProps',
+            'x-component-props': {
+              rowKey: 'id',
+              rowSelection: {
+                type: 'checkbox',
+              },
+              pagination: false,
+            },
+            properties: {
+              actions: {
+                type: 'void',
+                title: '{{ t("Actions") }}',
+                'x-action-column': 'actions',
+                'x-decorator': 'TableV2.Column.ActionBar',
+                'x-component': 'TableV2.Column',
+                'x-designer': 'TableV2.ActionColumnDesigner',
+                'x-initializer': 'table:configureItemActions',
+                properties: {
+                  actions: {
+                    type: 'void',
+                    'x-decorator': 'DndContext',
+                    'x-component': 'Space',
+                    'x-component-props': {
+                      split: '|',
+                    },
+                  },
+                },
+              },
+            },
+          },
+          detail: {
+            type: 'void',
+            'x-component': 'Gantt.Event',
+            properties: {
+              drawer: {
+                type: 'void',
+                'x-component': 'Action.Drawer',
+                'x-component-props': {
+                  className: 'nb-action-popup',
+                },
+                title: '{{ t("View record") }}',
+                properties: {
+                  tabs: {
+                    type: 'void',
+                    'x-component': 'Tabs',
+                    'x-component-props': {},
+                    'x-initializer': 'TabPaneInitializers',
+                    properties: {
+                      tab1: {
+                        type: 'void',
+                        title: '{{t("Details")}}',
+                        'x-component': 'Tabs.TabPane',
+                        'x-designer': 'Tabs.Designer',
+                        'x-component-props': {},
+                        properties: {
+                          grid: {
+                            type: 'void',
+                            'x-component': 'Grid',
+                            'x-initializer': 'popup:common:addBlock',
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+};

packages/plugins/@nocobase/plugin-gantt/src/client/index.tsx

@@ -41,6 +41,10 @@ export class GanttPlugin extends Plugin {
       title: "{{t('Gantt')}}",
       Component: 'GanttBlockInitializer',
     });
+
+    this.app.addScopes({
+      useGanttBlockProps,
+    });
   }
 }
 

packages/plugins/@nocobase/plugin-gantt/src/client/utils.tsx

@@ -1,5 +1,3 @@
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
 import { useCollection_deprecated, useCompile } from '@nocobase/client';
 import { useTranslation } from 'react-i18next';
 
@@ -19,131 +17,3 @@ export const useOptions = (type = 'string') => {
     });
   return options;
 };
-export const createGanttBlockSchema = (options) => {
-  const { collection, resource, fieldNames, ...others } = options;
-  const schema: ISchema = {
-    type: 'void',
-    'x-acl-action': `${resource || collection}:list`,
-    'x-decorator': 'GanttBlockProvider',
-    'x-decorator-props': {
-      collection: collection,
-      resource: resource || collection,
-      action: 'list',
-      fieldNames: {
-        ...fieldNames,
-      },
-      params: {
-        paginate: false,
-      },
-      ...others,
-    },
-    'x-designer': 'Gantt.Designer',
-    'x-component': 'CardItem',
-    properties: {
-      [uid()]: {
-        type: 'void',
-        'x-component': 'Gantt',
-        'x-component-props': {
-          useProps: '{{ useGanttBlockProps }}',
-        },
-        properties: {
-          toolBar: {
-            type: 'void',
-            'x-component': 'ActionBar',
-            'x-component-props': {
-              style: {
-                marginBottom: 24,
-              },
-            },
-            'x-initializer': 'gantt:configureActions',
-            properties: {},
-          },
-          table: {
-            type: 'array',
-            'x-decorator': 'div',
-            'x-decorator-props': {
-              style: {
-                float: 'left',
-                maxWidth: '35%',
-              },
-            },
-
-            'x-initializer': 'table:configureColumns',
-            'x-component': 'TableV2',
-            'x-component-props': {
-              rowKey: 'id',
-              rowSelection: {
-                type: 'checkbox',
-              },
-              useProps: '{{ useTableBlockProps }}',
-              pagination: false,
-            },
-            properties: {
-              actions: {
-                type: 'void',
-                title: '{{ t("Actions") }}',
-                'x-action-column': 'actions',
-                'x-decorator': 'TableV2.Column.ActionBar',
-                'x-component': 'TableV2.Column',
-                'x-designer': 'TableV2.ActionColumnDesigner',
-                'x-initializer': 'table:configureItemActions',
-                properties: {
-                  actions: {
-                    type: 'void',
-                    'x-decorator': 'DndContext',
-                    'x-component': 'Space',
-                    'x-component-props': {
-                      split: '|',
-                    },
-                    properties: {},
-                  },
-                },
-              },
-            },
-          },
-          detail: {
-            type: 'void',
-            'x-component': 'Gantt.Event',
-            properties: {
-              drawer: {
-                type: 'void',
-                'x-component': 'Action.Drawer',
-                'x-component-props': {
-                  className: 'nb-action-popup',
-                },
-                title: '{{ t("View record") }}',
-                properties: {
-                  tabs: {
-                    type: 'void',
-                    'x-component': 'Tabs',
-                    'x-component-props': {},
-                    'x-initializer': 'TabPaneInitializers',
-                    properties: {
-                      tab1: {
-                        type: 'void',
-                        title: '{{t("Details")}}',
-                        'x-component': 'Tabs.TabPane',
-                        'x-designer': 'Tabs.Designer',
-                        'x-component-props': {},
-                        properties: {
-                          grid: {
-                            type: 'void',
-                            'x-component': 'Grid',
-                            'x-initializer': 'popup:common:addBlock',
-                            properties: {},
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  };
-
-  return schema;
-};

packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.tsx

@@ -6,6 +6,7 @@ import {
   useCreateActionProps as useCAP,
   useCollectionParentRecordData,
   useProps,
+  withDynamicSchemaProps,
 } from '@nocobase/client';
 import { Spin, Tag } from 'antd';
 import React, { useContext, useMemo, useState } from 'react';
@@ -56,100 +57,105 @@ export const toColumns = (groupField: any, dataSource: Array<any> = [], primaryK
   return Object.values(columns);
 };
 
-export const Kanban: any = observer(
+export const Kanban: any = withDynamicSchemaProps(
-  (props: any) => {
+  observer(
-    const { styles } = useStyles();
+    (props: any) => {
-    const { groupField, onCardDragEnd, dataSource, setDataSource, ...restProps } = useProps(props);
+      const { styles } = useStyles();
-    const parentRecordData = useCollectionParentRecordData();
+
-    const field = useField<ArrayField>();
+      // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
-    const fieldSchema = useFieldSchema();
+      const { groupField, onCardDragEnd, dataSource, setDataSource, ...restProps } = useProps(props);
-    const [disableCardDrag, setDisableCardDrag] = useState(false);
+
-    const schemas = useMemo(
+      const parentRecordData = useCollectionParentRecordData();
-      () =>
+      const field = useField<ArrayField>();
-        fieldSchema.reduceProperties(
+      const fieldSchema = useFieldSchema();
-          (buf, current) => {
+      const [disableCardDrag, setDisableCardDrag] = useState(false);
-            if (current['x-component'].endsWith('.Card')) {
+      const schemas = useMemo(
-              buf.card = current;
+        () =>
-            } else if (current['x-component'].endsWith('.CardAdder')) {
+          fieldSchema.reduceProperties(
-              buf.cardAdder = current;
+            (buf, current) => {
-            } else if (current['x-component'].endsWith('.CardViewer')) {
+              if (current['x-component'].endsWith('.Card')) {
-              buf.cardViewer = current;
+                buf.card = current;
-            }
+              } else if (current['x-component'].endsWith('.CardAdder')) {
-            return buf;
+                buf.cardAdder = current;
-          },
+              } else if (current['x-component'].endsWith('.CardViewer')) {
-          { card: null, cardAdder: null, cardViewer: null },
+                buf.cardViewer = current;
-        ),
+              }
-      [],
+              return buf;
-    );
+            },
-    const handleCardRemove = (card, column) => {
+            { card: null, cardAdder: null, cardViewer: null },
-      const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
+          ),
-      field.value = updatedBoard.columns;
+        [],
-      setDataSource(updatedBoard.columns);
+      );
-    };
+      const handleCardRemove = (card, column) => {
-    const handleCardDragEnd = (card, fromColumn, toColumn) => {
+        const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
-      onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
+        field.value = updatedBoard.columns;
-      const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
+        setDataSource(updatedBoard.columns);
-      field.value = updatedBoard.columns;
+      };
-      setDataSource(updatedBoard.columns);
+      const handleCardDragEnd = (card, fromColumn, toColumn) => {
-    };
+        onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
-    return (
+        const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
-      <Spin wrapperClassName={styles.nbKanban} spinning={field.loading || false}>
+        field.value = updatedBoard.columns;
-        <Board
+        setDataSource(updatedBoard.columns);
-          {...restProps}
+      };
-          allowAddCard={!!schemas.cardAdder}
+      return (
-          disableColumnDrag
+        <Spin wrapperClassName={styles.nbKanban} spinning={field.loading || false}>
-          cardAdderPosition={'bottom'}
+          <Board
-          disableCardDrag={restProps.disableCardDrag || disableCardDrag}
+            {...restProps}
-          onCardRemove={handleCardRemove}
+            allowAddCard={!!schemas.cardAdder}
-          onCardDragEnd={handleCardDragEnd}
+            disableColumnDrag
-          renderColumnHeader={({ title, color }) => (
+            cardAdderPosition={'bottom'}
-            <div className={'react-kanban-column-header'}>
+            disableCardDrag={restProps.disableCardDrag || disableCardDrag}
-              <Tag color={color}>{title}</Tag>
+            onCardRemove={handleCardRemove}
-            </div>
+            onCardDragEnd={handleCardDragEnd}
-          )}
+            renderColumnHeader={({ title, color }) => (
-          renderCard={(card, { column, dragging }) => {
+              <div className={'react-kanban-column-header'}>
-            const columnIndex = dataSource?.indexOf(column);
+                <Tag color={color}>{title}</Tag>
-            const cardIndex = column?.cards?.indexOf(card);
+              </div>
-            return (
+            )}
-              schemas.card && (
+            renderCard={(card, { column, dragging }) => {
-                <RecordProvider record={card} parent={parentRecordData}>
+              const columnIndex = dataSource?.indexOf(column);
-                  <KanbanCardContext.Provider
+              const cardIndex = column?.cards?.indexOf(card);
-                    value={{
+              return (
-                      setDisableCardDrag,
+                schemas.card && (
-                      cardViewerSchema: schemas.cardViewer,
+                  <RecordProvider record={card} parent={parentRecordData}>
-                      cardField: field,
+                    <KanbanCardContext.Provider
-                      card,
+                      value={{
-                      column,
+                        setDisableCardDrag,
-                      dragging,
+                        cardViewerSchema: schemas.cardViewer,
-                      columnIndex,
+                        cardField: field,
-                      cardIndex,
+                        card,
-                    }}
+                        column,
-                  >
+                        dragging,
-                    <RecursionField name={schemas.card.name} schema={schemas.card} />
+                        columnIndex,
-                  </KanbanCardContext.Provider>
+                        cardIndex,
-                </RecordProvider>
+                      }}
-              )
+                    >
-            );
+                      <RecursionField name={schemas.card.name} schema={schemas.card} />
-          }}
+                    </KanbanCardContext.Provider>
-          renderCardAdder={({ column }) => {
+                  </RecordProvider>
-            if (!schemas.cardAdder) {
+                )
-              return null;
+              );
-            }
+            }}
-            return (
+            renderCardAdder={({ column }) => {
-              <KanbanColumnContext.Provider value={{ column, groupField }}>
+              if (!schemas.cardAdder) {
-                <SchemaComponentOptions scope={{ useCreateActionProps }}>
+                return null;
-                  <RecursionField name={schemas.cardAdder.name} schema={schemas.cardAdder} />
+              }
-                </SchemaComponentOptions>
+              return (
-              </KanbanColumnContext.Provider>
+                <KanbanColumnContext.Provider value={{ column, groupField }}>
-            );
+                  <SchemaComponentOptions scope={{ useCreateActionProps }}>
-          }}
+                    <RecursionField name={schemas.cardAdder.name} schema={schemas.cardAdder} />
-        >
+                  </SchemaComponentOptions>
-          {{
+                </KanbanColumnContext.Provider>
-            columns: dataSource || [],
+              );
-          }}
+            }}
-        </Board>
+          >
-      </Spin>
+            {{
-    );
+              columns: dataSource || [],
-  },
+            }}
-  { displayName: 'Kanban' },
+          </Board>
+        </Spin>
+      );
+    },
+    { displayName: 'Kanban' },
+  ),
 );

packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockInitializer.tsx

@@ -16,7 +16,7 @@ import {
   useSchemaInitializerItem,
   useAPIClient,
 } from '@nocobase/client';
-import { createKanbanBlockSchema } from './utils';
+import { createKanbanBlockUISchema } from './createKanbanBlockUISchema';
 import { CreateAndSelectSort } from './CreateAndSelectSort';
 import { NAMESPACE } from './locale';
 
@@ -157,14 +157,13 @@ export const KanbanBlockInitializer = () => {
           initialValues: {},
         });
         insert(
-          createKanbanBlockSchema({
+          createKanbanBlockUISchema({
             sortField: values.dragSortBy,
             groupField: values.groupField.value,
-            collection: item.name,
+            collectionName: item.name,
             dataSource: item.dataSource,
             params: {
               sort: [values.dragSortBy],
-              paginate: false,
             },
           }),
         );

packages/plugins/@nocobase/plugin-kanban/src/client/__tests__/createKanbanBlockSchema.test.ts

@@ -0,0 +1,126 @@
+import { createKanbanBlockUISchema } from '../createKanbanBlockUISchema';
+
+vi.mock('@formily/shared', () => {
+  return {
+    uid: vi.fn(() => 'mocked-uid'),
+  };
+});
+
+test('createKanbanBlockSchema should return an object with expected properties', () => {
+  const options = {
+    collectionName: 'testCollection',
+    groupField: 'testGroupField',
+    sortField: 'testSortField',
+    dataSource: 'testDataSource',
+    params: { testParam: 'testValue' },
+  };
+
+  const result = createKanbanBlockUISchema(options);
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "properties": {
+        "actions": {
+          "properties": {},
+          "type": "void",
+          "x-component": "ActionBar",
+          "x-component-props": {
+            "style": {
+              "marginBottom": "var(--nb-spacing)",
+            },
+          },
+          "x-initializer": "kanban:configureActions",
+        },
+        "mocked-uid": {
+          "properties": {
+            "card": {
+              "properties": {
+                "grid": {
+                  "type": "void",
+                  "x-component": "Grid",
+                  "x-component-props": {
+                    "dndContext": false,
+                  },
+                },
+              },
+              "type": "void",
+              "x-component": "Kanban.Card",
+              "x-component-props": {
+                "openMode": "drawer",
+              },
+              "x-decorator": "BlockItem",
+              "x-designer": "Kanban.Card.Designer",
+              "x-label-disabled": true,
+              "x-read-pretty": true,
+            },
+            "cardViewer": {
+              "properties": {
+                "drawer": {
+                  "properties": {
+                    "tabs": {
+                      "properties": {
+                        "tab1": {
+                          "properties": {
+                            "grid": {
+                              "properties": {},
+                              "type": "void",
+                              "x-component": "Grid",
+                              "x-initializer": "popup:common:addBlock",
+                            },
+                          },
+                          "title": "{{t("Details")}}",
+                          "type": "void",
+                          "x-component": "Tabs.TabPane",
+                          "x-component-props": {},
+                          "x-designer": "Tabs.Designer",
+                        },
+                      },
+                      "type": "void",
+                      "x-component": "Tabs",
+                      "x-component-props": {},
+                      "x-initializer": "TabPaneInitializers",
+                    },
+                  },
+                  "title": "{{ t("View record") }}",
+                  "type": "void",
+                  "x-component": "Action.Container",
+                  "x-component-props": {
+                    "className": "nb-action-popup",
+                  },
+                },
+              },
+              "title": "{{ t("View") }}",
+              "type": "void",
+              "x-action": "view",
+              "x-component": "Kanban.CardViewer",
+              "x-component-props": {
+                "openMode": "drawer",
+              },
+              "x-designer": "Action.Designer",
+            },
+          },
+          "type": "array",
+          "x-component": "Kanban",
+          "x-use-component-props": "useKanbanBlockProps",
+        },
+      },
+      "type": "void",
+      "x-acl-action": "testCollection:list",
+      "x-component": "CardItem",
+      "x-decorator": "KanbanBlockProvider",
+      "x-decorator-props": {
+        "action": "list",
+        "collection": "testCollection",
+        "dataSource": "testDataSource",
+        "groupField": "testGroupField",
+        "params": {
+          "paginate": false,
+          "testParam": "testValue",
+        },
+        "sortField": "testSortField",
+      },
+      "x-settings": "blockSettings:kanban",
+      "x-toolbar": "BlockSchemaToolbar",
+    }
+  `);
+});

packages/plugins/@nocobase/plugin-kanban/src/client/createKanbanBlockUISchema.ts

@@ -1,24 +1,33 @@
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
 
-export const createKanbanBlockSchema = (options) => {
+export const createKanbanBlockUISchema = (options: {
-  const { collection, resource, groupField, sortField, ...others } = options;
+  collectionName: string;
-  const schema: ISchema = {
+  groupField: string;
+  sortField: string;
+  dataSource: string;
+  params?: Record<string, any>;
+}): ISchema => {
+  const { collectionName, groupField, sortField, dataSource, params } = options;
+
+  return {
     type: 'void',
-    'x-acl-action': `${resource || collection}:list`,
+    'x-acl-action': `${collectionName}:list`,
     'x-decorator': 'KanbanBlockProvider',
     'x-decorator-props': {
-      collection: collection,
+      collection: collectionName,
-      resource: resource || collection,
       action: 'list',
       groupField,
       sortField,
       params: {
         paginate: false,
+        ...params,
       },
-      ...others,
+      dataSource,
     },
-    'x-designer': 'Kanban.Designer',
+    // 'x-designer': 'Kanban.Designer',
+    'x-toolbar': 'BlockSchemaToolbar',
+    'x-settings': 'blockSettings:kanban',
     'x-component': 'CardItem',
     properties: {
       actions: {
@@ -35,9 +44,7 @@ export const createKanbanBlockSchema = (options) => {
       [uid()]: {
         type: 'array',
         'x-component': 'Kanban',
-        'x-component-props': {
+        'x-use-component-props': 'useKanbanBlockProps',
-          useProps: '{{ useKanbanBlockProps }}',
-        },
         properties: {
           card: {
             type: 'void',
@@ -106,5 +113,4 @@ export const createKanbanBlockSchema = (options) => {
       },
     },
   };
-  return schema;
 };

packages/plugins/@nocobase/plugin-map/src/client/__tests__/block/createMapBlockSchema.test.ts

@@ -0,0 +1,95 @@
+import { createMapBlockUISchema } from '../../block/createMapBlockUISchema';
+
+vi.mock('@formily/shared', () => {
+  return {
+    uid: () => 'mocked-uid',
+  };
+});
+
+test('createMapBlockSchema should return an object with expected properties', () => {
+  const options = {
+    collectionName: 'testCollection',
+    dataSource: 'testDataSource',
+    fieldNames: {
+      label: 'field1',
+      value: 'field2',
+    },
+  };
+
+  const result = createMapBlockUISchema(options);
+
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "properties": {
+        "actions": {
+          "type": "void",
+          "x-component": "ActionBar",
+          "x-component-props": {
+            "style": {
+              "marginBottom": 16,
+            },
+          },
+          "x-initializer": "map:configureActions",
+        },
+        "mocked-uid": {
+          "properties": {
+            "drawer": {
+              "properties": {
+                "tabs": {
+                  "properties": {
+                    "tab1": {
+                      "properties": {
+                        "grid": {
+                          "type": "void",
+                          "x-component": "Grid",
+                          "x-initializer": "popup:common:addBlock",
+                        },
+                      },
+                      "title": "{{t("Details")}}",
+                      "type": "void",
+                      "x-component": "Tabs.TabPane",
+                      "x-component-props": {},
+                      "x-designer": "Tabs.Designer",
+                    },
+                  },
+                  "type": "void",
+                  "x-component": "Tabs",
+                  "x-component-props": {},
+                  "x-initializer": "TabPaneInitializers",
+                },
+              },
+              "title": "{{ t("View record") }}",
+              "type": "void",
+              "x-component": "Action.Drawer",
+              "x-component-props": {
+                "className": "nb-action-popup",
+              },
+            },
+          },
+          "type": "void",
+          "x-component": "MapBlock",
+          "x-use-component-props": "useMapBlockProps",
+        },
+      },
+      "type": "void",
+      "x-acl-action": "testCollection:list",
+      "x-component": "CardItem",
+      "x-decorator": "MapBlockProvider",
+      "x-decorator-props": {
+        "action": "list",
+        "collection": "testCollection",
+        "dataSource": "testDataSource",
+        "fieldNames": {
+          "label": "field1",
+          "value": "field2",
+        },
+        "params": {
+          "paginate": false,
+        },
+      },
+      "x-filter-targets": [],
+      "x-settings": "blockSettings:map",
+      "x-toolbar": "BlockSchemaToolbar",
+    }
+  `);
+});

packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.tsx

@@ -1,9 +1,16 @@
-import { useCollection_deprecated, useCollectionManager_deprecated, useProps } from '@nocobase/client';
+import {
+  useCollection_deprecated,
+  useCollectionManager_deprecated,
+  useProps,
+  withDynamicSchemaProps,
+} from '@nocobase/client';
 import React, { useMemo } from 'react';
 import { MapBlockComponent } from '../components';
 
-export const MapBlock = (props) => {
+export const MapBlock = withDynamicSchemaProps((props) => {
+  // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
   const { fieldNames } = useProps(props);
+
   const { getCollectionJoinField } = useCollectionManager_deprecated();
   const { name } = useCollection_deprecated();
   const collectionField = useMemo(() => {
@@ -12,4 +19,4 @@ export const MapBlock = (props) => {
 
   const fieldComponentProps = collectionField?.uiSchema?.['x-component-props'];
   return <MapBlockComponent {...fieldComponentProps} {...props} collectionField={collectionField} />;
-};
+});

packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockInitializer.tsx

@@ -13,7 +13,8 @@ import {
 } from '@nocobase/client';
 import React, { useContext } from 'react';
 import { useMapTranslation } from '../locale';
-import { createMapBlockSchema, findNestedOption } from './utils';
+import { findNestedOption } from './utils';
+import { createMapBlockUISchema } from './createMapBlockUISchema';
 
 export const MapBlockInitializer = () => {
   const itemConfig = useSchemaInitializerItem();
@@ -84,13 +85,12 @@ export const MapBlockInitializer = () => {
           initialValues: {},
         });
         insert(
-          createMapBlockSchema({
+          createMapBlockUISchema({
-            collection: item.name,
+            collectionName: item.name,
             dataSource: item.dataSource,
             fieldNames: {
               ...values,
             },
-            settings: 'blockSettings:map',
           }),
         );
       }}

packages/plugins/@nocobase/plugin-map/src/client/block/createMapBlockUISchema.ts

@@ -0,0 +1,81 @@
+import { ISchema } from '@formily/react';
+import { uid } from '@formily/shared';
+
+export const createMapBlockUISchema = (options: {
+  collectionName: string;
+  dataSource: string;
+  fieldNames: object;
+}): ISchema => {
+  const { collectionName, fieldNames, dataSource } = options;
+
+  return {
+    type: 'void',
+    'x-acl-action': `${collectionName}:list`,
+    'x-decorator': 'MapBlockProvider',
+    'x-decorator-props': {
+      collection: collectionName,
+      dataSource,
+      action: 'list',
+      fieldNames,
+      params: {
+        paginate: false,
+      },
+    },
+    'x-toolbar': 'BlockSchemaToolbar',
+    'x-settings': 'blockSettings:map',
+    'x-component': 'CardItem',
+    // 保存当前筛选区块所能过滤的数据区块
+    'x-filter-targets': [],
+    properties: {
+      actions: {
+        type: 'void',
+        'x-initializer': 'map:configureActions',
+        'x-component': 'ActionBar',
+        'x-component-props': {
+          style: {
+            marginBottom: 16,
+          },
+        },
+      },
+      [uid()]: {
+        type: 'void',
+        'x-component': 'MapBlock',
+        'x-use-component-props': 'useMapBlockProps',
+        properties: {
+          drawer: {
+            type: 'void',
+            'x-component': 'Action.Drawer',
+            'x-component-props': {
+              className: 'nb-action-popup',
+            },
+            title: '{{ t("View record") }}',
+            properties: {
+              tabs: {
+                type: 'void',
+                'x-component': 'Tabs',
+                'x-component-props': {},
+                'x-initializer': 'TabPaneInitializers',
+                properties: {
+                  tab1: {
+                    type: 'void',
+                    title: '{{t("Details")}}',
+                    'x-component': 'Tabs.TabPane',
+                    'x-designer': 'Tabs.Designer',
+                    'x-component-props': {},
+                    properties: {
+                      grid: {
+                        type: 'void',
+                        'x-component': 'Grid',
+                        'x-initializer': 'popup:common:addBlock',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+};

packages/plugins/@nocobase/plugin-map/src/client/block/utils.ts

@@ -1,86 +1,3 @@
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-
-export const createMapBlockSchema = (options) => {
-  const { collection, resource, fieldNames, settings, ...others } = options;
-  const schema: ISchema = {
-    type: 'void',
-    'x-acl-action': `${resource || collection}:list`,
-    'x-decorator': 'MapBlockProvider',
-    'x-decorator-props': {
-      collection: collection,
-      resource: resource || collection,
-      action: 'list',
-      fieldNames,
-      params: {
-        paginate: false,
-      },
-      ...others,
-    },
-    'x-toolbar': 'BlockSchemaToolbar',
-    'x-settings': settings,
-    'x-component': 'CardItem',
-    // 保存当前筛选区块所能过滤的数据区块
-    'x-filter-targets': [],
-    properties: {
-      actions: {
-        type: 'void',
-        'x-initializer': 'map:configureActions',
-        'x-component': 'ActionBar',
-        'x-component-props': {
-          style: {
-            marginBottom: 16,
-          },
-        },
-        properties: {},
-      },
-      [uid()]: {
-        type: 'void',
-        'x-component': 'MapBlock',
-        'x-component-props': {
-          useProps: '{{ useMapBlockProps }}',
-        },
-        properties: {
-          drawer: {
-            type: 'void',
-            'x-component': 'Action.Drawer',
-            'x-component-props': {
-              className: 'nb-action-popup',
-            },
-            title: '{{ t("View record") }}',
-            properties: {
-              tabs: {
-                type: 'void',
-                'x-component': 'Tabs',
-                'x-component-props': {},
-                'x-initializer': 'TabPaneInitializers',
-                properties: {
-                  tab1: {
-                    type: 'void',
-                    title: '{{t("Details")}}',
-                    'x-component': 'Tabs.TabPane',
-                    'x-designer': 'Tabs.Designer',
-                    'x-component-props': {},
-                    properties: {
-                      grid: {
-                        type: 'void',
-                        'x-component': 'Grid',
-                        'x-initializer': 'popup:common:addBlock',
-                        properties: {},
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  };
-  return schema;
-};
-
 export const findNestedOption = (value: string[] | string, options = []) => {
   if (typeof value === 'string') {
     value = [value];

packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Block.tsx

@@ -20,6 +20,7 @@ import { getSource } from '../../utils';
 import { AMapComponent, AMapForwardedRefProps } from './Map';
 
 export const AMapBlock = (props) => {
+  // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
   const { collectionField, fieldNames, dataSource, fixedBlock, zoom, setSelectedRecordKeys, lineSort } =
     useProps(props);
   const { name, getPrimaryKey } = useCollection_deprecated();

packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Block.tsx

@@ -38,6 +38,7 @@ const pointClass = css`
 `;
 
 export const GoogleMapsBlock = (props) => {
+  // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
   const { collectionField, fieldNames, dataSource, fixedBlock, zoom, setSelectedRecordKeys, lineSort } =
     useProps(props);
   const { getPrimaryKey } = useCollection_deprecated();

packages/plugins/@nocobase/plugin-map/src/client/index.tsx

@@ -6,6 +6,7 @@ import { mapBlockSettings } from './block/MapBlock.Settings';
 import { Configuration, Map } from './components';
 import { fields } from './fields';
 import { NAMESPACE, generateNTemplate } from './locale';
+import { useMapBlockProps } from './block/MapBlockProvider';
 const MapProvider = React.memo((props) => {
   return (
     <CurrentAppInfoProvider>
@@ -44,6 +45,10 @@ export class MapPlugin extends Plugin {
       Component: Configuration,
       aclSnippet: 'pm.map.configuration',
     });
+
+    this.app.addScopes({
+      useMapBlockProps,
+    });
   }
 }