150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
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";
|
|
import {getPath,removePath } from '@/utils/auth';
|
|
|
|
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}`);
|
|
router.push(`${getPath()}?redirect=${route.fullPath}`);
|
|
removePath()
|
|
});
|
|
});
|
|
}
|
|
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>
|