watermark-kit

独立的水印内容生成器和 DOM 渲染器，支持内置字段、字段注册、自定义取值逻辑、脱敏、当前时间和指定 DOM 容器渲染。

安装

npm install watermark-kit

使用

import {
  createWatermarkGenerator,
  createWatermarkRenderer
} from 'watermark-kit'

const generator = createWatermarkGenerator({
  fields: {
    loginSource: {
      fieldName: '登录来源',
      resolve: { type: 'constant', value: '后台管理' }
    }
  }
})

const userInfo = {
  username: '张三',
  orgName: '技术研发部'
}

const result = await generator.generate({
  enabled: true,
  options: [
    { property: 'username', hideSomeCharacter: true },
    { property: 'orgName' },
    { property: 'loginSource' },
    { property: 'currentTime' }
  ]
}, userInfo)

const renderer = createWatermarkRenderer()
renderer.render(result.content, document.querySelector('#app'))

普通字段默认按 property 从 userInfo 读取。localIp 可以通过配置项的 value 传入已解析的客户端 IP：

{ property: 'localIp', value: '172.30.4.97' }

manualContent 用于直接渲染配置中的 content，不依赖 userInfo：

{ property: 'manualContent', content: 'zqy科技' }

手机号、身份证号和邮箱支持通过 hideSomeCharacter 开启内置脱敏：

options: [
  { property: 'phoneNo', hideSomeCharacter: true },
  { property: 'idNumber', hideSomeCharacter: true },
  { property: 'email', hideSomeCharacter: true }
]

内置字段包括：manualContent、account、username、phoneNo、idNumber、orgName、gender、birthDate、politicalOutlook、nation、post、email、localIp、currentTime。

自定义字段

generator.registerField({
  fieldCode: 'department',
  aliases: ['departmentName'],
  resolve: ({ userInfo }) => userInfo.departmentName
})

也可以使用配置式解析：constant、path、template、time、localIp。

Vue 插件

import { createApp } from 'vue'
import { watermarkGeneratorPlugin, watermarkRendererPlugin } from 'watermark-kit'

const app = createApp(App)
app.use(watermarkGeneratorPlugin)
app.use(watermarkRendererPlugin)

示例

examples/basic.html 可以直接通过静态服务器打开。项目根目录执行：

npx vite --host 127.0.0.1

然后访问 /examples/basic.html。

构建与发布

npm run build
npm run pack:check
npm publish --access public