This is an automated email from the ASF dual-hosted git repository.
tyrantlucifer 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 86fd66fe [Feat][UI] Add menu selection and username drop-down. (#30)
86fd66fe is described below
commit 86fd66fe9adff881819eb3e0c2e5d098d4241e71
Author: songjianet <[email protected]>
AuthorDate: Tue Feb 28 23:04:03 2023 +0800
[Feat][UI] Add menu selection and username drop-down. (#30)
---
.../src/layouts/dashboard/header/logo/index.tsx | 2 +-
.../src/layouts/dashboard/header/menu/index.tsx | 7 ++++--
.../src/layouts/dashboard/header/user/index.tsx | 28 +++++++++++++++-------
3 files changed, 25 insertions(+), 12 deletions(-)
diff --git a/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
b/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
index 361345cc..356fb51a 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
@@ -22,7 +22,7 @@ const Logo = defineComponent({
setup() {},
render() {
return (
- <NSpace justify='center' align='center' class='h-16 w-48'>
+ <NSpace justify='start' align='center' class='h-16 w-48 ml-12'>
<h2 class='text-2xl font-bold'>SeaTunnel</h2>
</NSpace>
)
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
b/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
index 2b54ab34..5b30da87 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
@@ -17,13 +17,14 @@
import { defineComponent, toRefs } from 'vue'
import { NMenu, NSpace } from 'naive-ui'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
import { useMenu } from './use-menu'
const Menu = defineComponent({
setup() {
const { state } = useMenu()
const router = useRouter()
+ const route = useRoute()
const handleMenuClick = (key: string) => {
router.push({ path: `/${key}` })
@@ -31,13 +32,15 @@ const Menu = defineComponent({
return {
...toRefs(state),
- handleMenuClick
+ handleMenuClick,
+ route
}
},
render() {
return (
<NSpace align='center' class='h-16'>
<NMenu
+ value={this.route.path.split('/')[1]}
mode='horizontal'
options={this.menuOptions}
onUpdateValue={this.handleMenuClick}
diff --git a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
index 582b7447..0db68462 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
@@ -16,21 +16,29 @@
*/
import { defineComponent, toRefs } from 'vue'
-import { NSpace, NDropdown } from 'naive-ui'
+import { NSpace, NDropdown, NIcon, NButton } from 'naive-ui'
import { useUserDropdown } from './use-user-dropdown'
+import { useUserStore } from '@/store/user'
+import { DownOutlined, UserOutlined } from '@vicons/antd'
+import type { UserDetail } from '@/service/user/types'
const User = defineComponent({
setup() {
const { state, handleSelect } = useUserDropdown()
+ const userDetail = useUserStore()
- return { ...toRefs(state), handleSelect }
+ return {
+ ...toRefs(state),
+ handleSelect,
+ userDetail
+ }
},
render() {
return (
<NSpace
- justify='center'
+ justify='end'
align='center'
- class='h-16 w-12 mr-2'
+ class='h-16 w-48 mr-12'
style={{ cursor: 'pointer' }}
>
<NDropdown
@@ -38,11 +46,13 @@ const User = defineComponent({
options={this.dropdownOptions}
onSelect={this.handleSelect}
>
- <img
- class='h-10 w-10 rounded-full'
- src='https://avatars.githubusercontent.com/u/19239641?s=64&v=4'
- alt=''
- />
+ <NButton text>
+ <NSpace>
+ <NIcon component={UserOutlined} />
+ <span>{(this.userDetail.getUserInfo as UserDetail).name}</span>
+ <NIcon component={DownOutlined} />
+ </NSpace>
+ </NButton>
</NDropdown>
</NSpace>
)
