feat: 退出登录完成

src/App.vue

@@ -9,6 +9,7 @@ import {
   dateKoKR,
   type GlobalThemeOverrides,
   NMessageProvider,
+  NDialogProvider,
 } from 'naive-ui';
 import {computed} from 'vue';
 import {lightVariable} from '@utils';
@@ -67,7 +68,9 @@ const themeConfig: GlobalThemeOverrides = {
 <template>
   <NConfigProvider v-bind="uiLocale" :themeOverrides="themeConfig">
     <NMessageProvider>
-      <RouterView />
+      <NDialogProvider>
+        <RouterView />
+      </NDialogProvider>
     </NMessageProvider>
   </NConfigProvider>
 </template>

src/locales/home.ts

@@ -7,6 +7,12 @@ export default {
       closeOther: '关闭其他标签',
       clear: '关闭所有标签',
     },
+    downMenu: {
+      logoutTitle: '退出登录',
+      logout: '您确定要退出登录吗？',
+      loginBtnOK: '确定',
+      loginBtnCancel: '取消',
+    },
   },
   ko: {
     menuBtn: {supplier: '供应商管理系统'},
@@ -16,5 +22,11 @@ export default {
       closeOther: '关闭其他标签',
       clear: '关闭所有标签',
     },
+    downMenu: {
+      logoutTitle: '退出登录',
+      logout: '您确定要退出登录吗？',
+      loginBtnOK: '确定',
+      loginBtnCancel: '取消',
+    },
   },
 };

src/pages/home/user/hooks.ts

@@ -1,8 +1,44 @@
 import {Logout, EditOne} from '@icon-park/vue-next';
 import {h} from 'vue';
-import type {DropdownOption} from 'naive-ui';
+import {useDialog, type DropdownOption} from 'naive-ui';
+import {useUserStore} from '@stores';
+import {useI18n} from 'vue-i18n';
+import {lightVariable} from '@utils';
+import {useRouter} from 'vue-router';
+import {LOGIN_PATH} from '@routes';
 
 export const dropdownOptions: DropdownOption[] = [
   {label: '修改密码', key: 'editPassword', icon: () => h(EditOne)},
   {label: '退出登录', key: 'logout', icon: () => h(Logout)},
 ];
+
+export function useDownSelect() {
+  const userStore = useUserStore();
+  const dialog = useDialog();
+  const {t} = useI18n();
+  const {push} = useRouter();
+
+  function logout() {
+    dialog.warning({
+      title: t('home.downMenu.logoutTitle'),
+      content: t('home.downMenu.logout'),
+      positiveText: t('home.downMenu.loginBtnOK'),
+      negativeText: t('home.downMenu.loginBtnCancel'),
+      positiveButtonProps: {
+        color: lightVariable.primaryColor,
+      },
+      onPositiveClick() {
+        userStore.logout();
+        push(LOGIN_PATH);
+      },
+    });
+  }
+
+  return function onSelect(key: string) {
+    switch (key) {
+      case 'logout':
+        logout();
+        break;
+    }
+  };
+}

src/pages/home/user/index.vue

@@ -2,23 +2,33 @@
 import {NAvatar, NDropdown} from 'naive-ui';
 import {Down} from '@icon-park/vue-next';
 import {useToggle} from '@vueuse/core';
-import {dropdownOptions} from './hooks';
+import {dropdownOptions, useDownSelect} from './hooks';
+import {useUserStore} from '@stores';
+import {toRefs} from 'vue';
+import face from '@assets/images/face.svg';
 
 defineOptions({name: 'HomeUser'});
 const [isOpen, setOpen] = useToggle();
+const userStore = useUserStore();
+const {realName} = toRefs(userStore.user);
+const onSelect = useDownSelect();
 </script>
 
 <template>
-  <NDropdown :options="dropdownOptions" @update:show="setOpen">
+  <NDropdown
+    :options="dropdownOptions"
+    @update:show="setOpen"
+    @select="onSelect"
+  >
     <section class="user">
       <NAvatar
-        src="https://cdn.novenn.com/random/avatars/1595853490509.jpg"
+        :src="face"
         shape="circle"
         :size="40"
         alt="avatar"
         round
       />
-      <p class="name">傅思归</p>
+      <p class="name">{{realName}}</p>
       <Down
         theme="filled"
         :class="['dropdown-icon', {'dropdown-is-hover': isOpen}]"

src/pages/login/login-info/index.vue

@@ -10,6 +10,7 @@ import {useI18n} from 'vue-i18n';
 import {LDButton, LDLoginInput} from '@components';
 import {REGISTER_PATH} from '@routes';
 import {useFormState} from './hooks';
+import {USER_PASSWORD_LOGIN_STORAGE} from '@utils';
 
 defineOptions({name: 'LoginInfo'});
 
@@ -18,7 +19,9 @@ function onTabClick(value: number) {
   active.value = value;
 }
 
-const [remberPassword, toggleRemberPassword] = useToggle();
+const [remberPassword, toggleRemberPassword] = useToggle(
+  Boolean(localStorage.getItem(USER_PASSWORD_LOGIN_STORAGE)),
+);
 
 const {t} = useI18n();
 

src/stores/user.ts

@@ -54,6 +54,8 @@ export const useUserStore = defineStore<string, State, any, Action>(
         tabStore.clear();
         // 清空查询缓存
         QUERY_CLIENT.clear();
+        // 清空用户缓存
+        sessionStorage.removeItem(USER_STORAGE_KEY);
       },
     },
   },