[Refactor][UI] Refactor task group queue using NSpace component. (#11341)

* [Refactor][UI] Refactor task group queue using NSpace component.

* [Refactor][UI] Refactor token manage using NSpace component.

dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts

@@ -30,7 +30,6 @@ import {
 import { execute } from '@/service/modules/executors'
 import TableAction from './components/table-action'
 import { renderTableTime, runningType } from '@/common/common'
-import styles from './index.module.scss'
 import { renderStateCell } from '../../task/instance/use-table'
 import {
   COLUMN_WIDTH_CONFIG,

dolphinscheduler-ui/src/views/resource/task-group/queue/index.module.scss

@@ -1,44 +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.
- */
-
-.toolbar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 0 0 0 0;
-}
-
-.table-card {
-  margin-top: 2px;
-
-  .table-action {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    button {
-      margin: 0 2px 0 0;
-    }
-    div {
-      margin: 0 2px 0 0;
-    }
-  }
-  .pagination {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-}

dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx

@@ -15,27 +15,27 @@
  * limitations under the License.
  */
 
-import { ref, defineComponent, toRefs, reactive, onMounted, Ref, getCurrentInstance } from 'vue'
+import { ref, defineComponent, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
 import {
   NButton,
   NIcon,
   NInput,
-  NCard,
   NDataTable,
   NPagination,
   NSelect,
   NSpace
 } from 'naive-ui'
-import Card from '@/components/card'
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
-import styles from './index.module.scss'
 import { useTable } from './use-table'
-import FormModal from '@/views/resource/task-group/queue/components/form-modal'
 import { queryTaskGroupListPaging } from '@/service/modules/task-group'
 import { TaskGroupRes } from '@/service/modules/task-group/types'
 import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
-import { Router, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+import FormModal from '@/views/resource/task-group/queue/components/form-modal'
+import Card from '@/components/card'
+import type { Ref } from 'vue'
+import type { Router } from 'vue-router'
 
 const taskGroupQueue = defineComponent({
   name: 'taskGroupQueue',
@@ -158,45 +158,40 @@ const taskGroupQueue = defineComponent({
     const { columns } = useTable(updatePriority, resetTableData)
 
     return (
-      <div>
-        <NCard>
-          <div class={styles.toolbar}>
-            <NSpace>
-              <NSelect
-                size='small'
-                options={taskGroupOptions}
-                clearable
-                style={{ width: '180px' }}
-                v-model:value={this.searchParamRef.groupId}
-                placeholder={t('resource.task_group_queue.task_group_name')}
-              />
-              <NInput
-                  allowInput={this.trim}
-                size='small'
-                v-model={[this.searchParamRef.processName, 'value']}
-                placeholder={t(
-                  'resource.task_group_queue.workflow_instance_name'
-                )}
-              ></NInput>
-              <NInput
-                  allowInput={this.trim}
-                size='small'
-                v-model={[this.searchParamRef.instanceName, 'value']}
-                placeholder={t('resource.task_group_queue.task_instance_name')}
-              ></NInput>
-              <NButton size='small' type='primary' onClick={onSearch}>
-                <NIcon>
-                  <SearchOutlined />
-                </NIcon>
-              </NButton>
-            </NSpace>
-          </div>
-        </NCard>
-        <Card
-          class={styles['table-card']}
-          title={t('resource.task_group_queue.queue')}
-        >
-          <div>
+      <NSpace vertical>
+        <Card>
+          <NSpace justify='end'>
+            <NSelect
+              size='small'
+              options={taskGroupOptions}
+              clearable
+              style={{ width: '180px' }}
+              v-model:value={this.searchParamRef.groupId}
+              placeholder={t('resource.task_group_queue.task_group_name')}
+            />
+            <NInput
+              allowInput={this.trim}
+              size='small'
+              v-model={[this.searchParamRef.processName, 'value']}
+              placeholder={t(
+                'resource.task_group_queue.workflow_instance_name'
+              )}
+            ></NInput>
+            <NInput
+              allowInput={this.trim}
+              size='small'
+              v-model={[this.searchParamRef.instanceName, 'value']}
+              placeholder={t('resource.task_group_queue.task_instance_name')}
+            ></NInput>
+            <NButton size='small' type='primary' onClick={onSearch}>
+              <NIcon>
+                <SearchOutlined />
+              </NIcon>
+            </NButton>
+          </NSpace>
+        </Card>
+        <Card title={t('resource.task_group_queue.queue')}>
+          <NSpace vertical>
             <NDataTable
               loading={loadingRef}
               columns={columns}
@@ -205,7 +200,7 @@ const taskGroupQueue = defineComponent({
               striped
               scrollX={this.tableWidth}
             />
-            <div class={styles.pagination}>
+            <NSpace justify='center'>
               <NPagination
                 v-model:page={this.page}
                 v-model:page-size={this.pageSize}
@@ -216,8 +211,8 @@ const taskGroupQueue = defineComponent({
                 onUpdatePage={resetTableData}
                 onUpdatePageSize={onUpdatePageSize}
               />
-            </div>
-          </div>
+            </NSpace>
+          </NSpace>
         </Card>
         {showModalRef && (
           <FormModal
@@ -227,7 +222,7 @@ const taskGroupQueue = defineComponent({
             data={updateItemData}
           />
         )}
-      </div>
+      </NSpace>
     )
   }
 })