feat(Watermark): support layout API (#3726)

* feat: support layout

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 2 people

src/_common

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h3>横平竖直的水印</h3>
+    <t-watermark
+      :watermark-content="{
+        text: '文字水印',
+      }"
+      :width="120"
+      :height="60"
+      :y="120"
+      :x="80"
+    >
+      <div style="height: 300px" />
+    </t-watermark>
+
+    <h3>错位的水印</h3>
+    <t-watermark
+      :watermark-content="{
+        text: '文字水印',
+      }"
+      :width="120"
+      :height="60"
+      :y="120"
+      :x="80"
+      layout="hexagonal"
+    >
+      <div style="height: 300px" />
+    </t-watermark>
+  </div>
+</template>

src/watermark/_example/layout.vue

@@ -30,6 +30,15 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印 */
+  layout: {
+    type: String as PropType<TdWatermarkProps['layout']>,
+    default: 'rectangular' as TdWatermarkProps['layout'],
+    validator(val: TdWatermarkProps['layout']): boolean {
+      if (!val) return true;
+      return ['rectangular', 'hexagonal'].includes(val);
+    },
+  },
   /** 行间距，只作用在多行（`content` 配置为数组）情况下 */
   lineSpace: {
     type: Number,
@@ -46,7 +55,7 @@ export default {
   offset: {
     type: Array as PropType<TdWatermarkProps['offset']>,
   },
-  /** 水印是否可被删除，默认会开启水印节点防删 */
+  /** 水印是否可被删除 */
   removable: {
     type: Boolean,
     default: true,

src/watermark/props.ts

@@ -29,6 +29,11 @@ export interface TdWatermarkProps {
    * @default true
    */
   isRepeat?: boolean;
+  /**
+   * 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印
+   * @default rectangular
+   */
+  layout?: 'rectangular' | 'hexagonal';
   /**
    * 行间距，只作用在多行（`content` 配置为数组）情况下
    * @default 16
@@ -49,7 +54,7 @@ export interface TdWatermarkProps {
    */
   offset?: Array<number>;
   /**
-   * 水印是否可被删除，默认会开启水印节点防删
+   * 水印是否可被删除
    * @default true
    */
   removable?: boolean;
@@ -86,6 +91,11 @@ export interface WatermarkText {
    * @default rgba(0,0,0,0.1)
    */
   fontColor?: string;
+  /**
+   * 水印文本文字字体
+   * @default ''
+   */
+  fontFamily?: string;
   /**
    * 水印文本文字大小
    * @default 16

src/watermark/type.ts

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Watermark Props
 
 name | type | default | description | required
@@ -10,6 +11,7 @@ content | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 height | Number | - | \- | N
 isRepeat | Boolean | true | \- | N
+layout | String | rectangular | options: rectangular/hexagonal | N
 lineSpace | Number | 16 | \- | N
 movable | Boolean | false | \- | N
 moveInterval | Number | 3000 | \- | N
@@ -27,8 +29,9 @@ zIndex | Number | - | \- | N
 name | type | default | description | required
 -- | -- | -- | -- | --
 fontColor | String | rgba(0,0,0,0.1) | \- | N
+fontFamily | String | - | font-family configuration for watermark text | N
 fontSize | Number | 16 | \- | N
-fontWeight | String | normal | options：normal/lighter/bold/bolder | N
+fontWeight | String | normal | options: normal/lighter/bold/bolder | N
 text | String | - | \- | N
 
 ### WatermarkImage

src/watermark/watermark.en-US.md

@@ -1,20 +1,22 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Watermark Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
 content | String / Slot / Function | - | 水印所覆盖的内容节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 水印所覆盖的内容节点，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 height | Number | - | 水印高度 | N
 isRepeat | Boolean | true | 水印是否重复出现 | N
+layout | String | rectangular | 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印。可选项：rectangular/hexagonal | N
 lineSpace | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N
 movable | Boolean | false | 水印是否可移动 | N
 moveInterval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N
 offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`。TS 类型：`Array<number>` | N
-removable | Boolean | true | 水印是否可被删除，默认会开启水印节点防删 | N
+removable | Boolean | true | 水印是否可被删除 | N
 rotate | Number | -22 | 水印旋转的角度，单位 ° | N
 watermarkContent | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
 width | Number | - | 水印宽度 | N
@@ -24,16 +26,17 @@ zIndex | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N
 
 ### WatermarkText
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 fontColor | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N
+fontFamily | String | - | 水印文本文字字体 | N
 fontSize | Number | 16 | 水印文本文字大小 | N
 fontWeight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N
 text | String | - | 水印文本内容 | N
 
 ### WatermarkImage
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 isGrayscale | Boolean | false | 水印图片是否需要灰阶显示 | N
 url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N

src/watermark/watermark.md

@@ -48,6 +48,7 @@ export default defineComponent({
       offsetLeft: offsetLeft.value,
       offsetTop: offsetTop.value,
       fontColor: fontColor.value,
+      layout: props.layout,
     }));
     const removeWaterMark = () => {
       if (!watermarkContentRef.value) return;
@@ -56,7 +57,7 @@ export default defineComponent({
     };
 
     const injectWaterMark = () => {
-      generateBase64Url(bgImageOptions.value, (base64Url) => {
+      generateBase64Url(bgImageOptions.value, (base64Url, backgroundSize) => {
         removeWaterMark();
 
         backgroundImage.value = base64Url;
@@ -70,7 +71,7 @@ export default defineComponent({
           bottom: 0,
           width: '100%',
           height: '100%',
-          backgroundSize: `${gapX.value + props.width}px`,
+          backgroundSize: `${backgroundSize?.width || gapX.value + props.width}px`,
           pointerEvents: 'none',
           backgroundRepeat: backgroundRepeat.value,
           backgroundImage: `url('${backgroundImage.value}')`,

src/watermark/watermark.tsx

@@ -149742,6 +149742,39 @@ exports[`csr snapshot test > csr test ./src/watermark/_example/image.vue 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./src/watermark/_example/layout.vue 1`] = `
+<div>
+  <h3>
+    横平竖直的水印
+  </h3>
+  <div
+    class="t-watermark"
+    style="position: relative; overflow: hidden; width: 100%;"
+  >
+    <div
+      style="height: 300px;"
+    />
+    <div
+      style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; background-size: 200px; pointer-events: none; background-repeat: repeat; background-image: url(""); animation: none;"
+    />
+  </div>
+  <h3>
+    错位的水印
+  </h3>
+  <div
+    class="t-watermark"
+    style="position: relative; overflow: hidden; width: 100%;"
+  >
+    <div
+      style="height: 300px;"
+    />
+    <div
+      style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; background-size: 200px; pointer-events: none; background-repeat: repeat; background-image: url(""); animation: none;"
+    />
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./src/watermark/_example/movingImage.vue 1`] = `
 <div
   class="t-watermark"