deShanXiao/frontEnd/src/layout/headMenu.vue

<template>
  <div class="head-content">
    <div class="nav">
      <div class="left">
        <!-- <ul class="ui-menu">
          <li
            v-for="item in routerList"
            class="ui-menu-item"
            @click="selectTopMenu(item)">
            {{ item.name }}
          </li>
        </ul> -->
        <el-icon size="45px" class="folder" @click="expandToggle">
          <Fold v-if="!expand" />
          <Expand v-else="expand" />
        </el-icon>
      </div>
      <div class="right">
        <div class="right-toolbar">
          <el-tooltip content="全屏" placement="bottom" effect="light">
            <el-icon @click="fullScreen"><FullScreen /></el-icon>
          </el-tooltip>
        </div>
        <div class="options">
          <el-dropdown :hide-on-click="false">
            <div class="user-heard" @click="changeInfo">
              <label style="padding: 0 5px"
                >你好<strong style="padding: 0 5px">{{
                  replaceUserName(userInforStore.userInfor.name as string)
                }}</strong></label
              >
              <!-- <el-avatar
                src="https://avatars.githubusercontent.com/u/34113411?v=4">
              </el-avatar> -->
              <el-icon>
                <CaretBottom></CaretBottom>
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="personal">个人信息</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <base-dialog v-model="showMyself"> <mySelf /></base-dialog>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from "vue";
import { RouteRecordRaw } from "vue-router";
import router from "@/routers";
import { ElMessageBox } from "element-plus";
import { globalState } from "@/store";
import { userInfor } from "@/store/user/user";
import { Expand } from "@element-plus/icons-vue";
import mySelf from "@/pages/system/user/personal.vue";

const globalStore = globalState();
const userInforStore = userInfor();
const emits = defineEmits(["change", "expandChange"]);
let showUserOption = ref(false);
let expand = ref(false);
let isFullScene = ref(false);
let showMyself = ref(false);

// 切换类名
function changeInfo() {
  showUserOption.value = !showUserOption.value;
}

// 退出登陆
function logout() {
  ElMessageBox.confirm("确定要退出系统吗？", "提示", {
    type: "warning",
    confirmButtonText: "确定退出",
    cancelButtonText: "取消",
  }).then(() => {
    globalStore.setGlobalLoadingShow(true, "正在清空您的数据并退出系统...");

    userInforStore.removeLoginState();
    userInforStore.removeToken();

    setTimeout(() => {
      globalStore.setGlobalLoadingShow(false);
      router.replace({ path: "/login" });
    }, 2000);
  });
}

function expandToggle() {
  expand.value = !expand.value;

  emits("expandChange", expand.value);
}

function personal() {
  showMyself.value = true;
}

function fullScreen() {
  if (!isFullScene.value) {
    document.body.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
  isFullScene.value = !isFullScene.value;
}

function replaceUserName(name: string) {
  return name;
  if (name.length <= 1) return name;

  let nameLen = name.length;

  return name.substring(1, nameLen);
}
</script>
<style lang="scss" scoped>
.head-content {
  position: absolute;
  top: 0;
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 50px;
  display: flex;
  flex-direction: column;
  background-color: #f1f3f4;

  .nav {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    // box-shadow: 20px -5px 28px #c2c2c2;
    padding: 8px 15px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 55px;
    align-items: center;
    z-index: 2;
    .left {
      height: 50px;
    }
  }

  .route-list {
    padding: 5px 15px;
    background-color: #fff;
    height: 30px;
    display: flex;
    align-items: center;
    box-shadow: 0px 1px 0px #c2c2c2;
    margin-top: 1px;
  }

  .right,
  .left {
    display: inline-block;
    position: relative;
  }

  .right {
    padding: 0 15px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    .right-toolbar {
      height: inherit;
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
    .options {
      height: 100%;
      display: flex;
      .user-heard {
        display: flex;
        align-items: center;
      }
    }
  }
}

.show-user-option {
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}

.folder svg {
  width: 2em;
  height: 2em;
  cursor: pointer;
}
.right-toolbar svg {
  transform: scale(1.5);
}
</style>