From 63bde5e19656bb2f8f19f03edf89d4a02dc921e7 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 21 Nov 2022 15:57:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5):=20?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8B=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/CanvasOptBar.vue | 66 +++++++++++++++++--
 .../canvas/components/editor/Preview.vue      |  6 ++
 frontend/src/icons/svg/link-back.svg          |  5 +-
 frontend/src/icons/svg/link-down.svg          |  5 +-
 .../src/views/panel/export/PDFPreExport.vue   |  2 +-
 5 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index 0f174096c0..4aae7a12ad 100644
--- a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
@@ -8,6 +8,7 @@
       v-if="isPublicLink"
       ref="widget-div"
       class="function-div"
+      :class="functionClass"
     >
       <el-button-group size="mini">
         <el-button
@@ -22,7 +23,10 @@
           v-if="existLinkage"
           size="mini"
           @click="clearAllLinkage"
-        ><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
+        ><i
+          style="width: 12px;height: 12px"
+          class="icon iconfont icon-quxiaoliandong"
+        />{{ $t('panel.remove_all_linkage') }}</el-button>
         <el-button
           size="mini"
           @click="exportPDF"
@@ -52,7 +56,25 @@ import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 
 export default {
+  props: {
+    canvasStyleData: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
   computed: {
+    functionClass() {
+      let result = 'function-light'
+      if (this.canvasStyleData?.panel?.themeColor === 'dark') {
+        result = 'function-dark'
+      }
+      return result
+    },
     existLinkage() {
       let linkageFiltersCount = 0
       this.componentData.forEach(item => {
@@ -142,13 +164,43 @@ 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)
+      border-radius: 4px;
+      ::v-deep button {
+        border-radius: 0px;
+      }
+    }
+    .function-light {
+      background: #FFFFFF;
+      border: 1px solid #DEE0E3;
+      box-shadow: 0px 4px 8px rgb(31 35 41 / 10%);
+      ::v-deep button {
+        background-color: #FFFFFF;
+        box-shadow: 0px 4px 8px rgba(31, 35, 41, 0.1);
+        border: 1px solid #DEE0E3;
+        &:hover {
+          background-color: rgba(31, 35, 41, 0.1);
+          color: #1F2329;
+          font-weight: bold;
+          border-color: rgba(31, 35, 41, 0.1)
+        }
+      }
+    }
+    .function-dark {
+      background: #1A1A1A;
+      border: 1px solid #434343;
+      box-shadow: 0px 4px 8px rgba(26, 26, 26, 0.1);
+      ::v-deep button {
+        background-color: #1A1A1A;
+        border: 1px solid #434343;
+        box-shadow: 0px 4px 8px rgba(26, 26, 26, 0.1);
+        color: #FFFFFF;
+        &:hover {
+          background-color: rgba(235, 235, 235, 0.1);
+          color: #EBEBEB;
+          font-weight: bold;
+          border-color: rgba(235, 235, 235, 0.1);
+        }
       }
-
     }
     &:hover {
       border-top: 60px solid rgba(245, 74, 69, 0);;
diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index 15a5186b6e..2aeb6fb1d5 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -11,6 +11,7 @@
   >
     <canvas-opt-bar
       ref="canvas-opt-bar"
+      :canvas-style-data="canvasStyleData"
       @link-export-pdf="downloadAsPDF"
     />
     <div
@@ -615,11 +616,16 @@ export default {
       const domId = this.canvasInfoTemp
       setTimeout(() => {
         this.exporting = true
+        this.backScreenShot = true
+        const scrollHeight = document.getElementById('preview-temp-canvas-main').scrollHeight
+
+        document.getElementById('preview-canvas-main').style.height = (scrollHeight + 'px')
         setTimeout(() => {
           html2canvas(document.getElementById(domId)).then(canvas => {
             const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
             this.dataLoading = false
             this.exporting = false
+            this.backScreenShot = false
             if (snapshot !== '') {
               this.snapshotInfo = snapshot
               this.pdfExportShow = true
diff --git a/frontend/src/icons/svg/link-back.svg b/frontend/src/icons/svg/link-back.svg
index 1d1352fe5d..88339b6c3a 100644
--- a/frontend/src/icons/svg/link-back.svg
+++ b/frontend/src/icons/svg/link-back.svg
@@ -1,4 +1 @@
-<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
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536" /></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
index 90a6a5bda1..f0aaca266a 100644
--- a/frontend/src/icons/svg/link-down.svg
+++ b/frontend/src/icons/svg/link-down.svg
@@ -1,4 +1 @@
-<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
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z" fill="" /></svg>
\ No newline at end of file
diff --git a/frontend/src/views/panel/export/PDFPreExport.vue b/frontend/src/views/panel/export/PDFPreExport.vue
index 586b653d0a..8d2c54076c 100644
--- a/frontend/src/views/panel/export/PDFPreExport.vue
+++ b/frontend/src/views/panel/export/PDFPreExport.vue
@@ -117,7 +117,7 @@ export default {
     initContent() {
       this.templateContentChange = this.templateContent
       for (const [key, value] of Object.entries(this.varsInfo)) {
-        this.templateContentChange = pdfTemplateReplaceAll(this.templateContentChange, key, value)
+        this.templateContentChange = pdfTemplateReplaceAll(this.templateContentChange, key, value || '')
       }
     },