新增 watermark 组件 (#921)

* feat(watermark): add watermark component

watermark component

* style(watermark): remove unuse code

* refactor(watermark): import style

* feat(watermark): watermark CR

examples/watermark/demos/base.vue

@@ -0,0 +1,11 @@
+<template>
+  <t-watermark
+    :watermark-content="{
+      text: '文字水印',
+    }"
+    :y="120"
+    :x="80"
+  >
+    <div style="height: 300px" />
+  </t-watermark>
+</template>

examples/watermark/demos/graylevel.vue

@@ -0,0 +1,15 @@
+<template>
+  <t-watermark
+    :watermark-content="{
+      url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+      isGrayscale: true,
+    }"
+    :x="100"
+    :y="140"
+    :width="158"
+    :height="22"
+    :alpha="0.3"
+  >
+    <div style="height: 300px" />
+  </t-watermark>
+</template>

examples/watermark/demos/image.vue

@@ -0,0 +1,15 @@
+<template>
+  <t-watermark
+    :watermark-content="{
+      url: 'https://tdesign.gtimg.com/site/logo-watermark.svg',
+    }"
+    :width="104"
+    :height="65.5"
+    :x="90"
+    :y="100"
+    :rotate="0"
+    :removable="false"
+  >
+    <div style="height: 300px" />
+  </t-watermark>
+</template>

examples/watermark/demos/movingImage.vue

@@ -0,0 +1,12 @@
+<template>
+  <t-watermark
+    :watermark-content="{
+      url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+    }"
+    movable
+    :width="158"
+    :height="22"
+  >
+    <div style="height: 300px" />
+  </t-watermark>
+</template>

examples/watermark/demos/movingText.vue

@@ -0,0 +1,10 @@
+<template>
+  <t-watermark
+    :watermark-content="{
+      text: '文字水印',
+    }"
+    movable
+  >
+    <div style="height: 300px" />
+  </t-watermark>
+</template>

examples/watermark/demos/multiline.vue

@@ -0,0 +1,16 @@
+<template>
+  <t-watermark
+    :watermark-content="[
+      { text: '水印文本', fontColor: 'black' },
+      { url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png' },
+    ]"
+    :line-space="24"
+    :x="100"
+    :y="120"
+    :width="158"
+    :height="22"
+    :alpha="0.3"
+  >
+    <div style="height: 300px" />
+  </t-watermark>
+</template>

examples/watermark/usage/index.vue

@@ -0,0 +1,35 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
+    <template #watermark="{ configProps }"
+      ><t-watermark
+        v-bind="configProps"
+        :watermark-content="{
+          text: '文字水印',
+        }"
+        :y="120"
+        :x="80"
+      >
+        <div style="height: 300px" /> </t-watermark
+    ></template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'watermark', value: 'watermark' }];
+
+const usageCodeMap = {
+  watermark:
+    '\n        <t-watermark\n          v-bind="configProps"\n          :watermark-content="{\n            text: \'文字水印\',\n          }"\n          :y="120"\n          :x="80"\n        >\n          <div style="height: 300px" />\n        </t-watermark>\n      ',
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>

examples/watermark/usage/props.json

@@ -0,0 +1,20 @@
+[
+  {
+    "name": "removable",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "movable",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "isRepeat",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  }
+]

examples/watermark/watermark.md

@@ -0,0 +1,40 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
+content | String / Slot / Function | - | 水印所覆盖的内容节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 水印所覆盖的内容节点，同 `content`。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/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
+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

script/generate-usage/config.js

@@ -541,6 +541,22 @@ module.exports = {
       `,
     },
   },
+  watermark: {
+    panelStr: `const panelList = [{label: 'watermark', value: 'watermark'}];`,
+    render: {
+      watermark: `
+        <t-watermark
+          v-bind="configProps"
+          :watermark-content="{
+            text: '文字水印',
+          }"
+          :y="120"
+          :x="80"
+        ><div style="width:height: 200px" /></t-watermark>
+      `,
+    },
+  },
+
   dialog: {
     panelStr: `const panelList = [{label: 'dialog', value: 'dialog'}];`,
     script: `

site/site.config.mjs

@@ -382,6 +382,13 @@ export default {
           path: '/vue-next/components/tree',
           component: () => import('@/examples/tree/tree.md'),
         },
+        {
+          title: 'Watermark 水印',
+          name: 'watermark',
+          docType: 'data',
+          path: '/vue-next/components/watermark',
+          component: () => import('@/examples/watermark/watermark.md'),
+        },
       ],
     },
     {

src/components.ts

@@ -54,6 +54,7 @@ export * from './tag';
 export * from './tooltip';
 export * from './tree';
 export * from './collapse';
+export * from './watermark';
 
 // 消息提醒
 

src/watermark/hooks.ts

@@ -0,0 +1,75 @@
+import type { ComponentPublicInstance, Ref } from 'vue';
+import { unref, watch, getCurrentScope, onScopeDispose } from 'vue';
+
+export const defaultWindow = typeof window !== 'undefined' ? window : undefined;
+export interface ConfigurableWindow {
+  window?: Window;
+}
+// eslint-disable-next-line no-undef
+export interface MutationObserverOptions extends MutationObserverInit, ConfigurableWindow {}
+export type MaybeRef<T> = T | Ref<T>;
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance
+  ? Exclude<MaybeElement, VueInstance>
+  : T | undefined;
+
+export type Fn = () => void;
+
+export function unrefElement<T extends MaybeElement>(elRef: MaybeElementRef<T>): UnRefElementReturn<T> {
+  const plain = unref(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}
+export function tryOnScopeDispose(fn: Fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+export function useMutationObserver(
+  target: MaybeElementRef,
+  // eslint-disable-next-line no-undef
+  callback: MutationCallback,
+  options: MutationObserverOptions = {},
+) {
+  const { window = defaultWindow, ...mutationOptions } = options;
+  let observer: MutationObserver | undefined;
+  const isSupported = window && 'MutationObserver' in window;
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const stopWatch = watch(
+    () => unrefElement(target),
+    (el) => {
+      cleanup();
+
+      if (isSupported && window && el) {
+        observer = new MutationObserver(callback);
+        observer.observe(el, mutationOptions);
+      }
+    },
+    { immediate: true },
+  );
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    stop,
+  };
+}
+
+export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;

src/watermark/index.ts

@@ -0,0 +1,7 @@
+import _Watermark from './watermark';
+import withInstall from '../utils/withInstall';
+
+export * from './type';
+
+export const Watermark = withInstall(_Watermark);
+export default Watermark;

src/watermark/props.ts

@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdWatermarkProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 水印整体透明度，取值范围 [0-1] */
+  alpha: {
+    type: Number,
+    default: 1,
+  },
+  /** 水印所覆盖的内容节点 */
+  content: {
+    type: [String, Function] as PropType<TdWatermarkProps['content']>,
+  },
+  /** 水印所覆盖的内容节点，同 `content` */
+  default: {
+    type: [String, Function] as PropType<TdWatermarkProps['default']>,
+  },
+  /** 水印高度 */
+  height: {
+    type: Number,
+  },
+  /** 水印是否重复出现 */
+  isRepeat: {
+    type: Boolean,
+    default: true,
+  },
+  /** 行间距，只作用在多行（`content` 配置为数组）情况下 */
+  lineSpace: {
+    type: Number,
+    default: 16,
+  },
+  /** 水印是否可移动 */
+  movable: Boolean,
+  /** 水印发生运动位移的间隙，单位：毫秒 */
+  moveInterval: {
+    type: Number,
+    default: 3000,
+  },
+  /** 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` */
+  offset: {
+    type: Array as PropType<TdWatermarkProps['offset']>,
+  },
+  /** 水印是否可被删除，默认会开启水印节点防删 */
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 水印旋转的角度，单位 ° */
+  rotate: {
+    type: Number,
+    default: -22,
+  },
+  /** 水印内容，需要显示多行情况下可配置为数组 */
+  watermarkContent: {
+    type: [Object, Array] as PropType<TdWatermarkProps['watermarkContent']>,
+  },
+  /** 水印宽度 */
+  width: {
+    type: Number,
+  },
+  /** 水印之间的水平间距 */
+  x: {
+    type: Number,
+  },
+  /** 水印之间的垂直间距 */
+  y: {
+    type: Number,
+  },
+  /** 水印元素的 `z-index`，默认值写在 CSS 中 */
+  zIndex: {
+    type: Number,
+  },
+};