Files
hamster-blog/blog-frontend/src/components/HeaderComponent.vue
2023-04-03 22:04:36 +08:00

85 lines
1.9 KiB
Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { api, globalStore, siteSetting } from "@/api";
import router from "@/router";
import { UserInfoResponseVORoleEnum } from "@/swagger";
const menuIndex = ref<string>(document.location.pathname);
onMounted(() => {
// 获取站点标题
api.SettingController.getSettingContent(siteSetting.keys.site.title).then(
(response) => {
let vo = response.data;
if (vo.code === 200) {
let title = vo.content ?? "网站标题";
siteSetting.title = title;
document.title = title;
}
}
);
});
function onSelectMenu(index: string) {
switch (index) {
case "/logout": {
globalStore.currentUserInfo = undefined;
globalStore.save();
router.push("/");
menuIndex.value = "/";
break;
}
default: {
router.push(index);
}
}
}
</script>
<template>
<el-menu
:default-active="menuIndex"
mode="horizontal"
:ellipsis="false"
@select="onSelectMenu"
>
<el-menu-item index="/">
{{ siteSetting.title }}
</el-menu-item>
<el-menu-item index="/tags"> 标签 </el-menu-item>
<el-menu-item
v-for="customMenu in siteSetting.navigation"
:index="customMenu.text"
>
{{ customMenu.text }}
</el-menu-item>
<div class="flex-grow" />
<el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
登录
</el-menu-item>
<el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
注册
</el-menu-item>
<el-menu-item
index="/manage"
v-if="
globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN
"
>
管理面板
</el-menu-item>
<el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
注销
</el-menu-item>
</el-menu>
</template>
<style scoped>
.flex-grow {
flex-grow: 1;
}
</style>