From c5b8124c4dd28b7a36c1757bb0aa2c7ab9b37f43 Mon Sep 17 00:00:00 2001
From: babu-ch <mashirohira@gmail.com>
Date: Tue, 31 Mar 2026 20:39:08 +0900
Subject: [PATCH] feat: add zh/ko/es/fr/de/pt translations and locale dropdown

Add 6 major language translations to the playground and convert the
two-language toggle button into a dropdown select for all 8 locales.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 playground/src/App.vue       |  24 +++---
 playground/src/i18n/de.ts    | 144 +++++++++++++++++++++++++++++++++++
 playground/src/i18n/en.ts    |   5 +-
 playground/src/i18n/es.ts    | 144 +++++++++++++++++++++++++++++++++++
 playground/src/i18n/fr.ts    | 144 +++++++++++++++++++++++++++++++++++
 playground/src/i18n/index.ts |  23 +++++-
 playground/src/i18n/ja.ts    |   5 +-
 playground/src/i18n/ko.ts    | 144 +++++++++++++++++++++++++++++++++++
 playground/src/i18n/pt.ts    | 144 +++++++++++++++++++++++++++++++++++
 playground/src/i18n/zh.ts    | 144 +++++++++++++++++++++++++++++++++++
 10 files changed, 900 insertions(+), 21 deletions(-)
 create mode 100644 playground/src/i18n/de.ts
 create mode 100644 playground/src/i18n/es.ts
 create mode 100644 playground/src/i18n/fr.ts
 create mode 100644 playground/src/i18n/ko.ts
 create mode 100644 playground/src/i18n/pt.ts
 create mode 100644 playground/src/i18n/zh.ts

diff --git a/playground/src/App.vue b/playground/src/App.vue
index 8894e72..a16e0d0 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { LANGUAGE_NAMES } from "./i18n";
 
 const { locale } = useI18n();
 
 const logs = ref<string[]>([]);
 
-function toggleLocale() {
-  locale.value = locale.value === "ja" ? "en" : "ja";
-}
-
 const originalLog = console.log;
 console.log = (...args: unknown[]) => {
   originalLog(...args);
@@ -26,9 +23,11 @@ console.log = (...args: unknown[]) => {
     <header>
       <div class="header-top">
         <h1>link-interceptor</h1>
-        <button class="locale-btn" @click="toggleLocale">
-          {{ $t("locale.switch") }}
-        </button>
+        <select v-model="locale" class="locale-select">
+          <option v-for="(name, code) in LANGUAGE_NAMES" :key="code" :value="code">
+            {{ name }}
+          </option>
+        </select>
       </div>
       <nav>
         <router-link to="/">{{ $t("nav.home") }}</router-link>
@@ -92,20 +91,25 @@ header h1 {
   font-size: 1.5rem;
 }
 
-.locale-btn {
-  padding: 0.3rem 0.75rem;
+.locale-select {
+  padding: 0.3rem 0.5rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: #fff;
   color: #333;
   font-size: 0.8rem;
   cursor: pointer;
+  outline: none;
 }
 
-.locale-btn:hover {
+.locale-select:hover {
   background: #f0f0f0;
 }
 
+.locale-select:focus {
+  border-color: #4361ee;
+}
+
 nav {
   display: flex;
   flex-wrap: wrap;
diff --git a/playground/src/i18n/de.ts b/playground/src/i18n/de.ts
new file mode 100644
index 0000000..714414f
--- /dev/null
+++ b/playground/src/i18n/de.ts
@@ -0,0 +1,144 @@
+export default {
+  nav: {
+    home: "Startseite",
+    internal: "Intern",
+    external: "Extern",
+    prevent: "Blockieren",
+    analytics: "Analytik",
+    confirm: "Bestätigen",
+    formGuard: "Form Guard",
+    security: "Sicherheit",
+  },
+  home: {
+    title: "link-interceptor",
+    description:
+      "Fängt alle Klicks auf {tag}-Tags in Ihrer SPA ab. Framework-unabhängiger Kern mit Vue-, React- und Svelte-Wrappern. Erfasst in der Capture-Phase und bietet Callbacks für interne/externe Links.",
+    install: "Installation",
+    basic: "Interaktive Demos",
+    useCases: "Anwendungsfälle",
+    console: "Konsole",
+    consoleDescription:
+      "Interceptor-Logs erscheinen im Konsolenpanel unten. Klicken Sie auf einen Link, um sie zu sehen.",
+    internalDesc: "Interne Links in router.push() umwandeln",
+    externalDesc: "URLs externer Links umschreiben",
+    preventDesc: "Link-Navigation blockieren",
+    analyticsDesc: "Link-Klicks verfolgen",
+    confirmDesc: "Bestätigungsdialog für externe Navigation",
+    formGuardDesc: "Navigation bei ungespeicherten Formularänderungen verhindern",
+    securityDesc: "Domain-Erlaubnisliste + automatisches rel-Attribut",
+  },
+  internal: {
+    title: "Interne Links",
+    description:
+      "Erfasst Klicks auf gleichherkunfts-{tag}-Tags mit onInternalLink und wandelt sie über router.push() in SPA-Routing um.",
+    normalLinks: "Normale HTML-Links (vom Plugin abgefangen)",
+    toHome: "Zur Startseite",
+    toExternal: "Zu Externen Links",
+    toPrevent: "Zu Blockieren",
+    vhtml: "Links in v-html (dynamisch generiertes HTML wird ebenfalls abgefangen)",
+    vhtmlContent:
+      'Dies ist Inhalt, der mit v-html gerendert wurde: <a href="/">Zurück zur Startseite</a> | <a href="/prevent">Blockieren ansehen</a>',
+    nested: "Verschachtelte Elemente",
+    nestedDesc: "Klicks auf Kindelemente innerhalb von {tag} werden ebenfalls erkannt",
+    nestedLink: "Dekorierter Link",
+    routerLink: "Koexistenz mit Router Link",
+    routerLinkDesc:
+      "<router-link> und einfache <a>-Tags funktionieren nebeneinander. Der Interceptor erfasst beide in der Capture-Phase. RouterLink prüft event.defaultPrevented und überspringt seine eigene Navigation, wenn der Interceptor sie bereits behandelt hat.",
+    routerLinkToHome: "router-link zur Startseite",
+    plainLinkToExternal: "einfaches <a> zu Externen Links",
+    routerLinkNote:
+      "Beide Links erscheinen in der Konsole — der Interceptor behandelt alle <a>-Klicks, unabhängig davon, ob sie von <router-link> oder einfachem HTML stammen.",
+    routerLinkGotcha: "Fallstrick: router-link replace",
+    routerLinkGotchaDesc:
+      "Der Interceptor erfasst auch Klicks auf <router-link replace>. Wenn der Callback ctx.preventDefault() und router.push() aufruft, wird die replace-Prop stillschweigend ignoriert — ein Verlaufseintrag wird hinzugefügt statt ersetzt.",
+    routerLinkReplaceBroken: "ohne Workaround — replace wird ignoriert (klicken, dann Zurück drücken zum Prüfen)",
+    routerLinkReplaceFixed: "mit data-no-intercept — replace funktioniert (klicken, dann Zurück drücken zum Vergleichen)",
+    routerLinkGotchaNote:
+      "Der erste Link hat keinen Workaround: Der Interceptor ruft preventDefault() + router.push() auf, daher geht replace verloren und ein Verlaufseintrag wird hinzugefügt. Der zweite Link hat data-no-intercept: Der Callback überspringt preventDefault(), sodass RouterLink die Navigation mit replace durchführt.",
+    routerLinkWorkaround:
+      "Workaround: Fügen Sie ein data-no-intercept-Attribut zu <router-link>-Elementen hinzu, die Props wie replace beibehalten müssen. Im Callback ctx.anchor.hasAttribute('data-no-intercept') prüfen und ctx.preventDefault() überspringen, damit RouterLink die Navigation selbst durchführt. Siehe main.ts für die Implementierung.",
+  },
+  external: {
+    title: "Externe Links",
+    description:
+      "Erfasst Klicks auf externe Links (andere Herkunft) mit onExternalLink. Diese Demo fügt automatisch den Parameter ?from=playground hinzu.",
+    externalLinks: "Externe Links (URL wird beim Klick umgeschrieben)",
+    note: 'Prüfen Sie die umgeschriebene URL in der Konsole. Links mit target="_blank" werden ebenfalls erfasst.',
+    modifierTest: "Modifikatortasten-Test",
+    modifierDesc:
+      "Versuchen Sie Strg/Cmd + Klick. Klicks mit Modifikatortasten werden übersprungen, das Verhalten des Browsers für neue Tabs wird respektiert.",
+    thisLink: "diesen Link",
+  },
+  prevent: {
+    title: "Navigation blockieren",
+    description:
+      "Rufen Sie ctx.preventDefault() im Callback auf, um die Link-Navigation abzubrechen.",
+    normalLink: "Normaler interner Link (navigiert)",
+    toHome: "Zur Startseite navigieren",
+    blockedLinks: "Blockierte Links (keine Navigation)",
+    blockedDesc:
+      "Die folgenden Links haben ein data-block-Attribut. Die Demo blockiert die Navigation in main.ts.",
+    blockedLink: "blocked.example.com (Klick navigiert nicht)",
+    blockedToast: "Navigation zu {url} blockiert",
+  },
+  analytics: {
+    title: "Analytik / Tracking",
+    description:
+      "Beispiel für das Auslösen von Analyse-Events bei Link-Klicks. Stellen Sie sich das Senden an GA4 oder Mixpanel vor.",
+    tryClick: "Versuchen Sie, auf diese Links zu klicken",
+    internalLink: "Interner Link (Seitennavigation)",
+    anotherDemo: "Zu einer anderen Demo-Seite",
+    collectedEvents: "Gesammelte Events",
+    time: "Zeit",
+    type: "Typ",
+    url: "URL",
+    noEvents: "Noch keine Events",
+  },
+  confirm: {
+    title: "Bestätigungsdialog",
+    description:
+      'Zeigt einen Bestätigungsdialog beim Klick auf einen externen Link. "Abbrechen" blockiert die Navigation, "OK" erlaubt sie.',
+    withConfirm: "Links mit Bestätigungsdialog",
+    withConfirmDesc: "Die folgenden Links haben ein data-confirm-Attribut.",
+    confirmSuffix: " (mit Bestätigung)",
+    withoutConfirm: "Links ohne Bestätigung (normales Verhalten)",
+    withoutConfirmSuffix: " (ohne Bestätigung)",
+    internalLink: "Interner Link (ohne Bestätigung)",
+    implementation: "Implementierungsbeispiel",
+    confirmPrompt: "Zu {hostname} navigieren?",
+  },
+  formGuard: {
+    title: "Form Guard",
+    description:
+      'Zeigt eine Warnung „Änderungen gehen verloren" beim Klick auf einen Link während der Formularbearbeitung. Der Dialog erscheint nur bei ungespeicherten Eingaben.',
+    formSection: "Formular (geben Sie etwas ein und klicken Sie dann auf einen Link)",
+    name: "Name",
+    namePlaceholder: "Max Mustermann",
+    email: "E-Mail",
+    emailPlaceholder: "max{'@'}example.com",
+    dirty: "Ungespeicherte Änderungen",
+    clean: "Keine Änderungen",
+    navLinks: "Navigationslinks",
+    navDesc: "Ein Bestätigungsdialog erscheint beim Klick mit ungespeicherten Formulareingaben.",
+    implementation: "Implementierungsbeispiel",
+    confirmLeave: "Änderungen gehen verloren. Trotzdem navigieren?",
+  },
+  security: {
+    title: "Sicherheit",
+    description:
+      "Sicherheitskontrollen für externe Links. Kombiniert eine Domain-Erlaubnisliste mit einem automatischen rel-Attribut.",
+    allowlist: "Erlaubnisliste",
+    allowlistDesc: "Erlaubte Domains: {domains}. Alle anderen sind blockiert.",
+    allowed: "Erlaubt",
+    blocked: "Blockiert",
+    relSection: "Automatisches rel-Attribut",
+    relDesc:
+      'Alle externen Links erhalten automatisch rel="noopener noreferrer". Prüfen Sie im Elements-Panel der DevTools.',
+    implementation: "Implementierungsbeispiel",
+    blockedAlert: "{hostname} ist blockiert",
+  },
+  console: {
+    title: "Konsole",
+    empty: "Klicken Sie auf einen Link, um Interceptor-Logs hier zu sehen",
+  },
+};
diff --git a/playground/src/i18n/en.ts b/playground/src/i18n/en.ts
index c002f17..b9f20d5 100644
--- a/playground/src/i18n/en.ts
+++ b/playground/src/i18n/en.ts
@@ -9,10 +9,7 @@ export default {
     formGuard: "Form Guard",
     security: "Security",
   },
-  locale: {
-    switch: "日本語",
-  },
-  home: {
+home: {
     title: "link-interceptor",
     description:
       "Intercept all {tag} tag clicks in your SPA. Framework-agnostic core with Vue, React, and Svelte wrappers. Captures at the capture phase and provides callbacks for internal/external links.",
diff --git a/playground/src/i18n/es.ts b/playground/src/i18n/es.ts
new file mode 100644
index 0000000..de7de02
--- /dev/null
+++ b/playground/src/i18n/es.ts
@@ -0,0 +1,144 @@
+export default {
+  nav: {
+    home: "Inicio",
+    internal: "Internos",
+    external: "Externos",
+    prevent: "Prevenir",
+    analytics: "Analítica",
+    confirm: "Confirmar",
+    formGuard: "Form Guard",
+    security: "Seguridad",
+  },
+  home: {
+    title: "link-interceptor",
+    description:
+      "Intercepta todos los clics en etiquetas {tag} en tu SPA. Núcleo independiente del framework con wrappers para Vue, React y Svelte. Captura en la fase de captura y proporciona callbacks para enlaces internos/externos.",
+    install: "Instalación",
+    basic: "Demos interactivas",
+    useCases: "Casos de uso",
+    console: "Consola",
+    consoleDescription:
+      "Los registros del interceptor aparecen en el panel de consola en la parte inferior. Haz clic en un enlace para verlos.",
+    internalDesc: "Convertir enlaces internos a router.push()",
+    externalDesc: "Reescribir URLs de enlaces externos",
+    preventDesc: "Bloquear la navegación de enlaces",
+    analyticsDesc: "Rastrear clics en enlaces",
+    confirmDesc: "Diálogo de confirmación para navegación externa",
+    formGuardDesc: "Prevenir la navegación con cambios no guardados",
+    securityDesc: "Lista de dominios permitidos + atributo rel automático",
+  },
+  internal: {
+    title: "Enlaces internos",
+    description:
+      "Captura clics en etiquetas {tag} del mismo origen con onInternalLink y los convierte en enrutamiento SPA mediante router.push().",
+    normalLinks: "Enlaces HTML normales (interceptados por el plugin)",
+    toHome: "Ir a Inicio",
+    toExternal: "Ir a Enlaces externos",
+    toPrevent: "Ir a Prevenir",
+    vhtml: "Enlaces en v-html (el HTML generado dinámicamente también es interceptado)",
+    vhtmlContent:
+      'Este es contenido renderizado con v-html: <a href="/">Volver a Inicio</a> | <a href="/prevent">Ver Prevenir</a>',
+    nested: "Elementos anidados",
+    nestedDesc: "Los clics en elementos hijos dentro de {tag} también son detectados",
+    nestedLink: "Enlace decorado",
+    routerLink: "Coexistencia con Router Link",
+    routerLinkDesc:
+      "<router-link> y las etiquetas <a> simples funcionan lado a lado. El interceptor captura ambos en la fase de captura. RouterLink verifica event.defaultPrevented y omite su propia navegación cuando el interceptor ya lo ha gestionado.",
+    routerLinkToHome: "router-link a Inicio",
+    plainLinkToExternal: "<a> simple a Enlaces externos",
+    routerLinkNote:
+      "Ambos enlaces aparecen en la consola — el interceptor maneja todos los clics en <a> independientemente de si provienen de <router-link> o HTML simple.",
+    routerLinkGotcha: "Trampa: router-link replace",
+    routerLinkGotchaDesc:
+      "El interceptor también captura clics de <router-link replace>. Si el callback llama a ctx.preventDefault() y router.push(), la prop replace se ignora silenciosamente — se añade una entrada al historial en lugar de reemplazar.",
+    routerLinkReplaceBroken: "sin solución — replace se ignora (haz clic, luego presiona Atrás para ver)",
+    routerLinkReplaceFixed: "con data-no-intercept — replace funciona (haz clic, luego presiona Atrás para comparar)",
+    routerLinkGotchaNote:
+      "El primer enlace no tiene solución: el interceptor llama a preventDefault() + router.push(), así que replace se pierde y se añade una entrada al historial. El segundo enlace tiene data-no-intercept: el callback omite preventDefault(), dejando que RouterLink maneje la navegación con replace intacto.",
+    routerLinkWorkaround:
+      "Solución: añadir un atributo data-no-intercept a los elementos <router-link> que necesiten preservar props como replace. En el callback, verificar ctx.anchor.hasAttribute('data-no-intercept') y omitir ctx.preventDefault() para que RouterLink maneje la navegación. Ver main.ts para la implementación.",
+  },
+  external: {
+    title: "Enlaces externos",
+    description:
+      "Captura clics de enlaces externos (diferente origen) con onExternalLink. Esta demo añade automáticamente el parámetro ?from=playground.",
+    externalLinks: "Enlaces externos (la URL se reescribe al hacer clic)",
+    note: 'Verifica la URL reescrita en la consola. Los enlaces con target="_blank" también son interceptados.',
+    modifierTest: "Prueba de teclas modificadoras",
+    modifierDesc:
+      "Prueba Ctrl/Cmd + Clic. Los clics con teclas modificadoras se omiten, respetando el comportamiento de nueva pestaña del navegador.",
+    thisLink: "este enlace",
+  },
+  prevent: {
+    title: "Prevenir navegación",
+    description:
+      "Llama a ctx.preventDefault() en el callback para cancelar la navegación del enlace.",
+    normalLink: "Enlace interno normal (navega)",
+    toHome: "Navegar a Inicio",
+    blockedLinks: "Enlaces bloqueados (sin navegación)",
+    blockedDesc:
+      "Los siguientes enlaces tienen un atributo data-block. La demo bloquea la navegación en main.ts.",
+    blockedLink: "blocked.example.com (el clic no navega)",
+    blockedToast: "Navegación bloqueada a {url}",
+  },
+  analytics: {
+    title: "Analítica / Seguimiento",
+    description:
+      "Ejemplo de disparo de eventos de analítica al hacer clic en enlaces. Imagina enviando a GA4 o Mixpanel.",
+    tryClick: "Prueba hacer clic en estos enlaces",
+    internalLink: "Enlace interno (navegación de página)",
+    anotherDemo: "Ir a otra página de demo",
+    collectedEvents: "Eventos recopilados",
+    time: "Hora",
+    type: "Tipo",
+    url: "URL",
+    noEvents: "Aún no hay eventos",
+  },
+  confirm: {
+    title: "Diálogo de confirmación",
+    description:
+      'Muestra un diálogo de confirmación al hacer clic en un enlace externo. "Cancelar" bloquea la navegación, "Aceptar" la permite.',
+    withConfirm: "Enlaces con diálogo de confirmación",
+    withConfirmDesc: "Los siguientes enlaces tienen un atributo data-confirm.",
+    confirmSuffix: " (con confirmación)",
+    withoutConfirm: "Enlaces sin confirmación (comportamiento normal)",
+    withoutConfirmSuffix: " (sin confirmación)",
+    internalLink: "Enlace interno (sin confirmación)",
+    implementation: "Ejemplo de implementación",
+    confirmPrompt: "¿Navegar a {hostname}?",
+  },
+  formGuard: {
+    title: "Form Guard",
+    description:
+      'Muestra una advertencia de "los cambios se perderán" al hacer clic en un enlace mientras se edita un formulario. El diálogo solo aparece cuando hay entradas no guardadas.',
+    formSection: "Formulario (escribe algo y luego haz clic en un enlace)",
+    name: "Nombre",
+    namePlaceholder: "Juan García",
+    email: "Correo electrónico",
+    emailPlaceholder: "juan{'@'}example.com",
+    dirty: "Cambios no guardados",
+    clean: "Sin cambios",
+    navLinks: "Enlaces de navegación",
+    navDesc: "Aparece un diálogo de confirmación al hacer clic con entradas de formulario no guardadas.",
+    implementation: "Ejemplo de implementación",
+    confirmLeave: "Los cambios se perderán. ¿Navegar de todos modos?",
+  },
+  security: {
+    title: "Seguridad",
+    description:
+      "Controles de seguridad para enlaces externos. Combina lista de dominios permitidos con atributo rel automático.",
+    allowlist: "Lista de permitidos",
+    allowlistDesc: "Dominios permitidos: {domains}. Todos los demás están bloqueados.",
+    allowed: "Permitido",
+    blocked: "Bloqueado",
+    relSection: "Atributo rel automático",
+    relDesc:
+      'Todos los enlaces externos obtienen automáticamente rel="noopener noreferrer". Verifica en el panel Elements de DevTools.',
+    implementation: "Ejemplo de implementación",
+    blockedAlert: "{hostname} está bloqueado",
+  },
+  console: {
+    title: "Consola",
+    empty: "Haz clic en un enlace para ver los registros del interceptor aquí",
+  },
+};
diff --git a/playground/src/i18n/fr.ts b/playground/src/i18n/fr.ts
new file mode 100644
index 0000000..7929a15
--- /dev/null
+++ b/playground/src/i18n/fr.ts
@@ -0,0 +1,144 @@
+export default {
+  nav: {
+    home: "Accueil",
+    internal: "Internes",
+    external: "Externes",
+    prevent: "Bloquer",
+    analytics: "Analytique",
+    confirm: "Confirmer",
+    formGuard: "Form Guard",
+    security: "Sécurité",
+  },
+  home: {
+    title: "link-interceptor",
+    description:
+      "Intercepte tous les clics sur les balises {tag} dans votre SPA. Noyau indépendant du framework avec des wrappers Vue, React et Svelte. Capture en phase de capture et fournit des callbacks pour les liens internes/externes.",
+    install: "Installation",
+    basic: "Démos interactives",
+    useCases: "Cas d'utilisation",
+    console: "Console",
+    consoleDescription:
+      "Les logs de l'intercepteur apparaissent dans le panneau console en bas. Cliquez sur un lien pour les voir.",
+    internalDesc: "Convertir les liens internes en router.push()",
+    externalDesc: "Réécrire les URLs des liens externes",
+    preventDesc: "Bloquer la navigation des liens",
+    analyticsDesc: "Suivre les clics sur les liens",
+    confirmDesc: "Dialogue de confirmation pour la navigation externe",
+    formGuardDesc: "Empêcher la navigation avec des modifications non sauvegardées",
+    securityDesc: "Liste de domaines autorisés + attribut rel automatique",
+  },
+  internal: {
+    title: "Liens internes",
+    description:
+      "Capture les clics sur les balises {tag} de même origine avec onInternalLink et les convertit en routage SPA via router.push().",
+    normalLinks: "Liens HTML normaux (interceptés par le plugin)",
+    toHome: "Aller à l'Accueil",
+    toExternal: "Aller aux Liens externes",
+    toPrevent: "Aller à Bloquer",
+    vhtml: "Liens dans v-html (le HTML généré dynamiquement est aussi intercepté)",
+    vhtmlContent:
+      'Ceci est du contenu rendu avec v-html : <a href="/">Retour à l\'Accueil</a> | <a href="/prevent">Voir Bloquer</a>',
+    nested: "Éléments imbriqués",
+    nestedDesc: "Les clics sur les éléments enfants à l'intérieur de {tag} sont aussi détectés",
+    nestedLink: "Lien décoré",
+    routerLink: "Coexistence avec Router Link",
+    routerLinkDesc:
+      "<router-link> et les balises <a> simples fonctionnent côte à côte. L'intercepteur capture les deux en phase de capture. RouterLink vérifie event.defaultPrevented et ignore sa propre navigation lorsque l'intercepteur l'a déjà géré.",
+    routerLinkToHome: "router-link vers l'Accueil",
+    plainLinkToExternal: "<a> simple vers Liens externes",
+    routerLinkNote:
+      "Les deux liens apparaissent dans la console — l'intercepteur gère tous les clics sur <a>, qu'ils proviennent de <router-link> ou de HTML simple.",
+    routerLinkGotcha: "Piège : router-link replace",
+    routerLinkGotchaDesc:
+      "L'intercepteur capture aussi les clics de <router-link replace>. Si le callback appelle ctx.preventDefault() et router.push(), la prop replace est silencieusement ignorée — une entrée d'historique est ajoutée au lieu d'être remplacée.",
+    routerLinkReplaceBroken: "sans solution — replace est ignoré (cliquez, puis appuyez sur Retour pour voir)",
+    routerLinkReplaceFixed: "avec data-no-intercept — replace fonctionne (cliquez, puis appuyez sur Retour pour comparer)",
+    routerLinkGotchaNote:
+      "Le premier lien n'a pas de solution : l'intercepteur appelle preventDefault() + router.push(), donc replace est perdu et une entrée d'historique est ajoutée. Le second lien a data-no-intercept : le callback ignore preventDefault(), laissant RouterLink gérer la navigation avec replace intact.",
+    routerLinkWorkaround:
+      "Solution : ajouter un attribut data-no-intercept aux éléments <router-link> qui doivent préserver des props comme replace. Dans le callback, vérifier ctx.anchor.hasAttribute('data-no-intercept') et ignorer ctx.preventDefault() pour laisser RouterLink gérer la navigation. Voir main.ts pour l'implémentation.",
+  },
+  external: {
+    title: "Liens externes",
+    description:
+      "Capture les clics de liens externes (origine différente) avec onExternalLink. Cette démo ajoute automatiquement le paramètre ?from=playground.",
+    externalLinks: "Liens externes (l'URL est réécrite au clic)",
+    note: 'Vérifiez l\'URL réécrite dans la console. Les liens avec target="_blank" sont aussi interceptés.',
+    modifierTest: "Test des touches de modification",
+    modifierDesc:
+      "Essayez Ctrl/Cmd + Clic. Les clics avec touches de modification sont ignorés, respectant le comportement de nouvel onglet du navigateur.",
+    thisLink: "ce lien",
+  },
+  prevent: {
+    title: "Bloquer la navigation",
+    description:
+      "Appelez ctx.preventDefault() dans le callback pour annuler la navigation du lien.",
+    normalLink: "Lien interne normal (navigue)",
+    toHome: "Naviguer vers l'Accueil",
+    blockedLinks: "Liens bloqués (pas de navigation)",
+    blockedDesc:
+      "Les liens suivants ont un attribut data-block. La démo bloque la navigation dans main.ts.",
+    blockedLink: "blocked.example.com (le clic ne navigue pas)",
+    blockedToast: "Navigation vers {url} bloquée",
+  },
+  analytics: {
+    title: "Analytique / Suivi",
+    description:
+      "Exemple de déclenchement d'événements analytiques lors de clics sur des liens. Imaginez l'envoi vers GA4 ou Mixpanel.",
+    tryClick: "Essayez de cliquer sur ces liens",
+    internalLink: "Lien interne (navigation de page)",
+    anotherDemo: "Aller à une autre page de démo",
+    collectedEvents: "Événements collectés",
+    time: "Heure",
+    type: "Type",
+    url: "URL",
+    noEvents: "Pas encore d'événements",
+  },
+  confirm: {
+    title: "Dialogue de confirmation",
+    description:
+      'Affiche un dialogue de confirmation lors du clic sur un lien externe. "Annuler" bloque la navigation, "OK" l\'autorise.',
+    withConfirm: "Liens avec dialogue de confirmation",
+    withConfirmDesc: "Les liens suivants ont un attribut data-confirm.",
+    confirmSuffix: " (avec confirmation)",
+    withoutConfirm: "Liens sans confirmation (comportement normal)",
+    withoutConfirmSuffix: " (sans confirmation)",
+    internalLink: "Lien interne (sans confirmation)",
+    implementation: "Exemple d'implémentation",
+    confirmPrompt: "Naviguer vers {hostname} ?",
+  },
+  formGuard: {
+    title: "Form Guard",
+    description:
+      "Affiche un avertissement « les modifications seront perdues » lors du clic sur un lien pendant l'édition d'un formulaire. Le dialogue n'apparaît que lorsqu'il y a des saisies non sauvegardées.",
+    formSection: "Formulaire (saisissez quelque chose puis cliquez sur un lien)",
+    name: "Nom",
+    namePlaceholder: "Jean Dupont",
+    email: "E-mail",
+    emailPlaceholder: "jean{'@'}example.com",
+    dirty: "Modifications non sauvegardées",
+    clean: "Aucune modification",
+    navLinks: "Liens de navigation",
+    navDesc: "Un dialogue de confirmation apparaît lors du clic avec des saisies de formulaire non sauvegardées.",
+    implementation: "Exemple d'implémentation",
+    confirmLeave: "Les modifications seront perdues. Naviguer quand même ?",
+  },
+  security: {
+    title: "Sécurité",
+    description:
+      "Contrôles de sécurité pour les liens externes. Combine une liste de domaines autorisés avec un attribut rel automatique.",
+    allowlist: "Liste autorisée",
+    allowlistDesc: "Domaines autorisés : {domains}. Tous les autres sont bloqués.",
+    allowed: "Autorisé",
+    blocked: "Bloqué",
+    relSection: "Attribut rel automatique",
+    relDesc:
+      'Tous les liens externes obtiennent automatiquement rel="noopener noreferrer". Vérifiez dans le panneau Elements de DevTools.',
+    implementation: "Exemple d'implémentation",
+    blockedAlert: "{hostname} est bloqué",
+  },
+  console: {
+    title: "Console",
+    empty: "Cliquez sur un lien pour voir les logs de l'intercepteur ici",
+  },
+};
diff --git a/playground/src/i18n/index.ts b/playground/src/i18n/index.ts
index 82a82b4..cd86357 100644
--- a/playground/src/i18n/index.ts
+++ b/playground/src/i18n/index.ts
@@ -1,10 +1,27 @@
 import { createI18n } from "vue-i18n";
-import ja from "./ja";
 import en from "./en";
+import ja from "./ja";
+import zh from "./zh";
+import ko from "./ko";
+import es from "./es";
+import fr from "./fr";
+import de from "./de";
+import pt from "./pt";
+
+export const LANGUAGE_NAMES: Record<string, string> = {
+  en: "English",
+  ja: "日本語",
+  zh: "中文",
+  ko: "한국어",
+  es: "Español",
+  fr: "Français",
+  de: "Deutsch",
+  pt: "Português",
+};
 
 export const i18n = createI18n({
   legacy: false,
   locale: "en",
-  fallbackLocale: "ja",
-  messages: { ja, en },
+  fallbackLocale: "en",
+  messages: { en, ja, zh, ko, es, fr, de, pt },
 });
diff --git a/playground/src/i18n/ja.ts b/playground/src/i18n/ja.ts
index 66517fe..1547113 100644
--- a/playground/src/i18n/ja.ts
+++ b/playground/src/i18n/ja.ts
@@ -9,10 +9,7 @@ export default {
     formGuard: "Form Guard",
     security: "Security",
   },
-  locale: {
-    switch: "English",
-  },
-  home: {
+home: {
     title: "link-interceptor",
     description:
       "SPA内の全 {tag} タグクリックをインターセプト。フレームワーク非依存のコアに Vue / React / Svelte ラッパーを提供。capture フェーズで捕捉し、内部/外部リンクそれぞれにコールバックを提供します。",
diff --git a/playground/src/i18n/ko.ts b/playground/src/i18n/ko.ts
new file mode 100644
index 0000000..9dfbd1b
--- /dev/null
+++ b/playground/src/i18n/ko.ts
@@ -0,0 +1,144 @@
+export default {
+  nav: {
+    home: "홈",
+    internal: "내부 링크",
+    external: "외부 링크",
+    prevent: "차단",
+    analytics: "분석",
+    confirm: "확인",
+    formGuard: "폼 가드",
+    security: "보안",
+  },
+  home: {
+    title: "link-interceptor",
+    description:
+      "SPA 내 모든 {tag} 태그 클릭을 인터셉트합니다. 프레임워크에 독립적인 코어와 Vue, React, Svelte 래퍼를 제공합니다. 캡처 단계에서 포착하며, 내부/외부 링크에 대한 콜백을 제공합니다.",
+    install: "설치",
+    basic: "인터랙티브 데모",
+    useCases: "사용 사례",
+    console: "콘솔",
+    consoleDescription:
+      "인터셉터 로그가 하단의 콘솔 패널에 표시됩니다. 링크를 클릭하여 확인하세요.",
+    internalDesc: "내부 링크를 router.push()로 변환",
+    externalDesc: "외부 링크 URL 재작성",
+    preventDesc: "링크 이동 차단",
+    analyticsDesc: "링크 클릭 추적",
+    confirmDesc: "외부 이동 시 확인 대화상자",
+    formGuardDesc: "미저장 폼 변경사항이 있을 때 이동 방지",
+    securityDesc: "도메인 허용 목록 + 자동 rel 속성",
+  },
+  internal: {
+    title: "내부 링크",
+    description:
+      "onInternalLink로 동일 출처의 {tag} 태그 클릭을 캡처하고, router.push()를 통해 SPA 라우팅으로 변환합니다.",
+    normalLinks: "일반 HTML 링크 (플러그인이 인터셉트)",
+    toHome: "홈으로 이동",
+    toExternal: "외부 링크로 이동",
+    toPrevent: "차단 페이지로 이동",
+    vhtml: "v-html 내 링크 (동적으로 생성된 HTML도 인터셉트)",
+    vhtmlContent:
+      'v-html로 렌더링된 콘텐츠입니다: <a href="/">홈으로 돌아가기</a> | <a href="/prevent">차단 페이지 보기</a>',
+    nested: "중첩된 요소",
+    nestedDesc: "{tag} 내부의 자식 요소를 클릭해도 감지됩니다",
+    nestedLink: "꾸며진 링크",
+    routerLink: "Router Link 공존",
+    routerLinkDesc:
+      "<router-link>와 일반 <a> 태그가 함께 동작합니다. 인터셉터는 캡처 단계에서 둘 다 포착합니다. RouterLink는 event.defaultPrevented를 확인하고, 인터셉터가 이미 처리한 경우 자체 네비게이션을 건너뜁니다.",
+    routerLinkToHome: "router-link로 홈으로",
+    plainLinkToExternal: "일반 <a>로 외부 링크로",
+    routerLinkNote:
+      "두 링크 모두 콘솔에 표시됩니다 — 인터셉터는 <router-link>에서 왔든 일반 HTML에서 왔든 모든 <a> 클릭을 처리합니다.",
+    routerLinkGotcha: "주의: router-link replace",
+    routerLinkGotchaDesc:
+      "인터셉터는 <router-link replace> 클릭도 캡처합니다. 콜백이 ctx.preventDefault()와 router.push()를 호출하면, replace 속성이 무시되어 — 대체 대신 히스토리 항목이 추가됩니다.",
+    routerLinkReplaceBroken: "해결 방법 없음 — replace가 무시됨 (클릭 후 뒤로 가기로 확인)",
+    routerLinkReplaceFixed: "data-no-intercept 사용 — replace가 정상 동작 (클릭 후 뒤로 가기로 비교)",
+    routerLinkGotchaNote:
+      "첫 번째 링크는 해결 방법이 없습니다: 인터셉터가 preventDefault() + router.push()를 호출하므로 replace가 손실되고 히스토리 항목이 추가됩니다. 두 번째 링크는 data-no-intercept가 있습니다: 콜백이 preventDefault()를 건너뛰어 RouterLink가 replace로 네비게이션합니다.",
+    routerLinkWorkaround:
+      "해결 방법: replace 같은 속성을 유지해야 하는 <router-link>에 data-no-intercept 속성을 추가하세요. 콜백에서 ctx.anchor.hasAttribute('data-no-intercept')를 확인하고 ctx.preventDefault()를 건너뛰어 RouterLink가 자체적으로 네비게이션하도록 합니다. 구현은 main.ts를 참조하세요.",
+  },
+  external: {
+    title: "외부 링크",
+    description:
+      "onExternalLink로 외부 링크(다른 출처) 클릭을 캡처합니다. 이 데모에서는 ?from=playground 파라미터를 자동으로 추가합니다.",
+    externalLinks: "외부 링크 (클릭 시 URL이 재작성됨)",
+    note: '콘솔에서 재작성된 URL을 확인하세요. target="_blank" 링크도 후킹됩니다.',
+    modifierTest: "수정 키 테스트",
+    modifierDesc:
+      "Ctrl/Cmd + 클릭을 시도해보세요. 수정 키 클릭은 건너뛰어 브라우저의 새 탭 동작이 유지됩니다.",
+    thisLink: "이 링크",
+  },
+  prevent: {
+    title: "기본 동작 차단",
+    description:
+      "콜백에서 ctx.preventDefault()를 호출하여 링크 이동을 취소합니다.",
+    normalLink: "일반 내부 링크 (이동함)",
+    toHome: "홈으로 이동",
+    blockedLinks: "차단된 링크 (이동하지 않음)",
+    blockedDesc:
+      "다음 링크에는 data-block 속성이 있습니다. 데모에서는 main.ts에서 이동을 차단합니다.",
+    blockedLink: "blocked.example.com (클릭해도 이동하지 않음)",
+    blockedToast: "{url}로의 이동이 차단되었습니다",
+  },
+  analytics: {
+    title: "분석 / 추적",
+    description:
+      "링크 클릭 시 분석 이벤트를 발생시키는 예제입니다. GA4나 Mixpanel로 전송하는 것을 상상해보세요.",
+    tryClick: "이 링크들을 클릭해보세요",
+    internalLink: "내부 링크 (페이지 이동)",
+    anotherDemo: "다른 데모 페이지로 이동",
+    collectedEvents: "수집된 이벤트",
+    time: "시간",
+    type: "유형",
+    url: "URL",
+    noEvents: "아직 이벤트가 없습니다",
+  },
+  confirm: {
+    title: "확인 대화상자",
+    description:
+      '외부 링크 클릭 시 확인 대화상자를 표시합니다. "취소"로 이동을 차단하고, "확인"으로 이동을 허용합니다.',
+    withConfirm: "확인 대화상자가 있는 링크",
+    withConfirmDesc: "다음 링크에는 data-confirm 속성이 있습니다.",
+    confirmSuffix: " (확인 있음)",
+    withoutConfirm: "확인 없는 링크 (일반 동작)",
+    withoutConfirmSuffix: " (확인 없음)",
+    internalLink: "내부 링크 (확인 없음)",
+    implementation: "구현 예제",
+    confirmPrompt: "{hostname}(으)로 이동하시겠습니까?",
+  },
+  formGuard: {
+    title: "폼 가드",
+    description:
+      '폼 편집 중 링크를 클릭하면 "변경사항이 손실됩니다" 경고를 표시합니다. 미저장 입력이 있을 때만 대화상자가 나타납니다.',
+    formSection: "폼 (무언가 입력한 후 링크를 클릭하세요)",
+    name: "이름",
+    namePlaceholder: "홍길동",
+    email: "이메일",
+    emailPlaceholder: "gildong{'@'}example.com",
+    dirty: "미저장 변경사항",
+    clean: "변경사항 없음",
+    navLinks: "네비게이션 링크",
+    navDesc: "미저장 폼 입력이 있는 상태에서 클릭하면 확인 대화상자가 나타납니다.",
+    implementation: "구현 예제",
+    confirmLeave: "변경사항이 손실됩니다. 그래도 이동하시겠습니까?",
+  },
+  security: {
+    title: "보안",
+    description:
+      "외부 링크에 대한 보안 제어입니다. 도메인 허용 목록과 자동 rel 속성을 결합합니다.",
+    allowlist: "허용 목록",
+    allowlistDesc: "허용된 도메인: {domains}. 그 외에는 차단됩니다.",
+    allowed: "허용",
+    blocked: "차단",
+    relSection: "자동 rel 속성",
+    relDesc:
+      '모든 외부 링크에 rel="noopener noreferrer"가 자동으로 추가됩니다. DevTools의 Elements 패널에서 확인하세요.',
+    implementation: "구현 예제",
+    blockedAlert: "{hostname}이(가) 차단되었습니다",
+  },
+  console: {
+    title: "콘솔",
+    empty: "링크를 클릭하면 인터셉터 로그가 여기에 표시됩니다",
+  },
+};
diff --git a/playground/src/i18n/pt.ts b/playground/src/i18n/pt.ts
new file mode 100644
index 0000000..147cd7a
--- /dev/null
+++ b/playground/src/i18n/pt.ts
@@ -0,0 +1,144 @@
+export default {
+  nav: {
+    home: "Início",
+    internal: "Internos",
+    external: "Externos",
+    prevent: "Prevenir",
+    analytics: "Análise",
+    confirm: "Confirmar",
+    formGuard: "Form Guard",
+    security: "Segurança",
+  },
+  home: {
+    title: "link-interceptor",
+    description:
+      "Intercepta todos os cliques em tags {tag} na sua SPA. Núcleo independente de framework com wrappers para Vue, React e Svelte. Captura na fase de captura e fornece callbacks para links internos/externos.",
+    install: "Instalação",
+    basic: "Demos interativas",
+    useCases: "Casos de uso",
+    console: "Console",
+    consoleDescription:
+      "Os logs do interceptor aparecem no painel do console na parte inferior. Clique em um link para vê-los.",
+    internalDesc: "Converter links internos em router.push()",
+    externalDesc: "Reescrever URLs de links externos",
+    preventDesc: "Bloquear navegação de links",
+    analyticsDesc: "Rastrear cliques em links",
+    confirmDesc: "Diálogo de confirmação para navegação externa",
+    formGuardDesc: "Prevenir navegação com alterações não salvas no formulário",
+    securityDesc: "Lista de domínios permitidos + atributo rel automático",
+  },
+  internal: {
+    title: "Links internos",
+    description:
+      "Captura cliques em tags {tag} da mesma origem com onInternalLink e os converte em roteamento SPA via router.push().",
+    normalLinks: "Links HTML normais (interceptados pelo plugin)",
+    toHome: "Ir para Início",
+    toExternal: "Ir para Links externos",
+    toPrevent: "Ir para Prevenir",
+    vhtml: "Links em v-html (HTML gerado dinamicamente também é interceptado)",
+    vhtmlContent:
+      'Este é conteúdo renderizado com v-html: <a href="/">Voltar ao Início</a> | <a href="/prevent">Ver Prevenir</a>',
+    nested: "Elementos aninhados",
+    nestedDesc: "Cliques em elementos filhos dentro de {tag} também são detectados",
+    nestedLink: "Link decorado",
+    routerLink: "Coexistência com Router Link",
+    routerLinkDesc:
+      "<router-link> e tags <a> simples funcionam lado a lado. O interceptor captura ambos na fase de captura. RouterLink verifica event.defaultPrevented e pula sua própria navegação quando o interceptor já a tratou.",
+    routerLinkToHome: "router-link para Início",
+    plainLinkToExternal: "<a> simples para Links externos",
+    routerLinkNote:
+      "Ambos os links aparecem no console — o interceptor trata todos os cliques em <a>, independentemente de virem de <router-link> ou HTML simples.",
+    routerLinkGotcha: "Armadilha: router-link replace",
+    routerLinkGotchaDesc:
+      "O interceptor também captura cliques de <router-link replace>. Se o callback chamar ctx.preventDefault() e router.push(), a prop replace é silenciosamente ignorada — uma entrada é adicionada ao histórico em vez de substituída.",
+    routerLinkReplaceBroken: "sem solução — replace é ignorado (clique, depois pressione Voltar para ver)",
+    routerLinkReplaceFixed: "com data-no-intercept — replace funciona (clique, depois pressione Voltar para comparar)",
+    routerLinkGotchaNote:
+      "O primeiro link não tem solução: o interceptor chama preventDefault() + router.push(), então replace é perdido e uma entrada de histórico é adicionada. O segundo link tem data-no-intercept: o callback pula preventDefault(), deixando RouterLink tratar a navegação com replace intacto.",
+    routerLinkWorkaround:
+      "Solução: adicione um atributo data-no-intercept aos elementos <router-link> que precisam preservar props como replace. No callback, verifique ctx.anchor.hasAttribute('data-no-intercept') e pule ctx.preventDefault() para que RouterLink trate a navegação. Veja main.ts para a implementação.",
+  },
+  external: {
+    title: "Links externos",
+    description:
+      "Captura cliques de links externos (origem diferente) com onExternalLink. Esta demo adiciona automaticamente o parâmetro ?from=playground.",
+    externalLinks: "Links externos (a URL é reescrita ao clicar)",
+    note: 'Verifique a URL reescrita no console. Links com target="_blank" também são interceptados.',
+    modifierTest: "Teste de teclas modificadoras",
+    modifierDesc:
+      "Tente Ctrl/Cmd + Clique. Cliques com teclas modificadoras são pulados, respeitando o comportamento de nova aba do navegador.",
+    thisLink: "este link",
+  },
+  prevent: {
+    title: "Prevenir navegação",
+    description:
+      "Chame ctx.preventDefault() no callback para cancelar a navegação do link.",
+    normalLink: "Link interno normal (navega)",
+    toHome: "Navegar para Início",
+    blockedLinks: "Links bloqueados (sem navegação)",
+    blockedDesc:
+      "Os links a seguir têm um atributo data-block. A demo bloqueia a navegação em main.ts.",
+    blockedLink: "blocked.example.com (clique não navega)",
+    blockedToast: "Navegação para {url} bloqueada",
+  },
+  analytics: {
+    title: "Análise / Rastreamento",
+    description:
+      "Exemplo de disparo de eventos de análise ao clicar em links. Imagine enviando para GA4 ou Mixpanel.",
+    tryClick: "Tente clicar nestes links",
+    internalLink: "Link interno (navegação de página)",
+    anotherDemo: "Ir para outra página de demo",
+    collectedEvents: "Eventos coletados",
+    time: "Hora",
+    type: "Tipo",
+    url: "URL",
+    noEvents: "Nenhum evento ainda",
+  },
+  confirm: {
+    title: "Diálogo de confirmação",
+    description:
+      'Mostra um diálogo de confirmação ao clicar em um link externo. "Cancelar" bloqueia a navegação, "OK" permite.',
+    withConfirm: "Links com diálogo de confirmação",
+    withConfirmDesc: "Os links a seguir têm um atributo data-confirm.",
+    confirmSuffix: " (com confirmação)",
+    withoutConfirm: "Links sem confirmação (comportamento normal)",
+    withoutConfirmSuffix: " (sem confirmação)",
+    internalLink: "Link interno (sem confirmação)",
+    implementation: "Exemplo de implementação",
+    confirmPrompt: "Navegar para {hostname}?",
+  },
+  formGuard: {
+    title: "Form Guard",
+    description:
+      'Mostra um aviso de "alterações serão perdidas" ao clicar em um link durante a edição de um formulário. O diálogo só aparece quando há entradas não salvas.',
+    formSection: "Formulário (digite algo e depois clique em um link)",
+    name: "Nome",
+    namePlaceholder: "João Silva",
+    email: "E-mail",
+    emailPlaceholder: "joao{'@'}example.com",
+    dirty: "Alterações não salvas",
+    clean: "Sem alterações",
+    navLinks: "Links de navegação",
+    navDesc: "Um diálogo de confirmação aparece ao clicar com entradas de formulário não salvas.",
+    implementation: "Exemplo de implementação",
+    confirmLeave: "As alterações serão perdidas. Navegar mesmo assim?",
+  },
+  security: {
+    title: "Segurança",
+    description:
+      "Controles de segurança para links externos. Combina lista de domínios permitidos com atributo rel automático.",
+    allowlist: "Lista de permitidos",
+    allowlistDesc: "Domínios permitidos: {domains}. Todos os outros estão bloqueados.",
+    allowed: "Permitido",
+    blocked: "Bloqueado",
+    relSection: "Atributo rel automático",
+    relDesc:
+      'Todos os links externos recebem automaticamente rel="noopener noreferrer". Verifique no painel Elements do DevTools.',
+    implementation: "Exemplo de implementação",
+    blockedAlert: "{hostname} está bloqueado",
+  },
+  console: {
+    title: "Console",
+    empty: "Clique em um link para ver os logs do interceptor aqui",
+  },
+};
diff --git a/playground/src/i18n/zh.ts b/playground/src/i18n/zh.ts
new file mode 100644
index 0000000..3b952aa
--- /dev/null
+++ b/playground/src/i18n/zh.ts
@@ -0,0 +1,144 @@
+export default {
+  nav: {
+    home: "首页",
+    internal: "内部链接",
+    external: "外部链接",
+    prevent: "阻止跳转",
+    analytics: "分析",
+    confirm: "确认",
+    formGuard: "表单保护",
+    security: "安全",
+  },
+  home: {
+    title: "link-interceptor",
+    description:
+      "拦截 SPA 中所有 {tag} 标签的点击事件。框架无关的核心库，提供 Vue、React 和 Svelte 封装。在捕获阶段拦截，并为内部/外部链接提供回调。",
+    install: "安装",
+    basic: "交互式演示",
+    useCases: "使用场景",
+    console: "控制台",
+    consoleDescription:
+      "拦截器的日志会显示在底部的控制台面板中。点击链接即可查看。",
+    internalDesc: "将内部链接转换为 router.push()",
+    externalDesc: "重写外部链接的 URL",
+    preventDesc: "阻止链接跳转",
+    analyticsDesc: "追踪链接点击",
+    confirmDesc: "外部跳转时的确认对话框",
+    formGuardDesc: "防止在表单有未保存更改时离开",
+    securityDesc: "域名白名单 + 自动 rel 属性",
+  },
+  internal: {
+    title: "内部链接",
+    description:
+      "通过 onInternalLink 捕获同源 {tag} 标签的点击，并通过 router.push() 转换为 SPA 路由。",
+    normalLinks: "普通 HTML 链接（被插件拦截）",
+    toHome: "前往首页",
+    toExternal: "前往外部链接",
+    toPrevent: "前往阻止跳转",
+    vhtml: "v-html 中的链接（动态生成的 HTML 也会被拦截）",
+    vhtmlContent:
+      '这是通过 v-html 渲染的内容：<a href="/">返回首页</a> | <a href="/prevent">查看阻止跳转</a>',
+    nested: "嵌套元素",
+    nestedDesc: "点击 {tag} 内的子元素也会被检测到",
+    nestedLink: "装饰过的链接",
+    routerLink: "与 Router Link 共存",
+    routerLinkDesc:
+      "<router-link> 和普通 <a> 标签可以共存。拦截器在捕获阶段同时捕获两者。RouterLink 会检查 event.defaultPrevented，当拦截器已处理时会跳过自身的导航。",
+    routerLinkToHome: "router-link 前往首页",
+    plainLinkToExternal: "普通 <a> 前往外部链接",
+    routerLinkNote:
+      "两个链接都会显示在控制台中——拦截器会处理所有 <a> 的点击，无论它们来自 <router-link> 还是普通 HTML。",
+    routerLinkGotcha: "注意事项：router-link replace",
+    routerLinkGotchaDesc:
+      "拦截器也会捕获 <router-link replace> 的点击。如果回调调用了 ctx.preventDefault() 和 router.push()，replace 属性会被忽略——会添加历史记录而不是替换。",
+    routerLinkReplaceBroken: "无解决方案——replace 被忽略（点击后按返回键查看）",
+    routerLinkReplaceFixed: "使用 data-no-intercept——replace 正常工作（点击后按返回键比较）",
+    routerLinkGotchaNote:
+      "第一个链接没有解决方案：拦截器调用 preventDefault() + router.push()，所以 replace 丢失，历史记录被添加。第二个链接有 data-no-intercept：回调跳过 preventDefault()，让 RouterLink 保持 replace 进行导航。",
+    routerLinkWorkaround:
+      "解决方案：为需要保留 replace 等属性的 <router-link> 添加 data-no-intercept 属性。在回调中检查 ctx.anchor.hasAttribute('data-no-intercept')，跳过 ctx.preventDefault() 让 RouterLink 自行处理导航。参见 main.ts 的实现。",
+  },
+  external: {
+    title: "外部链接",
+    description:
+      "通过 onExternalLink 捕获外部链接（不同源）的点击。此演示会自动添加 ?from=playground 参数。",
+    externalLinks: "外部链接（点击后 URL 会被重写）",
+    note: '在控制台中查看重写后的 URL。target="_blank" 的链接也会被拦截。',
+    modifierTest: "修饰键测试",
+    modifierDesc:
+      "尝试 Ctrl/Cmd + 点击。修饰键点击会被跳过，尊重浏览器的新标签页行为。",
+    thisLink: "这个链接",
+  },
+  prevent: {
+    title: "阻止跳转",
+    description:
+      "在回调中调用 ctx.preventDefault() 来取消链接导航。",
+    normalLink: "普通内部链接（可导航）",
+    toHome: "导航到首页",
+    blockedLinks: "被阻止的链接（不导航）",
+    blockedDesc:
+      "以下链接带有 data-block 属性。演示在 main.ts 中阻止导航。",
+    blockedLink: "blocked.example.com（点击不会导航）",
+    blockedToast: "已阻止导航到 {url}",
+  },
+  analytics: {
+    title: "分析 / 追踪",
+    description:
+      "链接点击时触发分析事件的示例。模拟发送到 GA4 或 Mixpanel。",
+    tryClick: "尝试点击这些链接",
+    internalLink: "内部链接（页面导航）",
+    anotherDemo: "前往另一个演示页面",
+    collectedEvents: "收集的事件",
+    time: "时间",
+    type: "类型",
+    url: "URL",
+    noEvents: "暂无事件",
+  },
+  confirm: {
+    title: "确认对话框",
+    description:
+      '点击外部链接时显示确认对话框。"取消"阻止导航，"确定"允许导航。',
+    withConfirm: "带确认对话框的链接",
+    withConfirmDesc: "以下链接带有 data-confirm 属性。",
+    confirmSuffix: "（需确认）",
+    withoutConfirm: "无确认的链接（正常行为）",
+    withoutConfirmSuffix: "（无确认）",
+    internalLink: "内部链接（无确认）",
+    implementation: "实现示例",
+    confirmPrompt: "是否导航到 {hostname}？",
+  },
+  formGuard: {
+    title: "表单保护",
+    description:
+      "在编辑表单时点击链接会显示「更改将丢失」的警告。仅在有未保存输入时才会出现对话框。",
+    formSection: "表单（输入内容后点击链接）",
+    name: "姓名",
+    namePlaceholder: "张三",
+    email: "邮箱",
+    emailPlaceholder: "zhangsan{'@'}example.com",
+    dirty: "有未保存的更改",
+    clean: "无更改",
+    navLinks: "导航链接",
+    navDesc: "在有未保存表单输入时点击会出现确认对话框。",
+    implementation: "实现示例",
+    confirmLeave: "更改将丢失。是否继续导航？",
+  },
+  security: {
+    title: "安全",
+    description:
+      "外部链接的安全控制。域名白名单与自动 rel 属性的结合。",
+    allowlist: "白名单",
+    allowlistDesc: "允许的域名：{domains}。其他域名将被阻止。",
+    allowed: "允许",
+    blocked: "已阻止",
+    relSection: "自动 rel 属性",
+    relDesc:
+      '所有外部链接会自动添加 rel="noopener noreferrer"。在 DevTools 的 Elements 面板中查看。',
+    implementation: "实现示例",
+    blockedAlert: "{hostname} 已被阻止",
+  },
+  console: {
+    title: "控制台",
+    empty: "点击链接即可在此查看拦截器日志",
+  },
+};