This is an automated email from the ASF dual-hosted git repository.
songjian 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 445e830a84 [Refactor][UI] Refactor file manage using NSpace component.
(#11073)
445e830a84 is described below
commit 445e830a84942e66bfa28927cc563c237b0df458
Author: songjianet <[email protected]>
AuthorDate: Thu Jul 21 21:19:23 2022 +0800
[Refactor][UI] Refactor file manage using NSpace component. (#11073)
---
.../src/views/resource/file/index.module.scss | 28 -------
.../src/views/resource/file/index.tsx | 94 ++++++++++------------
2 files changed, 42 insertions(+), 80 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/resource/file/index.module.scss
b/dolphinscheduler-ui/src/views/resource/file/index.module.scss
index 80c4938dbe..7be8d13c0e 100644
--- a/dolphinscheduler-ui/src/views/resource/file/index.module.scss
+++ b/dolphinscheduler-ui/src/views/resource/file/index.module.scss
@@ -36,13 +36,6 @@
margin-left: 160px;
}
-.pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
-}
-
.table-box {
table {
width: 100%;
@@ -70,27 +63,6 @@
}
}
-.table-card {
- > div div {
- flex: none !important;
- }
-}
-
.breadcrumb {
padding-left: 10px;
}
-
-.conditions-model {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 10px 0;
- .right {
- > .form-box {
- .list {
- float: right;
- margin: 3px 0 3px 4px;
- }
- }
- }
-}
diff --git a/dolphinscheduler-ui/src/views/resource/file/index.tsx
b/dolphinscheduler-ui/src/views/resource/file/index.tsx
index b134679554..0322fda651 100644
--- a/dolphinscheduler-ui/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/index.tsx
@@ -30,21 +30,21 @@ import {
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { SearchOutlined } from '@vicons/antd'
-import Card from '@/components/card'
import { useTable } from './table/use-table'
import { useFileState } from './use-file'
-import ResourceFolderModal from './folder'
-import ResourceUploadModal from './upload'
-import ResourceRenameModal from './rename'
import { BreadcrumbItem, IRenameFile } from './types'
-import type { Router } from 'vue-router'
-import styles from './index.module.scss'
import { useFileStore } from '@/store/file/file'
import {
queryCurrentResourceById,
queryResourceById
} from '@/service/modules/resources'
-import { ResourceFile } from '@/service/modules/resources/types'
+import Card from '@/components/card'
+import ResourceFolderModal from './folder'
+import ResourceUploadModal from './upload'
+import ResourceRenameModal from './rename'
+import styles from './index.module.scss'
+import type { ResourceFile } from '@/service/modules/resources/types'
+import type { Router } from 'vue-router'
export default defineComponent({
name: 'File',
@@ -255,49 +255,39 @@ export default defineComponent({
} = this
return (
- <div>
- <Card style={{ marginBottom: '8px' }}>
- <div class={styles['conditions-model']}>
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='space-between'>
+ <NButtonGroup size='small'>
+ <NButton
+ onClick={handleCreateFolder}
+ class='btn-create-directory'
+ >
+ {t('resource.file.create_folder')}
+ </NButton>
+ <NButton onClick={handleCreateFile} class='btn-create-file'>
+ {t('resource.file.create_file')}
+ </NButton>
+ <NButton onClick={handleUploadFile} class='btn-upload-file'>
+ {t('resource.file.upload_files')}
+ </NButton>
+ </NButtonGroup>
<NSpace>
- <NButtonGroup>
- <NButton
- onClick={handleCreateFolder}
- class='btn-create-directory'
- >
- {t('resource.file.create_folder')}
- </NButton>
- <NButton onClick={handleCreateFile} class='btn-create-file'>
- {t('resource.file.create_file')}
- </NButton>
- <NButton onClick={handleUploadFile} class='btn-upload-file'>
- {t('resource.file.upload_files')}
- </NButton>
- </NButtonGroup>
+ <NInput
+ size='small'
+ allowInput={this.trim}
+ placeholder={t('resource.file.enter_keyword_tips')}
+ v-model={[this.searchRef, 'value']}
+ />
+ <NButton size='small' type='primary' onClick={handleConditions}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
</NSpace>
- <div class={styles.right}>
- <div class={styles['form-box']}>
- <div class={styles.list}>
- <NButton onClick={handleConditions}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
- </NButton>
- </div>
- <div class={styles.list}>
- <NInput
- allowInput={this.trim}
- placeholder={t('resource.file.enter_keyword_tips')}
- v-model={[this.searchRef, 'value']}
- />
- </div>
- </div>
- </div>
- </div>
+ </NSpace>
</Card>
- <Card
- title={t('resource.file.file_manage')}
- class={styles['table-card']}
- >
+ <Card title={t('resource.file.file_manage')}>
{{
'header-extra': () => (
<NBreadcrumb separator='>' class={styles['breadcrumb']}>
@@ -319,7 +309,7 @@ export default defineComponent({
</NBreadcrumb>
),
default: () => (
- <div>
+ <NSpace vertical>
<NDataTable
remote
columns={columnsRef}
@@ -330,7 +320,7 @@ export default defineComponent({
row-class-name='items'
scrollX={tableWidth}
/>
- <div class={styles.pagination}>
+ <NSpace justify='center'>
<NPagination
v-model:page={this.pagination.page}
v-model:pageSize={this.pagination.pageSize}
@@ -341,8 +331,8 @@ export default defineComponent({
show-quick-jumper
show-size-picker
/>
- </div>
- </div>
+ </NSpace>
+ </NSpace>
)
}}
</Card>
@@ -361,7 +351,7 @@ export default defineComponent({
description={this.renameInfo.description}
onUpdateList={this.updateList}
/>
- </div>
+ </NSpace>
)
}
})
