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

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

@@ -15,28 +15,6 @@
  * 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%;
@@ -63,11 +41,3 @@
     }
   }
 }
-
-  .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,39 +94,34 @@ export default defineComponent({
     const { loadingRef } = this
 
     return (
-      <div class={styles.content}>
+      <NSpace vertical>
-        <Card class={styles.card}>
+        <Card>
-          <div class={styles.header}>
+          <NSpace justify='space-between'>
-            <NSpace>
             <NButton
               type='primary'
+              size='small'
               onClick={this.handleCreateFolder}
               class='btn-create-udf-function'
             >
               {t('resource.function.create_udf_function')}
             </NButton>
-            </NSpace>
+            <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}
+                size='small'
                 placeholder={t('resource.function.enter_keyword_tips')}
                 v-model={[this.searchVal, 'value']}
               />
-                </div>
+              <NButton type='primary' size='small' onClick={this.handleSearch}>
-              </div>
+                <NIcon>
-            </div>
+                  <SearchOutlined/>
-          </div>
+                </NIcon>
+              </NButton>
+            </NSpace>
+          </NSpace>
         </Card>
         <Card title={t('resource.function.udf_function')}>
+          <NSpace vertical>
             <NDataTable
               loading={loadingRef}
               columns={this.columns}
@@ -137,7 +132,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}
@@ -148,14 +143,15 @@ export default defineComponent({
                 onUpdatePage={this.requestData}
                 onUpdatePageSize={this.handleChangePageSize}
               />
-          </div>
+            </NSpace>
+          </NSpace>
         </Card>
         <FolderModal
           v-model:row={this.row}
           v-model:show={this.showRef}
           onUpdateList={this.handleUpdateList}
         />
-      </div>
+      </NSpace>
     )
   }
 })