eta_forum_front/src/layout/Index.vue

<script setup>
import {useUserInfo} from '@/hooks/useUserInfo'
import { computed } from 'vue';
import AudioBox from '@/components/Audio.vue'
import { useRoute, useRouter } from 'vue-router';
import Aslide from './components/Aslide.vue'
import { usePermissionMenu } from '@/hooks/usePermissionMenu'

const {getUserInfo,userInfo}=useUserInfo()
const router=useRouter()
const route= useRoute()

const { getPermissionMenu } = usePermissionMenu()

const menu = ref([])
async function init() {
	const res = await getPermissionMenu()
	menu.value = res||[];
	if(menu.value.length) {
		router.replace(menu.value[0].path)
	}
}
init()

getUserInfo()

const isShowAslide = computed(() => {
	return !['/etaChart/favorite','/etaReport/favorite'].includes(route.path)
})

const dynamicStyle = computed(() => {
	const isStylePage = route.path.includes('/etaReport')

	return isStylePage ? 'background:#fff' : ''
})


async function handleLoginOut(){
	await $confirmDialog({
    header:'提示',
    body: '是否确认退出当前账号',
		confirmBtn:'确认退出'
  }); 
	localStorage.removeItem('token')
	router.replace('/login')
}

</script>

<template>
  <div class="layout-wrap">
    <div class="flex header">
			<div class="flex">
      	<img class="logo" src="@/assets/imgs/logo.png" alt="" />
				<Aslide v-if="isShowAslide" :menu="menu"/>
			</div>
			<div class="fav-btn" @click="$router.push('/etaChart/favorite')">{{menu.length ? '我的收藏':''}}</div>
      <t-popup placement="bottom-left" overlayInnerClassName="header-userInfo-pop-wrap">
				<template #content>
					<div class="content">
						<div class="top-box">
							<div class="label-text">账号信息</div>
							<div class="flex">
								<span>{{userInfo?.RealName}}</span>
								<span>|</span>
								<span>{{userInfo?.Mobile}}</span>
							</div>
							<div class="business-name">
								<span>{{userInfo?.BusinessName}}</span>
								<span v-if="userInfo?.Position">|</span>
								<span>{{userInfo?.Position}}</span>
							</div>
						</div>
						<!-- <div class="flex my-fav-box" @click="$router.push('/etaChart/favorite')">
							<t-icon name="star" style="font-size:20px"></t-icon>
							<span>我的收藏</span>
							<t-icon class="arrow-right" name="chevron-right-s" style="font-size:20px"></t-icon>
						</div> -->
						<div class="flex my-fav-box" style="color:#D54941" @click="handleLoginOut">
							<t-icon name="logout" style="font-size:20px"></t-icon>
							<span>退出登录</span>
						</div>
					</div>
				</template>
				<div class="userInfo-box">
					<svg-icon name="user_avatar" style="font-size:20px;margin-right:3px"></svg-icon>
					<span>{{userInfo?.RealName}}</span>
					<t-icon name="chevron-down" style="font-size:28px;margin-left:11px"></t-icon>
				</div>
			</t-popup>
    </div>
    <div class="layout-content" :style="dynamicStyle">
      <router-view />
    </div>
  </div>

		<!-- 音频模块 -->
	<AudioBox></AudioBox>
</template>

<style lang="scss">
.header-userInfo-pop-wrap{
	padding: 0;
	width: 300px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	box-shadow: 0px 4px 12px 0px #0000001A;
	overflow: hidden;
	.content{
		.top-box{
			padding: 14px;
			background: linear-gradient(180deg, #7C55FF 0%, #4C64F7 100%);
			color: #fff;
			.label-text{
				font-size: 16px;
				line-height: 22.4px;
			}
			.flex{
				gap: 0 5px;
				margin-top: 5px;
			}
			.business-name > *  {
				padding-right: 10px;
			}
		}
		.my-fav-box{
			border-bottom: 1px solid var(--border-color);
			height: 48px;
			align-items: center;
			padding: 0 14px;
			color: #666666;
			cursor: pointer;
			.arrow-right{
				margin-left: auto;
			}
			span{
				display: inline-block;
				margin-left: 12px;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
.layout-wrap {
  height: 100%;
  padding-top: 70px;
  .header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    height: 70px;
    background: linear-gradient(90deg, #7c54ff 0%, #4b64f7 100%);
    align-items: center;
    padding: 0 20px;
    .logo {
      width: 168px;
			margin-right: 20px;
    }
		.fav-btn{
			cursor: pointer;
			color: #fff;
			margin-left: auto;
		}
		.userInfo-box{
			margin-left: 30px;
			color: #fff;
			display: flex;
			align-items: center;
			cursor: pointer;
		}
  }
  .layout-content {
    padding: 20px;
    min-height: calc(100% - 70px);
  }
}
</style>