完善锁屏界面

src/components/LockScreen/index.vue

@@ -1,14 +1,24 @@
 <script setup lang="ts">
-import { ref, toRaw, onMounted, onUnmounted } from 'vue';
+import {
+  ref,
+  toRaw,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  reactive,
+} from 'vue';
 import useI18n from '@/hooks/useI18n';
-import { message } from 'ant-design-vue/lib';
+import { Form, 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 { getConfigKey } from '@/api/system/config';
 import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { useRouter } from 'vue-router';
 
+const userStore = useUserStore();
+const router = useRouter();
 const { t } = useI18n();
 const isLocked = ref(false);
 const password = ref('');
@@ -33,28 +43,30 @@ function fnLock() {
 /**解锁 */
 function handleUnlock() {
   let lockFrom: any = {};
-  lockFrom.username = useUserStore().userName;
+  lockFrom.username = userStore.userName;
   lockFrom.password = password.value;
-  useUserStore()
+  userStore.fnLogin(toRaw(lockFrom)).then(res => {
-    .fnLogin(toRaw(lockFrom))
+    if (res.code === RESULT_CODE_SUCCESS) {
-    .then(res => {
+      message.success(t('components.LockScreen.validSucc'), 3);
-      if (res.code === RESULT_CODE_SUCCESS) {
+      password.value = '';
-        message.success(t('components.LockScreen.validSucc'), 3);
+      isLocked.value = false;
-        password.value = '';
+      localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
-        isLocked.value = false;
+    } else {
-        localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
+      message.error(t('components.LockScreen.validError'), 3);
+    }
+  });
+}
 
-      } else {
+/**返回登录界面 */
-        message.error(t('components.LockScreen.validError'), 3);
+function backLogin() {
-      }
+  userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
-    });
 }
 
 onMounted(() => {
   getConfigKey('sys.lockTime')
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
-        timeoutDuration = res.data;
+        timeoutDuration = res.data * 1000;
       }
     })
     .finally(() => {
@@ -82,21 +94,42 @@ window.addEventListener('keydown', resetTimeout);
     <template #icon><lock-outlined /></template>
   </a-button>
 
-  <template v-if="isLocked">
+  <a-modal
-    <div class="lock-screen">
+    ref="modalRef"
-      <div class="lock-screen-content">
+    v-model:visible="isLocked"
-        <h1><lock-filled style="font-size: 50px" /></h1>
+    :wrap-style="{ overflow: 'hidden' }"
-        <a-input
+    :closable="false"
-          type="password"
+    :keyboard="false"
-          v-model:value="password"
+    :centered="true"
-          placeholder="Enter your password"
+    :maskClosable="false"
-        />
+    :footer="null"
-        <a-button @click="handleUnlock">
+    @ok="handleUnlock"
-          <template #icon><right-circle-filled /></template>
+    @cancel="backLogin"
-        </a-button>
+  >
-      </div>
+    <div class="lock-screen-content">
+      <h1><lock-filled style="font-size: 50px" /></h1>
+      <a-row>
+        <a-col :span="24">
+          <a-input
+            type="password"
+            v-model:value="password"
+            placeholder="Enter your password"
+            @keyup.enter="handleUnlock"
+          />
+        </a-col>
+        <a-col :span="12">
+          <a-button @click="handleUnlock">
+            {{ t('components.LockScreen.unlock') }}
+          </a-button>
+        </a-col>
+        <a-col :span="12">
+          <a-button @click="backLogin">
+            {{ t('components.LockScreen.backLogin') }}
+          </a-button>
+        </a-col>
+      </a-row>
     </div>
-  </template>
+  </a-modal>
 </template>
 
 <style lang="less" scoped>
@@ -131,7 +164,7 @@ window.addEventListener('keydown', resetTimeout);
   padding: 5px 10px;
   font-size: 12px;
   margin-right: 12px;
-  background-color: #4caf50;
+  background-color: #0245fce1;
   color: white;
   border: none;
   cursor: pointer;

src/i18n/locales/en-US.ts

@@ -128,6 +128,7 @@ export default {
       unlock:'Unlock',
       validSucc: 'Verification Passed',
       validError: 'Verification Failed',
+      backLogin:'Return to login',
     },
   },
 
@@ -1263,6 +1264,9 @@ export default {
         importOk: 'Successfully read and download imported templates',
         tipRowErr: "Failed to get user information",
         viewInfoErr: "Errors in user records",
+        lock:'Lock',
+        inactive:'Inactive',
+        active:'Active',
       },
       config: {
         configName: "Config Name",

src/i18n/locales/zh-CN.ts

@@ -128,6 +128,7 @@ export default {
       unlock:'解锁',
       validSucc:'校验通过',
       validError:'校验失败',
+      backLogin:'返回登录',
     },
   },
 
@@ -1263,6 +1264,9 @@ export default {
         importOk: '成功读取并下载导入模板',
         tipRowErr: "获取用户信息失败",
         viewInfoErr: "用户记录存在错误",
+        lock:'锁定',
+        inactive:'未激活',
+        active:'激活',
       },
       config: {
         configName: "参数名称",