恐慌告警

💎高级组件

⭐明星组件

👑首创

PanicAlert 是一个用于侦测特定条件，触发绝对强提醒并执行“拒绝服务”策略的非常规组件。

它并不用于日常的业务逻辑交互，而是用于系统级的异常处理。当侦测到环境不满足运行条件（如分辨率过低、非授权设备、恶意调试）或系统核心故障时，它会强制阻断用户操作，清空核心 DOM，直到环境恢复正常。

TuiPanicAlert 是组件库中7个高级组件之一，需要取得授权后使用。

警告

请勿将此组件作为常规的“弹窗提示”或“消息通知”使用。PanicAlert 的设计初衷是 中断体验 和 拒绝服务。

基础用法

PanicAlert 通常放置在 App.vue 或布局组件的最外层。它通过 silenceCondition 属性来配置侦测规则。

<template>
  <TuiPanicAlert 
    :silenceCondition="{ device: 'pc,pad' }" 
  />
</template>

侦测模式详解

PanicAlert 支持 4 种模式。前三种（分辨率、设备、调试）通过 silenceCondition 对象自动触发，最后一种（自定义）通过手动控制。

分辨率侦测 (Resolution)

用于限制系统运行的窗口尺寸范围。当浏览器窗口尺寸超出设定范围时，自动触发告警。

• 配置参数:
  • resolutionH: 横向分辨率范围 { min, max }。
  • resolutionV: 纵向分辨率范围 { min, max }。
• 行为: 触发后阻断操作，用户调整窗口尺寸回到范围内后，告警自动解除。

const config = {
  silenceCondition: {
    // 限制宽度在 1280 ~ 1920 之间
    // 限制高度在 768 ~ 1080 之间
    resolutionH: { min: 1280, max: 1920 },
    resolutionV: { min: 768, max: 1080 }
  }
}

设备侦测 (Device)

用于限制访问系统的设备类型。

• 配置参数: device (字符串)。
• 可选值: 'pc', 'pad', 'mobile'。支持多选，用逗号分隔。
• 场景: 例如某些复杂的管理后台仅适配了 PC 端，禁止手机端访问以避免布局错乱或误操作。

const config = {
  silenceCondition: {
    // 仅允许电脑和平板访问，手机访问将触发拒绝服务
    device: "pc,pad" 
  }
}

调试侦测 (Debug)

用于保护系统安全或防止核心逻辑被分析。当检测到用户打开浏览器开发者工具（DevTools）时触发。

• 配置参数:
  • rejectDebugEnv: 生效环境。可选 'prod' (仅生产环境) 或 'all' (所有环境)。
  • debugMD5: (可选) 调试白名单验证码。
• 激进策略:
  • 触发调试告警后，组件会强制清空页面主要 DOM 元素，防止通过 Elements 面板查看结构。
  • 关闭调试工具后，页面会自动重载以恢复 DOM。
• 调试码 (Pass Code):
  • 如果配置了 debugMD5，界面上会出现一个输入框。
  • 输入正确的调试码后，可以跳过拦截，允许在该会话中进行调试。
  • 生成规则: debugMD5 必须是 至少12位 的明文密码经过 MD5 加密后生成的 32 位字符串。
  • 清理: 如需移除已输入的调试权限，需关闭标签页重开或手动清除 sessionStorage。

const config = {
  silenceCondition: {
    rejectDebugEnv: "all",
    // 密码 "passw0rd123456" 的 MD5 值
    debugMD5: "66a142122bfb65e2544f8231d6258f27"
  }
}

自定义模式 (Custom)

用于业务逻辑判断出的严重错误（如核心数据加载失败、未授权访问等）。

• 控制方式: 通过 v-model (或 show 属性) 手动开启。
• 内容配置: 通过 title, content, icon 自定义展示信息。
• 清空 DOM: 可选开启 clearDom 属性。
  • 开启后，触发告警时会清空页面 DOM。
  • 注意: 此时关闭告警会强制刷新页面（location.reload()），因为 DOM 已被销毁无法恢复。

<template>
  <TuiPanicAlert 
    v-model="isCriticalError"
    title="系统崩溃"
    content="核心服务连接超时，请联系管理员或稍后重试。"
    icon="tui-icon ti-alert-triangle"
    type="danger"
    :clearDom="true"
  />
</template>

API 参考

Props

属性名	类型	默认值	说明
silenceCondition	Object	{}	核心配置。包含 resolutionH/V, device, rejectDebugEnv, debugMD5 等侦测条件。
modelValue	Boolean	null	控制显示/隐藏（用于自定义模式）。
title	String	-	自定义模式的标题。
content	String	-	自定义模式的详情文本。
icon	String	-	自定义图标类名。
showClose	Boolean	false	是否显示关闭按钮（侦测模式下通常不显示，除非配置允许回退）。
fallBackPath	String	-	设置后，界面会显示“返回”按钮，点击跳转至该路由路径。
clearDom	Boolean	false	高危。触发时是否清空 #app 下的 DOM 节点。
blur	Boolean	true	是否对背景应用高斯模糊。
type	String	'danger'	主题色类型：primary, danger, warning 等。
tone	String	'strong'	视觉色调强度：strong, strongInvert 等。
modal	Boolean	true	是否显示遮罩层。
transparent	Boolean	false	是否启用半透明背景。
backgroundBlur	Boolean	true	是否启用背景模糊效果。

Events

事件名	说明
open	告警窗口打开时触发。
close	告警窗口关闭时触发。
back	点击“返回”或“退出”按钮时触发。
update:modelValue	双向绑定更新。

silenceCondition 配置项详解

键名	类型	说明
resolutionH	{min, max}	横向分辨率限制。
resolutionV	{min, max}	纵向分辨率限制。
device	String	允许的设备类型，逗号分隔 (pc,pad,mobile)。
rejectDebugEnv	String	拒绝调试的环境 (prod, all)。
debugMD5	String	调试白名单 MD5 校验码。