77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<template>
|
|
<div style=" height: 70px; width: 1248px; display: flex;
|
|
justify-content: space-between; align-items: center;">
|
|
<div style=" display: flex; justify-content: center;
|
|
align-items: center; margin-left: 10px">
|
|
<el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px">
|
|
<Expand />
|
|
</el-icon>
|
|
<el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px">
|
|
<Fold />
|
|
</el-icon>
|
|
|
|
<!-- 面包屑导航 -->
|
|
<Breadcrumb/>
|
|
</div>
|
|
|
|
<div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: offset + 'px' }">
|
|
<el-avatar style="margin-right: 10px">
|
|
<img :src="userInfo.userAvatar" alt="">
|
|
</el-avatar>
|
|
|
|
<el-dropdown style="cursor: pointer;" size="default">
|
|
<span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
|
|
<span>{{ userInfo.userName }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
|
|
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import emitter from '@/utils/emitter'
|
|
import { useRouter } from "vue-router";
|
|
import myAxios from '@/api/myAxios';
|
|
import { userStore } from '@/store/userStore';
|
|
import { ElMessage } from 'element-plus';
|
|
import Breadcrumb from './Breadcrumb.vue';
|
|
const router = useRouter();
|
|
const offset = ref(20)
|
|
const showLog = ref(false)
|
|
const store = userStore()
|
|
const userInfo = store.loginUser
|
|
const logout = async () => {
|
|
const res: any = await myAxios.post("/user/logout", {})
|
|
if (res.data.code == 1 && res.data) {
|
|
store.$reset()
|
|
await router.replace('/')
|
|
ElMessage({
|
|
type: 'info',
|
|
message: '登出成功',
|
|
})
|
|
}
|
|
}
|
|
const changeState = () => {
|
|
showLog.value = !showLog.value
|
|
emitter.emit('Aside', showLog.value)
|
|
if (showLog.value) {
|
|
offset.value = -116
|
|
} else {
|
|
offset.value = 20
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.el-tooltip__trigger:focus-visible) {
|
|
outline: unset;
|
|
}
|
|
</style> |