RunForge-Frontend/src/App.vue

<template>
  <div id="app">
    <div class="mobile" v-if="mobile">
      <a-result status="warning" title="使用电脑访问页面" class="mid">
        <template #subtitle>
          该网页专为电脑用户打造，使用电脑访问页面可获得最佳体验。您也可继续使用移动设备访问
        </template>

        <template #extra>
          <a-space>
            <a-button type='primary' @click="mobileGoOn">继续访问</a-button>
          </a-space>
        </template>
      </a-result>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import storage from 'store'
import { Modal, Message } from '@arco-design/web-vue'
import { getAppVersion } from '@/api/public'

const mobile = ref(false)

function checkMobile() {
  const isMobileWidth = window.innerWidth <= 768
  const ua = navigator.userAgent.toLowerCase()
  const isMobileUA = /android|iphone|ipad|ipod|windows phone/i.test(ua)

  if (isMobileWidth || isMobileUA) {
    const mobileShow = storage.get('mobileShow')
    if (!mobileShow)
      mobile.value = true
  }
}

function mobileGoOn() {
  mobile.value = false
  storage.set('mobileShow', true)
}

async function GetAppVersion() {
  try {
    const current = import.meta.env.VITE_APP_VERSION
    const res = await getAppVersion()
    if (!res || res.code !== 0 || !res.data)
      return Message.error(`获取版本更新内容失败！${res?.msg ?? ''}`)
    if (res.data.version === current) return
    Modal.info({
      title: '版本更新',
      escToClose: false,
      maskClosable: false,
      width: '300px',
      content: `发现新版本，是否立即刷新页面？\n${res.data?.msg ?? ''}`,
      onBeforeOk: () => {
        window.location.reload()
      }
    })
  } catch (error) {
    Message.error('获取版本更新内容失败')
  }
}

onMounted(() => {
  // checkMobile()
  GetAppVersion()
})

</script>

<style scoped>
.mobile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: white;
}

.mid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>