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 fbfaca3dbd [Refactor][UI] Refactor resource manage using NSpace
component. (#11098)
fbfaca3dbd is described below
commit fbfaca3dbd9fd1797382caede15586700f557a24
Author: songjianet <[email protected]>
AuthorDate: Tue Jul 26 10:07:00 2022 +0800
[Refactor][UI] Refactor resource manage using NSpace component. (#11098)
* [Refactor][UI] Refactor resource manage using NSpace component.
* [Refactor][UI] Refactor resource manage using NSpace component.
---
.../views/resource/udf/resource/index.module.scss | 66 +++++----------
.../src/views/resource/udf/resource/index.tsx | 93 +++++++++++-----------
2 files changed, 63 insertions(+), 96 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss
b/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss
index a786d64488..f717654df8 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/index.module.scss
@@ -15,59 +15,29 @@
* 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%;
+ tr {
+ height: 40px;
+ font-size: 12px;
+ th,
+ td {
+ &:nth-child(1) {
+ width: 50px;
+ text-align: center;
}
}
- }
- }
-
- .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;
}
- th {
- &:nth-child(1) {
- width: 60px;
- text-align: center;
- }
- > span {
- font-size: 12px;
- color: #555;
- }
+ > span {
+ font-size: 12px;
+ color: #555;
}
}
}
}
-
- .pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
- }
}
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
index c888a826d7..8102fea2c7 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
@@ -27,11 +27,11 @@ import {
NBreadcrumbItem
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
+import { useTable } from './use-table'
import { SearchOutlined } from '@vicons/antd'
import Card from '@/components/card'
import FolderModal from './components/folder-modal'
import UploadModal from './components/upload-modal'
-import { useTable } from './use-table'
import styles from './index.module.scss'
export default defineComponent({
@@ -115,12 +115,13 @@ export default defineComponent({
const { loadingRef } = this
return (
- <div class={styles.content}>
- <Card class={styles.card}>
- <div class={styles.header}>
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='space-between'>
<NSpace>
<NButton
type='primary'
+ size='small'
onClick={this.handleCreateFolder}
class='btn-create-directory'
>
@@ -128,6 +129,7 @@ export default defineComponent({
</NButton>
<NButton
strong
+ size='small'
secondary
onClick={this.handleUploadFile}
class='btn-upload-udf'
@@ -135,30 +137,45 @@ export default defineComponent({
{t('resource.udf.upload_udf_resources')}
</NButton>
</NSpace>
- <div class={styles.right}>
- <div class={styles.search}>
- <div class={styles.list}>
- <NButton type='primary' onClick={this.handleSearch}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
- </NButton>
- </div>
- <div class={styles.list}>
- <NInput
- allowInput={this.trim}
- placeholder={t('resource.udf.enter_keyword_tips')}
- v-model={[this.searchVal, 'value']}
- />
- </div>
- </div>
- </div>
- </div>
+ <NSpace>
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ placeholder={t('resource.udf.enter_keyword_tips')}
+ v-model={[this.searchVal, 'value']}
+ />
+ <NButton type='primary' size='small' onClick={this.handleSearch}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
+ </NSpace>
+ </NSpace>
</Card>
<Card title={t('resource.udf.udf_resources')}>
{{
+ header: () => (
+ <NBreadcrumb separator='>'>
+ <NBreadcrumbItem>
+ <NButton text onClick={() => this.goUdfManage()}>
+ {t('resource.udf.udf_resources')}
+ </NButton>
+ </NBreadcrumbItem>
+ {this.breadList.map((item, index) => (
+ <NBreadcrumbItem>
+ <NButton
+ text
+ disabled={index === this.breadList.length - 1}
+ onClick={() => this.handleBread(index)}
+ >
+ {item}
+ </NButton>
+ </NBreadcrumbItem>
+ ))}
+ </NBreadcrumb>
+ ),
default: () => (
- <div>
+ <NSpace vertical>
<NDataTable
loading={loadingRef}
columns={this.columns}
@@ -169,7 +186,7 @@ export default defineComponent({
row-class-name='items'
scrollX={this.tableWidth}
/>
- <div class={styles.pagination}>
+ <NSpace justify='center'>
<NPagination
v-model:page={this.page}
v-model:page-size={this.pageSize}
@@ -180,28 +197,8 @@ export default defineComponent({
onUpdatePage={this.requestData}
onUpdatePageSize={this.handleChangePageSize}
/>
- </div>
- </div>
- ),
- header: () => (
- <NBreadcrumb separator='>'>
- <NBreadcrumbItem>
- <NButton text onClick={() => this.goUdfManage()}>
- {t('resource.udf.udf_resources')}
- </NButton>
- </NBreadcrumbItem>
- {this.breadList.map((item, index) => (
- <NBreadcrumbItem>
- <NButton
- text
- disabled={index === this.breadList.length - 1}
- onClick={() => this.handleBread(index)}
- >
- {item}
- </NButton>
- </NBreadcrumbItem>
- ))}
- </NBreadcrumb>
+ </NSpace>
+ </NSpace>
)
}}
</Card>
@@ -214,7 +211,7 @@ export default defineComponent({
v-model:show={this.uploadShowRef}
onUpdateList={this.handleUpdateList}
/>
- </div>
+ </NSpace>
)
}
})
