水印通过全局挂载dom容器+路由meta控制显隐与内容，canvas绘制并设为background-image，定时校验防破坏，响应式适配多场景。
水印不是靠路由“实现”的，而是靠全局挂载 + 路由元信息来控制“是否显示”。Vue 项目中，水印本身是独立于路由的 DOM 层（fixed 全屏 canvas），但它可以根据 当前路由的 meta 配置 动态决定是否渲染、用什么内容渲染。
水印容器需脱离路由组件生命周期
不能把水印写在某个 Layout 或 App.vue 的模板里，否则路由切换时可能被销毁或重绘异常。正确做法是：
- 在应用初始化阶段（如 main.js 或 pinia 插件中），直接操作 document.documentElement 创建一个固定定位的 div 容器
- 该容器内用 Canvas 绘制水印图，并设为 background-image
- 它始终存在于 document 最顶层，不随 router-view 切换而卸载
用路由元信息（meta）控制水印开关与内容
每个路由配置可定义 watermarked: true / false，或更细粒度的字段，例如：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
{
path: '/admin',
component: AdminView,
meta: { watermarked: true, watermarkText: '管理员 - A1001' }
}
监听路由变化（watch $route 或 useRoute().meta），提取当前 meta 中的水印相关字段，触发 Canvas 重绘逻辑：
- watermarked === false → 清空背景图或隐藏容器
- watermarkText 存在 → 替换 canvas 文字内容并重绘
- 未定义则回退到默认值（如从用户 store 获取 “姓名 - 工号”）
避免水印被误删或绕过
仅靠 meta 控制还不够，需叠加防破坏机制：
- 给水印容器添加唯一 data 属性（如 data-watermark-id="v2.4"）和随机 class 名，防止被 CSS 或 JS 简单清除
- 启动一个轻量定时器（如每 3 秒），检查容器是否存在且 background-image 有效；若失效则自动重建
- 对敏感页面（如 /audit、/data-export），强制开启水印且禁用 meta 覆盖（即路由 meta.watermarked 不生效，由权限系统兜底）
响应式与跨页面一致性保障
水印要适配不同屏幕、缩放、滚动及文件预览页（如 PDF 嵌入 iframe），关键点是：
- Canvas 绘制前读取 window.innerWidth / innerHeight，按比例生成多张尺寸图（或动态缩放绘制区域）
- 监听 resize 和 orientationchange，触发布局重算，但避免高频重绘（加节流）
- 确保水印容器 z-index > 所有业务层（包括第三方预览组件的 modal、iframe overlay）
- 若使用 iframe 加载外部文档，需在 iframe 内也注入水印脚本（前提是同源）
