feat:增加登录模块

src/components/Login/CommonLogin.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="common-login">
+    <el-form ref="loginFormRef" :model="authStore.loginForm"
+             :rules="rules" class="login-form"
+             autocomplete="on" label-position="left"
+             @submit.native.prevent>
+      <!-- 账户名表单选项 -->
+      <el-form-item prop="username" class="form-item">
+        <el-input
+            v-model="authStore.loginForm.username"
+            placeholder="请输入账号" clearable
+        >
+          <template #prefix>
+            <i class="fa-solid fa-user"></i>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <!-- password表单选项 -->
+      <el-form-item prop="password" class="form-item">
+        <el-input
+            v-model="authStore.loginForm.password"
+            placeholder="请输入密码" type="password"
+            show-password clearable
+            @keyup.enter.native="handleLogin('common')"
+        >
+          <template #prefix>
+            <i class="fa-solid fa-lock"></i>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <login-auth />
+      </el-form-item>
+
+      <el-form-item class="login-option">
+        <el-checkbox v-model="authStore.loginForm.isRemember">记住密码</el-checkbox>
+        <el-link type="primary">忘记密码？</el-link>
+      </el-form-item>
+    </el-form>
+
+    <el-button type="primary" style="width: 100%;"
+               :disabled="!authStore.isVerified"
+               :loading="authStore.loginLoading"
+               @click.prevent="handleLogin('common')">登录
+    </el-button>
+    <div />
+
+    <div class="login-type">
+      <el-button @click="authStore.changeLoginType('phone')">手机号登录</el-button>
+      <el-button>扫码登录</el-button>
+    </div>
+
+    <div class="login-others-type">
+      <el-divider content-position="center">其他登录方式</el-divider>
+
+      <div class="type-list">
+        <i class="fa-brands fa-weixin" style="color: #3CB034"></i>
+        <i class="fa-brands fa-qq" style="color: #29A4D9"></i>
+        <i class="fa-solid fa-envelope" style="color: #4971B8"
+           @click="authStore.changeLoginType('email')"></i>
+        <i class="fa-brands fa-github" style="color: #555555"></i>
+      </div>
+    </div>
+
+    <div class="login-register">
+      <span>还没有账户？</span>
+      <el-link type="primary" @click="authStore.changeLoginType('register')">创建账户</el-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoginAuth from '@/components/Login/LoginAuth.vue'
+import { useAuthStore } from '@/store/auth'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/user'
+import { ElMessage } from 'element-plus'
+import type { FormRules } from 'element-plus'
+import { onMounted, reactive, ref } from 'vue'
+import { loginRules } from '@/utils/element/elRules'
+import { getLocalStorage, setLocalStorage } from 'vue3-common/utils/storageUtil'
+import type { ILoginType } from '@/types/auth'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+
+const rules = reactive<FormRules>(loginRules)
+const authStore = useAuthStore()
+const router = useRouter()
+const userStore = useUserStore()
+
+const loginFormRef = ref()
+
+onMounted(() => {
+  const storageLoginForm = getLocalStorage('loginForm')
+  if (storageLoginForm) {
+    authStore.loginForm = JSON.parse(storageLoginForm)
+  }
+})
+
+const handleLogin = async (type: ILoginType) => {
+  loginFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (!isMobile()) {
+        ElMessage.error('目前只支持移动端')
+        return
+      }
+
+      authStore.loginLoading = true
+
+      try {
+        await authStore.handleLogin(type)
+        userStore.handleSession(authStore.session)
+
+        // 2. 存储账户密码到localStorage中
+        if (authStore.loginForm.isRemember) {
+          setLocalStorage('loginForm', JSON.stringify(authStore.loginForm))
+        }
+
+        await router.push('/record')
+      } finally {
+        authStore.loginLoading = false
+      }
+    } else {
+      ElMessage.error('请输入正确的信息')
+      return false
+    }
+  })
+}
+</script>