<!-- @format --> <script setup lang="ts"> import { useUserStore } from '@/stores/modules/user' const userStore = useUserStore() const { isLogin, userInfo } = storeToRefs(userStore) const { openLoginModal } = useLoginModal() const userName = computed(() => { console.log('userInfo.value', userInfo.value) return (userInfo.value?.firstName || userInfo.value?.lastName) ? `${userInfo.value?.firstName} ${userInfo.value?.lastName}` : 'EJET Spark' }) async function clickLogin() { try { const { status } = await openLoginModal() console.log('Login status:', status) // if (status) // 登陆后的逻辑 } catch (error) { console.log(error) } } function onLogout() { userStore.logout() } </script> <template> <div> <div v-if="!isLogin"> <el-button class="!b-0px !bg-#9B6CFF custom-btn-login !text-#fff !w-100px !h-32px !text-16px !b-rd-410px" @click="clickLogin" > Sign In </el-button> </div> <div v-else> <el-popover placement="bottom-end" :width="360" > <template #reference> <div class="b-rd-50% w-40px h-40px fw-800 text-#9B6CFF lh-40px text-center bg-#EAE5FA text-#3D3D3D cursor-pointer"> {{ userName.charAt(0) }} </div> </template> <template #default> <div class=" bg-#fff b-rd-8px flex justify-between items-center"> <div class="flex items-center"> <div class="b-rd-50% w-40px fw-800 h-40px lh-40px text-center text-#9B6CFF bg-#EAE5FA text-#3D3D3D cursor-pointer"> {{ userName.charAt(0) }} </div> <div class="ml-18px"> <div class="custom-title-font text-#333 text-18px"> {{ userName }} </div> <div class="mt-4px text-#767676"> {{ userInfo?.email }} </div> </div> </div> <div class="cursor-pointer" @click="onLogout"> <img src="@/assets/images/logout.png" class="w-24px h-24px" alt=""> </div> </div> </template> </el-popover> </div> </div> </template> <style lang="less"> .custom-btn-login { .el-icon { font-size: 24px; } } .el-popover.el-popper{ border-radius: 10px!important; margin-top: 10px; padding: 20px!important; padding-right: 30px !important; } .custom-dropdown { &.el-dropdown__popper { border-radius: 10px; .el-scrollbar { .el-dropdown__list { width: 415px; padding: 30px !important; } .el-dropdown-menu { .el-dropdown-menu__item { padding-bottom: 20px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; &:last-child { padding-bottom: 0; } } } } } } </style>