feat: 丰富水印功能页面

package.json

@@ -35,7 +35,7 @@
     "@pureadmin/components": "^1.1.0",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.2.0",
-    "@pureadmin/utils": "^1.1.5",
+    "@pureadmin/utils": "^1.2.1",
     "@vueuse/core": "^9.5.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",

pnpm-lock.yaml

@@ -22,7 +22,7 @@ specifiers:
   "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^1.2.0
   "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.1.5
+  "@pureadmin/utils": ^1.2.1
   "@types/element-resize-detector": 1.1.3
   "@types/js-cookie": ^3.0.1
   "@types/lodash": ^4.14.180
@@ -133,7 +133,7 @@ dependencies:
   "@pureadmin/components": 1.1.0_vue@3.2.45
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
   "@pureadmin/table": 1.2.0_element-plus@2.2.21
-  "@pureadmin/utils": 1.1.5_aotapuqn7htzdjltsyimavekky
+  "@pureadmin/utils": 1.2.1_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.5.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
   "@wangeditor/editor": 5.1.22
@@ -1410,10 +1410,10 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.1.5_aotapuqn7htzdjltsyimavekky:
+  /@pureadmin/utils/1.2.1_aotapuqn7htzdjltsyimavekky:
     resolution:
       {
-        integrity: sha512-5nQZyFAbs59gkMBj0WLox7BlY7llILR/ENo2QNEKW6avMt8sDL1+858EFjEbELl6enPsVvJpoCTxatmZzVjyAw==
+        integrity: sha512-qcuRwW2DoXHCblFcZcYVAypV12I2P5sw0fvBnLfREtQ3Zlx51y4z0hOByncBFrNc9vFc3CoNM9UYlzsIedNP9A==
       }
     peerDependencies:
       dayjs: "*"

src/views/able/watermark.vue

@@ -1,21 +1,43 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
 import { useWatermark } from "@pureadmin/utils";
 
 defineOptions({
   name: "WaterMark"
 });
 
+const local = ref();
+const preventLocal = ref();
 const color = ref("#409EFF");
 const value = ref("vue-pure-admin");
 const { setWatermark, clear } = useWatermark();
+const { setWatermark: setLocalWatermark, clear: clearLocal } =
+  useWatermark(local);
+const { setWatermark: setPreventLocalWatermark } = useWatermark(preventLocal);
+
+onMounted(() => {
+  nextTick(() => {
+    setPreventLocalWatermark("无法删除的水印", {
+      forever: true,
+      width: 187,
+      height: 80
+    });
+  });
+});
+
+onBeforeUnmount(() => {
+  // 在离开该页面时清除整页水印
+  clear();
+});
 </script>
 
 <template>
   <el-card>
     <template #header>
       <div class="card-header">
-        <span class="font-medium">页面水印功能</span>
+        <span class="font-medium">
+          页面水印功能（将平台主题改为亮白色观察水印效果更明显哦）
+        </span>
       </div>
     </template>
     <span> 请输入要创建水印的值：</span>
@@ -29,10 +51,132 @@ const { setWatermark, clear } = useWatermark();
     <el-color-picker v-model="color" show-alpha />
     <br />
     <el-button @click="setWatermark(value, { fillStyle: color })">
-      创建
+      创建整页水印
+    </el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建整页渐变水印
     </el-button>
-    <el-button @click="clear">清除</el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          rotate: 0,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建整页渐变且水平90度的水印
+    </el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ],
+          shadowConfig: [20]
+        })
+      "
+    >
+      创建整页渐变且有阴影的水印
+    </el-button>
+    <el-button
+      @click="
+        setWatermark(value, {
+          globalAlpha: 0.15, // 值越低越透明
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建整页高透明渐变水印
+    </el-button>
+    <el-button @click="clear">清除整页水印</el-button>
+
+    <div
+      ref="local"
+      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-sky-500"
+    />
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          fillStyle: color,
+          width: 140,
+          height: 60
+        })
+      "
+    >
+      创建局部水印
+    </el-button>
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          width: 140,
+          height: 60,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建局部渐变水印
+    </el-button>
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          width: 140,
+          height: 56.5,
+          rotate: 0,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ]
+        })
+      "
+    >
+      创建局部渐变且水平90度的水印
+    </el-button>
+    <el-button
+      @click="
+        setLocalWatermark('局部水印', {
+          width: 140,
+          height: 56.5,
+          gradient: [
+            { value: 0, color: 'magenta' },
+            { value: 0.5, color: 'blue' },
+            { value: 1.0, color: 'red' }
+          ],
+          shadowConfig: [20]
+        })
+      "
+    >
+      创建局部渐变且有阴影的水印
+    </el-button>
+    <el-button @click="clearLocal">清除局部水印</el-button>
+
+    <div
+      ref="preventLocal"
+      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-indigo-500"
+    />
   </el-card>
 </template>
-
-<style scoped></style>