增加移动端登录页面

web/src/views/Login.vue

@@ -5,12 +5,7 @@
         <AccountTop>
           <template #default>
             <div class="wechatLog flex-center" v-if="wechatLoginURL !== ''">
-              <a
-                :href="wechatLoginURL"
-                @click="setRoute(router.currentRoute.value.path)"
-              >
-                <i class="iconfont icon-wechat"></i>使用微信登录
-              </a>
+              <a :href="wechatLoginURL" @click="setRoute(router.currentRoute.value.path)"> <i class="iconfont icon-wechat"></i>使用微信登录 </a>
             </div>
           </template>
         </AccountTop>
@@ -19,47 +14,26 @@
           <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
             <el-form-item label="" prop="username">
               <div class="form-title">账号</div>
-              <el-input
-                v-model="ruleForm.username"
-                size="large"
-                placeholder="请输入账号"
-                @keyup="handleKeyup"
-              />
+              <el-input v-model="ruleForm.username" size="large" placeholder="请输入账号" @keyup="handleKeyup" />
             </el-form-item>
             <el-form-item label="" prop="password">
               <div class="flex-between w100">
                 <div class="form-title">密码</div>
-                <div
-                  class="form-forget text-color-primary"
-                  @click="router.push('/resetpassword')"
-                >
-                  忘记密码？
-                </div>
+                <div class="form-forget text-color-primary" @click="router.push('/resetpassword')">忘记密码？</div>
               </div>
 
-              <el-input
-                size="large"
-                v-model="ruleForm.password"
-                placeholder="请输入密码"
-                show-password
-                autocomplete="off"
-                @keyup="handleKeyup"
-              />
+              <el-input size="large" v-model="ruleForm.password" placeholder="请输入密码" show-password autocomplete="off" @keyup="handleKeyup" />
             </el-form-item>
             <el-form-item>
-              <el-button
-                class="login-btn"
-                size="large"
-                type="primary"
-                @click="login"
-                >登录</el-button
-              >
+              <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
             </el-form-item>
           </el-form>
         </div>
       </div>
     </div>
     <account-bg />
+
+    <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef" />
   </div>
 </template>
 
@@ -76,6 +50,7 @@ import { setRoute } from "@/store/system";
 import { useSharedStore } from "@/store/sharedata";
 
 import AccountTop from "@/components/AccountTop.vue";
+import Captcha from "@/components/Captcha.vue";
 
 const router = useRouter();
 const title = ref("Geek-AI");
@@ -87,16 +62,14 @@ const licenseConfig = ref({});
 const wechatLoginURL = ref("");
 const enableVerify = ref(false);
 const captchaRef = ref(null);
-// 是否需要验证码，输入一次密码错之后就要验证码
-const needVerify = ref(false);
 const ruleFormRef = ref(null);
 const ruleForm = reactive({
   username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS
+  password: process.env.VUE_APP_PASS,
 });
 const rules = {
   username: [{ required: true, trigger: "blur", message: "请输入账号" }],
-  password: [{ required: true, trigger: "blur", message: "请输入密码" }]
+  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
 };
 onMounted(() => {
   // 获取系统配置
@@ -147,7 +120,7 @@ const handleKeyup = (e) => {
 const login = async function () {
   await ruleFormRef.value.validate(async (valid) => {
     if (valid) {
-      if (enableVerify.value && needVerify.value) {
+      if (enableVerify.value) {
         captchaRef.value.loadCaptcha();
       } else {
         doLogin({});
@@ -163,12 +136,11 @@ const doLogin = (verifyData) => {
     password: password.value.trim(),
     key: verifyData.key,
     dots: verifyData.dots,
-    x: verifyData.x
+    x: verifyData.x,
   })
     .then((res) => {
       setUserToken(res.data.token);
       store.setIsLogin(true);
-      needVerify.value = false;
       if (isMobile()) {
         router.push("/mobile");
       } else {
@@ -177,7 +149,6 @@ const doLogin = (verifyData) => {
     })
     .catch((e) => {
       showMessageError("登录失败，" + e.message);
-      needVerify.value = true;
     });
 };
 </script>