feat(index): add watermark component (#321)

* feat(index): add watermark component * feat(watermark): add watermrk of react
hellof2e · Dec 26, 2023 · a22d870 · a22d870
1 parent 505f985
commit a22d870
Show file tree

Hide file tree

Showing 14 changed files with 681 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-      "source.fixAll": true
+      "source.fixAll": "explicit"
     },
     "files.associations": {
       "*.vue": "html"

diff --git a/example/src/config.json b/example/src/config.json
@@ -188,6 +188,16 @@
 					"show": true,
 					"desc": "标签",
 					"author": "MrZhao"
+				},
+				{
+					"version": "0.0.1",
+					"name": "WaterMark",
+					"sort": 1,
+					"cName": "水印",
+					"type": "component",
+					"show": true,
+					"desc": "水印",
+					"author": "zcl"
 				}
 			]
 		},

diff --git a/example/src/sites/doc/router.ts b/example/src/sites/doc/router.ts
@@ -8,6 +8,7 @@ const pagesRouter: Array<RouteRecordRaw> = [];
 const modulesPage = import.meta.glob(
 	`../../../../packages/quarkd/src/**/doc.zh-CN.md`
 );
+
 for (const path in modulesPage) {
 	const name = (/src\/(.*)\/doc.zh-CN.md/.exec(path) as any[])[1];
 	pagesRouter.push({
@@ -83,8 +84,6 @@ routes.push({
 	},
 });
 
-console.log(routes, 1);
-
 const router = createRouter({
 	history: createWebHashHistory(),
 	routes,

diff --git a/packages/quark-react/src/watermark/index.ts b/packages/quark-react/src/watermark/index.ts
@@ -0,0 +1,12 @@
+import { FC } from "react";
+import reactify from "@quarkd/reactify";
+import "quarkd/lib/watermark";
+import { Props } from "quarkd/lib/watermark";
+import { componentBaseInterface, ReactifyProps } from "../type";
+
+type WaterMarkProps = componentBaseInterface &
+  ReactifyProps<Props, Record<string, never>>;
+type componentType = FC<WaterMarkProps>;
+
+const WaterMark = reactify("quark-watermark") as componentType;
+export default WaterMark;
diff --git a/packages/quarkd/src/index.ts b/packages/quarkd/src/index.ts
@@ -52,6 +52,7 @@ import Calendar from "./calendar";
 import Swipecell from "./swipecell";
 import PickerView from "./pickerview";
 import DropdownMenu from "./dropdownmenu";
+import WaterMark from "./watermark";
 
 //  业务组件
 import PopupExtra from "./popupextra";
@@ -119,4 +120,5 @@ export default {
   Swipecell,
   PickerView,
   DropdownMenu,
+  WaterMark,
 };
diff --git a/packages/quarkd/src/watermark/demo.scss b/packages/quarkd/src/watermark/demo.scss
@@ -0,0 +1,17 @@
+.demo {
+  background: #ffffff;
+
+  .demo-buttons {
+    quark-button {
+      margin: 8px;
+    }
+  }
+  .flex {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    quark-button {
+      margin: 4px;
+    }
+  }
+}
diff --git a/packages/quarkd/src/watermark/demo.vue b/packages/quarkd/src/watermark/demo.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="demo">
+    <quark-watermark
+      ref="watermark"
+      :text="text"
+      class="demo-watermark"
+      :image="image"
+      :width="width"
+      :height="height"
+      :rotate="rotate"
+      :gapx="gapx"
+      :gapy="gapy"
+    />
+    <h2>{{ translate("title.default") }}</h2>
+    <div class="demo-buttons">
+      <quark-button type="primary" @click="changeText">{{
+        translate("button.normal")
+      }}</quark-button>
+      <quark-button type="primary" @click="changeImage">{{
+        translate("button.image")
+      }}</quark-button>
+      <quark-button type="primary" @click="changeGap">{{
+        translate("button.gap")
+      }}</quark-button>
+      <quark-button type="primary" @click="changeMultiText">{{
+        translate("button.multiLine")
+      }}</quark-button>
+    </div>
+  </div>
+</template>
+<script>
+import { onBeforeMount } from "vue";
+import { createComponent } from "@/utils/create";
+const { createDemo, translate } = createComponent("watermark");
+import { useTranslate } from "@/sites/assets/util/useTranslate";
+import { ref } from "vue";
+
+export default createDemo({
+  setup() {
+    onBeforeMount(() => {
+      useTranslate({
+        "zh-CN": {
+          title: {
+            default: "基础用法",
+          },
+          button: {
+            normal: "文字水印",
+            multiLine: "多行水印",
+            image: "图片水印",
+            gap: "缩小间距",
+          },
+        },
+        "en-US": {
+          title: {
+            default: "basic usage",
+          },
+          button: {
+            normal: "Text Watermark",
+            image: "Image Watermark",
+            multiLine: "multiLine Watermark",
+            gap: "change gap",
+          },
+        },
+      });
+    });
+
+    const watermark = ref(null);
+
+    const image = ref("");
+
+    const text = ref("quark-design");
+
+    const width = ref(120);
+
+    const height = ref(64);
+
+    const rotate = ref(-22);
+
+    const gapx = ref(24);
+
+    const gapy = ref(48);
+
+    const changeText = () => {
+      height.value = "64";
+      width.value = "120";
+      rotate.value = "-22";
+      image.value = "";
+      if (watermark.value) watermark.value.setText("quark-design");
+    };
+
+    const changeImage = () => {
+      height.value = 36;
+      width.value = 100;
+      rotate.value = -12;
+      image.value =
+        "https://m.hellobike.com/resource/helloyun/16682/o7HKA_image.png?x-oss-process=image/quality,q_80";
+    };
+
+    const changeMultiText = () => {
+      height.value = 64;
+      width.value = 120;
+      rotate.value = -22;
+      image.value = "";
+      if (watermark.value)
+        watermark.value.setText(["quark-design", "A component library"]);
+    };
+
+    const changeGap = () => {
+      gapx.value = 12;
+      gapy.value = 24;
+    };
+
+    return {
+      watermark,
+      gapy,
+      gapx,
+      width,
+      height,
+      rotate,
+      image,
+      text,
+      translate,
+      changeText,
+      changeMultiText,
+      changeImage,
+      changeGap,
+    };
+  },
+});
+</script>
+<style src="./demo.scss"></style>
diff --git a/packages/quarkd/src/watermark/doc-react.en-US.md b/packages/quarkd/src/watermark/doc-react.en-US.md
@@ -0,0 +1,70 @@
+# Watermark
+
+### Intro
+
+Watermark - adding text or patterns on the page (applicable to preventing information theft scenarios)
+
+### Install
+
+```tsx
+import { Watermark } from "@quarkd/quark-react";
+```
+
+### Basic Usage
+
+```html
+<Watermark text="quark-design" />
+```
+
+### Image Watermark
+
+```html
+<Watermark
+  width="100"
+  height="36"
+  rotate="-12"
+  image="https://m.hellobike.com/resource/helloyun/16682/o7HKA_image.png?x-oss-process=image/quality,q_80"
+/>
+```
+
+### Adjust the watermark spacing
+
+```html
+<Watermark text="quark-design" gapy="24" gapx="48" />
+```
+
+### Multiline text watermark
+
+```js
+this.$refs.watermark.setText(["quark-design", "A component library"]);
+```
+
+## API
+
+### Props
+
+| Attribute | Description                                                                                                                     | Type                 | Default              |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
+| text      | watermark text content                                                                                                          | `string`             | `-`                  |
+| image     | For the source of watermark images, if both text and image are passed in, the image will be used to render the watermark first. | `string`             | `-`                  |
+| width     | watermark width                                                                                                                 | `string` or `number` | `120`                |
+| height    | watermark height                                                                                                                | `string` or `number` | `64`                 |
+| rotate    | The rotation angle when drawing the watermark,unit °                                                                            | `string` or `number` | `-22`                |
+| fontSize  | text size                                                                                                                       | `string` or `number` | `14`                 |
+| fontColor | text color                                                                                                                      | `string`             | `rgba(0, 0, 0, .15)` |
+| gapx      | horizontal spacing between watermarks                                                                                           | `string` or `number` | `24`                 |
+| gapy      | vertical spacing between watermarks                                                                                             | `string` or `number` | `48`                 |
+
+### Methods
+
+| Name    | Description                                                                    | Type                   |
+| ------- | ------------------------------------------------------------------------------ | ---------------------- |
+| setText | Set the watermark text. Multi-line text needs to be passed in through an array | `string` or `string[]` |
+
+## CSS Variables
+
+The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).
+
+| Name        | Description                 | Default |
+| ----------- | --------------------------- | ------- |
+| `--z-index` | switch z-index of Watermark | `2000`  |
diff --git a/packages/quarkd/src/watermark/doc-react.zh-CN.md b/packages/quarkd/src/watermark/doc-react.zh-CN.md
@@ -0,0 +1,70 @@
+# Watermark 水印
+
+### 介绍
+
+水印——在页面上添加文字或图案（适用于防止信息盗用场景）。
+
+### 安装使用
+
+```tsx
+import { Watermark } from "@quarkd/quark-react";
+```
+
+### 基本使用
+
+```html
+<Watermark text="quark-design" />
+```
+
+### 图片水印
+
+```html
+<Watermark
+  width="100"
+  height="36"
+  rotate="-12"
+  image="https://m.hellobike.com/resource/helloyun/16682/o7HKA_image.png?x-oss-process=image/quality,q_80"
+/>
+```
+
+### 调整水印间距
+
+```html
+<Watermark text="quark-design" gapy="24" gapx="48" />
+```
+
+### 多行文字水印
+
+```js
+this.$refs.watermark.setText(["quark-design", "A component library"]);
+```
+
+## API
+
+### Props
+
+| 参数      | 说明                                                       | 类型                 | 默认值               |
+| --------- | ---------------------------------------------------------- | -------------------- | -------------------- |
+| text      | 单行水印文字                                               | `string`             | `-`                  |
+| image     | 水印图片源，若同时传入 text 和 image，优先使用图片渲染水印 | `string`             | `-`                  |
+| width     | 水印宽度                                                   | `string` or `number` | `120`                |
+| height    | 水印高度                                                   | `string` or `number` | `64`                 |
+| rotate    | 水印绘制时，旋转的角度，单位 °                             | `string` or `number` | `-22`                |
+| fontSize  | 文字大小                                                   | `string` or `number` | `14`                 |
+| fontColor | 文字颜色                                                   | `string`             | `rgba(0, 0, 0, .15)` |
+| gapx      | 水印之间的水平间距                                         | `string` or `number` | `24`                 |
+| gapy      | 水印之间的垂直间距                                         | `string` or `number` | `48`                 |
+
+### 方法
+
+| 名称    | 说明                                 | 类型                   |
+| ------- | ------------------------------------ | ---------------------- |
+| setText | 设置水印文字，多行文字需通过数组传入 | `string` or `string[]` |
+
+## 样式变量
+
+组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。
+
+| 名称        | 说明           | 默认值 |
+| ----------- | -------------- | ------ |
+| `--z-index` | 水印的 z-index | `2000` |