WholeProcessPlatform/frontend/src/layout/components/Navbar.vue

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { getToken } from "@/utils/auth";
import { UserOutlined, LogoutOutlined } from "@ant-design/icons-vue";
// 国际化
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// import LangSelect from '@/components/LangSelect/index.vue';
import Sidebar from "./Sidebar/index.vue";

import { useTagsViewStore } from "@/store/modules/tagsView";
import { useUserStore } from "@/store/modules/user";
import Cookies from "js-cookie";
import { storeToRefs } from "pinia";

const url = import.meta.env.VITE_APP_BASE_API;
const username = Cookies.get("username");

const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();

const route = useRoute();
const router = useRouter();
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    userStore
      .logout()
      .then(() => {
        tagsViewStore.delAllViews();
      })
      .then(() => {
        router.push(`/login?redirect=${route.fullPath}`);
      });
  });
}
onMounted(() => {
});
onBeforeUnmount(() => {
});
</script>

<template>
  <div class="navbar">
    <a-layout-header class="header">
      <transition class="bg-white-800">
        <a
          href="/"
          class="h-[50px] min-w-[350px] flex items-center justify-center text-white"
        >
          <h1 class="text-blank font-bold text-[16px]">{{ t("login.title") }}</h1></a
        >
      </transition>
      <Sidebar />

      <a-dropdown :trigger="['click']" placement="bottomRight">
        <a-space class="username">
          <div>
            <span class="icon">
              <UserOutlined />
            </span>
            <span class="text">{{ username }}</span>
          </div>
        </a-space>
        <template #overlay>
          <a-menu>
            <a-menu-item key="changePassword">
              <UserOutlined />
              修改密码
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="logout" @click="logout">
              <LogoutOutlined />
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-layout-header>
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/variables.module.scss" as *;
.navbar {
  width: 100%;
  position: relative;
  height: 110px;
  display: -webkit-flex;
  z-index: 98;

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #005293;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    height: $layout-header-height;
    position: sticky;
    top: 0;
    z-index: 100;
    padding-left: 0;
    padding-right: 10px;
  }
  .username {
    height: $layout-header-height;
    line-height: $layout-header-height;
    display: flex;
    cursor: pointer;

    div {
      display: flex;
      align-items: center;
    }

    .icon {
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: $main-menu-color;
      border-radius: 50%;
      display: inline-block;
      font-size: 18px;
      background-color: rgba(255, 255, 255, 0.2);
    }

    .text {
      color: $main-menu-color;
      padding-left: 10px;
      margin-top: -5px;
    }
  }
}

.heighta {
  border-left: 1px solid #dcdfe6;
  height: 1em;
  margin-right: 15px;
}
</style>