feat: 添加用户设置

src/App.vue

@@ -6,19 +6,24 @@
 <script>
 import { pinia } from '@store';
 import settingsStore from '@/store/modules/settings';
+import userStore from '@/store/modules/user';
 
 export default {
   name: 'App',
   data() {
     return {
       locale: {},
       store: settingsStore(pinia),
+      userStore: userStore(pinia),
     };
   },
   computed: {
     language() {
       return this.store.language;
     },
+    loginStatus() {
+      return this.userStore.loginStatus;
+    },
   },
   methods: {
     popContainer() {
@@ -40,6 +45,17 @@ export default {
           break;
       }
     },
+    // 监听 loginStatus 变化
+    loginStatus(loginStatus) {
+      if (loginStatus) {
+        this.$message.success('登录成功');
+      } else {
+        this.$message.error(this.$t('app.logout.msg'));
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      }
+    },
   },
 };
 </script>

src/layout/header/HeaderAvatar.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-dropdown>
+    <div class="header-avatar" style="cursor: pointer">
+      <a-avatar class="avatar" size="small" shape="circle" icon="user"/>
+      <span class="name">{{userInfo.name}}</span>
+    </div>
+    <a-menu :class="['avatar-menu']" slot="overlay">
+      <a-menu-item>
+        <a-icon type="user" />
+        <span>个人中心</span>
+      </a-menu-item>
+      <a-menu-item>
+        <a-icon type="setting" />
+        <span>设置</span>
+      </a-menu-item>
+      <a-menu-divider />
+      <a-menu-item @click="clickLogout">
+        <a-icon style="margin-right: 8px;" type="poweroff" />
+        <span>退出登录</span>
+      </a-menu-item>
+    </a-menu>
+  </a-dropdown>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia';
+import store from '@store/modules/index';
+
+export default {
+  name: 'HeaderAvatar',
+  computed: {
+    ...mapState(store.userStore, ['userInfo']),
+  },
+  methods: {
+    ...mapActions(store.userStore, ['logout']),
+    clickLogout() {
+      this.logout();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.header-avatar {
+  display: inline-flex;
+  .avatar, .name {
+    align-self: center;
+  }
+  .avatar {
+    margin-right: 8px;
+    background: @primary-color;
+  }
+  .name {
+    font-weight: 500;
+  }
+}
+
+.avatar-menu {
+  width: 150px;
+}
+</style>

src/layout/header/index.less

@@ -0,0 +1,18 @@
+#layout-header.layout-right-header {
+  background-color: #fff;
+  padding-left: 16px;
+  display: flex;
+  justify-content: space-between;
+
+  .header-right-content {
+    display: flex;
+    align-items: center;
+  }
+
+  .header-item {
+    color: inherit;
+    cursor: pointer;
+    align-self: center;
+    padding: 0 12px;
+  }
+}

src/layout/header/index.vue

@@ -7,19 +7,25 @@
         @click="toggleCollapsed"
       />
     </div>
-    <div>
-      <!-- 国际化选项 -->
+    <div class="header-right-content">
+      <!-- 用户 -->
+      <div class="avatar">
+          <HeaderAvatar class="avatar header-item"></HeaderAvatar>
+      </div>
       <div>
-        <a-dropdown class="lang header-item">
-          <div>
-            <a-icon type="global"/> {{ langAlias }}
-          </div>
-          <a-menu @click="val => setLang(val.key)" :selected-keys="[language]"  slot="overlay">
-            <a-menu-item v-for=" (lang) in languageList" :key="lang.value">
-              {{lang.value.toLowerCase() + ' ' + lang.label}}
-            </a-menu-item>
-          </a-menu>
-        </a-dropdown>
+        <!-- 国际化选项 -->
+        <div>
+          <a-dropdown class="lang header-item">
+            <div>
+              <a-icon type="global"/> {{ langAlias }}
+            </div>
+            <a-menu @click="val => setLang(val.key)" :selected-keys="[language]"  slot="overlay">
+              <a-menu-item v-for=" (lang) in languageList" :key="lang.value">
+                {{lang.value.toLowerCase() + ' ' + lang.label}}
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </div>
       </div>
     </div>
   </a-layout-header>
@@ -29,9 +35,13 @@
 import { mapState, mapActions } from 'pinia';
 import store from '@/store/modules/index';
 import { localeOptions } from '@/locales';
+import HeaderAvatar from './HeaderAvatar.vue';
 
 export default {
   name: 'LayoutHeader',
+  components: {
+    HeaderAvatar,
+  },
   props: {
     collapsed: {
       type: Boolean,
@@ -62,14 +72,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#layout-header.layout-right-header {
-  background-color: #fff;
-  padding-left: 16px;
-  display: flex;
-  justify-content: space-between;
-
-  .header-item {
-    padding: 0 12px;
-  }
-}
+@import './index.less';
 </style>

src/locales/lang/en-US.js

@@ -1,4 +1,7 @@
 export default {
+  'app.login.success': 'login success',
+  'app.login.fail': 'login fail',
+  'app.logout.msg': 'about to log out',
   'menu.test': 'MenuTest',
   'menu.systemName': 'Password Service',
 };

src/locales/lang/zh-CN.js

@@ -1,4 +1,7 @@
 export default {
+  'app.login.success': '登录成功',
+  'app.login.fail': '登录失败',
+  'app.logout.msg': '即将退出账号',
   'menu.test': '菜单测试',
   'menu.systemName': '密码服务平台',
 };

src/store/modules/user.js

@@ -22,6 +22,15 @@ const userStore = defineStore('userStore', {
         avatar: '',
       };
     },
+
+    // 退出登录
+    logout() {
+      this.loginStatus = false;
+      this.userInfo = {
+        name: '',
+        avatar: '',
+      };
+    },
   },
 });
 

src/views/login/index.vue

@@ -2,6 +2,7 @@
   <div class="login-page">
     <a-button type="primary" @click="clickLogin">
       登录
+      <div @click="clickLogin">12321</div>
     </a-button>
   </div>
 </template>
@@ -29,7 +30,6 @@ export default {
         console.log('error: ', error);
       });
       this.store.login();
-      this.$message.success('登录成功');
       this.$router.push({
         path: '/dashboard',
       });