From 6650f0d2dd9633070e445e86f511b7212e9d71f3 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 16 Jan 2022 14:52:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=A2=84=E8=A7=88=E6=8F=90=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue          |  9 ++++-
 src/main.ts          |  2 +
 src/utils/common.ts  |  7 ++++
 src/views/Mobile.vue | 88 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 src/views/Mobile.vue

diff --git a/src/App.vue b/src/App.vue
index 26299aed..1fb90f71 100644
--- a/src/App.vue
+++ b/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(),
     }
   },
 })
diff --git a/src/main.ts b/src/main.ts
index 7e0998f0..39ccfe5a 100644
--- a/src/main.ts
+++ b/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)
diff --git a/src/utils/common.ts b/src/utils/common.ts
index ec1affae..078d4482 100644
--- a/src/utils/common.ts
+++ b/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)
 }
\ No newline at end of file
diff --git a/src/views/Mobile.vue b/src/views/Mobile.vue
new file mode 100644
index 00000000..f0bce10d
--- /dev/null
+++ b/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>
\ No newline at end of file