feat: watermark

2025-06-30 02:35:08 +08:00 · 2022-04-08 16:42:35 +08:00 · 2022-04-08 16:42:35 +08:00 · 9d2fed3d36
commit 9d2fed3d36
parent b5184a4e7d
11 changed files with 262 additions and 1 deletions
--- a/build.config.js
+++ b/build.config.js
@ -20,6 +20,7 @@ module.exports = {
        'fes-plugin-pinia',
        'fes-preset-built-in',
        'fes-plugin-windicss',
+        'fes-plugin-watermark',
        'fes-runtime',
        'fes-utils'
    ],
--- a/packages/fes-plugin-watermark/LICENSE
+++ b/packages/fes-plugin-watermark/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present webank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/packages/fes-plugin-watermark/README.md
+++ b/packages/fes-plugin-watermark/README.md
@ -0,0 +1,64 @@
+
+## Fes.js 是什么？
+Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
+
+它主要具备以下功能：
+- 🚀  __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。  
+  
+- 🧨  __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
+
+- 💪  __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
+
+- 📦  __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
+
+- 📡  __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
+
+## 插件
+
+|  插件   | 介绍  | 
+|  ----  | ----  |
+| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Vuex`, 提供状态管理能力 |
+| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) |  基于 `qiankun`，提供微服务能力 |
+| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) |  样式支持sass |
+| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
+| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+
+## 像数 1, 2, 3 一样容易
+使用 `yarn`：
+```bash
+# 创建模板
+yarn create @fesjs/fes-app myapp
+
+# 安装依赖
+yarn 
+
+# 运行
+yarn dev
+```
+
+使用 `npm`：
+```bash
+# 创建模板
+npx @fesjs/create-fes-app myapp
+
+# 安装依赖
+npm install 
+
+# 运行
+npm run dev
+```
+
+## 反馈
+
+请联系开源助手加入微信群：    
+
+<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 
--- a/packages/fes-plugin-watermark/build.config.js
+++ b/packages/fes-plugin-watermark/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-watermark/package.json
+++ b/packages/fes-plugin-watermark/package.json
@ -0,0 +1,37 @@
+{
+  "name": "@fesjs/plugin-watermark",
+  "version": "2.0.0",
+  "description": "@fesjs/plugin-watermark",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-plugin-watermark"
+  },
+  "keywords": [
+    "fes"
+  ],
+  "author": "harrywan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fesjs/utils": "^2.0.4",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@fesjs/fes": "^2.0.0",
+    "vue": "^3.0.5"
+  }
+}
--- a/packages/fes-plugin-watermark/src/index.js
+++ b/packages/fes-plugin-watermark/src/index.js
@ -0,0 +1,35 @@
+import { join } from 'path';
+
+const namespace = 'plugin-watermark';
+
+export default (api) => {
+    api.describe({
+        key: 'watermark',
+        config: {
+            schema(joi) {
+                return joi.object({
+                    roles: joi.object()
+                });
+            },
+            default: {}
+        }
+    });
+
+    const absoluteFilePath = join(namespace, 'core.js');
+
+
+    api.onGenerateFiles(() => {
+        api.copyTmpFiles({
+            namespace,
+            path: join(__dirname, 'runtime'),
+            ignore: ['.tpl']
+        });
+    });
+
+    api.addPluginExports(() => [
+        {
+            specifiers: ['createWatermark'],
+            source: absoluteFilePath
+        }
+    ]);
+};
--- a/packages/fes-plugin-watermark/src/runtime/core.js
+++ b/packages/fes-plugin-watermark/src/runtime/core.js
@ -0,0 +1,79 @@
+// canvas 实现 watermark
+export function createWatermark({
+    container = document.body,
+    width = '300px',
+    height = '200px',
+    textAlign = 'center',
+    textBaseline = 'middle',
+    font = '18px Microsoft Yahei',
+    fillStyle = 'rgba(184, 184, 184, 0.15)',
+    content = '请勿外传',
+    rotate = '30',
+    zIndex = 99999
+} = {}) {
+    const param = {
+        container,
+        width,
+        height,
+        textAlign,
+        textBaseline,
+        font,
+        fillStyle,
+        content,
+        rotate,
+        zIndex
+    };
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('width', width);
+    canvas.setAttribute('height', height);
+
+    const ctx = canvas.getContext('2d');
+    ctx.textAlign = textAlign;
+    ctx.textBaseline = textBaseline;
+    ctx.font = font;
+    ctx.fillStyle = fillStyle;
+    ctx.translate(parseFloat(width) / 2, parseFloat(height) / 2);
+    ctx.rotate((Math.PI / 180) * rotate);
+    ctx.fillText(content, 0, 0);
+
+    let __wm = document.querySelector('.__wm');
+    const watermarkDiv = __wm || document.createElement('div');
+    const styleStr = `
+    position: absolute;
+    user-select: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: ${zIndex};
+    pointer-events: none !important;
+    background-repeat: repeat;
+    background-image: url('${canvas.toDataURL()}')`;
+
+    watermarkDiv.setAttribute('style', styleStr);
+    watermarkDiv.classList.add('__wm');
+
+    if (!__wm) {
+        container.style.position = 'relative';
+        container.insertBefore(watermarkDiv, container.firstChild);
+    }
+
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+    if (MutationObserver) {
+        let mo = new MutationObserver(() => {
+            __wm = document.querySelector('.__wm');
+            if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
+                // 避免一直触发
+                mo.disconnect();
+                mo = null;
+                createWatermark(param);
+            }
+        });
+
+        mo.observe(container, {
+            attributes: true,
+            subtree: true,
+            childList: true
+        });
+    }
+}
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@ -12,6 +12,7 @@ export default {
    router: {
        mode: 'hash'
    },
+    watermark: {},
    access: {
        roles: {
            admin: ['*'],
--- a/packages/fes-template/package.json
+++ b/packages/fes-template/package.json
@ -60,6 +60,7 @@
    "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
    "@fesjs/plugin-windicss": "^2.0.0",
    "@fesjs/plugin-pinia": "^2.0.0",
+    "@fesjs/plugin-watermark": "^2.0.0",
    "@fesjs/fes-design": "^0.3.3",
    "vue": "^3.0.5",
    "vuex": "^4.0.0",
--- a/packages/fes-template/src/app.js
+++ b/packages/fes-template/src/app.js
@ -1,6 +1,6 @@


-import { access as accessApi, pinia } from '@fesjs/fes';
+import { access as accessApi, pinia, createWatermark } from '@fesjs/fes';
 import PageLoading from '@/components/PageLoading';
 import UserCenter from '@/components/UserCenter';
 import { useStore } from '@/store/main';
@ -19,6 +19,7 @@ export const beforeRender = {
                resolve({
                    userName: '李雷'
                });
+                createWatermark({ content: '李雷李雷李雷李雷' });
            }, 1000);
        });
    }
--- a/yarn.lock
+++ b/yarn.lock
@ -211,6 +211,15 @@
    eslint-visitor-keys "^2.1.0"
    semver "^6.3.0"

+"@babel/generator@^7.15.0":
+  version "7.17.9"
+  resolved "https://registry.npmmirror.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
+  integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.16.7", "@babel/generator@^7.16.8", "@babel/generator@^7.7.2":
  version "7.16.8"
  resolved "https://registry.npmmirror.com/@babel/generator/download/@babel/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe"
@ -1214,6 +1223,14 @@
    "@babel/helper-validator-identifier" "^7.16.7"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.npmmirror.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
  version "0.2.3"
  resolved "https://registry.npmmirror.com/@bcoe/v8-coverage/download/@bcoe/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"