水印组件

https://procomponents.ant.design/components/water-mark

import { WaterMark } from '@ant-design/pro-components';
<WaterMark
  rotate={-22}
  content='示例水印'
  fontColor='rgba(0,0,0,.15)'
  fontSize={16}
  zIndex={9}
>
  <div>xxx</div>
</WaterMark>

page-container 的水印

打开下面的文章,搜索watermark

https://procomponents.ant.design/components/page-container

里面有句话

“配置水印,Layout 会透传给 PageContainer,但是以 PageContainer 的配置优先”

说明在Layout是可以设置的


怎么设置?

在app.tsx的layout配置中,添加或者修改waterMarkProps,如下所示

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.userId + ' ' + initialState?.currentUser?.name,
    },
    ...
  }
}

配置参考

https://pro.ant.design/zh-CN/config/runtime-api#layout

https://procomponents.ant.design/components/layout