From 8f199f71dfb9ef66a690896e1abeca9497da4875 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Fri, 12 Jan 2024 11:48:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=94=81=E5=B1=8F=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LockScreen/index.vue | 95 +++++++++++++++++++----------
 src/i18n/locales/en-US.ts           |  4 ++
 src/i18n/locales/zh-CN.ts           |  4 ++
 3 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/src/components/LockScreen/index.vue b/src/components/LockScreen/index.vue
index c346d120..d9e4761d 100644
--- a/src/components/LockScreen/index.vue
+++ b/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()
-    .fnLogin(toRaw(lockFrom))
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success(t('components.LockScreen.validSucc'), 3);
-        password.value = '';
-        isLocked.value = false;
-        localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
+  userStore.fnLogin(toRaw(lockFrom)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success(t('components.LockScreen.validSucc'), 3);
+      password.value = '';
+      isLocked.value = false;
+      localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
+    } else {
+      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">
-    <div class="lock-screen">
-      <div class="lock-screen-content">
-        <h1><lock-filled style="font-size: 50px" /></h1>
-        <a-input
-          type="password"
-          v-model:value="password"
-          placeholder="Enter your password"
-        />
-        <a-button @click="handleUnlock">
-          <template #icon><right-circle-filled /></template>
-        </a-button>
-      </div>
+  <a-modal
+    ref="modalRef"
+    v-model:visible="isLocked"
+    :wrap-style="{ overflow: 'hidden' }"
+    :closable="false"
+    :keyboard="false"
+    :centered="true"
+    :maskClosable="false"
+    :footer="null"
+    @ok="handleUnlock"
+    @cancel="backLogin"
+  >
+    <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;
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 74c7dbc6..417c3ba1 100644
--- a/src/i18n/locales/en-US.ts
+++ b/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",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 5455fe82..31176198 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/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: "参数名称",