Browse Source

[Feature][UI Next] Interface debugging(login)

3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
commit
fc162826d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      dolphinscheduler-ui-next/package.json
  2. 8
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  3. 8
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  4. 1
      dolphinscheduler-ui-next/src/router/index.ts
  5. 26
      dolphinscheduler-ui-next/src/service/service.ts
  6. 2
      dolphinscheduler-ui-next/src/store/theme/theme.ts
  7. 42
      dolphinscheduler-ui-next/src/views/login/index.tsx

2
dolphinscheduler-ui-next/package.json

@ -16,6 +16,7 @@
"naive-ui": "^2.21.5", "naive-ui": "^2.21.5",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.0.0-rc.10", "pinia": "^2.0.0-rc.10",
"qs": "^6.10.2",
"vfonts": "^0.1.0", "vfonts": "^0.1.0",
"vue": "^3.2.23", "vue": "^3.2.23",
"vue-i18n": "^9.2.0-beta.23", "vue-i18n": "^9.2.0-beta.23",
@ -24,6 +25,7 @@
"devDependencies": { "devDependencies": {
"@types/node": "^16.11.13", "@types/node": "^16.11.13",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0", "@typescript-eslint/parser": "^5.6.0",
"@vitejs/plugin-vue": "^1.10.2", "@vitejs/plugin-vue": "^1.10.2",

8
dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@ -17,10 +17,10 @@
const login = { const login = {
test: 'Test', test: 'Test',
username: 'Username', userName: 'Username',
username_tips: 'Please enter your username', userName_tips: 'Please enter your username',
password: 'Password', userPassword: 'Password',
password_tips: 'Please enter your password', userPassword_tips: 'Please enter your password',
signin: 'Sign In', signin: 'Sign In',
} }

8
dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@ -17,10 +17,10 @@
const login = { const login = {
test: '测试', test: '测试',
username: '用户名', userName: '用户名',
username_tips: '请输入用户名', userName_tips: '请输入用户名',
password: '密码', userPassword: '密码',
password_tips: '请输入密码', userPassword_tips: '请输入密码',
signin: '登录', signin: '登录',
} }

1
dolphinscheduler-ui-next/src/router/index.ts

@ -18,7 +18,6 @@
import { import {
createRouter, createRouter,
createWebHistory, createWebHistory,
RouteRecordRaw,
NavigationGuardNext, NavigationGuardNext,
RouteLocationNormalized, RouteLocationNormalized,
} from 'vue-router' } from 'vue-router'

26
dolphinscheduler-ui-next/src/service/service.ts

@ -16,24 +16,42 @@
*/ */
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios' import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
import qs from 'qs'
const baseRequestConfig: AxiosRequestConfig = { const baseRequestConfig: AxiosRequestConfig = {
baseURL: '/dolphinscheduler', baseURL: import.meta.env.VITE_APP_WEB_URL + '/dolphinscheduler',
timeout: 10000, timeout: 10000,
transformRequest: (params) => {
return qs.stringify(params, { arrayFormat: 'repeat' })
},
paramsSerializer: (params) => {
return qs.stringify(params, { arrayFormat: 'repeat'})
}
} }
const service = axios.create(baseRequestConfig) const service = axios.create(baseRequestConfig)
const err = (error: AxiosError): Promise<AxiosError> => { const err = (err: AxiosError): Promise<AxiosError> => {
return Promise.reject(error) return Promise.reject(err)
} }
service.interceptors.request.use((config: AxiosRequestConfig<any>) => { service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
console.log('config', config)
return config return config
}, err) }, err)
// The response to intercept
service.interceptors.response.use((res: AxiosResponse) => { service.interceptors.response.use((res: AxiosResponse) => {
return res.data
// No code will be processed
if (res.data.code === undefined) {
return res.data
}
switch (res.data.code) {
case 0: return res.data.data
default: throw new Error(`${res.data.msg}: ${res.config.url}`)
}
}, err) }, err)
export { service as axios } export { service as axios }

2
dolphinscheduler-ui-next/src/store/theme/theme.ts

@ -21,7 +21,7 @@ import ThemeState from './types'
export const useThemeStore = defineStore({ export const useThemeStore = defineStore({
id: 'theme', id: 'theme',
state: (): ThemeState => ({ state: (): ThemeState => ({
darkTheme: true, darkTheme: false,
}), }),
getters: { getters: {
getTheme(): boolean { getTheme(): boolean {

42
dolphinscheduler-ui-next/src/views/login/index.tsx

@ -21,31 +21,32 @@ import { useI18n } from 'vue-i18n'
import { NInput, NButton, NSwitch, NForm, NFormItem, FormRules } from 'naive-ui' import { NInput, NButton, NSwitch, NForm, NFormItem, FormRules } from 'naive-ui'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import type { Router } from 'vue-router' import type { Router } from 'vue-router'
import { queryLog } from '@/service/modules/login'
const Login = defineComponent({ const login = defineComponent({
name: 'login', name: 'login',
setup() { setup() {
const { t, locale } = useI18n() const { t, locale } = useI18n()
const state = reactive({ const state = reactive({
loginFormRef: ref(), loginFormRef: ref(),
loginForm: { loginForm: {
username: '', userName: '',
password: '', userPassword: '',
}, },
rules: { rules: {
username: { userName: {
trigger: ['input', 'blur'], trigger: ['input', 'blur'],
validator() { validator() {
if (state.loginForm.username === '') { if (state.loginForm.userName === '') {
return new Error(`${t('login.username_tips')}`) return new Error(`${t('login.userName_tips')}`)
} }
}, },
}, },
password: { userPassword: {
trigger: ['input', 'blur'], trigger: ['input', 'blur'],
validator() { validator() {
if (state.loginForm.password === '') { if (state.loginForm.userPassword === '') {
return new Error(`${t('login.password_tips')}`) return new Error(`${t('login.userPassword_tips')}`)
} }
}, },
}, },
@ -60,7 +61,10 @@ const Login = defineComponent({
const handleLogin = () => { const handleLogin = () => {
state.loginFormRef.validate((valid: any) => { state.loginFormRef.validate((valid: any) => {
if (!valid) { if (!valid) {
router.push({ path: 'home' }) queryLog({...state.loginForm}).then((res: Response) => {
console.log('res', res)
router.push({ path: 'home' })
})
} else { } else {
console.log('Invalid') console.log('Invalid')
} }
@ -91,29 +95,29 @@ const Login = defineComponent({
<div class={styles['form-model']}> <div class={styles['form-model']}>
<NForm rules={this.rules} ref='loginFormRef'> <NForm rules={this.rules} ref='loginFormRef'>
<NFormItem <NFormItem
label={this.t('login.username')} label={this.t('login.userName')}
label-style={{ color: 'black' }} label-style={{ color: 'black' }}
path='username' path='userName'
> >
<NInput <NInput
type='text' type='text'
size='large' size='large'
v-model={[this.loginForm.username, 'value']} v-model={[this.loginForm.userName, 'value']}
placeholder={this.t('login.username_tips')} placeholder={this.t('login.userName_tips')}
autofocus autofocus
onKeydown={withKeys(this.handleLogin, ['enter'])} onKeydown={withKeys(this.handleLogin, ['enter'])}
/> />
</NFormItem> </NFormItem>
<NFormItem <NFormItem
label={this.t('login.password')} label={this.t('login.userPassword')}
label-style={{ color: 'black' }} label-style={{ color: 'black' }}
path='password' path='userPassword'
> >
<NInput <NInput
type='password' type='password'
size='large' size='large'
v-model={[this.loginForm.password, 'value']} v-model={[this.loginForm.userPassword, 'value']}
placeholder={this.t('login.password_tips')} placeholder={this.t('login.userPassword_tips')}
onKeydown={withKeys(this.handleLogin, ['enter'])} onKeydown={withKeys(this.handleLogin, ['enter'])}
/> />
</NFormItem> </NFormItem>
@ -128,4 +132,4 @@ const Login = defineComponent({
}, },
}) })
export default Login export default login

Loading…
Cancel
Save