jvs-ppt-ui 0.0.6 → 0.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",

package/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import PptEditor from './components/PptEditor.vue'
-import type { DeckData, PptEditorApi } from './types'
+import type { DeckData, PptEditorApi, UploadResourceContext } from './types'
 
 const editorRef = ref<PptEditorApi | null>(null)
 
@@ -12,20 +12,42 @@ function handleSave(deck: DeckData) {
 function handleReady(api: PptEditorApi) {
   console.log('[JVS-PPT 独立运行模式] 编辑器初始化完成:', api)
 }
+
+/**
+ * 模拟资源上传函数
+ * 覆盖场景：导入 PPTX/JSON、上传图片、视频、音频、剪贴板粘贴、占位符上传、背景上传等
+ */
+async function handleCustomUpload(fileOrBlob: File | Blob, context: UploadResourceContext): Promise<string> {
+  console.log('[模拟自定义上传函数触发] 接收到待上传资源:', {
+    type: context.type,        // 资源类型: 'image' | 'video' | 'audio'
+    source: context.source,    // 触发来源: 'file-upload' | 'pptx-import' | 'json-import' | 'paste' | 'placeholder' | 'background'
+    filename: context.filename,
+    size: `${(fileOrBlob.size / 1024).toFixed(2)} KB`,
+    fileOrBlob
+  })
+
+  // 1. 模拟网络上传请求耗时
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  // 2. 实际业务生产代码范例：
+  // const formData = new FormData()
+  // formData.append('file', fileOrBlob, context.filename || `upload_${Date.now()}`)
+  // formData.append('type', context.type)
+  // const res = await fetch('/api/oss/upload', { method: 'POST', body: formData }).then(r => r.json())
+  // return res.data.url
+
+  // 3. 模拟环境：生成可正常渲染的地址作为模拟的服务器返回 URL
+  const mockServerUrl = URL.createObjectURL(fileOrBlob)
+  console.log(`[模拟上传成功] 已返回服务器文件地址:`, mockServerUrl)
+  return mockServerUrl
+}
 </script>
 
 <template>
-  <PptEditor
-    ref="editorRef"
-    :enable-mcp="true"
-    :enable-ai="true"
-    ai-api-url="/jvs-dam/api/ppt/ai-replace"
-    :enable-material="true"
-    material-tree-api-url="/jvs-dam/api/dam/material/tree"
-    material-page-api-url="/jvs-dam/api/dam/material/page"
-    material-api-url="/jvs-dam/api/dam/material/tree"
-    material-save-api-url="/jvs-dam/api/dam/material/save"
-    @save="handleSave"
-    @ready="handleReady"
-  />
+  <!-- :custom-upload="handleCustomUpload" -->
+  <PptEditor ref="editorRef" :custom-upload="handleCustomUpload" :enable-mcp="true" :enable-ai="true"
+    ai-api-url="/jvs-dam/api/ppt/ai-replace" :enable-material="true"
+    material-tree-api-url="/jvs-dam/api/dam/material/tree" material-page-api-url="/jvs-dam/api/dam/material/page"
+    material-api-url="/jvs-dam/api/dam/material/tree" material-save-api-url="/jvs-dam/api/dam/material/save"
+    @save="handleSave" @ready="handleReady" />
 </template>

package/src/components/CanvasArea.vue

@@ -3604,8 +3604,6 @@ function handleBorderMouseDown(e: MouseEvent, el: any) {
 }
 
 function handleElementDblClick(e: MouseEvent, el: any) {
-  // TODO(debug): 定位“双击元素却新建了文本框”的拦截层，问题定位后移除
-  console.info('[元素dblclick调试]', el?.id, el?.type)
   let target = el
   if (selectedElementIds.value.length > 0 && !selectedElementIds.value.includes(el.id)) {
     const activeSelectedEl = findSelectedElementUnderPoint(e.clientX, e.clientY)

package/src/components/Header.vue

@@ -4188,7 +4188,10 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             const borderGrad = el.border?.gradient || el.outline?.gradient
             const outlineGrad = borderGrad ? normalizeGradientConfig(borderGrad) : undefined
 
-            const pattern: string | undefined = el.fill?.type === 'image' ? el.fill.value.base64 : undefined
+            const fillVal = el.fill?.type === 'image' ? el.fill.value : null
+            const pattern: string | undefined = fillVal
+              ? (fillVal.blob || fillVal.base64 || fillVal.src || fillVal.url || (typeof fillVal === 'string' ? fillVal : undefined))
+              : undefined
 
             const fill = typeof el.fill === 'string'
               ? (el.fill.trim() === '' ? 'none' : el.fill)
@@ -4254,6 +4257,9 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             element.style.flipH = flipH
             element.style.flipV = flipV
             element.style.fill = fill
+            if (pattern) {
+              element.style.pattern = pattern
+            }
             element.style.borderColor = el.borderColor || (el.outline?.color || 'transparent')
             element.style.borderWidth = el.borderWidth !== undefined ? `${+(el.borderWidth * ratio).toFixed(2)}px` : (el.outline?.width !== undefined ? `${el.outline.width}px` : '0px')
             element.style.borderStyle = el.borderType || (el.outline?.style || 'solid')

package/src/components/PresentationGroupChild.vue

@@ -165,7 +165,7 @@ function getElementPattern(el: any): string | undefined {
         if (typeof val === 'string') {
           pattern = val
         } else if (val && typeof val === 'object') {
-          pattern = val.base64 || val.ref || val.src || val.url || ''
+          pattern = val.blob || val.base64 || val.src || val.url || ''
         }
       }
     }

package/src/components/PresentationMode.vue

@@ -553,7 +553,7 @@ function getElementPattern(el: any): string | undefined {
         if (typeof val === 'string') {
           pattern = val
         } else if (val && typeof val === 'object') {
-          pattern = val.base64 || val.ref || val.src || val.url || ''
+          pattern = val.blob || val.base64 || val.src || val.url || ''
         }
       }
     }

package/src/components/SidebarLeft.vue

@@ -1499,7 +1499,7 @@ function getElementPattern(el: any): string | undefined {
   if (el.pattern || el.style?.pattern) return el.pattern || el.style?.pattern
   const rawFill = (el.style && el.style.fill !== undefined) ? el.style.fill : el.fill
   if (rawFill && typeof rawFill === 'object' && (rawFill.type === 'image' || rawFill.type === 'pattern')) {
-    return rawFill.value?.src || rawFill.value?.url || rawFill.value
+    return rawFill.value?.blob || rawFill.value?.src || rawFill.value?.base64 || rawFill.value?.url || (typeof rawFill.value === 'string' ? rawFill.value : undefined)
   }
   return undefined
 }

package/src/components/Toolbar.vue

@@ -346,8 +346,9 @@ async function handleVideoFileChange(e: Event) {
         })
       })
       if (url) {
-        mediaUrl.value = url
-        notify('已选择本地视频文件')
+        addElement('video', url)
+        mediaPopoverVisible.value = false
+        notify('已成功添加视频')
       }
     } catch (err: any) {
       console.error(err)
@@ -370,8 +371,9 @@ async function handleAudioFileChange(e: Event) {
         })
       })
       if (url) {
-        mediaUrl.value = url
-        notify('已选择本地音频文件')
+        addElement('audio', url)
+        mediaPopoverVisible.value = false
+        notify('已成功添加音频')
       }
     } catch (err: any) {
       console.error(err)

package/src/composables/useSlides.ts

@@ -5269,7 +5269,7 @@ function extractPatternFromFill(el: any): string | undefined {
         if (typeof val === 'string') {
           pattern = val
         } else if (val && typeof val === 'object') {
-          pattern = val.base64 || val.ref || val.src || val.url || ''
+          pattern = val.blob || val.base64 || val.src || val.url || ''
         }
       }
     }
@@ -8058,9 +8058,13 @@ async function uploadMediaResourcesInSlides(deckOrSlides: any): Promise<void> {
         const remote = await uploadMediaUrl(targetSrc, 'image', 'svg')
         el.src = remote
       }
-    } else if (el.type === 'shape' && el.pattern && shouldUpload(el.pattern)) {
-      const remote = await uploadMediaUrl(el.pattern, 'image', 'png')
-      el.pattern = remote
+    } else if (el.type === 'shape') {
+      const targetPattern = el.pattern || el.style?.pattern || (el.fill?.type === 'image' ? (el.fill.value?.blob || el.fill.value?.base64 || el.fill.value?.src) : undefined)
+      if (targetPattern && shouldUpload(targetPattern)) {
+        const remote = await uploadMediaUrl(targetPattern, 'image', 'png')
+        el.pattern = remote
+        if (el.style) el.style.pattern = remote
+      }
     }
   }
 

package/src/utils/canvas/elementStyles.ts

@@ -186,7 +186,7 @@ export function getElementPattern(el: any): string | undefined {
         if (typeof val === 'string') {
           pattern = val
         } else if (val && typeof val === 'object') {
-          pattern = val.base64 || val.ref || val.src || val.url || ''
+          pattern = val.blob || val.base64 || val.src || val.url || ''
         }
       }
     }