feat: add MultipleKeywordsInput component for filtering with multiple keywords

packages/plugins/@nocobase/plugin-filter-operator-multiple-keywords/src/client/MultipleKeywordsInput.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 { RemoteSelect, useCollection } from '@nocobase/client';
+import React, { FC } from 'react';
+import { Button, Space } from 'antd';
+import { useFieldSchema } from '@formily/react';
+
+export const MultipleKeywordsInput: FC<any> = (props) => {
+  const collection = useCollection();
+  const fieldSchema = useFieldSchema();
+
+  return (
+    <Space.Compact block>
+      <RemoteSelect
+        mode="tags"
+        placeholder="支持输入多个关键词，通过逗号或者换行符分割"
+        tokenSeparators={[',', '\n', '，']}
+        fieldNames={{
+          label: fieldSchema.name as string,
+          value: fieldSchema.name as string,
+        }}
+        service={{
+          resource: collection.name,
+          action: 'list',
+        }}
+        {...props}
+      />
+      <Button>导入 Excel</Button>
+    </Space.Compact>
+  );
+};

packages/plugins/@nocobase/plugin-filter-operator-multiple-keywords/src/client/index.tsx

@@ -8,6 +8,7 @@
  */
 
 import { Plugin } from '@nocobase/client';
+import { MultipleKeywordsInput } from './MultipleKeywordsInput';
 
 export class PluginFilterOperatorMultipleKeywordsClient extends Plugin {
   async afterAdd() {
@@ -18,7 +19,24 @@ export class PluginFilterOperatorMultipleKeywordsClient extends Plugin {
 
   // You can get and modify the app instance here
   async load() {
+    this.app.addFieldInterfaceOperator('input', {
+      label: '{{t("等于任意一个")}}',
+      value: '$in',
+      schema: {
+        'x-component': 'MultipleKeywordsInput',
+      },
+    });
+    this.app.addFieldInterfaceOperator('input', {
+      label: '{{t("不等于任意一个")}}',
+      value: '$notIn',
+      schema: {
+        'x-component': 'MultipleKeywordsInput',
+      },
+    });
 
+    this.app.addComponents({
+      MultipleKeywordsInput,
+    });
   }
 }