[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,60 +102,58 @@ const list = defineComponent({
     } = this
 
     return (
-      <>
+      <NSpace vertical>
-        <Card title=''>
+        <Card>
-          {{
+          <NSpace justify='space-between'>
-            default: () => (
+            <NButton
-              <div class={styles['conditions']}>
+              onClick={onCreate}
-                <NButton
+              type='primary'
-                  onClick={onCreate}
+              size='small'
-                  type='primary'
+              class='btn-create-data-source'
-                  class='btn-create-data-source'
+            >
-                >
+              {t('datasource.create_datasource')}
-                  {t('datasource.create_datasource')}
+            </NButton>
-                </NButton>
+            <NSpace
-                <NSpace
+              justify='end'
-                  class={styles['conditions-search']}
+              wrap={false}
-                  justify='end'
+            >
-                  wrap={false}
+              <NInput
-                >
+                allowInput={this.trim}
-                  <div class={styles['conditions-search-input']}>
+                v-model={[this.searchVal, 'value']}
-                    <NInput
+                size='small'
-                  allowInput={this.trim}
+                placeholder={`${t('datasource.search_input_tips')}`}
-                      v-model={[this.searchVal, 'value']}
+              />
-                      placeholder={`${t('datasource.search_input_tips')}`}
+              <NButton type='primary' size='small' onClick={onUpdatedList}>
-                    />
+                <NIcon>
-                  </div>
+                  <SearchOutlined />
-                  <NButton type='primary' onClick={onUpdatedList}>
+                </NIcon>
-                    <NIcon>
+              </NButton>
-                      <SearchOutlined />
+            </NSpace>
-                    </NIcon>
+          </NSpace>
-                  </NButton>
-                </NSpace>
-              </div>
-            )
-          }}
         </Card>
-        <Card title='' class={styles['mt-8']}>
+        <Card title={t('menu.datasource')}>
-          <NDataTable
+          <NSpace vertical>
-            row-class-name='data-source-items'
+            <NDataTable
-            columns={columns.columns}
+              row-class-name='data-source-items'
-            data={list}
+              columns={columns.columns}
-            loading={loading}
+              data={list}
-            striped
+              loading={loading}
-            scrollX={columns.tableWidth}
+              striped
-          />
+              scrollX={columns.tableWidth}
-          <NPagination
+            />
-            page={page}
+            <NSpace justify='center'>
-            page-size={pageSize}
+              <NPagination
-            item-count={itemCount}
+                page={page}
-            show-quick-jumper
+                page-size={pageSize}
-            show-size-picker
+                item-count={itemCount}
-            page-sizes={[10, 30, 50]}
+                show-quick-jumper
-            class={styles['pagination']}
+                show-size-picker
-            on-update:page={changePage}
+                page-sizes={[10, 30, 50]}
-            on-update:page-size={changePageSize}
+                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>
     )
   }
 })