diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-flink.ts b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-flink.ts
index 0286b2d2d2..23bb68b4e0 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-flink.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-flink.ts
@@ -36,6 +36,8 @@ export function useFlink(model: { [field: string]: any }): IJsonItem[] {
     model.deployMode === 'cluster' ? 12 : 0
   )
 
+  const appNameSpan = computed(() => (model.deployMode === 'cluster' ? 24 : 0))
+
   const mainJarOptions = ref([])
   const resources: { [field: string]: any } = {}
 
@@ -118,10 +120,10 @@ export function useFlink(model: { [field: string]: any }): IJsonItem[] {
     {
       type: 'select',
       field: 'flinkVersion',
-      span: 12,
       name: t('project.node.flink_version'),
       options: FLINK_VERSIONS,
-      value: model.flinkVersion
+      value: model.flinkVersion,
+      span: deployModeSpan
     },
     {
       type: 'input',
@@ -129,7 +131,8 @@ export function useFlink(model: { [field: string]: any }): IJsonItem[] {
       name: t('project.node.app_name'),
       props: {
         placeholder: t('project.node.app_name_tips')
-      }
+      },
+      span: appNameSpan
     },
     {
       type: 'input',