feat: 新增导出水印功能

src/plugins/naive.ts

@@ -93,6 +93,7 @@ import {
   NCollapse,
   NCollapseItem,
   NColorPicker,
+  NWatermark,
   NCollapseTransition
 } from 'naive-ui';
 
@@ -190,6 +191,7 @@ const naive = create({
     NCollapse,
     NCollapseItem,
     NColorPicker,
+    NWatermark,
     NCollapseTransition
   ],
 });

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -4,8 +4,23 @@
     :style="rangeStyle"
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
-    <edit-rule></edit-rule>
+    <n-watermark
+      id="go-edit-watermark"
+      content="GoView 低代码平台"
+      cross
+      selectable
+      :font-size="16"
+      :line-height="16"
+      :width="500"
+      :height="150"
+      :x-offset="12"
+      :y-offset="80"
+      :rotate="-15"
+      style="display: none; width: 100%; height: 100%;"
+    ></n-watermark>
     <slot></slot>
+    <!-- 标尺 -->
+    <edit-rule></edit-rule>
     <!-- 拖拽时的辅助线 -->
     <edit-align-line></edit-align-line>
   </div>
@@ -55,7 +70,7 @@ const rangeStyle = computed(() => {
 @include go(edit-range) {
   position: relative;
   transform-origin: left top;
-  @include filter-border-color('hover-border-color');
+  @include filter-border-color("hover-border-color");
-  @include filter-bg-color('background-color2');
+  @include filter-bg-color("background-color2");
 }
 </style>

src/views/chart/ContentEdit/index.vue

@@ -87,17 +87,17 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@include goId('chart-edit-layout') {
+@include goId("chart-edit-layout") {
   position: relative;
   width: 100%;
   overflow: hidden;
   @extend .go-point-bg;
-  @include background-image('background-point');
+  @include background-image("background-point");
-  @include goId('chart-edit-content') {
+  @include goId("chart-edit-content") {
     border-radius: 10px;
     margin: 15px;
     @extend .go-transition;
-    @include fetch-theme('box-shadow');
+    @include fetch-theme("box-shadow");
     .edit-content-chart {
       position: absolute;
       overflow: hidden;

src/views/chart/HeaderRightBtn/index.vue

@@ -14,16 +14,15 @@ import { shallowReactive } from 'vue'
 import { renderIcon, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
-import { icon } from '@/plugins'
 import { canvasCut, downloadTextFile } from '@/utils'
 import { useRoute } from 'vue-router'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { icon } from '@/plugins'
 
 const { BrowsersOutlineIcon, SendIcon, DownloadIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 
-// TODO 我也不知道为什么不能实时获取，必须初始化获取
 const routerParamsInfo = useRoute()
 
 // 预览
@@ -63,9 +62,9 @@ const exportHandle = () => {
   // 导出图片
   const ruler = document.getElementById('mb-ruler')
   const range = document.querySelector('.go-edit-range') as HTMLElement
-
+  const watermark = document.getElementById('go-edit-watermark')
   // 隐藏边距线
-  if (!ruler || !range) {
+  if (!ruler || !range || !watermark) {
     window['$message'].error('导出失败！')
     return
   }
@@ -75,10 +74,14 @@ const exportHandle = () => {
   ruler.style.display = 'none'
   // 百分百展示页面
   chartEditStore.setScale(1, true)
+  // 展示水印
+  watermark.style.display = 'block'
   
   window['$message'].warning('生成截图和数据中, 请耐心等待...')
   setTimeout(() => {
     canvasCut(range, () => {
+      // 隐藏水印
+      if (watermark) watermark.style.display = 'none'
       // 放开边距线
       if (ruler) ruler.style.display = 'block'
       // 还原页面大小