[Refactor][UI] Refactor task instance batch using NSpace component. (#11447)

dolphinscheduler-ui/src/views/projects/task/instance/batch-task.tsx

@@ -30,18 +30,16 @@ import {
   NButton,
   NIcon,
   NDataTable,
-  NPagination,
+  NPagination
-  NCard
 } from 'naive-ui'
 import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import { useI18n } from 'vue-i18n'
-import Card from '@/components/card'
-import LogModal from '@/components/log-modal'
 import { useAsyncState } from '@vueuse/core'
 import { queryLog } from '@/service/modules/log'
 import { stateType } from '@/common/common'
-import styles from './index.module.scss'
+import Card from '@/components/card'
+import LogModal from '@/components/log-modal'
 
 const BatchTaskInstance = defineComponent({
   name: 'task-instance',
@@ -154,8 +152,8 @@ const BatchTaskInstance = defineComponent({
     } = this
 
     return (
-      <>
+      <NSpace vertical>
-        <NCard>
+        <Card>
           <NSpace justify='end' wrap={false}>
             <NInput
               allowInput={this.trim}
@@ -211,15 +209,16 @@ const BatchTaskInstance = defineComponent({
               }}
             </NButton>
           </NSpace>
-        </NCard>
+        </Card>
-        <Card class={styles['table-card']}>
+        <Card title={t('project.task.batch_task')}>
+          <NSpace vertical>
             <NDataTable
               loading={loadingRef}
               columns={this.columns}
               data={this.tableData}
               scrollX={this.tableWidth}
             />
-          <div class={styles.pagination}>
+            <NSpace justify='center'>
               <NPagination
                 v-model:page={this.page}
                 v-model:page-size={this.pageSize}
@@ -230,7 +229,8 @@ const BatchTaskInstance = defineComponent({
                 onUpdatePage={requestTableData}
                 onUpdatePageSize={onUpdatePageSize}
               />
-          </div>
+            </NSpace>
+          </NSpace>
         </Card>
         <LogModal
           showModalRef={this.showModalRef}
@@ -240,7 +240,7 @@ const BatchTaskInstance = defineComponent({
           onConfirmModal={onConfirmModal}
           onRefreshLogs={refreshLogs}
         />
-      </>
+      </NSpace>
     )
   }
 })