SZYGM1.0/src/layout/components/NavBarTop/index.vue

<template>
  <div class="appNav">
    <div class="rowBC">
      <div class="appNav-left">
        <el-avatar class="appNav-avatar" :size="25" :src="imgUrl" @error="errorHandler">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
        <span class="appNav-name">深圳机场货运一个码系统-管理端</span>
      </div>
      <div class="appNav-right">
        <el-avatar class="appNav-avatar" :size="25" :src="imgUrl" @error="errorHandler">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
        <el-dropdown trigger="click" size="medium">
          <div class="avatar-wrapper">
            <span class="name">{{name}}</span>
            <ArrowDownBold style="width: 1.2em; height: 1.3em;" />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/">
                <el-dropdown-item>Home</el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click="loginOut">login out</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { ArrowDownBold } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/user";

const imgUrl = ref(
  "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
);
const store = useUserStore();
const name = store.$state.username;
const errorHandler = () => true;
/*
 * 退出登录
 * */
const router = useRouter();
const route = useRoute();
const loginOut = async () => {
  const userStore = useUserStore();
  const result: any = await userStore.logout();
  if (result.code == 0) {
    ElMessage({
      message: "退出成功",
      type: "success",
      duration: 2 * 1000,
      onClose: () => {
        useUserStore().resetState();
        router.push(`/login`);
        location.reload();
      },
    });
  } else {
    ElMessage.error(result.message);
  }
};
</script>

<style lang="scss" scoped>
.appNav {
  height: 48px;
  line-height: 48px;
  background: #ac014d;
  padding: 0 42px 0 16px;
  &-avatar {
    margin-top: 11.5px;
  }
  &-name {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-left: 13px;
    top: -5px;
    position: relative;
  }
  .avatar-wrapper {
    font-size: 14px;
    font-family: Helvetica;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    margin-top: 15px;
    .name {
      margin: 0px 10px;
      position: relative;
      top: -3px;
    }
  }
}
</style>