feat(comp: watermark): add watermark component (IDuxFE#924)

packages/components/default.less

@@ -69,3 +69,4 @@
 @import './tree-select/style/themes/default.less';
 @import './typography/style/themes/default.less';
 @import './upload/style/themes/default.less';
+@import './watermark/style/themes/default.less';

packages/components/index.ts

@@ -67,6 +67,7 @@ import { IxTreeSelect } from '@idux/components/tree-select'
 import { IxTypography } from '@idux/components/typography'
 import { IxUpload, IxUploadFiles } from '@idux/components/upload'
 import { version } from '@idux/components/version'
+import { IxWatermark } from '@idux/components/watermark'
 
 const components = [
   IxAffix,
@@ -161,6 +162,7 @@ const components = [
   IxTreeSelect,
   IxUpload,
   IxUploadFiles,
+  IxWatermark,
 ]
 
 const directives: Record<string, Directive> = {
@@ -244,3 +246,4 @@ export * from '@idux/components/tree-select'
 export * from '@idux/components/typography'
 export * from '@idux/components/upload'
 export * from '@idux/components/version'
+export * from '@idux/components/watermark'

packages/components/style/variable/prefix.less

@@ -91,6 +91,7 @@
 @stepper-prefix: ~'@{idux-prefix}-stepper';
 @stepper-item-prefix: ~'@{idux-prefix}-stepper-item';
 @affix-prefix: ~'@{idux-prefix}-affix';
+@watermark-prefix: ~'@{idux-prefix}-watermark';
 
 // Private
 @checkable-list-prefix: ~'@{idux-prefix}-checkable-list';

packages/components/types.d.ts

@@ -72,6 +72,7 @@ import type { TooltipComponent } from '@idux/components/tooltip'
 import type { TransferComponent } from '@idux/components/transfer'
 import type { TreeComponent } from '@idux/components/tree'
 import type { UploadComponent, UploadFilesComponent } from '@idux/components/upload'
+import type { WatermarkComponent } from '@idux/components/watermark'
 
 declare module 'vue' {
   export interface GlobalComponents {
@@ -164,6 +165,7 @@ declare module 'vue' {
     IxTree: TreeComponent
     IxUpload: UploadComponent
     IxUploadFiles: UploadFilesComponent
+    IxWatermark: WatermarkComponent
   }
 }
 

packages/components/watermark/__tests__/__snapshots__/watermark.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`Watermark > xxx work 1`] = `
+"<div class=\\"ix-watermark\\">
+  <!---->
+  <div class=\\"ix-watermark-canvas\\" style=\\"z-index: 11; background-size: 332px; background-image: url();\\"></div>
+</div>"
+`;
+
+exports[`Watermark > xxx work 2`] = `
+"<div class=\\"ix-watermark\\" xxx=\\"Yyy\\">
+  <!---->
+  <div class=\\"ix-watermark-canvas\\" style=\\"z-index: 11; background-size: 332px; background-image: url();\\"></div>
+</div>"
+`;

packages/components/watermark/__tests__/watermark.spec.ts

@@ -0,0 +1,25 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import Watermark from '../src/Watermark'
+import { WatermarkProps } from '../src/types'
+
+describe('Watermark', () => {
+  const WatermarkMount = (options?: MountingOptions<Partial<WatermarkProps>>) =>
+    mount(Watermark, { ...(options as MountingOptions<WatermarkProps>) })
+
+  renderWork<WatermarkProps>(Watermark, {
+    props: {},
+  })
+
+  test('watermark work', async () => {
+    const wrapper = WatermarkMount({ props: { content: 'Xxx' } })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ xxx: 'Yyy' })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

packages/components/watermark/demo/Basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 基本使用
+  en: Basic usage
+---
+
+## zh
+
+最简单的用法。通过`content`传入水印内容，可传入数组作为多行文本水印。
+
+## en
+
+The simplest usage.

packages/components/watermark/demo/Basic.vue

@@ -0,0 +1,26 @@
+<template>
+  <IxWatermark density="mid" :content="['@iDux', '2022.5.25 14:00']">
+    <article v-typography>
+      <h1 v-typography>深圳</h1>
+      <p v-typography>
+        深圳，简称“深”，别称鹏城，是<strong>广东省副省级市、计划单列市、超大城市，国务院批复确定的中国经济特区、全国性经济中心城市和国际化城市</strong>。截至2019年末，全市下辖9个区，总面积1997.47平方千米，建成区面积927.96平方千米，常住人口1343.88万人，比上年末增加41.22万人。其中常住户籍人口494.78万人，常住非户籍人口849.10万人。
+      </p>
+      <p v-typography>
+        深圳地处中国华南地区、广东南部、珠江口东岸，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，是粤港澳大湾区四大中心城市之一、国家物流枢纽、国际性综合交通枢纽、国际科技产业创新中心、中国三大全国性金融中心之一，并全力建设中国特色社会主义先行示范区、综合性国家科学中心、全球海洋中心城市。深圳水陆空铁口岸俱全，是中国拥有口岸数量最多、出入境人员最多、车流量最大的口岸城市。
+      </p>
+      <h2 v-typography>深圳辖区概况</h2>
+      <ul>
+        <li>福田区</li>
+        <li>罗湖区</li>
+        <li>南山区</li>
+        <li>盐田区</li>
+        <li>宝安区</li>
+        <li>龙岗区</li>
+        <li>龙华区</li>
+        <li>坪山区</li>
+        <li>光明区</li>
+        <li>大鹏新区</li>
+      </ul>
+    </article>
+  </IxWatermark>
+</template>

packages/components/watermark/demo/Custom.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh: 自定义
+  en: custom usage
+---
+
+## zh
+
+丰富的自定义用法，另有部分隐藏属性可提供更多样的控制
+
+## en
+
+The custom usage.

packages/components/watermark/demo/Custom.vue

@@ -0,0 +1,13 @@
+<template>
+  <IxWatermark
+    :rotate="30"
+    :opacity="0.2"
+    content="你好 iDux🚀"
+    font="small-caps bold 24px HGKY_CNKI"
+    fontColor="#1c6eff"
+    :fontSize="24"
+    :offsetLeft="10"
+  >
+    <div style="height: 500px"></div>
+  </IxWatermark>
+</template>

packages/components/watermark/demo/HighDensity.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh: 水印密度
+  en: density usage
+---
+
+## zh
+
+可通过`density`参数对水印密度进行三档控制，分别为`low`、`mid`、`high`
+
+## en
+
+The simplest usage.

packages/components/watermark/demo/HighDensity.vue

@@ -0,0 +1,108 @@
+<template>
+  <IxWatermark density="high" content="@iDux">
+    <IxTable :columns="columns" :dataSource="data" :borderless="false" :scroll="scroll">
+      <template #name="{ value }">
+        <a>{{ value }}</a>
+      </template>
+    </IxTable>
+  </IxWatermark>
+</template>
+<script lang="ts" setup>
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  street: string
+  building: string
+  number: number
+  companyAddress: string
+  companyName: string
+  gender: string
+}
+
+const columns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+    width: 100,
+    fixed: 'start',
+    customCell: 'name',
+  },
+  {
+    title: 'Other',
+    children: [
+      {
+        title: 'Age',
+        dataKey: 'age',
+        width: 150,
+      },
+      {
+        title: 'Address',
+        children: [
+          {
+            title: 'Street',
+            dataKey: 'street',
+            key: 'street',
+            width: 150,
+          },
+          {
+            title: 'Block',
+            children: [
+              {
+                title: 'Building',
+                dataKey: 'building',
+                width: 100,
+              },
+              {
+                title: 'Door No.',
+                dataKey: 'number',
+                width: 100,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Company',
+    children: [
+      {
+        title: 'Company Address',
+        dataKey: 'companyAddress',
+        width: 200,
+      },
+      {
+        title: 'Company Name',
+        dataKey: 'companyName',
+      },
+    ],
+  },
+  {
+    title: 'Gender',
+    dataKey: 'gender',
+    width: 80,
+    fixed: 'end',
+  },
+]
+
+const data: Data[] = []
+
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: 'John Brown',
+    age: i + 1,
+    street: 'Lake Park',
+    building: 'C',
+    number: 2035,
+    companyAddress: 'Lake Street 42',
+    companyName: 'SoftLake Co',
+    gender: 'M',
+  })
+}
+
+const scroll = { width: 'calc(700px + 50%)', height: 300 }
+</script>

packages/components/watermark/demo/Image.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh: 图像水印
+  en: image watermark
+---
+
+## zh
+
+通过`type`指定水印类型为`image`，并通过`content`图片地址。为保证图片高清且不被拉伸，请传入水印图片的宽高 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。
+
+## en
+
+The simplest usage.

packages/components/watermark/demo/Image.vue

@@ -0,0 +1,11 @@
+<template>
+  <IxWatermark
+    type="image"
+    :width="80"
+    :height="80"
+    :opacity="0.3"
+    content="https://idux.site/icons/comp-properties-1.png"
+  >
+    <div style="height: 500px"></div>
+  </IxWatermark>
+</template>

packages/components/watermark/docs/Design.en.md

@@ -0,0 +1,3 @@
+## Description
+
+## Usage scenarios

packages/components/watermark/docs/Design.zh.md

@@ -0,0 +1,7 @@
+## 组件定义
+
+提供了为页面区域加印水印的功能
+
+## 使用场景
+
+当页面需要添加水印标识版权、内部系统防泄密追责等时可使用，组件可提供便捷高可自定义的水印功能，且具备一定程度的水印防篡改能力

packages/components/watermark/docs/Index.en.md

@@ -0,0 +1,29 @@
+---
+category: components
+type: Other
+order: 0
+title: Watermark
+subtitle:
+---
+
+## API
+
+### IxWatermark
+
+#### WatermarkProps
+
+| Name | Description | Type | Default | Global Config | Remark |
+| --- | --- | --- | --- | --- | --- |
+| - | - | - | - | ✅ | - |
+
+#### WatermarkSlots
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |
+
+#### WatermarkMethods
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |

packages/components/watermark/docs/Index.zh.md

@@ -0,0 +1,34 @@
+---
+category: components
+type: 其他
+order: 0
+title: Watermark
+subtitle: 水印
+---
+
+## API
+
+### IxWatermark
+
+#### WatermarkProps
+
+| 名称 | 说明 | 类型  | 默认值               | 全局配置 | 备注 |
+| --- | --- | --- |-------------------| --- | --- |
+| `width`       | 水印宽度     | `number`                          | `120`             | - | 图片水印前置参数 |
+|`height`| 水印高度    | `number` | `64`              | - |图片水印前置参数|
+| `content` | 水印内容 | `string \| string[]`         | - | - | 根据type值传入相应内容:<br>  `text`: 默认单行文本水印，支持多行文本，需传入字符串数组 <br>`image`: 图像水印 为保证图片高清且不被拉伸，需同时传入水印图片的宽高 width 和 height，建议使用2倍或3倍图源 |
+| `density` | 水印密度 | `'low'\| 'mid'\            |'high'` | `'low'` | - | 修改默认密度后，会根据输入的其它参数进行动态调整 |
+| `disabled` | 禁用水印 | `boolean` | `false`           | - | - |
+| `font`  | 字体样式       | `string`                          | `16px sans-serif` | - | 可控制字体粗细、字体类别等细节，请注意尽量使用`px`作为字体大小单位，[具体配置参考 CSS font](https://developer.mozilla.org/docs/Web/CSS/font) |
+| `fontColor`   | 字体颜色 | `string` | `rgba(0,0,0,.15)` | - | - |
+| `fontSize`    | 字体大小     | `number`                          | `16`              | - | 优先级高于`font`配置，但`font`配置时需注意必须包含CSS `fontSize`属性 |
+| `opacity` | 水印透明度   | `number`               | `1`               | - | 默认透明度已由fontColor控制 |
+| `rotate` | 水印旋转角度 | `number` | `-22`             | - | 单位：度 |
+| `type` | 水印类型 | `'text' \| 'image'`          | `'text'` | - | 不同的类型需要的`content`数据不同 |
+| `zIndex` | 水印层叠顺序 | `number` | `11`              | - | - |
+
+#### WatermarkSlots
+
+| 名称 | 说明 |
+| --- | --- |
+| `default` | 需水印覆盖的区域内容 |