feat: 添加页面水印

portal-manager-ui/admin/src/components/watermark/Watermark.vue

+<template>
+  <canvas class="my-canvas" ref="MyCanvas" v-if="show"></canvas>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      show: true,
+    };
+  },
+  computed: {
+    ...mapState("user", ["licenseInfo"]),
+  },
+  watch: {
+    "licenseInfo.isExpire"(newVal) {
+      if (!newVal) {
+        this.show = false;
+      } else {
+        this.show = true;
+      }
+    },
+  },
+  mounted() {
+    this.weatherMaskCanvasFn();
+  },
+  methods: {
+    weatherMaskCanvasFn() {
+      let len = this.watermark.len || this.watermark?.text?.length || 3;
+      const canvas = this.$refs.MyCanvas;
+      let fontSize = this.watermark.fontSize || 14;
+
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      const context = canvas.getContext("2d");
+
+      context.clearRect(0, 0, canvas.width, canvas.height);
+
+      context.translate(canvas.width / 2, canvas.height / 2);
+      context.rotate(((this.watermark.rotate || -30) * Math.PI) / 180);
+
+      context.font = `${fontSize}px Vedana`;
+      context.fillStyle = this.watermark.color || "#C8C8C8";
+      context.globalAlpha = this.watermark.opacity || 0.5;
+
+      const textWidth = context.measureText(this.watermark.text).width;
+      const textHeight = fontSize;
+      const diagonal = Math.sqrt(
+        textWidth * textWidth + textHeight * textHeight
+      );
+      const patternWidth = diagonal * len;
+      const patternHeight = diagonal * len;
+
+      for (let x = -canvas.width; x < canvas.width; x += patternWidth) {
+        for (let y = -canvas.height; y < canvas.height; y += patternHeight) {
+          context.fillText(this.watermark.text, x, y);
+        }
+      }
+
+      context.setTransform(1, 0, 0, 1, 0, 0);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.my-canvas {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999;
+  left: 0;
+  top: 0;
+}
+</style>

portal-manager-ui/admin/src/components/watermark/index.js

+import vue from "vue";
+import WatermarkCom from "./Watermark.vue";
+import store from "@/store"; // 导入 Vuex store 实例
+const watermarkCom = vue.extend(WatermarkCom);
+let defaultParams = {
+  text: "证书已失效", // 水印文案
+  opacity: "0.6", // 透明度
+  fontSize: "18", // 字体大小
+  color: "#C8C8C8", // 字体颜色
+  rotate: "-30", // 旋转角度deg
+  len: 2, // 水平间隔
+};
+function showWatermarkCom(watermark = defaultParams) {
+  const existingModal = document.getElementById("Watermark");
+  if (!existingModal) {
+    const dom = new watermarkCom({
+      store,
+      el: document.createElement("div"),
+      data() {
+        return {
+          watermark,
+        };
+      },
+    });
+    dom.$el.id = "Watermark";
+    document.body.appendChild(dom.$el);
+  }
+}
+
+function registryCom() {
+  vue.prototype.$watermark = showWatermarkCom;
+}
+
+export default registryCom;

portal-manager-ui/admin/src/main.js

@@ -64,6 +64,9 @@ import "swiper/css/swiper.min.css";
 // 注册证书过期提示弹窗
 import registryModal from "@/components/licenseHint";
 Vue.use(registryModal);
+// 注册水印
+import registryCom from "@/components/watermark";
+Vue.use(registryCom);
 
 Vue.config.productionTip = false;
 // 图片预览

portal-manager-ui/admin/src/router/index.js

@@ -26,6 +26,7 @@ router.beforeEach(async (to, from, next) => {
   // let routerPath = store.getters["user/routerList"];
   // let toRootPathArr = to.matched.map((v) => v.path);
   // let bol = hasIntersection(toRootPathArr, routerPath);
+  Vue.prototype.$licenseHintModal();
   let date = moment().format("YYYY-MM-DD");
   let getDate = store.getters["user/licenseInfo"].date;
   if (!getDate || date != getDate) {
@@ -33,7 +34,10 @@ router.beforeEach(async (to, from, next) => {
   }
   let licenseInfo = store.getters["user/licenseInfo"];
   if (licenseInfo.isExpire) {
+    // 打开弹窗
     Vue.prototype.$licenseHintModal();
+    // 打开水印
+    Vue.prototype.$watermark();
   }
   if (islogin) {
     next();

portal-manager-ui/admin/src/utils/watermark.js

+let watermarkCanvas;
+
+export let weatherMaskCanvasFn = (params = {}) => {
+  let domVisible = "";
+  const createWatermark = () => {
+    let len = params.len || params?.text?.length || 3;
+    const canvas = document.createElement("canvas");
+    let fontSize = params.fontSize || 14,
+      height = params.y_space;
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const context = canvas.getContext("2d");
+
+    context.clearRect(0, 0, canvas.width, canvas.height);
+
+    context.translate(canvas.width / 2, canvas.height / 2);
+    context.rotate(((params.rotate || -30) * Math.PI) / 180);
+
+    context.font = `${fontSize}px Vedana`;
+    context.fillStyle = params.color || "#C8C8C8";
+    context.globalAlpha = params.opacity || 0.5;
+
+    canvas.style.pointerEvents = "none";
+    canvas.style.position = "fixed";
+    canvas.style.zIndex = "999999";
+    canvas.style.left = "0";
+    canvas.style.top = "0";
+    canvas.style.display = domVisible;
+
+    const textWidth = context.measureText(params.text).width;
+    const textHeight = height || fontSize;
+    const diagonal = Math.sqrt(textWidth * textWidth + textHeight * textHeight);
+    const patternWidth = diagonal * len;
+    const patternHeight = diagonal * len;
+
+    for (let x = -canvas.width; x < canvas.width; x += patternWidth) {
+      for (let y = -canvas.height; y < canvas.height; y += patternHeight) {
+        context.fillText(params.text, x, y);
+      }
+    }
+
+    context.setTransform(1, 0, 0, 1, 0, 0);
+
+    return canvas;
+  };
+
+  const addObserver = () => {
+    const config = { childList: true, subtree: true };
+
+    const callback = (mutationsList) => {
+      for (let mutation of mutationsList) {
+        if (
+          mutation.type === "childList" &&
+          !document.body.contains(watermarkCanvas)
+        ) {
+          watermarkCanvas = createWatermark();
+          document.body.appendChild(watermarkCanvas);
+        }
+      }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(document.body, config);
+  };
+
+  watermarkCanvas = createWatermark();
+  document.body.appendChild(watermarkCanvas);
+  addObserver();
+
+  const toggleWatermarkVisibility = (visible = false) => {
+    domVisible = visible ? "block" : "none";
+    watermarkCanvas.style.display = visible ? "block" : "none";
+  };
+
+  return { toggleWatermarkVisibility };
+};