refactor: login

xingyu
1 parent 95325704
Showing 4 changed files with 44 additions and 51 deletions
yudao-ui-admin-vue3/src/views/Login/Login.vue
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
@@ -59,21 +59,18 @@
   </div>
 </template>
 <script setup lang="ts">
-import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
-import { ThemeSwitch } from '@/components/ThemeSwitch'
-import { LocaleDropdown } from '@/components/LocaleDropdown'
-import { useI18n } from '@/hooks/web/useI18n'
 import { underlineToHump } from '@/utils'
-import { useAppStore } from '@/store/modules/app'
+import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
+import { useAppStore } from '@/store/modules/app'
+import { ThemeSwitch } from '@/components/ThemeSwitch'
+import { LocaleDropdown } from '@/components/LocaleDropdown'
+import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
  
 const { t } = useI18n()
-
+const appStore = useAppStore()
 const { getPrefixCls } = useDesign()
-
 const prefixCls = getPrefixCls('login')
-
-const appStore = useAppStore()
 </script>
  
 <style lang="less" scoped>
@@ -137,7 +137,7 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { useIcon } from '@/hooks/web/useIcon'
+import { reactive, ref, unref, onMounted, computed, watch } from 'vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import {
   ElForm,
@@ -150,20 +150,24 @@ import {
   ElDivider,
   ElLoading
 } from 'element-plus'
-import { reactive, ref, unref, onMounted, computed, watch } from 'vue'
-import * as LoginApi from '@/api/login'
-import { setToken, setTenantId } from '@/utils/auth'
-import { usePermissionStore } from '@/store/modules/permission'
+import Cookies from 'js-cookie'
 import { useRouter } from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useIcon } from '@/hooks/web/useIcon'
 import { required } from '@/utils/formRules'
+import { setToken, setTenantId } from '@/utils/auth'
+import { decrypt, encrypt } from '@/utils/jsencrypt'
 import { Icon } from '@/components/Icon'
-import { LoginStateEnum, useLoginState, useFormValid } from './useLogin'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { Verify } from '@/components/Verifition'
-import Cookies from 'js-cookie'
-import { decrypt, encrypt } from '@/utils/jsencrypt'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
+import { LoginStateEnum, useLoginState, useFormValid } from './useLogin'
  
+const { t } = useI18n()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
 const { currentRoute, push } = useRouter()
 const permissionStore = usePermissionStore()
 const formLogin = ref()
@@ -173,16 +177,12 @@ const getShow = computed(() =&gt; unref(getLoginState) === LoginStateEnum.LOGIN)
 const iconSize = 30
 const iconColor = '#999'
 const redirect = ref<string>('')
-const { t } = useI18n()
-const iconHouse = useIcon({ icon: 'ep:house' })
-const iconAvatar = useIcon({ icon: 'ep:avatar' })
-const iconLock = useIcon({ icon: 'ep:lock' })
+const loginLoading = ref(false)
 const LoginRules = {
   tenantName: [required],
   username: [required],
   password: [required]
 }
-const loginLoading = ref(false)
 const loginData = reactive({
   isShowPassword: false,
   captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
@@ -202,7 +202,6 @@ const loginData = reactive({
 // blockPuzzle 滑块 clickWord 点击文字
 const verify = ref()
 const captchaType = ref('blockPuzzle')
-
 // 获取验证码
 const getCode = async () => {
   // 情况一，未开启：则直接登录
@@ -210,7 +209,6 @@ const getCode = async () =&gt; {
     await handleLogin({})
     return
   }
-
   // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
   // 弹出验证码
   verify.value.show()
@@ -85,31 +85,34 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { useIcon } from '@/hooks/web/useIcon'
 import { reactive, ref, unref, watch, computed } from 'vue'
-import LoginFormTitle from './LoginFormTitle.vue'
-import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElMessage } from 'element-plus'
+import { ElForm, ElFormItem, ElInput, ElRow, ElCol } from 'element-plus'
+import { useRouter } from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useI18n } from '@/hooks/web/useI18n'
-import { required } from '@/utils/formRules'
-import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
+import { useIcon } from '@/hooks/web/useIcon'
 import { useCache } from '@/hooks/web/useCache'
-import { usePermissionStore } from '@/store/modules/permission'
-import { useRouter } from 'vue-router'
+import { useMessage } from '@/hooks/web/useMessage'
 import { setToken } from '@/utils/auth'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { required } from '@/utils/formRules'
+import { usePermissionStore } from '@/store/modules/permission'
+import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
+import LoginFormTitle from './LoginFormTitle.vue'
 import { useLoginState, LoginStateEnum, useFormValid } from './useLogin'
-const formSmsLogin = ref()
-const { validForm } = useFormValid(formSmsLogin)
-const { handleBackLogin, getLoginState } = useLoginState()
-const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
-const iconHouse = useIcon({ icon: 'ep:house' })
-const iconCellphone = useIcon({ icon: 'ep:cellphone' })
-const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+
+const { t } = useI18n()
 const { wsCache } = useCache()
+const message = useMessage()
 const permissionStore = usePermissionStore()
 const { currentRoute, push } = useRouter()
+const formSmsLogin = ref()
 const loginLoading = ref(false)
-const { t } = useI18n()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+const { validForm } = useFormValid(formSmsLogin)
+const { handleBackLogin, getLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
  
 const rules = {
   tenantName: [required],
@@ -146,11 +149,7 @@ const getSmsCode = async () =&gt; {
   await getTenantId()
   smsVO.smsCode.mobile = loginData.loginForm.mobileNumber
   await sendSmsCodeApi(smsVO.smsCode).then(async () => {
-    // 提示验证码发送成功
-    ElMessage({
-      type: 'success',
-      message: t('login.SmsSendMsg')
-    })
+    message.success(t('login.SmsSendMsg'))
     // 设置倒计时
     mobileCodeTimer.value = 60
     let msgTimer = setInterval(() => {
@@ -35,22 +35,21 @@
 </template>
  
 <script setup lang="ts">
-import { Form } from '@/components/Form'
 import { computed, reactive, ref, unref } from 'vue'
+import { ElInput, FormRules } from 'element-plus'
+import { Form } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
-import { ElInput, FormRules } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { useLoginState, LoginStateEnum } from './useLogin'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { FormSchema } from '@/types/form'
  
+const { t } = useI18n()
+const { required } = useValidator()
 const { register, elFormRef } = useForm()
 const { handleBackLogin, getLoginState } = useLoginState()
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
-const { t } = useI18n()
-
-const { required } = useValidator()
  
 const schema = reactive<FormSchema[]>([
   {