初始版本，目前线上可用

frontEnd/src/layout/headMenu.vue

@@ -0,0 +1,206 @@
+<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>