menduner-uniapp/layout/index.vue

<!--  -->
<template>
  <view class="page-app" >
    <view class="page-main">
      <view class="page-body">
        <!-- 页面内容插槽 -->
        <slot />
      </view>
    </view>
    
    <view class="page-modal">
      <!-- 全局授权弹窗 -->
      <authModal />
      <!-- 全局分享弹窗 -->
      <!-- <s-share-modal :shareInfo="shareInfo" /> -->
      <!-- 全局快捷入口 -->
      <!-- <s-menu-tools /> -->
    </view>
  </view>
</template>

<script setup>
import authModal from './components/auth-modal.vue'
import { useIM } from '@/hooks/useIM'
import { watch } from 'vue'
import { userStore } from '@/store/user'
const { resetConfig } = useIM()
const useUserStore = userStore()
watch(() => useUserStore.accountInfo.userId, (newVal, oldVal) => {
  if (useUserStore.refreshToken) {
		// 监听登录状态
    resetConfig()
	}
})

</script>
<style lang="scss" scoped>
.page-app {
  position: relative;
  // color: var(--ui-TC);
  // background-color: var(--ui-BG-1) !important;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100vh;

  .page-main {
    position: absolute;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    .page-body {
      width: 100%;
      position: relative;
      z-index: 1;
      flex: 1;
    }
  }
}
</style>