storlead-sasa-platform/ui/sp-storlead-center/src/layout/index.vue

<template>
	<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
		<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
		<!-- 全宽顶部导航栏，固定在页面最上方 -->
		<navbar ref="navbarRef" @setLayout="setLayout" class="global-navbar" />
		<side-bar v-if="!sidebar.hide" class="sidebar-container" />
		<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
			<div :class="{ 'fixed-header': fixedHeader }">
				<tags-view v-if="needTagsView" />
			</div>
			<app-main />
			<settings ref="settingRef" />
		</div>
	</div>
	<Transition name="slide-fade">
		<div v-if="showEmailDialog" class="email-dialog-container">
			<template v-for="(item, index) in emailData">
				<div class="email-dialog flex-center" @click="goEmail(item, index)">
					<div class="flex" style="position: relative">
						<img src="../assets/images/email-img.png" />
						<span class="badge">{{ unReadCount }}</span>
					</div>
					<div class="email-detail">
						<p class="bold">{{ item.fromName || item.from }}</p>
						<p>{{ item.subject }}</p>
						<!-- <p class="content" v-html="item.content"></p> -->
					</div>
					<el-icon :size="18" @click.stop="closeEmailDialog(index)"><Close /></el-icon>
				</div>
			</template>
		</div>
	</Transition>
</template>

<script setup lang="ts">
import SideBar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import useNoticeStore from '@/store/modules/notice';

const noticeStore = storeToRefs(useNoticeStore());
const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme);
const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);
const emailObj = computed(() => noticeStore.state.value.emailNoReadObj);

const showEmailDialog = ref(false)

const classObj = computed(() => ({
	hideSidebar: !sidebar.value.opened,
	openSidebar: sidebar.value.opened,
	withoutAnimation: sidebar.value.withoutAnimation,
	mobile: device.value === 'mobile'
}))

const { width } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design

watchEffect(() => {
	if (device.value === 'mobile' && sidebar.value.opened) {
		useAppStore().closeSideBar({ withoutAnimation: false })
	}
	if (width.value - 1 < WIDTH) {
		useAppStore().toggleDevice('mobile')
		useAppStore().closeSideBar({ withoutAnimation: true })
	} else {
		useAppStore().toggleDevice('desktop')
	}
})

const emailData = ref([])
const unReadCount = ref(0)
watch(emailObj, (newVal, oldVal) => {
	if(newVal.maills && newVal.maills.length > 0) {
		unReadCount.value = newVal.unReadCount
		emailData.value.push(...newVal.maills)
		emailData.value = emailData.value.slice(-3)
		showEmailDialog.value = true
	}
}, { deep: true })

const closeEmailDialog = (index: number) => {
	emailData.value.splice(index, 1)
	if(emailData.value.length == 0) {
		showEmailDialog.value = false
	}
}

const router = useRouter();
const goEmail = (item: any, index: number) => {
	const { href } = router.resolve({
		path: '/customer/followPanel/detail',
		query: {
			id: item.id,
			resourceType: item.customerForm
		}
	})
    window.open(href)
	closeEmailDialog(index)
}

const navbarRef = ref(Navbar);
const settingRef = ref(Settings);

const channel = new BroadcastChannel('email_channel');
channel.onmessage = (event) => {
	useNoticeStore().getCount()
};

onMounted(() => {
	nextTick(() => {
	})
})

const handleClickOutside = () => {
	useAppStore().closeSideBar({ withoutAnimation: false })
}

const setLayout = () => {
	settingRef.value.openSetting();
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-wrapper {
	@include clearfix;
	position: relative;
	height: 100%;
	width: 100%;

	&.mobile.openSidebar {
		position: fixed;
		top: 0;
	}
}

.global-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
}

.drawer-bg {
	background: #000;
	opacity: 0.3;
	width: 100%;
	top: 0;
	height: 100%;
	position: absolute;
	z-index: 999;
}

.fixed-header {
	position: fixed;
	top: $navbar-height;
	right: 0;
	z-index: 9;
	width: calc(100% - #{$base-sidebar-width});
	transition: width 0.28s;
	background: $fixed-header-bg;
}

.hideSidebar .fixed-header {
	width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
	width: 100%;
}

.mobile .fixed-header {
	width: 100%;
}

.email-dialog-container{
	position: absolute;
	bottom: 25px;
	right: 25px;
	z-index: 99999;
}
.email-dialog {
	width: 400px;
	height: 80px;
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
	border-radius: 2px;
	background-color: #ECF5FF;
	padding: 10px;
	cursor: pointer;
	margin-top: 15px;
    position: relative;
	.badge{
		position: absolute;
		top: 2px;
		right: 8px;
		background: #F40003;
		color: #FFF;
		border-radius: 50%;
		font-size: 12px;
		width: 18px;
		height: 18px;
		text-align: center;
	}
	.email-detail{
		flex: 1;
		width: 0;
		margin-left: 8px;
		color: #333;
		p{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.content{
			color: #999
		}
	}
	.el-icon{
		position: absolute;
		top: 7px;
		right: 7px;
		cursor: pointer;
	}
}
.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>