css样式调整

app/src/App.vue

@@ -197,7 +197,7 @@
           <el-button v-if="!readonly" :icon="Upload" circle style="margin-right: 10px" @click="importFromJson" />
         </el-tooltip>
         <el-tooltip effect="light" content="保存模板" placement="top">
-          <el-button v-if="!readonly" :icon="Check" circle style="margin-right: 10px" @click="saveJson = !saveJson">
+          <el-button v-if="!readonly" :icon="DocumentAdd" circle style="margin-right: 10px" @click="saveJson = !saveJson">
           </el-button>
         </el-tooltip>
         <el-tooltip effect="light" content="模板列表" placement="top">
@@ -267,18 +267,18 @@
         clearable></el-input>
       <el-button type="primary" @click="savetemplate(0)">保存模板</el-button>
     </el-dialog>
-    <!-- 文件列表 -->
+    <!-- 模板列表 -->
     <el-dialog v-model="filelist" title="模板列表" :width="800">
-      <!-- <el-switch v-model="filetype" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #00ffff"
-        active-text="文件" inactive-text="模板" @click="templateItems" /> -->
-      <el-input v-model="search" type="text" style="width: 150px; margin-right: 10px" placeholder="请输入模板名"
+      <div style="margin-top: -20px;">
+      <el-input  v-model="search" type="text" style="width: 150px; margin-top: -100px;" placeholder="请输入模板名"
         clearable></el-input>
-      <el-button type="primary" :icon="Search" @click="searchTemplate" plain>搜索</el-button>
-      <div class="demo-image">
-        <div v-for="name in names" :key="name" class="block">
-          <span class="demonstration">{{ name[0] }}</span>
-          <el-image style="width: 100px; height: 100px" :src="name[1]" @click="importFromJsonServer(name[0])" />
-          <el-button type="danger" @click="DeleteeFromJsonServer(name[0])" plain>删除</el-button>
+      <el-button  style="margin-top: -5px; margin: 10px;" type="primary" :icon="Search" @click="searchTemplate" plain>搜索</el-button>
+    </div>
+      <div class="demo-image" style="overflow-y: auto; max-height: 300px;">
+        <div v-for="name in ids[0]" :key="name" class="block">
+          <span class="demonstration">{{ name.name }}</span>
+          <el-image style="width: 200px; height: 120px" :src="name.url" @click="importFromJsonServer(name._id)" />
+          <el-button style="width: 60px; height: 30px;" type="danger" @click="DeleteeFromJsonServer(name._id)" plain>删除</el-button>
         </div>
       </div>
     </el-dialog>
@@ -316,6 +316,7 @@ import {
   Grid,
   View,
   Check,
+  DocumentAdd,
   Edit,
   List,
   Search,
@@ -514,6 +515,7 @@ const undo = () => {
 const redo = () => {
   app.redo()
 }
+let ids = reactive([]);
 
 // 清空
 const empty = () => {
@@ -524,7 +526,6 @@ const handleButtonClick = async () => {
   await templateItems();
   filelist.value = !filelist.value; // 设置为true以显示弹窗
 };
-let names = reactive(new Map())
 // 从本地导入模板
 const importFromJson = () => {
   let el = document.createElement('input')
@@ -570,11 +571,11 @@ const importFromJsonServer = async (itemId) => {
 }
 //搜索功能
 let search = ref('')
+let names = reactive(new Map())
 const searchTemplate = async () => {
   const url = window.location.href
   const uuid = getQueryParams(url)
-  if (uuid.uuid!=undefined){
-    try {
+  try {
     // const url = new URL(process.env.TEMPLATE_API_URL + 'search');
     // url.searchParams.append('name', search.value);
     // url.searchParams.append('uuid', uuid.uuid);
@@ -586,10 +587,11 @@ const searchTemplate = async () => {
     if (response.ok) {
       const jsonData = await response.json()
       if (jsonData.code === 200) {
-        names.clear()
-        for (let index = 0; index < jsonData.data.length; index++) {
-          names.set(jsonData.data[index].name, jsonData.data[index].url)
-        }
+        ids.length = 0
+        // for (let index = 0; index < jsonData.data.length; index++) {
+        //   names.set(jsonData.data[index].name, jsonData.data[index].url)
+        // }
+        ids.push(jsonData.data)
         ElNotification.success('搜索成功')
         search.value = null
       } else {
@@ -599,10 +601,8 @@ const searchTemplate = async () => {
   } catch (error) {
     ElNotification.warning('系统出错')
   }
-  }else{
-    ElNotification.warning('缺少必要参数')
-  }
-  
+
+
 }
 //删除
 const DeleteeFromJsonServer = async (itemId) => {
@@ -612,10 +612,9 @@ const DeleteeFromJsonServer = async (itemId) => {
     type: 'warning',
   }).then(async () => {
     try {
-      // const urls = window.location.href
-      // const uuid = getQueryParams(urls)
-      // url.searchParams.append('uuid', uuid.uuid);
-      const response = await fetch(process.env.TEMPLATE_API_URL + `template?name=${itemId}`, {
+      const url = window.location.href
+      const QueryParams = getQueryParams(url);
+      const response = await fetch(process.env.TEMPLATE_API_URL + `template?name=${itemId}&uuid=${QueryParams.uuid}`, {
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/json'
@@ -637,24 +636,15 @@ const DeleteeFromJsonServer = async (itemId) => {
 // 导出为本地图片或者链接
 const handleExportCommand = type => {
   if (type === 'png') {
-    // exportImageUrl.value = app.exportImage({
-    //   renderBg: exportRenderBackground.value,
-    //   paddingX: exportImagePaddingX.value,
-    //   paddingY: exportImagePaddingY.value,
-    //   onlySelected: exportOnlySelected.value
     exportImageUrl.value = app.exportImage({
-      renderBg: true,
+      renderBg: exportRenderBackground.value,
       paddingX: exportImagePaddingX.value,
       paddingY: exportImagePaddingY.value,
-      onlySelected: exportOnlySelected.value
-    })
-    // exportImageDialogVisible.value = true
-    // 将生成的图片链接复制到剪贴板
-    // navigator.clipboard.writeText(exportImageUrl.value).catch(error => {
-    //   ElNotification.warning('导出链接失败');
-    // });
+      onlySelected: exportOnlySelected.value,
+    });
+    exportImageDialogVisible.value=true
     // saveJson.value = true
-    ElNotification.success('图片链接已复制到剪贴板')
+    //ElNotification.success('图片链接已复制到剪贴板')
   } else if (type === 'json') {
     exportJsonData.value = app.exportJson()
     exportJsonDialogVisible.value = true
@@ -671,13 +661,12 @@ const handleExportCommand = type => {
 }
 //保存文件
 const savetemplate = async (types) => {
+  const url = window.location.href
+  const QueryParams = getQueryParams(url);
   if (types === 1) {
-    console.log("当前url", window.location.href)
-    const url = window.location.href
-    const fileName = getQueryParams(url);
-    saveFileName.value = fileName.fileName
     // console.log(exportJson)
-    if (fileName.fileName === undefined) {
+    saveFileName.value = QueryParams.fileName
+    if (QueryParams.fileName === undefined) {
       ElNotification.warning('URL参数错误')
       return
     }
@@ -693,7 +682,7 @@ const savetemplate = async (types) => {
     onlySelected: exportOnlySelected.value
   })
   try {
-    const response = await fetch(process.env.TEMPLATE_API_URL + 'saveTemplate', {
+    const response = await fetch(process.env.TEMPLATE_API_URL + `saveTemplate?uuid=${QueryParams.uuid}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -723,12 +712,10 @@ const savetemplate = async (types) => {
 }
 async function getTemplats() {
   const url = window.location.href
-  const fileName = getQueryParams(url);
-  if (fileName.fileName != undefined) {
+  const QueryParams = getQueryParams(url);
+  if (QueryParams.fileName != undefined) {
     try {
-      const url = new URL(process.env.TEMPLATE_API_URL + 'template');
-      url.searchParams.append('name', fileName.fileName);
-      const response = await fetch(url, {
+      const response = await fetch(process.env.TEMPLATE_API_URL + `templates?name=${QueryParams.fileName}`, {
         headers: {
           'Content-Type': 'application/json'
         }
@@ -751,7 +738,7 @@ const templateItems = async () => {
   const requestBody = {
     type: 0,
   };
-  names.clear() //清空map 重新渲染
+  ids.length = 0 //清空数组 重新渲染
   try {
     const response = await fetch(process.env.TEMPLATE_API_URL + `template?uuid=${uuid.uuid}`, {
       method: 'POST',
@@ -764,10 +751,12 @@ const templateItems = async () => {
     if (response.ok) {
       const jsonData = await response.json()
       if (jsonData.code === 200) {
-        for (let index = 0; index < jsonData.data.length; index++) {
-          names.set(jsonData.data[index].name, jsonData.data[index].url)
-        }
+        // for (let index = 0; index < jsonData.data.length; index++) {
+        //   names.set(jsonData.data[index].name, jsonData.data[index].url)
+        // }
+        ids.push(jsonData.data)
         ElNotification.success(jsonData.message)
+        // console.log(ids)
         search.value = null
       } else {
         ElNotification.warning('当前模板为空')
@@ -784,7 +773,7 @@ function getQueryParams(url) {
   const queryParamsStr = url.includes('?') ? url.split('?')[1] : '';
   const queryParams = new URLSearchParams(queryParamsStr);
   const uuid = queryParams.get('uuid');
-  
+
   const fileName = queryParams.get('task_id') + "_" + queryParams.get('vt_id') + "_" + queryParams.get('key_id')
   if (!queryParams.has('task_id') || !queryParams.has('vt_id') || !queryParams.has('key_id')) {
     return {};
@@ -983,6 +972,7 @@ onMounted(() => {
   })
   appInstance.value = app
   // 窗口尺寸变化
+  getTemplats()
   let resizeTimer = null
   window.addEventListener('resize', () => {
     clearTimeout(resizeTimer)
@@ -991,10 +981,10 @@ onMounted(() => {
     }, 300)
   })
 })
-onMounted(() => {
-  getTemplats()
-  //getImage()
-})
+// onMounted(() => {
+  
+//   //getImage()
+// })
 </script>
 
 <style lang="less">
@@ -1196,7 +1186,7 @@ ol {
   text-align: center;
   border-right: solid 1px var(--el-border-color);
   display: inline-block;
-  width: 20%;
+  width: 30%;
   box-sizing: border-box;
   vertical-align: top;
   border-radius: 8px 8px 8px 8px;
@@ -1205,12 +1195,25 @@ ol {
   border-color: var(--el-border-color);
 
 }
-
+.block {
+  height: 200px;
+  width: 100px;
+  margin: 0 8px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
 .demo-image .block:last-child {
-  border-right: none;
   border-radius: 8px 8px 8px 8px;
 }
-
+.demo-image {
+  text-align: center;
+}
+.demonstration{
+  margin-top: -15px;
+  display: inline-block;
+  text-align: center;
+  height: 5px;
+}
 .demo-image .demonstration {
   display: block;
   color: var(--el-text-color-secondary);
@@ -1218,5 +1221,4 @@ ol {
   margin-bottom: 20px;
   border-radius: 8px 8px 8px 8px;
 }
-
 </style>