chore: 新增移动端判断

src/App.vue

-<script lang="ts" setup>
-// import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-// const breakpoints = useBreakpoints(breakpointsTailwind)
-// const isMobile = breakpoints.smaller('md')
-const isMobile = false
+<script setup lang="ts">
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 </script>
 
 <template>
-  <router-view :class="{ 'is-h5': isMobile, 'is-pc': !isMobile }" />
+  <router-view :class="{ 'is-h5': mobile, 'is-pc': !mobile }" />
 </template>

src/composables/useDevice.ts

+export function useDevice() {
+  const navigator = window.navigator
+
+  const userAgent = ref(navigator.userAgent)
+
+  const mobile = computed(() => {
+    return /iphone/i.test(userAgent.value) || (/android/i.test(userAgent.value) && /mobile/i.test(userAgent.value))
+  })
+
+  const wechat = computed(() => {
+    return /micromessenger/i.test(userAgent.value)
+  })
+
+  const alipay = computed(() => {
+    return /alipayclient/i.test(userAgent.value)
+  })
+
+  addEventListener('resize', () => {
+    if (navigator) userAgent.value = navigator.userAgent
+  })
+
+  return { userAgent, mobile, wechat, alipay }
+}