wip: feat(watermark): init watermark component

src/watermark/defaultProps.ts

@@ -0,0 +1,15 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdWatermarkProps } from './type';
+
+export const watermarkDefaultProps: TdWatermarkProps = {
+  alpha: 1,
+  isRepeat: true,
+  lineSpace: 16,
+  movable: false,
+  moveInterval: 3000,
+  removable: true,
+  rotate: -22,
+};

src/watermark/type.ts

@@ -0,0 +1,122 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdWatermarkProps {
+  /**
+   * 水印整体透明度，取值范围 [0-1]
+   * @default 1
+   */
+  alpha?: number;
+  /**
+   * 水印所覆盖的内容节点，同 `content`
+   */
+  children?: TNode;
+  /**
+   * 水印所覆盖的内容节点
+   */
+  content?: TNode;
+  /**
+   * 水印高度
+   */
+  height?: number;
+  /**
+   * 水印是否重复出现
+   * @default true
+   */
+  isRepeat?: boolean;
+  /**
+   * 行间距，只作用在多行（`content` 配置为数组）情况下
+   * @default 16
+   */
+  lineSpace?: number;
+  /**
+   * 水印是否可移动
+   * @default false
+   */
+  movable?: boolean;
+  /**
+   * 水印发生运动位移的间隙，单位：毫秒
+   * @default 3000
+   */
+  moveInterval?: number;
+  /**
+   * 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`
+   */
+  offset?: Array<number>;
+  /**
+   * 水印是否可被删除
+   * @default true
+   */
+  removable?: boolean;
+  /**
+   * 水印旋转的角度，单位 °
+   * @default -22
+   */
+  rotate?: number;
+  /**
+   * 水印内容，需要显示多行情况下可配置为数组
+   */
+  watermarkContent?: WatermarkText | WatermarkImage | Array<WatermarkText | WatermarkImage>;
+  /**
+   * 水印宽度
+   */
+  width?: number;
+  /**
+   * 水印之间的水平间距
+   */
+  x?: number;
+  /**
+   * 水印之间的垂直间距
+   */
+  y?: number;
+  /**
+   * 水印元素的 `z-index`，默认值写在 CSS 中
+   */
+  zIndex?: number;
+}
+
+export interface WatermarkText {
+  /**
+   * 水印文本文字颜色
+   * @default rgba(0,0,0,0.1)
+   */
+  fontColor?: string;
+  /**
+   * 水印文本文字字体
+   * @default ''
+   */
+  fontFamily?: string;
+  /**
+   * 水印文本文字大小
+   * @default 16
+   */
+  fontSize?: number;
+  /**
+   * 水印文本文字粗细
+   * @default normal
+   */
+  fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder';
+  /**
+   * 水印文本内容
+   * @default ''
+   */
+  text?: string;
+}
+
+export interface WatermarkImage {
+  /**
+   * 水印图片是否需要灰阶显示
+   * @default false
+   */
+  isGrayscale?: boolean;
+  /**
+   * 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图
+   * @default ''
+   */
+  url?: string;
+}

src/watermark/watermark.en-US.md

@@ -0,0 +1,44 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Watermark Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+alpha | Number | 1 | \- | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+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
+lineSpace | Number | 16 | \- | N
+movable | Boolean | false | \- | N
+moveInterval | Number | 3000 | \- | N
+offset | Array | - | Typescript：`Array<number>` | N
+removable | Boolean | true | \- | N
+rotate | Number | -22 | \- | N
+watermarkContent | Object / Array | - | Typescript：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | \- | N
+x | Number | - | \- | N
+y | Number | - | \- | N
+zIndex | Number | - | \- | N
+
+### WatermarkText
+
+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
+text | String | - | \- | N
+
+### WatermarkImage
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+isGrayscale | Boolean | false | \- | N
+url | String | - | \- | N

src/watermark/watermark.md

@@ -0,0 +1,44 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Watermark Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
+children | TNode | - | 水印所覆盖的内容节点，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+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
+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
+rotate | Number | -22 | 水印旋转的角度，单位 ° | N
+watermarkContent | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | 水印宽度 | N
+x | Number | - | 水印之间的水平间距 | N
+y | Number | - | 水印之间的垂直间距 | N
+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