[Refactor][UI] Refactor project list using NSpace component. (#11369)

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

@@ -1,43 +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.
- */
-
-.search-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .box {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    width: 300px;
-
-    button {
-      margin-left: 10px;
-    }
-  }
-}
-
-.table-card {
-  margin-top: 8px;
-
-  .pagination {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-}

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

@@ -15,11 +15,9 @@
  * limitations under the License.
  */
 
-import Card from '@/components/card'
 import { SearchOutlined } from '@vicons/antd'
 import {
   NButton,
-  NCard,
   NDataTable,
   NIcon,
   NInput,
@@ -28,9 +26,9 @@ import {
 } from 'naive-ui'
 import { defineComponent, getCurrentInstance, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ProjectModal from './components/project-modal'
-import styles from './index.module.scss'
 import { useTable } from './use-table'
+import Card from '@/components/card'
+import ProjectModal from './components/project-modal'
 
 const list = defineComponent({
   name: 'list',
@@ -96,9 +94,9 @@ const list = defineComponent({
   render() {
     const { t, loadingRef } = this
     return (
-      <div>
+      <NSpace vertical>
-        <NCard>
+        <Card>
-          <div class={styles['search-card']}>
+          <NSpace justify='space-between'>
             <NButton
               size='small'
               onClick={this.handleModalChange}
@@ -121,12 +119,10 @@ const list = defineComponent({
                 </NIcon>
               </NButton>
             </NSpace>
-          </div>
+          </NSpace>
-        </NCard>
+        </Card>
-        <Card
+        <Card title={t('project.list.project_list')}>
-          title={t('project.list.project_list')}
+          <NSpace vertical>
-          class={styles['table-card']}
-        >
             <NDataTable
               loading={loadingRef}
               columns={this.columns}
@@ -134,7 +130,7 @@ const list = defineComponent({
               scrollX={this.tableWidth}
               row-class-name='items'
             />
-          <div class={styles.pagination}>
+            <NSpace justify='center'>
               <NPagination
                 v-model:page={this.page}
                 v-model:page-size={this.pageSize}
@@ -145,7 +141,8 @@ const list = defineComponent({
                 onUpdatePage={this.requestData}
                 onUpdatePageSize={this.handleChangePageSize}
               />
-          </div>
+            </NSpace>
+          </NSpace>
         </Card>
         <ProjectModal
           showModalRef={this.showModalRef}
@@ -154,7 +151,7 @@ const list = defineComponent({
           onCancelModal={this.onCancelModal}
           onConfirmModal={this.onConfirmModal}
         />
-      </div>
+      </NSpace>
     )
   }
 })