[Refactor][UI] Refactor resource manage using NSpace component. (#11098)

* [Refactor][UI] Refactor resource manage using NSpace component.

* [Refactor][UI] Refactor resource manage using NSpace component.

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

@@ -15,59 +15,29 @@
  * limitations under the License.
  */
 
-.content {
-  width: 100%;
-
-  .card {
-    margin-bottom: 8px;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 10px 0;
-    .right {
-      > .search {
-        .list {
-          float: right;
-          margin: 3px 0 3px 4px;
+.table {
+  table {
+    width: 100%;
+    tr {
+      height: 40px;
+      font-size: 12px;
+      th,
+      td {
+        &:nth-child(1) {
+          width: 50px;
+          text-align: center;
         }
       }
-    }
-  }
-
-  .table {
-    table {
-      width: 100%;
-      tr {
-        height: 40px;
-        font-size: 12px;
-        th,
-        td {
-          &:nth-child(1) {
-            width: 50px;
-            text-align: center;
-          }
+      th {
+        &:nth-child(1) {
+          width: 60px;
+          text-align: center;
         }
-        th {
-          &:nth-child(1) {
-            width: 60px;
-            text-align: center;
-          }
-          > span {
-            font-size: 12px;
-            color: #555;
-          }
+        > span {
+          font-size: 12px;
+          color: #555;
         }
       }
     }
   }
-
-  .pagination {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20px;
-  }
 }

dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx

@@ -27,11 +27,11 @@ import {
   NBreadcrumbItem
 } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
+import { useTable } from './use-table'
 import { SearchOutlined } from '@vicons/antd'
 import Card from '@/components/card'
 import FolderModal from './components/folder-modal'
 import UploadModal from './components/upload-modal'
-import { useTable } from './use-table'
 import styles from './index.module.scss'
 
 export default defineComponent({
@@ -115,12 +115,13 @@ export default defineComponent({
     const { loadingRef } = this
 
     return (
-      <div class={styles.content}>
-        <Card class={styles.card}>
-          <div class={styles.header}>
+      <NSpace vertical>
+        <Card>
+          <NSpace justify='space-between'>
             <NSpace>
               <NButton
                 type='primary'
+                size='small'
                 onClick={this.handleCreateFolder}
                 class='btn-create-directory'
               >
@@ -128,6 +129,7 @@ export default defineComponent({
               </NButton>
               <NButton
                 strong
+                size='small'
                 secondary
                 onClick={this.handleUploadFile}
                 class='btn-upload-udf'
@@ -135,30 +137,45 @@ export default defineComponent({
                 {t('resource.udf.upload_udf_resources')}
               </NButton>
             </NSpace>
-            <div class={styles.right}>
-              <div class={styles.search}>
-                <div class={styles.list}>
-                  <NButton type='primary' onClick={this.handleSearch}>
-                    <NIcon>
-                      <SearchOutlined />
-                    </NIcon>
-                  </NButton>
-                </div>
-                <div class={styles.list}>
-                  <NInput
-                  allowInput={this.trim}
-                    placeholder={t('resource.udf.enter_keyword_tips')}
-                    v-model={[this.searchVal, 'value']}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+            <NSpace>
+              <NInput
+                allowInput={this.trim}
+                size='small'
+                placeholder={t('resource.udf.enter_keyword_tips')}
+                v-model={[this.searchVal, 'value']}
+              />
+              <NButton type='primary' size='small' onClick={this.handleSearch}>
+                <NIcon>
+                  <SearchOutlined />
+                </NIcon>
+              </NButton>
+            </NSpace>
+          </NSpace>
         </Card>
         <Card title={t('resource.udf.udf_resources')}>
           {{
+            header: () => (
+              <NBreadcrumb separator='>'>
+                <NBreadcrumbItem>
+                  <NButton text onClick={() => this.goUdfManage()}>
+                    {t('resource.udf.udf_resources')}
+                  </NButton>
+                </NBreadcrumbItem>
+                {this.breadList.map((item, index) => (
+                  <NBreadcrumbItem>
+                    <NButton
+                      text
+                      disabled={index === this.breadList.length - 1}
+                      onClick={() => this.handleBread(index)}
+                    >
+                      {item}
+                    </NButton>
+                  </NBreadcrumbItem>
+                ))}
+              </NBreadcrumb>
+            ),
             default: () => (
-              <div>
+              <NSpace vertical>
                 <NDataTable
                   loading={loadingRef}
                   columns={this.columns}
@@ -169,7 +186,7 @@ export default defineComponent({
                   row-class-name='items'
                   scrollX={this.tableWidth}
                 />
-                <div class={styles.pagination}>
+                <NSpace justify='center'>
                   <NPagination
                     v-model:page={this.page}
                     v-model:page-size={this.pageSize}
@@ -180,28 +197,8 @@ export default defineComponent({
                     onUpdatePage={this.requestData}
                     onUpdatePageSize={this.handleChangePageSize}
                   />
-                </div>
-              </div>
-            ),
-            header: () => (
-              <NBreadcrumb separator='>'>
-                <NBreadcrumbItem>
-                  <NButton text onClick={() => this.goUdfManage()}>
-                    {t('resource.udf.udf_resources')}
-                  </NButton>
-                </NBreadcrumbItem>
-                {this.breadList.map((item, index) => (
-                  <NBreadcrumbItem>
-                    <NButton
-                      text
-                      disabled={index === this.breadList.length - 1}
-                      onClick={() => this.handleBread(index)}
-                    >
-                      {item}
-                    </NButton>
-                  </NBreadcrumbItem>
-                ))}
-              </NBreadcrumb>
+                </NSpace>
+              </NSpace>
             )
           }}
         </Card>
@@ -214,7 +211,7 @@ export default defineComponent({
           v-model:show={this.uploadShowRef}
           onUpdateList={this.handleUpdateList}
         />
-      </div>
+      </NSpace>
     )
   }
 })