voiceMate-web/src/layout/index.vue

<script setup>
import HeaderGroup  from './components/HeaderGroup';
import Sidebar from './components/Sidebar'
import TelNoticeBar from './components/TelNoticeBar'
import TelNoticeBox from './components/TelNoticeBox'
import { AppMain } from './components'
import useVoiceStore from "@/store/modules/voice";
import useUserStore from "@/store/modules/user";
import { workbenchApi } from '@/api/voice/workbench';

const useVoice = useVoiceStore();
const useUser = useUserStore();

// window.addEventListener('onunload', function (e) {
//     // 取消事件的默认行为（某些浏览器需要）
//     e.preventDefault(); 

//     e.returnValue = 'Are you sure you want to leave?';

//     alert('请先关闭工作台')
//     return 'Are you sure you want to leave?'; // 某些旧版本的浏览器需要这种写法
// });

onMounted(() => {
  if ( useVoice.isAuthPane ) {
    workbenchApi.getSeatsByUser({ userId: useUser.id }).then(({ data }) => {
      if (!data) return;
      useVoice.HS_CTI_INSTANCE(data.outId);

      const voiceStatus = localStorage.getItem('VOICE_STATUS');

      if ( voiceStatus ) {
        if ( voiceStatus === 'busy' ) {
          setTimeout(() => useVoice.setBusy(), 1000);
        } else {
          setTimeout(() => useVoice.setIdle(), 1000);
        }
        // useVoice.systemState = voiceStatus !== 'busy'
      } else {
        setTimeout(() => {
          try {
            useVoice.setIdle();
          } catch(error) {
            console.log(error);
          }
        }, 3000);
      }
    })
  }
})
</script>

<template>
  <div class="app-wrapper">
    <HeaderGroup></HeaderGroup>
    <div class="main-wrapper">
      <Sidebar class="sidebar-container" />
      <AppMain class="main-container"/>
    </div>
    <TelNoticeBar></TelNoticeBar>
    <TelNoticeBox></TelNoticeBox>
  </div>
</template>

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

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #EFF1F8;
  overflow: hidden;
  
  .main-wrapper {
    display: flex;
    height: calc(100% - 92px);
    padding: 0 20px 20px 0;
    
    .sidebar-container {
      height: 100%;
      flex-shrink: 0;
    }
  }
}

</style>