This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel-web.git
The following commit(s) were added to refs/heads/main by this push:
new 22043502 [Perf][UI] Optimize some details and styles. (#31)
22043502 is described below
commit 2204350258444d31a3c7f3502fefb984b715dfcf
Author: songjianet <1778651...@qq.com>
AuthorDate: Wed Mar 1 00:37:40 2023 +0800
[Perf][UI] Optimize some details and styles. (#31)
---
.../dashboard/header/user/use-user-dropdown.ts | 25 ++++++++++--
seatunnel-ui/src/views/data-pipes/create/index.tsx | 8 ++--
seatunnel-ui/src/views/data-pipes/detail/index.tsx | 6 +--
seatunnel-ui/src/views/data-pipes/list/index.tsx | 2 +-
.../src/views/data-pipes/list/use-table.ts | 44 +++++++++++++++++-----
seatunnel-ui/src/views/jobs/list/index.tsx | 2 +-
seatunnel-ui/src/views/tasks/list/index.tsx | 2 +-
seatunnel-ui/src/views/user-manage/list/index.tsx | 2 +-
8 files changed, 68 insertions(+), 23 deletions(-)
diff --git
a/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts
b/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts
index 0c88b32c..05db7291 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts
+++ b/seatunnel-ui/src/layouts/dashboard/header/user/use-user-dropdown.ts
@@ -15,21 +15,40 @@
* limitations under the License.
*/
-import { reactive } from 'vue'
+import { reactive, h } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
+import { NIcon } from 'naive-ui'
import { userLogout } from '@/service/user'
import { useUserStore } from '@/store/user'
+import { LogoutOutlined, QuestionCircleOutlined } from '@vicons/antd'
import type { Router } from 'vue-router'
+import type { Component } from 'vue'
export function useUserDropdown() {
const router: Router = useRouter()
const { t } = useI18n()
const userStore = useUserStore()
+ const renderIcon = (icon: Component) => {
+ return () => {
+ return h(NIcon, null, {
+ default: () => h(icon)
+ })
+ }
+ }
+
const dropdownOptions = [
- { key: 'help', label: t('menu.help') },
- { key: 'logout', label: t('menu.logout') }
+ {
+ key: 'help',
+ label: t('menu.help'),
+ icon: renderIcon(QuestionCircleOutlined)
+ },
+ {
+ key: 'logout',
+ label: t('menu.logout'),
+ icon: renderIcon(LogoutOutlined)
+ }
]
const state = reactive({
diff --git a/seatunnel-ui/src/views/data-pipes/create/index.tsx
b/seatunnel-ui/src/views/data-pipes/create/index.tsx
index 47d4d710..88d9863b 100644
--- a/seatunnel-ui/src/views/data-pipes/create/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/create/index.tsx
@@ -94,7 +94,7 @@ const DataPipesCreate = defineComponent({
'header-extra': () => (
<NSpace>
<NButton secondary>{this.t('data_pipes.cancel')}</NButton>
- <NButton secondary>{this.t('data_pipes.save')}</NButton>
+ <NButton secondary
type='primary'>{this.t('data_pipes.save')}</NButton>
</NSpace>
)
}}
@@ -125,9 +125,9 @@ const DataPipesCreate = defineComponent({
<NCard>
<NSpace vertical>
<NSpace justify='end'>
- <NButton secondary>{this.t('data_pipes.execute')}</NButton>
- <NButton secondary>{this.t('data_pipes.kill')}</NButton>
- <NButton secondary>{this.t('data_pipes.stop')}</NButton>
+ <NButton secondary
type='success'>{this.t('data_pipes.execute')}</NButton>
+ <NButton secondary
type='error'>{this.t('data_pipes.kill')}</NButton>
+ <NButton secondary
type='warning'>{this.t('data_pipes.stop')}</NButton>
<NDropdown
trigger='click'
options={[
diff --git a/seatunnel-ui/src/views/data-pipes/detail/index.tsx
b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
index 5f0907f2..daae6e9e 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
@@ -70,9 +70,9 @@ const DataPipesDetail = defineComponent({
),
'header-extra': () => (
<NSpace>
- <NButton secondary>{this.t('data_pipes.execute')}</NButton>
- <NButton secondary>{this.t('data_pipes.kill')}</NButton>
- <NButton secondary>{this.t('data_pipes.stop')}</NButton>
+ <NButton secondary
type='success'>{this.t('data_pipes.execute')}</NButton>
+ <NButton secondary
type='error'>{this.t('data_pipes.kill')}</NButton>
+ <NButton secondary
type='warning'>{this.t('data_pipes.stop')}</NButton>
</NSpace>
)
}}
diff --git a/seatunnel-ui/src/views/data-pipes/list/index.tsx
b/seatunnel-ui/src/views/data-pipes/list/index.tsx
index 9b80bc6d..c42492e5 100644
--- a/seatunnel-ui/src/views/data-pipes/list/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/index.tsx
@@ -86,7 +86,7 @@ const DataPipesList = defineComponent({
<NCard title={this.t('data_pipes.data_pipes')}>
{{
'header-extra': () => (
- <NButton onClick={this.handleCreate}>
+ <NButton onClick={this.handleCreate} type='primary'>
{this.t('data_pipes.create')}
</NButton>
)
diff --git a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
index 24afb864..bc695ca2 100644
--- a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
+++ b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
@@ -19,11 +19,14 @@ import { reactive, ref, h } from 'vue'
import { useI18n } from 'vue-i18n'
import { NSpace, NButton, NTag } from 'naive-ui'
import { scriptList, scriptDelete } from '@/service/script'
+import { useRouter } from 'vue-router'
import type { ResponseTable } from '@/service/types'
import type { ScriptDetail } from '@/service/script/types'
+import type { Router } from 'vue-router'
export function useTable() {
const { t } = useI18n()
+ const router: Router = useRouter()
const state = reactive({
columns: [],
tableData: [],
@@ -40,7 +43,22 @@ export function useTable() {
state.columns = [
{
title: t('data_pipes.name'),
- key: 'name'
+ key: 'name',
+ render: (row: ScriptDetail) => {
+ return h(
+ NButton,
+ {
+ text: true,
+ type: 'primary',
+ onClick: () => {
+ router.push({
+ path: `/data-pipes/${row.id}`
+ })
+ }
+ },
+ row.name
+ )
+ }
},
{
title: t('data_pipes.state'),
@@ -67,14 +85,22 @@ export function useTable() {
render: (row: ScriptDetail) =>
h(NSpace, null, {
default: () => [
- h(NButton, {
- text: true,
- disabled: row.status !== 'published'
- }, t('data_pipes.execute')),
- h(NButton, {
- text: true,
- disabled: row.status === 'published'
- }, t('data_pipes.edit')),
+ h(
+ NButton,
+ {
+ text: true,
+ disabled: row.status !== 'published'
+ },
+ t('data_pipes.execute')
+ ),
+ h(
+ NButton,
+ {
+ text: true,
+ disabled: row.status === 'published'
+ },
+ t('data_pipes.edit')
+ ),
h(
NButton,
{
diff --git a/seatunnel-ui/src/views/jobs/list/index.tsx
b/seatunnel-ui/src/views/jobs/list/index.tsx
index 12f585ba..e9879527 100644
--- a/seatunnel-ui/src/views/jobs/list/index.tsx
+++ b/seatunnel-ui/src/views/jobs/list/index.tsx
@@ -69,7 +69,7 @@ const JobsList = defineComponent({
placeholder={this.t('jobs.data_pipe_name')}
style={{ width: '200px' }}
/>
- <NButton onClick={this.handleSearch}>
+ <NButton onClick={this.handleSearch} type='primary'>
{this.t('jobs.search')}
</NButton>
</NSpace>
diff --git a/seatunnel-ui/src/views/tasks/list/index.tsx
b/seatunnel-ui/src/views/tasks/list/index.tsx
index efd67ad9..3bdd20bc 100644
--- a/seatunnel-ui/src/views/tasks/list/index.tsx
+++ b/seatunnel-ui/src/views/tasks/list/index.tsx
@@ -77,7 +77,7 @@ const TasksList = defineComponent({
placeholder={this.t('tasks.task_name')}
style={{ width: '200px' }}
/>
- <NButton onClick={this.handleSearch}>
+ <NButton onClick={this.handleSearch} type='primary'>
{this.t('tasks.search')}
</NButton>
</NSpace>
diff --git a/seatunnel-ui/src/views/user-manage/list/index.tsx
b/seatunnel-ui/src/views/user-manage/list/index.tsx
index 4de902f7..11a7d9fa 100644
--- a/seatunnel-ui/src/views/user-manage/list/index.tsx
+++ b/seatunnel-ui/src/views/user-manage/list/index.tsx
@@ -82,7 +82,7 @@ const UserManageList = defineComponent({
<NCard title={this.t('user_manage.user_manage')}>
{{
'header-extra': () => (
- <NButton onClick={this.handleFormModal}>
+ <NButton onClick={this.handleFormModal} type='primary'>
{this.t('user_manage.create')}
</NButton>
)
