From 487b9d532698aa6b505ac8a66667219840bd27c4 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 21 Feb 2024 12:46:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5=E4=B8=8B?=
 =?UTF-8?q?=E8=BD=BD=E7=AD=89=E6=8C=89=E9=92=AE=E5=8C=BA=E5=9F=9F=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=95=88=E6=9E=9C=20#7461?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/CanvasOptBar.vue |  2 -
 .../canvas/components/editor/LinkOptBar.vue   | 51 ++++++++++++++++---
 .../canvas/components/editor/Preview.vue      |  6 +++
 .../icons/svg/icon_down-right_outlined.svg    |  4 ++
 .../src/icons/svg/icon_download_outlined.svg  |  3 ++
 .../src/icons/svg/icon_minify_outlined.svg    |  3 ++
 .../src/icons/svg/icon_up-left_outlined.svg   |  4 ++
 7 files changed, 63 insertions(+), 10 deletions(-)
 create mode 100644 core/frontend/src/icons/svg/icon_down-right_outlined.svg
 create mode 100644 core/frontend/src/icons/svg/icon_download_outlined.svg
 create mode 100644 core/frontend/src/icons/svg/icon_minify_outlined.svg
 create mode 100644 core/frontend/src/icons/svg/icon_up-left_outlined.svg

diff --git a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index 67adc75608..b28d5402b2 100644
--- a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
@@ -1,7 +1,6 @@
 <template>
 
   <div
-    id="fullscreenElement"
     :class="containerClass"
   >
 
@@ -40,7 +39,6 @@
           />{{ $t('panel.down') }}</span></el-button>
         <el-button
           v-if="isPcTerminal"
-          id="fullscreenElement"
           size="mini"
           @click="toggleFullscreen"
         >
diff --git a/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue b/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue
index e28f77a950..1fd9448f2b 100644
--- a/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue
@@ -1,28 +1,43 @@
 <template>
   <div
     class="link-bar-main bar-light"
+    id="fullscreenElement"
+    v-if="isPublicLink"
+    ref="widget-div"
+    :class="{'link-bar-main-active':barActive}"
   >
     <div class="bar-first">
-      <i class="el-icon-d-arrow-left" />
+      <el-tooltip
+        :content="barActive?'收起':'展开'"
+      >
+        <svg-icon
+          style="width: 16px;height: 16px"
+          :icon-class="barActive?'icon_down-right_outlined':'icon_up-left_outlined'"
+          @click="firstBarClick"
+        />
+      </el-tooltip>
     </div>
     <div class="bar-content">
       <div class="bar-diver" />
       <div class="link-icon-active">
         <svg-icon
           style="width: 16px;height: 16px"
-          icon-class="icon-fanhui"
+          icon-class="icon_left_outlined"
+          @click="back2Last"
         />
       </div>
       <div class="link-icon-active">
         <svg-icon
           style="width: 16px;height: 16px"
-          icon-class="icon-xiazai"
+          icon-class="icon_download_outlined"
+          @click="exportPDF"
         />
       </div>
-      <div class="link-icon-active">
+      <div class="link-icon-active" id="fullscreenElement">
         <svg-icon
           style="width: 16px;height: 16px"
-          :icon-class="fullscreenState?'icon-suoxiao1':'icon_magnify_outlined'"
+          :icon-class="fullscreenState?'icon_minify_outlined':'icon_magnify_outlined'"
+          @click="toggleFullscreen"
         />
       </div>
     </div>
@@ -52,7 +67,8 @@ export default {
   data() {
     return {
       fullscreenElement: null,
-      fullscreenState: false
+      fullscreenState: false,
+      barActive: false
     }
   },
   computed: {
@@ -98,6 +114,9 @@ export default {
     document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
   },
   methods: {
+    firstBarClick() {
+      this.barActive = !this.barActive
+    },
     handleFullscreenChange() {
       // 在全屏状态变化时触发此方法
       if (document.fullscreenElement) {
@@ -165,9 +184,20 @@ export default {
   height: 30px;
   width: 130px;
   bottom: 24px;
-  right: 0px;
+  right: -102px;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
+
+  &:hover {
+    right: -96px;
+  }
+
+  transition: 0.2s; /* 添加过渡动画 */
+}
+
+.link-bar-main-active {
+  right: 0px !important;
+  transition: 0.2s; /* 添加过渡动画 */
 }
 
 .bar-first {
@@ -179,6 +209,11 @@ export default {
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
   padding: 3px 0px 4px 8px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(31, 35, 41, 0.1);
+  }
 }
 
 .bar-diver {
@@ -190,7 +225,6 @@ export default {
 .bar-content {
   display: flex;
   align-items: center;
-  width: 100px;
   border-top: 1px solid rgba(222, 224, 227, 1);
   border-bottom: 1px solid rgba(222, 224, 227, 1);
   background-color: rgba(255, 255, 255, 1);
@@ -203,6 +237,7 @@ export default {
   transition: .1s;
   border-radius: 3px;
   padding-left: 4px;
+  margin-left: 4px;
   text-align: center;
 
   &:active {
diff --git a/core/frontend/src/components/canvas/components/editor/Preview.vue b/core/frontend/src/components/canvas/components/editor/Preview.vue
index 8deedc6d62..4a5e3879c3 100644
--- a/core/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/core/frontend/src/components/canvas/components/editor/Preview.vue
@@ -15,6 +15,12 @@
       @link-export-pdf="downloadAsPDF"
       @back-to-top="backToTop"
     />
+    <link-opt-bar
+      v-if="canvasId==='canvas-main'"
+      :terminal="terminal"
+      @link-export-pdf="downloadAsPDF"
+      @back-to-top="backToTop"
+    />
     <div
       :id="previewDomId"
       :ref="previewRefId"
diff --git a/core/frontend/src/icons/svg/icon_down-right_outlined.svg b/core/frontend/src/icons/svg/icon_down-right_outlined.svg
new file mode 100644
index 0000000000..97b63a06b5
--- /dev/null
+++ b/core/frontend/src/icons/svg/icon_down-right_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.90488 12.7618L6.65937 8.00732L1.90488 3.25284C1.77471 3.12266 1.77471 2.9116 1.90488 2.78143L2.37629 2.31003C2.50646 2.17985 2.71752 2.17985 2.84769 2.31003L8.07358 7.53592C8.33393 7.79627 8.33393 8.21838 8.07358 8.47873L2.84769 13.7046C2.71752 13.8348 2.50646 13.8348 2.37629 13.7046L1.90488 13.2332C1.77471 13.103 1.77471 12.892 1.90488 12.7618Z" fill="#1F2329"/>
+<path d="M7.82871 12.7618L12.5832 8.00732L7.82871 3.25284C7.69854 3.12266 7.69854 2.9116 7.82871 2.78143L8.30012 2.31003C8.43029 2.17985 8.64134 2.17985 8.77152 2.31003L13.9974 7.53592C14.2578 7.79627 14.2578 8.21838 13.9974 8.47873L8.77152 13.7046C8.64134 13.8348 8.43029 13.8348 8.30012 13.7046L7.82871 13.2332C7.69854 13.103 7.69854 12.892 7.82871 12.7618Z" fill="#1F2329"/>
+</svg>
diff --git a/core/frontend/src/icons/svg/icon_download_outlined.svg b/core/frontend/src/icons/svg/icon_download_outlined.svg
new file mode 100644
index 0000000000..c626135454
--- /dev/null
+++ b/core/frontend/src/icons/svg/icon_download_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12.3334V14.0001C14 14.3683 13.7015 14.6667 13.3333 14.6667H2.66667C2.29848 14.6667 2 14.3683 2 14.0001V12.3334C2 12.1493 2.14924 12.0001 2.33333 12.0001H3C3.18409 12.0001 3.33333 12.1493 3.33333 12.3334V13.3334H12.6667V12.3334C12.6667 12.1493 12.8159 12.0001 13 12.0001H13.6667C13.8508 12.0001 14 12.1493 14 12.3334ZM8.66667 9.35723L10.6736 7.35025C10.8038 7.22007 11.0149 7.22007 11.1451 7.35025L11.6165 7.82165C11.7466 7.95183 11.7466 8.16288 11.6165 8.29306L8.31663 11.5929C8.25154 11.658 8.16623 11.6905 8.08092 11.6905C7.99562 11.6905 7.91031 11.658 7.84522 11.5929L4.54539 8.29306C4.41521 8.16288 4.41521 7.95183 4.54539 7.82165L5.01679 7.35025C5.14697 7.22007 5.35802 7.22007 5.4882 7.35025L7.33334 9.19539V2.00008C7.33334 1.81599 7.48257 1.66675 7.66667 1.66675H8.33334C8.51743 1.66675 8.66667 1.81599 8.66667 2.00008V9.35723Z" fill="#1F2329"/>
+</svg>
diff --git a/core/frontend/src/icons/svg/icon_minify_outlined.svg b/core/frontend/src/icons/svg/icon_minify_outlined.svg
new file mode 100644
index 0000000000..02889e7918
--- /dev/null
+++ b/core/frontend/src/icons/svg/icon_minify_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.00555 9.33163C6.18964 9.33163 6.35631 9.40625 6.47695 9.5269C6.5976 9.64754 6.67222 9.81421 6.67222 9.9983V13.4381C6.67222 13.6222 6.52298 13.7715 6.33888 13.7715H5.67222C5.48812 13.7715 5.33888 13.6222 5.33888 13.4381V11.665L2.72855 14.2744C2.59838 14.4046 2.38732 14.4046 2.25715 14.2744L1.78574 13.803C1.65557 13.6729 1.65557 13.4618 1.78574 13.3316L4.4533 10.665H2.55702C2.37293 10.665 2.22369 10.5157 2.22369 10.3316V9.66497C2.22369 9.48087 2.37293 9.33163 2.55702 9.33163H6.00555ZM13.2793 1.7258C13.4094 1.59563 13.6205 1.59563 13.7507 1.7258L14.2221 2.19721C14.3522 2.32738 14.3522 2.53844 14.2221 2.66861L11.5545 5.33528H13.4508C13.6349 5.33528 13.7841 5.48452 13.7841 5.66861V6.33528C13.7841 6.51938 13.6349 6.66861 13.4508 6.66861H10.0023C9.81817 6.66861 9.65151 6.594 9.53086 6.47335C9.41022 6.35271 9.3356 6.18604 9.3356 6.00195V2.5621C9.3356 2.37801 9.48484 2.22877 9.66893 2.22877H10.3356C10.5197 2.22877 10.6689 2.37801 10.6689 2.5621V4.33525L13.2793 1.7258Z" fill="#1F2329"/>
+</svg>
diff --git a/core/frontend/src/icons/svg/icon_up-left_outlined.svg b/core/frontend/src/icons/svg/icon_up-left_outlined.svg
new file mode 100644
index 0000000000..7c4ab015ad
--- /dev/null
+++ b/core/frontend/src/icons/svg/icon_up-left_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.16645 3.24307L3.41197 7.99755L8.16645 12.752C8.29663 12.8822 8.29663 13.0933 8.16645 13.2234L7.69505 13.6948C7.56487 13.825 7.35382 13.825 7.22364 13.6948L1.99775 8.46896C1.7374 8.20861 1.7374 7.7865 1.99775 7.52615L7.22364 2.30026C7.35382 2.17009 7.56487 2.17009 7.69505 2.30026L8.16645 2.77166C8.29663 2.90184 8.29663 3.11289 8.16645 3.24307Z" fill="#1F2329"/>
+<path d="M14.0999 3.24307L9.3454 7.99755L14.0999 12.752C14.2301 12.8822 14.2301 13.0933 14.0999 13.2234L13.6285 13.6948C13.4983 13.825 13.2872 13.825 13.1571 13.6948L7.93118 8.46896C7.67083 8.20861 7.67083 7.7865 7.93118 7.52615L13.1571 2.30026C13.2872 2.17009 13.4983 2.17009 13.6285 2.30026L14.0999 2.77166C14.2301 2.90184 14.2301 3.11289 14.0999 3.24307Z" fill="#1F2329"/>
+</svg>