[Perf][UI] Optimize some details and styles. (#31)
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 0c88b32..05db729 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 47d4d71..88d9863 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 @@
'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 @@
<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 5f0907f..daae6e9 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 @@
),
'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 9b80bc6..c42492e 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 @@
<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 24afb86..bc695ca 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 { 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 @@
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 @@
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 12f585b..e987952 100644
--- a/seatunnel-ui/src/views/jobs/list/index.tsx
+++ b/seatunnel-ui/src/views/jobs/list/index.tsx
@@ -69,7 +69,7 @@
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 efd67ad..3bdd20b 100644
--- a/seatunnel-ui/src/views/tasks/list/index.tsx
+++ b/seatunnel-ui/src/views/tasks/list/index.tsx
@@ -77,7 +77,7 @@
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 4de902f..11a7d9f 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 @@
<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>
)
