feat: 添加移动端预览提示页面

src/App.vue

@@ -1,21 +1,25 @@
 <template>
-  <Editor v-if="!screening" />
-  <Screen v-else />
+  <Screen v-if="screening" />
+  <Editor v-else-if="isPC" />
+  <Mobile v-else />
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
+import { isPC } from './utils/common'
 
 import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
+import Mobile from './views/Mobile.vue'
 
 export default defineComponent({
   name: 'app',
   components: {
     Editor,
     Screen,
+    Mobile,
   },
   setup() {
     const mainStore = useMainStore()
@@ -33,6 +37,7 @@ export default defineComponent({
 
     return {
       screening,
+      isPC: isPC(),
     }
   },
 })

src/main.ts

@@ -32,6 +32,7 @@ import {
   Checkbox,
   Drawer,
   Spin,
+  Alert,
 } from 'ant-design-vue'
 
 const app = createApp(App)
@@ -60,6 +61,7 @@ app.component('MenuItem', Menu.Item)
 app.component('Checkbox', Checkbox)
 app.component('Drawer', Drawer)
 app.component('Spin', Spin)
+app.component('Alert', Alert)
 
 app.use(Icon)
 app.use(Component)

src/utils/common.ts

@@ -22,4 +22,11 @@ export const createRandomCode = (len = 6) => {
  */
 export const fillDigit = (digit: number, len: number) => {
   return padStart('' + digit, len, '0')
+}
+
+/**
+ * 判断设备
+ */
+export const isPC = () => {
+  return !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|Mobile|BlackBerry|Symbian|Windows Phone)/i)
 }

src/views/Mobile.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="mobile" ref="mobileRef">
+    <Alert
+      class="tip"
+      message="注意"
+      description="移动设备下仅支持预览，请在PC上进行编辑"
+      type="warning"
+      closable
+      show-icon
+    />
+    <div class="thumbnail-list">
+      <div class="thumbnail-item" v-for="(slide, index) in slides" :key="slide.id">
+        <ThumbnailSlide 
+          :slide="slide" 
+          :size="slideWidth" 
+          :visible="index < slidesLoadLimit" 
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSlidesStore } from '@/store'
+import useScreening from '@/hooks/useScreening'
+import useLoadSlides from '@/hooks/useLoadSlides'
+
+import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+
+export default defineComponent({
+  name: 'thumbnails',
+  components: {
+    ThumbnailSlide,
+  },
+  setup() {
+    const { slides } = storeToRefs(useSlidesStore())
+
+    const { slidesLoadLimit } = useLoadSlides()
+    const { enterScreening } = useScreening()
+
+    const mobileRef = ref<HTMLElement>()
+    const slideWidth = ref(0)
+
+    onMounted(() => {
+      if (!mobileRef.value) return
+      slideWidth.value = mobileRef.value.clientWidth - 10
+    })
+
+    return {
+      slides,
+      slidesLoadLimit,
+      mobileRef,
+      slideWidth,
+      enterScreening,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.mobile {
+  height: 100%;
+  overflow: auto;
+  background-color: #f9f9f9;
+}
+.tip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
+.thumbnail-list {
+  padding: 10px;
+}
+.thumbnail-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+
+  & + .thumbnail-item {
+    margin-top: 10px;
+  }
+}
+</style>