From 20b87ee76178de9e55c68e3d78ed8bdb5d1509f3 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Thu, 11 Aug 2022 17:11:38 +0800
Subject: [PATCH] [Refactor][UI] Refactor workflow definition version using
 NSpace component. (#11420)

---
 .../definition/components/use-table.ts        |  4 +--
 .../definition/components/version-modal.tsx   | 34 +++++++++----------
 .../workflow/definition/index.module.scss     | 34 -------------------
 3 files changed, 19 insertions(+), 53 deletions(-)

diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/use-table.ts
index b0be323464..dce5ffedff 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/use-table.ts
@@ -107,7 +107,7 @@ export function useTable(
                             {
                               circle: true,
                               type: 'info',
-                              size: 'tiny',
+                              size: 'small',
                               disabled: _row.version === variables.row.version
                             },
                             {
@@ -139,7 +139,7 @@ export function useTable(
                             {
                               circle: true,
                               type: 'error',
-                              size: 'tiny',
+                              size: 'small',
                               disabled: _row.version === variables.row.version
                             },
                             {
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/version-modal.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/version-modal.tsx
index c1b19d534c..bbcf70bb7a 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/components/version-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/components/version-modal.tsx
@@ -20,9 +20,8 @@ import { useI18n } from 'vue-i18n'
 import { useForm } from './use-form'
 import { useModal } from './use-modal'
 import { useTable } from './use-table'
-import { NDataTable, NPagination } from 'naive-ui'
+import { NDataTable, NPagination, NSpace } from 'naive-ui'
 import Modal from '@/components/modal'
-import styles from '../index.module.scss'
 import type { IDefinitionData } from '../types'
 
 const props = {
@@ -100,22 +99,23 @@ export default defineComponent({
         onCancel={this.hideModal}
         onConfirm={this.hideModal}
       >
-        <NDataTable
-          loading={loadingRef}
-          columns={this.columns}
-          data={this.tableData}
-          striped
-          size={'small'}
-          class={styles.table}
-        />
-        <div class={styles.pagination}>
-          <NPagination
-            v-model:page={this.page}
-            v-model:page-size={this.pageSize}
-            page-count={this.totalPage}
-            onUpdatePage={requestData}
+        <NSpace vertical>
+          <NDataTable
+            loading={loadingRef}
+            columns={this.columns}
+            data={this.tableData}
+            striped
+            size={'small'}
           />
-        </div>
+          <NSpace justify='center'>
+            <NPagination
+              v-model:page={this.page}
+              v-model:page-size={this.pageSize}
+              page-count={this.totalPage}
+              onUpdatePage={requestData}
+            />
+          </NSpace>
+        </NSpace>
       </Modal>
     )
   }
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss
index 251e88f29e..558b144aed 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss
@@ -15,40 +15,6 @@
  * limitations under the License.
  */
 
-.table {
-  table {
-    width: 100%;
-    tr {
-      height: 40px;
-      font-size: 12px;
-      th,
-      td {
-        &:nth-child(1) {
-          width: 50px;
-          text-align: center;
-        }
-      }
-      th {
-        &:nth-child(1) {
-          width: 60px;
-          text-align: center;
-        }
-        > span {
-          font-size: 12px;
-          color: #555;
-        }
-      }
-    }
-  }
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 20px;
-}
-
 .startup {
   align-items: center;
   > div:first-child {