feat: 支持粘贴/拖入音视频、.pptx/.pptist文件

pipipi-pikachu · pipipi-pikachu · commit 8f991c932bd9 · 2025-11-30T12:36:41.000+08:00
diff --git a/src/configs/mime.ts b/src/configs/mime.ts
@@ -0,0 +1,26 @@
+export const MIME_MAP: { [key: string]: string } = {
+
+  // 音频类型
+  'audio/aac': 'aac',
+  'audio/mpeg': 'mp3',
+  'audio/ogg': 'oga',
+  'audio/wav': 'wav',
+  'audio/webm': 'weba',
+  'audio/flac': 'flac',
+  'audio/mp4': 'm4a',
+  'audio/x-aiff': 'aif',
+  'audio/x-ms-wma': 'wma',
+  'audio/midi': 'mid',
+
+  // 视频类型
+  'video/mp4': 'mp4',
+  'video/mpeg': 'mpeg',
+  'video/ogg': 'ogv',
+  'video/webm': 'webm',
+  'video/x-msvideo': 'avi',
+  'video/quicktime': 'mov',
+  'video/x-ms-wmv': 'wmv',
+  'video/x-flv': 'flv',
+  'video/3gpp': '3gp',
+  'video/3gpp2': '3g2'
+}
diff --git a/src/hooks/useImport.ts b/src/hooks/useImport.ts
@@ -42,7 +42,7 @@ export default () => {
   const exporting = ref(false)
 
   // 导入JSON文件
-  const importJSON = (files: FileList, cover = false) => {
+  const importJSON = (files: FileList | File[], cover = false) => {
     const file = files[0]
 
     const reader = new FileReader()
@@ -68,7 +68,7 @@ export default () => {
   }
 
   // 导入pptist文件
-  const importSpecificFile = (files: FileList, cover = false) => {
+  const importSpecificFile = (files: FileList | File[], cover = false) => {
     const file = files[0]
 
     const reader = new FileReader()
@@ -246,7 +246,7 @@ export default () => {
   }
 
   // 导入PPTX文件
-  const importPPTXFile = (files: FileList, options?: { cover?: boolean; fixedViewport?: boolean }) => {
+  const importPPTXFile = (files: FileList | File[], options?: { cover?: boolean; fixedViewport?: boolean }) => {
     const defaultOptions = {
       cover: false,
       fixedViewport: false, 
diff --git a/src/hooks/usePasteDataTransfer.ts b/src/hooks/usePasteDataTransfer.ts
@@ -0,0 +1,75 @@
+import { MIME_MAP } from '@/configs/mime'
+import { getImageDataURL } from '@/utils/image'
+import useCreateElement from './useCreateElement'
+import useImport from './useImport'
+
+export default () => {
+  const { createImageElement, createVideoElement, createAudioElement } = useCreateElement()
+  const { importSpecificFile, importPPTXFile } = useImport()
+
+  const pasteDataTransfer = (dataTransfer: DataTransfer) => {
+    const dataItems = dataTransfer.items
+    const dataTransferFirstItem = dataItems[0]
+
+    // 检查事件对象中是否存在有效文件，存在则插入对应数据，否则可继续检查是否存在文字
+    let isFile = false
+
+    for (const item of dataItems) {
+      if (item.kind === 'file') {
+        if (item.type.indexOf('image') !== -1) {
+          const imageFile = item.getAsFile()
+          if (imageFile) {
+            getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
+            isFile = true
+          }
+        }
+        else if (item.type.indexOf('video') !== -1) {
+          const videoFile = item.getAsFile()
+          if (videoFile) {
+            const videoURL = URL.createObjectURL(videoFile)
+            const ext = MIME_MAP[videoFile.type] || ''
+            createVideoElement(videoURL, ext)
+            isFile = true
+          }
+        }
+        else if (item.type.indexOf('audio') !== -1) {
+          const audioFile = item.getAsFile()
+          if (audioFile) {
+            const audioURL = URL.createObjectURL(audioFile)
+            const ext = MIME_MAP[audioFile.type] || ''
+            createAudioElement(audioURL, ext)
+            isFile = true
+          }
+        }
+      }
+    }
+
+    if (!isFile && dataTransferFirstItem && dataTransferFirstItem.kind === 'file') {
+      if (!isFile && dataTransferFirstItem.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
+        const pptxFile = dataTransferFirstItem.getAsFile()
+        if (pptxFile) {
+          importPPTXFile([pptxFile])
+          isFile = true
+        }
+      }
+      else if (!isFile) {
+        const unknownFile = dataTransferFirstItem.getAsFile()
+
+        if (unknownFile && unknownFile.name) {
+          const ext = unknownFile.name.split('.').pop() || ''
+
+          if (ext === 'pptist') {
+            importSpecificFile([unknownFile])
+            isFile = true
+          }
+        }
+      }
+    }
+
+    return { isFile, dataTransferFirstItem }
+  }
+
+  return {
+    pasteDataTransfer,
+  }
+}
diff --git a/src/hooks/usePasteEvent.ts b/src/hooks/usePasteEvent.ts
@@ -1,20 +1,14 @@
 import { onMounted, onUnmounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
-import { getImageDataURL } from '@/utils/image'
 import usePasteTextClipboardData from './usePasteTextClipboardData'
-import useCreateElement from './useCreateElement'
+import usePasteDataTransfer from './usePasteDataTransfer'
 
 export default () => {
   const { editorAreaFocus, thumbnailsFocus, disableHotkeys } = storeToRefs(useMainStore())
 
   const { pasteTextClipboardData } = usePasteTextClipboardData()
-  const { createImageElement } = useCreateElement()
-
-  // 粘贴图片到幻灯片元素
-  const pasteImageFile = (imageFile: File) => {
-    getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
-  }
+  const { pasteDataTransfer } = usePasteDataTransfer()
 
   /**
    * 粘贴事件监听
@@ -26,26 +20,12 @@ export default () => {
 
     if (!e.clipboardData) return
 
-    const clipboardDataItems = e.clipboardData.items
-    const clipboardDataFirstItem = clipboardDataItems[0]
-
-    if (!clipboardDataFirstItem) return
-
-    // 如果剪贴板内有图片，优先尝试读取图片
-    let isImage = false
-    for (const item of clipboardDataItems) {
-      if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
-        const imageFile = item.getAsFile()
-        if (imageFile) pasteImageFile(imageFile)
-        isImage = true
-      }
-    }
-
-    if (isImage) return
+    const { isFile, dataTransferFirstItem } = pasteDataTransfer(e.clipboardData)
+    if (isFile) return
     
-    // 如果剪贴板内没有图片，但有文字内容，尝试解析文字内容
-    if (clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
-      clipboardDataFirstItem.getAsString(text => pasteTextClipboardData(text))
+    // 如果剪贴板内不存在有效文件，但有文字内容，尝试解析文字内容
+    if (dataTransferFirstItem && dataTransferFirstItem.kind === 'string' && dataTransferFirstItem.type === 'text/plain') {
+      dataTransferFirstItem.getAsString(text => pasteTextClipboardData(text))
     }
   }
 
diff --git a/src/views/Editor/Canvas/hooks/useDrop.ts b/src/views/Editor/Canvas/hooks/useDrop.ts
@@ -1,37 +1,26 @@
 import { onMounted, onUnmounted, type ShallowRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
-import { getImageDataURL } from '@/utils/image'
 import { parseText2Paragraphs } from '@/utils/textParser'
 import useCreateElement from '@/hooks/useCreateElement'
+import usePasteDataTransfer from '@/hooks/usePasteDataTransfer'
+
 
 export default (elementRef: ShallowRef<HTMLElement | null>) => {
   const { disableHotkeys } = storeToRefs(useMainStore())
 
-  const { createImageElement, createTextElement } = useCreateElement()
+  const { createTextElement } = useCreateElement()
+
+  const { pasteDataTransfer } = usePasteDataTransfer()
 
-  // 拖拽元素到画布中
+  // 拖拽元素/页面到画布中
   const handleDrop = (e: DragEvent) => {
     if (!e.dataTransfer || e.dataTransfer.items.length === 0) return
 
-    const dataItems = e.dataTransfer.items
-    const dataTransferFirstItem = dataItems[0]
-
-    // 检查事件对象中是否存在图片，存在则插入图片，否则继续检查是否存在文字，存在则插入文字
-    let isImage = false
-    for (const item of dataItems) {
-      if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
-        const imageFile = item.getAsFile()
-        if (imageFile) {
-          getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
-        }
-        isImage = true
-      }
-    }
-
-    if (isImage) return
+    const { isFile, dataTransferFirstItem } = pasteDataTransfer(e.dataTransfer)
+    if (isFile) return
     
-    if (dataTransferFirstItem.kind === 'string' && dataTransferFirstItem.type === 'text/plain') {
+    if (dataTransferFirstItem && dataTransferFirstItem.kind === 'string' && dataTransferFirstItem.type === 'text/plain') {
       dataTransferFirstItem.getAsString(text => {
         if (disableHotkeys.value) return
         const string = parseText2Paragraphs(text)
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
@@ -110,7 +110,7 @@ import { KEYS } from '@/configs/hotkey'
 
 import useViewportSize from './hooks/useViewportSize'
 import useMouseSelection from './hooks/useMouseSelection'
-import useDropImageOrText from './hooks/useDropImageOrText'
+import useDrop from './hooks/useDrop'
 import useRotateElement from './hooks/useRotateElement'
 import useScaleElement from './hooks/useScaleElement'
 import useSelectAndMoveElement from './hooks/useSelectElement'
@@ -175,7 +175,7 @@ watchEffect(setLocalElementList)
 const canvasRef = useTemplateRef<HTMLElement>('canvasRef')
 const { dragViewport, viewportStyles } = useViewportSize(canvasRef)
 
-useDropImageOrText(canvasRef)
+useDrop(canvasRef)
 
 const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
 
diff --git a/src/views/Editor/CanvasTool/MediaInput.vue b/src/views/Editor/CanvasTool/MediaInput.vue
@@ -37,38 +37,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import message from '@/utils/message'
+import { MIME_MAP } from '@/configs/mime'
 import Tabs from '@/components/Tabs.vue'
 import Input from '@/components/Input.vue'
 import Button from '@/components/Button.vue'
 import FileInput from '@/components/FileInput.vue'
 
-const MIME_MAP: { [key: string]: string } = {
-
-  // 音频类型
-  'audio/aac': 'aac',
-  'audio/mpeg': 'mp3',
-  'audio/ogg': 'oga',
-  'audio/wav': 'wav',
-  'audio/webm': 'weba',
-  'audio/flac': 'flac',
-  'audio/mp4': 'm4a',
-  'audio/x-aiff': 'aif',
-  'audio/x-ms-wma': 'wma',
-  'audio/midi': 'mid',
-
-  // 视频类型
-  'video/mp4': 'mp4',
-  'video/mpeg': 'mpeg',
-  'video/ogg': 'ogv',
-  'video/webm': 'webm',
-  'video/x-msvideo': 'avi',
-  'video/quicktime': 'mov',
-  'video/x-ms-wmv': 'wmv',
-  'video/x-flv': 'flv',
-  'video/3gpp': '3gp',
-  'video/3gpp2': '3g2'
-}
-
 type TypeKey = 'video' | 'audio'
 interface TabItem {
   key: TypeKey
