@nocobase/client-v2 2.1.0-alpha.46 → 2.1.0-alpha.47

package/src/flow/internal/utils/operatorSchemaHelper.ts

@@ -7,24 +7,131 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React, { type ComponentType, type CSSProperties, type ReactNode } from 'react';
 import { DateFilterDynamicComponent } from '../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent';
 
+type OperatorMeta = {
+  value?: string;
+  schema?: {
+    'x-component'?: string;
+    'x-component-props'?: Record<string, unknown>;
+  };
+};
+
+type ComponentRegistry = {
+  getComponent?: (name: string) => ComponentType<Record<string, unknown>> | undefined;
+};
+
+type OperatorComponentFieldModel = {
+  props?: Record<string, unknown>;
+  render?: () => ReactNode;
+  __originalRender?: () => ReactNode;
+};
+
+type OperatorComponentRenderOptions = {
+  app?: ComponentRegistry;
+  fieldModel: unknown;
+  operator: string;
+  operators?: OperatorMeta[];
+  propsPriority?: 'field' | 'operator';
+  style?: CSSProperties;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function pickOperatorStyle(value: unknown): CSSProperties | undefined {
+  return isRecord(value) ? (value as CSSProperties) : undefined;
+}
+
+function getFieldModel(fieldModel: unknown) {
+  return fieldModel as OperatorComponentFieldModel & {
+    _reactiveWrapperCache?: unknown;
+    setupReactiveRender?: () => void;
+  };
+}
+
+function rewrapReactiveRender(fieldModel: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  mutableFieldModel._reactiveWrapperCache = undefined;
+  mutableFieldModel.setupReactiveRender?.();
+}
+
 /**
  * 根据操作符的 schema 定位组件及其 props。
  */
-export function resolveOperatorComponent(app: any, operator: string, operators?: Array<any>) {
+export function resolveOperatorComponent(
+  app: ComponentRegistry | undefined,
+  operator: string,
+  operators?: OperatorMeta[],
+) {
   if (!operators || !Array.isArray(operators)) return null;
   const op = operators.find((item) => item?.value === operator);
   const schema = op?.schema;
   const xComp = schema?.['x-component'];
   if (!xComp) return null;
-  let Comp;
+  let Comp: ComponentType<Record<string, unknown>> | undefined;
   if (xComp === 'DateFilterDynamicComponent') {
-    Comp = DateFilterDynamicComponent;
+    Comp = DateFilterDynamicComponent as ComponentType<Record<string, unknown>>;
   } else {
-    Comp = app?.getComponent?.(xComp as any);
+    Comp = app?.getComponent?.(xComp);
   }
   if (!Comp) return null;
-  const props = (schema?.['x-component-props'] as Record<string, any>) || {};
+  const props = isRecord(schema?.['x-component-props']) ? schema['x-component-props'] : {};
   return { Comp, props };
 }
+
+export function restoreOperatorComponentRender(fieldModel?: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  if (!mutableFieldModel || typeof mutableFieldModel.__originalRender !== 'function') {
+    return false;
+  }
+
+  mutableFieldModel.render = mutableFieldModel.__originalRender;
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}
+
+export function applyOperatorComponentRender({
+  app,
+  fieldModel,
+  operator,
+  operators,
+  propsPriority = 'field',
+  style,
+}: OperatorComponentRenderOptions) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  const resolved = resolveOperatorComponent(app, operator, operators);
+  if (!resolved) {
+    restoreOperatorComponentRender(mutableFieldModel);
+    return false;
+  }
+
+  if (!mutableFieldModel.__originalRender && typeof mutableFieldModel.render === 'function') {
+    mutableFieldModel.__originalRender = mutableFieldModel.render;
+  }
+
+  const { Comp, props: operatorProps } = resolved;
+  const operatorStyle = pickOperatorStyle(operatorProps.style);
+
+  mutableFieldModel.render = () => {
+    const fieldProps = mutableFieldModel.props || {};
+    const fieldStyle = pickOperatorStyle(fieldProps.style);
+    const componentProps =
+      propsPriority === 'operator' ? { ...fieldProps, ...operatorProps } : { ...operatorProps, ...fieldProps };
+    const componentStyle =
+      propsPriority === 'operator' ? { ...fieldStyle, ...operatorStyle } : { ...operatorStyle, ...fieldStyle };
+    const mergedStyle = { ...(style || {}), ...componentStyle };
+
+    return React.createElement(Comp, {
+      ...componentProps,
+      ...(Object.keys(mergedStyle).length > 0 ? { style: mergedStyle } : {}),
+      onCompositionStart: null,
+      onCompositionEnd: null,
+    });
+  };
+
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}

package/src/flow/models/blocks/filter-form/FilterFormItemModel.tsx

@@ -22,7 +22,12 @@ import { CollectionBlockModel, FieldModel } from '../../base';
 import { RecordSelectFieldModel } from '../../fields/AssociationFieldModel/RecordSelectFieldModel';
 import { normalizeAssociationFieldNames } from '../../fields/AssociationFieldModel/recordSelectShared';
 import { FilterManager } from '../filter-manager';
-import { getAllDataModels, getDefaultOperator, isFilterValueEmpty } from '../filter-manager/utils';
+import {
+  getAllDataModels,
+  getDefaultOperator,
+  getFilterFormOperatorMeta,
+  isFilterValueEmpty,
+} from '../filter-manager/utils';
 import { FilterFormFieldModel } from './fields';
 import { normalizeFilterValueByOperator } from './valueNormalization';
 
@@ -53,6 +58,10 @@ const getTargetFilterableFields = (field: any, collection?: Collection, model?:
 
 const MAX_ASSOCIATION_DEPTH = 2;
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
 const normalizeAssociationDefaultFilterValue = (value: any, fieldModel: any) => {
   const collectionField = fieldModel?.context?.collectionField;
   if (!collectionField?.isAssociationField?.()) {
@@ -449,15 +458,7 @@ export class FilterFormItemModel extends FilterableItemModel<{
 
   private getCurrentOperatorMeta() {
     const operator = getDefaultOperator(this);
-    if (!operator) return null;
-
-    const operatorList = this.collectionField?.filterable?.operators;
-
-    if (!Array.isArray(operatorList)) {
-      return null;
-    }
-
-    return operatorList.find((op) => op.value === operator) || null;
+    return getFilterFormOperatorMeta(this, operator);
   }
 
   onInit(options: any) {
@@ -530,7 +531,8 @@ export class FilterFormItemModel extends FilterableItemModel<{
     rawValue = this.normalizeAssociationFilterValue(rawValue, fieldModel);
     const operatorMeta = this.getCurrentOperatorMeta();
     if (operatorMeta?.noValue) {
-      const options = operatorMeta?.schema?.['x-component-props']?.options;
+      const componentProps = operatorMeta?.schema?.['x-component-props'];
+      const options = isRecord(componentProps) ? componentProps.options : undefined;
       if (Array.isArray(options)) {
         return rawValue;
       }

package/src/flow/models/blocks/filter-manager/__tests__/getDefaultOperator.test.ts

@@ -9,7 +9,7 @@
 
 import { describe, expect, it, vi } from 'vitest';
 
-import { getDefaultOperator } from '../utils';
+import { getDefaultOperator, getFilterFormOperatorList } from '../utils';
 
 describe('getDefaultOperator', () => {
   it('returns model.operator when it exists', () => {
@@ -66,4 +66,38 @@ describe('getDefaultOperator', () => {
     expect(result).toBe('$includes');
     expect(getStepParams).toHaveBeenCalledWith('filterFormItemSettings', 'defaultOperator');
   });
+
+  it('falls back to field interface operators when field operators are empty', () => {
+    const getStepParams = vi.fn().mockReturnValue(undefined);
+    const model = {
+      getStepParams,
+      subModels: {},
+      collectionField: {
+        interface: 'id',
+        type: 'bigInt',
+        filterable: { operators: [] },
+      },
+      context: {
+        dataSourceManager: {
+          collectionFieldInterfaceManager: {
+            getFieldInterface: vi.fn(() => ({
+              filterable: {
+                operators: [
+                  { label: 'is', value: '$eq', selected: true },
+                  {
+                    label: 'is any of',
+                    value: '$in',
+                    schema: { 'x-component': 'MultipleKeywordsInput' },
+                  },
+                ],
+              },
+            })),
+          },
+        },
+      },
+    } as any;
+
+    expect(getDefaultOperator(model)).toBe('$eq');
+    expect(getFilterFormOperatorList(model).map((item) => item.value)).toEqual(['$eq', '$in']);
+  });
 });

package/src/flow/models/blocks/filter-manager/flow-actions/__tests__/customizeFilterRender.test.tsx

@@ -0,0 +1,148 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { FilterFormItemModel } from '../../../filter-form/FilterFormItemModel';
+import { customizeFilterRender } from '../customizeFilterRender';
+
+type TestFieldModel = {
+  props: Record<string, unknown>;
+  render: () => React.ReactNode;
+  setupReactiveRender: ReturnType<typeof vi.fn>;
+  _reactiveWrapperCache?: unknown;
+  __originalRender?: () => React.ReactNode;
+};
+
+const MultipleKeywordsInput = (props: Record<string, unknown>) => {
+  return <div data-testid="multiple-keywords-input" {...props} />;
+};
+
+function createFieldModel() {
+  return {
+    props: {
+      value: ['1', '2'],
+      placeholder: 'runtime placeholder',
+      onCompositionStart: vi.fn(),
+      onCompositionEnd: vi.fn(),
+    },
+    render: () => <span data-testid="original-field" />,
+    setupReactiveRender: vi.fn(),
+  };
+}
+
+function createFilterItemModel({
+  fieldModel,
+  operator = '$in',
+  collectionField,
+}: {
+  fieldModel: TestFieldModel;
+  operator?: string;
+  collectionField: Record<string, unknown>;
+}) {
+  return {
+    uid: 'filter-item',
+    operator,
+    collectionField,
+    context: {
+      app: {
+        getComponent: (name: string) => (name === 'MultipleKeywordsInput' ? MultipleKeywordsInput : undefined),
+      },
+      collectionField,
+    },
+    subModels: {
+      field: fieldModel,
+    },
+    setProps: vi.fn(),
+  } as unknown as FilterFormItemModel;
+}
+
+describe('customizeFilterRender action', () => {
+  it('uses operator schema components for number filter fields', () => {
+    const fieldModel = createFieldModel();
+    const model = createFilterItemModel({
+      fieldModel,
+      collectionField: {
+        interface: 'number',
+        type: 'integer',
+        filterable: {
+          operators: [
+            { label: 'equals', value: '$eq' },
+            {
+              label: 'is any of',
+              value: '$in',
+              schema: {
+                'x-component': 'MultipleKeywordsInput',
+                'x-component-props': {
+                  fieldInterface: 'number',
+                  placeholder: 'schema placeholder',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    customizeFilterRender.handler?.({ model } as any);
+
+    const element = fieldModel.render();
+    expect(React.isValidElement(element)).toBe(true);
+    expect((element as React.ReactElement).type).toBe(MultipleKeywordsInput);
+    expect((element as React.ReactElement).props.fieldInterface).toBe('number');
+    expect((element as React.ReactElement).props.placeholder).toBe('runtime placeholder');
+    expect((element as React.ReactElement).props.onCompositionStart).toBeNull();
+    expect((element as React.ReactElement).props.onCompositionEnd).toBeNull();
+    expect(fieldModel.setupReactiveRender).toHaveBeenCalled();
+    expect(model.setProps).toHaveBeenCalledWith({ key: 'filter-item-$in' });
+
+    fieldModel.props = {
+      ...fieldModel.props,
+      value: ['3'],
+      placeholder: 'updated runtime placeholder',
+    };
+    const rerenderedElement = fieldModel.render();
+    expect((rerenderedElement as React.ReactElement).props.value).toEqual(['3']);
+    expect((rerenderedElement as React.ReactElement).props.placeholder).toBe('updated runtime placeholder');
+  });
+
+  it('restores original render when switching to an operator without a schema component', () => {
+    const fieldModel = createFieldModel();
+    const originalRender = fieldModel.render;
+    const model = createFilterItemModel({
+      fieldModel,
+      collectionField: {
+        interface: 'number',
+        type: 'integer',
+        filterable: {
+          operators: [
+            { label: 'equals', value: '$eq' },
+            {
+              label: 'is any of',
+              value: '$in',
+              schema: {
+                'x-component': 'MultipleKeywordsInput',
+                'x-component-props': {
+                  fieldInterface: 'number',
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    customizeFilterRender.handler?.({ model } as any);
+    model.operator = '$eq';
+    customizeFilterRender.handler?.({ model } as any);
+
+    expect(fieldModel.render).toBe(originalRender);
+    expect(fieldModel.render()).toEqual(<span data-testid="original-field" />);
+  });
+});

package/src/flow/models/blocks/filter-manager/flow-actions/__tests__/defaultOperator.test.tsx

@@ -9,6 +9,8 @@
 
 import { describe, it, expect, beforeEach } from 'vitest';
 import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { createMockClient, IdFieldInterface, InputFieldInterface } from '@nocobase/client-v2';
+import React from 'react';
 import { defaultOperator } from '../defaultOperator';
 
 function createModel() {
@@ -17,6 +19,12 @@ function createModel() {
   return model;
 }
 
+type OperatorOption = {
+  value: string;
+  label?: unknown;
+  schema?: Record<string, unknown>;
+};
+
 describe('defaultOperator action', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
@@ -55,4 +63,81 @@ describe('defaultOperator action', () => {
     expect(options2.find((o: any) => o.value === '$a')).toBeTruthy();
     expect(options2.find((o: any) => o.value === '$b')).toBeTruthy();
   });
+
+  it('resolves default operator options from field interfaces when collection field metadata is absent', () => {
+    const app = createMockClient();
+    app.addFieldInterfaces([InputFieldInterface]);
+    app.addFieldInterfaceOperator('input', {
+      label: 'plugin in',
+      value: '$in',
+      schema: { 'x-component': 'MultipleKeywordsInput' },
+    });
+    app.addFieldInterfaceOperator('input', {
+      label: 'plugin not in',
+      value: '$notIn',
+      schema: { 'x-component': 'MultipleKeywordsInput' },
+    });
+
+    const model = new FlowModel({ uid: 'm-default-operator-interface', flowEngine: app.flowEngine });
+    model.context.defineProperty('filterField', {
+      value: { name: 'name', title: 'Name', interface: 'input', type: 'string' },
+    });
+
+    const ui = defaultOperator.uiMode?.({ model } as any);
+    const options = (ui?.props?.options || []) as OperatorOption[];
+    expect(options.find((item) => item.value === '$in')?.schema?.['x-component']).toBe('MultipleKeywordsInput');
+    expect(options.find((item) => item.value === '$notIn')?.schema?.['x-component']).toBe('MultipleKeywordsInput');
+  });
+
+  it('preserves React operator labels', () => {
+    const model = createModel();
+    const label = <span data-testid="operator-label">plugin label</span>;
+
+    model.context.defineProperty('collectionField', {
+      value: {
+        filterable: {
+          operators: [{ value: '$in', label, schema: { 'x-component': 'MultipleKeywordsInput' } }],
+        },
+      },
+    });
+
+    const ui = defaultOperator.uiMode?.({ model } as any);
+    const options = (ui?.props?.options || []) as OperatorOption[];
+    expect(options.find((item) => item.value === '$in')?.label).toBe(label);
+  });
+
+  it('falls back to id field interface operators when collection field operators are empty', () => {
+    const app = createMockClient();
+    app.addFieldInterfaces([IdFieldInterface]);
+    app.addFieldInterfaceOperator('id', {
+      label: 'plugin in',
+      value: '$in',
+      schema: { 'x-component': 'MultipleKeywordsInput' },
+    });
+    app.addFieldInterfaceOperator('id', {
+      label: 'plugin not in',
+      value: '$notIn',
+      schema: { 'x-component': 'MultipleKeywordsInput' },
+    });
+
+    const model = new FlowModel({ uid: 'm-default-operator-id-interface', flowEngine: app.flowEngine });
+    model.context.defineProperty('collectionField', {
+      value: {
+        name: 'id',
+        title: 'ID',
+        interface: 'id',
+        type: 'bigInt',
+        filterable: { operators: [] },
+      },
+    });
+    model.context.defineProperty('filterField', {
+      value: { name: 'id', title: 'ID', interface: 'id', type: 'bigInt' },
+    });
+
+    const ui = defaultOperator.uiMode?.({ model } as any);
+    const options = (ui?.props?.options || []) as OperatorOption[];
+    expect(options.find((item) => item.value === '$eq')).toBeTruthy();
+    expect(options.find((item) => item.value === '$in')?.schema?.['x-component']).toBe('MultipleKeywordsInput');
+    expect(options.find((item) => item.value === '$notIn')?.schema?.['x-component']).toBe('MultipleKeywordsInput');
+  });
 });

package/src/flow/models/blocks/filter-manager/flow-actions/customizeFilterRender.tsx

@@ -7,25 +7,13 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
 import { defineAction } from '@nocobase/flow-engine';
 import { FilterFormItemModel } from '../../filter-form/FilterFormItemModel';
-import { InputFieldModel } from '../../../fields/InputFieldModel';
-import { resolveOperatorComponent } from '../../../../internal/utils/operatorSchemaHelper';
-
-const KEYWORD_OPERATORS = new Set(['$in', '$notIn']);
-
-function isOperatorSupported(model: FilterFormItemModel, operator: string) {
-  const ops = model.collectionField?.filterable?.operators || [];
-  return ops.some((op) => op.value === operator);
-}
-
-// 重新包裹 render，确保仍由 flow-engine 的响应式包装驱动
-function rewrapReactiveRender(fieldModel: any) {
-  if (!fieldModel) return;
-  fieldModel._reactiveWrapperCache = undefined;
-  fieldModel.setupReactiveRender?.();
-}
+import {
+  applyOperatorComponentRender,
+  restoreOperatorComponentRender,
+} from '../../../../internal/utils/operatorSchemaHelper';
+import { getFilterFormOperatorList } from '../utils';
 
 function applyCustomizeFilterRender(model: FilterFormItemModel) {
   const operator = model.operator;
@@ -37,37 +25,19 @@ function applyCustomizeFilterRender(model: FilterFormItemModel) {
     key: `${model.uid}-${operator || ''}`,
   });
 
-  // 非关键词操作符，恢复原始渲染
-  if (!KEYWORD_OPERATORS.has(operator)) {
-    const originalRender = fieldModel['__originalRender'];
-    if (typeof originalRender === 'function') {
-      // 清理缓存，防止沿用上一轮的 reactive wrapper
-      (fieldModel as any)._reactiveWrapperCache = undefined;
-      fieldModel.render = originalRender;
-    }
+  if (!operator) {
+    restoreOperatorComponentRender(fieldModel);
     return;
   }
 
-  if (!(fieldModel instanceof InputFieldModel)) return;
-  if (!isOperatorSupported(model, operator)) return;
-
-  const resolved = resolveOperatorComponent(
-    model.context.app,
+  const operatorList = getFilterFormOperatorList(model);
+  applyOperatorComponentRender({
+    app: model.context.app,
+    fieldModel,
     operator,
-    model.collectionField?.filterable?.operators || [],
-  );
-  if (!resolved) return;
-  const { Comp, props: xProps } = resolved;
-
-  // 缓存一次原始 render/props，用于回退
-  if (!fieldModel['__originalRender']) {
-    fieldModel['__originalRender'] = fieldModel.render;
-  }
-
-  fieldModel.render = () => (
-    <Comp {...xProps} {...fieldModel.props} onCompositionStart={null} onCompositionEnd={null} />
-  );
-  rewrapReactiveRender(fieldModel);
+    operators: operatorList,
+    propsPriority: 'field',
+  });
 }
 
 export const customizeFilterRender = defineAction<FilterFormItemModel>({

package/src/flow/models/blocks/filter-manager/flow-actions/defaultOperator.tsx

@@ -8,8 +8,8 @@
  */
 
 import { defineAction, tExpr, FlowModel } from '@nocobase/flow-engine';
-import { operators } from '../../../../../flow-compat';
 import { FilterFormFieldModel } from '../../filter-form/fields';
+import { getFilterFormOperatorList } from '../utils';
 
 export const defaultOperator: any = defineAction<FilterFormFieldModel>({
   name: 'defaultOperator',
@@ -37,12 +37,10 @@ export const defaultOperator: any = defineAction<FilterFormFieldModel>({
 
 function getOperatorOptions(model: FlowModel) {
   const meta = model.context.collectionField || model.context.filterField;
-  const operatorList =
-    model.context.collectionField?.filterable?.operators || operators[model.context.filterField.type];
-  return (operatorList || [])
+  return getFilterFormOperatorList(model)
     .filter((op) => !op.visible || op.visible(meta))
     .map((op) => ({
       ...op,
-      label: model.translate(op.label),
+      label: typeof op.label === 'string' ? model.translate(op.label) : op.label,
     }));
 }

package/src/flow/models/blocks/filter-manager/flow-actions/operatorComponentProps.tsx

@@ -9,20 +9,10 @@
 
 import { defineAction } from '@nocobase/flow-engine';
 import { FilterFormItemModel } from '../../filter-form/FilterFormItemModel';
-
-function getOperatorMeta(model: FilterFormItemModel) {
-  const ops = model.collectionField?.filterable?.operators || [];
-  if (!ops.length) {
-    return null;
-  }
-  if (!model.operator) {
-    return null;
-  }
-  return ops.find((op) => op.value === model.operator) || null;
-}
+import { getFilterFormOperatorMeta } from '../utils';
 
 function applyOperatorComponentProps(model: FilterFormItemModel) {
-  const meta = getOperatorMeta(model);
+  const meta = getFilterFormOperatorMeta(model, model.operator);
   if (!meta) {
     return;
   }