[Refactor][UI] Refactor workflow definition version using NSpace component. (#11420)

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
                             },
                             {

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
+        <NSpace vertical>
-          loading={loadingRef}
+          <NDataTable
-          columns={this.columns}
+            loading={loadingRef}
-          data={this.tableData}
+            columns={this.columns}
-          striped
+            data={this.tableData}
-          size={'small'}
+            striped
-          class={styles.table}
+            size={'small'}
-        />
-        <div class={styles.pagination}>
-          <NPagination
-            v-model:page={this.page}
-            v-model:page-size={this.pageSize}
-            page-count={this.totalPage}
-            onUpdatePage={requestData}
           />
-        </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>
     )
   }

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 {