shuimu-dashboard-h5/src/layout/components/Navbar/UserInfo.vue

<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useUserStore } from "@/store/modules/user";
import { useTagsViewStore } from "@/store/modules/tagsView";
import { useRoute, useRouter } from "vue-router";

const userStore = useUserStore();
const tagsViewStore = useTagsViewStore();
const route = useRoute();
const router = useRouter();
/**
 * 注销
 */
function logout() {
  ElMessageBox.confirm("确定退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    userStore
      .logout()
      .then(() => {
        tagsViewStore.delAllViews();
      })
      .then(() => {
        router.push("/login?redirect=/");
      });
  });
}
</script>

<template>
  <!-- 用户头像 -->
  <div class="avatar-container">
    <span class="spl">|</span>
    <img src="../../../assets/login/avatar.png" alt="头像" />
    <span class="">{{ userStore.nickname + " " + userStore.phone }}</span>
    <span @click="logout"><svg-icon color="#006eff" icon-class="exit" size="20px" /></span>
  </div>
</template>

<style scoped lang="scss">
.avatar-container {
  display: flex;
  align-items: center;
  justify-items: center;
  margin: 0 20px 0 0;
  cursor: pointer;

  img {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #494949;
    border-radius: 20px;
  }

  span {
    margin-left: 12px;
    font-size: 16px;
    color: #494949;

    &.spl {
      margin: 0 12px;
      color: #d7d8d8;
    }
  }
}
</style>