<template>
  <div class="app-root" :class="{ 'app-mobile': isMobile }">
    <router-view />
    <AudioNotifications />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import { isMobile } from './utils/env';
import AudioNotifications from './components/AudioNotifications.vue';

onMounted(() => {
  if (isMobile) {
    document.body.classList.add('is-mobile');
  } else {
    document.body.classList.add('is-pc');
  }
});

onBeforeUnmount(() => {
  document.body.classList.remove('is-mobile');
  document.body.classList.remove('is-pc');
});
</script>

<style>
html,
body,
#app,
.app-root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior-x: none;
}

.app-mobile,
.app-mobile * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.app-mobile input,
.app-mobile textarea,
.app-mobile [contenteditable='true'] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* 移动端对话框样式（t-dialog 会 teleport 到 body 下，此处使用 body.is-mobile 限定作用域） */
body.is-mobile .t-dialog {
  width: 90vw !important;
  max-width: none;
}

body.is-mobile .t-dialog * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.is-mobile .confirm-dialog .t-dialog__footer {
  display: none;
}
</style>
