fix: 修复web组件跳转按钮不容易点击显示问题

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -37,7 +37,7 @@
                 {{ $t('chart.export') }}<i class="el-icon-download" />
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
                 <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>

frontend/src/components/canvas/components/Editor/index.vue

@@ -159,7 +159,7 @@
             {{ $t('chart.export') }}<i class="el-icon-download" />
           </el-button>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
             <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>

frontend/src/components/canvas/custom-component/DeFrame.vue

@@ -2,11 +2,15 @@
   <el-row class="main-frame">
     <div v-if="element.frameLinks.src" class="main-frame">
       <iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
-      <div v-if="editMode==='edit'" class="frame-mask">
+      <div v-if="editMode==='edit'" class="frame-mask edit-mask">
         <span style="opacity: 1;">
           <span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
         </span>
       </div>
+      <!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
+      <div v-if="editMode!=='edit'" class="frame-mask preview-top-mask" />
+      <div v-if="editMode!=='edit'" class="frame-mask preview-right-mask" />
+      <div v-if="editMode!=='edit'" class="frame-mask preview-left-mask" />
       <div v-if="screenShot" class="frame-mask" />
     </div>
     <div v-else class="info-class">
@@ -100,17 +104,34 @@ export default {
   }
   .frame-mask {
     display: flex;
-    height: 100%!important;
-    width: 100% !important;
-    background-color: #5c5e61;
     opacity: 0.5;
     position:absolute;
     top:0px;
-    left: 0px;
-    z-index: 2;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+  .edit-mask{
+    left: 0px;
+    background-color: #5c5e61;
+    height: 100%!important;
+    width: 100% !important;
+  }
+  .preview-top-mask{
+    left: 0px;
+    height: 15px!important;
+    width: 100% !important;
+  }
+  .preview-right-mask{
+    right: 0px;
+    height: 100%!important;
+    width: 15px !important;
+  }
+  .preview-left-mask{
+    left: 0px;
+    height: 100%!important;
+    width: 15px !important;
+  }
 </style>
 

frontend/src/views/panel/list/PanelViewShow.vue

@@ -307,8 +307,8 @@ export default {
               this.dataLoading = false
             }, 300)
           })
-        }, 500)
-      }, 0)
+        }, 1500)
+      }, 500)
     },
 
     downloadAsPDF() {