广告插入图优化

src/components/CloudDisk/index.vue

@@ -62,7 +62,8 @@
                     
                     <template v-for="(item,index) in dataList">
                         <div class="CloudDisk-R-Box cursor-pointer" 
-                        :class="[ImgId==item.DetailsId?'active':'']" @click="setImg(item)">
+                        :class="[ImgId==item.DetailsId?'active':'']" @click="setImg(item)"
+                        v-right-click="handleRightClick">
                             <div class="CloudDisk-R-Img">
                                 <el-image :src="item.FilePath" style="width: 80px; height: 80px;"
                                 fit="cover"/>
@@ -183,6 +184,10 @@ watch(() => props.active, () => {
 watch(() => props.show, () => {
     if(!props.show) ImgId.value = ''
 })
+
+const handleRightClick = (event:any,item:any) => {
+    console.log('右键被点击', event);
+}
 const setImg = (item:any) => {
     ImgId.value = item.DetailsId
     emit('getImg',item.FilePath)

src/hooks/useCreateElement.ts

@@ -51,10 +51,9 @@ export default () => {
    * 创建图片元素
    * @param src 图片地址
    */
-  const createImageElement = (src: string) => {
+  const createImageElement = (src: string,TemplateType?:Number) => {
     getImageSize(src).then(({ width, height }) => {
       const scale = height / width
-  
       if (scale < viewportRatio.value && width > VIEWPORT_SIZE.Value) {
         width = VIEWPORT_SIZE.Value
         height = width * scale
@@ -63,15 +62,20 @@ export default () => {
         height = VIEWPORT_SIZE.Value * viewportRatio.value
         width = height / scale
       }
-
+      let left = 0
+      let top = 0
+      if(!TemplateType){
+        left = (VIEWPORT_SIZE.Value - width) / 2
+        top = (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2
+      }
       createElement({
         type: 'image',
         id: nanoid(10),
         src,
         width,
         height,
-        left: (VIEWPORT_SIZE.Value - width) / 2,
-        top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
+        left: left,
+        top: top,
         fixedRatio: true,
         rotate: 0,
       })

src/views/Editor/CanvasTool/UploadPicture.vue

@@ -98,7 +98,7 @@ import useCreateElement from '@/hooks/useCreateElement'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import { getImageDataURL } from '@/utils/image'
 import { useMainStore, useSlidesStore, useScreenStore, useUserStore } from '@/store'
-import { injectKeyDataSource } from '@/types/injectKey'
+import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
 import ConfigService from '@/services/ConfigService'
 import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import FileService from '@/services/FileService'
@@ -160,6 +160,9 @@ const { handleElement, handleElementId } = storeToRefs(mainStore)
 const handleImageElement = handleElement as Ref<PPTImageElement>
 const { imgPoolVisible } = storeToRefs(useScreenStore())
 
+const searchData = ref({} as any)
+searchData.value = inject(injectKeyTemplate)
+
 watch(() => imgPoolVisible.value, () => {
     if(imgPoolVisible.value) showVisible.value = true
 })
@@ -231,7 +234,7 @@ const setImgs = async () => {
         
     }
     if(imgType.value==1){
-        createImageElement(url)
+        createImageElement(url,searchData.value.TemplateType)
         close()
     }
     if(imgType.value==2){