From 1b2b87679dc789030118990762191734ce68c03e Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 18 Nov 2022 11:27:09 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5):=20?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/CanvasOptBar.vue | 30 ++++++++++++++++---
 .../canvas/components/editor/Preview.vue      |  8 ++++-
 frontend/src/icons/svg/link-back.svg          |  4 +++
 frontend/src/icons/svg/link-down.svg          |  4 +++
 frontend/src/lang/en.js                       |  3 +-
 frontend/src/lang/tw.js                       |  3 +-
 frontend/src/lang/zh.js                       |  3 +-
 7 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/icons/svg/link-back.svg
 create mode 100644 frontend/src/icons/svg/link-down.svg

diff --git a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index e41f595138..0f174096c0 100644
--- a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/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;
       }
diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index a304a149cd..c8040af5aa 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/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() {
diff --git a/frontend/src/icons/svg/link-back.svg b/frontend/src/icons/svg/link-back.svg
new file mode 100644
index 0000000000..1d1352fe5d
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/frontend/src/icons/svg/link-down.svg b/frontend/src/icons/svg/link-down.svg
new file mode 100644
index 0000000000..90a6a5bda1
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 9068ffd9bb..70576e101f 100644
--- a/frontend/src/lang/en.js
+++ b/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: {
 
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 2814a8f010..2d7a6ca4f8 100644
--- a/frontend/src/lang/tw.js
+++ b/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: {
 
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b078c35d21..e99ddb82f4 100644
--- a/frontend/src/lang/zh.js
+++ b/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: {