feat: ✨ 实现记住我功能并重构认证逻辑为统一的Auth工具类

src/views/login/components/Login.vue

@@ -113,6 +113,7 @@ import AuthAPI, { type LoginFormData } from "@/api/auth.api";
 import router from "@/router";
 import { useUserStore } from "@/store";
 import CommonWrapper from "@/components/CommonWrapper/index.vue";
+import { Auth } from "@/utils/auth";
 
 const { t } = useI18n();
 const userStore = useUserStore();
@@ -124,13 +125,14 @@ const loginFormRef = ref<FormInstance>();
 const loading = ref(false); // 按钮 loading 状态
 const isCapsLock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
+const rememberMe = Auth.getRememberMe();
 
 const loginFormData = ref<LoginFormData>({
   username: "admin",
   password: "123456",
   captchaKey: "",
   captchaCode: "",
-  rememberMe: false,
+  rememberMe: rememberMe,
 });
 
 const loginRules = computed(() => {
@@ -195,9 +197,11 @@ async function handleLoginSubmit() {
     const redirect = resolveRedirectTarget(route.query);
     await router.push(redirect);
 
-    // TODO 5. 判断用户是否点击了记住我？采用明文保存或使用jsencrypt库？
+    // 5. 记住我功能已实现，根据用户选择决定token的存储方式:
+    // - 选中"记住我": token存储在localStorage中，浏览器关闭后仍然有效
+    // - 未选中"记住我": token存储在sessionStorage中，浏览器关闭后失效
   } catch (error) {
-    // 5. 统一错误处理
+    // 6. 统一错误处理
     getCaptcha(); // 刷新验证码
     console.error("登录失败:", error);
   } finally {

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="wh-full flex-center flex-col login">
+  <div class="login-container">
     <!-- 右侧切换主题、语言按钮  -->
-    <div class="fixed flex-center gap-8px text-lg responsive-toggles">
+    <div class="action-bar">
       <el-tooltip :content="t('login.themeToggle')" placement="bottom">
         <CommonWrapper>
           <DarkModeSwitch />
@@ -63,13 +63,19 @@ const formComponents = {
 </script>
 
 <style lang="scss" scoped>
-.login {
+.login-container {
   position: relative;
   z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
 // 添加伪元素作为背景层
-.login::before {
+.login-container::before {
   position: fixed;
   top: 0;
   left: 0;
@@ -82,10 +88,16 @@ const formComponents = {
   background-size: cover;
 }
 
-.responsive-toggles {
+.action-bar {
+  position: fixed;
   top: 10px;
   right: 10px;
   z-index: 10;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.125rem;
 
   @media (max-width: 480px) {
     top: 10px;