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: {
+      handler(newVal) {
+        if (!newVal.isExpire) {
+          this.show = false;
+        }
+      },
+      deep: 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

@@ -33,7 +33,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();