|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="navbar"> | 
 |  |  |     <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> | 
 |  |  |     <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" /> | 
 |  |  |     <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" /> | 
 |  |  |     <hamburger | 
 |  |  |       id="hamburger-container" | 
 |  |  |       :is-active="appStore.sidebar.opened" | 
 |  |  |       class="hamburger-container" | 
 |  |  |       @toggleClick="toggleSideBar" | 
 |  |  |     /> | 
 |  |  |     <breadcrumb | 
 |  |  |       v-if="!settingsStore.topNav" | 
 |  |  |       id="breadcrumb-container" | 
 |  |  |       class="breadcrumb-container" | 
 |  |  |     /> | 
 |  |  |     <top-nav | 
 |  |  |       v-if="settingsStore.topNav" | 
 |  |  |       id="topmenu-container" | 
 |  |  |       class="topmenu-container" | 
 |  |  |     /> | 
 |  |  |  | 
 |  |  |     <div class="right-menu"> | 
 |  |  |       <template v-if="appStore.device !== 'mobile'"> | 
 |  |  |         <header-search id="header-search" class="right-menu-item" /> | 
 |  |  |  | 
 |  |  |         <el-tooltip content="源码地址" effect="dark" placement="bottom"> | 
 |  |  |           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> | 
 |  |  |         </el-tooltip> | 
 |  |  |  | 
 |  |  |         <el-tooltip content="文档地址" effect="dark" placement="bottom"> | 
 |  |  |           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> | 
 |  |  |         </el-tooltip> | 
 |  |  |  | 
 |  |  |         <screenfull id="screenfull" class="right-menu-item hover-effect" /> | 
 |  |  |  | 
 |  |  |         <el-tooltip content="主题模式" effect="dark" placement="bottom"> | 
 |  |  |           <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme"> | 
 |  |  |             <svg-icon v-if="settingsStore.isDark" icon-class="sunny" /> | 
 |  |  |             <svg-icon v-if="!settingsStore.isDark" icon-class="moon" /> | 
 |  |  |           </div> | 
 |  |  |         </el-tooltip> | 
 |  |  |  | 
 |  |  |         <el-tooltip content="布局大小" effect="dark" placement="bottom"> | 
 |  |  |           <size-select id="size-select" class="right-menu-item hover-effect" /> | 
 |  |  |         </el-tooltip> | 
 |  |  |       </template> | 
 |  |  |       <template v-if="appStore.device !== 'mobile'"> </template> | 
 |  |  |       <div class="mt5"> | 
 |  |  |         <!-- <el-button @click="changeLanguage('zh')">中文</el-button> | 
 |  |  |           <el-button @click="changeLanguage('en')">English</el-button> --> | 
 |  |  |         <el-dropdown> | 
 |  |  |           <img class="zh_icon" v-if="locale==='zh'" src="@/assets/images/zh.svg" alt="zh" /> | 
 |  |  |           <img class="zh_icon" v-if="locale==='en'" src="@/assets/images/en.svg" alt="en" /> | 
 |  |  |           <template #dropdown> | 
 |  |  |             <el-dropdown-menu> | 
 |  |  |               <el-dropdown-item  @click="changeLanguage('zh','zh-CN')">{{ $t(`common.topNav.zh`) }}</el-dropdown-item> | 
 |  |  |               <el-dropdown-item @click="changeLanguage('en','en-US')">{{ $t(`common.topNav.en`) }}</el-dropdown-item> | 
 |  |  |             </el-dropdown-menu> | 
 |  |  |           </template> | 
 |  |  |         </el-dropdown> | 
 |  |  |       </div> | 
 |  |  |       <div class="avatar-container"> | 
 |  |  |         <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> | 
 |  |  |         <el-dropdown | 
 |  |  |           @command="handleCommand" | 
 |  |  |           class="right-menu-item hover-effect" | 
 |  |  |           trigger="click" | 
 |  |  |         > | 
 |  |  |           <div class="avatar-wrapper"> | 
 |  |  |             <img :src="userStore.avatar" class="user-avatar" /> | 
 |  |  |             <el-icon><caret-bottom /></el-icon> | 
 |  |  | 
 |  |  |           <template #dropdown> | 
 |  |  |             <el-dropdown-menu> | 
 |  |  |               <router-link to="/user/profile"> | 
 |  |  |                 <el-dropdown-item>个人中心</el-dropdown-item> | 
 |  |  |                 <el-dropdown-item>{{ $t(`common.topNav.center`) }}</el-dropdown-item> | 
 |  |  |               </router-link> | 
 |  |  |               <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"> | 
 |  |  |               <!-- <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"> | 
 |  |  |                 <span>布局设置</span> | 
 |  |  |               </el-dropdown-item> | 
 |  |  |               </el-dropdown-item> --> | 
 |  |  |               <el-dropdown-item divided command="logout"> | 
 |  |  |                 <span>退出登录</span> | 
 |  |  |                 <span>{{ $t(`common.topNav.logout`) }}</span> | 
 |  |  |               </el-dropdown-item> | 
 |  |  |             </el-dropdown-menu> | 
 |  |  |           </template> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  | import { ElMessageBox } from 'element-plus' | 
 |  |  | import Breadcrumb from '@/components/Breadcrumb' | 
 |  |  | import TopNav from '@/components/TopNav' | 
 |  |  | import Hamburger from '@/components/Hamburger' | 
 |  |  | import Screenfull from '@/components/Screenfull' | 
 |  |  | import SizeSelect from '@/components/SizeSelect' | 
 |  |  | import HeaderSearch from '@/components/HeaderSearch' | 
 |  |  | import RuoYiGit from '@/components/RuoYi/Git' | 
 |  |  | import RuoYiDoc from '@/components/RuoYi/Doc' | 
 |  |  | import useAppStore from '@/store/modules/app' | 
 |  |  | import useUserStore from '@/store/modules/user' | 
 |  |  | import useSettingsStore from '@/store/modules/settings' | 
 |  |  |  | 
 |  |  | const appStore = useAppStore() | 
 |  |  | const userStore = useUserStore() | 
 |  |  | const settingsStore = useSettingsStore() | 
 |  |  | // import { ElMessageBox } from "element-plus"; | 
 |  |  | import Breadcrumb from "@/components/Breadcrumb"; | 
 |  |  | import TopNav from "@/components/TopNav"; | 
 |  |  | import Hamburger from "@/components/Hamburger"; | 
 |  |  | import Screenfull from "@/components/Screenfull"; | 
 |  |  | import SizeSelect from "@/components/SizeSelect"; | 
 |  |  | import HeaderSearch from "@/components/HeaderSearch"; | 
 |  |  | import RuoYiGit from "@/components/RuoYi/Git"; | 
 |  |  | import RuoYiDoc from "@/components/RuoYi/Doc"; | 
 |  |  | import useAppStore from "@/store/modules/app"; | 
 |  |  | import useUserStore from "@/store/modules/user"; | 
 |  |  | import useSettingsStore from "@/store/modules/settings"; | 
 |  |  | import useLanguageStore from "@/store/modules/language"; | 
 |  |  | import { VxeUI } from 'vxe-table' | 
 |  |  | import { useI18n } from "vue-i18n"; //要在js中使用国际化 | 
 |  |  | const { t, locale } = useI18n(); | 
 |  |  | const appStore = useAppStore(); | 
 |  |  | const userStore = useUserStore(); | 
 |  |  | const settingsStore = useSettingsStore(); | 
 |  |  | const languageStore = useLanguageStore(); | 
 |  |  | const { proxy } = getCurrentInstance(); | 
 |  |  | function changeLanguage(type1,type2) { | 
 |  |  |   proxy.$i18n.locale = type1; | 
 |  |  |   languageStore.setLocale(type1); | 
 |  |  |   VxeUI.setLanguage(type2) | 
 |  |  |   // console.log(VxeUI.getLanguage(),'VxeUI.getLanguage()') | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function toggleSideBar() { | 
 |  |  |   appStore.toggleSideBar() | 
 |  |  |   appStore.toggleSideBar(); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function handleCommand(command) { | 
 |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function logout() { | 
 |  |  |   ElMessageBox.confirm('确定注销并退出系统吗?', '提示', { | 
 |  |  |     confirmButtonText: '确定', | 
 |  |  |     cancelButtonText: '取消', | 
 |  |  |     type: 'warning' | 
 |  |  |   }).then(() => { | 
 |  |  |     userStore.logOut().then(() => { | 
 |  |  |       location.href = '/index'; | 
 |  |  |   ElMessageBox.confirm("确定注销并退出系统吗?", "提示", { | 
 |  |  |     confirmButtonText: "确定", | 
 |  |  |     cancelButtonText: "取消", | 
 |  |  |     type: "warning", | 
 |  |  |   }) | 
 |  |  |     .then(() => { | 
 |  |  |       userStore.logOut().then(() => { | 
 |  |  |         location.href = "/index"; | 
 |  |  |       }); | 
 |  |  |     }) | 
 |  |  |   }).catch(() => { }); | 
 |  |  |     .catch(() => {}); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const emits = defineEmits(['setLayout']) | 
 |  |  | const emits = defineEmits(["setLayout"]); | 
 |  |  | function setLayout() { | 
 |  |  |   emits('setLayout'); | 
 |  |  |   emits("setLayout"); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function toggleTheme() { | 
 |  |  |   settingsStore.toggleTheme() | 
 |  |  |   settingsStore.toggleTheme(); | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang='scss' scoped> | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | .navbar { | 
 |  |  |   height: 50px; | 
 |  |  |   overflow: hidden; | 
 |  |  |   position: relative; | 
 |  |  |   background: var(--navbar-bg); | 
 |  |  |   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); | 
 |  |  |   // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); | 
 |  |  |  | 
 |  |  |   .hamburger-container { | 
 |  |  |     line-height: 46px; | 
 |  |  | 
 |  |  |     height: 100%; | 
 |  |  |     line-height: 50px; | 
 |  |  |     display: flex; | 
 |  |  |  | 
 |  |  |     .mt5 { | 
 |  |  |       margin-top: 5px; | 
 |  |  |       .zh_icon { | 
 |  |  |         width: 35px; | 
 |  |  |         height: 35px; | 
 |  |  |         border:none; | 
 |  |  |         outline: none; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |     &:focus { | 
 |  |  |       outline: none; | 
 |  |  |     } | 
 |  |  | 
 |  |  |  | 
 |  |  |         svg { | 
 |  |  |           transition: transform 0.3s; | 
 |  |  |            | 
 |  |  |  | 
 |  |  |           &:hover { | 
 |  |  |             transform: scale(1.15); | 
 |  |  |           } |