<template>
|
<div class="layoutNav___jOCfX">
|
<div class="layoutNav__item___1y99z">
|
<div class="nav__content">
|
<div class="agent_img"></div>
|
<div class="agent_line"></div>
|
<el-tooltip content="开启新对话" placement="right">
|
<div class="nav__chat" @click="newChatRoomClick()">
|
<div class="nav__chat-icon">
|
<span class="chat_img ywifont ywicon-weixin !text-[26px] text-[#fff]"></span>
|
</div>
|
</div>
|
</el-tooltip>
|
<el-tooltip content="历史会话" placement="right">
|
<div class="nav__chat">
|
<div class="nav__chat-icon">
|
<span class="chat_img ywifont ywicon-cshy-shizhong !text-[28px] text-[#fff]"></span>
|
</div>
|
</div>
|
</el-tooltip>
|
<el-tooltip content="公司信息" placement="right">
|
<div class="nav__chat" @click="companyClick()">
|
<div class="nav__chat-icon">
|
<span class="chat_img ywifont ywicon-gongsijieshao !text-[22px] text-[#fff]"></span>
|
</div>
|
</div>
|
</el-tooltip>
|
|
<div class="agent_line"></div>
|
<div class="cursor-pointer m-0" @click="toggleShowExitLogin" v-if="isLoginStatus" ref="toggleExitLoginBtnRef">
|
<div class="nav__profile">
|
<span class="use_name">{{ firstUserCharacter }}</span>
|
</div>
|
<div class="isShow_Profile" v-show="isShowExitLogin">
|
<div class="exit" @click="logoutClick"><i class="ywifont ywicon-tuichu"></i> 退出登录</div>
|
</div>
|
</div>
|
<div v-else class="cursor-pointer m-0">
|
<div class="nav__profile" @click="openLoginDlg">
|
<span class="use_name">登</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, onMounted, ref, watchEffect } from 'vue';
|
import { isLoginStatus, isSharePage, isShowLogin, newChatRoomClick } from '/@/stores/chatRoom';
|
import emitter from '/@/utils/mitt';
|
import { accessSessionKey, userNameKey } from '/@/utils/request';
|
import { Local, LoginInfo } from '/@/utils/storage';
|
import { gotoRoute } from '/@/utils/route';
|
const emit = defineEmits(['toggleSidebar']);
|
const prop = defineProps(['isShow']);
|
const userName = ref('');
|
const firstUserCharacter = computed(() => userName.value?.[0]?.toUpperCase());
|
const isShowExitLogin = ref(false);
|
isLoginStatus.value = !!Local.get(accessSessionKey);
|
const toggleSidebar = () => {
|
emit('toggleSidebar', false);
|
};
|
//#region ====================== 公司信息 ======================
|
const companyClick = () => {
|
gotoRoute({ name: "AboutUs" });
|
}
|
//#endregion
|
//#region ====================== 显示/退出登录 ======================
|
//登录
|
const openLoginDlg = async () => {
|
// 分享页不需要
|
if (isSharePage.value) return;
|
isShowLogin.value = true;
|
};
|
//是否显示退出登录弹窗cpolar.top/login
|
const toggleShowExitLogin = () => {
|
isShowExitLogin.value = !isShowExitLogin.value;
|
};
|
//退出登录
|
const logoutClick = () => {
|
isShowExitLogin.value = false;
|
isLoginStatus.value = false;
|
LoginInfo.remove();
|
};
|
const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
|
|
const listenClickOtherExit = (e) => {
|
if (toggleExitLoginBtnRef.value !== e.target && !toggleExitLoginBtnRef.value?.contains(e.target)) {
|
isShowExitLogin.value = false;
|
}
|
};
|
//#endregion
|
watchEffect(() => {
|
if (!isLoginStatus.value) return;
|
userName.value = Local.get(userNameKey);
|
});
|
onMounted(() => {
|
emitter.on('openLoginDlg', () => {
|
if (isShowLogin.value || isLoginStatus.value) return;
|
openLoginDlg();
|
});
|
emitter.on('logout', () => {
|
logoutClick();
|
});
|
document.addEventListener('click', listenClickOtherExit);
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.layoutNav___jOCfX {
|
width: 68px;
|
z-index: 1030;
|
height: 100%;
|
position: relative;
|
transition: width 0.2s ease;
|
.layoutNav__item___1y99z {
|
position: absolute;
|
top: 0;
|
z-index: 101;
|
.nav__content {
|
width: 60px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 14px 0 1px;
|
transition: all 0.3s ease;
|
transform: all ease 0.3s;
|
.agent_img {
|
width: 28px;
|
height: 28px;
|
background: url('/static/images/logo/logoWithNoName.png') no-repeat;
|
background-size: 100% 100%;
|
|
margin-bottom: 16px;
|
}
|
.agent_line {
|
width: 24px;
|
height: 1px;
|
background-color: #e5e5e5;
|
border-radius: 12px;
|
margin-bottom: 16px;
|
cursor: pointer;
|
}
|
.nav__chat {
|
width: 40px;
|
height: 40px;
|
border-radius: 12px;
|
margin-bottom: 10px;
|
cursor: pointer;
|
&:hover {
|
background-color: #41424a;
|
}
|
.nav__chat-icon {
|
background-position: 8px 8px;
|
font-size: 25px;
|
line-height: 40px;
|
text-align: center;
|
color: #fff;
|
&:hover {
|
color: #0084ff;
|
}
|
.chat_img {
|
display: inline-flex;
|
align-items: center;
|
color: inherit;
|
font-style: normal;
|
line-height: 0;
|
text-align: center;
|
text-transform: none;
|
|
text-rendering: optimizeLegibility;
|
-webkit-font-smoothing: antialiased;
|
}
|
}
|
}
|
.nav__profile {
|
width: 40px;
|
height: 40px;
|
border-radius: 6px;
|
display: flex;
|
-webkit-box-pack: center;
|
justify-content: center;
|
-webkit-box-align: center;
|
align-items: center;
|
.use_name {
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
overflow: hidden;
|
background-color: #1d86ff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
}
|
}
|
}
|
}
|
.isShow_Profile {
|
color: rgba(0, 0, 0, 0.87);
|
border-radius: 8px;
|
background: #ffffff;
|
border-width: 1px;
|
border-style: solid;
|
border-color: #e5e5e5;
|
position: absolute;
|
overflow: hidden auto;
|
min-width: 140px;
|
min-height: 50px;
|
max-width: calc(100% - 32px);
|
outline: 0px;
|
max-height: calc(100% - 96px);
|
opacity: 1;
|
transform: none;
|
transition: opacity 274ms cubic-bezier(0.4, 0, 0.2, 1), transform 182ms cubic-bezier(0.4, 0, 0.2, 1);
|
// top: 105px;
|
top: 204px;
|
left: 72px;
|
transform-origin: 0px 181px;
|
.exit {
|
height: 44px;
|
padding: 16px 12px;
|
gap: 8px;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
