control/src/App.vue

<template>
  <loading v-if="show" />
  <n-config-provider
    preflight-style-disabled
    inline-theme-disabled
    :theme-overrides="themeOverrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <n-notification-provider>
      <router-view />
      <global-notif />
    </n-notification-provider>
  </n-config-provider>
</template>
<script setup lang='ts'>
import {
  computed, onMounted, provide, watch
} from 'vue'
import { zhCN, dateZhCN } from 'naive-ui'
import { useRouter } from 'vue-router'
import Theme from '@/assets/naive-theme'
import loading from '@/components/loading.vue'
import MqttService from '@/services/mqtt.service'
import GlobalNotif from '@/components/notifaiction.vue'
import useStore from '@/store/index'
import LogiService from '@/services/logi.service'

const mqtt = new MqttService()
const logi = new LogiService()
const store = useStore()
const router = useRouter()
const themeOverrides = Theme
const show = computed(() => store.loading)

watch(() => store.mqtt_message, (val) => {
  if (val.type === 'MqttConnect') {
    store.setLoading(true)
    router.push('/room')
  }
  if (val.type === 'WebRtcConnected') {
    store.setLoading(false)
    store.setRtcConnected(true)
  }
  // mqtt ERROR
  if (store.errorDic[val.type]) {
    store.setLoading(false)
    store.setRtcConnected(false)
    mqtt.disconnect()
    router.push('/')
  }
})

onMounted(() => logi.init())

provide('MQTT', mqtt)

</script>
<style lang='scss'>
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

video,
#app,
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 760px;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  position: relative;
  border: none;

  &>div {
    width: 100%;
    height: 100%;
  }
}
</style>