From d41dac0602c1829952c541745b745a9f7a15a4cf Mon Sep 17 00:00:00 2001
From: labbomb <739955946@qq.com>
Date: Fri, 15 Jul 2022 17:14:47 +0800
Subject: [PATCH] feat: Add trim method to all input (#10984)

---
 .../src/views/data-quality/rule/index.tsx      |  8 ++++++--
 .../views/data-quality/task-result/index.tsx   |  8 ++++++--
 .../src/views/datasource/list/detail.tsx       | 18 ++++++++++++++++--
 .../src/views/datasource/list/index.tsx        |  8 ++++++--
 dolphinscheduler-ui/src/views/login/index.tsx  |  8 ++++++--
 .../monitor/statistics/audit-log/index.tsx     |  8 ++++++--
 .../src/views/password/index.tsx               |  7 +++++--
 .../src/views/profile/index.tsx                |  9 +++++++--
 .../projects/list/components/project-modal.tsx |  9 +++++++--
 .../src/views/projects/list/index.tsx          |  8 ++++++--
 .../views/projects/task/definition/index.tsx   |  9 +++++++--
 .../src/views/projects/task/instance/index.tsx | 11 +++++++++--
 .../workflow/components/dag/dag-save-modal.tsx |  8 ++++++--
 .../definition/components/import-modal.tsx     |  7 +++++--
 .../definition/components/start-modal.tsx      | 11 +++++++++--
 .../definition/components/timing-modal.tsx     |  9 +++++++--
 .../projects/workflow/definition/index.tsx     |  7 +++++--
 .../components/process-instance-condition.tsx  | 10 ++++++++--
 .../src/views/resource/file/create/index.tsx   |  9 +++++++--
 .../src/views/resource/file/folder/index.tsx   |  9 +++++++--
 .../src/views/resource/file/index.tsx          |  8 ++++++--
 .../src/views/resource/file/rename/index.tsx   |  8 ++++++--
 .../src/views/resource/file/upload/index.tsx   |  9 +++++++--
 .../option/components/form-modal.tsx           |  8 ++++++--
 .../views/resource/task-group/option/index.tsx |  8 ++++++--
 .../task-group/queue/components/form-modal.tsx |  9 ++++++---
 .../views/resource/task-group/queue/index.tsx  |  9 +++++++--
 .../udf/function/components/function-modal.tsx | 12 ++++++++++--
 .../src/views/resource/udf/function/index.tsx  |  8 ++++++--
 .../udf/resource/components/folder-modal.tsx   |  9 +++++++--
 .../udf/resource/components/upload-modal.tsx   |  9 +++++++--
 .../src/views/resource/udf/resource/index.tsx  |  8 ++++++--
 .../components/alarm-group-modal.tsx           |  8 ++++++--
 .../security/alarm-group-manage/index.tsx      |  8 ++++++--
 .../security/alarm-instance-manage/detail.tsx  |  8 ++++++--
 .../security/alarm-instance-manage/index.tsx   |  8 ++++++--
 .../components/cluster-modal.tsx               | 10 ++++++++--
 .../views/security/cluster-manage/index.tsx    |  8 ++++++--
 .../components/environment-modal.tsx           |  9 +++++++--
 .../security/environment-manage/index.tsx      |  8 ++++++--
 .../components/k8s-namespace-modal.tsx         |  9 +++++++--
 .../security/k8s-namespace-manage/index.tsx    |  8 ++++++--
 .../tenant-manage/components/tenant-modal.tsx  |  8 ++++++--
 .../src/views/security/tenant-manage/index.tsx |  8 ++++++--
 .../token-manage/components/token-modal.tsx    |  8 ++++++--
 .../src/views/security/token-manage/index.tsx  |  8 ++++++--
 .../components/user-detail-modal.tsx           | 11 +++++++++--
 .../src/views/security/user-manage/index.tsx   |  9 ++++++---
 .../components/worker-group-modal.tsx          |  7 +++++--
 .../security/worker-group-manage/index.tsx     |  8 ++++++--
 .../components/yarn-queue-modal.tsx            |  8 ++++++--
 .../views/security/yarn-queue-manage/index.tsx |  8 ++++++--
 52 files changed, 347 insertions(+), 106 deletions(-)

diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
index 070c3fe16b..bcb6fc0dc0 100644
--- a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
+++ b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
 import {
   NSpace,
   NInput,
@@ -73,6 +73,8 @@ const TaskResult = defineComponent({
       ruleEntryData.value = ruleJson
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       requestTableData()
     })
@@ -87,7 +89,8 @@ const TaskResult = defineComponent({
       onConfirm,
       onSearch,
       ruleEntryData,
-      viewRuleEntry
+      viewRuleEntry,
+      trim
     }
   },
   render() {
@@ -111,6 +114,7 @@ const TaskResult = defineComponent({
         <NCard>
           <NSpace justify='end'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.searchVal, 'value']}
               size='small'
               placeholder={t('data_quality.rule.name')}
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 eb43a950ce..4dfdd9d386 100644
--- a/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
+++ b/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NSpace,
   NInput,
@@ -59,6 +59,8 @@ const TaskResult = defineComponent({
       requestTableData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestTableData()
@@ -73,7 +75,8 @@ const TaskResult = defineComponent({
       ...toRefs(variables),
       requestTableData,
       onUpdatePageSize,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -84,6 +87,7 @@ const TaskResult = defineComponent({
         <NCard>
           <NSpace justify='end'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.searchVal, 'value']}
               size='small'
               placeholder={t('data_quality.task_result.task_name')}
diff --git a/dolphinscheduler-ui/src/views/datasource/list/detail.tsx b/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
index cd521e3e54..3787918721 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/detail.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import {
   NButton,
   NSpin,
@@ -84,6 +84,8 @@ const DetailModal = defineComponent({
     const onChangeType = changeType
     const onChangePort = changePort
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.show,
       async () => {
@@ -105,7 +107,8 @@ const DetailModal = defineComponent({
       onChangePort,
       onSubmit,
       onTest,
-      onCancel
+      onCancel,
+      trim
     }
   },
   render() {
@@ -168,6 +171,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-data-source-name'
                     v-model={[detailForm.name, 'value']}
                     maxlength={60}
@@ -176,6 +180,7 @@ const DetailModal = defineComponent({
                 </NFormItem>
                 <NFormItem label={t('datasource.description')} path='note'>
                   <NInput
+                  allowInput={this.trim}
                     class='input-data-source-description'
                     v-model={[detailForm.note, 'value']}
                     type='textarea'
@@ -188,6 +193,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-ip'
                     v-model={[detailForm.host, 'value']}
                     type='text'
@@ -216,6 +222,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                  allowInput={this.trim}
                     v-model={[detailForm.principal, 'value']}
                     type='text'
                     placeholder={t('datasource.principal_tips')}
@@ -227,6 +234,7 @@ const DetailModal = defineComponent({
                   path='javaSecurityKrb5Conf'
                 >
                   <NInput
+                  allowInput={this.trim}
                     v-model={[detailForm.javaSecurityKrb5Conf, 'value']}
                     type='text'
                     placeholder={t('datasource.krb5_conf_tips')}
@@ -238,6 +246,7 @@ const DetailModal = defineComponent({
                   path='loginUserKeytabUsername'
                 >
                   <NInput
+                  allowInput={this.trim}
                     v-model={[detailForm.loginUserKeytabUsername, 'value']}
                     type='text'
                     placeholder={t('datasource.keytab_username_tips')}
@@ -249,6 +258,7 @@ const DetailModal = defineComponent({
                   path='loginUserKeytabPath'
                 >
                   <NInput
+                  allowInput={this.trim}
                     v-model={[detailForm.loginUserKeytabPath, 'value']}
                     type='text'
                     placeholder={t('datasource.keytab_path_tips')}
@@ -260,6 +270,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-username'
                     v-model={[detailForm.userName, 'value']}
                     type='text'
@@ -272,6 +283,7 @@ const DetailModal = defineComponent({
                   path='password'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-password'
                     v-model={[detailForm.password, 'value']}
                     type='password'
@@ -284,6 +296,7 @@ const DetailModal = defineComponent({
                   show-require-mark={requiredDataBase}
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-data-base'
                     v-model={[detailForm.database, 'value']}
                     type='text'
@@ -313,6 +326,7 @@ const DetailModal = defineComponent({
                   path='other'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-jdbc-params'
                     v-model={[detailForm.other, 'value']}
                     type='textarea'
diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.tsx b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
index 4ab30cf871..f0a559aaba 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
 import {
   NButton,
   NInput,
@@ -61,6 +61,8 @@ const list = defineComponent({
       showDetailModal.value = true
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       changePage(1)
       columns.value = getColumns()
@@ -79,7 +81,8 @@ const list = defineComponent({
       changePage,
       changePageSize,
       onCreate,
-      onUpdatedList: updateList
+      onUpdatedList: updateList,
+      trim
     }
   },
   render() {
@@ -119,6 +122,7 @@ const list = defineComponent({
                 >
                   <div class={styles['conditions-search-input']}>
                     <NInput
+                  allowInput={this.trim}
                       v-model={[this.searchVal, 'value']}
                       placeholder={`${t('datasource.search_input_tips')}`}
                     />
diff --git a/dolphinscheduler-ui/src/views/login/index.tsx b/dolphinscheduler-ui/src/views/login/index.tsx
index 6328a6a4e7..0da17e1f53 100644
--- a/dolphinscheduler-ui/src/views/login/index.tsx
+++ b/dolphinscheduler-ui/src/views/login/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, withKeys } from 'vue'
+import { defineComponent, getCurrentInstance, toRefs, withKeys } from 'vue'
 import styles from './index.module.scss'
 import {
   NInput,
@@ -47,9 +47,11 @@ const login = defineComponent({
       themeStore.setDarkTheme()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     cookies.set('language', localesStore.getLocales, { path: '/' })
 
-    return { t, handleChange, handleLogin, ...toRefs(state), localesStore }
+    return { t, handleChange, handleLogin, ...toRefs(state), localesStore, trim }
   },
   render() {
     return (
@@ -79,6 +81,7 @@ const login = defineComponent({
                 path='userName'
               >
                 <NInput
+                  allowInput={this.trim}
                   class='input-user-name'
                   type='text'
                   size='large'
@@ -94,6 +97,7 @@ const login = defineComponent({
                 path='userPassword'
               >
                 <NInput
+                  allowInput={this.trim}
                   class='input-password'
                   type='password'
                   size='large'
diff --git a/dolphinscheduler-ui/src/views/monitor/statistics/audit-log/index.tsx b/dolphinscheduler-ui/src/views/monitor/statistics/audit-log/index.tsx
index a3ec1d0762..2b8da93fb9 100644
--- a/dolphinscheduler-ui/src/views/monitor/statistics/audit-log/index.tsx
+++ b/dolphinscheduler-ui/src/views/monitor/statistics/audit-log/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NSpace,
   NInput,
@@ -57,6 +57,8 @@ const AuditLog = defineComponent({
       requestTableData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestTableData()
@@ -71,7 +73,8 @@ const AuditLog = defineComponent({
       ...toRefs(variables),
       requestTableData,
       onUpdatePageSize,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -82,6 +85,7 @@ const AuditLog = defineComponent({
         <Card>
           <NSpace justify='end'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.userName, 'value']}
               size='small'
               placeholder={t('monitor.audit_log.user_name')}
diff --git a/dolphinscheduler-ui/src/views/password/index.tsx b/dolphinscheduler-ui/src/views/password/index.tsx
index 44621c46ab..635538423d 100644
--- a/dolphinscheduler-ui/src/views/password/index.tsx
+++ b/dolphinscheduler-ui/src/views/password/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, toRefs } from 'vue'
 import { NForm, NFormItem, NButton, NInput } from 'naive-ui'
 import { useForm } from './use-form'
 import { useUpdate } from './use-update'
@@ -26,8 +26,9 @@ const password = defineComponent({
   setup() {
     const { state, rules, t } = useForm()
     const { handleUpdate } = useUpdate(state)
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
-    return { ...toRefs(state), t, handleUpdate, rules }
+    return { ...toRefs(state), t, handleUpdate, rules, trim }
   },
   render() {
     const { t } = this
@@ -44,6 +45,7 @@ const password = defineComponent({
               >
                 <NFormItem label={t('password.password')} path='password'>
                   <NInput
+                  allowInput={this.trim}
                     type='password'
                     placeholder={t('password.password_tips')}
                     v-model={[this.passwordForm.password, 'value']}
@@ -61,6 +63,7 @@ const password = defineComponent({
                   first
                 >
                   <NInput
+                  allowInput={this.trim}
                     type='password'
                     placeholder={t('password.confirm_password_tips')}
                     v-model={[this.passwordForm.confirmPassword, 'value']}
diff --git a/dolphinscheduler-ui/src/views/profile/index.tsx b/dolphinscheduler-ui/src/views/profile/index.tsx
index c17dbb243f..da0cdfc3af 100644
--- a/dolphinscheduler-ui/src/views/profile/index.tsx
+++ b/dolphinscheduler-ui/src/views/profile/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
 import { useForm } from './use-form'
 import { NButton, NForm, NFormItem, NInput } from 'naive-ui'
 import { useUserinfo } from './use-userinfo'
@@ -53,7 +53,9 @@ const profile = defineComponent({
       await getUserInfo()
     }
 
-    return { ...toRefs(state), showModalRef, t, onCancel, onConfirm }
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
+    return { ...toRefs(state), showModalRef, t, onCancel, onConfirm, trim }
   },
   render() {
     const { t, onCancel, onConfirm } = this
@@ -91,18 +93,21 @@ const profile = defineComponent({
               <NForm rules={this.rules} ref='profileFormRef'>
                 <NFormItem label={t('profile.username')} path='username'>
                   <NInput
+                  allowInput={this.trim}
                     v-model={[this.profileForm.username, 'value']}
                     placeholder={t('profile.username_tips')}
                   />
                 </NFormItem>
                 <NFormItem label={t('profile.email')} path='email'>
                   <NInput
+                  allowInput={this.trim}
                     v-model={[this.profileForm.email, 'value']}
                     placeholder={t('profile.email_tips')}
                   />
                 </NFormItem>
                 <NFormItem label={t('profile.phone')} path='phone'>
                   <NInput
+                  allowInput={this.trim}
                     v-model={[this.profileForm.phone, 'value']}
                     placeholder={t('profile.phone_tips')}
                   />
diff --git a/dolphinscheduler-ui/src/views/projects/list/components/project-modal.tsx b/dolphinscheduler-ui/src/views/projects/list/components/project-modal.tsx
index e90b8f530b..7e67942ee9 100644
--- a/dolphinscheduler-ui/src/views/projects/list/components/project-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/list/components/project-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useForm } from './use-form'
 import Modal from '@/components/modal'
@@ -62,6 +62,8 @@ const ProjectModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.statusRef,
       () => {
@@ -88,7 +90,7 @@ const ProjectModal = defineComponent({
       }
     )
 
-    return { ...toRefs(variables), t, cancelModal, confirmModal }
+    return { ...toRefs(variables), t, cancelModal, confirmModal, trim}
   },
   render() {
     const { t } = this
@@ -110,6 +112,7 @@ const ProjectModal = defineComponent({
         <NForm rules={this.rules} ref='projectFormRef'>
           <NFormItem label={t('project.list.project_name')} path='projectName'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.model.projectName, 'value']}
               placeholder={t('project.list.project_tips')}
               class='input-project-name'
@@ -117,6 +120,7 @@ const ProjectModal = defineComponent({
           </NFormItem>
           <NFormItem label={t('project.list.owned_users')} path='userName'>
             <NInput
+                  allowInput={this.trim}
               disabled={true}
               v-model={[this.model.userName, 'value']}
               placeholder={t('project.list.username_tips')}
@@ -127,6 +131,7 @@ const ProjectModal = defineComponent({
             path='description'
           >
             <NInput
+                  allowInput={this.trim}
               v-model={[this.model.description, 'value']}
               type='textarea'
               placeholder={t('project.list.description_tips')}
diff --git a/dolphinscheduler-ui/src/views/projects/list/index.tsx b/dolphinscheduler-ui/src/views/projects/list/index.tsx
index 4029049ec4..52c92c710d 100644
--- a/dolphinscheduler-ui/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/list/index.tsx
@@ -26,7 +26,7 @@ import {
   NPagination,
   NSpace
 } from 'naive-ui'
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ProjectModal from './components/project-modal'
 import styles from './index.module.scss'
@@ -70,6 +70,8 @@ const list = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -87,7 +89,8 @@ const list = defineComponent({
       handleSearch,
       onCancelModal,
       onConfirmModal,
-      handleChangePageSize
+      handleChangePageSize,
+      trim
     }
   },
   render() {
@@ -106,6 +109,7 @@ const list = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 v-model={[this.searchVal, 'value']}
                 placeholder={t('project.list.project_tips')}
diff --git a/dolphinscheduler-ui/src/views/projects/task/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/task/definition/index.tsx
index d7f9027adf..5ddeccee14 100644
--- a/dolphinscheduler-ui/src/views/projects/task/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   NButton,
@@ -90,6 +90,8 @@ const TaskDefinition = defineComponent({
         onRefresh()
       }
     }
+
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -110,7 +112,8 @@ const TaskDefinition = defineComponent({
       onCreate,
       onTaskSubmit,
       onTaskCancel,
-      projectCode
+      projectCode,
+      trim
     }
   },
   render() {
@@ -135,12 +138,14 @@ const TaskDefinition = defineComponent({
             </div>
             <NSpace justify='end'>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchTaskName, 'value']}
                 placeholder={t('project.task.task_name')}
               />
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchWorkflowName, 'value']}
diff --git a/dolphinscheduler-ui/src/views/projects/task/instance/index.tsx b/dolphinscheduler-ui/src/views/projects/task/instance/index.tsx
index 9faa15f3f9..9986f8844a 100644
--- a/dolphinscheduler-ui/src/views/projects/task/instance/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/instance/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NSpace,
   NInput,
@@ -99,6 +99,8 @@ const TaskInstance = defineComponent({
       getLogs(row)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestTableData()
@@ -130,7 +132,8 @@ const TaskInstance = defineComponent({
       onUpdatePageSize,
       onSearch,
       onConfirmModal,
-      refreshLogs
+      refreshLogs,
+      trim
     }
   },
   render() {
@@ -149,24 +152,28 @@ const TaskInstance = defineComponent({
         <NCard>
           <NSpace justify='end' wrap={false}>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.searchVal, 'value']}
               size='small'
               placeholder={t('project.task.task_name')}
               clearable
             />
             <NInput
+                  allowInput={this.trim}
               v-model={[this.processInstanceName, 'value']}
               size='small'
               placeholder={t('project.task.workflow_instance')}
               clearable
             />
             <NInput
+                  allowInput={this.trim}
               v-model={[this.executorName, 'value']}
               size='small'
               placeholder={t('project.task.executor')}
               clearable
             />
             <NInput
+                  allowInput={this.trim}
               v-model={[this.host, 'value']}
               size='small'
               placeholder={t('project.task.host')}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-save-modal.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-save-modal.tsx
index 8379da16fe..bbfee2d312 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-save-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-save-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, ref, computed, onMounted, watch } from 'vue'
+import { defineComponent, PropType, ref, computed, onMounted, watch, getCurrentInstance } from 'vue'
 import Modal from '@/components/modal'
 import { useI18n } from 'vue-i18n'
 import {
@@ -172,6 +172,8 @@ export default defineComponent({
       }
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => updateModalData())
 
     watch(
@@ -189,10 +191,12 @@ export default defineComponent({
       >
         <NForm model={formValue.value} rules={rule} ref={formRef}>
           <NFormItem label={t('project.dag.workflow_name')} path='name'>
-            <NInput v-model:value={formValue.value.name} class='input-name' />
+            <NInput
+                  allowInput={trim} v-model:value={formValue.value.name} class='input-name' />
           </NFormItem>
           <NFormItem label={t('project.dag.description')} path='description'>
             <NInput
+                  allowInput={trim}
               type='textarea'
               v-model:value={formValue.value.description}
               class='input-description'
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/import-modal.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/import-modal.tsx
index 9d99edef8e..dbe94621e8 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/import-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/import-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
 import { useForm } from './use-form'
@@ -49,12 +49,14 @@ export default defineComponent({
       importState.importForm.name = file.name
       importState.importForm.file = file.file
     }
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
     return {
       hideModal,
       handleImport,
       customRequest,
-      ...toRefs(importState)
+      ...toRefs(importState),
+      trim
     }
   },
 
@@ -88,6 +90,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('project.workflow.file_name')} path='name'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.importForm.name, 'value']}
               placeholder={''}
               disabled
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
index d7cc385104..32e0765526 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/start-modal.tsx
@@ -22,7 +22,8 @@ import {
   h,
   onMounted,
   ref,
-  watch
+  watch,
+  getCurrentInstance
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -183,6 +184,8 @@ export default defineComponent({
       variables.startParamsList.splice(index, 1)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       getWorkerGroups()
       getAlertGroups()
@@ -214,7 +217,8 @@ export default defineComponent({
       updateParamsList,
       ...toRefs(variables),
       ...toRefs(startState),
-      ...toRefs(props)
+      ...toRefs(props),
+      trim
     }
   },
 
@@ -357,6 +361,7 @@ export default defineComponent({
                       {t('project.workflow.custom_parallelism')}
                     </NCheckbox>
                     <NInput
+                  allowInput={this.trim}
                       disabled={!this.parallelismRef}
                       placeholder={t(
                         'project.workflow.please_enter_parallelism'
@@ -395,6 +400,7 @@ export default defineComponent({
                       />
                     ) : (
                       <NInput
+                  allowInput={this.trim}
                         clearable
                         type='textarea'
                         v-model:value={this.startForm.scheduleTime}
@@ -420,6 +426,7 @@ export default defineComponent({
                 {this.startParamsList.map((item, index) => (
                   <NSpace class={styles.startup} key={Date.now() + index}>
                     <NInput
+                  allowInput={this.trim}
                       pair
                       separator=':'
                       placeholder={['prop', 'value']}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/timing-modal.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/timing-modal.tsx
index 786dad87b6..7f5fc5216b 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/timing-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/timing-modal.tsx
@@ -23,7 +23,8 @@ import {
   onMounted,
   ref,
   watch,
-  computed
+  computed,
+  getCurrentInstance
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -184,6 +185,8 @@ export default defineComponent({
       })
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       getWorkerGroups()
       getAlertGroups()
@@ -225,7 +228,8 @@ export default defineComponent({
       handlePreview,
       ...toRefs(variables),
       ...toRefs(timingState),
-      ...toRefs(props)
+      ...toRefs(props),
+      trim
     }
   },
 
@@ -262,6 +266,7 @@ export default defineComponent({
                 {{
                   trigger: () => (
                     <NInput
+                  allowInput={this.trim}
                       style={{ width: '80%' }}
                       readonly={true}
                       v-model:value={this.timingForm.crontab}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index 4563b66fb3..dfe0aee6b1 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -27,7 +27,7 @@ import {
   NTooltip,
   NPopconfirm
 } from 'naive-ui'
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import ImportModal from './components/import-modal'
@@ -87,6 +87,7 @@ export default defineComponent({
         path: `/projects/${projectCode}/workflow/definitions/create`
       })
     }
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
     watch(useI18n().locale, () => {
       createColumns(variables)
@@ -107,7 +108,8 @@ export default defineComponent({
       batchExportWorkflow,
       batchCopyWorkflow,
       handleCopyUpdateList,
-      ...toRefs(variables)
+      ...toRefs(variables),
+      trim
     }
   },
   render() {
@@ -141,6 +143,7 @@ export default defineComponent({
                 </div>
                 <div class={styles.list}>
                   <NInput
+                  allowInput={this.trim}
                     placeholder={t('resource.function.enter_keyword_tips')}
                     v-model={[this.searchVal, 'value']}
                   />
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
index d532b44a89..9322d40a41 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
@@ -25,7 +25,7 @@ import {
   NSelect,
   NIcon
 } from 'naive-ui'
-import { defineComponent, ref } from 'vue'
+import { defineComponent, getCurrentInstance, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
 import { stateType } from '@/common/common'
@@ -64,13 +64,16 @@ export default defineComponent({
       })
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     return {
       searchValRef,
       executorNameRef,
       hostRef,
       stateTypeRef,
       startEndTimeRef,
-      handleSearch
+      handleSearch,
+      trim
     }
   },
   render() {
@@ -80,18 +83,21 @@ export default defineComponent({
       <NGrid xGap={6} cols={24}>
         <NGridItem offset={5} span={3}>
           <NInput
+                  allowInput={this.trim}
             v-model:value={this.searchValRef}
             placeholder={t('project.workflow.name')}
           />
         </NGridItem>
         <NGridItem span={3}>
           <NInput
+                  allowInput={this.trim}
             v-model:value={this.executorNameRef}
             placeholder={t('project.workflow.executor')}
           />
         </NGridItem>
         <NGridItem span={3}>
           <NInput
+                  allowInput={this.trim}
             v-model:value={this.hostRef}
             placeholder={t('project.workflow.host')}
           />
diff --git a/dolphinscheduler-ui/src/views/resource/file/create/index.tsx b/dolphinscheduler-ui/src/views/resource/file/create/index.tsx
index fdff756bff..49c2a8ab32 100644
--- a/dolphinscheduler-ui/src/views/resource/file/create/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/create/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
@@ -54,11 +54,14 @@ export default defineComponent({
       router.push({ name, params: { id } })
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     return {
       fileSuffixOptions,
       handleFile,
       handleReturn,
-      ...toRefs(state)
+      ...toRefs(state),
+      trim
     }
   },
   render() {
@@ -72,6 +75,7 @@ export default defineComponent({
         >
           <NFormItem label={t('resource.file.file_name')} path='fileName'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.fileForm.fileName, 'value']}
               placeholder={t('resource.file.enter_name_tips')}
               style={{ width: '300px' }}
@@ -89,6 +93,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('resource.file.description')} path='description'>
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.fileForm.description, 'value']}
               placeholder={t('resource.file.enter_description_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/file/folder/index.tsx b/dolphinscheduler-ui/src/views/resource/file/folder/index.tsx
index 88447ca8f3..2fa0824c9a 100644
--- a/dolphinscheduler-ui/src/views/resource/file/folder/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/folder/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, PropType } from 'vue'
+import { defineComponent, toRefs, PropType, getCurrentInstance } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -45,10 +45,13 @@ export default defineComponent({
       handleCreateFolder(ctx.emit, hideModal, resetForm)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     return {
       hideModal,
       handleFolder,
-      ...toRefs(state)
+      ...toRefs(state),
+      trim
     }
   },
   render() {
@@ -66,6 +69,7 @@ export default defineComponent({
         <NForm rules={this.rules} ref='folderFormRef'>
           <NFormItem label={t('resource.file.folder_name')} path='name'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.folderForm.name, 'value']}
               placeholder={t('resource.file.enter_name_tips')}
               class='input-directory-name'
@@ -73,6 +77,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('resource.file.description')} path='description'>
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.folderForm.description, 'value']}
               placeholder={t('resource.file.enter_description_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/file/index.tsx b/dolphinscheduler-ui/src/views/resource/file/index.tsx
index f3ec64cd2c..b134679554 100644
--- a/dolphinscheduler-ui/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/index.tsx
@@ -16,7 +16,7 @@
  */
 
 import { useRouter } from 'vue-router'
-import { defineComponent, onMounted, ref, reactive, Ref } from 'vue'
+import { defineComponent, onMounted, ref, reactive, Ref, getCurrentInstance } from 'vue'
 import {
   NIcon,
   NSpace,
@@ -167,6 +167,8 @@ export default defineComponent({
       }
     ])
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       const currFileId = Number(router.currentRoute.value.params.id) || -1
       if (currFileId === -1) {
@@ -235,7 +237,8 @@ export default defineComponent({
       handleGoRoot,
       pagination: paginationReactive,
       renameInfo,
-      breadcrumbItemsRef
+      breadcrumbItemsRef,
+      trim
     }
   },
   render() {
@@ -282,6 +285,7 @@ export default defineComponent({
                 </div>
                 <div class={styles.list}>
                   <NInput
+                  allowInput={this.trim}
                     placeholder={t('resource.file.enter_keyword_tips')}
                     v-model={[this.searchRef, 'value']}
                   />
diff --git a/dolphinscheduler-ui/src/views/resource/file/rename/index.tsx b/dolphinscheduler-ui/src/views/resource/file/rename/index.tsx
index d57302c362..b68c87fd73 100644
--- a/dolphinscheduler-ui/src/views/resource/file/rename/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/rename/index.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { defineComponent, toRefs, PropType, watch } from 'vue'
+import { defineComponent, toRefs, PropType, watch, getCurrentInstance } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -56,6 +56,8 @@ export default defineComponent({
       handleRenameFile(ctx.emit, hideModal, resetForm)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.show,
       () => {
@@ -65,7 +67,7 @@ export default defineComponent({
       }
     )
 
-    return { hideModal, handleFile, ...toRefs(state) }
+    return { hideModal, handleFile, ...toRefs(state), trim }
   },
   render() {
     const { t } = useI18n()
@@ -82,6 +84,7 @@ export default defineComponent({
         <NForm rules={this.rules} ref='renameFormRef'>
           <NFormItem label={t('resource.file.name')} path='name'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.renameForm.name, 'value']}
               placeholder={t('resource.file.enter_name_tips')}
               class='input-name'
@@ -89,6 +92,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('resource.file.description')} path='description'>
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.renameForm.description, 'value']}
               placeholder={t('resource.file.enter_description_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx b/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
index 9da3228d86..041591bea4 100644
--- a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { defineComponent, toRefs, PropType } from 'vue'
+import { defineComponent, toRefs, PropType, getCurrentInstance } from 'vue'
 import { NButton, NForm, NFormItem, NInput, NUpload } from 'naive-ui'
 
 import { useI18n } from 'vue-i18n'
@@ -57,12 +57,15 @@ export default defineComponent({
       state.uploadForm.file = ''
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     return {
       hideModal,
       customRequest,
       handleFile,
       removeFile,
-      ...toRefs(state)
+      ...toRefs(state),
+      trim
     }
   },
   render() {
@@ -84,6 +87,7 @@ export default defineComponent({
             ref='uploadFormNameRef'
           >
             <NInput
+                  allowInput={this.trim}
               v-model={[this.uploadForm.name, 'value']}
               placeholder={t('resource.file.enter_name_tips')}
               class='input-file-name'
@@ -91,6 +95,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('resource.file.description')} path='description'>
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.uploadForm.description, 'value']}
               placeholder={t('resource.file.enter_description_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/option/components/form-modal.tsx b/dolphinscheduler-ui/src/views/resource/task-group/option/components/form-modal.tsx
index c2f83d82a8..fcd20e41e5 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/option/components/form-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/option/components/form-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, onMounted, ref, Ref } from 'vue'
+import { defineComponent, PropType, toRefs, onMounted, ref, Ref, getCurrentInstance } from 'vue'
 import { NForm, NFormItem, NInput, NSelect, NInputNumber } from 'naive-ui'
 import { useForm } from '../use-form'
 import Modal from '@/components/modal'
@@ -87,7 +87,9 @@ const FormModal = defineComponent({
       emit('cancel')
     }
 
-    return { ...toRefs(state), t, onConfirm, onCancel, projectOptions }
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
+    return { ...toRefs(state), t, onConfirm, onCancel, projectOptions, trim }
   },
   render() {
     const { t, onConfirm, onCancel, show, status, projectOptions } = this
@@ -111,6 +113,7 @@ const FormModal = defineComponent({
         <NForm rules={this.rules} ref='formRef'>
           <NFormItem label={t('resource.task_group_option.name')} path='name'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.formData.name, 'value']}
               placeholder={t('resource.task_group_option.please_enter_name')}
             />
@@ -147,6 +150,7 @@ const FormModal = defineComponent({
             path='description'
           >
             <NInput
+                  allowInput={this.trim}
               v-model={[this.formData.description, 'value']}
               type='textarea'
               placeholder={t('resource.task_group_option.please_enter_desc')}
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 f1bc052d6e..2950c433c3 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ref, defineComponent, toRefs, reactive, onMounted } from 'vue'
+import { ref, defineComponent, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
 import {
   NButton,
   NIcon,
@@ -105,6 +105,8 @@ const taskGroupOption = defineComponent({
       showModalRef.value = true
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       requestData()
     })
@@ -122,7 +124,8 @@ const taskGroupOption = defineComponent({
       modelStatusRef,
       onCancel,
       onConfirm,
-      updateItemData
+      updateItemData,
+      trim
     }
   },
   render() {
@@ -157,6 +160,7 @@ const taskGroupOption = defineComponent({
             </div>
             <div class={styles.right}>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 v-model={[this.name, 'value']}
                 placeholder={t(
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/queue/components/form-modal.tsx b/dolphinscheduler-ui/src/views/resource/task-group/queue/components/form-modal.tsx
index 7fc884bf1e..cc932624cd 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/queue/components/form-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/queue/components/form-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, onMounted } from 'vue'
+import { defineComponent, PropType, toRefs, onMounted, getCurrentInstance } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useForm } from '../use-form'
 import Modal from '@/components/modal'
@@ -63,7 +63,9 @@ const FormModal = defineComponent({
       emit('cancel')
     }
 
-    return { ...toRefs(state), t, onConfirm, onCancel }
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
+    return { ...toRefs(state), t, onConfirm, onCancel, trim }
   },
   render() {
     const { t, onConfirm, onCancel, show } = this
@@ -80,7 +82,8 @@ const FormModal = defineComponent({
             label={t('resource.task_group_queue.priority')}
             path='priority'
           >
-            <NInput v-model:value={this.formData.priority} />
+            <NInput
+                  allowInput={this.trim} v-model:value={this.formData.priority} />
           </NFormItem>
         </NForm>
       </Modal>
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 e191ed7212..622a0f8e7b 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ref, defineComponent, toRefs, reactive, onMounted, Ref } from 'vue'
+import { ref, defineComponent, toRefs, reactive, onMounted, Ref, getCurrentInstance } from 'vue'
 import {
   NButton,
   NIcon,
@@ -99,6 +99,8 @@ const taskGroupQueue = defineComponent({
       resetTableData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       const taskGroupOptionsParams = {
         pageNo: 1,
@@ -134,7 +136,8 @@ const taskGroupQueue = defineComponent({
       onConfirm,
       showModalRef,
       updateItemData,
-      taskGroupOptions
+      taskGroupOptions,
+      trim
     }
   },
   render() {
@@ -168,6 +171,7 @@ const taskGroupQueue = defineComponent({
                 placeholder={t('resource.task_group_queue.task_group_name')}
               />
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 v-model={[this.searchParamRef.processName, 'value']}
                 placeholder={t(
@@ -175,6 +179,7 @@ const taskGroupQueue = defineComponent({
                 )}
               ></NInput>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 v-model={[this.searchParamRef.instanceName, 'value']}
                 placeholder={t('resource.task_group_queue.task_instance_name')}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx
index 9aaf3e310b..59ddb9dfd4 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/function/components/function-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, PropType, watch, onMounted, ref } from 'vue'
+import { defineComponent, toRefs, PropType, watch, onMounted, ref, getCurrentInstance } from 'vue'
 import {
   NUpload,
   NIcon,
@@ -84,6 +84,8 @@ export default defineComponent({
       uploadState.uploadForm.file = file.file
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       getUdfList()
     })
@@ -108,7 +110,8 @@ export default defineComponent({
       handleUpload,
       ...toRefs(state),
       ...toRefs(uploadState),
-      ...toRefs(variables)
+      ...toRefs(variables),
+      trim
     }
   },
   render() {
@@ -143,6 +146,7 @@ export default defineComponent({
             path='funcName'
           >
             <NInput
+                  allowInput={this.trim}
               v-model={[this.functionForm.funcName, 'value']}
               placeholder={t('resource.function.enter_udf_unction_name_tips')}
               class='input-function-name'
@@ -153,6 +157,7 @@ export default defineComponent({
             path='className'
           >
             <NInput
+                  allowInput={this.trim}
               v-model={[this.functionForm.className, 'value']}
               placeholder={t('resource.function.enter_package_name_tips')}
               class='input-class-name'
@@ -212,6 +217,7 @@ export default defineComponent({
               >
                 <NInputGroup>
                   <NInput
+                  allowInput={this.trim}
                     v-model={[this.uploadForm.name, 'value']}
                     placeholder={t('resource.function.enter_name_tips')}
                   />
@@ -237,6 +243,7 @@ export default defineComponent({
                 style={{ marginBottom: '5px' }}
               >
                 <NInput
+                  allowInput={this.trim}
                   type='textarea'
                   v-model={[this.uploadForm.description, 'value']}
                   placeholder={t('resource.function.enter_description_tips')}
@@ -256,6 +263,7 @@ export default defineComponent({
             path='description'
           >
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.functionForm.description, 'value']}
               placeholder={t('resource.function.enter_instructions_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
index 2601815651..3dc843725d 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, Ref, toRefs, onMounted, toRef, watch } from 'vue'
+import { defineComponent, Ref, toRefs, onMounted, toRef, watch, getCurrentInstance } from 'vue'
 import {
   NIcon,
   NSpace,
@@ -68,6 +68,8 @@ export default defineComponent({
       handleShowModal(toRef(variables, 'showRef'))
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(useI18n().locale, () => {
       createColumns(variables)
     })
@@ -83,7 +85,8 @@ export default defineComponent({
       handleUpdateList,
       handleCreateFolder,
       handleChangePageSize,
-      ...toRefs(variables)
+      ...toRefs(variables),
+      trim
     }
   },
   render() {
@@ -114,6 +117,7 @@ export default defineComponent({
                 </div>
                 <div class={styles.list}>
                   <NInput
+                  allowInput={this.trim}
                     placeholder={t('resource.function.enter_keyword_tips')}
                     v-model={[this.searchVal, 'value']}
                   />
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx
index be13ace5c8..d0ae644010 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/components/folder-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, PropType, watch, computed } from 'vue'
+import { defineComponent, toRefs, PropType, watch, computed, getCurrentInstance } from 'vue'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -55,6 +55,8 @@ export default defineComponent({
       handleRenameResource(props.row.id)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.row,
       () => {
@@ -69,7 +71,8 @@ export default defineComponent({
       hideModal,
       handleCreate,
       handleRename,
-      ...toRefs(state)
+      ...toRefs(state),
+      trim
     }
   },
   render() {
@@ -97,6 +100,7 @@ export default defineComponent({
             path='name'
           >
             <NInput
+                  allowInput={this.trim}
               v-model={[this.folderForm.name, 'value']}
               placeholder={t('resource.udf.enter_name_tips')}
               class='input-directory-name'
@@ -104,6 +108,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('resource.udf.description')} path='description'>
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.folderForm.description, 'value']}
               placeholder={t('resource.udf.enter_description_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx
index 84016d8fdb..5aacbc6145 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/components/upload-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, PropType } from 'vue'
+import { defineComponent, toRefs, PropType, getCurrentInstance } from 'vue'
 import { NForm, NFormItem, NInput, NUpload, NButton, NIcon } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
@@ -60,12 +60,15 @@ export default defineComponent({
       state.uploadForm.file = ''
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     return {
       hideModal,
       handleFolder,
       customRequest,
       removeFile,
-      ...toRefs(state)
+      ...toRefs(state),
+      trim
     }
   },
   render() {
@@ -83,6 +86,7 @@ export default defineComponent({
         <NForm rules={this.rules} ref='uploadFormRef'>
           <NFormItem label={t('resource.udf.file_name')} path='name'>
             <NInput
+                  allowInput={this.trim}
               v-model={[this.uploadForm.name, 'value']}
               placeholder={t('resource.udf.enter_name_tips')}
               class='input-file-name'
@@ -90,6 +94,7 @@ export default defineComponent({
           </NFormItem>
           <NFormItem label={t('resource.udf.description')} path='description'>
             <NInput
+                  allowInput={this.trim}
               type='textarea'
               v-model={[this.uploadForm.description, 'value']}
               placeholder={t('resource.udf.enter_description_tips')}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
index 361d227528..c888a826d7 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, Ref, toRefs, onMounted, toRef, watch } from 'vue'
+import { defineComponent, Ref, toRefs, onMounted, toRef, watch, getCurrentInstance } from 'vue'
 import {
   NIcon,
   NSpace,
@@ -86,6 +86,8 @@ export default defineComponent({
       goBread(breadName)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(useI18n().locale, () => {
       createColumns(variables)
     })
@@ -104,7 +106,8 @@ export default defineComponent({
       handleCreateFolder,
       handleUploadFile,
       handleChangePageSize,
-      ...toRefs(variables)
+      ...toRefs(variables),
+      trim
     }
   },
   render() {
@@ -143,6 +146,7 @@ export default defineComponent({
                 </div>
                 <div class={styles.list}>
                   <NInput
+                  allowInput={this.trim}
                     placeholder={t('resource.udf.enter_keyword_tips')}
                     v-model={[this.searchVal, 'value']}
                   />
diff --git a/dolphinscheduler-ui/src/views/security/alarm-group-manage/components/alarm-group-modal.tsx b/dolphinscheduler-ui/src/views/security/alarm-group-manage/components/alarm-group-modal.tsx
index abcab1ab49..18532e2e76 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-group-manage/components/alarm-group-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-group-manage/components/alarm-group-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useModal } from './use-modal'
@@ -55,6 +55,8 @@ const AlarmGroupModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.showModalRef,
       () => {
@@ -92,7 +94,7 @@ const AlarmGroupModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -124,6 +126,7 @@ const AlarmGroupModal = defineComponent({
                   path='groupName'
                 >
                   <NInput
+                  allowInput={this.trim}
                     placeholder={t(
                       'security.alarm_group.alert_group_name_tips'
                     )}
@@ -148,6 +151,7 @@ const AlarmGroupModal = defineComponent({
                   path='description'
                 >
                   <NInput
+                  allowInput={this.trim}
                     type='textarea'
                     placeholder={t(
                       'security.alarm_group.alarm_group_description_tips'
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 518ce42d89..fda914d41b 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const alarmGroupManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const alarmGroupManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -109,6 +112,7 @@ const alarmGroupManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
index 30ec47b4fc..946003068e 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, watch, onMounted, ref } from 'vue'
+import { defineComponent, toRefs, watch, onMounted, ref, getCurrentInstance } from 'vue'
 import { NSelect, NInput } from 'naive-ui'
 import { isFunction } from 'lodash'
 import { useI18n } from 'vue-i18n'
@@ -80,6 +80,8 @@ const DetailModal = defineComponent({
     }
     const onChangePlugin = changePlugin
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.show,
       async () => {
@@ -116,7 +118,8 @@ const DetailModal = defineComponent({
       elements,
       onChangePlugin,
       onSubmit,
-      onCancel
+      onCancel,
+      trim
     }
   },
   render(props: { currentRecord: IRecord }) {
@@ -165,6 +168,7 @@ const DetailModal = defineComponent({
                     label: t('security.alarm_instance.alarm_instance_name'),
                     widget: (
                       <NInput
+                  allowInput={this.trim}
                         v-model={[detailForm.instanceName, 'value']}
                         placeholder={t(
                           'security.alarm_instance.alarm_instance_name_tips'
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 3a223541a3..b908b4babd 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
 import {
   NButton,
   NInput,
@@ -65,6 +65,8 @@ const AlarmInstanceManage = defineComponent({
       currentRecord.value = {}
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       changePage(1)
       columns.value = getColumns()
@@ -85,7 +87,8 @@ const AlarmInstanceManage = defineComponent({
       changePageSize,
       onCreate,
       onCloseModal,
-      onUpdatedList: updateList
+      onUpdatedList: updateList,
+      trim
     }
   },
   render() {
@@ -123,6 +126,7 @@ const AlarmInstanceManage = defineComponent({
                   wrap={false}
                 >
                   <NInput
+                  allowInput={this.trim}
                     v-model={[this.searchVal, 'value']}
                     size='small'
                     placeholder={`${t(
diff --git a/dolphinscheduler-ui/src/views/security/cluster-manage/components/cluster-modal.tsx b/dolphinscheduler-ui/src/views/security/cluster-manage/components/cluster-modal.tsx
index e24c6dcccd..51c42976f4 100644
--- a/dolphinscheduler-ui/src/views/security/cluster-manage/components/cluster-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/cluster-manage/components/cluster-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useModal } from './use-modal'
@@ -92,6 +92,8 @@ const ClusterModal = defineComponent({
       variables.model.description = row.description
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.statusRef,
       () => {
@@ -113,7 +115,7 @@ const ClusterModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -141,6 +143,7 @@ const ClusterModal = defineComponent({
                   path='name'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-cluster-name'
                     placeholder={t('security.cluster.cluster_name_tips')}
                     v-model={[this.model.name, 'value']}
@@ -151,6 +154,7 @@ const ClusterModal = defineComponent({
                   path='k8s_config'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-cluster-config'
                     placeholder={envK8sConfigPlaceholder}
                     type='textarea'
@@ -163,6 +167,7 @@ const ClusterModal = defineComponent({
                   path='yarn_config'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-yarn-config'
                     placeholder={envYarnConfigPlaceholder}
                     disabled={true}
@@ -174,6 +179,7 @@ const ClusterModal = defineComponent({
                   path='description'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-cluster-desc'
                     placeholder={t('security.cluster.cluster_description_tips')}
                     v-model={[this.model.description, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
index 33d2c8d206..e786cc4d6b 100644
--- a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const clusterManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const clusterManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -114,6 +117,7 @@ const clusterManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/environment-manage/components/environment-modal.tsx b/dolphinscheduler-ui/src/views/security/environment-manage/components/environment-modal.tsx
index 69d13e59f6..38e7cdecdd 100644
--- a/dolphinscheduler-ui/src/views/security/environment-manage/components/environment-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/environment-manage/components/environment-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useModal } from './use-modal'
@@ -69,6 +69,8 @@ const EnvironmentModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.showModalRef,
       () => {
@@ -105,7 +107,7 @@ const EnvironmentModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -139,6 +141,7 @@ const EnvironmentModal = defineComponent({
                   path='name'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-environment-name'
                     placeholder={t(
                       'security.environment.environment_name_tips'
@@ -151,6 +154,7 @@ const EnvironmentModal = defineComponent({
                   path='config'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-environment-config'
                     placeholder={envConfigPlaceholder}
                     type='textarea'
@@ -163,6 +167,7 @@ const EnvironmentModal = defineComponent({
                   path='description'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-environment-desc'
                     placeholder={t(
                       'security.environment.environment_description_tips'
diff --git a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
index bcdb7bbfa9..542ad0f8bc 100644
--- a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const environmentManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const environmentManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -114,6 +117,7 @@ const environmentManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/components/k8s-namespace-modal.tsx b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/components/k8s-namespace-modal.tsx
index 9992f4353f..5e2498c924 100644
--- a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/components/k8s-namespace-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/components/k8s-namespace-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import {
   NForm,
@@ -64,6 +64,8 @@ const K8sNamespaceModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
         () => props.showModalRef,
         () => {
@@ -103,7 +105,7 @@ const K8sNamespaceModal = defineComponent({
         }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -133,6 +135,7 @@ const K8sNamespaceModal = defineComponent({
                         path='namespace'
                     >
                       <NInput
+                  allowInput={this.trim}
                           placeholder={t('security.k8s_namespace.k8s_namespace_tips')}
                           v-model={[this.model.namespace, 'value']}
                           disabled={this.statusRef !== 0}
@@ -155,6 +158,7 @@ const K8sNamespaceModal = defineComponent({
                     >
                       <NInputGroup>
                         <NInput
+                  allowInput={this.trim}
                             placeholder={t('security.k8s_namespace.limit_cpu_tips')}
                             v-model={[this.model.limitsCpu, 'value']}
                         />
@@ -167,6 +171,7 @@ const K8sNamespaceModal = defineComponent({
                     >
                       <NInputGroup>
                         <NInput
+                  allowInput={this.trim}
                             placeholder={t(
                                 'security.k8s_namespace.limit_memory_tips'
                             )}
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 b8a09258b0..07eda28cea 100644
--- a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const k8sNamespaceManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const k8sNamespaceManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -109,6 +112,7 @@ const k8sNamespaceManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/components/tenant-modal.tsx b/dolphinscheduler-ui/src/views/security/tenant-manage/components/tenant-modal.tsx
index f6e14f989e..fd3086d843 100644
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/components/tenant-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/tenant-manage/components/tenant-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useModalData } from './use-modalData'
@@ -54,6 +54,8 @@ const TenantModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.showModalRef,
       () => {
@@ -87,7 +89,7 @@ const TenantModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -121,6 +123,7 @@ const TenantModal = defineComponent({
                   path='tenantCode'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-tenant-code'
                     disabled={this.statusRef === 1}
                     placeholder={t('security.tenant.tenant_code_tips')}
@@ -143,6 +146,7 @@ const TenantModal = defineComponent({
                   path='description'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-description'
                     placeholder={t('security.tenant.description_tips')}
                     v-model={[this.model.description, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
index 70c95c0864..de8fa0fbfd 100644
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs, onMounted, watch } from 'vue'
+import { defineComponent, toRefs, onMounted, watch, getCurrentInstance } from 'vue'
 import {
   NButton,
   NInput,
@@ -68,6 +68,8 @@ const tenementManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const tenementManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleSearch,
-      handleChangePageSize
+      handleChangePageSize,
+      trim
     }
   },
   render() {
@@ -104,6 +107,7 @@ const tenementManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 v-model={[this.searchVal, 'value']}
                 placeholder={t('security.tenant.search_tips')}
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx b/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx
index 4fe99eaeb8..8c75a68eae 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/components/token-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import {
   NForm,
@@ -85,6 +85,8 @@ const TokenModal = defineComponent({
       }
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.showModalRef,
       () => {
@@ -130,7 +132,8 @@ const TokenModal = defineComponent({
       confirmModal,
       getToken,
       changeUser,
-      userStore
+      userStore,
+      trim
     }
   },
   render() {
@@ -189,6 +192,7 @@ const TokenModal = defineComponent({
                 <NFormItem label={t('security.token.token')} path='token'>
                   <NSpace>
                     <NInput
+                  allowInput={this.trim}
                       class='input-token'
                       style={{ width: '504px' }}
                       disabled
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
index cc0b22f096..163b52be56 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const tokenManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const tokenManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -114,6 +117,7 @@ const tokenManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/user-manage/components/user-detail-modal.tsx b/dolphinscheduler-ui/src/views/security/user-manage/components/user-detail-modal.tsx
index dfba0a524e..78fecfde88 100644
--- a/dolphinscheduler-ui/src/views/security/user-manage/components/user-detail-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/user-manage/components/user-detail-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   NInput,
@@ -60,6 +60,8 @@ export const UserModal = defineComponent({
       ctx.emit('update')
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.show,
       () => {
@@ -75,7 +77,8 @@ export const UserModal = defineComponent({
       IS_ADMIN,
       formRules,
       onCancel,
-      onConfirm
+      onConfirm,
+      trim
     }
   },
   render(props: { currentRecord: IRecord }) {
@@ -105,6 +108,7 @@ export const UserModal = defineComponent({
         >
           <NFormItem label={t('security.user.username')} path='userName'>
             <NInput
+                  allowInput={this.trim}
               class='input-username'
               v-model:value={this.formData.userName}
               minlength={3}
@@ -118,6 +122,7 @@ export const UserModal = defineComponent({
               path='userPassword'
             >
               <NInput
+                  allowInput={this.trim}
                 class='input-password'
                 type='password'
                 v-model:value={this.formData.userPassword}
@@ -146,6 +151,7 @@ export const UserModal = defineComponent({
           )}
           <NFormItem label={t('security.user.email')} path='email'>
             <NInput
+                  allowInput={this.trim}
               class='input-email'
               v-model:value={this.formData.email}
               placeholder={t('security.user.email_empty_tips')}
@@ -153,6 +159,7 @@ export const UserModal = defineComponent({
           </NFormItem>
           <NFormItem label={t('security.user.phone')} path='phone'>
             <NInput
+                  allowInput={this.trim}
               class='input-phone'
               v-model:value={this.formData.phone}
               placeholder={t('security.user.phone_empty_tips')}
diff --git a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
index c0c628cf83..fe9f568817 100644
--- a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, toRefs } from 'vue'
 import {
   NButton,
   NInput,
@@ -50,6 +50,7 @@ const UsersManage = defineComponent({
     const onAuthorizeModalCancel = () => {
       state.authorizeModalShow = false
     }
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
     return {
       t,
@@ -60,7 +61,8 @@ const UsersManage = defineComponent({
       onAddUser,
       onUpdatedList: updateList,
       onDetailModalCancel,
-      onAuthorizeModalCancel
+      onAuthorizeModalCancel,
+      trim
     }
   },
   render() {
@@ -77,7 +79,8 @@ const UsersManage = defineComponent({
               {this.t('security.user.create_user')}
             </NButton>
             <NSpace>
-              <NInput v-model:value={this.searchVal} size='small' clearable />
+              <NInput
+                  allowInput={this.trim} v-model:value={this.searchVal} size='small' clearable />
               <NButton type='primary' size='small' onClick={this.onUpdatedList}>
                 <NIcon>
                   <SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/security/worker-group-manage/components/worker-group-modal.tsx b/dolphinscheduler-ui/src/views/security/worker-group-manage/components/worker-group-modal.tsx
index 43626d644c..b84f0ba84b 100644
--- a/dolphinscheduler-ui/src/views/security/worker-group-manage/components/worker-group-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/worker-group-manage/components/worker-group-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useModal } from './use-modal'
@@ -54,6 +54,8 @@ const WorkerGroupModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.showModalRef,
       () => {
@@ -84,7 +86,7 @@ const WorkerGroupModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -116,6 +118,7 @@ const WorkerGroupModal = defineComponent({
                   path='name'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-worker-group-name'
                     placeholder={t('security.worker_group.group_name_tips')}
                     v-model={[this.model.name, 'value']}
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 b2ba14268e..f189feb4af 100644
--- a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const workerGroupManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const workerGroupManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -114,6 +117,7 @@ const workerGroupManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}
diff --git a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
index 2afc4bd7a6..5c2c6032f8 100644
--- a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
+++ b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, PropType, toRefs, watch } from 'vue'
 import Modal from '@/components/modal'
 import { NForm, NFormItem, NInput } from 'naive-ui'
 import { useModal } from './use-modal'
@@ -54,6 +54,8 @@ const YarnQueueModal = defineComponent({
       handleValidate(props.statusRef)
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     watch(
       () => props.statusRef,
       () => {
@@ -77,7 +79,7 @@ const YarnQueueModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), cancelModal, confirmModal }
+    return { t, ...toRefs(variables), cancelModal, confirmModal, trim }
   },
   render() {
     const { t } = this
@@ -109,6 +111,7 @@ const YarnQueueModal = defineComponent({
                   path='queueName'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-queue-name'
                     placeholder={t('security.yarn_queue.queue_name_tips')}
                     v-model={[this.model.queueName, 'value']}
@@ -119,6 +122,7 @@ const YarnQueueModal = defineComponent({
                   path='queue'
                 >
                   <NInput
+                  allowInput={this.trim}
                     class='input-queue-value'
                     placeholder={t('security.yarn_queue.queue_value_tips')}
                     v-model={[this.model.queue, 'value']}
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 bc569fde39..6fd944aa16 100644
--- a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import {
   NButton,
   NDataTable,
@@ -68,6 +68,8 @@ const yarnQueueManage = defineComponent({
       requestData()
     }
 
+    const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
+
     onMounted(() => {
       createColumns(variables)
       requestData()
@@ -85,7 +87,8 @@ const yarnQueueManage = defineComponent({
       onConfirmModal,
       onUpdatePageSize,
       handleModalChange,
-      onSearch
+      onSearch,
+      trim
     }
   },
   render() {
@@ -114,6 +117,7 @@ const yarnQueueManage = defineComponent({
             </NButton>
             <NSpace>
               <NInput
+                  allowInput={this.trim}
                 size='small'
                 clearable
                 v-model={[this.searchVal, 'value']}