[Refactor][UI] Refactor workflow definition timing using NSpace component. (#11415)

* [Refactor][UI] Refactor workflow definition timing using NSpace component.

* [Refactor][UI] Refactor workflow definition timing using NSpace component.

dolphinscheduler-ui/src/views/projects/workflow/definition/index.module.scss

@@ -15,29 +15,6 @@
  * limitations under the License.
  */
 
-.content {
-  width: 100%;
-
-  .card {
-    margin-bottom: 8px;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 10px 0;
-    .right {
-      > .search {
-        .list {
-          float: right;
-          margin: 3px 0 3px 4px;
-        }
-      }
-    }
-  }
-}
-
 .table {
   table {
     width: 100%;
@@ -79,37 +56,9 @@
   }
 }
 
-.batch-button {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  > div {
-    margin-right: 5px;
-  }
-}
-
 .formItem {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
 }
-
-.workflow-name {
-  :global {
-    div:first-child {
-      width: calc(100% - 32px);
-
-      .n-button,
-      .n-button__content {
-        width: 100%;
-        span {
-          padding-bottom: 1px;
-        }
-      }
-    }
-  }
-}
-.width-100 {
-  width: 100%;
-}

dolphinscheduler-ui/src/views/projects/workflow/definition/timing/index.tsx

@@ -15,16 +15,15 @@
  * limitations under the License.
  */
 
-import Card from '@/components/card'
 import { ArrowLeftOutlined } from '@vicons/antd'
-import { NButton, NDataTable, NIcon, NPagination } from 'naive-ui'
+import { NButton, NDataTable, NIcon, NPagination, NSpace } from 'naive-ui'
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import type { Router } from 'vue-router'
 import { useTable } from './use-table'
+import Card from '@/components/card'
 import TimingModal from '../components/timing-modal'
-import styles from '../index.module.scss'
+import type { Router } from 'vue-router'
 
 export default defineComponent({
   name: 'WorkflowDefinitionTiming',
@@ -76,27 +75,25 @@ export default defineComponent({
     const { loadingRef } = this
 
     return (
-      <div class={styles.content}>
+      <NSpace vertical>
-        <Card class={styles.card}>
+        <Card>
-          <div class={styles.header}>
+          <NButton type='primary' size='small' onClick={() => router.go(-1)}>
-            <NButton type='primary' onClick={() => router.go(-1)}>
             <NIcon>
               <ArrowLeftOutlined />
             </NIcon>
           </NButton>
-          </div>
         </Card>
         <Card title={t('project.workflow.cron_manage')}>
+          <NSpace vertical>
             <NDataTable
               loading={loadingRef}
               columns={this.columns}
               data={this.tableData}
               striped
               size={'small'}
-            class={styles.table}
               scrollX={this.tableWidth}
             />
-          <div class={styles.pagination}>
+            <NSpace justify='center'>
               <NPagination
                 v-model:page={this.page}
                 v-model:page-size={this.pageSize}
@@ -107,7 +104,8 @@ export default defineComponent({
                 onUpdatePage={this.requestData}
                 onUpdatePageSize={this.handleChangePageSize}
               />
-          </div>
+            </NSpace>
+          </NSpace>
         </Card>
         <TimingModal
           type={'update'}
@@ -115,7 +113,7 @@ export default defineComponent({
           v-model:show={this.showRef}
           onUpdateList={this.handleUpdateList}
         />
-      </div>
+      </NSpace>
     )
   }
 })