[Improvement-17248][UI] Optimize file details display area to reduce blank space (#17731)

Author: zhan7236

dolphinscheduler-ui/src/components/monaco-editor/index.tsx

@@ -55,6 +55,10 @@ const props = {
       readOnly: false,
       language: 'shell'
     })
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '300px'
   }
 }
 
@@ -164,7 +168,8 @@ export default defineComponent({
       <div
         ref='editorRef'
         style={{
-          height: '300px',
+          height: this.height,
+          minHeight: '150px',
           width: '100%',
           border: '1px solid #eee'
         }}

dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx

@@ -66,40 +66,37 @@ export default defineComponent({
     const { t } = useI18n()
     return (
       <Card title={t('resource.file.file_details')}>
-        <NForm
-          rules={this.rules}
-          ref='fileFormRef'
-          class={styles['form-content']}
-        >
-          <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' }}
-              class='input-file-name'
-            />
-          </NFormItem>
-          <NFormItem label={t('resource.file.file_format')} path='suffix'>
-            <NSelect
-              defaultValue={[this.fileForm.suffix]}
-              v-model={[this.fileForm.suffix, 'value']}
-              options={this.fileSuffixOptions}
-              style={{ width: '100px' }}
-              class='select-file-format'
-            />
-          </NFormItem>
-          <NFormItem label={t('resource.file.file_content')} path='content'>
-            <div
-              style={{
-                width: '90%'
-              }}
-            >
-              <MonacoEditor v-model={[this.fileForm.content, 'value']} />
-            </div>
-          </NFormItem>
-          <div class={styles['file-edit-content']}>
-            <div class={styles.submit}>
+        <div class={styles['file-edit-content']}>
+          <NForm
+            rules={this.rules}
+            ref='fileFormRef'
+            class={styles['form-content']}
+          >
+            <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' }}
+                class='input-file-name'
+              />
+            </NFormItem>
+            <NFormItem label={t('resource.file.file_format')} path='suffix'>
+              <NSelect
+                defaultValue={[this.fileForm.suffix]}
+                v-model={[this.fileForm.suffix, 'value']}
+                options={this.fileSuffixOptions}
+                style={{ width: '100px' }}
+                class='select-file-format'
+              />
+            </NFormItem>
+            <NFormItem label={t('resource.file.file_content')} path='content'>
+              <MonacoEditor
+                v-model={[this.fileForm.content, 'value']}
+                height='calc(100vh - 440px)'
+              />
+            </NFormItem>
+            <div class={styles['button-area']}>
               <NButton
                 type='info'
                 size='small'
@@ -120,8 +117,8 @@ export default defineComponent({
                 {t('resource.file.return')}
               </NButton>
             </div>
-          </div>
-        </NForm>
+          </NForm>
+        </div>
       </Card>
     )
   }

dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx

@@ -96,9 +96,10 @@ export default defineComponent({
               <NFormItem path='content'>
                 <MonacoEditor
                   v-model={[this.resourceViewRef.state.value.content, 'value']}
+                  height='calc(100vh - 380px)'
                 />
               </NFormItem>
-              <NSpace>
+              <NSpace class={styles['button-area']}>
                 <NButton
                   type='info'
                   size='small'

dolphinscheduler-ui/src/views/resource/components/resource/index.module.scss

@@ -17,7 +17,6 @@
 
 .file-edit-content {
   width: 100%;
-  padding-bottom: 20px;
   > h2 {
     line-height: 60px;
     text-align: center;
@@ -26,6 +25,14 @@
   }
 }
 
+.editor-wrapper {
+  overflow: hidden;
+}
+
+.button-area {
+  padding: 16px 0;
+}
+
 .form-content {
   padding: 0 50px 0 50px;
 }