系统资料替换图

src/utils/clipboard.ts

@@ -27,6 +27,26 @@ export const copyText = (text: string) => {
   })
 }
 
+/**
+ * 复制图到剪贴板
+ * @param image 图内容 png有效
+ */
+ export const copyImage = async (image: string) => {
+  try {
+    const imageSrc = image; 
+    const response = await fetch(imageSrc);
+    const blob = await response.blob();
+    await navigator.clipboard.write([
+        new ClipboardItem({
+          [blob.type]: blob
+        })
+    ]);
+      return 'success'
+  } catch (error) {
+      return 'info'
+  }
+ }
+
 export const replaceText = (text:string,content:string,method:'R'|'I') =>{
   const fakeElement = document.createElement('div')
   fakeElement.innerHTML = text

src/views/components/source/SourceDetail.vue

@@ -13,23 +13,21 @@
         <el-scrollbar  max-height="50vh">
             <div class="item-poi-img q-mt-md" v-if="data.ImgArray && data.ImgArray.length > 0">
                 <div class="container row">
-                    <el-image class="col full-height" :preview-teleported="true" :src="data.ImgArray[0]"
-                        :initial-index="0" :preview-src-list="data.ImgArray" fit="cover" />
+                    <el-image class="col full-height" :preview-teleported="true" :src="data.ImgArray[0]" fit="cover" @click="setImages(0)" />
                     <div style="width: 60%;" class="q-ml-sm row" v-if="data.ImgArray.length > 1">
                         <div class="col column">
-                            <el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[1]"
-                                :initial-index="1" :preview-src-list="data.ImgArray" fit="cover" />
+                            <el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[1]" fit="cover" @click="setImages(1)" /> 
                             <el-image v-if="data.ImgArray.length > 2" :preview-teleported="true"
-                                class="col full-width q-mt-sm" :src="data.ImgArray[2]" :initial-index="2"
-                                :preview-src-list="data.ImgArray" fit="cover" />
+                            class="col full-width q-mt-sm" :src="data.ImgArray[2]" fit="cover" @click="setImages(2)" />     
+
                         </div>
                         <div class="col column q-ml-sm" v-if="data.ImgArray.length > 3">
-                            <el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[3]"
-                                :initial-index="3" :preview-src-list="data.ImgArray" fit="cover" />
+                            <el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[3]" fit="cover" @click="setImages(3)" />
+
                             <div class="col full-width q-mt-sm last-img" v-if="data.ImgArray.length > 4">
                                 <el-image class="col full-height" v-if="data.ImgArray.length > 4"
-                                    :preview-teleported="true" :src="data.ImgArray[4]" :initial-index="4"
-                                    :preview-src-list="data.ImgArray" fit="cover" />
+                                    :preview-teleported="true" :src="data.ImgArray[4]" fit="cover" @click="setImages(4)" />
+                                
                                 <div class="content column items-center flex-center text-white"
                                     style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);"
                                     v-if="data.ImgArray.length > 5">
@@ -82,11 +80,39 @@
         </el-scrollbar>
 
     </div>
+    <template v-if="isViewerShow">
+        <image-opera 
+        @handleCopyImage="handleCopyImage"
+        @handleInsert="handleInsert"
+        @handleReplace="handleReplace"/>
+        <el-image-viewer
+        @close="() => { isViewerShow = false }" 
+        :initial-index="currentImg"
+        :url-list="data.ImgArray" 
+        :onSwitch="switchImage"/>
+    </template>
+    
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue"
+import { ref, watch, inject } from "vue"
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import useCreateElement from '@/hooks/useCreateElement'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import { injectKeyDataSource } from '@/types/injectKey'
+import FileService from '@/services/FileService'
+import type { PPTImageElement } from '@/types/slides'
+import { copyImage, replaceText } from "@/utils/clipboard";
 import TextOpera from './TextOpera.vue'
+import ImageOpera from './ImageOpera.vue'
+
+const { createImageElement } = useCreateElement()
+const mainStore = useMainStore()
+const { handleElement, handleElementId } = storeToRefs(mainStore)
+const slidesStore = useSlidesStore()
+const { addHistorySnapshot } = useHistorySnapshot()
+const handleImageElement = handleElement as Ref<PPTImageElement>
 
 const emit = defineEmits<{
     (event: 'close'): void
@@ -100,6 +126,12 @@ const props = defineProps({
 })
 
 const data = ref<any>(props.itemInfo)
+const isViewerShow = ref(false)
+const currentImg = ref(0)
+const queryObj = ref({} as any)
+queryObj.value = inject(injectKeyDataSource).queryObj
+const propsDatas = ref<any>({})
+
 if(data.value.ImgArray){
     for (let i = 0; i < data.value.ImgArray.length; i++) {
         const x = data.value.ImgArray[i];
@@ -108,7 +140,6 @@ if(data.value.ImgArray){
         }
     }
 }
-console.log(data.value.ImgArray)
 const platforms = ref<{ id: number, name: string }[]>([
     { id: 2, name: "ERP" },
     { id: 1, name: "第三方" }
@@ -120,6 +151,63 @@ const allTypes = ref<{ id: number, name: string }[]>([
     { id: 3, name: "景点" }
 ])
 
+const switchImage = (index:number) => {
+    currentImg.value = index
+}
+const handleCopyImage = async () =>{
+    const image = data.value.ImgArray[currentImg.value]; // 替换为您要复制的图片的URL
+    const response = await copyImage(image);
+    if(response=='success')ElMessage({ message: '操作成功', type: 'success' })
+    else ElMessage({ message: '操作失败', type: 'info' })
+}
+
+const handleInsert = () =>{
+    const url = data.value.ImgArray[currentImg.value]
+    createImageElement(url,queryObj.value.TemplateType)
+    ElMessage({ message: '操作成功', type: 'success' })
+}
+
+const handleReplace = async () =>{
+    const url = data.value.ImgArray[currentImg.value]
+    let downloadInfo:any = {}
+    downloadInfo = await FileService.convertNetworkToBase64Async(url)
+    propsDatas.value.src = url
+    let tempSize = downloadInfo
+    setPropsDatas(tempSize)
+}
+
+const setPropsDatas = (image:any) => {
+    let width = 0
+    let height =  0
+    //按照宽度进行缩放
+    let ratio = image.width / handleImageElement.value.width
+    width = handleImageElement.value.width
+    height = image.height / ratio
+
+    if(height<handleImageElement.value.height){
+        ratio = height /  handleImageElement.value.height
+        height =  handleImageElement.value.height
+        width = width / ratio
+        propsDatas.value.left = handleImageElement.value.left - (Math.ceil((width - handleImageElement.value.width)/2))
+    }else{
+        propsDatas.value.top = handleImageElement.value.top - (Math.ceil((height - handleImageElement.value.height)/2))
+    }
+    propsDatas.value.height = height
+    propsDatas.value.width = width
+    
+    propsDatas.value.fixedRatio = true
+    slidesStore.updateElement({ id: handleElementId.value, props:propsDatas.value })
+    addHistorySnapshot()
+    currentImg.value = 0
+    isViewerShow.value = false
+    ElMessage({ message: '操作成功', type: 'success' })
+}
+
+const setImages = (i:number) => {
+    currentImg.value = i
+    isViewerShow.value = true
+}
+
 const getTypeName = (t: number, st: 0 | 1) => {
     if (st == 1) {
         const p = allTypes.value.find(x => x.id == t)

src/views/components/source/TextOpera.vue

@@ -11,16 +11,18 @@
                     <IconCopy :size="18"></IconCopy>
                 </el-tooltip>
             </div>
-            <div class="text-opera-item" @click="handleInsert">
-                <el-tooltip content="添加到文本" placement="top">
-                    <IconDocAdd :size="18"></IconDocAdd>
-                </el-tooltip>
-            </div>
-            <div class="text-opera-item" @click="handleReplace">
-                <el-tooltip content="替换文本" placement="top">
-                    <IconFileConversion :size="18"></IconFileConversion>
-                </el-tooltip>
-            </div>
+            <template v-show="handleElement.type=='text'">
+                <div class="text-opera-item" @click="handleInsert">
+                    <el-tooltip content="添加到文本" placement="top">
+                        <IconDocAdd :size="18"></IconDocAdd>
+                    </el-tooltip>
+                </div>
+                <div class="text-opera-item" @click="handleReplace">
+                    <el-tooltip content="替换文本" placement="top">
+                        <IconFileConversion :size="18"></IconFileConversion>
+                    </el-tooltip>
+                </div>
+            </template>
         </div>
     </el-popover>
 </template>

src/views/components/source/index.vue

@@ -125,11 +125,11 @@ const handleChangeSelect = () => {
     recentElement.value = null;
     handleDisObserver();
     handleDisMutationObserver();
-    if (handleElement.value?.type == "text") {
-        const targetDom = document.querySelector(
-            `#editable-element-${handleElementId.value} .editable-element-text`
-        );
-        const rect = targetDom?.getBoundingClientRect();
+    if (handleElement.value?.type == "text"||handleElement.value?.type == "image") {
+        const targetDom = handleElement.value?.type == "text"?document.querySelector(
+            `#editable-element-${handleElementId.value} .editable-element-text`):document.querySelector(
+            `#editable-element-${handleElementId.value} .editable-element-image`)
+        const rect = targetDom?.getBoundingClientRect()
         if (rect) {
             recentElement.value = targetDom;
             resetPosition(rect);