改进了登录页

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import AdminLayout from '../layout/AdminLayout.vue'
+import { useUserStore } from '../stores/user'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -13,6 +14,7 @@ const router = createRouter({
       path: '/',
       component: AdminLayout,
       redirect: '/dashboard',
+      meta: { requiresAuth: true },
       children: [
         {
           path: 'dashboard',
@@ -101,9 +103,20 @@ const router = createRouter({
 
 // 路由守卫
 router.beforeEach((to, from, next) => {
-  const token = localStorage.getItem('token')
+  const userStore = useUserStore()
-  if (to.path !== '/login' && !token) {
+  
-    next('/login')
+  // 如果访问登录页且已登录，重定向到首页
+  if (to.path === '/login' && userStore.isLoggedIn) {
+    next('/')
+    return
+  }
+  
+  // 如果需要认证但未登录，重定向到登录页
+  if (to.matched.some(record => record.meta.requiresAuth) && !userStore.isLoggedIn) {
+    next({
+      path: '/login',
+      query: { redirect: to.fullPath } // 保存原目标路径
+    })
   } else {
     next()
   }

src/views/login/index.vue

@@ -2,12 +2,15 @@
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import { useUserStore } from '../../stores/user';
+import { useUserStore } from "../../stores/user";
-import { useSystemLogStore } from '../../stores/systemLog';
+import { useSystemLogStore } from "../../stores/systemLog";
+import { useRoute } from "vue-router";
+import { User, Lock } from "@element-plus/icons-vue";
 
 const router = useRouter();
 const userStore = useUserStore();
 const systemLogStore = useSystemLogStore();
+const route = useRoute();
 
 const loginForm = reactive({
   username: "",
@@ -16,28 +19,27 @@ const loginForm = reactive({
 
 // 表单验证规则
 const rules = {
-  username: [
+  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-    { required: true, message: "请输入用户名", trigger: "blur" }
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-  ],
-  password: [
-    { required: true, message: "请输入密码", trigger: "blur" }
-  ]
 };
 
 const loading = ref(false);
 const formRef = ref();
+const shake = ref(false);
 
 // 获取当前时间
 const getCurrentTime = () => {
-  return new Date().toLocaleString('zh-CN', {
+  return new Date()
-    year: 'numeric',
+    .toLocaleString("zh-CN", {
-    month: '2-digit',
+      year: "numeric",
-    day: '2-digit',
+      month: "2-digit",
-    hour: '2-digit',
+      day: "2-digit",
-    minute: '2-digit',
+      hour: "2-digit",
-    second: '2-digit',
+      minute: "2-digit",
-    hour12: false
+      second: "2-digit",
-  }).replace(/\//g, '-');
+      hour12: false,
+    })
+    .replace(/\//g, "-");
 };
 
 const handleLogin = async (formEl: any) => {
@@ -55,9 +57,12 @@ const handleLogin = async (formEl: any) => {
         action: "登录系统",
         ip: "192.168.1.100",
         status: "成功",
-        detail: "用户登录成功"
+        detail: "用户登录成功",
       });
-      router.push("/dashboard");
+
+      // 获取重定向地址
+      const redirect = route.query.redirect as string;
+      router.push(redirect || "/dashboard");
     } else {
       // 记录失败日志
       systemLogStore.addLog({
@@ -66,56 +71,86 @@ const handleLogin = async (formEl: any) => {
         action: "登录系统",
         ip: "192.168.1.100",
         status: "失败",
-        detail: "用户名或密码错误"
+        detail: "用户名或密码错误",
       });
       ElMessage.error("用户名或密码错误");
     }
   } catch (error) {
-    console.error(error);
+    shake.value = true;
+    setTimeout(() => {
+      shake.value = false;
+    }, 500);
   } finally {
     loading.value = false;
   }
 };
+
+// 添加输入框获得焦点时的处理函数
+const handleFocus = (prop: "username" | "password") => {
+  if (formRef.value) {
+    // 清除对应字段的验证错误
+    formRef.value.clearValidate(prop);
+  }
+};
 </script>
 
 <template>
   <div class="login-container">
-    <el-card class="login-card">
+    <div class="login-bg">
-      <h2>智慧湿地管理平台</h2>
+      <div class="bg-overlay"></div>
-      <el-form 
+    </div>
-        ref="formRef"
+    <div class="login-wrapper">
-        :model="loginForm" 
+      <div class="login-content">
-        :rules="rules"
+        <div class="login-header">
-        label-width="0"
+          <h1>智慧湿地管理平台</h1>
-      >
+          <p class="subtitle">科技赋能生态保护 智慧守护绿色家园</p>
-        <el-form-item prop="username">
+        </div>
-          <el-input 
+        <el-card class="login-card" :class="{ shake }">
-            v-model="loginForm.username" 
+          <h2>账号登录</h2>
-            placeholder="用户名" 
+          <el-form
-            prefix-icon="User" 
+            ref="formRef"
-          />
+            :model="loginForm"
-        </el-form-item>
+            :rules="rules"
-        <el-form-item prop="password">
+            label-width="0"
-          <el-input
+            :validate-on-rule-change="false"
-            v-model="loginForm.password"
+            :hide-required-asterisk="true"
-            type="password"
-            placeholder="密码"
-            prefix-icon="Lock"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            :loading="loading"
-            class="login-button"
-            @click="handleLogin(formRef)"
           >
-            登录
+            <el-form-item prop="username" class="form-item">
-          </el-button>
+              <el-input
-        </el-form-item>
+                v-model="loginForm.username"
-      </el-form>
+                placeholder="请输入用户名"
-    </el-card>
+                :prefix-icon="User"
+                @focus="handleFocus('username')"
+              />
+            </el-form-item>
+            <el-form-item prop="password" class="form-item">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                placeholder="请输入密码"
+                :prefix-icon="Lock"
+                show-password
+                @focus="handleFocus('password')"
+                @keyup.enter="handleLogin(formRef)"
+              />
+            </el-form-item>
+            <el-form-item class="form-item">
+              <el-button
+                type="primary"
+                :loading="loading"
+                class="login-button"
+                @click="handleLogin(formRef)"
+              >
+                登录
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+      <div class="login-footer">
+        <p>Copyright © 2025 智慧湿地管理平台 All Rights Reserved.</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -124,35 +159,210 @@ const handleLogin = async (formEl: any) => {
 
 .login-container {
   height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("@/assets/images/login/bg.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  .bg-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
+    backdrop-filter: blur(3px);
+  }
+}
+
+.login-wrapper {
+  position: relative;
+  z-index: 1;
+  height: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  background-color: #f5f7fa;
+  padding: 20px;
-  background-image: linear-gradient(135deg, #f5f7fa 0%, #ecf5ff 100%);
+  margin-bottom: 60px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 40px;
+  color: white;
+
+  h1 {
+    font-size: 36px;
+    font-weight: 600;
+    margin: 0 0 20px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    letter-spacing: 2px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    opacity: 0.9;
+    margin: 0;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    letter-spacing: 1px;
+  }
 }
 
 .login-card {
   width: 400px;
+  padding: 30px;
   border: none;
-  border-radius: 4px;
+  border-radius: 16px;
-  box-shadow: $box-shadow;
+  background: rgba(255, 255, 255, 0.95);
-  background: #ffffff;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s;
+
+  &:hover {
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
+  }
 
   h2 {
     text-align: center;
     margin-bottom: 30px;
     color: $text-primary;
     font-weight: 500;
+    font-size: 24px;
   }
 
-  .el-input {
+  :deep(.form-item) {
-    margin-bottom: 20px;
+    margin-bottom: 24px;
+
+    .el-form-item__error {
+      padding-top: 4px;
+      font-size: 12px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &.is-error .el-form-item__error {
+      opacity: 1;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .el-input__wrapper {
+      padding: 8px 16px;
+      border-radius: 8px 8px 4px 4px;
+      background: #f0f2f5;
+      box-shadow: none !important;
+      border: 2px solid transparent;
+      border-bottom: 2px solid #a3d0ff;
+      transition: all 0.3s;
+
+      &:hover {
+        background: #e8f1ff;
+        border-bottom-color: #409eff;
+      }
+
+      &.is-focus {
+        background: #ffffff;
+        border-bottom-color: #409eff;
+        box-shadow: 0 2px 4px rgba(64, 158, 255, 0.15) !important;
+      }
+
+      .el-input__prefix {
+        margin-right: 8px;
+        color: #606266;
+      }
+
+      .el-input__inner {
+        color: #303133;
+        &::placeholder {
+          color: #606266;
+        }
+      }
+    }
   }
 
   .login-button {
     width: 100%;
-    height: 40px;
+    height: 44px;
     font-size: 16px;
+    border-radius: 8px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+    }
+  }
+
+  &.shake {
+    animation: shake 0.5s ease-in-out;
+  }
+}
+
+.login-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 35px;
+  padding: 12px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 13px;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .login-header {
+    h1 {
+      font-size: 28px;
+    }
+    .subtitle {
+      font-size: 14px;
+    }
+  }
+
+  .login-card {
+    width: 90%;
+    max-width: 400px;
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-4px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(4px);
   }
 }
 </style>