fix: back to login does not clear lock-screen state (#41)

* refactor: replace separate date variables with formatted date string

* fix: back to login does not clear lock-screen state

Author: likui628

apps/web-antd/src/layouts/basic.vue

@@ -101,9 +101,10 @@ const avatar = computed(() => {
 const router = useRouter();
 
 async function handleLogout() {
-  await appStore.resetAppState();
+  appStore.resetAppState();
+  appStore.unlockScreen();
   resetRoutes();
-  router.replace(LOGIN_PATH);
+  await router.replace(LOGIN_PATH);
 }
 
 function handleNoticeClear() {

packages/business/layouts/src/widgets/lock-screen/lock-screen.vue

@@ -2,7 +2,7 @@
 import { computed, reactive, ref, watchEffect } from 'vue';
 
 import { IcRoundLock } from '@vben-core/iconify';
-import { $t } from '@vben-core/locales';
+import { $t, useI18n } from '@vben-core/locales';
 import {
   VbenAvatar,
   VbenButton,
@@ -27,14 +27,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ toLogin: []; unlock: [string] }>();
 
+const { locale } = useI18n();
+
 const now = useNow();
-const year = useDateFormat(now, 'YYYY');
-const month = useDateFormat(now, 'MM');
-const day = useDateFormat(now, 'DD');
-const week = useDateFormat(now, 'dddd');
-const hour = useDateFormat(now, 'HH');
 const meridiem = useDateFormat(now, 'A');
+const hour = useDateFormat(now, 'HH');
 const minute = useDateFormat(now, 'mm');
+const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 
 const showUnlockForm = ref(false);
 const validPass = ref(true);
@@ -102,9 +101,9 @@ function toggleUnlockForm() {
           <div
             class="bg-accent flex-center relative mb-14 mr-20 h-4/5 w-2/5 flex-auto rounded-3xl text-center text-[260px]"
           >
-            <span class="absolute left-4 top-4 text-xl font-semibold">{{
-              meridiem
-            }}</span>
+            <span class="absolute left-4 top-4 text-xl font-semibold">
+              {{ meridiem }}
+            </span>
             {{ hour }}
           </div>
           <div
@@ -124,7 +123,7 @@ function toggleUnlockForm() {
       >
         <div class="flex-col-center mb-10 w-[300px]">
           <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
-          <div class="items-cente enter-x mb-2 w-full">
+          <div class="enter-x mb-2 w-full items-center">
             <VbenInputPassword
               v-model="formState.password"
               :autofocus="true"
@@ -164,7 +163,7 @@ function toggleUnlockForm() {
       <div v-if="showUnlockForm" class="enter-x mb-2 text-3xl">
         {{ hour }}:{{ minute }} <span class="text-lg">{{ meridiem }}</span>
       </div>
-      <div class="text-3xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+      <div class="text-3xl">{{ date }}</div>
     </div>
   </div>
 </template>

packages/business/layouts/src/widgets/user-dropdown/user-dropdown.vue

@@ -170,7 +170,6 @@ if (enableShortcutKey.value) {
       <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
         <div class="hover:text-accent-foreground flex-center">
           <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
-          <!-- <div v-if="text" class="ml-2 text-sm">{{ text }}</div> -->
         </div>
       </div>
     </DropdownMenuTrigger>
@@ -201,7 +200,7 @@ if (enableShortcutKey.value) {
       <DropdownMenuItem
         v-for="menu in menus"
         :key="menu.text"
-        class="lineh mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
         @click="menu.handler"
       >
         <VbenIcon :icon="menu.icon" class="mr-2 size-5" />