You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by ki...@apache.org on 2022/09/17 13:34:27 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add login and logout function in the project. (#2769)
This is an automated email from the ASF dual-hosted git repository.
kirs 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 745eec0d8 [Feat][UI] Add login and logout function in the project. (#2769)
745eec0d8 is described below
commit 745eec0d8396a04a207e5de1f49d88816ba34e1f
Author: songjianet <17...@qq.com>
AuthorDate: Sat Sep 17 21:34:22 2022 +0800
[Feat][UI] Add login and logout function in the project. (#2769)
---
seatunnel-ui/src/App.tsx | 5 ++++-
.../dashboard/header/user/use-user-dropdown.ts | 8 +++++++-
seatunnel-ui/src/layouts/dashboard/index.tsx | 6 ++++--
seatunnel-ui/src/main.ts | 4 ++++
seatunnel-ui/src/service/service.ts | 8 ++++++--
seatunnel-ui/src/service/user/types.ts | 4 ++++
seatunnel-ui/src/store/theme/index.ts | 2 +-
seatunnel-ui/src/store/theme/types.ts | 2 +-
seatunnel-ui/src/store/{theme => user}/index.ts | 21 +++++++++++----------
seatunnel-ui/src/store/{theme => user}/types.ts | 8 +++++---
seatunnel-ui/src/views/login/index.tsx | 7 +++----
seatunnel-ui/src/views/login/use-form.ts | 20 +++++++++++++++++---
seatunnel-ui/vite.config.ts | 10 +++++++++-
13 files changed, 76 insertions(+), 29 deletions(-)
diff --git a/seatunnel-ui/src/App.tsx b/seatunnel-ui/src/App.tsx
index 4b0c75bbc..4c3e60bcf 100644
--- a/seatunnel-ui/src/App.tsx
+++ b/seatunnel-ui/src/App.tsx
@@ -18,6 +18,7 @@
import { defineComponent, computed } from 'vue'
import {
NConfigProvider,
+ NMessageProvider,
darkTheme,
dateZhCN,
dateEnUS,
@@ -55,7 +56,9 @@ const App = defineComponent({
}
locale={String(this.localesStore.getLocales) === 'zh_CN' ? zhCN : enUS}
>
- <router-view />
+ <NMessageProvider>
+ <router-view />
+ </NMessageProvider>
</NConfigProvider>
)
}
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 0544c647d..0c88b32cb 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
@@ -18,11 +18,14 @@
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
+import { userLogout } from '@/service/user'
+import { useUserStore } from '@/store/user'
import type { Router } from 'vue-router'
export function useUserDropdown() {
const router: Router = useRouter()
const { t } = useI18n()
+ const userStore = useUserStore()
const dropdownOptions = [
{ key: 'help', label: t('menu.help') },
@@ -37,7 +40,10 @@ export function useUserDropdown() {
if (key === 'help') {
window.open('http://seatunnel.incubator.apache.org/versions/')
} else if (key === 'logout') {
- router.push({ path: '/login' })
+ userLogout().then(() => {
+ userStore.setUserInfo({})
+ router.push({ path: '/login' })
+ })
}
}
diff --git a/seatunnel-ui/src/layouts/dashboard/index.tsx b/seatunnel-ui/src/layouts/dashboard/index.tsx
index 77d93afb8..2a0c2458a 100644
--- a/seatunnel-ui/src/layouts/dashboard/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/index.tsx
@@ -16,11 +16,13 @@
*/
import { defineComponent } from 'vue'
-import { NLayout, NLayoutHeader, NLayoutContent } from 'naive-ui'
+import { NLayout, NLayoutHeader, NLayoutContent, useMessage } from 'naive-ui'
import Header from './header'
const Dashboard = defineComponent({
- setup() {},
+ setup() {
+ window.$message = useMessage()
+ },
render() {
return (
<NLayout>
diff --git a/seatunnel-ui/src/main.ts b/seatunnel-ui/src/main.ts
index 4962e59f6..c648237c4 100644
--- a/seatunnel-ui/src/main.ts
+++ b/seatunnel-ui/src/main.ts
@@ -24,6 +24,10 @@ import router from './router'
import utils from '@/utils'
import './index.css'
+const meta = document.createElement('meta')
+meta.name = 'naive-ui-style'
+document.head.appendChild(meta)
+
const app = createApp(App)
const pinia = createPinia()
diff --git a/seatunnel-ui/src/service/service.ts b/seatunnel-ui/src/service/service.ts
index de8e8e84f..305318112 100644
--- a/seatunnel-ui/src/service/service.ts
+++ b/seatunnel-ui/src/service/service.ts
@@ -23,11 +23,13 @@ const handleError = (res: AxiosResponse<any, any>) => {
utils.log.capsule('SeaTunnel', 'UI')
utils.log.error(res)
}
+ console.log(res)
window.$message.error(res.data.msg)
}
const baseRequestConfig: AxiosRequestConfig = {
- timeout: 6000
+ timeout: 6000,
+ baseURL: '/api/v1'
}
const service = axios.create(baseRequestConfig)
@@ -41,7 +43,9 @@ service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
}, err)
service.interceptors.response.use((res: AxiosResponse) => {
- return res.data
+ if (res.data.success) return res.data
+
+ handleError(res)
}, err)
export { service as axios }
diff --git a/seatunnel-ui/src/service/user/types.ts b/seatunnel-ui/src/service/user/types.ts
index 427ff86d5..392765131 100644
--- a/seatunnel-ui/src/service/user/types.ts
+++ b/seatunnel-ui/src/service/user/types.ts
@@ -29,6 +29,10 @@ interface UserLogin {
interface UserDetail extends UserLogin {
status: string
type: string
+ id?: number
+ name?: string
+ createTime?: any | null
+ updateTime?: any | null
}
export { UserList, UserLogin, UserDetail }
\ No newline at end of file
diff --git a/seatunnel-ui/src/store/theme/index.ts b/seatunnel-ui/src/store/theme/index.ts
index 0fe8052dd..91df4f42f 100644
--- a/seatunnel-ui/src/store/theme/index.ts
+++ b/seatunnel-ui/src/store/theme/index.ts
@@ -16,7 +16,7 @@
*/
import { defineStore } from 'pinia'
-import ThemeState from './types'
+import { ThemeState } from './types'
export const useThemeStore = defineStore({
id: 'theme',
diff --git a/seatunnel-ui/src/store/theme/types.ts b/seatunnel-ui/src/store/theme/types.ts
index c2ca699b4..fa7e56dd7 100644
--- a/seatunnel-ui/src/store/theme/types.ts
+++ b/seatunnel-ui/src/store/theme/types.ts
@@ -19,4 +19,4 @@ interface ThemeState {
darkTheme: boolean
}
-export default ThemeState
+export { ThemeState }
diff --git a/seatunnel-ui/src/store/theme/index.ts b/seatunnel-ui/src/store/user/index.ts
similarity index 72%
copy from seatunnel-ui/src/store/theme/index.ts
copy to seatunnel-ui/src/store/user/index.ts
index 0fe8052dd..963835fe8 100644
--- a/seatunnel-ui/src/store/theme/index.ts
+++ b/seatunnel-ui/src/store/user/index.ts
@@ -16,22 +16,23 @@
*/
import { defineStore } from 'pinia'
-import ThemeState from './types'
+import type { UserState } from './types'
+import type { UserDetail } from '@/service/user/types'
-export const useThemeStore = defineStore({
- id: 'theme',
- state: (): ThemeState => ({
- darkTheme: false
+export const useUserStore = defineStore({
+ id: 'user',
+ state: (): UserState => ({
+ userInfo: {}
}),
persist: true,
getters: {
- getTheme(): boolean {
- return this.darkTheme
+ getUserInfo(): UserDetail | {} {
+ return this.userInfo
}
},
actions: {
- setDarkTheme(): void {
- this.darkTheme = !this.darkTheme
+ setUserInfo(userInfo: UserDetail | {}): void {
+ this.userInfo = userInfo
}
}
-})
+})
\ No newline at end of file
diff --git a/seatunnel-ui/src/store/theme/types.ts b/seatunnel-ui/src/store/user/types.ts
similarity index 86%
copy from seatunnel-ui/src/store/theme/types.ts
copy to seatunnel-ui/src/store/user/types.ts
index c2ca699b4..a280ee63e 100644
--- a/seatunnel-ui/src/store/theme/types.ts
+++ b/seatunnel-ui/src/store/user/types.ts
@@ -15,8 +15,10 @@
* limitations under the License.
*/
-interface ThemeState {
- darkTheme: boolean
+import type { UserDetail } from '@/service/user/types'
+
+interface UserState {
+ userInfo: UserDetail | {}
}
-export default ThemeState
+export { UserState }
\ No newline at end of file
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index 87cac2fbe..0b7a655bd 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -16,18 +16,17 @@
*/
import { defineComponent, toRefs, withKeys, getCurrentInstance } from 'vue'
-import { NSpace, NForm, NFormItem, NInput, NButton } from 'naive-ui'
+import { NSpace, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useForm } from './use-form'
const Login = defineComponent({
setup() {
+ window.$message = useMessage()
const { t } = useI18n()
- const { state } = useForm()
+ const { state, handleLogin } = useForm()
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
- const handleLogin = () => {}
-
return {
t,
...toRefs(state),
diff --git a/seatunnel-ui/src/views/login/use-form.ts b/seatunnel-ui/src/views/login/use-form.ts
index 9a7094146..65b4a9ba6 100644
--- a/seatunnel-ui/src/views/login/use-form.ts
+++ b/seatunnel-ui/src/views/login/use-form.ts
@@ -17,10 +17,16 @@
import { reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
+import { userLogin } from '@/service/user'
+import { useUserStore } from '@/store/user'
+import { useRouter } from 'vue-router'
import type { FormRules } from 'naive-ui'
+import type { Router } from 'vue-router'
export function useForm() {
+ const router: Router = useRouter()
const { t } = useI18n()
+ const userStore = useUserStore()
const state = reactive({
loginFormRef: ref(),
@@ -29,7 +35,7 @@ export function useForm() {
password: ''
},
rules: {
- userName: {
+ username: {
trigger: ['input', 'blur'],
validator() {
if (state.loginForm.username === '') {
@@ -37,7 +43,7 @@ export function useForm() {
}
}
},
- userPassword: {
+ password: {
trigger: ['input', 'blur'],
validator() {
if (state.loginForm.password === '') {
@@ -48,7 +54,15 @@ export function useForm() {
} as FormRules
})
+ const handleLogin = () => {
+ userLogin({ ...state.loginForm }).then((res: any) => {
+ userStore.setUserInfo(res.data)
+ router.push({ path: '/data-pipes' })
+ })
+ }
+
return {
- state
+ state,
+ handleLogin
}
}
diff --git a/seatunnel-ui/vite.config.ts b/seatunnel-ui/vite.config.ts
index 4e7ce2159..48538c9c1 100644
--- a/seatunnel-ui/vite.config.ts
+++ b/seatunnel-ui/vite.config.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import viteCompression from 'vite-plugin-compression'
@@ -38,5 +38,13 @@ export default defineConfig({
alias: {
'@': path.resolve(__dirname, 'src')
}
+ },
+ server: {
+ proxy: {
+ '/api/v1': {
+ target: loadEnv('development', './').VITE_APP_DEV_WEB_URL,
+ changeOrigin: true
+ }
+ }
}
})
\ No newline at end of file