From 253caab9f3003d5646d4c45101b8dc63033048b2 Mon Sep 17 00:00:00 2001 From: heart <7362469@qq.com> Date: Tue, 31 Oct 2023 11:32:28 +0800 Subject: [PATCH 1/2] perf[watermark]: replace with token variable --- components/watermark/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index d10988cb84..d538659dd9 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -4,6 +4,7 @@ import { getStyleStr, getPixelRatio, rotateWatermark, reRendering } from './util import { arrayType, objectType, someType, withInstall } from '../_util/type'; import { useMutationObserver } from '../_util/hooks/_vueuse/useMutationObserver'; import { initDefaultProps } from '../_util/props-util'; +import { useToken } from '../theme/internal'; /** * Base size of the canvas, 1 for parallel layout and 2 for alternate layout @@ -42,6 +43,7 @@ const Watermark = defineComponent({ gap: [100, 100], }), setup(props, { slots, attrs }) { + const [, token] = useToken(); const containerRef = shallowRef(); const watermarkRef = shallowRef(); const stopObservation = shallowRef(false); @@ -51,11 +53,11 @@ const Watermark = defineComponent({ const gapYCenter = computed(() => gapY.value / 2); const offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value); const offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value); - const fontSize = computed(() => props.font?.fontSize ?? 16); + const fontSize = computed(() => props.font?.fontSize ?? token.value.fontSizeLG); const fontWeight = computed(() => props.font?.fontWeight ?? 'normal'); const fontStyle = computed(() => props.font?.fontStyle ?? 'normal'); const fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif'); - const color = computed(() => props.font?.color ?? 'rgba(0, 0, 0, 0.15)'); + const color = computed(() => props.font?.color ?? token.value.colorFill); const markStyle = computed(() => { const markStyle: CSSProperties = { zIndex: props.zIndex ?? 9, From 402898db2da64df85f1f936a3a28a63c04bd2296 Mon Sep 17 00:00:00 2001 From: heart <7362469@qq.com> Date: Tue, 31 Oct 2023 19:49:11 +0800 Subject: [PATCH 2/2] feat: add theme toggle watch --- components/watermark/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index d538659dd9..87536916eb 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -212,7 +212,7 @@ const Watermark = defineComponent({ renderWatermark(); }); watch( - () => props, + () => [props, token.value.colorFill, token.value.fontSizeLG], () => { renderWatermark(); },