feat: file-handling API test

src/App.vue

@@ -10,6 +10,7 @@ import { storeToRefs } from 'pinia'
 import { useScreenStore, useMainStore, useSnapshotStore } from '@/store'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
 import { isPC } from './utils/common'
+import useExport from './hooks/useExport'
 
 import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
@@ -35,6 +36,18 @@ export default defineComponent({
     onMounted(() => {
       snapshotStore.initSnapshotDatabase()
       mainStore.setAvailableFonts()
+
+      const { importSpecificFile } = useExport()
+
+      if ('launchQueue' in window) {
+        /* eslint-disable-next-line */
+        (window as any).launchQueue.setConsumer(async (launchParams: any) => {
+          if (launchParams.files && launchParams.files.length) {
+            const files: File[] = launchParams.files
+            importSpecificFile(files, true)
+          }
+        })
+      }
     })
 
     // 应用注销时向 localStorage 中记录下本次 indexedDB 的数据库ID，用于之后清除数据库

src/hooks/useExport.ts

@@ -22,7 +22,8 @@ interface ExportImageConfig {
 }
 
 export default () => {
-  const { slides, theme, viewportRatio } = storeToRefs(useSlidesStore())
+  const slidesStore = useSlidesStore()
+  const { slides, theme, viewportRatio } = storeToRefs(slidesStore)
 
   const { addSlidesFromData } = useAddSlidesOrElements()
 
@@ -61,14 +62,15 @@ export default () => {
   }
   
   // 导入pptist文件
-  const importSpecificFile = (files: File[]) => {
+  const importSpecificFile = (files: File[], cover = false) => {
     const file = files[0]
 
     const reader = new FileReader()
     reader.addEventListener('load', () => {
       try {
         const slides = JSON.parse(decrypt(reader.result as string))
-        addSlidesFromData(slides)
+        if (cover) slidesStore.setSlides(slides)
+        else addSlidesFromData(slides)
       }
       catch {
         message.error('无法正确读取 / 解析该文件')

src/views/Editor/EditorHeader/index.vue

@@ -10,6 +10,7 @@
             </FileInput>
             <MenuItem @click="setDialogForExport('pptx')">导出 PPTX</MenuItem>
             <MenuItem @click="setDialogForExport('image')">导出图片</MenuItem>
+            <MenuItem @click="setDialogForExport('pptist')">导出 .pptist 文件</MenuItem>
             <MenuItem @click="setDialogForExport('json')">导出 JSON</MenuItem>
             <MenuItem @click="setDialogForExport('pdf')">打印 / 导出 PDF</MenuItem>
           </Menu>

vue.config.js

@@ -67,6 +67,14 @@ module.exports = {
         type: 'image/png',
         purpose: 'maskable'
       }],
+      file_handlers: [
+        {
+          action: '/',
+          accept: {
+            '*': ['.pptist'],
+          }
+        }
+      ],
       start_url: '.',
       display: 'standalone',
       background_color: '#000000',