fix: 优化锁屏页面

src/components/LockScreen/index.vue

@@ -1,17 +1,10 @@
 <script setup lang="ts">
-import {
-  ref,
-  toRaw,
-  onMounted,
-  onUnmounted,
-  getCurrentInstance,
-  reactive,
-} from 'vue';
+import { ref, toRaw, onMounted, onUnmounted } from 'vue';
 import useI18n from '@/hooks/useI18n';
-import { Form, message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/lib';
 import { getToken } from '@/plugins/auth-token';
 import useUserStore from '@/store/modules/user';
-import { localGet, localSet, localRemove } from '@/utils/cache-local-utils';
+import { localGet, localSet } from '@/utils/cache-local-utils';
 import { getConfigKey } from '@/api/system/config';
 import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -76,8 +69,9 @@ onMounted(() => {
         window.addEventListener('mousemove', resetTimeout);
         window.addEventListener('keydown', resetTimeout);
       }
-      if (localGet(CACHE_LOCAL_LOCK) && getToken()) {
-        isLocked.value = localGet(CACHE_LOCAL_LOCK) === 'false' ? false : true;
+      const lockStr = localGet(CACHE_LOCAL_LOCK) || '';
+      if (lockStr && getToken()) {
+        isLocked.value = Boolean(lockStr);
       }
     });
 });
@@ -95,26 +89,25 @@ onUnmounted(() => {
   </a-button>
 
   <a-modal
-    ref="modalRef"
     v-model:visible="isLocked"
-    :wrap-style="{
-      overflow: 'hidden',
-      border: 'none',
-      background: 'rgba(0, 0, 0, 0.5)',
-    }"
+    get-container="#app"
+    :footer="null"
     :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"
+    :maskStyle="{
+      backdropFilter: 'blur(10px)',
+      WebkitBackdropFilter: 'blur(10px)',
+    }"
+    wrapClassName="lock-screen"
+    :wrap-style="{
+      background: 'rgba(0, 0, 0, 0.85)',
+    }"
   >
-    <div class="lock-screen-content">
-      <div class="user">
+    <!-- 锁屏块 -->
+    <div class="lock-screen_login">
+      <div class="lock-screen_login-user">
         <a-avatar
           shape="circle"
           :size="100"
@@ -125,78 +118,72 @@ onUnmounted(() => {
           {{ userStore.nickName }}
         </span>
       </div>
-      <a-row>
-        <a-col :span="24">
+      <div class="lock-screen_login-from">
+        <a-input-group compact>
           <a-input
             type="password"
             v-model:value="password"
-            class="passwordCss"
-            placeholder="Enter your password"
+            :placeholder="t('components.LockScreen.inputPlacePwd')"
+            :maxlength="32"
+            style="width: calc(100% - 50px)"
             @keyup.enter="handleUnlock"
           />
-          <a-button type="text" class="backCss" @click="handleUnlock">
-            <template #icon
-              ><login-outlined style="font-size: large"
-            /></template>
+          <a-button type="primary" @click="handleUnlock">
+            <LoginOutlined />
           </a-button>
-        </a-col>
-
-        <a-col :span="24">
-          <a-button type="text" class="backCss" @click="backLogin">
-            {{ t('components.LockScreen.backLogin') }}
-          </a-button>
-        </a-col>
-      </a-row>
+        </a-input-group>
+        <a-button type="text" class="logout" @click="backLogin">
+          {{ t('components.LockScreen.backLogin') }}
+        </a-button>
+      </div>
     </div>
   </a-modal>
 </template>
 
 <style lang="less" scoped>
-.user {
+.lock-screen_login {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  .nick {
-    padding-top: 10px;
-    font-size: 28px;
-    max-width: 164px;
-    white-space: nowrap;
-    text-align: start;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: #fff;
+  background-color: transparent;
+
+  &-user {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .nick {
+      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;
-}
+  &-from {
+    display: flex;
+    flex-flow: column;
+    width: 256px;
+    margin-top: 30px;
 
-.passwordCss {
-  color: #fff;
-  font-weight: bold;
-}
-
-.backCss {
-  color: #fff;
-  &:hover {
-    color: #4281ff;
+    .logout {
+      margin-top: 8px;
+      color: rgba(255, 255, 255, 0.85);
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      &:hover {
+        color: var(--ant-primary-color);
+      }
+    }
   }
 }
 </style>
 
 <style lang="less">
-.modalContentCss {
+.lock-screen {
   .ant-modal-content {
     background-color: transparent;
     box-shadow: none;

src/i18n/locales/en-US.ts

@@ -122,13 +122,10 @@ export default {
       onlyAllow:'Only supports upload file formats',
     },
     LockScreen: {
-      setTitle:'Set Lock Screen Password',
-      setPwd:'Password',
-      unlockTitle:'Unlock Screen',
-      unlock:'Unlock',
-      validSucc: 'Verification Passed',
-      validError: 'Verification Failed',
-      backLogin:'Return to login',
+      inputPlacePwd:'Please enter login password',
+      validSucc:'Validation Passed',
+      validError:'Validation Failure',
+      backLogin:'Logout to Relogin',
     },
   },
 

src/i18n/locales/zh-CN.ts

@@ -122,13 +122,10 @@ export default {
       onlyAllow:'只支持上传文件格式',
     },
     LockScreen: {
-      setTitle:'设置锁屏密码',
-      setPwd:'锁屏密码',
-      unlockTitle:'解锁',
-      unlock:'解锁',
+      inputPlacePwd:'请输入登录密码',
       validSucc:'校验通过',
       validError:'校验失败',
-      backLogin:'返回登录页',
+      backLogin:'退出并重新登录',
     },
   },