<fix>[important]添加退出登录

src/view/layout/MainHeader.vue

@@ -8,8 +8,13 @@
         <div class="flex items-center">菲达宝开</div>
       </template>
       <template #extra>
-        <div class="flex items-center rightText" v-if="vuexData.user.userName !== ''" style="font-size: 0.8rem">
-          用户名：{{ vuexData.user.userName }}
+        <div class="flex items-center rightText" v-if="vuexData.user.userName !== ''"  style="font-size: 0.6rem">
+          <el-icon style="font-size: 0.9rem; margin-right: 8px;"><UserFilled/></el-icon>
+          <el-popconfirm title="退出登陆?" @confirm="logOut">
+            <template #reference>
+              <el-link style="color: aliceblue;">{{ vuexData.user.userName }}</el-link>
+            </template>
+          </el-popconfirm>
         </div>
       </template>
     </el-page-header>
@@ -18,10 +23,12 @@
 
 <script>
 // 例如：import  《组件名称》  from '《组件路径》 ';
+import {Remove, UserFilled} from "@element-plus/icons-vue";
+import router from "@/router";
 
 export default {
   // import 引入的组件需要注入到对象中才能使用
-  components: {},
+  components: {UserFilled, Remove},
   props: {},
   data() {
     // 这里存放数据
@@ -30,11 +37,20 @@ export default {
     }
   },
   // 计算属性 类似于 data 概念
-  computed: {},
+  computed: {
+  },
   // 监控 data 中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    logOut() {
+      window.sessionStorage.removeItem("userName");
+      let userInfo = { userId: '', userName: ''};
+      this.$store.commit('setUserInfo', userInfo);
+      this.$store.commit('setMenuData', []);
+      router.push({name: 'login'});
+    }
+  },
   // 生命周期 - 挂载完成（可以访问 DOM 元素）
   mounted() {
   }