[Feature][UI Next] Interface debugging（login）

dolphinscheduler-ui-next/package.json

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

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

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

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

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

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

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

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

@@ -16,24 +16,42 @@
  */
 
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import qs from 'qs'
 
 const baseRequestConfig: AxiosRequestConfig = {
-  baseURL: '/dolphinscheduler',
+  baseURL: import.meta.env.VITE_APP_WEB_URL + '/dolphinscheduler',
   timeout: 10000,
+  transformRequest: (params) => {
+    return qs.stringify(params, { arrayFormat: 'repeat' })
+  },
+  paramsSerializer: (params) => {
+    return qs.stringify(params, { arrayFormat: 'repeat'})
+  }
 }
 
 const service = axios.create(baseRequestConfig)
 
-const err = (error: AxiosError): Promise<AxiosError> => {
-  return Promise.reject(error)
+const err = (err: AxiosError): Promise<AxiosError> => {
+  return Promise.reject(err)
 }
 
 service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
+  console.log('config', config)
   return config
 }, err)
 
+// The response to intercept
 service.interceptors.response.use((res: AxiosResponse) => {
+
+  // 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)
 
 export { service as axios }

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

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

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