diff --git a/src/hooks/web/useWatermark.ts b/src/hooks/web/useWatermark.ts index 4a313594c..028926b43 100644 --- a/src/hooks/web/useWatermark.ts +++ b/src/hooks/web/useWatermark.ts @@ -1,8 +1,14 @@ +import { useAppStore } from '@/store/modules/app' +import { watch } from 'vue' + const domSymbol = Symbol('watermark-dom') export function useWatermark(appendEl: HTMLElement | null = document.body) { let func: Fn = () => {} const id = domSymbol.toString() + const appStore = useAppStore() + let watermarkStr = '' + const clear = () => { const domId = document.getElementById(id) if (domId) { @@ -22,7 +28,7 @@ export function useWatermark(appendEl: HTMLElement | null = document.body) { if (cans) { cans.rotate((-20 * Math.PI) / 120) cans.font = '15px Vedana' - cans.fillStyle = 'rgba(0, 0, 0, 0.15)' + cans.fillStyle = appStore.getIsDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)' cans.textAlign = 'left' cans.textBaseline = 'middle' cans.fillText(str, can.width / 20, can.height) @@ -44,6 +50,7 @@ export function useWatermark(appendEl: HTMLElement | null = document.body) { } function setWatermark(str: string) { + watermarkStr = str createWatermark(str) func = () => { createWatermark(str) @@ -51,5 +58,15 @@ export function useWatermark(appendEl: HTMLElement | null = document.body) { window.addEventListener('resize', func) } + // 监听主题变化 + watch( + () => appStore.getIsDark, + () => { + if (watermarkStr) { + createWatermark(watermarkStr) + } + } + ) + return { setWatermark, clear } }