[Watermark/水印] 水印防删除功能希望改进下

[kwooshung]

tdesign-react 版本

最新版本

重现链接

https://tdesign.tencent.com/react/components/watermark?tab=demo

重现步骤

我也不知道算不算Bug，我觉得加上下面我要说的功能可能更好！

以下是具体需求

1. 除了节点防删除，元素中的属性，特别是style，也不能修改，这点参考：https://ant.design/components/watermark-cn
2. 比如通过外层css选择器选中元素，修改增加 opacity:0；display:none；之类的样式，避免通过定位移出屏幕之外，等奇葩操作，不应该起作用。（Ant Design 也没做到这样，我认为TD的团队，应该能做到吧？）

我认为难度应该不大

我知道实际编写代码的时候，肯定会比我现在说的，要考虑的多得多。
虽然可能有点儿班门弄斧，但是还想提一嘴，大概中心思路，应该是判断当前元素的所有css字符串（是否考虑md5或什么算法加密一下方便判断？）是否与创建的时候一致。只要不一致，就重新渲染什么的。

以下是ChatGPT给出的两个方案

方案1

使用 JavaScript 动态创建水印元素：可以在 React 组件中使用 JavaScript 动态创建水印元素，而不是在 HTML 中直接写入水印标记。这样可以防止用户通过删除节点的方式来移除水印。

使用内联样式：将水印元素的样式通过内联样式设置，而不是通过外部 CSS 文件或样式标签。这样可以避免用户通过修改外部样式来影响水印元素。

使用 DOM 监听器保护水印元素：可以在水印元素上添加 DOM 监听器，检测任何对元素的修改或删除操作，并在发现干扰时进行恢复。例如，可以使用 MutationObserver 监听器来监测元素的变化。

限制用户权限：如果应用程序有用户认证系统，可以通过限制用户的权限来防止对水印元素的干扰。只允许具有特定权限的用户修改或删除水印元素。

方案2

封装水印组件：将水印元素封装到一个 React 组件中，并使用组件的状态来控制显示和隐藏。通过将水印元素作为组件的一部分，可以更好地控制和保护元素。

使用内联样式和行内事件处理程序：将水印元素的样式和事件处理程序都通过内联方式添加到元素上，而不是依赖外部样式或脚本文件。这样可以减少用户对样式和事件的干扰。

监听窗口大小和位置变化：使用 resize 和 scroll 事件监听器来检测窗口大小和位置的变化，并在变化后重新定位水印元素。这样可以防止用户通过修改窗口大小或滚动来隐藏或移动水印。

使用定时器和检测机制：设置定时器来定期检查水印元素的状态，例如位置、样式、属性等。如果检测到任何异常情况，可以及时恢复水印元素的原始状态。

使用随机生成的类名和属性：为水印元素生成随机的类名和属性，使其难以被选择器选中或通过属性选择器修改。这样可以增加修改的难度。

客户端加密和校验：在水印元素中使用客户端加密和校验机制，确保其内容不易被篡改。这可以通过使用哈希算法或其他加密方法来实现。

期望结果

无论怎么修改水印，无论怎么改，哪怕各种奇葩操作，都不会影响水印的正常工作。

实际结果

No response

框架版本

React18

浏览器版本

Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.51

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @kwooshung，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[HaixingOoO]

重复#2559 ，关闭当前的issue。