web-template-vue3-js/src/layout/parts/Header.vue

<template>
  <div id="Header">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="main header">
          <el-col :span="24" class="one">
            <el-col :span="12" class="left">
              <span>
                <i v-if="!collapse" class="el-icon-s-fold"></i>
                <i v-else class="el-icon-s-unfold"></i>
              </span>
              <span>{{ siteInfo.zhTitle }}-管理中心</span>
            </el-col>
            <el-col :span="12" class="right">
              <span>
                <el-icon><UserFilled /></el-icon>
                {{ user && user._id ? user.nick_name : '游客' }}
              </span>
              <el-button type="danger" size="small" @click="logout">退出登录</el-button>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { siteInfo } from '@/layout/site'
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
let collapse = ref(false)
const route = useRoute()
// 退出登录
const logout = () => {
  localStorage.removeItem('token')
  route.to('/login')
}
</script>
<style scoped lang="scss">
.main {
  background-color: #242f42;
  .one {
    height: 60px;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 10px;
    display: flex;
    .left {
      line-height: 60px;
      span {
        display: inline-block;
        margin: 0 10px;
        font-size: 22px;
        color: #ffffff;
        font-weight: bold;
        font-family: cursive;
      }
    }
    .right {
      text-align: right;
      padding: 16px 0;
      span {
        padding: 0 8px;
        color: #ffffff;
        position: relative;
        top: 1px;
      }
      .el-icon {
        top: 2px;
      }
    }
  }
}
</style>