control/src/App.vue

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

const mqtt = new MqttService()
const store = useStore()
const router = useRouter()
const themeOverrides = Theme

watch(() => store.mqtt_message, (val) => {
  console.log('顶级监听', val)
  if (val.type === 'connect') {
    router.push('/room')
  }
  // mqtt断开连接
  if (val.type === 'disconnect' || val.type === 'leave') {
    router.push('/')
    mqtt.disconnect()
  }
})

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: 1300px;
  min-height: 760px;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
  position: relative;
  border: none;

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