docking-vue/src/layout/header/index.vue

<template>
  <div class="header">
    <div class="logo">
      <!--      <img-->
      <!--        src="/src/assets/images/public/logo1.png"-->
      <!--        alt=""-->
      <!--        width="134"-->
      <!--        height="28"-->
      <!--      />-->
    </div>
    <div class="breadcrumb">
      <layout-breadcrumb v-if="route.meta.isBreadcrumb !== false" />
    </div>
    <div class="right">
      <div class="menu">
        <ul>
          <li
            v-for="(item, index) in MENU"
            :key="index"
            :class="{ active: item.model === menuStore.getModel }"
            @click="switchMenu(item.model)"
          >
            <component
              :is="'icon-' + item.icon"
              theme="filled"
              fill="#a5b2c2"
              size="18"
              :stroke-width="3"
              style="height: 18px"
            />
            <div class="title">{{ item.title }}</div>
          </li>
        </ul>
      </div>
      <div class="user">
        <el-dropdown
          trigger="click"
          placement="bottom-end"
          @command="dropdownCommand"
        >
          <div class="user_info">
            <el-avatar shape="circle" :size="30" fit="fill" :src="tx" />
            <span>{{ userStore.getUserInfo.username }}</span>
            <icon-down
              theme="filled"
              size="16"
              fill="#a2c2d3"
              :stroke-width="3"
            />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="modifyPassword">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item command="signOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <change-password
      v-model:visible="passwordDialogVisible"
      @submit="fnSignOut"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMenuStore } from "@/pinia/menu.js";
import { useUserStore } from "@/pinia/user.js";
import { MENU } from "@/assets/js/constant.js";
import { logout } from "@/request/api.js";
import LayoutBreadcrumb from "@/layout/breadcrumb/index.vue";
import tx from "@/assets/images/public/tx.png";
import ChangePassword from "./components/change_password.vue";

defineOptions({
  name: "LayoutHeader",
});
const route = useRoute();
const router = useRouter();
const menuStore = useMenuStore();
const userStore = useUserStore();
const passwordDialogVisible = ref(false);
const dropdownCommand = async (command) => {
  if (command === "signOut") {
    await fnSignOut();
  }
  if (command === "modifyPassword") {
    passwordDialogVisible.value = true;
  }
};
const switchMenu = (model) => {
  menuStore.setModel(model);
};
const fnSignOut = async () => {
  await logout();
  userStore.$reset();
  await router.replace("/login");
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  padding-right: 20px;
  background-color: #fff;

  .logo {
    width: 210px;
    height: 50px;
    background-color: #2b2f3a;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
    margin-right: 20px;
  }

  .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .menu {
      margin-right: 30px;

      ul {
        display: flex;

        li {
          height: 50px;
          padding: 0 10px;
          margin: 0 10px;
          cursor: pointer;
          display: flex;
          align-items: center;

          &.active {
            color: #79bbff;
            border-bottom: 2px solid #79bbff;
          }

          .title {
            padding-left: 10px;
          }
        }
      }
    }

    .user {
      margin-top: 5px;
      cursor: pointer;

      .el-avatar {
        margin-right: 5px;
      }

      .user_info {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>