系统资料替换图

src/views/components/source/ImageOpera.vue

+<template>
+    <div class="row items-center imageOperaBox" 
+    :class="[handleElement.type=='image'?'imageOperaI':'imageOperaT']">
+        <!-- <div class="text-opera-item" @click="handleCopyImage">
+            <el-tooltip content="复制图" placement="top">
+                <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 v-show="handleElement.type=='image'" class="text-opera-item" @click="handleReplace">
+            <el-tooltip content="替换图" placement="top">
+                <IconFileConversion :size="18"></IconFileConversion>
+            </el-tooltip>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useMainStore } from "@/store";
+import { copyText, replaceText } from "@/utils/clipboard";
+import { ElMessage } from "element-plus";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+const mainStore = useMainStore();
+const { handleElement } = storeToRefs(mainStore);
+
+const emit = defineEmits<{
+    (event: 'handleCopyImage'): void
+    (event: 'handleInsert'): void
+    (event: 'handleReplace'): void
+}>()
+
+const handleCopyImage= () => {
+    emit('handleCopyImage')
+}
+const handleReplace=()=>{
+    emit('handleReplace')
+}
+const handleInsert=()=>{
+    emit('handleInsert')
+}
+
+</script>
+
+<style scoped>
+    .text-opera-item{
+        padding:5px;
+        border-radius: 5px;
+        cursor: pointer;
+        color: #fff;
+        line-height: 1;
+        
+    }
+    .text-opera-item:hover{
+        background: #ffff;
+        color: black;
+    }
+    .imageOperaBox{
+        padding:4px 10px;
+        position: relative;
+        position: fixed;
+        top: -50px; 
+        z-index: 99;
+        background: rgba(23,23,23,.5);
+        border-radius: 8px;
+    }
+    .imageOperaT{
+        left: 180px;
+    }
+    .imageOperaT::after{
+        content: ' ';
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 15px;
+        bottom: -10px;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid rgba(23,23,23,.5);
+    }
+    .imageOperaI{
+        left: 160px;
+    }
+    .imageOperaI::after{
+        content: ' ';
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 28px;
+        bottom: -10px;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid rgba(23,23,23,.5);
+    }
+</style>
\ No newline at end of file