This is an automated email from the ASF dual-hosted git repository.
wenjun pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 5669e4bd0d [Improvement-17248][UI] Optimize file details display area
to reduce blank space (#17731)
5669e4bd0d is described below
commit 5669e4bd0dcedb8379bdfd4b4b30f240cae93d83
Author: zhan7236 <[email protected]>
AuthorDate: Thu Dec 4 16:41:50 2025 +0800
[Improvement-17248][UI] Optimize file details display area to reduce blank
space (#17731)
---
.../src/components/monaco-editor/index.tsx | 7 ++-
.../resource/components/resource/create/index.tsx | 69 +++++++++++-----------
.../resource/components/resource/edit/index.tsx | 3 +-
.../resource/components/resource/index.module.scss | 9 ++-
4 files changed, 49 insertions(+), 39 deletions(-)
diff --git a/dolphinscheduler-ui/src/components/monaco-editor/index.tsx
b/dolphinscheduler-ui/src/components/monaco-editor/index.tsx
index c0d7297c27..b565d9ce8b 100644
--- a/dolphinscheduler-ui/src/components/monaco-editor/index.tsx
+++ b/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'
}}
diff --git
a/dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx
b/dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx
index 5ace0bd666..d368109250 100644
---
a/dolphinscheduler-ui/src/views/resource/components/resource/create/index.tsx
+++
b/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>
)
}
diff --git
a/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx
b/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx
index 2b65c18bd4..6b692b4b09 100644
--- a/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx
+++ b/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'
diff --git
a/dolphinscheduler-ui/src/views/resource/components/resource/index.module.scss
b/dolphinscheduler-ui/src/views/resource/components/resource/index.module.scss
index 7be8d13c0e..6651a3cc45 100644
---
a/dolphinscheduler-ui/src/views/resource/components/resource/index.module.scss
+++
b/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;
}
