[Improvement-17248][UI] Optimize file details display area to reduce blank space

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: '200px',
           width: '100%',
           border: '1px solid #eee'
         }}

dolphinscheduler-ui/src/views/resource/components/resource/constants.ts

@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Monaco Editor vertical offset for file edit page
+ * This offset accounts for:
+ * - Page header and navigation (~80px)
+ * - Card title and padding (~60px)
+ * - File name display (~60px)
+ * - Form padding and button area (~120px)
+ * Total: ~320px
+ */
+export const EDITOR_VERTICAL_OFFSET_EDIT = 320
+
+/**
+ * Monaco Editor vertical offset for file create page
+ * This offset accounts for:
+ * - Page header and navigation (~80px)
+ * - Card title and padding (~60px)
+ * - File name input field (~80px)
+ * - File format selector (~80px)
+ * - Form padding and button area (~120px)
+ * Total: ~420px
+ */
+export const EDITOR_VERTICAL_OFFSET_CREATE = 420

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

@@ -27,6 +27,7 @@ import { useForm } from './use-form'
 import { fileTypeArr } from '@/common/common'
 
 import styles from '../index.module.scss'
+import { EDITOR_VERTICAL_OFFSET_CREATE } from '../constants'
 
 import type { Router } from 'vue-router'
 
@@ -95,7 +96,10 @@ export default defineComponent({
                 width: '90%'
               }}
             >
-              <MonacoEditor v-model={[this.fileForm.content, 'value']} />
+              <MonacoEditor 
+                v-model={[this.fileForm.content, 'value']} 
+                height={`calc(100vh - ${EDITOR_VERTICAL_OFFSET_CREATE}px)`}
+              />
             </div>
           </NFormItem>
           <div class={styles['file-edit-content']}>

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

@@ -25,6 +25,7 @@ import Card from '@/components/card'
 import MonacoEditor from '@/components/monaco-editor'
 import styles from '../index.module.scss'
 import { useDetailPageStore } from '@/views/resource/components/resource/table/use-table'
+import { EDITOR_VERTICAL_OFFSET_EDIT } from '../constants'
 
 export default defineComponent({
   name: 'ResourceEdit',
@@ -96,6 +97,7 @@ export default defineComponent({
               <NFormItem path='content'>
                 <MonacoEditor
                   v-model={[this.resourceViewRef.state.value.content, 'value']}
+                  height={`calc(100vh - ${EDITOR_VERTICAL_OFFSET_EDIT}px)`}
                 />
               </NFormItem>
               <NSpace>