Merge pull request #3787 from dataease/pr@dev@perf_link_operate

perf(公共链接): 交互区域样式优化

frontend/src/components/canvas/components/editor/CanvasOptBar.vue

@@ -6,6 +6,7 @@
 
     <div
       v-if="isPublicLink"
+      ref="widget-div"
       class="function-div"
     >
       <el-button-group size="mini">
@@ -13,7 +14,10 @@
           v-if="!isNewBlank"
           size="mini"
           @click="back2Last"
-        ><i class="icon iconfont el-icon-back" />{{ $t('chart.back') }}</el-button>
+        ><span><svg-icon
+          style="width: 12px;height: 12px"
+          icon-class="link-back"
+        />{{ $t('pblink.back_parent') }}</span></el-button>
         <el-button
           v-if="existLinkage"
           size="mini"
@@ -22,7 +26,11 @@
         <el-button
           size="mini"
           @click="exportPDF"
-        ><i class="icon iconfont el-icon-download" />{{ $t('panel.down') }}</el-button>
+        >
+          <span><svg-icon
+            style="width: 12px;height: 12px"
+            icon-class="link-down"
+          />{{ $t('panel.down') }}</span></el-button>
       </el-button-group>
     </div>
 
@@ -77,6 +85,14 @@ export default {
     },
     exportPDF() {
       this.$emit('link-export-pdf')
+    },
+    setWidgetStatus() {
+      if (!this.isPublicLink || !this.$refs['widget-div']) {
+        return
+      }
+      const val = this.$refs['widget-div'].style.display
+
+      this.$refs['widget-div'].style.display = val ? '' : 'block'
     }
   }
 }
@@ -114,7 +130,7 @@ export default {
     width: 60px;
     right: 0;
     top: 0;
-    border-top: 60px solid rgba(245, 74, 69, 0.2);
+    border-top: 60px solid rgba(245, 74, 69, 0);
     border-left: 60px solid transparent;
     cursor: pointer;
     z-index: 999;
@@ -126,10 +142,16 @@ export default {
       width: max-content;
       text-align: end;
       z-index: 999;
+      ::v-deep button:hover {
+        background-color: rgba(31, 35, 41, 0.1);
+        color: #1F2329;
+        font-weight: bold;
+        border-color: rgba(31, 35, 41, 0.1)
+      }
 
     }
     &:hover {
-      border-top: 60px solid rgba(245, 74, 69, 0.8);;
+      border-top: 60px solid rgba(245, 74, 69, 0);;
       .function-div {
         display: block;
       }

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

@@ -9,7 +9,10 @@
     :style="customStyle"
     @scroll="canvasScroll"
   >
-    <canvas-opt-bar @link-export-pdf="downloadAsPDF" />
+    <canvas-opt-bar
+      ref="canvas-opt-bar"
+      @link-export-pdf="downloadAsPDF"
+    />
     <div
       :id="previewDomId"
       :ref="previewRefId"
@@ -562,6 +565,9 @@ export default {
     deselectCurComponent(e) {
       if (!this.isClickComponent) {
         this.$store.commit('setCurComponent', { component: null, index: null })
+        if (this.$refs?.['canvas-opt-bar']) {
+          this.$refs['canvas-opt-bar'].setWidgetStatus()
+        }
       }
     },
     handleMouseDown() {

frontend/src/icons/svg/link-back.svg

@@ -0,0 +1,4 @@
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.09092 7.00066L7.51207 12.4218C7.64225 12.552 7.64225 12.763 7.51207 12.8932L7.04067 13.3646C6.91049 13.4948 6.69944 13.4948 6.56926 13.3646L0.676707 7.47206C0.416358 7.21171 0.416358 6.7896 0.676707 6.52925L6.56926 0.636694C6.69944 0.506519 6.91049 0.506519 7.04067 0.636694L7.51207 1.1081C7.64225 1.23827 7.64225 1.44933 7.51207 1.5795L2.09092 7.00066Z" fill="#1F2329" />
+</svg>
+  

frontend/src/icons/svg/link-down.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 11.3327V12.9994C12 13.3675 11.7015 13.666 11.3333 13.666H0.666667C0.298477 13.666 0 13.3675 0 12.9994V11.3327C0 11.1486 0.149238 10.9994 0.333333 10.9994H1C1.18409 10.9994 1.33333 11.1486 1.33333 11.3327V12.3327H10.6667V11.3327C10.6667 11.1486 10.8159 10.9994 11 10.9994H11.6667C11.8508 10.9994 12 11.1486 12 11.3327ZM6.66667 8.35649L8.67365 6.34952C8.80382 6.21934 9.01488 6.21934 9.14505 6.34952L9.61646 6.82092C9.74663 6.95109 9.74663 7.16215 9.61646 7.29232L6.31663 10.5922C6.25154 10.6572 6.16623 10.6898 6.08092 10.6898C5.99562 10.6898 5.91031 10.6572 5.84522 10.5922L2.54539 7.29232C2.41521 7.16215 2.41521 6.95109 2.54539 6.82092L3.01679 6.34952C3.14697 6.21934 3.35802 6.21934 3.4882 6.34952L5.33334 8.19465V0.999349C5.33334 0.815254 5.48257 0.666016 5.66667 0.666016H6.33334C6.51743 0.666016 6.66667 0.815254 6.66667 0.999349V8.35649Z" fill="#1F2329" />
+</svg>
+  

frontend/src/lang/en.js

@@ -1862,7 +1862,8 @@ export default {
     input_placeholder: 'Please enter the 4-digits-letters',
     pwd_error: 'Wrong password',
     pwd_format_error: 'Please enter the 4-digits-letters',
-    sure_bt: 'Confirm'
+    sure_bt: 'Confirm',
+    back_parent: 'Back to previous'
   },
   panel: {
 

frontend/src/lang/tw.js

@@ -1862,7 +1862,8 @@ export default {
     input_placeholder: '請輸入4位數字或字母',
     pwd_error: '密碼錯誤',
     pwd_format_error: '請輸入4位數字或字母',
-    sure_bt: '確定'
+    sure_bt: '確定',
+    back_parent: '返回上一級'
   },
   panel: {
 

frontend/src/lang/zh.js

@@ -1862,7 +1862,8 @@ export default {
     input_placeholder: '请输入4位数字或字母',
     pwd_error: '密码错误',
     pwd_format_error: '请输入4位数字或字母',
-    sure_bt: '确定'
+    sure_bt: '确定',
+    back_parent: '返回上一级'
   },
   panel: {