修复自动登出时锁屏缓存未清除

src/components/LockScreen/index.vue

@@ -87,7 +87,6 @@ onUnmounted(() => {
   if (timeoutId) {
     clearTimeout(timeoutId);
   }
-  localRemove(CACHE_LOCAL_LOCK);
 });
 </script>
 <template>
@@ -98,33 +97,46 @@ onUnmounted(() => {
   <a-modal
     ref="modalRef"
     v-model:visible="isLocked"
-    :wrap-style="{ overflow: 'hidden' }"
+    :wrap-style="{
+      overflow: 'hidden',
+      border: 'none',
+      background: 'rgba(0, 0, 0, 0.5)',
+    }"
     :closable="false"
     :keyboard="false"
     :centered="true"
+    :maskStyle="{ backdropFilter: 'blur(10px)' }"
+    :bodyStyle="{ border: 'none', backgroundColor: ' transparent' }"
     :maskClosable="false"
+    wrapClassName="modalContentCss"
     :footer="null"
     @ok="handleUnlock"
     @cancel="backLogin"
   >
     <div class="lock-screen-content">
-      <h1><lock-filled style="font-size: 50px" /></h1>
+      <div class="user">
+        <a-avatar
+          shape="circle"
+          :size="100"
+          :src="userStore.getAvatar"
+          :alt="userStore.userName"
+        ></a-avatar>
+        <span class="nick">
+          {{ userStore.nickName }}
+        </span>
+      </div>
       <a-row>
         <a-col :span="24">
           <a-input
             type="password"
             v-model:value="password"
+            class="passwordCss"
             placeholder="Enter your password"
             @keyup.enter="handleUnlock"
           />
         </a-col>
-        <a-col :span="12">
+        <a-col :span="24">
-          <a-button @click="handleUnlock">
+          <a-button type="text" class="backCss" @click="backLogin">
-            {{ t('components.LockScreen.unlock') }}
-          </a-button>
-        </a-col>
-        <a-col :span="12">
-          <a-button @click="backLogin">
             {{ t('components.LockScreen.backLogin') }}
           </a-button>
         </a-col>
@@ -134,40 +146,54 @@ onUnmounted(() => {
 </template>
 
 <style lang="less" scoped>
-.lock-screen-content {
+.user {
-  text-align: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  padding: 20px;
-  border-radius: 10px;
-}
-.lock-screen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: white;
+  .nick {
-  z-index: 9999;
+    padding-top: 10px;
-  backdrop-filter: blur(10px); /* 添加模糊效果 */
+    font-size: 28px;
+    max-width: 164px;
+    white-space: nowrap;
+    text-align: start;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: #fff;
+  }
 }
+.lock-screen-content {
+  text-align: center;
+  background-color: transparent; /* 设置为透明背景 */
+  padding: 20px;
+  border-radius: 10px;
+}
+
 .lock-screen-content input {
+  background-color: transparent !important;
   margin: 10px 0;
   padding: 5px;
   width: 200px;
 }
-.lock-screen button {
+
-  margin-left: 5px;
+.passwordCss {
-  padding: 5px 10px;
+  color: #fff;
-  font-size: 12px;
+  font-weight: bold;
-  margin-right: 12px;
+}
-  background-color: #0245fce1;
+
-  color: white;
+.backCss {
-  border: none;
+  color: #fff;
-  cursor: pointer;
+  &:hover {
+    color: blue;
+  }
+}
+</style>
+
+<style lang="less">
+.modalContentCss {
+  .ant-modal-content {
+    background-color: transparent;
+    box-shadow: none;
+  }
 }
 </style>

src/plugins/auth-token.ts

@@ -1,5 +1,7 @@
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE } from '@/constants/token-constants';
+import { localRemove } from '@/utils/cache-local-utils';
+import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
 
 /**获取cookis中Token字符串 */
 export function getToken(): string {
@@ -11,7 +13,8 @@ export function setToken(token: string): void {
   Cookies.set(TOKEN_COOKIE, token);
 }
 
-/**移除cookis中Token字符串 */
+/**移除cookis中Token字符串,localStorage中锁屏字符串 */
 export function removeToken(): void {
   Cookies.remove(TOKEN_COOKIE);
+  localRemove(CACHE_LOCAL_LOCK);
 }