This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new e6efac6223 [Refactor][UI] Refactor token manage using NSpace
component. (#10681)
e6efac6223 is described below
commit e6efac6223ca8e04eab839cdf4a3c11b9d8ac3b3
Author: songjianet <[email protected]>
AuthorDate: Thu Jun 30 11:18:55 2022 +0800
[Refactor][UI] Refactor token manage using NSpace component. (#10681)
---
.../views/security/token-manage/index.module.scss | 43 ------------
.../src/views/security/token-manage/index.tsx | 77 +++++++++++-----------
2 files changed, 38 insertions(+), 82 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/security/token-manage/index.module.scss
b/dolphinscheduler-ui/src/views/security/token-manage/index.module.scss
deleted file mode 100644
index de6cf70c65..0000000000
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.module.scss
+++ /dev/null
@@ -1,43 +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.
- */
-
-.search-card {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .box {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- width: 300px;
-
- button {
- margin-left: 10px;
- }
- }
-}
-
-.table-card {
- margin-top: 8px;
-
- .pagination {
- margin-top: 20px;
- display: flex;
- justify-content: center;
- }
-}
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
index 89a90b6c95..09fe526a1f 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
@@ -22,14 +22,13 @@ import {
NDataTable,
NIcon,
NInput,
- NPagination
+ NPagination,
+ NSpace
} from 'naive-ui'
import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
-import Card from '@/components/card'
import TokenModal from './components/token-modal'
-import styles from './index.module.scss'
const tokenManage = defineComponent({
name: 'token-manage',
@@ -102,20 +101,18 @@ const tokenManage = defineComponent({
} = this
return (
- <div>
- <NCard>
- <div class={styles['search-card']}>
- <div>
- <NButton
- class='btn-create-token'
- size='small'
- type='primary'
- onClick={handleModalChange}
- >
- {t('security.token.create_token')}
- </NButton>
- </div>
- <div class={styles.box}>
+ <NSpace vertical>
+ <NCard size='small'>
+ <NSpace justify='space-between'>
+ <NButton
+ class='btn-create-token'
+ size='small'
+ type='primary'
+ onClick={handleModalChange}
+ >
+ {t('security.token.create_token')}
+ </NButton>
+ <NSpace>
<NInput
size='small'
clearable
@@ -131,29 +128,31 @@ const tokenManage = defineComponent({
)
}}
</NButton>
- </div>
- </div>
+ </NSpace>
+ </NSpace>
</NCard>
- <Card class={styles['table-card']}>
- <NDataTable
- loading={loadingRef}
- row-class-name='items'
- columns={this.columns}
- data={this.tableData}
- />
- <div class={styles.pagination}>
- <NPagination
- v-model:page={this.page}
- v-model:page-size={this.pageSize}
- page-count={this.totalPage}
- show-size-picker
- page-sizes={[10, 30, 50]}
- show-quick-jumper
- onUpdatePage={requestData}
- onUpdatePageSize={onUpdatePageSize}
+ <NCard size='small'>
+ <NSpace vertical>
+ <NDataTable
+ loading={loadingRef}
+ row-class-name='items'
+ columns={this.columns}
+ data={this.tableData}
/>
- </div>
- </Card>
+ <NSpace justify='center'>
+ <NPagination
+ v-model:page={this.page}
+ v-model:page-size={this.pageSize}
+ page-count={this.totalPage}
+ show-size-picker
+ page-sizes={[10, 30, 50]}
+ show-quick-jumper
+ onUpdatePage={requestData}
+ onUpdatePageSize={onUpdatePageSize}
+ />
+ </NSpace>
+ </NSpace>
+ </NCard>
<TokenModal
showModalRef={this.showModalRef}
statusRef={this.statusRef}
@@ -161,7 +160,7 @@ const tokenManage = defineComponent({
onCancelModal={onCancelModal}
onConfirmModal={onConfirmModal}
/>
- </div>
+ </NSpace>
)
}
})
