Merge pull request #1589 from Larch-C/master

🎈 perf: 优化了登录界面，解决了登录未自行跳转的问题

dashboard/src/components/shared/Logo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="logo-container">
+    <div class="logo-content">
+      <div class="logo-image">
+        <img width="110" src="@/assets/images/astrbot_logo_mini.webp" alt="AstrBot Logo">
+      </div>
+      <div class="logo-text">
+        <h2 class="text-secondary">AstrBot 仪表盘</h2>
+        <h4 class="text-disabled">登录以继续</h4>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No props or other logic needed for this simple component
+</script>
+
+<style scoped>
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.logo-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 10px;
+}
+
+.logo-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo-image img {
+  transition: transform 0.3s ease;
+}
+
+.logo-image img:hover {
+  transform: scale(1.05);
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.logo-text h2 {
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #5e35b1;
+  letter-spacing: 0.5px;
+}
+
+.logo-text h4 {
+  margin: 4px 0 0 0;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #616161;
+  letter-spacing: 0.3px;
+}
+</style>

dashboard/src/router/index.ts

@@ -24,6 +24,11 @@ router.beforeEach(async (to, from, next) => {
   const authRequired = !publicPages.includes(to.path);
   const auth: AuthStore = useAuthStore();
 
+  // 如果用户已登录且试图访问登录页面，则重定向到首页或之前尝试访问的页面
+  if (to.path === '/auth/login' && auth.has_token()) {
+    return next(auth.returnUrl || '/');
+  }
+
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (authRequired && !auth.has_token()) {
       auth.returnUrl = to.fullPath;

dashboard/src/views/authentication/auth/LoginPage.vue

@@ -1,23 +1,111 @@
 <script setup lang="ts">
 import AuthLogin from '../authForms/AuthLogin.vue';
+import Logo from '@/components/shared/Logo.vue';
+import { onMounted, ref } from 'vue';
+import { useAuthStore } from '@/stores/auth';
+import { useRouter } from 'vue-router';
+
+const cardVisible = ref(false);
+const router = useRouter();
+const authStore = useAuthStore();
+
+onMounted(() => {
+  // 检查用户是否已登录，如果已登录则重定向
+  if (authStore.has_token()) {
+    router.push(authStore.returnUrl || '/');
+    return;
+  }
+  
+  // 添加一个小延迟以获得更好的动画效果
+  setTimeout(() => {
+    cardVisible.value = true;
+  }, 100);
+});
 </script>
 
 <template>
-  <div style="display: flex; justify-content: center; flex-direction: column; align-items: center; height: 100vh; background-color: aliceblue;">
-    <v-card variant="outlined" style="max-width: 500px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);">
-      <v-card-text class="pa-9">
-        <div class="text-center">
+  <div class="login-page-container">
+    <div class="login-background"></div>
+    <v-card 
+      variant="outlined" 
+      class="login-card" 
+      :class="{ 'card-visible': cardVisible }"
+    >
+      <v-card-text class="pa-10">
+        <div class="logo-wrapper">
           <Logo />
-          <h2 class="text-secondary text-h2 mt-4">AstrBot 仪表盘</h2>
-          <h4 class="text-disabled text-h4 mt-3">登录以继续</h4>
+        </div>
+        <div class="divider-container">
+          <v-divider class="custom-divider"></v-divider>
         </div>
         <AuthLogin />
       </v-card-text>
     </v-card>
   </div>
-
 </template>
+
 <style lang="scss">
+.login-page-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  background: linear-gradient(135deg, #ebf5fd 0%, #e0e9f8 100%);
+  overflow: hidden;
+}
+
+.login-background {
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background: radial-gradient(circle, rgba(94, 53, 177, 0.03) 0%, rgba(30, 136, 229, 0.06) 70%);
+  z-index: 0;
+  animation: rotate 60s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.login-card {
+  max-width: 520px;
+  width: 90%;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07) !important;
+  background-color: rgba(255, 255, 255, 0.98) !important;
+  transform: translateY(20px);
+  opacity: 0;
+  transition: all 0.5s ease;
+  z-index: 1;
+  
+  &.card-visible {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.logo-wrapper {
+  margin-bottom: 10px;
+}
+
+.divider-container {
+  margin: 20px 0;
+}
+
+.custom-divider {
+  border-color: rgba(0, 0, 0, 0.05) !important;
+  opacity: 0.8;
+}
+
 .loginBox {
   max-width: 475px;
   margin: 0 auto;

dashboard/src/views/authentication/authForms/AuthLogin.vue

@@ -8,9 +8,12 @@ const valid = ref(false);
 const show1 = ref(false);
 const password = ref('');
 const username = ref('');
+const loading = ref(false);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 async function validate(values: any, { setErrors }: any) {
+  loading.value = true;
+  
   // md5加密
   let password_ = password.value;
   if (password.value != '') {
@@ -21,67 +24,154 @@ async function validate(values: any, { setErrors }: any) {
   const authStore = useAuthStore();
   return authStore.login(username.value, password_).then((res) => {
     console.log(res);
+    loading.value = false;
   }).catch((err) => {
     setErrors({ apiError: err });
+    loading.value = false;
   });
 }
 
 </script>
 
 <template>
-  <Form @submit="validate" class="mt-7 loginForm" v-slot="{ errors, isSubmitting }">
-    <v-text-field v-model="username" label="用户名" class="mt-4 mb-8" required density="comfortable"
-      hide-details="auto" variant="outlined" color="primary"></v-text-field>
-    <v-text-field v-model="password" label="密码" required density="comfortable" variant="outlined"
-      color="primary" hide-details="auto" :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
-      :type="show1 ? 'text' : 'password'" @click:append="show1 = !show1" class="pwdInput"></v-text-field>
+  <Form @submit="validate" class="mt-4 login-form" v-slot="{ errors, isSubmitting }">
+    <v-text-field 
+      v-model="username" 
+      label="用户名" 
+      class="mb-6 input-field" 
+      required 
+      density="comfortable"
+      hide-details="auto" 
+      variant="outlined" 
+      color="primary"
+      prepend-inner-icon="mdi-account"
+      :disabled="loading"
+    ></v-text-field>
+    
+    <v-text-field 
+      v-model="password" 
+      label="密码" 
+      required 
+      density="comfortable" 
+      variant="outlined"
+      color="primary" 
+      hide-details="auto" 
+      :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
+      :type="show1 ? 'text' : 'password'" 
+      @click:append="show1 = !show1" 
+      class="pwd-input"
+      prepend-inner-icon="mdi-lock"
+      :disabled="loading"
+    ></v-text-field>
 
-    <small>默认用户名和密码为 astrbot。</small>
-    <v-btn color="secondary" :loading="isSubmitting" block class="mt-8" variant="flat" size="large" :disabled="valid"
-      type="submit">
-      登录</v-btn>
-    <div v-if="errors.apiError" class="mt-2">
-      <v-alert color="error">{{ errors.apiError }}</v-alert>
+    <div class="mt-1 mb-5 hint-text">
+      <small>默认用户名和密码为 astrbot</small>
+    </div>
+    
+    <v-btn 
+      color="secondary" 
+      :loading="isSubmitting || loading" 
+      block 
+      class="login-btn" 
+      variant="flat" 
+      size="large" 
+      :disabled="valid"
+      type="submit"
+      elevation="2"
+    >
+      <span class="login-btn-text">登录</span>
+    </v-btn>
+    
+    <div v-if="errors.apiError" class="mt-4 error-container">
+      <v-alert 
+        color="error" 
+        variant="tonal" 
+        density="comfortable"
+        icon="mdi-alert-circle"
+        border="start"
+      >
+        {{ errors.apiError }}
+      </v-alert>
     </div>
   </Form>
-
 </template>
 
 <style lang="scss">
-.custom-devider {
-  border-color: rgba(0, 0, 0, 0.08) !important;
-}
-
-.googleBtn {
-  border-color: rgba(0, 0, 0, 0.08);
-  margin: 30px 0 20px 0;
-}
-
-.outlinedInput .v-field {
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow: none;
-}
-
-.orbtn {
-  padding: 2px 40px;
-  border-color: rgba(0, 0, 0, 0.08);
-  margin: 20px 15px;
-}
-
-.pwdInput {
-  position: relative;
-
-  .v-input__append {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.loginForm {
+.login-form {
   .v-text-field .v-field--active input {
     font-weight: 500;
   }
+
+  .input-field, .pwd-input {
+    .v-field__field {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    
+    .v-field__outline {
+      opacity: 0.7;
+    }
+    
+    &:hover .v-field__outline {
+      opacity: 0.9;
+    }
+    
+    .v-field--focused .v-field__outline {
+      opacity: 1;
+    }
+    
+    .v-field__prepend-inner {
+      padding-right: 8px;
+      opacity: 0.7;
+    }
+  }
+
+  .pwd-input {
+    position: relative;
+
+    .v-input__append {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0.7;
+      
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  
+  .login-btn {
+    margin-top: 12px;
+    height: 48px;
+    transition: all 0.3s ease;
+    letter-spacing: 0.5px;
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 15px rgba(94, 53, 177, 0.2) !important;
+    }
+    
+    .login-btn-text {
+      font-size: 1.05rem;
+      font-weight: 500;
+    }
+  }
+  
+  .hint-text {
+    color: rgba(0, 0, 0, 0.5);
+    padding-left: 5px;
+  }
+  
+  .error-container {
+    .v-alert {
+      border-left-width: 4px !important;
+    }
+  }
+}
+
+.custom-devider {
+  border-color: rgba(0, 0, 0, 0.08) !important;
 }
 </style>