perf(data-scope): async loading of variable data (#1932)

* refactor: remove useless code

* perf: async loading of user variable data

* perf: async loading children

* perf: add maxDepth

* refactor: use useMemo

* fix: avoid old data

packages/core/client/src/collection-manager/action-hooks.ts

@@ -1,7 +1,7 @@
 import { useField, useForm } from '@formily/react';
 import { message } from 'antd';
 import omit from 'lodash/omit';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCollection, useCollectionManager } from '.';
 import { useCompile } from '..';
@@ -109,7 +109,10 @@ export const useChildrenCollections = (collectionName: string) => {
 };
 
 export const useCollectionFilterOptions = (collectionName: string) => {
-  const { getCollectionFields, getInterface } = useCollectionManager();
+  const { getCollectionFields, getInterface, getChildrenCollections, getCollection } = useCollectionManager();
+  const compile = useCompile();
+
+  return useMemo(() => {
     const fields = getCollectionFields(collectionName);
     const field2option = (field, depth) => {
       if (!field.interface) {
@@ -158,8 +161,6 @@ export const useCollectionFilterOptions = (collectionName: string) => {
       return options;
     };
     const options = getOptions(fields, 1);
-  const compile = useCompile();
-  const { getChildrenCollections, getCollection } = useCollectionManager();
     const collection = getCollection(collectionName);
     const childrenCollections = getChildrenCollections(collectionName);
     if (childrenCollections.length > 0 && !options.find((v) => v.name == 'tableoid')) {
@@ -199,6 +200,7 @@ export const useCollectionFilterOptions = (collectionName: string) => {
       });
     }
     return options;
+  }, [collectionName]);
 };
 
 export const useLinkageCollectionFilterOptions = (collectionName: string) => {

packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx

@@ -1,6 +1,6 @@
 import { ArrayItems } from '@formily/antd';
 import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTableBlockContext } from '../../../block-provider';
 import { mergeFilter } from '../../../block-provider/SharedFilterProvider';
@@ -9,7 +9,7 @@ import { useCollectionFilterOptions, useSortFields } from '../../../collection-m
 import { FilterBlockType } from '../../../filter-provider/utils';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useSchemaTemplate } from '../../../schema-templates';
-import { useDesignable } from '../../hooks';
+import { useCompile, useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
 import { FixedBlockDesignerItem } from '../page';
 import { FilterDynamicComponent } from './FilterDynamicComponent';
@@ -24,6 +24,7 @@ export const TableBlockDesigner = () => {
   const { service } = useTableBlockContext();
   const { t } = useTranslation();
   const { dn } = useDesignable();
+  const compile = useCompile();
   const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
   const defaultSort = fieldSchema?.['x-decorator-props']?.params?.sort || [];
   const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
@@ -43,6 +44,45 @@ export const TableBlockDesigner = () => {
   const collection = useCollection();
   const { dragSort, resource } = field.decoratorProps;
   const treeChildren = resource?.includes('.') ? getCollectionField(resource)?.treeChildren : !!collection?.tree;
+  const dataScopeSchema = useMemo(() => {
+    return {
+      type: 'object',
+      title: t('Set the data scope'),
+      properties: {
+        filter: {
+          default: defaultFilter,
+          // title: '数据范围',
+          enum: compile(dataSource),
+          'x-component': 'Filter',
+          'x-component-props': {
+            dynamicComponent: (props) => FilterDynamicComponent({ ...props }),
+          },
+        },
+      },
+    } as ISchema;
+  }, [dataSource, defaultFilter]);
+  const onDataScopeSubmit = useCallback(
+    ({ filter }) => {
+      filter = removeNullCondition(filter);
+      const params = field.decoratorProps.params || {};
+      params.filter = filter;
+      field.decoratorProps.params = params;
+      fieldSchema['x-decorator-props']['params'] = params;
+      const filters = service.params?.[1]?.filters || {};
+      service.run(
+        { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
+        { filters },
+      );
+      dn.emit('patch', {
+        schema: {
+          ['x-uid']: fieldSchema['x-uid'],
+          'x-decorator-props': fieldSchema['x-decorator-props'],
+        },
+      });
+    },
+    [field],
+  );
+
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       <SchemaSettings.BlockTitleItem />
@@ -84,44 +124,7 @@ export const TableBlockDesigner = () => {
         />
       )}
       <FixedBlockDesignerItem />
-      <SchemaSettings.ModalItem
+      <SchemaSettings.ModalItem title={t('Set the data scope')} schema={dataScopeSchema} onSubmit={onDataScopeSubmit} />
-        title={t('Set the data scope')}
-        schema={
-          {
-            type: 'object',
-            title: t('Set the data scope'),
-            properties: {
-              filter: {
-                default: defaultFilter,
-                // title: '数据范围',
-                enum: dataSource,
-                'x-component': 'Filter',
-                'x-component-props': {
-                  dynamicComponent: (props) => FilterDynamicComponent({ ...props }),
-                },
-              },
-            },
-          } as ISchema
-        }
-        onSubmit={({ filter }) => {
-          filter = removeNullCondition(filter);
-          const params = field.decoratorProps.params || {};
-          params.filter = filter;
-          field.decoratorProps.params = params;
-          fieldSchema['x-decorator-props']['params'] = params;
-          const filters = service.params?.[1]?.filters || {};
-          service.run(
-            { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
-            { filters },
-          );
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': fieldSchema['x-decorator-props'],
-            },
-          });
-        }}
-      />
       {!dragSort && (
         <SchemaSettings.ModalItem
           title={t('Set default sorting rules')}

packages/core/client/src/schema-component/antd/table-v2/hooks/useUserVariable.ts

@@ -1,74 +0,0 @@
-import { CollectionFieldOptions } from '../../../../collection-manager';
-import { useFilterOptions } from '../../filter';
-
-interface Operator {
-  label: string;
-  value: string;
-}
-
-interface GetOptionsParams {
-  schema: any;
-  operator: Operator;
-  maxDepth: number;
-  count?: number;
-}
-
-const isOperatorSupportMultiRelation = (operator: Operator) => {
-  if (!operator) return false;
-  return ['$eq', '$ne'].includes(operator.value);
-};
-
-const isSingleRelationField = (field: CollectionFieldOptions) => {
-  if (!field) return false;
-  return field.type === 'belongsTo' || field.type === 'hasOne';
-};
-
-export const useOptions = (collectionName: string, { schema, operator, maxDepth, count = 1 }: GetOptionsParams) => {
-  if (count > maxDepth) {
-    return [];
-  }
-
-  const result = useFilterOptions(collectionName).map((option) => {
-    if (!option.target) {
-      return {
-        key: option.name,
-        value: option.name,
-        label: option.title,
-        // TODO: 现在是通过组件的名称来过滤能够被选择的选项，这样的坏处是不够精确，后续可以优化
-        disabled: schema?.['x-component'] !== option.schema?.['x-component'],
-      };
-    }
-
-    const children =
-      useOptions(option.target, {
-        schema,
-        operator,
-        maxDepth,
-        count: count + 1,
-      }) || [];
-
-    return {
-      key: option.name,
-      value: option.name,
-      label: option.title,
-      children,
-      disabled:
-        (!isSingleRelationField(option) && !isOperatorSupportMultiRelation(operator)) ||
-        children.every((child) => child.disabled),
-    };
-  });
-
-  return result;
-};
-
-export const useUserVariable = ({ schema, operator }) => {
-  const options = useOptions('users', { schema, operator, maxDepth: 3 }) || [];
-
-  return {
-    label: `{{t("Current user")}}`,
-    value: '$user',
-    key: '$user',
-    disabled: options.every((option) => option.disabled),
-    children: options,
-  };
-};

packages/core/client/src/schema-component/antd/variable/Input.tsx

@@ -3,11 +3,14 @@ import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
 import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Tag } from 'antd';
 import moment from 'moment';
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { error } from '@nocobase/utils/client';
 import classNames from 'classnames';
+import { useMemo } from 'react';
 import { useCompile } from '../..';
+import { Option } from '../../../schema-settings/VariableInput/type';
 import { XButton } from './XButton';
 
 const JT_VALUE_RE = /^\s*{{\s*([^{}]+)\s*}}\s*$/;
@@ -120,13 +123,24 @@ export function Input(props) {
   const form = useForm();
 
   const { value = '', scope, onChange, children, button, useTypedConstant, style, className } = props;
-  const parsed = parseValue(value);
+  const parsed = useMemo(() => parseValue(value), [value]);
   const isConstant = typeof parsed === 'string';
   const type = isConstant ? parsed : '';
   const variable = isConstant ? null : parsed;
-  const variableOptions = typeof scope === 'function' ? scope() : scope ?? [];
+  const variableOptions = useMemo(() => (typeof scope === 'function' ? scope() : scope ?? []), [scope]);
+  const [variableText, setVariableText] = React.useState('');
 
-  const { component: ConstantComponent, ...constantOption }: VariableOptions & { component?: React.FC<any> } = children
+  const loadData = async (selectedOptions: Option[]) => {
+    const option = selectedOptions[selectedOptions.length - 1];
+    if (option.loadChildren) {
+      // 需要保证 selectedOptions 是一个响应式对象，这样才能触发重新渲染
+      await option.loadChildren(option);
+    }
+  };
+
+  const { component: ConstantComponent, ...constantOption }: VariableOptions & { component?: React.FC<any> } =
+    useMemo(() => {
+      return children
         ? {
             value: '',
             label: '{{t("Constant")}}',
@@ -138,9 +152,15 @@ export function Input(props) {
             label: '{{t("Null")}}',
             component: ConstantTypes.null.component,
           };
-  const options: VariableOptions[] = compile([constantOption, ...variableOptions]);
+    }, [type, useTypedConstant]);
 
-  function onSwitch(next) {
+  const options: VariableOptions[] = useMemo(
+    () => compile([constantOption, ...variableOptions]),
+    [constantOption, variableOptions],
+  );
+
+  const onSwitch = useCallback(
+    (next) => {
       if (next[0] === '') {
         if (next[1]) {
           if (next[1] !== type) {
@@ -154,15 +174,40 @@ export function Input(props) {
         return;
       }
       onChange(`{{${next.join('.')}}}`);
-  }
+    },
+    [type, variable],
+  );
 
-  const variableText = variable
+  useEffect(() => {
-    ?.reduce((opts, key, i) => {
+    const run = async () => {
-      const option = (i ? (opts[i - 1] as VariableOptions)?.children : options)?.find((item) => item.value === key);
+      if (!variable) {
-      return option ? opts.concat(option) : opts;
+        return;
-    }, [] as VariableOptions[])
+      }
-    .map((item) => item.label)
+      let prevOption: Option = null;
-    .join(' / ');
+      const labels = [];
+
+      for (let i = 0; i < variable.length; i++) {
+        const key = variable[i];
+        try {
+          if (i === 0) {
+            prevOption = options.find((item) => item.value === key);
+          } else {
+            if (prevOption.children?.length === 0 && prevOption.loadChildren) {
+              await prevOption.loadChildren(prevOption);
+            }
+            prevOption = prevOption.children.find((item) => item.value === key);
+          }
+          labels.push(prevOption.label);
+          setVariableText(labels.join(' / '));
+        } catch (err) {
+          error(err);
+        }
+      }
+    };
+
+    // 弹窗动画的延迟时间是 300 毫秒，动画结束之后再执行，防止动画卡顿
+    setTimeout(run, 300);
+  }, [variable]);
 
   const disabled = props.disabled || form.disabled;
 
@@ -257,6 +302,7 @@ export function Input(props) {
           options={options}
           value={variable ?? ['', ...(children || !constantOption.children?.length ? [] : [type])]}
           onChange={onSwitch}
+          loadData={loadData as any}
           changeOnSelect
         >
           {button ?? <XButton type={variable ? 'primary' : 'default'} />}

packages/core/client/src/schema-settings/VariableInput/VariableInput.tsx

@@ -17,7 +17,7 @@ type Props = {
 export const VariableInput = (props: Props) => {
   const { value, onChange, renderSchemaComponent: RenderSchemaComponent, style, schema, className } = props;
   const compile = useCompile();
-  const userVariable = useUserVariable({ schema, level: 1 });
+  const userVariable = useUserVariable({ schema, maxDepth: 1 });
   const scope = useMemo(() => {
     return [
       userVariable,

packages/core/client/src/schema-settings/VariableInput/hooks/useUserVariable.ts

@@ -1,20 +1,19 @@
+import { observable } from '@formily/reactive';
+import { error } from '@nocobase/utils/client';
 import { useMemo } from 'react';
 import { useCompile, useGetFilterOptions } from '../../../schema-component';
+import { FieldOption, Option } from '../type';
 
 interface GetOptionsParams {
   schema: any;
-  operator?: string;
+  depth: number;
-  maxDepth: number;
+  maxDepth?: number;
-  count?: number;
+  loadChildren?: (option: Option) => Promise<void>;
-  getFilterOptions: (collectionName: string) => any[];
 }
 
-const getChildren = (options: any[], { schema, operator, maxDepth, count = 1, getFilterOptions }: GetOptionsParams) => {
+const getChildren = (options: FieldOption[], { schema, depth, maxDepth, loadChildren }: GetOptionsParams): Option[] => {
-  if (count > maxDepth) {
+  const result = options
-    return [];
+    .map((option): Option => {
-  }
-
-  const result = options.map((option) => {
       if (!option.target) {
         return {
           key: option.name,
@@ -22,46 +21,77 @@ const getChildren = (options: any[], { schema, operator, maxDepth, count = 1, ge
           label: option.title,
           // TODO: 现在是通过组件的名称来过滤能够被选择的选项，这样的坏处是不够精确，后续可以优化
           disabled: schema?.['x-component'] !== option.schema?.['x-component'],
+          isLeaf: true,
+          depth,
         };
       }
 
-    const children =
+      if (depth >= maxDepth) {
-      getChildren(getFilterOptions(option.target), {
+        return null;
-        schema,
+      }
-        operator,
-        maxDepth,
-        count: count + 1,
-        getFilterOptions,
-      }) || [];
 
       return {
         key: option.name,
         value: option.name,
         label: option.title,
-      children,
+        children: [],
-      disabled: children.every((child) => child.disabled),
+        isLeaf: false,
+        field: option,
+        depth,
+        loadChildren,
       };
-  });
+    })
+    .filter(Boolean);
 
   return result;
 };
 
-export const useUserVariable = ({ operator, schema, level }: { operator?: any; schema: any; level?: number }) => {
+export const useUserVariable = ({ schema, maxDepth = 3 }: { schema: any; maxDepth?: number }) => {
   const compile = useCompile();
   const getFilterOptions = useGetFilterOptions();
 
-  const children = useMemo(
+  const loadChildren = (option: Option): Promise<void> => {
-    () => getChildren(getFilterOptions('users'), { schema, operator, maxDepth: level || 3, getFilterOptions }) || [],
+    if (!option.field?.target) {
-    [operator, schema],
+      return new Promise((resolve) => {
-  );
+        error('Must be set field target');
+        resolve(void 0);
+      });
+    }
 
-  return useMemo(() => {
+    const collectionName = option.field.target;
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const children =
+          getChildren(getFilterOptions(collectionName), {
+            schema,
+            depth: option.depth + 1,
+            maxDepth,
+            loadChildren,
+          }) || [];
+
+        option.children = compile(children);
+        resolve(void 0);
+
+        // 延迟 5 毫秒，防止阻塞主线程，导致 UI 卡顿
+      }, 5);
+    });
+  };
+
+  const result = useMemo(() => {
     return compile({
       label: `{{t("Current user")}}`,
       value: '$user',
       key: '$user',
-      disabled: children.every((option) => option.disabled),
+      children: [],
-      children: children,
+      isLeaf: false,
-    });
+      field: {
-  }, [children]);
+        target: 'users',
+      },
+      depth: 0,
+      loadChildren,
+    } as Option);
+  }, [schema]);
+
+  // 必须使用 observable 包一下，使其变成响应式对象，不然 children 加载后不会更新 UI
+  return observable(result);
 };

packages/core/client/src/schema-settings/VariableInput/hooks/useVariableOptions.ts

@@ -4,7 +4,7 @@ import { useUserVariable } from './useUserVariable';
 
 export const useVariableOptions = () => {
   const { operator, schema } = useValues();
-  const userVariable = useUserVariable({ operator, schema });
+  const userVariable = useUserVariable({ maxDepth: 3, schema });
   const dateVariable = useDateVariable({ operator, schema });
 
   if (!operator || !schema) return [];

packages/core/client/src/schema-settings/VariableInput/type.ts

@@ -0,0 +1,31 @@
+import { Schema } from '@formily/react';
+
+export interface Option {
+  key?: string | number;
+  value?: string | number;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  children?: Option[];
+  // 标记是否为叶子节点，设置了 `loadData` 时有效
+  // 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标
+  isLeaf?: boolean;
+  /** 当开启异步加载时有效，用于加载当前 node 的 children */
+  loadChildren?(option: Option): Promise<void>;
+  field?: FieldOption;
+  depth?: number;
+}
+
+export interface FieldOption {
+  name?: string;
+  type?: string;
+  target?: string;
+  title?: string;
+  schema?: Schema;
+  operators?: Operator[];
+  children?: FieldOption[];
+}
+
+interface Operator {
+  label: string;
+  value: string;
+}