邃芒慧影、口播(PC) https://neuver.metavatar.cc/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

182 linhas
4.1 KiB

  1. <template>
  2. <!-- 顶部导航栏 -->
  3. <div class="myNavbar">
  4. <!--语言选择-->
  5. <lang-select class="navItem" />
  6. <!-- <div class="navItem" v-if="AccessToken" @click="routerTo">
  7. {{ $t("navbar.account") }}
  8. </div>
  9. <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
  10. {{ $t("navbar.goLogin") }}
  11. </div>
  12. <div
  13. class="navItem"
  14. v-if="AccessToken"
  15. @click="logout"
  16. style="margin-left: 10px"
  17. >
  18. {{ $t("navbar.logout") }}
  19. </div> -->
  20. </div>
  21. </template>
  22. <script setup lang="ts">
  23. import { watch, ref } from "vue";
  24. import { storeToRefs } from "pinia";
  25. import { RouteLocationRaw, useRoute, useRouter } from "vue-router";
  26. import { useAppStore } from "@/store/modules/app";
  27. import { useTagsViewStore } from "@/store/modules/tagsView";
  28. import { useUserStore } from "@/store/modules/user";
  29. import { useI18n } from "vue-i18n";
  30. import LangSelect from "@/components/LangSelect/index.vue";
  31. import { userInfoModules } from "@/store/modules/userInfo";
  32. import defaultAvater from "../../assets/img/left-top-logo.png";
  33. const userInfoPinia = userInfoModules(); //pinia
  34. const { locale } = useI18n();
  35. // 当前语言状态与国际化组件
  36. const lanChange = ref(locale);
  37. const appStore = useAppStore();
  38. const tagsViewStore = useTagsViewStore();
  39. const userStore = useUserStore();
  40. const route = useRoute();
  41. const router = useRouter();
  42. const { device } = storeToRefs(appStore); // 设备类型:desktop-宽屏设备 || mobile-窄屏设备
  43. const AccessToken = localStorage.getItem("AccessToken"); // 登录状态
  44. /**
  45. * 左侧菜单栏显示/隐藏
  46. */
  47. function toggleSideBar() {
  48. appStore.toggleSidebar(true);
  49. }
  50. /**
  51. * vueUse 全屏
  52. */
  53. const { isFullscreen, toggle } = useFullscreen();
  54. /**
  55. * 注销
  56. */
  57. function logout() {
  58. const msg =
  59. (lanChange.value as string) == "zh-cn"
  60. ? "确定退出登录吗?"
  61. : "Are you sure to log out?";
  62. const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  63. const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  64. const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  65. ElMessageBox.confirm(msg, notice, {
  66. confirmButtonText: confirm,
  67. cancelButtonText: cancel,
  68. }).then(() => {
  69. userInfoPinia.loginOut();
  70. router.push(`/login`);
  71. localStorage.removeItem("AccessToken");
  72. });
  73. }
  74. function routerTo() {
  75. router.push("/myAccount");
  76. }
  77. // 当前路由的名字
  78. const routeName = ref(route.meta.name);
  79. watch(
  80. () => route.meta.name,
  81. (newName) => {
  82. routeName.value = newName;
  83. }
  84. );
  85. </script>
  86. <style lang="scss" scoped>
  87. .navbar {
  88. display: flex;
  89. align-items: center;
  90. justify-content: space-between;
  91. height: 50px;
  92. background-color: #fff;
  93. box-shadow: 0 0 1px #0003;
  94. .setting-container {
  95. display: flex;
  96. align-items: center;
  97. .setting-item {
  98. display: inline-block;
  99. width: 30px;
  100. height: 50px;
  101. line-height: 50px;
  102. color: #5a5e66;
  103. text-align: center;
  104. cursor: pointer;
  105. margin-right: 25px;
  106. &:hover {
  107. background: #f9fafb;
  108. }
  109. }
  110. }
  111. .avatar-container {
  112. display: flex;
  113. align-items: center;
  114. justify-items: center;
  115. margin: 0 5px;
  116. cursor: pointer;
  117. img {
  118. width: 40px;
  119. height: 40px;
  120. border-radius: 5px;
  121. }
  122. }
  123. }
  124. // 代替原来的navbar
  125. .myNavbar {
  126. display: flex;
  127. align-items: center;
  128. justify-content: flex-end;
  129. height: 100%;
  130. padding: 0 20px;
  131. color: #fff;
  132. background-color: #000;
  133. padding-right: 50px;
  134. // box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px;
  135. .avatar {
  136. position: relative;
  137. width: 50px;
  138. height: 50px;
  139. margin-right: 10px;
  140. margin-left: 20px;
  141. background-color: #fff;
  142. border-radius: 50%;
  143. cursor: pointer;
  144. overflow: hidden;
  145. img {
  146. position: absolute;
  147. top: 50%;
  148. left: 50%;
  149. transform: translate(-50%, -50%);
  150. max-width: 100%;
  151. max-height: 100%;
  152. }
  153. }
  154. .navItem {
  155. transition: all 0.3s;
  156. margin-right: 10px;
  157. color: #fff;
  158. cursor: pointer;
  159. &:hover {
  160. color: #4769da;
  161. }
  162. }
  163. }
  164. </style>