feat: 新增手机号登录、邮箱登录

src/apis/auth/index.ts

@@ -8,6 +8,26 @@ export function accountLogin(req: Auth.AccountLoginReq) {
   return http.post<Auth.LoginResp>(`${BASE_URL}/account`, req)
 }
 
+/** @desc 手机号登录 */
+export function phoneLogin(req: Auth.PhoneLoginReq) {
+  return http.post<Auth.LoginResp>(`${BASE_URL}/phone`, req)
+}
+
+/** @desc 邮箱登录 */
+export function emailLogin(req: Auth.EmailLoginReq) {
+  return http.post<Auth.LoginResp>(`${BASE_URL}/email`, req)
+}
+
+/** @desc 三方账号登录 */
+export function socialLogin(source: string, req: any) {
+  return http.post<Auth.LoginResp>(`/oauth/${source}`, req)
+}
+
+/** @desc 三方账号登录授权 */
+export function socialAuth(source: string) {
+  return http.get<Auth.SocialAuthAuthorizeResp>(`/oauth/${source}`)
+}
+
 /** @desc 退出登录 */
 export function logout() {
   return http.post(`${BASE_URL}/logout`)
@@ -22,8 +42,3 @@ export const getUserInfo = () => {
 export const getUserRoute = () => {
   return http.get<Auth.RouteItem[]>(`${BASE_URL}/route`)
 }
-
-/** @desc 第三方登录授权 */
-export function socialAuth(source: string) {
-  return http.get<Auth.SocialAuthAuthorizeResp>(`/oauth/${source}`)
-}

src/apis/auth/type.ts

@@ -40,13 +40,26 @@ export interface RouteItem {
   affix: boolean
 }
 
+/** 账号登录请求参数 */
 export interface AccountLoginReq {
   username: string
   password: string
   captcha: string
   uuid: string
 }
 
+/** 手机号登录请求参数 */
+export interface PhoneLoginReq {
+  phone: string
+  captcha: string
+}
+
+/** 邮箱登录请求参数 */
+export interface EmailLoginReq {
+  email: string
+  captcha: string
+}
+
 // 登录响应类型
 export interface LoginResp {
   token: string

src/apis/common/captcha.ts

@@ -7,11 +7,13 @@ const BASE_URL = '/captcha'
 export function getImageCaptcha() {
   return http.get<Common.ImageCaptchaResp>(`${BASE_URL}/img`)
 }
-/**@desc 获取手机验证码 */
-export function getPhoneCaptcha(query: { phone: string }) {
+
+/** @desc 获取短信验证码 */
+export function getSmsCaptcha(query: { phone: string }) {
   return http.get<boolean>(`${BASE_URL}/sms`, query)
 }
-/**@desc 获取邮箱验证码 */
+
+/** @desc 获取邮箱验证码 */
 export function getEmailCaptcha(query: { email: string }) {
   return http.get<boolean>(`${BASE_URL}/mail`, query)
 }

src/components/GiThemeBtn/index.vue

@@ -1,8 +1,8 @@
 <template>
   <a-button size="mini" class="gi_hover_btn" @click="handleToggleTheme">
     <template #icon>
-      <icon-sun-fill :size="18" v-if="appStore.theme === 'light'"></icon-sun-fill>
-      <icon-moon-fill :size="18" v-else></icon-moon-fill>
+      <icon-moon-fill v-if="appStore.theme === 'light'" :size="18" />
+      <icon-sun-fill v-else :size="18" />
     </template>
   </a-button>
 </template>

src/layout/components/Logo.vue

@@ -45,10 +45,6 @@ const toHome = () => {
     display: flex;
     justify-content: center;
     align-items: center;
-    // .logo {
-    //   width: 24px;
-    //   height: 24px;
-    // }
     .system-name {
       display: none;
     }
@@ -62,7 +58,7 @@ const toHome = () => {
     flex-shrink: 0;
   }
   .system-name {
-    padding-left: 10px;
+    padding-left: 8px;
     white-space: nowrap;
     transition: color 0.3s;
     &:hover {

src/stores/modules/user.ts

@@ -1,8 +1,18 @@
 import { defineStore } from 'pinia'
 import { ref, reactive, computed } from 'vue'
 import { resetRouter } from '@/router'
-import { accountLogin as accountLoginApi, logout as logoutApi, getUserInfo as getUserInfoApi } from '@/apis'
-import { socialAuth, type UserInfo } from '@/apis'
+import {
+  accountLogin as accountLoginApi,
+  phoneLogin as phoneLoginApi,
+  emailLogin as emailLoginApi,
+  socialLogin as socialLoginApi,
+  logout as logoutApi,
+  getUserInfo as getUserInfoApi,
+  type AccountLoginReq,
+  type PhoneLoginReq,
+  type EmailLoginReq,
+  type UserInfo
+} from '@/apis'
 import { setToken, clearToken, getToken } from '@/utils/auth'
 import { resetHasRouteFlag } from '@/router/permission'
 import getAvatar from '@/utils/avatar'
@@ -31,21 +41,33 @@ const storeSetup = () => {
   }
 
   // 登录
-  const accountLogin = async (params: any) => {
-    const res = await accountLoginApi(params)
+  const accountLogin = async (req: AccountLoginReq) => {
+    const res = await accountLoginApi(req)
     setToken(res.data.token)
     token.value = res.data.token
   }
-  // 三方账号身份登录
+
+  // 邮箱登录
+  const emailLogin = async (req: EmailLoginReq) => {
+    const res = await emailLoginApi(req)
+    setToken(res.data.token)
+    token.value = res.data.token
+  }
+
+  // 手机号登录
+  const phoneLogin = async (req: PhoneLoginReq) => {
+    const res = await phoneLoginApi(req)
+    setToken(res.data.token)
+    token.value = res.data.token
+  }
+
+  // 三方账号登录
   const socialLogin = async (source: string, req: any) => {
-    try {
-      const res = await socialAuth(source, req)
-      setToken(res.data.token)
-    } catch (err) {
-      clearToken()
-      throw err
-    }
+    const res = await socialLoginApi(source, req)
+    setToken(res.data.token)
+    token.value = res.data.token
   }
+
   // 退出登录
   const logout = async () => {
     try {
@@ -88,6 +110,8 @@ const storeSetup = () => {
     roles,
     permissions,
     accountLogin,
+    emailLogin,
+    phoneLogin,
     socialLogin,
     logout,
     logoutCallBack,

src/views/login/components/account/index.vue

@@ -8,20 +8,14 @@
     size="large"
     @submit="handleLogin"
   >
-    <a-form-item field="username">
-      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear>
-        <template #prefix><icon-user :stroke-width="1" :style="{ fontSize: '16px' }" /></template>
-      </a-input>
+    <a-form-item field="username" hide-label>
+      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
     </a-form-item>
-    <a-form-item field="password">
-      <a-input-password v-model="form.password" placeholder="请输入密码">
-        <template #prefix><icon-lock :stroke-width="1" :style="{ fontSize: '16px' }" /></template>
-      </a-input-password>
+    <a-form-item field="password" hide-label>
+      <a-input-password v-model="form.password" placeholder="请输入密码" />
     </a-form-item>
     <a-form-item field="captcha" hide-label>
-      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1">
-        <template #prefix><icon-check-circle :stroke-width="1" :style="{ fontSize: '16px' }" /></template>
-      </a-input>
+      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1" />
       <img :src="captchaImgBase64" alt="验证码" class="captcha" @click="getCaptcha" />
     </a-form-item>
     <a-form-item>
@@ -32,7 +26,7 @@
     </a-form-item>
     <a-form-item>
       <a-space direction="vertical" fill class="w-full">
-        <a-button class="btn" type="primary" size="large" long :loading="loading" html-type="submit">登录</a-button>
+        <a-button class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
       </a-space>
     </a-form-item>
   </a-form>
@@ -70,13 +64,13 @@ const rules: FormInstance['rules'] = {
 
 const userStore = useUserStore()
 const router = useRouter()
-const { loading, setLoading } = useLoading()
+const loading = ref(false)
 // 登录
 const handleLogin = async () => {
   try {
     const isInvalid = await formRef.value?.validate()
     if (isInvalid) return
-    setLoading(true)
+    loading.value = true
     await userStore.accountLogin({
       username: form.username,
       password: encryptByRsa(form.password) || '',
@@ -97,7 +91,7 @@ const handleLogin = async () => {
     getCaptcha()
     form.captcha = ''
   } finally {
-    setLoading(false)
+    loading.value = false
   }
 }
 
@@ -122,14 +116,23 @@ onMounted(() => {
   border-radius: 4px;
   font-size: 13px;
 }
+
 .arco-input-wrapper.arco-input-error {
   background-color: rgb(var(--danger-1));
-  border-color: rgb(var(--danger-4));
+  border-color: rgb(var(--danger-3));
+}
+.arco-input-wrapper.arco-input-error:hover {
+  background-color: rgb(var(--danger-1));
+  border-color: rgb(var(--danger-6));
 }
+
 .arco-input-wrapper :deep(.arco-input) {
   font-size: 13px;
   color: var(--color-text-1);
 }
+.arco-input-wrapper:hover {
+  border-color: rgb(var(--arcoblue-6));
+}
 
 .captcha {
   width: 111px;