easydo-zcgx-web/src/layout/components/NavBar/index.vue

<template>
    <div :class="{'tjm_navbar_container': true, 'layoutStyleHorizontal': layoutStyle == 'horizontal'}">
        <div class="tjm_navbar_left" v-if="layoutStyle == 'vertical'">
            <el-icon
                class="tjm_collapse_icon"
                size="28"
                @click="collapse = !collapse"
            >
                <tjm-icon-ep-fold v-if="!collapse" />
                <tjm-icon-ep-expand v-else />
            </el-icon>
            &nbsp; &nbsp; &nbsp;
            <Breadcrumb />
        </div>
        <div class="tjm_navbar_left" v-else>
            <tjm-side-bar />
        </div>
        <div class="tjm_navbar_right">
            <div class="tjm_tools_container">
                <full-screen-btn></full-screen-btn>
                <menu-search></menu-search>
                <!-- <layout-style-set></layout-style-set> -->
            </div>
            <div class="tjm_user_container">
                <el-dropdown>
                    <el-avatar :size="36" :src="avatar" />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click='goUserInfo'>个人信息</el-dropdown-item>
                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup>
import TjmSideBar from '../SideBar/indexH.vue'
import Breadcrumb from './components/Breadcrumb.vue'
import FullScreenBtn from '@/layout/components/NavBar/components/FullScreenBtn.vue'
import MenuSearch from '@/layout/components/NavBar/components/MenuSearch.vue'
import LayoutStyleSet from '@/layout/components/NavBar/components/LayoutStyleSet.vue'
import { useSettingStore } from '@/store/settings.js'
const settingStore = useSettingStore()
const { collapse, layoutStyle } = storeToRefs(settingStore)
import { useUserStore } from '@/store/user.js'
const router = useRouter()
const avatar = ref(useUserStore().userInfo.avatar || "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png");

function goUserInfo() {
    router.push('/userInfo')
}
const logout = () => {
    ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        useUserStore().logOut().then(() => {
            location.href = '/index'
        })
    }).catch(() => { })
}
</script>

<style lang="scss" scoped>
.tjm_navbar_container {
  position: relative;
  height: $base-navbar-height;
  overflow: hidden;
  user-select: none;
  box-shadow: $base-box-shadow;
  background: $base-color-white;
  padding-right: $base-padding;
  padding-left: $base-padding;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tjm_navbar_left {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .tjm_navbar_right {
    padding-left: 80px;
    display: flex;
    align-items: center;
    .tjm_tools_container {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .tjm_tools_icon {
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .tjm_user_container {
      cursor: pointer;
    }
  }
}
.layoutStyleHorizontal {
  background: #283a5e;
}
</style>