create-windy 0.4.0 → 0.4.1

package/dist/cli.js

@@ -7524,6 +7524,11 @@ var recipes = [
     id: "starter-0.3.19-to-0.4.0",
     from: "0.3.19",
     to: "0.4.0"
+  },
+  {
+    id: "starter-0.4.0-to-0.4.1",
+    from: "0.4.0",
+    to: "0.4.1"
   }
 ];
 function resolveRecipeChain(sourceVersion, targetVersion) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-windy",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "创建单组织、单租户、私有部署优先的 Windy 企业 Dashboard Starter",
   "type": "module",
   "bin": {

package/template/.windy-template.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "templateCommit": "50d32b9470dbf55110aba320338f5e54ed896c77",
-  "generatorVersion": "0.4.0",
+  "templateCommit": "67920c05352fe2d560c018f6b26e5e81e78291b0",
+  "generatorVersion": "0.4.1",
   "modules": [
     {
       "name": "system",

package/template/apps/server/src/settings/drizzle-watermark-repository.integration.test.ts

@@ -42,6 +42,8 @@ describePostgres("PostgreSQL watermark policy repository", () => {
         density: "high",
         contentFields: ["username", "phone"],
         customContent: "内部资料",
+        opacityPercent: 16,
+        fontSize: 20,
       },
       "user_settings",
     );
@@ -56,6 +58,8 @@ describePostgres("PostgreSQL watermark policy repository", () => {
       density: "high",
       contentFields: ["username", "phone"],
       customContent: "内部资料",
+      opacityPercent: 16,
+      fontSize: 20,
     });
   });
 });

package/template/apps/server/src/settings/drizzle-watermark-repository.ts

@@ -30,6 +30,7 @@ export class DrizzleWatermarkPolicyRepository implements WatermarkPolicyReposito
       .values({
         id: PLATFORM_WATERMARK_ID,
         ...policy,
+        businessPagesEnabled: policy.enabled,
         createdBy: actorId,
         updatedBy: actorId,
       })
@@ -37,10 +38,12 @@ export class DrizzleWatermarkPolicyRepository implements WatermarkPolicyReposito
         target: platformWatermarkPolicies.id,
         set: {
           enabled: policy.enabled,
-          businessPagesEnabled: policy.businessPagesEnabled,
+          businessPagesEnabled: policy.enabled,
           density: policy.density,
           contentFields: policy.contentFields,
           customContent: policy.customContent,
+          opacityPercent: policy.opacityPercent,
+          fontSize: policy.fontSize,
           updatedAt: new Date(),
           updatedBy: actorId,
         },
@@ -57,12 +60,17 @@ function toPolicy(row: {
   density: PlatformWatermarkPolicy["density"];
   contentFields: PlatformWatermarkPolicy["contentFields"];
   customContent: string;
+  opacityPercent: number;
+  fontSize: number;
 }): PlatformWatermarkPolicy {
+  const enabled = row.enabled && row.businessPagesEnabled;
   return {
-    enabled: row.enabled,
-    businessPagesEnabled: row.businessPagesEnabled,
+    enabled,
+    businessPagesEnabled: enabled,
     density: row.density,
     contentFields: row.contentFields,
     customContent: row.customContent,
+    opacityPercent: row.opacityPercent,
+    fontSize: row.fontSize,
   };
 }

package/template/apps/server/src/settings/watermark-routes.test.ts

@@ -47,6 +47,8 @@ describe("平台水印策略路由", () => {
       density: "medium",
       contentFields: ["username", "displayName"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     });
   });
 
@@ -58,6 +60,8 @@ describe("平台水印策略路由", () => {
       density: "high",
       contentFields: ["username", "phone", "custom"],
       customContent: "内部资料",
+      opacityPercent: 16,
+      fontSize: 20,
     };
 
     const updated = (await fixture.app.invoke(
@@ -83,7 +87,13 @@ describe("平台水印策略路由", () => {
           action: "config.update",
           target: { type: "platform-watermark", id: "platform" },
           metadata: expect.objectContaining({
-            changedFields: ["density", "contentFields", "customContent"],
+            changedFields: [
+              "density",
+              "contentFields",
+              "customContent",
+              "opacityPercent",
+              "fontSize",
+            ],
           }),
         }),
       ]),
@@ -104,6 +114,8 @@ describe("平台水印策略路由", () => {
       density: "low",
       contentFields: ["username"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     })) as Response;
 
     expect(readable.enabled).toBe(true);
@@ -139,6 +151,8 @@ describe("平台水印策略路由", () => {
       density: "medium",
       contentFields: ["username"],
       customContent: "x".repeat(81),
+      opacityPercent: 8,
+      fontSize: 14,
     })) as Response;
 
     expect(response.status).toBe(400);
@@ -148,9 +162,48 @@ describe("平台水印策略路由", () => {
       density: "medium",
       contentFields: ["username", "displayName"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     });
     expect(fixture.runtime.auditSink.list()).toHaveLength(0);
   });
+
+  test("旧业务范围状态会折叠到唯一开关", async () => {
+    const fixture = await createFixture(settingsActor(true));
+
+    const updated = (await update(fixture, {
+      enabled: true,
+      businessPagesEnabled: false,
+      density: "medium",
+      contentFields: ["email", "displayName"],
+      customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
+    })) as PlatformWatermarkPolicy;
+
+    expect(updated.enabled).toBe(true);
+    expect(updated.businessPagesEnabled).toBe(true);
+    expect(updated.contentFields).toEqual(["email", "displayName"]);
+  });
+
+  test("不透明度和字体大小超出范围时拒绝保存", async () => {
+    const fixture = await createFixture(settingsActor(true));
+
+    const response = (await update(fixture, {
+      enabled: true,
+      businessPagesEnabled: true,
+      density: "medium",
+      contentFields: ["username"],
+      customContent: "",
+      opacityPercent: 31,
+      fontSize: 14,
+    })) as Response;
+
+    expect(response.status).toBe(400);
+    await expect(response.json()).resolves.toMatchObject({
+      error: "INVALID_WATERMARK_POLICY",
+    });
+  });
 });
 
 async function update(

package/template/apps/server/src/settings/watermark-routes.ts

@@ -6,6 +6,8 @@ import type {
 import {
   WATERMARK_CONTENT_FIELDS,
   WATERMARK_DENSITIES,
+  WATERMARK_FONT_SIZE_RANGE,
+  WATERMARK_OPACITY_RANGE,
 } from "@southwind-ai/shared";
 import { evaluateRouteGuards, findFeature } from "../route-guards.js";
 import type { createServerRuntime } from "../runtime.js";
@@ -137,6 +139,28 @@ function parseWatermarkPolicy(body: unknown): WatermarkParseResult {
   if (customContent.length > 80) {
     return { ok: false, message: "自定义内容不能超过 80 个字符" };
   }
+  if (
+    typeof source.opacityPercent !== "number" ||
+    !Number.isInteger(source.opacityPercent) ||
+    source.opacityPercent < WATERMARK_OPACITY_RANGE.min ||
+    source.opacityPercent > WATERMARK_OPACITY_RANGE.max
+  ) {
+    return {
+      ok: false,
+      message: `水印不透明度必须是 ${WATERMARK_OPACITY_RANGE.min}% 到 ${WATERMARK_OPACITY_RANGE.max}% 的整数`,
+    };
+  }
+  if (
+    typeof source.fontSize !== "number" ||
+    !Number.isInteger(source.fontSize) ||
+    source.fontSize < WATERMARK_FONT_SIZE_RANGE.min ||
+    source.fontSize > WATERMARK_FONT_SIZE_RANGE.max
+  ) {
+    return {
+      ok: false,
+      message: `水印字体大小必须是 ${WATERMARK_FONT_SIZE_RANGE.min}px 到 ${WATERMARK_FONT_SIZE_RANGE.max}px 的整数`,
+    };
+  }
   const contentFields = [
     ...new Set(
       source.contentFields as PlatformWatermarkPolicy["contentFields"],
@@ -146,10 +170,12 @@ function parseWatermarkPolicy(body: unknown): WatermarkParseResult {
     ok: true,
     value: {
       enabled: source.enabled,
-      businessPagesEnabled: source.businessPagesEnabled,
+      businessPagesEnabled: source.enabled,
       density: source.density as PlatformWatermarkPolicy["density"],
       contentFields,
       customContent,
+      opacityPercent: source.opacityPercent,
+      fontSize: source.fontSize,
     },
   };
 }
@@ -164,6 +190,8 @@ function changedFields(
     "density",
     "contentFields",
     "customContent",
+    "opacityPercent",
+    "fontSize",
   ].filter(
     (field) =>
       JSON.stringify(before[field as keyof PlatformWatermarkPolicy]) !==

package/template/apps/web/src/composables/useWatermarkSettings.webtest.ts

@@ -30,6 +30,8 @@ describe("全局水印策略状态", () => {
       density: "high",
       contentFields: ["custom"],
       customContent: "全局审计",
+      opacityPercent: 12,
+      fontSize: 18,
     });
     const { useWatermarkSettings } = await import("./useWatermarkSettings");
     const watermark = useWatermarkSettings(shallowRef(undefined));
@@ -42,6 +44,8 @@ describe("全局水印策略状态", () => {
       density: "high",
       contentFields: ["custom"],
       customContent: "全局审计",
+      opacityPercent: 12,
+      fontSize: 18,
     });
     expect(localStorageRead).not.toHaveBeenCalled();
     expect(localStorageWrite).not.toHaveBeenCalled();
@@ -54,6 +58,8 @@ describe("全局水印策略状态", () => {
       density: "medium",
       contentFields: ["username", "displayName"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     });
     api.update.mockResolvedValue({
       enabled: true,
@@ -61,6 +67,8 @@ describe("全局水印策略状态", () => {
       density: "high",
       contentFields: ["username", "custom"],
       customContent: "  内部资料  ",
+      opacityPercent: 16,
+      fontSize: 20,
     });
     const { useWatermarkSettings } = await import("./useWatermarkSettings");
     const actor = shallowRef({
@@ -80,6 +88,8 @@ describe("全局水印策略状态", () => {
       density: "high",
       contentFields: ["username", "custom"],
       customContent: "内部资料",
+      opacityPercent: 16,
+      fontSize: 20,
     });
 
     expect(api.update).toHaveBeenCalledWith({
@@ -88,6 +98,8 @@ describe("全局水印策略状态", () => {
       density: "high",
       contentFields: ["username", "custom"],
       customContent: "内部资料",
+      opacityPercent: 16,
+      fontSize: 20,
     });
     expect(second.policy.value).toEqual({
       enabled: true,
@@ -95,6 +107,8 @@ describe("全局水印策略状态", () => {
       density: "high",
       contentFields: ["username", "custom"],
       customContent: "内部资料",
+      opacityPercent: 16,
+      fontSize: 20,
     });
   });
 });

package/template/apps/web/src/composables/watermark-settings.ts

@@ -3,6 +3,8 @@ import {
   DEFAULT_PLATFORM_WATERMARK_POLICY,
   WATERMARK_CONTENT_FIELDS,
   WATERMARK_DENSITIES,
+  WATERMARK_FONT_SIZE_RANGE,
+  WATERMARK_OPACITY_RANGE,
   type PlatformWatermarkPolicy,
   type WatermarkContentField,
   type WatermarkDensity,
@@ -16,8 +18,6 @@ const DENSITY_GAPS: Record<
   medium: { horizontal: 72, vertical: 48 },
   high: { horizontal: 36, vertical: 24 },
 };
-const FONT_SIZE = 14;
-const LINE_HEIGHT = 22;
 const ROTATION_RADIANS = (22 * Math.PI) / 180;
 const MAX_LINE_WEIGHT = 32;
 
@@ -58,15 +58,26 @@ export function normalizeWatermarkPolicy(
       ),
     ),
   ];
+  const enabled = Boolean(value.enabled && value.businessPagesEnabled);
   return {
-    enabled: value.enabled,
-    businessPagesEnabled: value.businessPagesEnabled,
+    enabled,
+    businessPagesEnabled: enabled,
     density,
     contentFields:
       contentFields.length > 0
         ? contentFields
         : [...DEFAULT_PLATFORM_WATERMARK_POLICY.contentFields],
     customContent: value.customContent.trim().slice(0, 80),
+    opacityPercent: boundedInteger(
+      value.opacityPercent,
+      WATERMARK_OPACITY_RANGE,
+      DEFAULT_PLATFORM_WATERMARK_POLICY.opacityPercent,
+    ),
+    fontSize: boundedInteger(
+      value.fontSize,
+      WATERMARK_FONT_SIZE_RANGE,
+      DEFAULT_PLATFORM_WATERMARK_POLICY.fontSize,
+    ),
   };
 }
 
@@ -78,10 +89,19 @@ export interface WatermarkPattern {
 export function createWatermarkPattern(
   content: string,
   density: WatermarkDensity,
+  fontSize: number,
 ): WatermarkPattern {
+  const safeFontSize = boundedInteger(
+    fontSize,
+    WATERMARK_FONT_SIZE_RANGE,
+    DEFAULT_PLATFORM_WATERMARK_POLICY.fontSize,
+  );
+  const lineHeight = Math.ceil(safeFontSize * 1.57);
   const lines = wrapWatermarkContent(content);
-  const textWidth = Math.max(...lines.map(estimatedTextWidth));
-  const textHeight = lines.length * LINE_HEIGHT;
+  const textWidth = Math.max(
+    ...lines.map((line) => estimatedTextWidth(line, safeFontSize)),
+  );
+  const textHeight = lines.length * lineHeight;
   const rotatedWidth =
     textWidth * Math.cos(ROTATION_RADIANS) +
     textHeight * Math.sin(ROTATION_RADIANS);
@@ -91,17 +111,17 @@ export function createWatermarkPattern(
   const gap = DENSITY_GAPS[density];
   const width = Math.ceil(rotatedWidth + gap.horizontal);
   const height = Math.ceil(rotatedHeight + gap.vertical);
-  const firstLineY = (height - textHeight) / 2 + FONT_SIZE;
+  const firstLineY = (height - textHeight) / 2 + safeFontSize;
   const tspans = lines
     .map(
       (line, index) =>
-        `<tspan x="${width / 2}" y="${firstLineY + index * LINE_HEIGHT}">${escapeXml(line)}</tspan>`,
+        `<tspan x="${width / 2}" y="${firstLineY + index * lineHeight}">${escapeXml(line)}</tspan>`,
     )
     .join("");
   const svg =
     `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
     `<g transform="rotate(-22 ${width / 2} ${height / 2})">` +
-    `<text text-anchor="middle" font-family="system-ui,sans-serif" font-size="${FONT_SIZE}" font-weight="500" fill="black">${tspans}</text>` +
+    `<text text-anchor="middle" font-family="system-ui,sans-serif" font-size="${safeFontSize}" font-weight="500" fill="black">${tspans}</text>` +
     "</g></svg>";
   return {
     image: `url("data:image/svg+xml,${encodeURIComponent(svg)}")`,
@@ -125,8 +145,8 @@ function wrapWatermarkContent(content: string): string[] {
   return lines.length > 0 ? lines : [""];
 }
 
-function estimatedTextWidth(value: string): number {
-  return Math.max(1, textWeight(value)) * (FONT_SIZE * 0.56);
+function estimatedTextWidth(value: string, fontSize: number): number {
+  return Math.max(1, textWeight(value)) * (fontSize * 0.56);
 }
 
 function textWeight(value: string): number {
@@ -145,3 +165,12 @@ function escapeXml(value: string): string {
     .replaceAll('"', "&quot;")
     .replaceAll("'", "&apos;");
 }
+
+function boundedInteger(
+  value: number,
+  range: { readonly min: number; readonly max: number },
+  fallback: number,
+): number {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.min(range.max, Math.max(range.min, Math.round(value)));
+}

package/template/apps/web/src/composables/watermark-settings.webtest.ts

@@ -73,8 +73,8 @@ describe("水印设置", () => {
   test("高密度缩小平铺单元且长内容自动换行以避免相邻水印重叠", () => {
     const content =
       "zhangsan · 张三 · 13800138000 · zs@example.com · 内部资料请勿外传";
-    const low = createWatermarkPattern(content, "low");
-    const high = createWatermarkPattern(content, "high");
+    const low = createWatermarkPattern(content, "low", 14);
+    const high = createWatermarkPattern(content, "high", 14);
     const dimensions = (value: typeof low) =>
       value.size.match(/\d+/g)!.map(Number);
 
@@ -86,21 +86,34 @@ describe("水印设置", () => {
     ).toBeGreaterThan(1);
   });
 
-  test("服务端策略内容会被规范化后渲染", () => {
+  test("字体大小会改变平铺尺寸并写入实际 SVG", () => {
+    const small = createWatermarkPattern("zhangsan · 张三", "medium", 12);
+    const large = createWatermarkPattern("zhangsan · 张三", "medium", 32);
+    const width = (value: typeof small) => Number(value.size.match(/\d+/)?.[0]);
+
+    expect(width(large)).toBeGreaterThan(width(small));
+    expect(decodeURIComponent(large.image)).toContain('font-size="32"');
+  });
+
+  test("服务端策略内容会被规范化后渲染且旧范围开关合并到总开关", () => {
     expect(
       normalizeWatermarkPolicy({
-        enabled: false,
-        businessPagesEnabled: true,
+        enabled: true,
+        businessPagesEnabled: false,
         density: "high",
         contentFields: ["phone", "phone"],
         customContent: `  ${"x".repeat(100)}  `,
+        opacityPercent: 99,
+        fontSize: 2,
       }),
     ).toEqual({
       enabled: false,
-      businessPagesEnabled: true,
+      businessPagesEnabled: false,
       density: "high",
       contentFields: ["phone"],
       customContent: "x".repeat(80),
+      opacityPercent: 30,
+      fontSize: 12,
     });
   });
 });

package/template/apps/web/src/layout/GlobalWatermark.layering.webtest.ts

@@ -17,6 +17,8 @@ const state = vi.hoisted(() => {
       density: "medium",
       contentFields: ["username", "displayName"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     },
   };
 

package/template/apps/web/src/layout/GlobalWatermark.vue

@@ -31,17 +31,16 @@ const allowed = computed(() => {
       props.scope === "admin" ? "system.watermark.read" : undefined,
   }).allowed;
 });
-const scopeEnabled = computed(
-  () => props.scope === "admin" || watermark.policy.value.businessPagesEnabled,
-);
 const patternStyle = computed<StyleValue>(() => {
   const pattern = createWatermarkPattern(
     watermark.content.value,
     watermark.policy.value.density,
+    watermark.policy.value.fontSize,
   );
   return {
     "--watermark-image": pattern.image,
     "--watermark-size": pattern.size,
+    opacity: watermark.policy.value.opacityPercent / 100,
   };
 });
 </script>
@@ -50,12 +49,9 @@ const patternStyle = computed<StyleValue>(() => {
   <Teleport to="body">
     <div
       v-if="
-        allowed &&
-        scopeEnabled &&
-        watermark.policy.value.enabled &&
-        watermark.content.value
+        allowed && watermark.policy.value.enabled && watermark.content.value
       "
-      class="global-watermark pointer-events-none fixed inset-0 isolate z-[60] transform-gpu bg-foreground opacity-[0.075] dark:opacity-[0.11]"
+      class="global-watermark pointer-events-none fixed inset-0 isolate z-[60] transform-gpu bg-foreground"
       :style="patternStyle"
       aria-hidden="true"
       data-testid="global-watermark"

package/template/apps/web/src/layout/GlobalWatermark.webtest.ts

@@ -41,6 +41,8 @@ const state = vi.hoisted(() => ({
       density: "medium" as const,
       contentFields: ["username", "displayName"] as const,
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     },
   },
   content: { value: "zhangsan · 张三" },
@@ -77,11 +79,13 @@ beforeEach(() => {
     density: "medium" as const,
     contentFields: ["username", "displayName"] as const,
     customContent: "",
+    opacityPercent: 8,
+    fontSize: 14,
   };
 });
 
 describe("GlobalWatermark", () => {
-  test("Admin 水印沿用原有总开关且不受业务页面范围影响", () => {
+  test("总开关统一控制 Admin 与业务页面水印", () => {
     const wrapper = mount(GlobalWatermark);
 
     expect(wrapper.find('[data-testid="global-watermark"]').exists()).toBe(
@@ -97,7 +101,7 @@ describe("GlobalWatermark", () => {
     ).toBe(false);
   });
 
-  test("业务页面水印默认开启并可由持久化范围开关关闭", () => {
+  test("旧业务范围字段不再形成独立开关", () => {
     const wrapper = mount(GlobalWatermark, {
       props: { scope: "business" },
     });
@@ -111,13 +115,13 @@ describe("GlobalWatermark", () => {
       ...state.policy.value,
       businessPagesEnabled: false,
     };
-    const disabledWrapper = mount(GlobalWatermark, {
+    const legacyWrapper = mount(GlobalWatermark, {
       props: { scope: "business" },
     });
 
     expect(
-      disabledWrapper.find('[data-testid="global-watermark"]').exists(),
-    ).toBe(false);
+      legacyWrapper.find('[data-testid="global-watermark"]').exists(),
+    ).toBe(true);
   });
 
   test("使用按内容和密度计算的平铺蒙版并保持审计层级", () => {
@@ -128,6 +132,7 @@ describe("GlobalWatermark", () => {
 
     expect(element.attributes("style")).toContain("--watermark-image:");
     expect(element.attributes("style")).toContain("--watermark-size:");
+    expect(element.attributes("style")).toContain("opacity: 0.08");
     expect(element.classes()).toEqual(
       expect.arrayContaining([
         "isolate",
@@ -145,6 +150,8 @@ describe("GlobalWatermark", () => {
       density: "medium",
       contentFields: ["username", "displayName"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     };
     state.access.value.features[0]!.allowed = false;
 

package/template/apps/web/src/pages/settings/WatermarkPreview.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, type StyleValue } from "vue";
+import { createWatermarkPattern } from "@/composables/watermark-settings";
+import type { WatermarkDensity } from "@southwind-ai/shared";
+
+const props = defineProps<{
+  enabled: boolean;
+  content: string;
+  density: WatermarkDensity;
+  opacityPercent: number;
+  fontSize: number;
+}>();
+
+const patternStyle = computed<StyleValue>(() => {
+  const pattern = createWatermarkPattern(
+    props.content,
+    props.density,
+    props.fontSize,
+  );
+  return {
+    "--watermark-image": pattern.image,
+    "--watermark-size": pattern.size,
+    opacity: props.opacityPercent / 100,
+  };
+});
+</script>
+
+<template>
+  <section class="grid gap-3" aria-label="水印即时预览">
+    <div class="flex items-center justify-between gap-3">
+      <h3 class="text-sm font-medium">即时预览</h3>
+      <span class="text-xs text-muted-foreground">
+        {{ opacityPercent }}% · {{ fontSize }}px
+      </span>
+    </div>
+    <div
+      class="relative h-56 overflow-hidden rounded-xl border bg-muted/30"
+      data-testid="watermark-preview"
+    >
+      <div
+        v-if="enabled && content"
+        class="watermark-preview pointer-events-none absolute inset-0 bg-foreground"
+        :style="patternStyle"
+        aria-hidden="true"
+        data-testid="watermark-preview-pattern"
+      />
+      <div
+        v-else
+        class="absolute inset-0 grid place-items-center text-sm text-muted-foreground"
+      >
+        水印已关闭
+      </div>
+      <div
+        class="absolute inset-x-6 bottom-6 rounded-lg border bg-background/90 p-4 shadow-sm"
+      >
+        <p class="text-sm font-medium">业务页面内容示意</p>
+        <p class="mt-1 text-xs text-muted-foreground">
+          修改字段、密度、不透明度或字体大小后，此处立即呈现实际效果。
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.watermark-preview {
+  mask-image: var(--watermark-image);
+  mask-size: var(--watermark-size);
+  -webkit-mask-image: var(--watermark-image);
+  -webkit-mask-size: var(--watermark-size);
+}
+</style>