[Refactor][UI] Refactor file manage using NSpace component. (#11073)

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;
-      }
-    }
-  }
-}

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>
+      <NSpace vertical>
-        <Card style={{ marginBottom: '8px' }}>
+        <Card>
-          <div class={styles['conditions-model']}>
+          <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>
+              <NInput
-                <NButton
+                size='small'
-                  onClick={handleCreateFolder}
+                allowInput={this.trim}
-                  class='btn-create-directory'
+                placeholder={t('resource.file.enter_keyword_tips')}
-                >
+                v-model={[this.searchRef, 'value']}
-                  {t('resource.file.create_folder')}
+              />
-                </NButton>
+              <NButton size='small' type='primary' onClick={handleConditions}>
-                <NButton onClick={handleCreateFile} class='btn-create-file'>
+                <NIcon>
-                  {t('resource.file.create_file')}
+                  <SearchOutlined />
-                </NButton>
+                </NIcon>
-                <NButton onClick={handleUploadFile} class='btn-upload-file'>
+              </NButton>
-                  {t('resource.file.upload_files')}
-                </NButton>
-              </NButtonGroup>
             </NSpace>
-            <div class={styles.right}>
+          </NSpace>
-              <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>
         </Card>
-        <Card
+        <Card title={t('resource.file.file_manage')}>
-          title={t('resource.file.file_manage')}
-          class={styles['table-card']}
-        >
           {{
             '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>
+                </NSpace>
-              </div>
+              </NSpace>
             )
           }}
         </Card>
@@ -361,7 +351,7 @@ export default defineComponent({
           description={this.renameInfo.description}
           onUpdateList={this.updateList}
         />
-      </div>
+      </NSpace>
     )
   }
 })