feat(watermark): add layout API (#705)

Author: Wesley-0808

db/TDesign.db

@@ -12,6 +12,7 @@ alpha | Number | 1 | \- | N
 content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 height | Number | - | \- | N
 is-repeat | Boolean | true | \- | N
+layout | String | rectangular | options: rectangular/hexagonal | N
 line-space | Number | 16 | \- | N
 movable | Boolean | false | \- | N
 move-interval | Number | 3000 | \- | N

packages/products/tdesign-miniprogram/src/watermark/README.en-US.md

@@ -12,6 +12,7 @@ alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
 content | String / Slot | - | 水印所覆盖的内容节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 height | Number | - | 水印高度 | N
 is-repeat | Boolean | true | 水印是否重复出现 | N
+layout | String | rectangular | 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印。可选项：rectangular/hexagonal | N
 line-space | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N
 movable | Boolean | false | 水印是否可移动 | N
 move-interval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N

packages/products/tdesign-miniprogram/src/watermark/README.md

@@ -24,6 +24,11 @@ const props: TdWatermarkProps = {
     type: Boolean,
     value: true,
   },
+  /** 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印 */
+  layout: {
+    type: String,
+    value: 'rectangular',
+  },
   /** 行间距，只作用在多行（`content` 配置为数组）情况下 */
   lineSpace: {
     type: Number,

packages/products/tdesign-miniprogram/src/watermark/props.ts

@@ -35,6 +35,14 @@ export interface TdWatermarkProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印
+   * @default rectangular
+   */
+  layout?: {
+    type: StringConstructor;
+    value?: 'rectangular' | 'hexagonal';
+  };
   /**
    * 行间距，只作用在多行（`content` 配置为数组）情况下
    * @default 16

packages/products/tdesign-miniprogram/src/watermark/type.ts

@@ -7,6 +7,7 @@ import { TdWatermarkProps } from './type';
 export const watermarkDefaultProps: TdWatermarkProps = {
   alpha: 1,
   isRepeat: true,
+  layout: 'rectangular',
   lineSpace: 16,
   movable: false,
   moveInterval: 3000,

packages/products/tdesign-mobile-react/src/watermark/defaultProps.ts

@@ -29,6 +29,11 @@ export interface TdWatermarkProps {
    * @default true
    */
   isRepeat?: boolean;
+  /**
+   * 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印
+   * @default rectangular
+   */
+  layout?: 'rectangular' | 'hexagonal';
   /**
    * 行间距，只作用在多行（`content` 配置为数组）情况下
    * @default 16

packages/products/tdesign-mobile-react/src/watermark/type.ts

@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### Watermark Props
 
 name | type | default | description | required
@@ -14,6 +13,7 @@ children | TNode | - | Typescript：`string \| TNode`。[see more ts definition]
 content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/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

packages/products/tdesign-mobile-react/src/watermark/watermark.en-US.md

@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### Watermark Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -14,6 +13,7 @@ children | TNode | - | 水印所覆盖的内容节点，同 `content`。TS 类
 content | TNode | - | 水印所覆盖的内容节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/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

packages/products/tdesign-mobile-react/src/watermark/watermark.md

@@ -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,