导出图片并复制链接到剪切板

app/src/App.vue

@@ -199,10 +199,6 @@
           <el-button v-if="!readonly" :icon="List" circle style="margin-right: 10px" @click="handleButtonClick">
           </el-button>
         </el-tooltip>
-        <el-tooltip effect="light" content="模板库" placement="top">
-          <el-button :icon="FolderOpened" circle style="margin-right: 10px"
-            @click="InportJsonDialogVisible = !InportJsonDialogVisible" />
-        </el-tooltip>
         <el-dropdown @command="handleExportCommand">
           <span class="el-dropdown-link">
             <el-button :icon="Download" circle />
@@ -227,13 +223,6 @@
             @click="helpDialogVisible = !helpDialogVisible" />
         </el-tooltip>
       </div>
-      <!-- 模板库 -->
-      <!-- <div class="">
-        <el-tooltip effect="light" content="模板库" placement="top">
-          <el-button :icon="QuestionFilled" circle style="margin-right: 10px"
-            @click="InportJsonDialogVisible = !InportJsonDialogVisible" />
-        </el-tooltip>
-      </div> -->
     </div>
     <!-- 导出图片弹窗 -->
     <el-dialog v-model="exportImageDialogVisible" title="导出为图片" :width="800">
@@ -265,10 +254,6 @@
         </div>
       </div>
     </el-dialog>
-    <!-- 模板库弹窗 -->
-    <el-dialog v-model="InportJsonDialogVisible" title="模板库" :width="800">
-      <el-image style="width: 100px; height: 100px" :src="url" @click="importFromJsonServer" />
-    </el-dialog>
     <!-- 保存 -->
     <el-dialog v-model="saveJson" title="保存文件" :width="800">
       <el-switch v-model="filetype" size="small" active-text="文件" inactive-text="模板" />
@@ -282,7 +267,8 @@
       <div class="demo-image">
         <div v-for="name in names" :key="name.id" class="block">
           <span class="demonstration">{{ name[1].id }}</span>
-          <el-image style="width: 100px; height: 100px" :src="name[1].url" @click="importFromJsonServer" />
+          <el-image style="width: 100px; height: 100px" :src="name[1].url" @click="importFromJsonServer(name[1].id)" />
+          <el-button type="danger"  @click="DeleteeFromJsonServer(name[1].id)" plain>删除</el-button>
         </div>
       </div>
     </el-dialog>
@@ -300,8 +286,6 @@
     </el-dialog>
     <!-- 右键菜单 -->
     <Contextmenu v-if="appInstance" :app="appInstance"></Contextmenu>
-    <!-- <TemplateItems v-if="showOtherComponent"></TemplateItems> -->
-    <span v-for="name in names"> {{ name }}</span>
   </div>
 </template>
 
@@ -331,7 +315,6 @@ import {
   QuestionFilled
 } from '@element-plus/icons-vue'
 import Contextmenu from './components/Contextmenu.vue'
-import TemplateItems from './components/TemplateItems.vue'
 import { fontFamilyList, fontSizeList } from './constants'
 import { ElMessage } from 'element-plus'
 const currentInstance = getCurrentInstance();
@@ -551,10 +534,10 @@ const importFromJson = () => {
   el.click()
 }
 //从服务器获取模板
-const importFromJsonServer = async () => {
+const importFromJsonServer = async (itemId) => {
   try {
     const url = new URL('http://localhost:8080/api/template');
-    url.searchParams.append('name', '文件测试');
+    url.searchParams.append('name', itemId);
     const response = await fetch(url, {
       headers: {
         'Content-Type': 'application/json'
@@ -565,22 +548,55 @@ const importFromJsonServer = async () => {
     const jsonObject = JSON.parse(jsonData.data)
     console.log(jsonObject.data)
     app.setData(jsonObject.data)
-    ElMessage({ message: '导入成功', type: 'success' })
+    filelist.value=false
+    ElNotification.success('导入成功')
+  } catch (error) {
+    console.log(error)
+  }
+}
+//删除
+const DeleteeFromJsonServer = async (itemId) => {
+  try {
+    const url = new URL('http://localhost:8080/api/template');
+    url.searchParams.append('name', itemId);
+    const response = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    if (!response.ok) throw new Error('Failed to fetch JSON data')
+    const jsonData = await response.json()
+    const jsonObject = JSON.parse(jsonData.data)
+    console.log(jsonObject.data)
+    app.setData(jsonObject.data)
+    filelist.value=false
+    ElNotification.success('导入成功')
   } catch (error) {
     console.log(error)
   }
 }
-
 // 导出
 const handleExportCommand = type => {
   if (type === 'png') {
-    exportImageUrl.value = app.exportImage({
-      renderBg: exportRenderBackground.value,
+    // exportImageUrl.value = app.exportImage({
+    //   renderBg: exportRenderBackground.value,
+    //   paddingX: exportImagePaddingX.value,
+    //   paddingY: exportImagePaddingY.value,
+    //   onlySelected: exportOnlySelected.value
+      exportImageUrl.value = app.exportImage({
+      renderBg: true,
       paddingX: exportImagePaddingX.value,
       paddingY: exportImagePaddingY.value,
       onlySelected: exportOnlySelected.value
     })
-    exportImageDialogVisible.value = true
+    // exportImageDialogVisible.value = true
+    // 将生成的图片链接复制到剪贴板
+    navigator.clipboard.writeText(exportImageUrl.value).catch(error => {
+      ElNotification.warning('导出链接失败');
+    });
+    saveJson.value=true
+    ElNotification.success('图片链接已复制到剪贴板')
   } else if (type === 'json') {
     exportJsonData.value = app.exportJson()
     exportJsonDialogVisible.value = true
@@ -611,7 +627,7 @@ const save = async () => {
       })
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
-    ElMessage.success('保存成功')
+    ElNotification.success('保存成功')
   } catch (error) {
     console.log(error)
   }
@@ -622,41 +638,6 @@ const handleButtonClick = async () => {
   filelist.value = !filelist.value; // 设置为true以显示弹窗
 };
 let names = reactive(new Map())
-// const templateItems = async () => {
-//   const requestBody = {
-//     type: filetype.value,
-//   };
-//   try {
-//     const response = await fetch('http://localhost:8080/api/template', {
-//       method: 'POST',
-//       headers: {
-//         'Content-Type': 'application/json',
-//       },
-//       body: JSON.stringify(requestBody), // 修改：使用JSON.stringify将requestBody对象转换为JSON字符串
-//     });
-
-//     if (response.ok) {
-//       const jsonData = await response.json();
-//       // jsonData.data // 可以保留，用于存储模板项的键列表
-//       const keyValuePairs = Object.entries(jsonData.data).map(([key, value]) => ({ key, value }));
-//       for (let i = 0; i < keyValuePairs.length; i++) {
-//         const { key, value } = keyValuePairs[i]; // 使用解构赋值简化变量声明
-//         const json = JSON.parse(value).data.elements;
-//         if (json.length === 2) {// 使用三等号（===）进行严格相等比较
-//           url = json[0].url;
-//           console.log(url);
-//         } else {
-//           console.log(json);
-//         }
-//       }
-//     }
-//     ElMessage.success('获取成功');
-//   } catch (error) {
-//     ElMessage.error('获取模板失败');
-//     console.log(error);
-//   }
-// };
-
 const templateItems = async () => {
   const requestBody = {
     type: filetype.value,
@@ -683,12 +664,11 @@ const templateItems = async () => {
 
         names.set(key, { id: key, url });
       }
-      console.log([...names.values()]); // 打印Map的值列表以查看结果
-      console.log([...names.values()]); // 打印Map的值列表以查看结果
+      // console.log([...names.values()]); // 打印Map的值列表以查看结果
     }
-    ElMessage.success('获取成功');
+    ElNotification.success('获取成功')
   } catch (error) {
-    ElMessage.error('获取模板失败');
+    ElNotification.warning('获取失败')
     console.log(error);
   }
 };

app/src/components/TemplateItems.vue

@@ -1,46 +0,0 @@
-<template>
-    <div class="template-items">
-     <el-switch v-model="filetype" size="small" active-text="文件" inactive-text="模板" @click="templateItmes" />
-      <div class="demo-image">
-        <div v-for="fit in names" :key="fit" class="block">
-          <span class="demonstration">{{ fit }}</span>
-          <el-image style="width: 100px; height: 100px" :src="url" @click="templateItmes" />
-        </div>
-      </div>
-    </div>
-</template>
-<script setup>
-    import { ref } from 'vue'
-    const filetype = ref(true)
-    const names = ref(['文件', '模板'])
-    const templateItmes = () => {
-      filetype.value = !filetype.value
-    }
-</script>
-<style scoped>
-.template-items{
-    height: auto;
-    width: 500px;
-    margin: 0 auto;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-}
-.demo-image {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.block {
-  padding: 30px;
-  text-align: center;
-}
-.demonstration {
-  display: block;
-  color: #8492a6;
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-</style>