Panic Alert

💎Advanced

⭐Star

👑Pioneer

PanicAlert is an unconventional component used to detect specific conditions, trigger absolute strong alerts, and execute "Denial of Service" strategies.

It is not used for daily business logic interactions but for system-level exception handling. When it detects that the environment does not meet the running conditions (such as low resolution, unauthorized devices, malicious debugging) or core system failures, it will forcibly block user operations and clear the core DOM until the environment returns to normal.

TuiPanicAlert is one of the 7 advanced components in the library and requires authorization to use.

Warning

Do not use this component as a regular "popup prompt" or "message notification". The original intention of PanicAlert is Interrupt Experience and Denial of Service.

Basic Usage

PanicAlert is usually placed in App.vue or the outermost layer of the layout component. It configures detection rules via the silenceCondition prop.

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

Detection Modes Explained

PanicAlert supports 4 modes. The first three (Resolution, Device, Debug) are triggered automatically via the silenceCondition object, while the last one (Custom) is controlled manually.

Resolution Detection

Used to limit the window size range for system operation. An alert is automatically triggered when the browser window dimensions exceed the set range.

• Configuration Parameters:

  • resolutionH: Horizontal resolution range { min, max }.
  • resolutionV: Vertical resolution range { min, max }.

• Behavior: Blocks operations upon triggering. The alert is automatically lifted after the user adjusts the window size back within the range.

const config = {
  silenceCondition: {
    // Limit width between 1280 ~ 1920
    // Limit height between 768 ~ 1080
    resolutionH: { min: 1280, max: 1920 },
    resolutionV: { min: 768, max: 1080 }
  }
}

Device Detection

Used to limit the types of devices accessing the system.

• Configuration Parameter: device (String).
• Optional Values: 'pc', 'pad', 'mobile'. Supports multiple selections, separated by commas.
• Scenario: For example, some complex management backends are adapted only for PC. Access from mobile phones is prohibited to avoid layout disorders or accidental operations.

const config = {
  silenceCondition: {
    // Only allow access from PC and Tablet; mobile access triggers denial of service
    device: "pc,pad" 
  }
}

Debug Detection

Used to protect system security or prevent core logic analysis. Triggered when it detects that the user has opened the browser Developer Tools (DevTools).

• Configuration Parameters:

  • rejectDebugEnv: Effective environment. Options: 'prod' (Production only) or 'all' (All environments).
  • debugMD5: (Optional) Debug whitelist verification code.

• Aggressive Strategy:

  • After triggering the debug alert, the component will forcibly clear the main DOM elements of the page to prevent viewing the structure via the Elements panel.
  • After closing the DevTools, the page will automatically reload to restore the DOM.

• Pass Code:

  • If debugMD5 is configured, an input box will appear on the interface.
  • After entering the correct debug code, the interception can be bypassed, allowing debugging in that session.
  • Generation Rule: debugMD5 must be a 32-character string generated by MD5 encryption of a plain text password of at least 12 characters.
  • Cleanup: To remove the entered debug permission, you need to close the tab and reopen it or manually clear sessionStorage.

const config = {
  silenceCondition: {
    rejectDebugEnv: "all",
    // MD5 value of password "passw0rd123456"
    debugMD5: "66a142122bfb65e2544f8231d6258f27"
  }
}

Custom Mode

Used for serious errors judged by business logic (e.g., core data load failure, unauthorized access, etc.).

• Control Method: Manually enabled via v-model (or show prop).
• Content Configuration: Customize display information via title, content, and icon.
• Clear DOM: Optionally enable the clearDom property.
  • When enabled, the page DOM will be cleared when the alert is triggered.
  • Note: Closing the alert at this point will force a page refresh (location.reload()) because the DOM has been destroyed and cannot be restored.

<template>
  <TuiPanicAlert 
    v-model="isCriticalError"
    title="System Crash"
    content="Core service connection timeout. Please contact the administrator or try again later."
    icon="tui-icon ti-alert-triangle"
    type="danger"
    :clearDom="true"
  />
</template>

API Reference

Props

Property Name	Type	Default	Description
silenceCondition	Object	{}	Core Configuration. Contains detection conditions like resolutionH/V, device, rejectDebugEnv, debugMD5.
modelValue	Boolean	null	Controls display/hide (for custom mode).
title	String	-	Title for custom mode.
content	String	-	Detail text for custom mode.
icon	String	-	Custom icon class name.
showClose	Boolean	false	Whether to show the close button (usually not shown in detection mode unless fallback is allowed).
fallBackPath	String	-	If set, a "Back" button will appear, clicking it jumps to the route path.
clearDom	Boolean	false	High Risk. Whether to clear DOM nodes under #app when triggered.
blur	Boolean	true	Whether to apply Gaussian blur to the background.
type	String	'danger'	Theme color type: primary, danger, warning, etc.
tone	String	'strong'	Visual tone intensity: strong, strongInvert, etc.
modal	Boolean	true	Whether to show the mask layer.
transparent	Boolean	false	Whether to enable a semi-transparent background.
backgroundBlur	Boolean	true	Whether to enable the background blur effect.

Events

Event Name	Description
open	Triggered when the alert window opens.
close	Triggered when the alert window closes.
back	Triggered when the "Back" or "Exit" button is clicked.
update:modelValue	Two-way binding update.

silenceCondition Configuration Details

Key Name	Type	Description
resolutionH	{min, max}	Horizontal resolution limit.
resolutionV	{min, max}	Vertical resolution limit.
device	String	Allowed device types, comma-separated (pc,pad,mobile).
rejectDebugEnv	String	Environment to reject debugging (prod, all).
debugMD5	String	Debug whitelist MD5 verification code.