feat: Add trim method to all input (#10984)

2 years ago · d41dac0602
52 changed files with 347 additions and 106 deletions
--- 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')}
--- 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')}
--- 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'
--- 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')}`}
                    />
--- 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'
--- 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')}
--- 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']}
--- 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')}
                  />
--- 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')}
--- 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')}
--- 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']}
--- 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')}
--- 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'
--- 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
--- 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']}
--- 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}
--- 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']}
                  />
--- 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')}
          />
--- 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')}
--- 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')}
--- 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']}
                  />
--- 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')}
--- 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')}
--- 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')}
--- 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(
--- 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>
--- 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')}
--- 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')}
--- 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']}
                  />
--- 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')}
--- 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')}
--- 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']}
                  />
--- 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'
--- 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']}
--- 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'
--- 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(
--- 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']}
--- 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']}
--- 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'
--- 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']}
--- 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'
                            )}
--- 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']}
--- 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']}
--- 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')}
--- 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
--- 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']}
--- 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')}
--- 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 />
--- 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']}
--- 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']}
--- 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']}
--- 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']}