邃芒慧语、照片说话(PC) https://photo.metavatar.cc/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 
 

222 行
5.6 KiB

  1. <template>
  2. <!-- 顶部导航栏 -->
  3. <div class="myNavbar">
  4. <!-- 左侧面包屑 -->
  5. <div class="flex" v-if="false">
  6. <hamburger
  7. :is-active="appStore.sidebar.opened"
  8. @toggleClick="toggleSideBar"
  9. />
  10. <breadcrumb />
  11. </div>
  12. <!-- 右侧导航设置 -->
  13. <div class="flex" v-if="false">
  14. <!-- 导航栏设置(窄屏隐藏)-->
  15. <div class="setting-container" v-if="device !== 'mobile'">
  16. <!--全屏 -->
  17. <div class="setting-item" @click="toggle" v-if="false">
  18. <svg-icon
  19. :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
  20. />
  21. </div>
  22. <!-- 布局大小 -->
  23. <el-tooltip
  24. content="布局大小"
  25. effect="dark"
  26. placement="bottom"
  27. v-if="false"
  28. >
  29. <size-select class="setting-item" />
  30. </el-tooltip>
  31. </div>
  32. <!-- 用户头像 -->
  33. <span class="account" @click="routerTo">个人账户</span>
  34. <el-dropdown trigger="click" v-if="false">
  35. <div class="avatar-container">
  36. <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
  37. <i-ep-caret-bottom class="w-3 h-3" />
  38. </div>
  39. <template #dropdown>
  40. <el-dropdown-menu>
  41. <router-link to="/">
  42. <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
  43. </router-link>
  44. <a target="_blank" href="https://github.com/hxrui">
  45. <el-dropdown-item>Github</el-dropdown-item>
  46. </a>
  47. <a target="_blank" href="https://gitee.com/haoxr">
  48. <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
  49. </a>
  50. <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
  51. <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
  52. </a>
  53. <el-dropdown-item divided @click="logout">
  54. {{ $t("navbar.logout") }}
  55. </el-dropdown-item>
  56. </el-dropdown-menu>
  57. </template>
  58. </el-dropdown>
  59. </div>
  60. <!-- 显示的,以上代码作废 -->
  61. <div style="position: absolute; left: 30px; font-size: 26px">
  62. {{ $t(routeName as string) }}
  63. </div>
  64. <!--语言选择-->
  65. <lang-select class="navItem" style="color: #ffffff" />
  66. <div class="avatar" @click="routerTo"></div>
  67. <div class="navItem" @click="routerTo">{{ $t("navbar.account") }}</div>
  68. <div class="navItem" @click="logout" style="margin-left: 10px">
  69. {{ $t("navbar.logout") }}
  70. </div>
  71. </div>
  72. </template>
  73. <script setup lang="ts">
  74. import { watch, ref } from "vue";
  75. import { storeToRefs } from "pinia";
  76. import { RouteLocationRaw, useRoute, useRouter } from "vue-router";
  77. import { useAppStore } from "@/store/modules/app";
  78. import { useTagsViewStore } from "@/store/modules/tagsView";
  79. import { useUserStore } from "@/store/modules/user";
  80. import { useI18n } from "vue-i18n";
  81. import LangSelect from "@/components/LangSelect/index.vue";
  82. const { locale } = useI18n();
  83. // 当前语言状态与国际化组件
  84. const lanChange = ref(locale);
  85. const appStore = useAppStore();
  86. const tagsViewStore = useTagsViewStore();
  87. const userStore = useUserStore();
  88. const route = useRoute();
  89. const router = useRouter();
  90. const { device } = storeToRefs(appStore); // 设备类型:desktop-宽屏设备 || mobile-窄屏设备
  91. /**
  92. * 左侧菜单栏显示/隐藏
  93. */
  94. function toggleSideBar() {
  95. appStore.toggleSidebar(true);
  96. }
  97. /**
  98. * vueUse 全屏
  99. */
  100. const { isFullscreen, toggle } = useFullscreen();
  101. /**
  102. * 注销
  103. */
  104. function logout() {
  105. const msg =
  106. (lanChange.value as string) == "zh-cn"
  107. ? "确定退出登录吗?"
  108. : "Are you sure to log out?";
  109. const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  110. const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  111. const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  112. ElMessageBox.confirm(msg, notice, {
  113. confirmButtonText: confirm,
  114. cancelButtonText: cancel,
  115. }).then(() => {
  116. userStore
  117. .logout()
  118. .then(() => {
  119. tagsViewStore.delAllViews();
  120. })
  121. .then(() => {
  122. router.push(`/login?redirect=${route.fullPath}`);
  123. });
  124. });
  125. }
  126. function routerTo() {
  127. router.push("/myAccount");
  128. }
  129. // 当前路由的名字
  130. const routeName = ref(route.meta.name);
  131. watch(
  132. () => route.meta.name,
  133. (newName) => {
  134. routeName.value = newName;
  135. }
  136. );
  137. </script>
  138. <style lang="scss" scoped>
  139. .navbar {
  140. display: flex;
  141. align-items: center;
  142. justify-content: space-between;
  143. height: 50px;
  144. background-color: #fff;
  145. box-shadow: 0 0 1px #0003;
  146. .setting-container {
  147. display: flex;
  148. align-items: center;
  149. .setting-item {
  150. display: inline-block;
  151. width: 30px;
  152. height: 50px;
  153. line-height: 50px;
  154. color: #5a5e66;
  155. text-align: center;
  156. cursor: pointer;
  157. margin-right: 25px;
  158. &:hover {
  159. background: #f9fafb;
  160. }
  161. }
  162. }
  163. .avatar-container {
  164. display: flex;
  165. align-items: center;
  166. justify-items: center;
  167. margin: 0 5px;
  168. cursor: pointer;
  169. img {
  170. width: 40px;
  171. height: 40px;
  172. border-radius: 5px;
  173. }
  174. }
  175. }
  176. // 代替原来的navbar
  177. .myNavbar {
  178. display: flex;
  179. align-items: center;
  180. justify-content: flex-end;
  181. height: 80px;
  182. padding: 0 20px;
  183. color: #fff;
  184. background-color: #000;
  185. box-shadow: 0 0 1px #0003;
  186. padding-right: 50px;
  187. .avatar {
  188. width: 30px;
  189. height: 30px;
  190. margin-right: 10px;
  191. margin-left: 20px;
  192. background-color: #4769da;
  193. border-radius: 50%;
  194. cursor: pointer;
  195. }
  196. .navItem {
  197. cursor: pointer;
  198. transition: all 0.3s;
  199. &:hover {
  200. color: #4769da;
  201. }
  202. }
  203. }
  204. </style>