@nocobase/plugin-ui-templates 2.0.0-alpha.57

package/src/client/schemas/flowModelTemplates.ts

@@ -0,0 +1,264 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ISchema } from '@nocobase/client';
+import { uid } from '@nocobase/utils/client';
+import { flowModelTemplatesCollection } from '../collections/flowModelTemplates';
+import { tStr } from '../locale';
+
+export const flowModelTemplateEditActionSchema: ISchema = {
+  type: 'void',
+  title: tStr('Edit'),
+  'x-component': 'Action.Link',
+  'x-component-props': {
+    openMode: 'drawer',
+  },
+  properties: {
+    drawer: {
+      type: 'void',
+      title: tStr('Edit template'),
+      'x-component': 'Action.Drawer',
+      'x-decorator': 'FormV2',
+      'x-use-decorator-props': 'useFlowModelTemplateEditFormProps',
+      properties: {
+        name: {
+          type: 'string',
+          title: tStr('Template name'),
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+          required: true,
+        },
+        description: {
+          type: 'string',
+          title: tStr('Template description'),
+          'x-decorator': 'FormItem',
+          'x-component': 'Input.TextArea',
+          'x-component-props': {
+            rows: 4,
+          },
+        },
+        footer: {
+          type: 'void',
+          'x-component': 'Action.Drawer.Footer',
+          properties: {
+            cancel: {
+              title: '{{t("Cancel")}}',
+              'x-component': 'Action',
+              'x-component-props': {
+                useAction: '{{ cm.useCancelAction }}',
+              },
+            },
+            submit: {
+              title: '{{t("Submit")}}',
+              'x-component': 'Action',
+              'x-use-component-props': 'useFlowModelTemplateEditActionProps',
+              'x-component-props': {
+                type: 'primary',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const createFlowModelTemplatesSchema = (filter?: Record<string, any>): ISchema => ({
+  type: 'void',
+  name: uid(),
+  'x-component': 'CardItem',
+  'x-decorator': 'TableBlockProvider',
+  'x-decorator-props': {
+    collection: flowModelTemplatesCollection.name,
+    action: 'list',
+    params: {
+      sort: '-createdAt',
+      pageSize: 50,
+      ...(filter ? { filter } : {}),
+    },
+    showIndex: true,
+    rowKey: flowModelTemplatesCollection.filterTargetKey,
+  },
+  properties: {
+    actions: {
+      type: 'void',
+      'x-component': 'ActionBar',
+      'x-component-props': {
+        style: {
+          marginBottom: 16,
+        },
+      },
+      properties: {
+        filter: {
+          type: 'void',
+          title: '{{ t("Filter") }}',
+          default: {
+            $and: [{ name: { $includes: '' } }],
+          },
+          'x-action': 'filter',
+          'x-component': 'Filter.Action',
+          'x-use-component-props': 'useFilterActionProps',
+          'x-component-props': {
+            icon: 'FilterOutlined',
+          },
+          'x-align': 'left',
+        },
+        search: {
+          type: 'void',
+          'x-component': 'Input.Search',
+          'x-component-props': {
+            allowClear: true,
+          },
+          'x-use-component-props': 'useFlowModelTemplateSearchProps',
+          'x-align': 'left',
+        },
+        refresh: {
+          type: 'void',
+          title: '{{ t("Refresh") }}',
+          'x-component': 'Action',
+          'x-use-component-props': 'useRefreshActionProps',
+          'x-component-props': {
+            icon: 'ReloadOutlined',
+          },
+          'x-align': 'right',
+        },
+      },
+    },
+    table: {
+      type: 'array',
+      'x-component': 'TableV2',
+      'x-use-component-props': 'useTableBlockProps',
+      'x-component-props': {
+        rowKey: flowModelTemplatesCollection.filterTargetKey,
+        pagination: {
+          pageSize: 50,
+        },
+      },
+      properties: {
+        name: {
+          type: 'void',
+          title: tStr('Template name'),
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 200,
+          },
+          properties: {
+            name: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-pattern': 'readPretty',
+              'x-component-props': {
+                ellipsis: true,
+              },
+            },
+          },
+        },
+        description: {
+          type: 'void',
+          title: tStr('Template description'),
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 240,
+          },
+          properties: {
+            description: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-pattern': 'readPretty',
+              'x-component-props': {
+                ellipsis: true,
+              },
+            },
+          },
+        },
+        dataSourceKey: {
+          type: 'void',
+          title: 'Data source',
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 140,
+          },
+          properties: {
+            dataSourceKey: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-pattern': 'readPretty',
+              'x-component-props': {
+                ellipsis: true,
+              },
+            },
+          },
+        },
+        collectionName: {
+          type: 'void',
+          title: 'Collection',
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 160,
+          },
+          properties: {
+            collectionName: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-pattern': 'readPretty',
+              'x-component-props': {
+                ellipsis: true,
+              },
+            },
+          },
+        },
+        usageCount: {
+          type: 'void',
+          title: tStr('Usage count'),
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 120,
+          },
+          properties: {
+            usageCount: {
+              type: 'number',
+              'x-component': 'CollectionField',
+              'x-pattern': 'readPretty',
+            },
+          },
+        },
+        actions: {
+          type: 'void',
+          title: tStr('Actions'),
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 160,
+            align: 'left',
+          },
+          properties: {
+            actions: {
+              type: 'void',
+              'x-component': 'Space',
+              'x-component-props': {
+                split: '|',
+              },
+              properties: {
+                edit: flowModelTemplateEditActionSchema,
+                delete: {
+                  type: 'void',
+                  title: tStr('Delete'),
+                  'x-component': 'Action.Link',
+                  'x-use-component-props': 'useFlowModelTemplateDeleteActionProps',
+                  'x-component-props': {
+                    danger: true,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+});

package/src/client/subModelMenuExtensions.ts

@@ -0,0 +1,103 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { FlowEngine, FlowModel, FlowModelContext } from '@nocobase/flow-engine';
+import { NAMESPACE } from './locale';
+import { findRefHostInfoFromAncestors } from './utils/refHost';
+
+function findFormModel(model: FlowModel): FlowModel | undefined {
+  let cur: FlowModel | undefined = model;
+  let depth = 0;
+  while (cur && depth < 6) {
+    const use = cur?.use;
+    if (use === 'CreateFormModel' || use === 'EditFormModel') return cur;
+    cur = cur?.parent as FlowModel | undefined;
+    depth++;
+  }
+  return undefined;
+}
+
+function isFormInsideReferenceBlock(formModel: FlowModel | undefined): boolean {
+  if (!formModel) return false;
+  // 检查表单的 parent 是否是 ReferenceBlockModel
+  const parent = formModel?.parent as FlowModel | undefined;
+  return parent?.use === 'ReferenceBlockModel';
+}
+
+export function registerSubModelMenuExtensions(engine: FlowEngine) {
+  type ModelClass = typeof FlowModel & {
+    __subModelTemplateMenuPatched?: boolean;
+    defineChildren?: (ctx: FlowModelContext) => any;
+  };
+  const FormCustomItemModel = engine.getModelClass?.('FormCustomItemModel') as ModelClass | undefined;
+  if (!FormCustomItemModel || FormCustomItemModel.__subModelTemplateMenuPatched) return;
+  FormCustomItemModel.__subModelTemplateMenuPatched = true;
+
+  const originalDefineChildren = FormCustomItemModel.defineChildren;
+
+  FormCustomItemModel.defineChildren = async function patchedDefineChildren(ctx: FlowModelContext) {
+    const raw = originalDefineChildren ? await originalDefineChildren.call(this, ctx) : [];
+    const children = Array.isArray(raw) ? raw : [];
+
+    const label = ctx.t?.('Field template', { ns: [NAMESPACE, 'client'], nsMode: 'fallback' }) || 'Field template';
+    const formModel = findFormModel(ctx.model);
+    const parentUse = formModel?.use || ctx.model.parent?.use;
+    const expectedRootUse =
+      parentUse === 'CreateFormModel' || parentUse === 'EditFormModel'
+        ? ['CreateFormModel', 'EditFormModel']
+        : parentUse;
+    const resourceInit = formModel?.getStepParams?.('resourceSettings', 'init') || {};
+    const expectedDataSourceKey =
+      typeof resourceInit?.dataSourceKey === 'string' ? resourceInit.dataSourceKey : undefined;
+    const expectedCollectionName =
+      typeof resourceInit?.collectionName === 'string' ? resourceInit.collectionName : undefined;
+
+    const fromTemplateItem = {
+      key: '__fromTemplate__',
+      label,
+      sort: -999,
+      hide: async (innerCtx: FlowModelContext) => {
+        // 1) 若处于"字段模板引用"内部（当前正在渲染模板 grid），直接隐藏，避免误清空模板侧字段
+        const hostInfo = findRefHostInfoFromAncestors(innerCtx.model);
+        const hostRef = hostInfo?.ref;
+        if (hostRef && hostRef.mountSubKey === 'grid' && hostRef.mode !== 'copy') {
+          return true;
+        }
+
+        // 2) 若当前表单是 ReferenceBlockModel 渲染的 target，隐藏 "From template"
+        // 因为在 ReferenceBlockModel 内部编辑字段会直接影响被引用的模板
+        const fm = findFormModel(innerCtx.model);
+        if (isFormInsideReferenceBlock(fm)) {
+          return true;
+        }
+
+        // 3) 常规：当前表单区块已经使用引用 grid（字段模板），隐藏 "From template"
+        const mountTarget = fm || (innerCtx.model.parent as FlowModel | undefined);
+        if (!mountTarget) return false;
+        const grid = (mountTarget?.subModels as any)?.grid;
+        const isReferenceGrid = !!grid && String(grid?.use || '') === 'ReferenceFormGridModel';
+        return isReferenceGrid;
+      },
+      createModelOptions: () => ({
+        use: 'SubModelTemplateImporterModel',
+        props: {
+          // 表单字段的复用以 grid 为单位引入，保留模板里的布局
+          defaultSourcePath: 'subModels.grid',
+          defaultMountSubKey: 'grid',
+          mountToParentLevel: 1,
+          expectedRootUse,
+          expectedDataSourceKey,
+          expectedCollectionName,
+        },
+      }),
+    };
+
+    return [fromTemplateItem, ...children].filter(Boolean);
+  };
+}

package/src/client/utils/infiniteSelect.ts

@@ -0,0 +1,150 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import debounce from 'lodash/debounce';
+import { TEMPLATE_LIST_PAGE_SIZE } from './templateCompatibility';
+
+export type PaginatedOptionsResult<T = any> = { options: T[]; hasMore: boolean };
+
+export const defaultSelectOptionComparator = (a: any, b: any) => {
+  const da = a?.disabled ? 1 : 0;
+  const db = b?.disabled ? 1 : 0;
+  if (da !== db) return da - db;
+  return (a?.__idx ?? 0) - (b?.__idx ?? 0);
+};
+
+export function mergeSelectOptions(
+  prev: any[],
+  next: any[],
+  options?: { getKey?: (item: any) => string; comparator?: (a: any, b: any) => number },
+) {
+  const getKey = options?.getKey || ((item: any) => String(item?.value || ''));
+  const comparator = options?.comparator || defaultSelectOptionComparator;
+
+  const map = new Map<string, any>();
+  for (const item of Array.isArray(prev) ? prev : []) {
+    const key = getKey(item);
+    if (!key) continue;
+    map.set(key, item);
+  }
+  for (const item of Array.isArray(next) ? next : []) {
+    const key = getKey(item);
+    if (!key) continue;
+    const existing = map.get(key);
+    map.set(key, existing ? { ...existing, ...item } : item);
+  }
+
+  const merged = Array.from(map.values());
+  merged.sort(comparator);
+  return merged;
+}
+
+export function bindInfiniteScrollToFormilySelect(
+  field: any,
+  fetchPage: (keyword: string, page: number, pageSize: number) => Promise<PaginatedOptionsResult<any>>,
+  options?: {
+    pageSize?: number;
+    debounceMs?: number;
+    scrollThreshold?: number;
+    composingKey?: string;
+    comparator?: (a: any, b: any) => number;
+  },
+) {
+  const pageSize = Math.max(1, Number(options?.pageSize || TEMPLATE_LIST_PAGE_SIZE));
+  const debounceMs = Math.max(0, Number(options?.debounceMs ?? 300));
+  const scrollThreshold = Math.max(0, Number(options?.scrollThreshold ?? 24));
+  const composingKey = String(options?.composingKey || '__templateComposing');
+  const comparator = options?.comparator || defaultSelectOptionComparator;
+
+  let requestVersion = 0;
+  let currentKeyword = '';
+  let currentPage = 0;
+  let currentHasMore = true;
+  let loadingMore = false;
+
+  const setComposing = (v: boolean) => {
+    try {
+      field.data = { ...(field.data || {}), [composingKey]: v };
+    } catch {
+      // ignore
+    }
+  };
+
+  const isComposing = () => !!field.data?.[composingKey];
+
+  const resetAndLoad = async (keyword: string) => {
+    const nextVersion = (requestVersion || 0) + 1;
+    requestVersion = nextVersion;
+    currentKeyword = keyword;
+    currentPage = 0;
+    currentHasMore = true;
+    loadingMore = false;
+    field.loading = true;
+    try {
+      const { options: optionList, hasMore } = await fetchPage(keyword, 1, pageSize);
+      if (requestVersion !== nextVersion) return;
+      field.dataSource = mergeSelectOptions([], optionList, { comparator });
+      currentPage = 1;
+      currentHasMore = !!hasMore;
+    } finally {
+      if (requestVersion === nextVersion) {
+        field.loading = false;
+      }
+    }
+  };
+
+  const loadMore = async () => {
+    if (!currentHasMore || loadingMore) return;
+    const version = requestVersion;
+    const nextPage = Math.max(1, currentPage || 1) + 1;
+    loadingMore = true;
+    field.loading = true;
+    try {
+      const { options: optionList, hasMore } = await fetchPage(currentKeyword, nextPage, pageSize);
+      if (requestVersion !== version) return;
+      field.dataSource = mergeSelectOptions(field.dataSource || [], optionList, { comparator });
+      currentPage = nextPage;
+      currentHasMore = !!hasMore;
+    } finally {
+      loadingMore = false;
+      if (requestVersion === version) {
+        field.loading = false;
+      }
+    }
+  };
+
+  field.componentProps.onDropdownVisibleChange = async (open: boolean) => {
+    if (!open) return;
+    await resetAndLoad('');
+  };
+
+  const debouncedSearch = debounce(async (kw: string) => resetAndLoad(kw), debounceMs);
+
+  field.componentProps.onSearch = (value: string) => {
+    if (isComposing()) return;
+    const keyword = typeof value === 'string' ? value.trim() : '';
+    debouncedSearch(keyword);
+  };
+
+  field.componentProps.onCompositionStart = () => setComposing(true);
+  field.componentProps.onCompositionEnd = (e: any) => {
+    setComposing(false);
+    const keyword = typeof e?.target?.value === 'string' ? e.target.value.trim() : '';
+    debouncedSearch(keyword);
+  };
+
+  field.componentProps.onPopupScroll = (e: any) => {
+    const target = e?.target as HTMLElement | undefined;
+    if (!target) return;
+    if (target.scrollTop + target.clientHeight < target.scrollHeight - scrollThreshold) return;
+    loadMore();
+  };
+
+  return { resetAndLoad, loadMore, cancelSearch: () => debouncedSearch.cancel() };
+}

package/src/client/utils/refHost.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { FlowModel } from '@nocobase/flow-engine';
+import { REF_HOST_CTX_KEY } from '../constants';
+
+export type RefHostInfo = {
+  ref?: {
+    mountSubKey?: unknown;
+    mode?: unknown;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+};
+
+export function findRefHostInfoFromAncestors(
+  model: FlowModel,
+  options?: { maxDepth?: number },
+): RefHostInfo | undefined {
+  const maxDepth = options?.maxDepth ?? 8;
+  let cur: FlowModel | undefined = model;
+  let depth = 0;
+  while (cur && depth < maxDepth) {
+    try {
+      const ctx = cur.context as unknown as Record<string, unknown>;
+      // 只读取自身 context 上定义的 host 信息，避免从 delegate 链“误捡到”其他 view/弹窗的标记
+      if (ctx && Object.prototype.hasOwnProperty.call(ctx, REF_HOST_CTX_KEY)) {
+        const v = ctx[REF_HOST_CTX_KEY] as RefHostInfo | undefined;
+        if (v) return v;
+      }
+    } catch {
+      // ignore
+    }
+    cur = cur.parent as FlowModel | undefined;
+    depth++;
+  }
+  return undefined;
+}