登录界面记住我功能

2026-02-24 12:56:39 +08:00
parent c2921b9cc0
commit 186315d82c
5 changed files with 408 additions and 94 deletions
@@ -38,23 +38,20 @@
        <div class="form-group icon-input-group">
          <span class="input-icon">
            <!-- 用户图标 -->
-            <svg width="19" height="19" viewBox="0 0 20 20" fill="none">
-              <circle
-                cx="10"
-                cy="7"
-                r="3.2"
-                stroke="#4da1ff"
-                stroke-width="1.4"
-              />
-              <ellipse
-                cx="10"
-                cy="14.1"
-                rx="5.5"
-                ry="3.3"
-                stroke="#4da1ff"
-                stroke-width="1.4"
-              />
-            </svg>
+            <i class="fa-solid fa-building-columns"></i>
+          </span>
+          <input
+            v-model="tenant_name"
+            type="text"
+            placeholder="租户名称"
+            autocomplete="tenant_name"
+            class="input input-with-icon"
+          />
+        </div>
+        <div class="form-group icon-input-group">
+          <span class="input-icon">
+            <!-- 用户图标 -->
+            <i class="fa-solid fa-user"></i>
          </span>
          <input
            v-model="account"
@@ -67,33 +64,7 @@
        <div class="form-group icon-input-group">
          <span class="input-icon">
            <!-- 密码图标 -->
-            <svg width="19" height="19" viewBox="0 0 20 20" fill="none">
-              <rect
-                x="3"
-                y="8"
-                width="14"
-                height="7"
-                rx="2"
-                stroke="#4da1ff"
-                stroke-width="1.4"
-              />
-              <circle
-                cx="10"
-                cy="11.5"
-                r="1.5"
-                stroke="#4da1ff"
-                stroke-width="1.2"
-              />
-              <rect
-                x="7"
-                y="5"
-                width="6"
-                height="3"
-                rx="1.5"
-                stroke="#4da1ff"
-                stroke-width="1"
-              />
-            </svg>
+            <i class="fa-solid fa-lock"></i>
          </span>
          <input
            v-model="password"
@@ -107,39 +78,8 @@
            @click="passwordVisible = !passwordVisible"
            :title="passwordVisible ? '隐藏密码' : '显示密码'"
          >
-            <svg
-              v-if="passwordVisible"
-              width="20"
-              height="20"
-              fill="none"
-              viewBox="0 0 20 20"
-            >
-              <!-- 可见(eye)图标 -->
-              <path
-                d="M2 10c2-4 5-6 8-6s6 2 8 6c-2 4-5 6-8 6s-6-2-8-6z"
-                stroke="#7bb7fa"
-                stroke-width="1.4"
-                fill="#eef5ff"
-              />
-              <circle
-                cx="10"
-                cy="10"
-                r="2.5"
-                stroke="#3794f7"
-                stroke-width="1.4"
-                fill="#fff"
-              />
-            </svg>
-            <svg v-else width="20" height="20" fill="none" viewBox="0 0 20 20">
-              <!-- 不可见(eye-off)图标 -->
-              <path
-                d="M2 10c2-4 5-6 8-6s6 2 8 6c-2 4-5 6-8 6s-6-2-8-6z"
-                stroke="#b7c7db"
-                stroke-width="1.3"
-                fill="#f2f6fd"
-              />
-              <path d="M5 15L15 5" stroke="#b7c7db" stroke-width="1.2" />
-            </svg>
+            <i v-if="passwordVisible" class="fa-regular fa-eye"></i>
+            <i v-else class="fa-solid fa-eye-slash"></i>
          </span>
        </div>
        <div class="remember-me-row">
@@ -148,6 +88,7 @@
              type="checkbox"
              v-model="rememberMe"
              class="remember-me-checkbox"
+              @change="handleRememberMeChange"
            />
            <span>记住我</span>
          </label>
@@ -175,10 +116,12 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { login } from "@/api/login";
+import { ElMessageBox } from "element-plus";

 const router = useRouter();
 const authStore = useAuthStore();

+const tenant_name = ref("");
 const account = ref("");
 const password = ref("");
 const passwordVisible = ref(false);
@@ -188,34 +131,72 @@ const errorMsg = ref("");

 onMounted(() => {
  const savedUser = localStorage.getItem("loginAccount");
+  const savedTenant = localStorage.getItem("loginTenantName");
+  const savedPassword = localStorage.getItem("loginPassword");
  const savedRemember = localStorage.getItem("loginRememberMe");

  if (savedRemember === "true") {
-    account.value = savedUser;
+    tenant_name.value = savedTenant || "";
+    account.value = savedUser || "";
+    password.value = savedPassword || "";
    rememberMe.value = true;
  }
 });

+// 记住我复选框变化时触发
+const handleRememberMeChange = async () => {
+  if (rememberMe.value) {
+    // 勾选时弹出确认提示
+    try {
+      await ElMessageBox.confirm(
+        '请确认电脑环境是可信的，登录成功后会自动记住密码。',
+        '安全提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      );
+      // 用户确认，等待登录成功后再保存
+    } catch {
+      // 用户取消，取消勾选
+      rememberMe.value = false;
+    }
+  } else {
+    // 取消勾选时清除缓存
+    localStorage.removeItem("loginAccount");
+    localStorage.removeItem("loginTenantName");
+    localStorage.removeItem("loginPassword");
+  }
+};
+
 const handleLogin = async () => {
  errorMsg.value = "";
-  if (!account.value || !password.value) {
-    errorMsg.value = "请输入用户名和密码";
+  if (!tenant_name.value || !account.value || !password.value) {
+    errorMsg.value = "请输入租户名称、用户名和密码";
    return;
  }

-  // 记住我本地存储
-  if (rememberMe.value) {
-    localStorage.setItem("loginAccount", account.value);
-    localStorage.setItem("loginRememberMe", "true");
-  } else {
+  // 记住我的处理已在复选框变化时完成
+  if (!rememberMe.value) {
    localStorage.removeItem("loginAccount");
+    localStorage.removeItem("loginTenantName");
+    localStorage.removeItem("loginPassword");
    localStorage.setItem("loginRememberMe", "false");
  }

  loading.value = true;
  try {
-    const res = await login(account.value, password.value);
+    const res = await login(account.value, password.value, tenant_name.value);
    if (res && res.code === 200) {
+      // 登录成功时保存登录信息（如果勾选了记住我）
+      if (rememberMe.value) {
+        localStorage.setItem("loginAccount", account.value);
+        localStorage.setItem("loginTenantName", tenant_name.value);
+        localStorage.setItem("loginPassword", password.value);
+        localStorage.setItem("loginRememberMe", "true");
+      }
+
      authStore.setLoginInfo(res.data);

      // 登录成功后重置 tabs store 为初始状态
@@ -223,13 +204,6 @@ const handleLogin = async () => {
      const tabsStore = useTabsStore();
      tabsStore.resetTabs();

-      // 登录成功后缓存菜单
-      try {
-      } catch (menuError) {
-        console.error("登录处理失败", menuError);
-        // 菜单加载失败不影响登录流程
-      }
-
      router.push({ path: "/home" });
    } else {
      errorMsg.value = res.msg || "登录失败";