From 73fc27f91f81187fff2aa7b0cad5cd923cc92900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 30 Sep 2025 14:23:17 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BAloading=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rtsp-vue/src/views/login.vue | 338 +++++++++--------------------------
 1 file changed, 89 insertions(+), 249 deletions(-)

diff --git a/rtsp-vue/src/views/login.vue b/rtsp-vue/src/views/login.vue
index fdec9f4..191a532 100644
--- a/rtsp-vue/src/views/login.vue
+++ b/rtsp-vue/src/views/login.vue
@@ -1,70 +1,15 @@
-<template>
-  <div class="login-container">
-    <div class="login-header">
-      <h1>福安德视频监控平台</h1>
-    </div>
-    <div class="login-content">
-      <div class="qr-code-section">
-      </div>
-      <div class="login-form-section">
-        <div class="login-form-card">
-          <h2 class="form-title">用户登录</h2>
-          <div>
-            <div class="form-group">
-              <input type="text" v-model="loginForm.username" placeholder="账号" class="form-input" />
-              <p class="error-tip" v-if="loginForm.username === ''">用户名不能为空</p>
-            </div>
-            <div class="form-group">
-              <input type="password" v-model="loginForm.password" placeholder="密码" class="form-input" />
-              <p class="error-tip" v-if="loginForm.password === ''">密码不能为空</p>
-            </div>
-            <!-- <div class="form-group captcha-group">
-              <input type="text" v-model="loginForm.code" placeholder="验证码" class="form-input captcha-input" />
-              <img :src="codeUrl" @click="getCode" alt="验证码" class="captcha-img" />
-            </div> -->
-            <div class="remember-group">
-              <input type="checkbox" id="remember" v-model="loginForm.rememberMe" class="remember-checkbox" />
-              <label for="remember" class="remember-label">记住密码</label>
-            </div>
-            <button type="button" class="login-btn" @click="handleLogin" v-loading="loading">登录</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from "@/utils/jsencrypt";
 import useUserStore from '@/store/modules/user'
 
 const userStore = useUserStore()
 const route = useRoute();
 const router = useRouter();
-const { proxy } = getCurrentInstance();
 
 const loginForm = ref({
   username: "admin",
   password: "admin123",
-  rememberMe: false,
-  // code: "",
-  // uuid: ""
 });
 
-const loginRules = {
-  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
-  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
-  // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
-};
-
-const codeUrl = ref("");
-const loading = ref(false);
-// 验证码开关
-const captchaEnabled = ref(true);
-// 注册开关
-const register = ref(false);
 const redirect = ref(undefined);
 
 watch(route, (newRoute) => {
@@ -72,212 +17,107 @@ watch(route, (newRoute) => {
 }, { immediate: true });
 
 function handleLogin() {
-  // proxy.$refs.loginRef.validate(valid => {
-    // if (valid) {
-      loading.value = true;
-      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
-      if (loginForm.value.rememberMe) {
-        Cookies.set("username", loginForm.value.username, { expires: 30 });
-        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
-        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
-      } else {
-        // 否则移除
-        Cookies.remove("username");
-        Cookies.remove("password");
-        Cookies.remove("rememberMe");
+  // 调用action的登录方法
+  userStore.login(loginForm.value).then(() => {
+    const query = route.query;
+    const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
+      if (cur !== "redirect") {
+        acc[cur] = query[cur];
       }
-      // 调用action的登录方法
-      userStore.login(loginForm.value).then(() => {
-        const query = route.query;
-        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
-          if (cur !== "redirect") {
-            acc[cur] = query[cur];
-          }
-          return acc;
-        }, {});
-        router.push({ path: redirect.value || "/", query: otherQueryParams });
-      }).catch(() => {
-        loading.value = false;
-        // 重新获取验证码
-        if (captchaEnabled.value) {
-          getCode();
-        }
-      });
-  //   }
-  // });
+      return acc;
+    }, {});
+    router.push({ path: redirect.value || "/", query: otherQueryParams });
+  })
 }
 
-function getCode() {
-  getCodeImg().then(res => {
-    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-    if (captchaEnabled.value) {
-      codeUrl.value = "data:image/gif;base64," + res.img;
-      loginForm.value.uuid = res.uuid;
-    }
-  });
-}
-
-function getCookie() {
-  const username = Cookies.get("username");
-  const password = Cookies.get("password");
-  const rememberMe = Cookies.get("rememberMe");
-  loginForm.value = {
-    username: username === undefined ? loginForm.value.username : username,
-    password: password === undefined ? loginForm.value.password : decrypt(password),
-    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-  };
-}
-
-getCode();
-getCookie();
 handleLogin();
 </script>
 
-<style lang="scss" scoped>
-.login-container {
-  width: 100%;
-  height: 100vh;
-  background: url('../assets/images/login-back.png') no-repeat center center;
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 20px;
-  box-sizing: border-box;
+<template>
+  <!-- From Uiverse.io by Donewenfu -->
+  <div class="loader">
+    <div class="justify-content-center jimu-primary-loading"></div>
+  </div>
+</template>
 
-  .login-header {
-    h1 {
-      color: #fff;
-      font-size: 24px;
-      font-weight: bold;
-    }
+<style lang="scss" scoped>
+/* From Uiverse.io by Donewenfu */
+.loader {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.jimu-primary-loading:before,
+.jimu-primary-loading:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+
+.jimu-primary-loading:before {
+  left: -19.992px;
+}
+
+.jimu-primary-loading:after {
+  left: 19.992px;
+  -webkit-animation-delay: 0.32s !important;
+  animation-delay: 0.32s !important;
+}
+
+.jimu-primary-loading:before,
+.jimu-primary-loading:after,
+.jimu-primary-loading {
+  background: #076fe5;
+  -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
+  animation: loading-keys-app-loading 0.8s infinite ease-in-out;
+  width: 13.6px;
+  height: 32px;
+}
+
+.jimu-primary-loading {
+  text-indent: -9999em;
+  margin: auto;
+  position: absolute;
+  right: calc(50% - 6.8px);
+  top: calc(50% - 16px);
+  -webkit-animation-delay: 0.16s !important;
+  animation-delay: 0.16s !important;
+}
+
+@-webkit-keyframes loading-keys-app-loading {
+
+  0%,
+  80%,
+  100% {
+    opacity: .75;
+    box-shadow: 0 0 #076fe5;
+    height: 32px;
   }
 
-  .login-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1;
-    padding: 0 50px;
+  40% {
+    opacity: 1;
+    box-shadow: 0 -8px #076fe5;
+    height: 40px;
+  }
+}
 
-    .qr-code-section {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+@keyframes loading-keys-app-loading {
 
-      .qr-code-item {
-        text-align: center;
-        margin-bottom: 10px;
+  0%,
+  80%,
+  100% {
+    opacity: .75;
+    box-shadow: 0 0 #076fe5;
+    height: 32px;
+  }
 
-        .qr-code-img {
-          width: 120px;
-          height: 120px;
-          margin-bottom: 5px;
-        }
-
-        .platform-label {
-          color: #fff;
-          font-size: 14px;
-        }
-      }
-
-      .qr-tips {
-        text-align: center;
-        color: #fff;
-
-        p {
-          margin: 5px 0;
-        }
-      }
-    }
-
-    .login-form-section {
-      .login-form-card {
-        background: rgba(255, 255, 255, 0.6);
-        backdrop-filter: blur(10px);
-        padding: 30px;
-        border-radius: 8px;
-        width: 500px;
-
-        .form-title {
-          font-size: 30px;
-          color: #333;
-          margin-bottom: 30px;
-          padding-bottom: 20px;
-          border-bottom: 1px solid #eee;
-        }
-
-        .form-group {
-          margin-bottom: 30px;
-
-          .form-input {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-            font-size: 18px;
-            outline: none;
-            line-height: 24px;
-            height: 44px;
-          }
-
-          .error-tip {
-            color: red;
-            font-size: 12px;
-            margin-top: 5px;
-          }
-        }
-
-        .captcha-group {
-          display: flex;
-          align-items: center;
-
-          .captcha-input {
-            flex: 1;
-            margin-right: 10px;
-          }
-
-          .captcha-img {
-            width: 100px;
-            height: 44px;
-            object-fit: cover;
-            border-radius: 4px;
-          }
-        }
-
-        .remember-group {
-          display: flex;
-          align-items: center;
-          margin-bottom: 20px;
-
-          .remember-checkbox {
-            margin-right: 5px;
-          }
-
-          .remember-label {
-            font-size: 14px;
-            color: #333;
-          }
-        }
-
-        .login-btn {
-          width: 100%;
-          padding: 10px;
-          background: #007bff;
-          color: #fff;
-          border: none;
-          border-radius: 4px;
-          font-size: 16px;
-          cursor: pointer;
-          transition: background 0.3s ease;
-
-          &:hover {
-            background: #0056b3;
-          }
-        }
-      }
-    }
+  40% {
+    opacity: 1;
+    box-shadow: 0 -8px #076fe5;
+    height: 40px;
   }
 }
 </style>