|
- <template>
- <!-- 顶部导航栏 -->
- <div class="myNavbar">
- <!--语言选择-->
- <lang-select class="navItem" />
-
- <!-- <div class="navItem" v-if="AccessToken" @click="routerTo">
- {{ $t("navbar.account") }}
- </div>
- <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
- {{ $t("navbar.goLogin") }}
- </div>
- <div
- class="navItem"
- v-if="AccessToken"
- @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";
- import { userInfoModules } from "@/store/modules/userInfo";
- import defaultAvater from "../../assets/img/left-top-logo.png";
-
- const userInfoPinia = userInfoModules(); //pinia
- 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-窄屏设备
-
- const AccessToken = localStorage.getItem("AccessToken"); // 登录状态
- /**
- * 左侧菜单栏显示/隐藏
- */
- 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(() => {
- userInfoPinia.loginOut();
- router.push(`/login`);
- localStorage.removeItem("AccessToken");
- });
- }
-
- 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: 100%;
- padding: 0 20px;
- color: #fff;
- background-color: #000;
- padding-right: 50px;
- // box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px;
- .avatar {
- position: relative;
- width: 50px;
- height: 50px;
- margin-right: 10px;
- margin-left: 20px;
- background-color: #fff;
- border-radius: 50%;
- cursor: pointer;
- overflow: hidden;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-width: 100%;
- max-height: 100%;
- }
- }
- .navItem {
- transition: all 0.3s;
- margin-right: 10px;
- color: #fff;
- cursor: pointer;
- &:hover {
- color: #4769da;
- }
- }
- }
- </style>
|