[Refactor][UI] Refactor function manage using NSpace component. (#11124)

dolphinscheduler-ui/src/views/resource/udf/function/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/function/index.tsx

@@ -26,9 +26,9 @@ import {
 } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { SearchOutlined } from '@vicons/antd'
+import { useTable } from './use-table'
 import Card from '@/components/card'
 import FolderModal from './components/function-modal'
-import { useTable } from './use-table'
 import styles from './index.module.scss'
 
 export default defineComponent({
@@ -94,68 +94,64 @@ 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'>
+            <NButton
+              type='primary'
+              size='small'
+              onClick={this.handleCreateFolder}
+              class='btn-create-udf-function'
+            >
+              {t('resource.function.create_udf_function')}
+            </NButton>
             <NSpace>
-              <NButton
-                type='primary'
-                onClick={this.handleCreateFolder}
-                class='btn-create-udf-function'
-              >
-                {t('resource.function.create_udf_function')}
+              <NInput
+                allowInput={this.trim}
+                size='small'
+                placeholder={t('resource.function.enter_keyword_tips')}
+                v-model={[this.searchVal, 'value']}
+              />
+              <NButton type='primary' size='small' onClick={this.handleSearch}>
+                <NIcon>
+                  <SearchOutlined/>
+                </NIcon>
               </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.function.enter_keyword_tips')}
-                    v-model={[this.searchVal, 'value']}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+          </NSpace>
         </Card>
         <Card title={t('resource.function.udf_function')}>
-          <NDataTable
-            loading={loadingRef}
-            columns={this.columns}
-            data={this.tableData}
-            striped
-            size={'small'}
-            class={styles.table}
-            row-class-name='items'
-            scrollX={this.tableWidth}
-          />
-          <div class={styles.pagination}>
-            <NPagination
-              v-model:page={this.page}
-              v-model:page-size={this.pageSize}
-              page-count={this.totalPage}
-              show-size-picker
-              page-sizes={[10, 30, 50]}
-              show-quick-jumper
-              onUpdatePage={this.requestData}
-              onUpdatePageSize={this.handleChangePageSize}
+          <NSpace vertical>
+            <NDataTable
+              loading={loadingRef}
+              columns={this.columns}
+              data={this.tableData}
+              striped
+              size={'small'}
+              class={styles.table}
+              row-class-name='items'
+              scrollX={this.tableWidth}
             />
-          </div>
+            <NSpace justify='center'>
+              <NPagination
+                v-model:page={this.page}
+                v-model:page-size={this.pageSize}
+                page-count={this.totalPage}
+                show-size-picker
+                page-sizes={[10, 30, 50]}
+                show-quick-jumper
+                onUpdatePage={this.requestData}
+                onUpdatePageSize={this.handleChangePageSize}
+              />
+            </NSpace>
+          </NSpace>
         </Card>
         <FolderModal
           v-model:row={this.row}
           v-model:show={this.showRef}
           onUpdateList={this.handleUpdateList}
         />
-      </div>
+      </NSpace>
     )
   }
 })