Merge pull request #3815 from dataease/pr@dev@fix_link_operate_style

fix(公共链接): 深色主题下操作区域样式

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 {
+      border-radius: 4px;
-        background-color: rgba(31, 35, 41, 0.1);
+      ::v-deep button {
-        color: #1F2329;
+        border-radius: 0px;
-        font-weight: bold;
+      }
-        border-color: rgba(31, 35, 41, 0.1)
+    }
+    .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);;

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

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">
+<?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>
-  <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

@@ -1,4 +1 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?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>
-  <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/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 || '')
       }
     },