You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by zh...@apache.org on 2022/07/20 11:46:55 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add the setting dropdown in the dashboard layout. (#2225)
This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel.git
The following commit(s) were added to refs/heads/dev by this push:
new a41b0d124 [Feat][UI] Add the setting dropdown in the dashboard layout. (#2225)
a41b0d124 is described below
commit a41b0d124c8b475d264a5472f7accf82943e679e
Author: songjianet <17...@qq.com>
AuthorDate: Wed Jul 20 19:46:49 2022 +0800
[Feat][UI] Add the setting dropdown in the dashboard layout. (#2225)
---
seatunnel-ui/src/App.tsx | 5 ++--
seatunnel-ui/src/components/chart/index.ts | 2 +-
seatunnel-ui/src/env.d.ts | 2 +-
.../src/layouts/dashboard/header/index.tsx | 2 +-
.../src/layouts/dashboard/header/logo/index.tsx | 2 +-
.../src/layouts/dashboard/header/menu/index.tsx | 2 +-
.../src/layouts/dashboard/header/menu/use-menu.ts | 4 +--
.../src/layouts/dashboard/header/setting/index.tsx | 28 ++++++++++++++------
.../use-setting-dropdown.ts} | 30 ++++++++++++++--------
.../src/layouts/dashboard/header/user/index.tsx | 8 ++++--
seatunnel-ui/src/layouts/dashboard/index.tsx | 2 +-
seatunnel-ui/src/locales/en_US/index.ts | 2 +-
seatunnel-ui/src/locales/en_US/login.ts | 2 +-
seatunnel-ui/src/locales/en_US/menu.ts | 6 +++--
seatunnel-ui/src/locales/index.ts | 2 +-
seatunnel-ui/src/locales/zh_CN/index.ts | 2 +-
seatunnel-ui/src/main.ts | 2 +-
seatunnel-ui/src/router/datapipes.ts | 2 +-
seatunnel-ui/src/router/index.ts | 11 +++-----
seatunnel-ui/src/router/routes.ts | 6 ++---
seatunnel-ui/src/store/locale/index.ts | 2 +-
seatunnel-ui/src/store/locale/types.ts | 2 +-
seatunnel-ui/src/store/theme/index.ts | 2 +-
seatunnel-ui/src/store/theme/types.ts | 3 +--
seatunnel-ui/src/themes/index.ts | 3 +--
seatunnel-ui/src/themes/modules/dark.ts | 2 +-
seatunnel-ui/src/themes/modules/light.ts | 2 +-
seatunnel-ui/src/utils/index.ts | 2 +-
seatunnel-ui/src/utils/mapping.ts | 6 +++--
seatunnel-ui/src/utils/trim.ts | 2 +-
seatunnel-ui/src/views/datapipes/list/index.tsx | 6 ++---
seatunnel-ui/src/views/login/index.tsx | 10 +++-----
seatunnel-ui/src/views/login/use-form.ts | 2 +-
33 files changed, 91 insertions(+), 75 deletions(-)
diff --git a/seatunnel-ui/src/App.tsx b/seatunnel-ui/src/App.tsx
index 6a5c8cefb..4b0c75bbc 100644
--- a/seatunnel-ui/src/App.tsx
+++ b/seatunnel-ui/src/App.tsx
@@ -53,11 +53,12 @@ const App = defineComponent({
date-locale={
String(this.localesStore.getLocales) === 'zh_CN' ? dateZhCN : dateEnUS
}
- locale={String(this.localesStore.getLocales) === 'zh_CN' ? zhCN : enUS}>
+ locale={String(this.localesStore.getLocales) === 'zh_CN' ? zhCN : enUS}
+ >
<router-view />
</NConfigProvider>
)
}
})
-export default App
\ No newline at end of file
+export default App
diff --git a/seatunnel-ui/src/components/chart/index.ts b/seatunnel-ui/src/components/chart/index.ts
index d0ffd1f3a..944c5ba36 100644
--- a/seatunnel-ui/src/components/chart/index.ts
+++ b/seatunnel-ui/src/components/chart/index.ts
@@ -84,4 +84,4 @@ function initChart<Opt extends ECBasicOption>(
return chart
}
-export default initChart
\ No newline at end of file
+export default initChart
diff --git a/seatunnel-ui/src/env.d.ts b/seatunnel-ui/src/env.d.ts
index c9402bc15..518937339 100644
--- a/seatunnel-ui/src/env.d.ts
+++ b/seatunnel-ui/src/env.d.ts
@@ -31,4 +31,4 @@ declare global {
declare module '*.png'
declare module '*.jpg'
-declare module '*.jpeg'
\ No newline at end of file
+declare module '*.jpeg'
diff --git a/seatunnel-ui/src/layouts/dashboard/header/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/index.tsx
index 61bad2d8d..f732f542a 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/index.tsx
@@ -40,4 +40,4 @@ const Header = defineComponent({
}
})
-export default Header
\ No newline at end of file
+export default Header
diff --git a/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
index a8ad7f2a7..361345ccd 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
@@ -29,4 +29,4 @@ const Logo = defineComponent({
}
})
-export default Logo
\ No newline at end of file
+export default Logo
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
index b8e4a30b9..2b54ab349 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
@@ -47,4 +47,4 @@ const Menu = defineComponent({
}
})
-export default Menu
\ No newline at end of file
+export default Menu
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts b/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
index bfd561660..0ae004ac2 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
+++ b/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
@@ -25,7 +25,7 @@ export function useMenu() {
const menuOptions = [
{
label: () => h(NEllipsis, null, { default: () => t('menu.datapipes') }),
- key: 'datapipes',
+ key: 'datapipes'
}
]
@@ -34,4 +34,4 @@ export function useMenu() {
})
return { state }
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx
index c20cf4bd2..cc8d30c31 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx
@@ -15,21 +15,33 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
-import { NIcon, NSpace } from 'naive-ui'
+import { defineComponent, toRefs } from 'vue'
+import { NIcon, NSpace, NDropdown } from 'naive-ui'
import { SettingOutlined } from '@vicons/antd'
+import { useSettingDropdown } from './use-setting-dropdown'
const Setting = defineComponent({
- setup() {},
+ setup() {
+ const { state, handleSelect } = useSettingDropdown()
+
+ return { ...toRefs(state), handleSelect }
+ },
render() {
return (
- <NSpace align='center' justify='center' class='h-16 w-12' style={{ cursor: 'pointer' }}>
- <NIcon size='20'>
- <SettingOutlined />
- </NIcon>
+ <NSpace
+ align='center'
+ justify='center'
+ class='h-16 w-12'
+ style={{ cursor: 'pointer' }}
+ >
+ <NDropdown trigger='click' options={this.dropdownOptions} onSelect={this.handleSelect}>
+ <NIcon size='20'>
+ <SettingOutlined />
+ </NIcon>
+ </NDropdown>
</NSpace>
)
}
})
-export default Setting
\ No newline at end of file
+export default Setting
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts b/seatunnel-ui/src/layouts/dashboard/header/setting/use-setting-dropdown.ts
similarity index 67%
copy from seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
copy to seatunnel-ui/src/layouts/dashboard/header/setting/use-setting-dropdown.ts
index bfd561660..a9809ba41 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/use-menu.ts
+++ b/seatunnel-ui/src/layouts/dashboard/header/setting/use-setting-dropdown.ts
@@ -15,23 +15,33 @@
* limitations under the License.
*/
-import { reactive, h } from 'vue'
-import { NEllipsis } from 'naive-ui'
import { useI18n } from 'vue-i18n'
+import { reactive, h } from 'vue'
-export function useMenu() {
+export function useSettingDropdown() {
const { t } = useI18n()
- const menuOptions = [
+ const dropdownOptions = [
{
- label: () => h(NEllipsis, null, { default: () => t('menu.datapipes') }),
- key: 'datapipes',
- }
+ key: 'header',
+ type: 'render',
+ render: () =>
+ h('h3', { class: ['py-1.5', 'px-3', 'font-medium'] }, t('menu.manage'))
+ },
+ {
+ key: 'header-divider',
+ type: 'divider'
+ },
+ { key: 'user-manage', label: t('menu.user_manage') }
]
const state = reactive({
- menuOptions
+ dropdownOptions
})
- return { state }
-}
\ No newline at end of file
+ const handleSelect = (key: string) => {
+ console.log(key)
+ }
+
+ return { state, handleSelect }
+}
diff --git a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
index c2af88f83..ce19cc65a 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
@@ -23,10 +23,14 @@ const User = defineComponent({
render() {
return (
<NSpace justify='center' align='center' class='h-16 w-12 mr-2'>
- <img class='h-10 w-10 rounded-full' src='https://avatars.githubusercontent.com/u/19239641?s=64&v=4' alt='' />
+ <img
+ class='h-10 w-10 rounded-full'
+ src='https://avatars.githubusercontent.com/u/19239641?s=64&v=4'
+ alt=''
+ />
</NSpace>
)
}
})
-export default User
\ No newline at end of file
+export default User
diff --git a/seatunnel-ui/src/layouts/dashboard/index.tsx b/seatunnel-ui/src/layouts/dashboard/index.tsx
index 0b9914f9d..5426771ce 100644
--- a/seatunnel-ui/src/layouts/dashboard/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/index.tsx
@@ -31,4 +31,4 @@ const Dashboard = defineComponent({
}
})
-export default Dashboard
\ No newline at end of file
+export default Dashboard
diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/locales/en_US/index.ts
index 87184b852..5df7e3e17 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/locales/en_US/index.ts
@@ -21,4 +21,4 @@ import menu from '@/locales/en_US/menu'
export default {
login,
menu
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/locales/en_US/login.ts b/seatunnel-ui/src/locales/en_US/login.ts
index 60fb8c2d1..1261d1028 100644
--- a/seatunnel-ui/src/locales/en_US/login.ts
+++ b/seatunnel-ui/src/locales/en_US/login.ts
@@ -22,4 +22,4 @@ export default {
password: 'Password',
username_tips: 'Please input username',
password_tips: 'Please input password'
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/locales/en_US/menu.ts b/seatunnel-ui/src/locales/en_US/menu.ts
index 21e5339b2..d20b48aa9 100644
--- a/seatunnel-ui/src/locales/en_US/menu.ts
+++ b/seatunnel-ui/src/locales/en_US/menu.ts
@@ -16,5 +16,7 @@
*/
export default {
- datapipes: 'Datapipes'
-}
\ No newline at end of file
+ datapipes: 'Datapipes',
+ manage: 'Manage',
+ user_manage: 'User Manage'
+}
diff --git a/seatunnel-ui/src/locales/index.ts b/seatunnel-ui/src/locales/index.ts
index 1d2769c17..0f26f85bf 100644
--- a/seatunnel-ui/src/locales/index.ts
+++ b/seatunnel-ui/src/locales/index.ts
@@ -29,4 +29,4 @@ const i18n = createI18n({
}
})
-export default i18n
\ No newline at end of file
+export default i18n
diff --git a/seatunnel-ui/src/locales/zh_CN/index.ts b/seatunnel-ui/src/locales/zh_CN/index.ts
index 1047dee2f..39626a390 100644
--- a/seatunnel-ui/src/locales/zh_CN/index.ts
+++ b/seatunnel-ui/src/locales/zh_CN/index.ts
@@ -15,4 +15,4 @@
* limitations under the License.
*/
-export default {}
\ No newline at end of file
+export default {}
diff --git a/seatunnel-ui/src/main.ts b/seatunnel-ui/src/main.ts
index 84ec552c6..4962e59f6 100644
--- a/seatunnel-ui/src/main.ts
+++ b/seatunnel-ui/src/main.ts
@@ -33,4 +33,4 @@ app.config.globalProperties.trim = utils.trim
app.use(router)
app.use(pinia)
app.use(i18n)
-app.mount('#app')
\ No newline at end of file
+app.mount('#app')
diff --git a/seatunnel-ui/src/router/datapipes.ts b/seatunnel-ui/src/router/datapipes.ts
index 3d9fa35a3..7e35e77bd 100644
--- a/seatunnel-ui/src/router/datapipes.ts
+++ b/seatunnel-ui/src/router/datapipes.ts
@@ -37,6 +37,6 @@ export default {
meta: {
title: 'datapipes-list'
}
- },
+ }
]
}
diff --git a/seatunnel-ui/src/router/index.ts b/seatunnel-ui/src/router/index.ts
index a46d29b3b..188a9f449 100644
--- a/seatunnel-ui/src/router/index.ts
+++ b/seatunnel-ui/src/router/index.ts
@@ -15,18 +15,13 @@
* limitations under the License.
*/
-import {
- createRouter,
- createWebHistory
-} from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const router = createRouter({
- history: createWebHistory(
- '/'
- ),
+ history: createWebHistory('/'),
routes
})
@@ -34,4 +29,4 @@ router.afterEach(() => {
NProgress.done()
})
-export default router
\ No newline at end of file
+export default router
diff --git a/seatunnel-ui/src/router/routes.ts b/seatunnel-ui/src/router/routes.ts
index da22c9a11..d80b9e7b2 100644
--- a/seatunnel-ui/src/router/routes.ts
+++ b/seatunnel-ui/src/router/routes.ts
@@ -23,9 +23,7 @@ import type { Component } from 'vue'
const modules = import.meta.glob('/src/views/**/**.tsx')
const components: { [key: string]: Component } = utils.mapping(modules)
-const basePage: RouteRecordRaw[] = [
- datapipes
-]
+const basePage: RouteRecordRaw[] = [datapipes]
const loginPage: RouteRecordRaw[] = [
{
@@ -40,4 +38,4 @@ const loginPage: RouteRecordRaw[] = [
const routes: RouteRecordRaw[] = [...basePage, ...loginPage]
-export default routes
\ No newline at end of file
+export default routes
diff --git a/seatunnel-ui/src/store/locale/index.ts b/seatunnel-ui/src/store/locale/index.ts
index b5139aa1c..1b31f7a9b 100644
--- a/seatunnel-ui/src/store/locale/index.ts
+++ b/seatunnel-ui/src/store/locale/index.ts
@@ -34,4 +34,4 @@ export const useLocalesStore = defineStore({
this.locales = lang
}
}
-})
\ No newline at end of file
+})
diff --git a/seatunnel-ui/src/store/locale/types.ts b/seatunnel-ui/src/store/locale/types.ts
index 095d54269..03625ade5 100644
--- a/seatunnel-ui/src/store/locale/types.ts
+++ b/seatunnel-ui/src/store/locale/types.ts
@@ -21,4 +21,4 @@ interface LocalesStore {
locales: Locales
}
-export { LocalesStore, Locales }
\ No newline at end of file
+export { LocalesStore, Locales }
diff --git a/seatunnel-ui/src/store/theme/index.ts b/seatunnel-ui/src/store/theme/index.ts
index 016751947..0fe8052dd 100644
--- a/seatunnel-ui/src/store/theme/index.ts
+++ b/seatunnel-ui/src/store/theme/index.ts
@@ -34,4 +34,4 @@ export const useThemeStore = defineStore({
this.darkTheme = !this.darkTheme
}
}
-})
\ No newline at end of file
+})
diff --git a/seatunnel-ui/src/store/theme/types.ts b/seatunnel-ui/src/store/theme/types.ts
index be5b77260..c2ca699b4 100644
--- a/seatunnel-ui/src/store/theme/types.ts
+++ b/seatunnel-ui/src/store/theme/types.ts
@@ -1,4 +1,3 @@
-
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -20,4 +19,4 @@ interface ThemeState {
darkTheme: boolean
}
-export default ThemeState
\ No newline at end of file
+export default ThemeState
diff --git a/seatunnel-ui/src/themes/index.ts b/seatunnel-ui/src/themes/index.ts
index 5489b3843..a5f70cbf1 100644
--- a/seatunnel-ui/src/themes/index.ts
+++ b/seatunnel-ui/src/themes/index.ts
@@ -1,4 +1,3 @@
-
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -24,4 +23,4 @@ const themeList = {
dark
}
-export default themeList
\ No newline at end of file
+export default themeList
diff --git a/seatunnel-ui/src/themes/modules/dark.ts b/seatunnel-ui/src/themes/modules/dark.ts
index 551aeb82f..5473e6f23 100644
--- a/seatunnel-ui/src/themes/modules/dark.ts
+++ b/seatunnel-ui/src/themes/modules/dark.ts
@@ -17,4 +17,4 @@
const dark = {}
-export default dark
\ No newline at end of file
+export default dark
diff --git a/seatunnel-ui/src/themes/modules/light.ts b/seatunnel-ui/src/themes/modules/light.ts
index 97243a6f4..d691a04ec 100644
--- a/seatunnel-ui/src/themes/modules/light.ts
+++ b/seatunnel-ui/src/themes/modules/light.ts
@@ -17,4 +17,4 @@
const light = {}
-export default light
\ No newline at end of file
+export default light
diff --git a/seatunnel-ui/src/utils/index.ts b/seatunnel-ui/src/utils/index.ts
index 090908237..3a7285d70 100644
--- a/seatunnel-ui/src/utils/index.ts
+++ b/seatunnel-ui/src/utils/index.ts
@@ -23,4 +23,4 @@ const utils = {
trim
}
-export default utils
\ No newline at end of file
+export default utils
diff --git a/seatunnel-ui/src/utils/mapping.ts b/seatunnel-ui/src/utils/mapping.ts
index 27d754ff7..a200f94c9 100644
--- a/seatunnel-ui/src/utils/mapping.ts
+++ b/seatunnel-ui/src/utils/mapping.ts
@@ -22,7 +22,9 @@ const mapping = (modules: any) => {
Object.keys(modules).forEach((key: string) => {
const nameMatch: string[] | null = key.match(/^\/src\/views\/(.+)\.tsx/)
- if (!nameMatch) { return }
+ if (!nameMatch) {
+ return
+ }
const indexMatch: string[] | null = nameMatch[1].match(/(.*)\/Index$/i)
@@ -35,4 +37,4 @@ const mapping = (modules: any) => {
return components
}
-export default mapping
\ No newline at end of file
+export default mapping
diff --git a/seatunnel-ui/src/utils/trim.ts b/seatunnel-ui/src/utils/trim.ts
index 20d2fbe89..d7f731bcd 100644
--- a/seatunnel-ui/src/utils/trim.ts
+++ b/seatunnel-ui/src/utils/trim.ts
@@ -19,4 +19,4 @@ const trim = (value: string) => {
return !value.startsWith(' ') && !value.endsWith(' ')
}
-export default trim
\ No newline at end of file
+export default trim
diff --git a/seatunnel-ui/src/views/datapipes/list/index.tsx b/seatunnel-ui/src/views/datapipes/list/index.tsx
index 105ff629c..554892be4 100644
--- a/seatunnel-ui/src/views/datapipes/list/index.tsx
+++ b/seatunnel-ui/src/views/datapipes/list/index.tsx
@@ -20,10 +20,8 @@ import { defineComponent } from 'vue'
const DataPipesList = defineComponent({
setup() {},
render() {
- return (
- <div>datapipes</div>
- )
+ return <div>datapipes</div>
}
})
-export default DataPipesList
\ No newline at end of file
+export default DataPipesList
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index bf7c0dde4..9be980c0b 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -26,9 +26,7 @@ const Login = defineComponent({
const { state } = useForm()
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
- const handleLogin = () => {
-
- }
+ const handleLogin = () => {}
return {
t,
@@ -73,9 +71,7 @@ const Login = defineComponent({
</NForm>
<NButton
type='info'
- disabled={
- !this.loginForm.username || !this.loginForm.password
- }
+ disabled={!this.loginForm.username || !this.loginForm.password}
style={{ width: '100%' }}
onClick={this.handleLogin}
>
@@ -87,4 +83,4 @@ const Login = defineComponent({
}
})
-export default Login
\ No newline at end of file
+export default Login
diff --git a/seatunnel-ui/src/views/login/use-form.ts b/seatunnel-ui/src/views/login/use-form.ts
index ec8bb1f34..9a7094146 100644
--- a/seatunnel-ui/src/views/login/use-form.ts
+++ b/seatunnel-ui/src/views/login/use-form.ts
@@ -51,4 +51,4 @@ export function useForm() {
return {
state
}
-}
\ No newline at end of file
+}