登录的时候提示正在登录中，并锁定按钮

web/src/components/LoginDialog.vue

@@ -31,8 +31,13 @@
 
         <el-row class="btn-row" :gutter="20">
           <el-col :span="24">
-            <el-button class="login-btn" type="primary" size="large" @click="submitLogin"
+            <el-button
-              >登 录</el-button
+              class="login-btn"
+              type="primary"
+              size="large"
+              @click="submitLogin"
+              :loading="loading"
+              >{{ loading ? '登录中...' : '登 录' }}</el-button
             >
           </el-col>
         </el-row>
@@ -193,8 +198,13 @@
         </div>
 
         <div class="w-full">
-          <el-button class="login-btn w-full" type="primary" size="large" @click="submitRegister"
+          <el-button
-            >注 册</el-button
+            class="login-btn w-full"
+            type="primary"
+            size="large"
+            @click="submitRegister"
+            :loading="loading"
+            >{{ loading ? '注册中...' : '注 册' }}</el-button
           >
         </div>
 
@@ -287,8 +297,8 @@ const emits = defineEmits(['hide', 'success'])
 const action = ref('login')
 const enableVerify = ref(false)
 const showResetPass = ref(false)
-const router = useRouter()
 const store = useSharedStore()
+const loading = ref(false)
 
 onMounted(() => {
   getSystemInfo()
@@ -349,6 +359,7 @@ const doLogin = (verifyData) => {
   data.value.key = verifyData.key
   data.value.dots = verifyData.dots
   data.value.x = verifyData.x
+  loading.value = true
   httpPost('/api/user/login', data.value)
     .then((res) => {
       setUserToken(res.data.token)
@@ -360,6 +371,9 @@ const doLogin = (verifyData) => {
     .catch((e) => {
       ElMessage.error('登录失败，' + e.message)
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 // 注册操作
@@ -399,6 +413,7 @@ const doRegister = (verifyData) => {
   data.value.dots = verifyData.dots
   data.value.x = verifyData.x
   data.value.reg_way = activeName.value
+  loading.value = true
   httpPost('/api/user/register', data.value)
     .then((res) => {
       setUserToken(res.data.token)
@@ -414,6 +429,9 @@ const doRegister = (verifyData) => {
     .catch((e) => {
       ElMessage.error('注册失败，' + e.message)
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 </script>
 

web/src/views/Suno.vue

@@ -566,5 +566,5 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/css/suno.scss';
+@use '@/assets/css/suno.scss';
 </style>

web/src/views/admin/Login.vue

@@ -41,8 +41,13 @@
             </el-input>
 
             <el-row class="btn-row">
-              <el-button class="login-btn" size="large" type="primary" @click="login"
+              <el-button
-                >登录</el-button
+                class="login-btn"
+                size="large"
+                type="primary"
+                @click="login"
+                :loading="loading"
+                >{{ loading ? '登录中...' : '登录' }}</el-button
               >
             </el-row>
           </div>
@@ -73,6 +78,7 @@ const password = ref(import.meta.env.VITE_ADMIN_PASS)
 const logo = ref('')
 const enableVerify = ref(false)
 const captchaRef = ref(null)
+const loading = ref(false)
 
 checkAdminSession()
   .then(() => {
@@ -106,6 +112,7 @@ const login = function () {
 }
 
 const doLogin = function (verifyData) {
+  loading.value = true
   httpPost('/api/admin/login', {
     username: username.value.trim(),
     password: password.value.trim(),
@@ -120,6 +127,9 @@ const doLogin = function (verifyData) {
     .catch((e) => {
       ElMessage.error('登录失败，' + e.message)
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 </script>
 

web/src/views/mobile/Login.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="login flex w-full flex-col place-content-center h-lvh">
-    <!-- 返回首页链接 -->
-    <div class="back-home">
-      <el-button @click="goHome" type="text" class="back-btn">
-        <i class="iconfont icon-home"></i>
-        返回首页
-      </el-button>
-    </div>
-
-    <el-image :src="logo" class="w-1/2 mx-auto logo" />
-    <div class="title text-center text-3xl font-bold mt-8">{{ title }}</div>
-    <div class="w-full p-8">
-      <login-dialog @success="loginSuccess" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import LoginDialog from '@/components/LoginDialog.vue'
-import { getSystemInfo } from '@/store/cache'
-import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const title = ref('登录')
-const logo = ref('')
-
-const loginSuccess = () => {
-  router.back()
-}
-
-const goHome = () => {
-  router.push('/mobile/index')
-}
-
-onMounted(() => {
-  getSystemInfo().then((res) => {
-    title.value = res.data.title
-    logo.value = res.data.logo
-  })
-})
-</script>
-
-<style scoped lang="scss">
-.login {
-  background: var(--theme-bg);
-  transition: all 0.3s ease;
-  position: relative;
-
-  .back-home {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    z-index: 10;
-
-    .back-btn {
-      color: var(--text-theme-color);
-      font-size: 14px;
-
-      .iconfont {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  .logo {
-    background: #ffffff;
-    border-radius: 50%;
-  }
-
-  .title {
-    color: var(--text-theme-color);
-  }
-}
-</style>