[Refactor][UI] Refactor datasource using NSpace component. (#11022)

* [Refactor][UI] Refactor datasource using NSpace component.

* [Refactor][UI] Refactor datasource using NSpace component.

dolphinscheduler-ui/src/views/datasource/list/index.module.scss

@@ -1,32 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.conditions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.conditions-search-input {
-  width: 250px;
-}
-.pagination {
-  margin-top: 20px;
-  justify-content: center;
-}
-.mt-8 {
-  margin-top: 8px;
-}

dolphinscheduler-ui/src/views/datasource/list/index.tsx

@@ -24,15 +24,14 @@ import {
   NPagination,
   NSpace
 } from 'naive-ui'
-import Card from '@/components/card'
-import DetailModal from './detail'
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useColumns } from './use-columns'
 import { useTable } from './use-table'
-import styles from './index.module.scss'
-import type { TableColumns } from './types'
 import { DefaultTableWidth } from '@/common/column-width-config'
+import Card from '@/components/card'
+import DetailModal from './detail'
+import type { TableColumns } from './types'
 
 const list = defineComponent({
   name: 'list',
@@ -103,41 +102,37 @@ const list = defineComponent({
     } = this
 
     return (
-      <>
+      <NSpace vertical>
-        <Card title=''>
+        <Card>
-          {{
+          <NSpace justify='space-between'>
-            default: () => (
-              <div class={styles['conditions']}>
             <NButton
               onClick={onCreate}
               type='primary'
+              size='small'
               class='btn-create-data-source'
             >
               {t('datasource.create_datasource')}
             </NButton>
             <NSpace
-                  class={styles['conditions-search']}
               justify='end'
               wrap={false}
             >
-                  <div class={styles['conditions-search-input']}>
               <NInput
                 allowInput={this.trim}
                 v-model={[this.searchVal, 'value']}
+                size='small'
                 placeholder={`${t('datasource.search_input_tips')}`}
               />
-                  </div>
+              <NButton type='primary' size='small' onClick={onUpdatedList}>
-                  <NButton type='primary' onClick={onUpdatedList}>
                 <NIcon>
                   <SearchOutlined />
                 </NIcon>
               </NButton>
             </NSpace>
-              </div>
+          </NSpace>
-            )
-          }}
         </Card>
-        <Card title='' class={styles['mt-8']}>
+        <Card title={t('menu.datasource')}>
+          <NSpace vertical>
             <NDataTable
               row-class-name='data-source-items'
               columns={columns.columns}
@@ -146,6 +141,7 @@ const list = defineComponent({
               striped
               scrollX={columns.tableWidth}
             />
+            <NSpace justify='center'>
               <NPagination
                 page={page}
                 page-size={pageSize}
@@ -153,10 +149,11 @@ const list = defineComponent({
                 show-quick-jumper
                 show-size-picker
                 page-sizes={[10, 30, 50]}
-            class={styles['pagination']}
                 on-update:page={changePage}
                 on-update:page-size={changePageSize}
               />
+            </NSpace>
+          </NSpace>
         </Card>
         <DetailModal
           show={showDetailModal}
@@ -164,7 +161,7 @@ const list = defineComponent({
           onCancel={() => void (this.showDetailModal = false)}
           onUpdate={onUpdatedList}
         />
-      </>
+      </NSpace>
     )
   }
 })