|
- <template>
- <!-- 顶部导航栏 -->
- <div class="myNavbar">
- <!-- 左侧面包屑 -->
- <div class="flex" v-if="false">
- <hamburger
- :is-active="appStore.sidebar.opened"
- @toggleClick="toggleSideBar"
- />
- <breadcrumb />
- </div>
- <!-- 右侧导航设置 -->
- <div class="flex" v-if="false">
- <!-- 导航栏设置(窄屏隐藏)-->
- <div class="setting-container" v-if="device !== 'mobile'">
- <!--全屏 -->
- <div class="setting-item" @click="toggle" v-if="false">
- <svg-icon
- :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
- />
- </div>
- <!-- 布局大小 -->
- <el-tooltip
- content="布局大小"
- effect="dark"
- placement="bottom"
- v-if="false"
- >
- <size-select class="setting-item" />
- </el-tooltip>
- </div>
- <!-- 用户头像 -->
- <span class="account" @click="routerTo">个人账户</span>
- <el-dropdown trigger="click" v-if="false">
- <div class="avatar-container">
- <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
- <i-ep-caret-bottom class="w-3 h-3" />
- </div>
- <template #dropdown>
- <el-dropdown-menu>
- <router-link to="/">
- <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
- </router-link>
- <a target="_blank" href="https://github.com/hxrui">
- <el-dropdown-item>Github</el-dropdown-item>
- </a>
- <a target="_blank" href="https://gitee.com/haoxr">
- <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
- </a>
- <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
- <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
- </a>
- <el-dropdown-item divided @click="logout">
- {{ $t("navbar.logout") }}
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </div>
- <!-- 显示的,以上代码作废 -->
- <div style="position: absolute; left: 30px; font-size: 26px">
- {{ $t(routeName as string) }}
- </div>
- <!--语言选择-->
- <lang-select class="navItem" style="color: #ffffff" />
-
- <div class="avatar" @click="routerTo"></div>
- <div class="navItem" @click="routerTo">{{ $t("navbar.account") }}</div>
- <div class="navItem" @click="logout" style="margin-left: 10px">
- {{ $t("navbar.logout") }}
- </div>
- </div>
- </template>
-
- <script setup lang="ts">
- import { watch, ref } from "vue";
- import { storeToRefs } from "pinia";
- import { RouteLocationRaw, useRoute, useRouter } from "vue-router";
- import { useAppStore } from "@/store/modules/app";
- import { useTagsViewStore } from "@/store/modules/tagsView";
- import { useUserStore } from "@/store/modules/user";
- import { useI18n } from "vue-i18n";
- import LangSelect from "@/components/LangSelect/index.vue";
-
- const { locale } = useI18n();
-
- // 当前语言状态与国际化组件
- const lanChange = ref(locale);
-
- const appStore = useAppStore();
- const tagsViewStore = useTagsViewStore();
- const userStore = useUserStore();
-
- const route = useRoute();
- const router = useRouter();
-
- const { device } = storeToRefs(appStore); // 设备类型:desktop-宽屏设备 || mobile-窄屏设备
-
- /**
- * 左侧菜单栏显示/隐藏
- */
- function toggleSideBar() {
- appStore.toggleSidebar(true);
- }
-
- /**
- * vueUse 全屏
- */
- const { isFullscreen, toggle } = useFullscreen();
-
- /**
- * 注销
- */
- function logout() {
- const msg =
- (lanChange.value as string) == "zh-cn"
- ? "确定退出登录吗?"
- : "Are you sure to log out?";
- const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
- const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
- const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
- ElMessageBox.confirm(msg, notice, {
- confirmButtonText: confirm,
- cancelButtonText: cancel,
- }).then(() => {
- userStore
- .logout()
- .then(() => {
- tagsViewStore.delAllViews();
- })
- .then(() => {
- router.push(`/login?redirect=${route.fullPath}`);
- });
- });
- }
-
- function routerTo() {
- router.push("/myAccount");
- }
- // 当前路由的名字
- const routeName = ref(route.meta.name);
-
- watch(
- () => route.meta.name,
- (newName) => {
- routeName.value = newName;
- }
- );
- </script>
-
- <style lang="scss" scoped>
- .navbar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 50px;
- background-color: #fff;
- box-shadow: 0 0 1px #0003;
-
- .setting-container {
- display: flex;
- align-items: center;
-
- .setting-item {
- display: inline-block;
- width: 30px;
- height: 50px;
- line-height: 50px;
- color: #5a5e66;
- text-align: center;
- cursor: pointer;
- margin-right: 25px;
- &:hover {
- background: #f9fafb;
- }
- }
- }
-
- .avatar-container {
- display: flex;
- align-items: center;
- justify-items: center;
- margin: 0 5px;
- cursor: pointer;
-
- img {
- width: 40px;
- height: 40px;
- border-radius: 5px;
- }
- }
- }
- // 代替原来的navbar
- .myNavbar {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- height: 80px;
- padding: 0 20px;
- color: #fff;
- background-color: #000;
- box-shadow: 0 0 1px #0003;
- padding-right: 50px;
- .avatar {
- width: 30px;
- height: 30px;
- margin-right: 10px;
- margin-left: 20px;
- background-color: #4769da;
- border-radius: 50%;
- cursor: pointer;
- }
- .navItem {
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- color: #4769da;
- }
- }
- }
- </style>
|