From 9e91a2bc610a836dab1b2b5ebdfa09774b48826c Mon Sep 17 00:00:00 2001
From: fuchanghai <33984497+fuchanghai@users.noreply.github.com>
Date: Thu, 1 Dec 2022 16:01:01 +0800
Subject: [PATCH] [improvement-#11879]Keyword Search Improvement  (#12951)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [improvement-#11879]Keyword Search Improvement

* [improvement] add a search component

* [Feature][UI] Revise the  `Search` component.

* [improvement] add search components

* [improvement] fix

* [improvement] remove unUsed

* [improvement] remove unUsed

* handle the different locales.

Co-authored-by: Jackie <‘2875334588@qq.com’>
Co-authored-by: Amy <amywang0104@163.com>
---
 .../src/components/input-search/index.tsx     | 55 +++++++++++++++++++
 .../src/locales/en_US/index.ts                |  4 +-
 .../src/locales/en_US/input-search.ts         | 20 +++++++
 .../src/locales/zh_CN/index.ts                |  4 +-
 .../src/locales/zh_CN/input-search.ts         | 20 +++++++
 .../src/views/data-quality/rule/index.tsx     | 25 ++++-----
 .../src/views/data-quality/rule/use-table.ts  |  2 +-
 .../views/data-quality/task-result/index.tsx  | 12 ++--
 .../src/views/datasource/list/index.tsx       | 11 ++--
 .../src/views/datasource/list/use-table.ts    |  4 +-
 .../src/views/projects/list/index.tsx         | 15 +++--
 .../src/views/projects/list/use-table.ts      |  2 +-
 .../projects/workflow/definition/index.tsx    | 12 ++--
 .../src/views/resource/file/index.tsx         | 11 ++--
 .../resource/task-group/option/index.tsx      | 17 +++---
 .../views/resource/task-group/queue/index.tsx | 28 +++++-----
 .../src/views/resource/udf/function/index.tsx | 11 ++--
 .../src/views/resource/udf/resource/index.tsx |  9 ++-
 .../security/alarm-group-manage/index.tsx     | 10 ++--
 .../security/alarm-instance-manage/index.tsx  |  9 ++-
 .../views/security/cluster-manage/index.tsx   | 10 ++--
 .../security/environment-manage/index.tsx     | 10 ++--
 .../security/k8s-namespace-manage/index.tsx   | 10 ++--
 .../views/security/tenant-manage/index.tsx    | 10 ++--
 .../src/views/security/token-manage/index.tsx | 10 ++--
 .../src/views/security/user-manage/index.tsx  | 14 +++--
 .../security/worker-group-manage/index.tsx    | 10 ++--
 .../security/yarn-queue-manage/index.tsx      | 10 ++--
 28 files changed, 216 insertions(+), 149 deletions(-)
 create mode 100644 dolphinscheduler-ui/src/components/input-search/index.tsx
 create mode 100644 dolphinscheduler-ui/src/locales/en_US/input-search.ts
 create mode 100644 dolphinscheduler-ui/src/locales/zh_CN/input-search.ts

diff --git a/dolphinscheduler-ui/src/components/input-search/index.tsx b/dolphinscheduler-ui/src/components/input-search/index.tsx
new file mode 100644
index 0000000000..ea482cb2df
--- /dev/null
+++ b/dolphinscheduler-ui/src/components/input-search/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, withKeys, PropType } from 'vue'
+import { NInput } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const props = {
+  placeholder: {
+    type: String as PropType<string>,
+    required: false
+  }
+}
+
+const Search = defineComponent({
+  name: 'Search',
+  emits: ['search','clear'],
+  props: props,
+  setup(props, ctx) {
+    const { t } = useI18n()
+
+    const onKeyDown = (ev: KeyboardEvent) => {
+      ctx.emit('search', (ev.target as HTMLInputElement)?.value || '')
+    }
+    const onClear = (ev: Event) => {
+      ctx.emit('clear', (ev.target as HTMLInputElement)?.value || '')
+    }
+    return () => (
+
+        <NInput
+            size='small'
+            clearable
+            placeholder = {props.placeholder?props.placeholder:t('input_search.placeholder')}
+            onKeydown={withKeys(onKeyDown, ['enter'])}
+            onClear = {onClear}
+        />
+    )
+  }
+})
+
+export default Search
diff --git a/dolphinscheduler-ui/src/locales/en_US/index.ts b/dolphinscheduler-ui/src/locales/en_US/index.ts
index ed28fe0d4a..096fb87566 100644
--- a/dolphinscheduler-ui/src/locales/en_US/index.ts
+++ b/dolphinscheduler-ui/src/locales/en_US/index.ts
@@ -19,6 +19,7 @@ import crontab from '@/locales/en_US/crontab'
 import data_quality from '@/locales/en_US/data-quality'
 import datasource from '@/locales/en_US/datasource'
 import home from '@/locales/en_US/home'
+import input_search from '@/locales/en_US/input-search'
 import login from '@/locales/en_US/login'
 import menu from '@/locales/en_US/menu'
 import modal from '@/locales/en_US/modal'
@@ -48,5 +49,6 @@ export default {
   datasource,
   data_quality,
   crontab,
-  ui_setting
+  ui_setting,
+  input_search
 }
diff --git a/dolphinscheduler-ui/src/locales/en_US/input-search.ts b/dolphinscheduler-ui/src/locales/en_US/input-search.ts
new file mode 100644
index 0000000000..8708fe2707
--- /dev/null
+++ b/dolphinscheduler-ui/src/locales/en_US/input-search.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    placeholder: 'Please enter keyword'
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/index.ts b/dolphinscheduler-ui/src/locales/zh_CN/index.ts
index aee6d13151..52224a1022 100644
--- a/dolphinscheduler-ui/src/locales/zh_CN/index.ts
+++ b/dolphinscheduler-ui/src/locales/zh_CN/index.ts
@@ -19,6 +19,7 @@ import crontab from '@/locales/zh_CN/crontab'
 import data_quality from '@/locales/zh_CN/data-quality'
 import datasource from '@/locales/zh_CN/datasource'
 import home from '@/locales/zh_CN/home'
+import input_search from '@/locales/zh_CN/input-search'
 import login from '@/locales/zh_CN/login'
 import menu from '@/locales/zh_CN/menu'
 import modal from '@/locales/zh_CN/modal'
@@ -48,5 +49,6 @@ export default {
   datasource,
   data_quality,
   crontab,
-  ui_setting
+  ui_setting,
+  input_search
 }
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts b/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts
new file mode 100644
index 0000000000..699c215ade
--- /dev/null
+++ b/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    placeholder: '请输入关键词'
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
index f7d9a60209..879820dce6 100644
--- a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
+++ b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
@@ -22,17 +22,11 @@ import {
   ref,
   toRefs
 } from 'vue'
-import {
-  NSpace,
-  NInput,
-  NButton,
-  NIcon,
-  NDataTable,
-  NPagination
-} from 'naive-ui'
+import {NSpace, NButton, NIcon, NDataTable, NPagination} from 'naive-ui'
 import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import Card from '@/components/card'
+import Search from '@/components/input-search'
 import RuleModal from './components/rule-modal'
 
 const TaskResult = defineComponent({
@@ -58,7 +52,6 @@ const TaskResult = defineComponent({
     }
 
     const onSearch = () => {
-      variables.page = 1
       requestTableData()
     }
 
@@ -115,14 +108,16 @@ const TaskResult = defineComponent({
       <NSpace vertical>
         <Card>
           <NSpace justify='end'>
-            <NInput
-              allowInput={this.trim}
-              v-model={[this.searchVal, 'value']}
-              size='small'
+            <Search
+              v-model:value={this.searchVal}
               placeholder={t('data_quality.rule.name')}
-              clearable
+              onSearch={onSearch}
             />
-            <NButton size='small' type='primary' onClick={onSearch}>
+            <NButton
+              size='small'
+              type='primary'
+              onClick={onSearch}
+            >
               <NIcon>
                 <SearchOutlined />
               </NIcon>
diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts b/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
index dac1f557eb..952d0bb843 100644
--- a/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
+++ b/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
@@ -34,7 +34,7 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
     page: ref(1),
     pageSize: ref(10),
     state: ref(null),
-    searchVal: ref(null),
+    searchVal: '',
     totalPage: ref(1),
     loadingRef: ref(false)
   })
diff --git a/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx b/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
index 1e07e7c880..ab42fcd51b 100644
--- a/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
+++ b/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
@@ -24,7 +24,6 @@ import {
 } from 'vue'
 import {
   NSpace,
-  NInput,
   NSelect,
   NDatePicker,
   NButton,
@@ -36,6 +35,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import { useI18n } from 'vue-i18n'
 import Card from '@/components/card'
+import Search from '@/components/input-search'
 
 const TaskResult = defineComponent({
   name: 'task-result',
@@ -90,12 +90,10 @@ const TaskResult = defineComponent({
       <NSpace vertical>
         <Card>
           <NSpace justify='end'>
-            <NInput
-              allowInput={this.trim}
-              v-model={[this.searchVal, 'value']}
-              size='small'
-              placeholder={t('data_quality.task_result.task_name')}
-              clearable
+            <Search
+                v-model:value={this.searchVal}
+                placeholder={t('data_quality.task_result.task_name')}
+                onSearch={onSearch}
             />
             <NSelect
               v-model={[this.ruleType, 'value']}
diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.tsx b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
index 40bb2b9828..275ba08ddb 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
@@ -25,7 +25,6 @@ import {
 } from 'vue'
 import {
   NButton,
-  NInput,
   NIcon,
   NDataTable,
   NPagination,
@@ -37,6 +36,7 @@ import { useColumns } from './use-columns'
 import { useTable } from './use-table'
 import { DefaultTableWidth } from '@/common/column-width-config'
 import Card from '@/components/card'
+import Search from '@/components/input-search'
 import DetailModal from './detail'
 import type { TableColumns } from './types'
 import SourceModal from './source-modal'
@@ -143,11 +143,10 @@ const list = defineComponent({
               {t('datasource.create_datasource')}
             </NButton>
             <NSpace justify='end' wrap={false}>
-              <NInput
-                allowInput={this.trim}
-                v-model={[this.searchVal, 'value']}
-                size='small'
-                placeholder={`${t('datasource.search_input_tips')}`}
+              <Search
+                  v-model:value = {this.searchVal}
+                  placeholder = {t('datasource.search_input_tips')}
+                  onSearch={onUpdatedList}
               />
               <NButton type='primary' size='small' onClick={onUpdatedList}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/datasource/list/use-table.ts b/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
index e8f5846e8d..08603a57c7 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
+++ b/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue'
+import {reactive, ref} from 'vue'
 import {
   queryDataSourceListPaging,
   deleteDataSource
@@ -26,7 +26,7 @@ export function useTable() {
     page: 1,
     pageSize: 10,
     itemCount: 0,
-    searchVal: '',
+    searchVal: ref(''),
     list: [],
     loading: false
   })
diff --git a/dolphinscheduler-ui/src/views/projects/list/index.tsx b/dolphinscheduler-ui/src/views/projects/list/index.tsx
index 51fb519af5..52ddce4cac 100644
--- a/dolphinscheduler-ui/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/list/index.tsx
@@ -20,7 +20,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -34,6 +33,7 @@ import {
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 import ProjectModal from './components/project-modal'
 
 const list = defineComponent({
@@ -121,14 +121,13 @@ const list = defineComponent({
               {t('project.list.create_project')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                v-model={[this.searchVal, 'value']}
-                placeholder={t('project.list.project_tips')}
-                clearable
-                onClear={this.onClearSearch}
+              <Search
+                  v-model:value = {this.searchVal}
+                  placeholder={t('project.list.project_tips')}
+                  onSearch={this.handleSearch}
+                  onClear={this.onClearSearch}
               />
+
               <NButton size='small' type='primary' onClick={this.handleSearch}>
                 <NIcon>
                   <SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/projects/list/use-table.ts b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
index 88947b510d..107718657b 100644
--- a/dolphinscheduler-ui/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
@@ -213,7 +213,7 @@ export function useTable() {
     tableData: [],
     page: ref(1),
     pageSize: ref(10),
-    searchVal: ref(null),
+    searchVal: ref(''),
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index 2c5cdeba78..ab5ff4af18 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -20,7 +20,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace,
   NTooltip,
@@ -44,6 +43,7 @@ import TimingModal from './components/timing-modal'
 import VersionModal from './components/version-modal'
 import CopyModal from './components/copy-modal'
 import type { Router } from 'vue-router'
+import Search from "@/components/input-search";
 
 export default defineComponent({
   name: 'WorkflowDefinitionList',
@@ -177,12 +177,10 @@ export default defineComponent({
               </NButton>
             </NSpace>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                placeholder={t('resource.function.enter_keyword_tips')}
-                v-model={[this.searchVal, 'value']}
-                clearable
+              <Search
+                placeholder = {t('resource.function.enter_keyword_tips')}
+                v-model:value={this.searchVal}
+                onSearch={this.handleSearch}
                 onClear={this.onClearSearch}
               />
               <NButton type='primary' size='small' onClick={this.handleSearch}>
diff --git a/dolphinscheduler-ui/src/views/resource/file/index.tsx b/dolphinscheduler-ui/src/views/resource/file/index.tsx
index 1943a5d94e..d154fe258c 100644
--- a/dolphinscheduler-ui/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/index.tsx
@@ -31,7 +31,6 @@ import {
   NButtonGroup,
   NButton,
   NPagination,
-  NInput,
   NBreadcrumb,
   NBreadcrumbItem
 } from 'naive-ui'
@@ -52,6 +51,7 @@ import ResourceRenameModal from './rename'
 import styles from './index.module.scss'
 import type { ResourceFile } from '@/service/modules/resources/types'
 import type { Router } from 'vue-router'
+import Search from "@/components/input-search";
 
 export default defineComponent({
   name: 'File',
@@ -285,11 +285,10 @@ export default defineComponent({
               </NButton>
             </NButtonGroup>
             <NSpace>
-              <NInput
-                size='small'
-                allowInput={this.trim}
-                placeholder={t('resource.file.enter_keyword_tips')}
-                v-model={[this.searchRef, 'value']}
+              <Search
+                placeholder = {t('resource.file.enter_keyword_tips')}
+                v-model:value={this.searchRef}
+                onSearch={handleConditions}
               />
               <NButton size='small' type='primary' onClick={handleConditions}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
index 42405398a5..292e757cdb 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
@@ -26,7 +26,6 @@ import {
 import {
   NButton,
   NIcon,
-  NInput,
   NDataTable,
   NPagination,
   NSpace
@@ -36,6 +35,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import FormModal from './components/form-modal'
+import Search from "@/components/input-search";
 
 const taskGroupOption = defineComponent({
   name: 'taskGroupOption',
@@ -163,14 +163,13 @@ const taskGroupOption = defineComponent({
               {t('resource.task_group_option.create')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                v-model={[this.name, 'value']}
-                placeholder={t(
-                  'resource.task_group_option.please_enter_keywords'
-                )}
-              ></NInput>
+              <Search
+                  placeholder={t(
+                      'resource.task_group_option.please_enter_keywords'
+                  )}
+                  v-model:value={this.name}
+                  onSearch={this.onSearch}
+              ></Search>
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
                   <SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
index ee9233a67a..b197319159 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
@@ -26,7 +26,6 @@ import {
 import {
   NButton,
   NIcon,
-  NInput,
   NDataTable,
   NPagination,
   NSelect,
@@ -41,6 +40,7 @@ import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
 import { useRouter } from 'vue-router'
 import FormModal from '@/views/resource/task-group/queue/components/form-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 import type { Ref } from 'vue'
 import type { Router } from 'vue-router'
 
@@ -176,20 +176,18 @@ const taskGroupQueue = defineComponent({
               v-model:value={this.searchParamRef.groupId}
               placeholder={t('resource.task_group_queue.task_group_name')}
             />
-            <NInput
-              allowInput={this.trim}
-              size='small'
-              v-model={[this.searchParamRef.processName, 'value']}
-              placeholder={t(
-                'resource.task_group_queue.workflow_instance_name'
-              )}
-            ></NInput>
-            <NInput
-              allowInput={this.trim}
-              size='small'
-              v-model={[this.searchParamRef.instanceName, 'value']}
-              placeholder={t('resource.task_group_queue.task_instance_name')}
-            ></NInput>
+            <Search
+                v-model:value={this.searchParamRef.processName}
+                placeholder={t(
+                    'resource.task_group_queue.workflow_instance_name'
+                )}
+              onSearch={onSearch}
+            ></Search>
+            <Search
+                v-model:value={this.searchParamRef.instanceName}
+                placeholder={t('resource.task_group_queue.task_instance_name')}
+                onSearch ={onSearch}
+            ></Search>
             <NButton size='small' type='primary' onClick={onSearch}>
               <NIcon>
                 <SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
index 3df5275492..2338f3e603 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
@@ -29,14 +29,14 @@ import {
   NSpace,
   NDataTable,
   NButton,
-  NPagination,
-  NInput
+  NPagination
 } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import Card from '@/components/card'
 import FolderModal from './components/function-modal'
+import Search from "@/components/input-search";
 import styles from './index.module.scss'
 
 export default defineComponent({
@@ -115,11 +115,10 @@ export default defineComponent({
               {t('resource.function.create_udf_function')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
+              <Search
                 placeholder={t('resource.function.enter_keyword_tips')}
-                v-model={[this.searchVal, 'value']}
+                v-model:value={this.searchVal}
+                onSearch={this.handleSearch}
               />
               <NButton type='primary' size='small' onClick={this.handleSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
index 6290f60dc4..a7d69a8fe7 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
@@ -30,7 +30,6 @@ import {
   NDataTable,
   NButton,
   NPagination,
-  NInput,
   NBreadcrumb,
   NBreadcrumbItem
 } from 'naive-ui'
@@ -41,6 +40,7 @@ import Card from '@/components/card'
 import FolderModal from './components/folder-modal'
 import UploadModal from './components/upload-modal'
 import styles from './index.module.scss'
+import Search from "@/components/input-search";
 
 export default defineComponent({
   name: 'resource-manage',
@@ -148,11 +148,10 @@ export default defineComponent({
               </NButton>
             </NSpace>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
+              <Search
                 placeholder={t('resource.udf.enter_keyword_tips')}
-                v-model={[this.searchVal, 'value']}
+                v-model:value={this.searchVal}
+                onSearch={this.handleSearch}
               />
               <NButton type='primary' size='small' onClick={this.handleSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
index b092a26672..70b9b7171a 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import AlarmGroupModal from './components/alarm-group-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const alarmGroupManage = defineComponent({
   name: 'alarm-group-manage',
@@ -117,12 +117,10 @@ const alarmGroupManage = defineComponent({
               {t('security.alarm_group.create_alarm_group')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.alarm_group.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
index ae2df2af1b..7963331e44 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
@@ -25,7 +25,6 @@ import {
 } from 'vue'
 import {
   NButton,
-  NInput,
   NIcon,
   NDataTable,
   NPagination,
@@ -39,6 +38,7 @@ import { useUserInfo } from './use-userinfo'
 import { useColumns } from './use-columns'
 import { useTable } from './use-table'
 import type { IRecord } from './types'
+import Search from "@/components/input-search";
 
 const AlarmInstanceManage = defineComponent({
   name: 'alarm-instance-manage',
@@ -129,13 +129,12 @@ const AlarmInstanceManage = defineComponent({
                   </NButton>
                 )}
                 <NSpace justify='end' wrap={false}>
-                  <NInput
-                    allowInput={this.trim}
-                    v-model={[this.searchVal, 'value']}
-                    size='small'
+                  <Search
+                    v-model:value={this.searchVal}
                     placeholder={`${t(
                       'security.alarm_instance.search_input_tips'
                     )}`}
+                    onSearch={onUpdatedList}
                   />
                   <NButton type='primary' size='small' onClick={onUpdatedList}>
                     <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
index 965474615d..e12f55f52c 100644
--- a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import ClusterModal from './components/cluster-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const clusterManage = defineComponent({
   name: 'cluster-manage',
@@ -122,12 +122,10 @@ const clusterManage = defineComponent({
               {t('security.cluster.create_cluster')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.cluster.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
index 8f9449dd42..7b54ea89c6 100644
--- a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import EnvironmentModal from './components/environment-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const environmentManage = defineComponent({
   name: 'environment-manage',
@@ -122,12 +122,10 @@ const environmentManage = defineComponent({
               {t('security.environment.create_environment')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.environment.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
index e41c79cc27..ceeaec62b6 100644
--- a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import K8sNamespaceModal from './components/k8s-namespace-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const k8sNamespaceManage = defineComponent({
   name: 'k8s-namespace-manage',
@@ -117,12 +117,10 @@ const k8sNamespaceManage = defineComponent({
               {t('security.k8s_namespace.create_namespace')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.k8s_namespace.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
index 35432d32df..536a351810 100644
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
@@ -24,7 +24,6 @@ import {
 } from 'vue'
 import {
   NButton,
-  NInput,
   NIcon,
   NDataTable,
   NPagination,
@@ -35,6 +34,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import TenantModal from './components/tenant-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const tenementManage = defineComponent({
   name: 'tenement-manage',
@@ -112,12 +112,10 @@ const tenementManage = defineComponent({
               {t('security.tenant.create_tenant')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.tenant.search_tips')}
-                clearable
+                onSearch={this.handleSearch}
               />
               <NButton size='small' type='primary' onClick={this.handleSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
index d9b167fc09..c18b30a2b3 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import TokenModal from './components/token-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const tokenManage = defineComponent({
   name: 'token-manage',
@@ -122,12 +122,10 @@ const tokenManage = defineComponent({
               {t('security.token.create_token')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.token.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
index 0e7738f523..0c592ee887 100644
--- a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
@@ -15,10 +15,13 @@
  * limitations under the License.
  */
 
-import { defineComponent, getCurrentInstance, toRefs } from 'vue'
+import {
+  defineComponent,
+  getCurrentInstance,
+  toRefs
+} from 'vue'
 import {
   NButton,
-  NInput,
   NIcon,
   NSpace,
   NDataTable,
@@ -31,6 +34,7 @@ import { useTable } from './use-table'
 import UserDetailModal from './components/user-detail-modal'
 import AuthorizeModal from './components/authorize-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const UsersManage = defineComponent({
   name: 'user-manage',
@@ -79,11 +83,9 @@ const UsersManage = defineComponent({
               {this.t('security.user.create_user')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
+              <Search
                 v-model:value={this.searchVal}
-                size='small'
-                clearable
+                onSearch={this.onUpdatedList}
               />
               <NButton type='primary' size='small' onClick={this.onUpdatedList}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
index a1b6309f7c..9272731300 100644
--- a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import WorkerGroupModal from './components/worker-group-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const workerGroupManage = defineComponent({
   name: 'worker-group-manage',
@@ -122,12 +122,10 @@ const workerGroupManage = defineComponent({
               {t('security.worker_group.create_worker_group')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.worker_group.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
index db7780bdac..d7de7fb00e 100644
--- a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
@@ -26,7 +26,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import YarnQueueModal from './components/yarn-queue-modal'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 
 const yarnQueueManage = defineComponent({
   name: 'yarn-queue-manage',
@@ -122,12 +122,10 @@ const yarnQueueManage = defineComponent({
               {t('security.yarn_queue.create_queue')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                clearable
-                v-model={[this.searchVal, 'value']}
+              <Search
+                v-model:value={this.searchVal}
                 placeholder={t('security.yarn_queue.search_tips')}
+                onSearch={onSearch}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>