yak_handcuffs/src/components/header.vue

<template>
  <div class="app-wrapper-header">
    <!-- 折叠按钮 -->
    <div class="header-left">
      <div class="web-title">
        <div class="t" v-for="(item, index) in tab.list" :key="`tab_${index}`" @click="toPage(index)">
          {{ item }}{{ index != tab.list.length - 1 ? " / " : "" }}
        </div>
      </div>
      <div class="web-time">{{ format(time) }}</div>
    </div>
    <div class="header-right">
      <div class="header-user-con">
        <!-- <div class="btn-icon" @click="router.push('/theme')">
          <el-tooltip effect="dark" content="设置主题" placement="bottom">
            <i class="el-icon-lx-skin"></i>
          </el-tooltip>
        </div>
        <div class="btn-icon" @click="router.push('/ucenter')">
          <el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
            <i class="el-icon-lx-notice"></i>
          </el-tooltip>
          <span class="btn-bell-badge" v-if="message"></span>
        </div>
        <div class="btn-icon" @click="setFullScreen">
          <el-tooltip effect="dark" content="全屏" placement="bottom">
            <i class="el-icon-lx-full"></i>
          </el-tooltip>
        </div> -->

        <!-- 用户头像 -->
        <el-avatar class="user-avator" :size="30" :src="imgurl" />
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ user.username }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useSidebarStore } from "../store/sidebar";
import { useCommonStore } from "../store/common";
import { useRouter } from "vue-router";
import imgurl from "../assets/img/img.jpg";
import { useTabsStore } from "@/store/tabs";
import { routes } from "@/router/index";
import { RouteRecordRaw } from "vue-router";
import { format } from "@/utils";
const tab = useTabsStore();

const username: string | null = localStorage.getItem("vuems_name");

const message: number = 2;

const sidebar = useSidebarStore();
const { user, time, clearStore } = useCommonStore();
// onMounted(() => {
//   if (document.body.clientWidth < 1500) {
//     sidebar.handleCollapse();
//   }
// });

// 用户名下拉菜单选择事件
const router = useRouter();
const handleCommand = (command: string) => {
  if (command == "loginout") {
    clearStore();
    router.push("/login");
  } else if (command == "user") {
    router.push("/ucenter");
  }
};
const toPage = (index: number) => {
  if (index == tab.list.length - 1) return;
  let item = getPath(routes[0].children, tab.list[index]);
  if (!item.component) return;
  router.push(item.path);
};
const getPath = (list: any[], name: string) => {
  for (let i = 0; i < list.length; i++) {
    const item = list[i];
    if (item.meta.tabs[item.meta.tabs.length - 1] == name) {
      return item;
    }
    if (item.children && item.children.length) {
      return getPath(item.children, name);
    }
  }
};

const setFullScreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.body.requestFullscreen.call(document.body);
  }
};
</script>
<style scoped lang="less">
.app-wrapper-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 70px;
  color: var(--header-text-color);
  position: fixed;
  right: 0;
  top: 0;
  width: calc(100% - 210px);
  z-index: 998;
  /* background-color: var(--header-bg-color); */
  /* border-bottom: 1px solid #ddd; */
}

.header-left {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 100%;
  .web-title {
    color: #838ca9;
    font-size: 20px;
    display: flex;
    align-items: center;
    &::before {
      content: "";
      display: inline-block;
      width: 2px;
      height: 14px;
      border-radius: 20px;
      background: #061451;
      margin-right: 18px;
    }
    .t {
      margin-right: 5px;
      cursor: pointer;
      &:last-child {
        color: #061451;
      }
    }
  }
  .web-time {
    color: #787878;
    font-size: 16px;
    margin-left: 17px;
  }
}

.logo {
  width: 35px;
}

.collapse-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  opacity: 0.8;
  font-size: 22px;
}

.collapse-btn:hover {
  opacity: 1;
}

.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}

.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}

.btn-icon {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--header-text-color);
  margin: 0 5px;
  font-size: 20px;
}

.btn-bell-badge {
  position: absolute;
  right: 4px;
  top: 0px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: var(--header-text-color);
}

.user-avator {
  margin: 0 10px 0 20px;
}

.el-dropdown-link {
  color: var(--header-text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #061451;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>