feat: 支持时间戳

packages/fes-plugin-watermark/src/runtime/core.js

@@ -1,15 +1,48 @@
+function timeFormat(date, format = 'YYYY-MM-DD') {
+    if (!date) return null;
+    if (typeof date === 'number') {
+        date = new Date(date);
+    }
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const day = date.getDate();
+    const hours24 = date.getHours();
+    const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const dd = t => `0${t}`.slice(-2);
+    const map = {
+        YYYY: year,
+        MM: dd(month + 1),
+        MMMM: `${month + 1}月`,
+        M: month + 1,
+        DD: dd(day),
+        D: day,
+        HH: dd(hours24),
+        H: hours24,
+        hh: dd(hours),
+        h: hours,
+        mm: dd(minutes),
+        m: minutes,
+        ss: dd(seconds),
+        s: seconds
+    };
+    return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
+}
+
 // canvas 实现 watermark
 export function createWatermark({
     container = document.body,
     width = '300px',
-    height = '200px',
+    height = '300px',
     textAlign = 'center',
     textBaseline = 'middle',
-    font = '18px Microsoft Yahei',
+    font = '16px Microsoft Yahei',
     fillStyle = 'rgba(184, 184, 184, 0.15)',
     content = '请勿外传',
-    rotate = '30',
+    rotate = '45',
-    zIndex = 99999
+    zIndex = 99999,
+    timestamp = 'YYYY-MM-DD hh:mm'
 } = {}) {
     const param = {
         container,
@@ -21,7 +54,8 @@ export function createWatermark({
         fillStyle,
         content,
         rotate,
-        zIndex
+        zIndex,
+        timestamp
     };
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', width);
@@ -33,8 +67,12 @@ export function createWatermark({
     ctx.font = font;
     ctx.fillStyle = fillStyle;
     ctx.translate(parseFloat(width) / 2, parseFloat(height) / 2);
-    ctx.rotate((Math.PI / 180) * rotate);
+    ctx.rotate(-(Math.PI / 180) * rotate);
-    ctx.fillText(content, 0, 0);
+    ctx.fillText(
+        `${content}${timestamp ? ` ${timeFormat(new Date(), timestamp)}` : ''}`,
+        0,
+        0
+    );
 
     let __wm = document.querySelector('.__wm');
     const watermarkDiv = __wm || document.createElement('div');
@@ -76,4 +114,21 @@ export function createWatermark({
             childList: true
         });
     }
+
+    if (timestamp) {
+        let timeout = 1000 * 60 * 60 * 24;
+        if (timestamp.includes('h') || timestamp.includes('H')) {
+            timeout = 1000 * 60 * 60;
+        }
+        if (timestamp.includes('m')) {
+            timeout = 1000 * 60;
+        }
+        if (timestamp.includes('s')) {
+            timeout = 1000;
+        }
+        setTimeout(() => {
+            // 触发MutationObserver
+            watermarkDiv.style.bottom = '0';
+        }, timeout);
+    }
 }

packages/fes-template/src/app.js

@@ -19,7 +19,7 @@ export const beforeRender = {
                 resolve({
                     userName: '李雷'
                 });
-                createWatermark({ content: '李雷李雷李雷李雷' });
+                createWatermark({ content: '万纯(harrywan)' });
             }, 1000);
         });
     }