---
group:
    title: 项目开发规范
title: 8.部分项目添加水印
---

# 添加水印代码

[comment]: <> (> 如使用antd@5.0的项目，则不需要使用额外的插件`@pansy/watermark`，而是直接使用antd自己的组件 Watermark)

安装包： [文档](https://watermark.xingkang.wang/example/core)
```
$ yarn add @pansy/watermark
```

## 方式一：watermark.json文件判断是否显示水印
> （此方式部署后固定，可修改watermark.json文件决定是否显示水印）
### 1.1 添加文件：`public/watermark.json`

```

{
  "code": 200,
  "data": {
    "extraContent": "",  // 额外显示的水印内容(目前默认显示账号+昵称，额外显示的将会换一行显示）
    "show": true         // 是否显示水印
  }
}
```

### 1.2 确认下request.js的request拦截器url配置有没有排除带http的

加入 `isUrl(url)`判断
```
 import {isUrl} from '@/utils/utls.js'
request.interceptors.request.use((url, options) => {
  const headers = Object.assign({
    ...options.headers
  }, {
    'token': localStorage.getItem(`${process.env.siteName}-token`), // => siteAuth-token
  });
  return (
    {
      url: isUrl(url) ? url : `${process.env.NODE_ENV === 'production' ? process.env.baseBuildApiPath : ''}${url}`, // 生产环境下，接口请求添加前缀 [IBMS: /spms-ibms-api],[旅游平台：/spms-trip-api]
      options: { ...options, headers },
    }
  );
});
```
### 1.3 添加水印代码 ：

#### 1.3.1 IBMS相关项目可按如下方式配置：

文件位置： `src/components/BasicLayout/BasicLayout.tsx`

```
import request from '@/utils/request';
import { Watermark } from '@pansy/watermark'; // 水印文档：https://watermark.xingkang.wang/example/core

  // /start 水印显示
  const watermark = useRef<Watermark>();
  useEffect(() => {
    const currentUserInfo = parse(window.localStorage.getItem(`${process.env.siteName}-userinfo`))
    request(`${window.location.origin}${process.env.baseBuildPath ? '/' + process.env.baseBuildPath : ''}/watermark.json`).then((res) => {
      if (res?.data?.show) {
        // const secretPhone = (phone) => {
        //   return phone.substr(0, 3) + "****" + phone.substring(7);
        // }
        // const secPhone =secretPhone(currentLoginUser?.mobile)
        watermark.current = new Watermark({
          gapX: 300,
          gapY: 300,
          text: [currentUserInfo?.account + " " + currentUserInfo?.nickname, res?.data?.extraContent || ''],
          container: 'root',
        });
      }
    })
    return () => {
      watermark?.current?.destroy?.();
    };
  }, []);
  // /end  水印显示
```

#### 1.3.2 嘉里/欧亚物业管理平台/丰田可按如下方式配置：

文件位置：`src/layouts/index.tsx`
```
 import {requset } from "umi";
 import { Watermark } from '@pansy/watermark'; // 水印文档：https://watermark.xingkang.wang/example/core

  const { initialState } = useModel('@@initialState');
  const currentUserInfo = initialState.currentUser || {};
  
 // /start 水印显示
  const watermark = useRef<Watermark>();
  useEffect(() => {
    request(`${window.location.origin}${process.env.baseBuildPath ? '/' + process.env.baseBuildPath : ''}/watermark.json`).then((res) => {
      if (res?.data?.show) {
        // const secretPhone = (phone) => {
        //   return phone.substr(0, 3) + "****" + phone.substring(7);
        // }
        // const secPhone =secretPhone(currentLoginUser?.mobile)
        watermark.current = new Watermark({
          gapX: 300,
          gapY: 300,
          text: [currentUserInfo?.account + " " + currentUserInfo?.nickname, res?.data?.extraContent || ''],
          container: 'root',
        });
      }
    })
    return () => {
      watermark?.current?.destroy?.();
    };
  }, []);
  // /end  水印显示
  
```

## 方式二：打包判断是否显示水印

> （此方式部署后固定显隐，无法更改）
> 
> 项目启动与打包将用 HAS_WATERMARK=show 判断是否显示水印


### 2.1 修改文件：`package.json`

添加scripts命令
``` 
// 打包 HAS_WATERMARK=show 这串，代表默认显示水印
"scripts" : {
 "build:sub:watermark": "cross-env Build_PATH=kerry-cloud-web API_PATH=kerry-cloud-api HAS_WATERMARK=show max build "
}
```

### 2.2 修改文件：`config.js`或`config.ts`

`define`新增值
```
const { HAS_WATERMARK } = process.env;

define: {
    'process.env.hasWatermark': HAS_WATERMARK
  },
```


### 2.3 修改文件：相关`layout`或`BasicLayout`页面内加入如下内容

>主要差别在于用户信息取值

#### 2.3.1 IBMS相关项目可按如下方式配置：

文件位置： `src/components/BasicLayout/BasicLayout.tsx`
``` 
  const watermark = useRef<Watermark>();
  useEffect(() => {
    const currentUserInfo = parse(window.localStorage.getItem(`${process.env.siteName}-userinfo`))
    // const secretPhone = (phone) => {
    //   return phone.substr(0, 3) + "****" + phone.substring(7);
    // }
    // const secPhone =secretPhone(currentUserInfo?.mobile)
    if (process.env.hasWatermark === 'show') {
      watermark.current = new Watermark({
        gapX: 300,
        gapY: 300,
        text: [currentUserInfo?.account + " " + currentUserInfo?.nickname],
        // blindText: '盲水印文本',
        container: 'root',
      });
    }


    return () => {
      if (process.env.hasWatermark === 'show') {
        watermark.current && watermark.current.destroy();
      }
    };
  }, []);
```
#### 2.3.2 嘉里/欧亚物业管理平台/丰田可按如下方式配置：
文件位置：`src/layouts/index.tsx`
```

  import { Watermark } from '@pansy/watermark'; // 水印文档：https://watermark.xingkang.wang/example/core

  const { initialState } = useModel('@@initialState');
  const currentUserInfo = initialState.currentUser || {};
  const watermark = useRef<Watermark>();
  useEffect(() => {
    // const secretPhone = (phone) => {
    //   return phone.substr(0, 3) + "****" + phone.substring(7);
    // }
    // const secPhone =secretPhone(currentLoginUser?.mobile)
    if (process.env.hasWatermark === 'show') {
      watermark.current = new Watermark({
        gapX: 300,
        gapY: 300,
        text: [currentUserInfo?.account + " " + currentUserInfo?.nickname],
        // blindText: '盲水印文本',
        container: 'root',
      });
    }

    return () => {
      if (process.env.hasWatermark === 'show') {
        watermark.current && watermark.current.destroy();
      }
    };
  }, []);
  
```