fix: 把remoteSelect和Select组件合并到框架 (#499)

Reviewed-on: daoyoucloud/tachycode#499
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { RecordProvider, useAPIClient, useApp, useCollectionRecordData } from '../../../';
 import { isVariable } from '../../../variables/utils/isVariable';
 import { getInnermostKeyAndValue } from '../../common/utils/uitls';
-import { RemoteSelectProps } from '../remote-select';
+import { RemoteSelectProps, RemoteSelect } from '../remote-select';
 import useServiceOptions, { useAssociationFieldContext } from './hooks';
 
 export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
@@ -60,8 +60,6 @@ const InternalAssociationSelect = observer(
     const resource = api.resource(collectionField.target);
     const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter);
     const recordData = useCollectionRecordData();
-    const app = useApp();
-    const RemoteSelect = useMemo(() => app.getComponent('RemoteSelect'), [app]);
 
     useEffect(() => {
       const initValue = isVariable(field.value) ? undefined : field.value;
@@ -169,7 +167,6 @@ export const AssociationSelectReadPretty = connect(
   (props: any) => {
     const service = useServiceOptions(props);
     const app = useApp();
-    const RemoteSelect = useMemo(() => app.getComponent('RemoteSelect'), [app]) as any;
     if (props.fieldNames) {
       return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
     }

packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx

@@ -136,7 +136,7 @@ const InternalRemoteSelect = connect(
         ...service,
         headers,
         params: {
-          pageSize: 200,
+          pageSize: fieldNames['formula'] ? 9999 : 200,
           ...service?.params,
           filter: service?.params?.filter,
         },

packages/core/client/src/schema-component/antd/select/FormulaSelect.tsx

@@ -1,12 +1,11 @@
-import { CloseCircleFilled, CloseOutlined, LoadingOutlined } from '@ant-design/icons';
+import { CloseCircleFilled, CloseOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty, useFieldSchema, useForm } from '@formily/react';
+import { useFieldSchema, useForm } from '@formily/react';
 import { isValid, toArr } from '@formily/shared';
 import { isPlainObject } from '@nocobase/utils/client';
 import type { SelectProps } from 'antd';
 import { Select as AntdSelect, Empty, Spin, Tag } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
-import { ReadPretty } from './ReadPretty';
+import { FieldNames, getCurrentOptions } from './utils';
-import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
 import { useAPIClient, useCollection_deprecated, useRequest } from '@nocobase/client';
 import { useAsyncEffect } from 'ahooks';
 
@@ -21,7 +20,7 @@ type Props = SelectProps<any, any> & {
 const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
 
 const ObjectSelect = (props: Props) => {
-  const { value, options, onChange, fieldNames, mode, loading, rawOptions, defaultValue, ...others } = props;
+  const { value, options, onChange, mode, fieldNames, loading, rawOptions, defaultValue, ...others } = props;
   const [defoptions, setDefOptions] = useState();
   const fieldSchema = useFieldSchema();
   const collectionName = fieldSchema['collectionName'];
@@ -45,6 +44,12 @@ const ObjectSelect = (props: Props) => {
       setDefOptions(changOptions);
     }
   }, [filterField?.filter, collectionName]);
+  useEffect(() => {
+    if (collectionName && fieldSchema['name'].toString().includes('custom') && defaultValue) {
+      const name = fieldSchema['name'].toString().split('.')[1];
+      form.values['custom'][name] = defaultValue?.[fieldNames.value];
+    }
+  }, []);
   const toValue = (v: any) => {
     if (isEmptyObject(v)) {
       return;
@@ -107,7 +112,7 @@ const ObjectSelect = (props: Props) => {
         } else {
           onChange?.(current.shift() || null);
         }
-        if (collectionName) {
+        if (collectionName && fieldSchema['name'].toString().includes('custom')) {
           const name = fieldSchema['name'].toString().split('.')[1];
           form.values['custom'][name] = changed?.['value'];
         }
@@ -131,8 +136,6 @@ const ObjectSelect = (props: Props) => {
   );
 };
 
-const filterOption = (input, option) => (option?.label ?? '').toLowerCase().includes((input || '').toLowerCase());
-
 const replacePlaceholders = (inputStr, values) => {
   return inputStr.replace(/{{(.*?)}}/g, function (match, placeholder) {
     return Object.prototype.hasOwnProperty.call(values, placeholder) ? values[placeholder] : match;
@@ -200,15 +203,15 @@ const useLabelOptions = (others) => {
   }
   return others;
 };
-const InternalSelect = connect(
+
-  (props: Props) => {
+const FormulaSelect = (props) => {
   const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
   let mode: any = props.multiple ? 'multiple' : props.mode;
   if (mode && !['multiple', 'tags'].includes(mode)) {
     mode = undefined;
   }
   const modifiedProps = useLabelOptions(others);
-    if (objectValue) {
+
   return (
     <ObjectSelect
       rawOptions={rawOptions}
@@ -219,70 +222,6 @@ const InternalSelect = connect(
       loading={loading}
     />
   );
-    }
-    const toValue = (v) => {
-      if (['tags', 'multiple'].includes(props.mode) || props.multiple) {
-        if (v) {
-          return toArr(v);
-        }
-        return undefined;
-      }
-      return v;
-    };
-    return (
-      <AntdSelect
-        // @ts-ignore
-        role="button"
-        data-testid={`select-${mode || 'single'}`}
-        showSearch
-        filterOption={filterOption}
-        allowClear={{
-          clearIcon: <CloseCircleFilled role="button" aria-label="icon-close-select" />,
-        }}
-        popupMatchSelectWidth={false}
-        notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
-        value={toValue(value)}
-        defaultValue={toValue(defaultValue)}
-        tagRender={(props) => {
-          return (
-            // @ts-ignore
-            <Tag
-              role="button"
-              aria-label={props.label}
-              closeIcon={<CloseOutlined role="button" aria-label="icon-close-tag" />}
-              {...props}
-            >
-              {props.label}
-            </Tag>
-          );
-        }}
-        {...others}
-        onChange={(changed) => {
-          props.onChange?.(changed === undefined ? null : changed);
-        }}
-        mode={mode}
-      />
-    );
-  },
-  mapProps(
-    {
-      dataSource: 'options',
-    },
-    (props, field) => {
-      return {
-        ...props,
-        fieldNames: { ...defaultFieldNames, ...props.fieldNames },
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
-      };
-    },
-  ),
-  mapReadPretty(ReadPretty),
-);
-
-export const Select = InternalSelect as unknown as typeof InternalSelect & {
-  ReadPretty: typeof ReadPretty;
 };
 
-Select.ReadPretty = ReadPretty;
+export default FormulaSelect;
-
-export default Select;

packages/core/client/src/schema-component/antd/select/Select.tsx

@@ -7,6 +7,7 @@ import { Select as AntdSelect, Empty, Spin, Tag } from 'antd';
 import React from 'react';
 import { ReadPretty } from './ReadPretty';
 import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
+import FormulaSelect from './FormulaSelect';
 
 type Props = SelectProps<any, any> & {
   objectValue?: boolean;
@@ -103,6 +104,9 @@ const InternalSelect = connect(
     if (mode && !['multiple', 'tags'].includes(mode)) {
       mode = undefined;
     }
+    if ('formula' in others.fieldNames || 'collection' in props) {
+      return <FormulaSelect {...props} />;
+    }
     if (objectValue) {
       return (
         <ObjectSelect

packages/plugins/@hera/plugin-core/src/client/hooks/useFilterBlockActionProps.tsx

@@ -41,6 +41,7 @@ export const removeNullCondition = (filter, fieldSchema?) => {
       const flatValue = flat.unflatten(values);
       const flatFieldSchema = flat.unflatten(filterSchemaItem);
       flatValue['$and'] = flatValue['$and']?.filter(Boolean);
+      flatFieldSchema['$and'] = flatFieldSchema['$and']?.filter(Boolean);
       return {
         $and: [flatValue, flatFieldSchema],
       };

packages/plugins/@hera/plugin-core/src/client/index.tsx

@@ -43,15 +43,7 @@ import {
   GroupBlockConfigure,
   SignatureInput,
 } from './components';
-import {
+import { AutoComplete, DatePicker, GroupBlock, InternalPDFViewer, MenuDesigner } from './schema-components';
-  AutoComplete,
-  DatePicker,
-  GroupBlock,
-  InternalPDFViewer,
-  MenuDesigner,
-  RemoteSelect,
-  Select,
-} from './schema-components';
 import {
   CreateSubmitActionInitializer,
   FilterFormItem,
@@ -186,8 +178,6 @@ export class PluginCoreClient extends Plugin {
       PDFViewerProvider,
       PDFViwer: InternalPDFViewer,
       PageLayout,
-      RemoteSelect,
-      Select,
       SettingBlock: SettingBlockInitializer,
       SheetBlock,
       SheetBlockInitializer,

packages/plugins/@hera/plugin-core/src/client/schema-components/index.ts

@@ -3,5 +3,3 @@ export * from './blocks/GroupBlock';
 export * from './blocks/PDFViewer';
 export * from './date-picker';
 export * from './deprecated/ExtendedMenuDesigner';
-export * from './remote-select';
-export * from './select/Select';

packages/plugins/@hera/plugin-core/src/client/schema-components/remote-select/ReadPretty.tsx

@@ -1,42 +0,0 @@
-import { observer, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { getValues } from './shared';
-import { defaultFieldNames, useActionContext, useRecord, useRequest } from '@nocobase/client';
-import { Select } from '../select';
-
-export const ReadPretty = observer(
-  (props: any) => {
-    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-    const field = useField<any>();
-    const fieldSchema = useFieldSchema();
-    const record = useRecord();
-    const { snapshot } = useActionContext();
-
-    const { data } = useRequest<{
-      data: any[];
-    }>(
-      snapshot
-        ? async () => ({
-            data: record[fieldSchema.name],
-          })
-        : {
-            action: 'list',
-            ...props.service,
-            params: {
-              paginate: false,
-              filter: {
-                [fieldNames.value]: {
-                  $in: getValues(field.value, fieldNames),
-                },
-              },
-            },
-          },
-      {
-        refreshDeps: [props.service, field.value],
-      },
-    );
-
-    return <Select.ReadPretty {...props} options={data?.data}></Select.ReadPretty>;
-  },
-  { displayName: 'ReadPretty' },
-);

packages/plugins/@hera/plugin-core/src/client/schema-components/remote-select/RemoteSelect.tsx

@@ -1,279 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty, useFieldSchema } from '@formily/react';
-import { Divider, SelectProps, Tag } from 'antd';
-import dayjs from 'dayjs';
-import { uniqBy } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ReadPretty } from './ReadPretty';
-import {
-  defaultFieldNames,
-  mergeFilter,
-  useCollection_deprecated,
-  useCollectionManager_deprecated,
-  useCompile,
-  useRequest,
-} from '@nocobase/client';
-import { Select } from '../select';
-const EMPTY = 'N/A';
-
-export type ResourceActionOptions<P = any> = {
-  resource?: string;
-  resourceOf?: any;
-  action?: string;
-  params?: P;
-};
-
-export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
-  objectValue?: boolean;
-  onChange?: (v: any) => void;
-  target: string;
-  wait?: number;
-  manual?: boolean;
-  mapOptions?: (data: any) => RemoteSelectProps['fieldNames'];
-  targetField?: any;
-  service: ResourceActionOptions<P>;
-  CustomDropdownRender?: (v: any) => any;
-};
-
-const InternalRemoteSelect = connect(
-  (props: RemoteSelectProps) => {
-    const {
-      fieldNames = {},
-      service = {},
-      wait = 300,
-      value,
-      defaultValue,
-      objectValue,
-      manual = true,
-      mapOptions,
-      targetField: _targetField,
-      CustomDropdownRender,
-      ...others
-    } = props;
-    const [open, setOpen] = useState(false);
-    const firstRun = useRef(false);
-    const fieldSchema = useFieldSchema();
-    const isQuickAdd = fieldSchema['x-component-props']?.addMode === 'quickAdd';
-    const { getField } = useCollection_deprecated();
-    const searchData = useRef(null);
-    const { getCollectionJoinField, getInterface } = useCollectionManager_deprecated();
-    const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema.name as string);
-    const targetField =
-      _targetField ||
-      (collectionField?.target &&
-        fieldNames?.label &&
-        getCollectionJoinField(`${collectionField.target}.${fieldNames.label}`));
-
-    const operator = useMemo(() => {
-      if (targetField?.interface) {
-        return getInterface(targetField.interface)?.filterable?.operators?.[0]?.value || '$includes';
-      }
-      return '$includes';
-    }, [targetField]);
-    const compile = useCompile();
-
-    const mapOptionsToTags = useCallback(
-      (options) => {
-        try {
-          return options
-            .filter((v) => ['number', 'string'].includes(typeof v[fieldNames.value]))
-            .map((option) => {
-              let label = compile(option[fieldNames.label]);
-
-              if (targetField?.uiSchema?.enum) {
-                if (Array.isArray(label)) {
-                  label = label
-                    .map((item, index) => {
-                      const option = targetField.uiSchema.enum.find((i) => i.value === item);
-                      if (option) {
-                        return (
-                          <Tag role="button" key={index} color={option.color} style={{ marginRight: 3 }}>
-                            {option?.label || item}
-                          </Tag>
-                        );
-                      } else {
-                        return (
-                          <Tag role="button" key={item}>
-                            {item}
-                          </Tag>
-                        );
-                      }
-                    })
-                    .reverse();
-                } else {
-                  const item = targetField.uiSchema.enum.find((i) => i.value === label);
-                  if (item) {
-                    label = (
-                      <Tag role="button" color={item.color}>
-                        {item.label}
-                      </Tag>
-                    );
-                  }
-                }
-              }
-              if (targetField?.type === 'date') {
-                label = dayjs(label).format('YYYY-MM-DD');
-              }
-
-              if (mapOptions) {
-                return mapOptions({
-                  [fieldNames.label]: label || EMPTY,
-                  [fieldNames.value]: option[fieldNames.value],
-                });
-              }
-              return {
-                ...option,
-                [fieldNames.label]: label || EMPTY,
-                [fieldNames.value]: option[fieldNames.value],
-              };
-            })
-            .filter(Boolean);
-        } catch (err) {
-          console.error(err);
-          return options;
-        }
-      },
-      [targetField?.uiSchema, fieldNames],
-    );
-    const { data, run, loading } = useRequest(
-      {
-        action: 'list',
-        ...service,
-        params: {
-          pageSize: fieldNames['formula'] ? 9999 : 200,
-          ...service?.params,
-          filter: service?.params?.filter,
-        },
-      },
-      {
-        manual,
-        debounceWait: wait,
-      },
-    );
-    const runDep = useMemo(
-      () =>
-        JSON.stringify({
-          service,
-          fieldNames,
-        }),
-      [service, fieldNames],
-    );
-    const CustomRenderCom = useCallback(() => {
-      if (searchData.current && CustomDropdownRender) {
-        return (
-          <CustomDropdownRender
-            search={searchData.current}
-            callBack={() => {
-              searchData.current = null;
-              setOpen(false);
-            }}
-          />
-        );
-      }
-      return null;
-    }, [searchData.current]);
-
-    useEffect(() => {
-      // Lazy load
-      if (firstRun.current) {
-        run();
-      }
-    }, [runDep]);
-
-    const onSearch = async (search) => {
-      run({
-        filter: mergeFilter([
-          search
-            ? {
-                [fieldNames.label]: {
-                  [operator]: search,
-                },
-              }
-            : {},
-          service?.params?.filter,
-        ]),
-      });
-      searchData.current = search;
-    };
-
-    const options = useMemo(() => {
-      const v = value || defaultValue;
-      if (!data?.data?.length) {
-        return v != null ? (Array.isArray(v) ? v : [v]) : [];
-      }
-      const valueOptions =
-        (v != null && (Array.isArray(v) ? v : [{ ...v, [fieldNames.value]: v[fieldNames.value] || v }])) || [];
-      return uniqBy(data?.data?.concat(valueOptions ?? []), fieldNames.value);
-    }, [value, defaultValue, data?.data, fieldNames.value]);
-    const onDropdownVisibleChange = (visible) => {
-      setOpen(visible);
-      searchData.current = null;
-      if (visible) {
-        run();
-      }
-      firstRun.current = true;
-    };
-
-    return (
-      <Select
-        open={open}
-        popupMatchSelectWidth={false}
-        autoClearSearchValue
-        filterOption={false}
-        filterSort={null}
-        fieldNames={fieldNames as any}
-        onSearch={onSearch}
-        onDropdownVisibleChange={onDropdownVisibleChange}
-        objectValue={objectValue}
-        value={value}
-        defaultValue={defaultValue}
-        {...others}
-        loading={data! ? loading : true}
-        options={mapOptionsToTags(options)}
-        rawOptions={options}
-        dropdownRender={(menu) => {
-          const isFullMatch = options.some((v) => v[fieldNames.label] === searchData.current);
-          return (
-            <>
-              {isQuickAdd ? (
-                <>
-                  {!(data?.data.length === 0 && searchData?.current) && menu}
-                  {data?.data.length > 0 && searchData?.current && !isFullMatch && <Divider style={{ margin: 0 }} />}
-                  {!isFullMatch && <CustomRenderCom />}
-                </>
-              ) : (
-                menu
-              )}
-            </>
-          );
-        }}
-      />
-    );
-  },
-  mapProps(
-    {
-      dataSource: 'options',
-    },
-    (props, field) => {
-      const fieldSchema = useFieldSchema();
-      return {
-        ...props,
-        fieldNames: {
-          ...defaultFieldNames,
-          ...props.fieldNames,
-          ...field.componentProps.fieldNames,
-          ...fieldSchema['x-component-props']?.fieldNames,
-        },
-        suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
-      };
-    },
-  ),
-  mapReadPretty(ReadPretty),
-);
-
-export const RemoteSelect = InternalRemoteSelect as unknown as typeof InternalRemoteSelect & {
-  ReadPretty: typeof ReadPretty;
-};
-
-RemoteSelect.ReadPretty = ReadPretty;
-export default RemoteSelect;

packages/plugins/@hera/plugin-core/src/client/schema-components/remote-select/index.md

@@ -1,28 +0,0 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
-# RemoteSelect
-
-## Examples
-
-<code src="./demos/demo1.tsx"></code>
-
-## API
-
-基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
-
-- `objectValue` 值为 object 类型
-- `fieldNames` 默认值有区别
-
-```ts
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
-};
-```
-

packages/plugins/@hera/plugin-core/src/client/schema-components/remote-select/index.ts

@@ -1 +0,0 @@
-export * from './RemoteSelect';

packages/plugins/@hera/plugin-core/src/client/schema-components/remote-select/shared.ts

@@ -1,7 +0,0 @@
-import { castArray } from 'lodash';
-
-export const getValues = (values, fieldNames) => {
-  return castArray(values)
-    .filter((item) => item != null)
-    .map((val) => (typeof val === 'object' ? val[fieldNames.value] : val));
-};

packages/plugins/@hera/plugin-core/src/client/schema-components/select/ReadPretty.tsx

@@ -1,36 +0,0 @@
-import { isArrayField } from '@formily/core';
-import { observer, useField } from '@formily/react';
-import { isValid } from '@formily/shared';
-import { Tag } from 'antd';
-import React from 'react';
-import { defaultFieldNames, getCurrentOptions } from './utils';
-import { EllipsisWithTooltip } from '@nocobase/client';
-
-export const ReadPretty = observer(
-  (props: any) => {
-    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-    const field = useField<any>();
-
-    if (!isValid(props.value)) {
-      return <div />;
-    }
-    if (isArrayField(field) && field?.value?.length === 0) {
-      return <div />;
-    }
-    const dataSource = field.dataSource || props.options || [];
-    const currentOptions = getCurrentOptions(field.value, dataSource, fieldNames);
-
-    return (
-      <div>
-        <EllipsisWithTooltip ellipsis={props.ellipsis}>
-          {currentOptions.map((option, key) => (
-            <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
-              {option[fieldNames.label]}
-            </Tag>
-          ))}
-        </EllipsisWithTooltip>
-      </div>
-    );
-  },
-  { displayName: 'ReadPretty' },
-);

packages/plugins/@hera/plugin-core/src/client/schema-components/select/index.md

@@ -1,37 +0,0 @@
----
-group:
-  title: Schema Components
-  order: 3
----
-
-# Select
-
-## Examples
-
-### 单选
-
-<code src="./demos/demo1.tsx"></code>
-
-### 多选
-
-<code src="./demos/demo2.tsx"></code>
-
-### 值为 Object 类型的 Select
-
-<code src="./demos/demo3.tsx"></code>
-
-## API
-
-基于 Ant Design 的 [Select](https://ant.design/components/select/#API)，相关扩展属性有：
-
-- `objectValue` 值为 object 类型
-- `fieldNames` 默认值有区别
-
-```ts
-export const defaultFieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
-};
-```

packages/plugins/@hera/plugin-core/src/client/schema-components/select/index.ts

@@ -1,2 +0,0 @@
-export * from './Select';
-export * from './utils';

packages/plugins/@hera/plugin-core/src/client/schema-components/select/utils.ts

@@ -1,54 +0,0 @@
-import { isPlainObject } from '@nocobase/utils/client';
-import { castArray } from 'lodash';
-
-export interface FieldNames {
-  label: string;
-  value: string;
-  color: string;
-  options: string;
-}
-
-export const defaultFieldNames: FieldNames = {
-  label: 'label',
-  value: 'value',
-  color: 'color',
-  options: 'children',
-};
-
-interface Option {
-  label: string;
-  value: string;
-  icon?: any;
-}
-
-function flatData(data: any[], fieldNames: FieldNames): any[] {
-  const newArr: any[] = [];
-  if (!Array.isArray(data)) return newArr;
-  for (let i = 0; i < data.length; i++) {
-    const children = data[i][fieldNames.options];
-    if (Array.isArray(children)) {
-      newArr.push(...flatData(children, fieldNames));
-    }
-    newArr.push({ ...data[i] });
-  }
-  return newArr;
-}
-
-export function getCurrentOptions(values: string | string[], dataSource: any[], fieldNames: FieldNames): Option[] {
-  const result = flatData(dataSource, fieldNames);
-  const arrValues = castArray(values)
-    .filter((item) => item != null)
-    .map((val) => (isPlainObject(val) ? val[fieldNames.value] : val)) as string[];
-
-  function findOptions(options: any[]): Option[] {
-    if (!options) return [];
-    const current: Option[] = [];
-    for (const value of arrValues) {
-      const option = options.find((v) => v[fieldNames.value] === value) || { value, label: value };
-      current.push(option);
-    }
-    return current;
-  }
-
-  return findOptions(result);
-}

packages/plugins/@hera/plugin-core/src/client/schema-initializer/items/CustomFilterFormItemInitializer.tsx

@@ -23,6 +23,7 @@ import {
   useFormBlockContext,
   useAPIClient,
   useCompile,
+  Select,
 } from '@nocobase/client';
 import { ConfigProvider, Radio, Space } from 'antd';
 import React, { memo, useCallback, useContext, useMemo, Profiler } from 'react';
@@ -116,8 +117,6 @@ const FieldComponentProps: React.FC = observer(
         },
       },
     };
-    console.log(scope, 'scope');
-    console.log(components, 'components');
 
     return (
       <SchemaComponentOptions scope={{ ...scope }} components={{ ArrayItems, FormItem, Space }}>
@@ -180,7 +179,7 @@ export const FilterCustomItemInitializer: React.FC<{
               );
             },
           }}
-          components={{ ...components, FieldComponentProps }}
+          components={{ ...components, FieldComponentProps, Select }}
         >
           <FormLayout layout={'vertical'}>
             <ConfigProvider locale={locale}>
@@ -282,12 +281,12 @@ export const FilterCustomItemInitializer: React.FC<{
     const name = uid();
     insert(
       gridRowColWrap({
-        'x-component': component,
         ...defaultSchema,
         type: 'string',
         title: title,
         name: 'custom.' + name,
         required: false,
+        'x-component': component,
         'x-designer': 'FilterItemCustomDesigner',
         'x-decorator': 'FilterFormItem',
         'x-decorator-props': collection,
@@ -299,6 +298,7 @@ export const FilterCustomItemInitializer: React.FC<{
           },
           associationField,
           collection,
+          objectValue: true,
         },
         collectionName: collection,
       }),

packages/plugins/@hera/plugin-core/src/client/schema-settings/SchemaSettingsRemove.tsx

@@ -43,7 +43,9 @@ export const SchemaSettingsRemove: FC<SchemaSettingsRemoveProps> = (props) => {
             }
             await dn.remove(null, options);
             await confirm?.onOk?.();
+            if (form.values['custom']) {
               delete form.values['custom'][fieldName];
+            }
             for (const key in form.fields) {
               if (key.includes(name) && form.fields[key].title === title) {
                 delete form.fields[key];