ppt编辑与预览

src/hooks/useScreening.ts

@@ -1,5 +1,5 @@
-import { useScreenStore, useSlidesStore } from '@/store'
-import { enterFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen'
+import { useScreenStore, useSlidesStore } from "@/store"
+import { enterFullscreen, exitFullscreen, isFullscreen } from "@/utils/fullscreen"
 
 export default () => {
   const screenStore = useScreenStore()
@@ -26,6 +26,6 @@ export default () => {
   return {
     enterScreening,
     enterScreeningFromStart,
-    exitScreening,
+    exitScreening
   }
-}
+}

src/router/routers.ts

@@ -12,6 +12,11 @@ export const constRoutes: Array<RouteRecordRaw> = [
     component: () => import("@/views/pptEditor")
   },
   {
+    path: "/pptScreen",
+    name: "pptScreen",
+    component: () => import("@/views/pptScreen")
+  },
+  {
     path: "/login",
     name: "login",
     component: () => import("@/viewsframe/login")

src/views/pptEditor/pptEditor.vue

@@ -1,18 +1,23 @@
 <template>
-  <div class="pptEditor"><Editor /></div>
+  <div class="pptEditor">
+    <Screen v-if="screening" />
+    <Editor v-else />
+  </div>
 </template>
 
 <script setup lang="ts">
 import Editor from "../Editor/index.vue"
+import Screen from "../Screen/index.vue"
 import { onMounted } from "vue"
 import { storeToRefs } from "pinia"
-import { useMainStore, useSnapshotStore } from "@/store"
+import { useScreenStore, useMainStore, useSnapshotStore } from "@/store"
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from "@/configs/storage"
 import { deleteDiscardedDB } from "@/utils/database"
 
 const mainStore = useMainStore()
 const snapshotStore = useSnapshotStore()
 const { databaseId } = storeToRefs(mainStore)
+const { screening } = storeToRefs(useScreenStore())
 
 if (import.meta.env.MODE !== "development") {
   window.onbeforeunload = () => false

src/views/pptScreen/index.ts

@@ -0,0 +1,2 @@
+import pptScreen from "./pptScreen.vue"
+export default pptScreen

src/views/pptScreen/pptScreen.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="pptScreen">
+    <Screen />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Screen from "../Screen/index.vue"
+</script>
+
+<style lang="scss" scoped>
+.pptScreen {
+  width: 100%;
+  height: 100%;
+}
+</style>