cz-hjjc-admin/src/layout/components/Navbar/index.vue

<template>
  <div>
    <header class="navbar navbar-expand-md d-print-none">
      <div class="container-xl">
        <button v-show="$store.state.app.device === 'mobile'" :aria-expanded="isShowMenuMobile" class="navbar-toggler" @click="isShowMenuMobile = !isShowMenuMobile">
          <span class="navbar-toggler-icon" />
        </button>
        <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
          <router-link to="/">
            <svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
              <path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)" />
            </svg>
          </router-link>
        </div>
        <div class="navbar-nav flex-row order-md-last">

          <div class="d-none d-md-flex">
            <template v-if="isFullscreen">
              <a class="nav-link px-0 fullscreen" @click="fullscreen">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                  <path stroke-width="2" d="M 4 8 l 4 0 l 0 -4 M 16 4 l 0 4 l 4 0 M 20 16 l -4 0 l 0 4 M 8 20 l 0 -4 l -4 0" />
                </svg>
              </a>
            </template>
            <template v-else>
              <a class="nav-link px-0 fullscreen" @click="fullscreen">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                  <path stroke-width="2" d="M 4 8 l 0 -4 l 4 0 M 16 4 l 4 0 l 0 4 M 20 16 l 0 4 l -4 0 M 8 20 l -4 0 l 0 -4" />
                </svg>
              </a>
            </template>
            <div class="nav-item d-md-flex">
              <theme-picker class="nav-link" />
            </div>
            <div class="nav-item d-none d-md-flex me-3">
              <a class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                <span class="badge bg-red" />
              </a>
            </div>
          </div>
          <div class="nav-item">
            <el-dropdown  @command="userCommandHandle">
              <a class="nav-link d-flex lh-1 text-reset p-0" aria-label="Open user menu">
                <img class="avatar avatar-sm" style="" src="@/assets/face.jpg" alt="">
                <div class="d-none d-xl-block ps-2">
                  <div>{{ name }}</div>
                  <div class="mt-1 small text-secondary">{{ (department && department.name) ? department.name : '暂无部门' }}</div>
                </div>
              </a>

              <el-dropdown-menu slot="dropdown" size="mini">
                <el-dropdown-item command="info">
                  <SvgIcon icon-class="user" />
                  <span style="padding-left: 8px;">用户信息</span>
                </el-dropdown-item>
                <el-dropdown-item command="password">
                  <SvgIcon icon-class="password"/>
                  <span style="padding-left: 8px;">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <SvgIcon icon-class="logout" />
                  <span style="padding-left: 8px;">退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>

    <header class="navbar-expand-md">
      <div id="navbar-menu" class="navbar-collapse" v-if="$store.state.app.device === 'desktop'">
        <el-menu
          style="width: 100%;padding: 0 10px;"
          :text-color="variables.menuText"
          :background-color="variables.menuBg"
          :active-text-color="variables.menuActiveText"
          :default-active="activeMenu"
          mode="horizontal"
        >
          <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
        </el-menu>
      </div>

      <div id="navbar-menu-mobile" class="navbar-collapse collapse" v-else>
        <transition name="fade-transform-y">
          <div class="navbar" v-show="isShowMenuMobile">
            <div class="container-xl">
              <div class="row flex-fill align-items-center">
                <el-menu
                  unique-opened
                  style="width: 100%;padding: 0 10px;"
                  :text-color="variables.menuText"
                  :background-color="variables.menuBg"
                  :active-text-color="variables.menuActiveText"
                  :default-active="activeMenu"
                >
                  <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
                </el-menu>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </header>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
import { mapGetters } from 'vuex'
import Item from './Item.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import ThemePicker from '@/components/ThemePicker/index.vue'
export default {
  components: {
    ThemePicker,
    Item,
    SvgIcon
  },
  data() {
    return {
      isFullscreen: false,
      isShowMenuMobile: true,
    }
  },
  computed: {
    variables() {
      return variables
    },
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'permission_routes',
      'department'
    ]),
    activeMenu() {
      const route = this.$route
      const {
        meta,
        path
      } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  created() {
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreen)
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreen)
  },
  methods: {
    handleFullscreen() {
      this.isFullscreen = document.fullscreenElement !== null
    },
    fullscreen() {
      if (!document.fullscreenElement) {
        // 请求全屏
        document.documentElement.requestFullscreen()
      } else {
        // 退出全屏
        document.exitFullscreen()
      }
    },

    async userCommandHandle (command) {
      switch (command){
        case "logout":
          await this.logout();
          break;
      }
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      await this.$store.commit('permission/SET_ROUTES',[])
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/styles/navbar.scss');
</style>