node-red-contrib-notification-better 1.1.0 → 1.2.0

package/README.md

@@ -1,8 +1,8 @@
 # node-red-contrib-notification-better
 
-一個為 [Node-RED Dashboard](https://flows.nodered.org/node/node-red-dashboard) 設計的進階通知（Notification / Toast）與互動對話框（Dialog / Prompt）節點。
+一個為 [Node-RED Dashboard](https://flows.nodered.org/node/node-red-dashboard) 設計的進階通知（Notification / Toast）與互動對話框（Dialog / Prompt）節點：**`noti-better`**。
 
-相比原生的通知節點，此節點徹底解決了按鈕被強制大寫的問題，並提供多語言介面、視覺主題等級、提示音效、倒數進度條等豐富功能！
+徹底解決按鈕強制大寫的問題，支援完美暗黑主題相容介面、完整多語言、通知等級色彩、提示音效與倒數進度條！
 
 ---
 
@@ -11,15 +11,18 @@
 - 🔤 **忠實保留按鈕原始大小寫 (Preserve Button Case)**：
   - 徹底解除 Angular Material 強制全大寫（`text-transform: uppercase`）的限制。
   - 輸入 `Ok` 顯示 `Ok`、輸入 `Cancel` 顯示 `Cancel`、輸入 `確定` 或 `Close Now` 皆忠實依字樣呈現！
-- 🌐 **多國語言介面 (Multi-Language i18n)**：
-  - 支援 **繁體中文 (zh-TW)**、**English (en-US)**、**日本語 (ja)**、**簡體中文 (zh-CN)**，根據 Node-RED 系統語言自動切換。
-- 🎯 **通知等級預設 (Notification Levels)**：
+- 🌓 **完美相容深色 / 淺色主題 (Dark & Light Theme Friendly)**：
+  - 表單標題與排版無縫融入 Node-RED 介面，在暗黑模式下無突兀白底，文字清晰舒適。
+- 🛡️ **雙重多語言防呆機制 (Robust i18n & Fallback)**：
+  - 完整支援 **繁體中文 (zh-TW)**、**English (en-US)**、**日本語 (ja)**、**簡體中文 (zh-CN)**。
+  - 所有表單欄位與畫布標籤皆內嵌完整的預設降級文字，即使語系載入延遲也絕不出現空白或程式代碼字樣。
+- 🎯 **五種通知等級預設 (Notification Levels)**：
   - 內建 **Info (資訊)**、**Success (成功)**、**Warning (警告)**、**Error (錯誤)** 與 **Default (預設)**。
-  - 自動套用專屬主題色彩與外框線，亦可透過 `msg.notificationType` 動態指定。
+  - 自動套用專屬主題色彩與外框線，亦可透過 `msg.notificationType` 動態切換。
 - 🔔 **圖示支援 (Icon Support)**：
   - 自動根據通知等級配對 Font Awesome 圖示，亦可手動填寫或透過 `msg.icon` 自訂圖示。
 - 🔊 **音效提示 (Audio Chime Alert)**：
-  - 內建 Web Audio API 音效合成技術，無須外掛任何音訊檔案，即可發出清脆悅耳的提示聲。
+  - 內建 Web Audio API 音效合成技術，無須外掛任何音訊檔案，勾選或由 `msg.playSound: true` 觸發即可發出清脆提示聲。
 - ⏳ **倒數進度條 (Countdown Progress Bar)**：
   - 在卡片底部以視覺化動態進度條呈現剩餘時間，何時關閉一目了然。
 - 💬 **互動式對話框與輸入框 (Dialog & Prompt)**：
@@ -53,7 +56,7 @@ npm install node-red-contrib-notification-better
 
 ## 🛠️ 使用與訊息屬性說明 (Message Properties)
 
-安裝完成後，會在左側節點列表（Palette）的 **dashboard** 分類中顯示 **`進階通知 (notification better)`**。
+安裝完成後，會在左側節點列表（Palette）的 **dashboard** 分類中顯示 **`noti-better`** 節點。
 
 ### 支援的輸入訊息屬性 (Inputs)
 

package/locales/en-US/{ui_notification_better.json → noti-better.json}

@@ -1,9 +1,9 @@
 {
-    "ui_notification_better": {
-        "paletteLabel": "notification better",
+    "noti-better": {
+        "paletteLabel": "noti-better",
         "label": {
             "position": "Layout",
-            "notificationType": "Type / Level",
+            "notificationType": "Notification Type",
             "displayTime": "Timeout (sec)",
             "highlight": "Border Color",
             "showIcon": "Show Icon",
@@ -19,9 +19,9 @@
             "raw": "Accept raw HTML / JavaScript in msg.payload",
             "className": "Custom CSS Class",
             "topic": "Topic / Title",
-            "name": "Name",
+            "name": "Node Name",
             "showDialog": "show dialog",
-            "showNotification": "show notification"
+            "showNotification": "noti-better"
         },
         "option": {
             "topRight": "Top Right",
@@ -40,12 +40,12 @@
             "timeout": "e.g. 3 or [msg.timeout]",
             "highlight": "e.g. #ff0000 or red",
             "customIcon": "e.g. fa-bell, fa-check",
-            "ok": "Button label, e.g. Ok, Confirm, 確定",
-            "cancel": "Optional label, e.g. Cancel, 取消",
-            "promptDefault": "Optional default input value",
-            "promptPlaceholder": "Optional placeholder inside text box",
+            "ok": "e.g. Ok, Confirm, 確定",
+            "cancel": "e.g. Cancel, 取消",
+            "promptDefault": "Optional default value",
+            "promptPlaceholder": "Placeholder in text box",
             "className": "[msg.className]",
-            "topic": "[msg.topic]",
+            "topic": "[msg.topic] or custom title",
             "name": "Node name"
         },
         "section": {
@@ -56,7 +56,7 @@
         },
         "tip": {
             "raw": "<b>Security Notice</b>: Allowing raw HTML/JavaScript can enable code execution. Only enable this if the message payload originates from a trusted source.",
-            "icon": "Enter Font Awesome 4 icon name (e.g. fa-bell, fa-shield). If enabled without custom icon, an icon matching the notification type will automatically be displayed.",
+            "icon": "Enter Font Awesome 4 icon name (e.g. fa-bell). If enabled without custom icon, an icon matching the notification type will automatically be displayed.",
             "preserveCase": "When checked, button text will exactly match what you typed instead of being forced into uppercase by Angular Material."
         }
     }

package/locales/ja/{ui_notification_better.json → noti-better.json}

@@ -1,9 +1,9 @@
 {
-    "ui_notification_better": {
-        "paletteLabel": "通知（拡張版）",
+    "noti-better": {
+        "paletteLabel": "noti-better",
         "label": {
             "position": "表示位置",
-            "notificationType": "通知タイプ / レベル",
+            "notificationType": "通知タイプ",
             "displayTime": "表示時間 (秒)",
             "highlight": "枠線の色",
             "showIcon": "アイコンを表示",
@@ -12,7 +12,7 @@
             "showCountdown": "カウントダウンバーを表示",
             "preserveCase": "ボタンの大文字強制を無効化 (入力通り表示)",
             "sendall": "全ブラウザセッションに送信",
-            "ok": "デフォルトボタン",
+            "ok": "確認ボタン",
             "cancel": "キャンセルボタン",
             "promptDefault": "入力欄の初期値",
             "promptPlaceholder": "入力欄のプレースホルダー",
@@ -21,7 +21,7 @@
             "topic": "トピック / タイトル",
             "name": "ノード名",
             "showDialog": "ダイアログを表示",
-            "showNotification": "通知を表示"
+            "showNotification": "noti-better"
         },
         "option": {
             "topRight": "右上 (Top Right)",
@@ -40,12 +40,12 @@
             "timeout": "例: 3 または [msg.timeout]",
             "highlight": "例: #ff0000 または red",
             "customIcon": "例: fa-bell, fa-check",
-            "ok": "ボタンのラベル (例: Ok, 了解)",
-            "cancel": "キャンセルのラベル (例: Cancel, 中止)",
+            "ok": "例: Ok, 確定",
+            "cancel": "例: Cancel, 中止",
             "promptDefault": "初期入力値（任意）",
             "promptPlaceholder": "プレースホルダー（任意）",
             "className": "[msg.className]",
-            "topic": "[msg.topic]",
+            "topic": "[msg.topic] またはカスタムタイトル",
             "name": "ノード名"
         },
         "section": {

package/locales/zh-CN/noti-better.json

@@ -0,0 +1,63 @@
+{
+    "noti-better": {
+        "paletteLabel": "noti-better",
+        "label": {
+            "position": "布局位置",
+            "notificationType": "通知类型",
+            "displayTime": "显示时间 (秒)",
+            "highlight": "边框颜色",
+            "showIcon": "显示图标",
+            "customIcon": "自定义图标",
+            "playSound": "播放提示音效",
+            "showCountdown": "显示倒计时进度条",
+            "preserveCase": "保留按钮原始大小写 (不强制大写)",
+            "sendall": "发送至所有浏览器会话",
+            "ok": "确认按钮标签",
+            "cancel": "取消按钮标签",
+            "promptDefault": "默认输入文本",
+            "promptPlaceholder": "输入框提示字",
+            "raw": "允许 msg.payload 中的原始 HTML / JavaScript",
+            "className": "CSS 类名",
+            "topic": "主题标题",
+            "name": "节点名称",
+            "showDialog": "显示对话框",
+            "showNotification": "noti-better"
+        },
+        "option": {
+            "topRight": "右上角 (Top Right)",
+            "bottomRight": "右下角 (Bottom Right)",
+            "topLeft": "左上角 (Top Left)",
+            "bottomLeft": "左下角 (Bottom Left)",
+            "dialog": "确认 / 取消 对话框 (Dialog)",
+            "prompt": "带文本输入框的对话框 (Prompt)",
+            "typeDefault": "默认 (中性)",
+            "typeInfo": "ℹ 信息 (蓝色)",
+            "typeSuccess": "✓ 成功 (绿色)",
+            "typeWarning": "⚠ 警告 (琥珀黄)",
+            "typeError": "✕ 错误 (红色)"
+        },
+        "placeholder": {
+            "timeout": "例如 3 或 [msg.timeout]",
+            "highlight": "例如 #ff0000 或 red",
+            "customIcon": "例如 fa-bell、fa-check",
+            "ok": "例如 Ok、确定、Submit",
+            "cancel": "例如 Cancel、取消",
+            "promptDefault": "可选默认输入值",
+            "promptPlaceholder": "文本框内的提示字",
+            "className": "[msg.className]",
+            "topic": "[msg.topic] 或自定义标题",
+            "name": "节点名称"
+        },
+        "section": {
+            "basic": "基本设置",
+            "appearance": "外观与样式",
+            "dialog": "对话框设置",
+            "advanced": "高级与行为设置"
+        },
+        "tip": {
+            "raw": "<b>安全提醒</b>：启用原始 HTML/JavaScript 可能允许执行任意脚本。仅在消息内容来自可信来源时开启此选项。",
+            "icon": "请输入 Font Awesome 4 图标名称（例如 fa-bell、fa-shield）。若未自定义图标，系统将依据通知类型自动呈现对应图标。",
+            "preserveCase": "勾选后，按钮文本将完全依据您所输入的内容呈现，不再被 Angular Material 强制转换为全大写。"
+        }
+    }
+}

package/locales/zh-TW/{ui_notification_better.json → noti-better.json}

@@ -1,9 +1,9 @@
 {
-    "ui_notification_better": {
-        "paletteLabel": "進階通知",
+    "noti-better": {
+        "paletteLabel": "noti-better",
         "label": {
             "position": "佈局位置",
-            "notificationType": "通知類型 / 等級",
+            "notificationType": "通知類型",
             "displayTime": "顯示時間 (秒)",
             "highlight": "外框顏色",
             "showIcon": "顯示圖示",
@@ -12,16 +12,16 @@
             "showCountdown": "顯示倒數進度條",
             "preserveCase": "保留按鈕原始大小寫 (不強制大寫)",
             "sendall": "發送至所有瀏覽器工作階段",
-            "ok": "預設動作按鈕",
-            "cancel": "次要動作按鈕",
-            "promptDefault": "輸入框預設文字",
-            "promptPlaceholder": "輸入框提示文字 (Placeholder)",
+            "ok": "確認按鈕標籤",
+            "cancel": "取消按鈕標籤",
+            "promptDefault": "預設輸入文字",
+            "promptPlaceholder": "輸入框提示字",
             "raw": "允許 msg.payload 中的原始 HTML / JavaScript",
-            "className": "自訂 CSS 類別",
-            "topic": "主題 / 標題",
+            "className": "CSS 類別",
+            "topic": "主題標題",
             "name": "節點名稱",
             "showDialog": "顯示對話框",
-            "showNotification": "顯示通知"
+            "showNotification": "進階通知"
         },
         "option": {
             "topRight": "右上角 (Top Right)",
@@ -40,19 +40,19 @@
             "timeout": "例如 3 或 [msg.timeout]",
             "highlight": "例如 #ff0000 或 red",
             "customIcon": "例如 fa-bell、fa-check",
-            "ok": "按鈕文字，例如 Ok、Confirm、確定",
-            "cancel": "可選按鈕文字，例如 Cancel、取消",
+            "ok": "例如 Ok、確定、Submit",
+            "cancel": "例如 Cancel、取消",
             "promptDefault": "可選預設輸入值",
             "promptPlaceholder": "文字框內的提示字",
             "className": "[msg.className]",
-            "topic": "[msg.topic]",
+            "topic": "[msg.topic] 或自訂標題",
             "name": "節點名稱"
         },
         "section": {
             "basic": "基本設定",
             "appearance": "外觀與樣式",
             "dialog": "對話框設定",
-            "advanced": "行為與進階設定"
+            "advanced": "進階與行為設定"
         },
         "tip": {
             "raw": "<b>安全提醒</b>：啟用原始 HTML/JavaScript 可能允許執行任意腳本。僅在訊息內容來自可信來源時開啟此選項。",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-notification-better",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An enhanced notification and dialog node for Node-RED Dashboard supporting exact button casing, preset notification levels, audio alerts, countdown progress bar, and multi-language UI.",
   "main": "ui_notification.js",
   "scripts": {
@@ -14,12 +14,13 @@
     "dialog",
     "prompt",
     "alert",
+    "noti-better",
     "ui"
   ],
   "node-red": {
     "version": ">=1.0.0",
     "nodes": {
-      "ui_notification_better": "ui_notification.js"
+      "noti-better": "ui_notification.js"
     }
   },
   "author": "",

package/ui_notification.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-    RED.nodes.registerType('ui_notification_better', {
+    RED.nodes.registerType('noti-better', {
         category: (RED._("node-red-dashboard/ui_base:ui_base.label.category") || 'dashboard'),
         color: 'rgb(119, 198, 204)',
         defaults: {
@@ -28,10 +28,24 @@
         align: "right",
         icon: "font-awesome/fa-bell",
         paletteLabel: function() {
-            return this._("ui_notification_better.paletteLabel");
+            try {
+                var text = this._("noti-better.paletteLabel");
+                return (text && text.indexOf(".") === -1 && text.indexOf("noti-better") === -1) ? text : "noti-better";
+            } catch(e) {
+                return "noti-better";
+            }
         },
         label: function() { 
-            return this.name || (this.position === "prompt" || this.position === "dialog" ? this._("ui_notification_better.label.showDialog") : this._("ui_notification_better.label.showNotification")); 
+            if (this.name) { return this.name; }
+            var isDlg = (this.position === "prompt" || this.position === "dialog");
+            var fallback = isDlg ? "顯示對話框" : "進階通知";
+            try {
+                var key = isDlg ? "noti-better.label.showDialog" : "noti-better.label.showNotification";
+                var text = this._(key);
+                return (text && text.indexOf(".") === -1 && text !== key) ? text : fallback;
+            } catch(e) {
+                return fallback;
+            }
         },
         labelStyle: function() { 
             return this.name ? "node_label_italic" : ""; 
@@ -92,7 +106,7 @@
                 }
             }).trigger("change");
 
-            // 安全提示警告聯動
+            // 安全警語聯動
             $("#node-input-raw").on("change", function() {
                 if ($(this).is(":checked")) {
                     $("#node-tip-raw-warning").slideDown(200);
@@ -113,171 +127,227 @@
 </script>
 
 <style>
-    .nr-notification-section-header {
-        font-weight: 600;
-        padding: 6px 10px;
-        margin-top: 14px;
-        margin-bottom: 12px;
-        background: #f7f9fa;
-        border-left: 4px solid #77c6cc;
-        border-radius: 2px;
-        color: #333;
-        display: flex;
-        align-items: center;
-        gap: 8px;
+    .nr-noti-section-title {
+        font-weight: bold;
+        margin-top: 16px;
+        margin-bottom: 10px;
+        padding-bottom: 4px;
+        border-bottom: 2px solid #77c6cc;
+        display: inline-block;
+        letter-spacing: 0.5px;
     }
-    .nr-notification-tip-box {
+    .nr-noti-tip-box {
         margin: 10px 0;
-        padding: 10px 14px;
-        background-color: #fff9e6;
+        padding: 8px 12px;
+        background-color: rgba(255, 184, 0, 0.15);
         border-left: 4px solid #ffb800;
-        border-radius: 4px;
+        border-radius: 3px;
         font-size: 12px;
         line-height: 1.5;
-        color: #665200;
     }
 </style>
 
-<script type="text/html" data-template-name="ui_notification_better">
+<script type="text/html" data-template-name="noti-better">
     <!-- 基本設定區塊 -->
-    <div class="nr-notification-section-header">
-        <i class="fa fa-sliders"></i> <span data-i18n="ui_notification_better.section.basic"></span>
+    <div class="form-row">
+        <span class="nr-noti-section-title">
+            <i class="fa fa-sliders"></i> <span data-i18n="noti-better.section.basic">基本設定</span>
+        </span>
     </div>
 
     <div class="form-row">
-        <label for="node-input-position"><i class="fa fa-th-large"></i> <span data-i18n="ui_notification_better.label.position"></span></label>
+        <label for="node-input-position"><i class="fa fa-th-large"></i> <span data-i18n="noti-better.label.position">佈局位置</span></label>
         <select id="node-input-position" style="width:70%;">
-            <option value="top right" data-i18n="ui_notification_better.option.topRight"></option>
-            <option value="bottom right" data-i18n="ui_notification_better.option.bottomRight"></option>
-            <option value="top left" data-i18n="ui_notification_better.option.topLeft"></option>
-            <option value="bottom left" data-i18n="ui_notification_better.option.bottomLeft"></option>
-            <option value="dialog" data-i18n="ui_notification_better.option.dialog"></option>
-            <option value="prompt" data-i18n="ui_notification_better.option.prompt"></option>
+            <option value="top right" data-i18n="noti-better.option.topRight">右上角 (Top Right)</option>
+            <option value="bottom right" data-i18n="noti-better.option.bottomRight">右下角 (Bottom Right)</option>
+            <option value="top left" data-i18n="noti-better.option.topLeft">左上角 (Top Left)</option>
+            <option value="bottom left" data-i18n="noti-better.option.bottomLeft">左下角 (Bottom Left)</option>
+            <option value="dialog" data-i18n="noti-better.option.dialog">確認 / 取消 對話框 (Dialog)</option>
+            <option value="prompt" data-i18n="noti-better.option.prompt">帶文字輸入框的對話框 (Prompt)</option>
         </select>
     </div>
 
     <div class="form-row">
-        <label for="node-input-notificationType"><i class="fa fa-tag"></i> <span data-i18n="ui_notification_better.label.notificationType"></span></label>
+        <label for="node-input-notificationType"><i class="fa fa-tag"></i> <span data-i18n="noti-better.label.notificationType">通知類型</span></label>
         <select id="node-input-notificationType" style="width:70%;">
-            <option value="default" data-i18n="ui_notification_better.option.typeDefault"></option>
-            <option value="info" data-i18n="ui_notification_better.option.typeInfo"></option>
-            <option value="success" data-i18n="ui_notification_better.option.typeSuccess"></option>
-            <option value="warning" data-i18n="ui_notification_better.option.typeWarning"></option>
-            <option value="error" data-i18n="ui_notification_better.option.typeError"></option>
+            <option value="default" data-i18n="noti-better.option.typeDefault">預設 (中性)</option>
+            <option value="info" data-i18n="noti-better.option.typeInfo">ℹ 資訊 (藍色)</option>
+            <option value="success" data-i18n="noti-better.option.typeSuccess">✓ 成功 (綠色)</option>
+            <option value="warning" data-i18n="noti-better.option.typeWarning">⚠ 警告 (琥珀黃)</option>
+            <option value="error" data-i18n="noti-better.option.typeError">✕ 錯誤 (紅色)</option>
         </select>
     </div>
 
     <div class="form-row">
-        <label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="ui_notification_better.label.topic"></span></label>
-        <input type="text" id="node-input-topic" data-i18n="[placeholder]ui_notification_better.placeholder.topic">
+        <label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="noti-better.label.topic">主題標題</span></label>
+        <input type="text" id="node-input-topic" placeholder="[msg.topic] 或自訂標題" data-i18n="[placeholder]noti-better.placeholder.topic">
     </div>
 
     <!-- 浮動通知專用設定 (Timeout, 進度條等) -->
     <div id="section-toast-settings">
         <div class="form-row">
-            <label for="node-input-displayTime"><i class="fa fa-clock-o"></i> <span data-i18n="ui_notification_better.label.displayTime"></span></label>
-            <input type="text" id="node-input-displayTime" data-i18n="[placeholder]ui_notification_better.placeholder.timeout">
+            <label for="node-input-displayTime"><i class="fa fa-clock-o"></i> <span data-i18n="noti-better.label.displayTime">顯示時間 (秒)</span></label>
+            <input type="text" id="node-input-displayTime" placeholder="例如 3 或 [msg.timeout]" data-i18n="[placeholder]noti-better.placeholder.timeout">
         </div>
         <div class="form-row">
             <label style="width:auto;" for="node-input-showCountdown">
                 <input type="checkbox" id="node-input-showCountdown" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:6px;">
-                <span data-i18n="ui_notification_better.label.showCountdown"></span>
+                <span data-i18n="noti-better.label.showCountdown">顯示倒數進度條</span>
             </label>
         </div>
     </div>
 
     <!-- 外觀與圖示設定區塊 -->
-    <div class="nr-notification-section-header">
-        <i class="fa fa-paint-brush"></i> <span data-i18n="ui_notification_better.section.appearance"></span>
+    <div class="form-row">
+        <span class="nr-noti-section-title">
+            <i class="fa fa-paint-brush"></i> <span data-i18n="noti-better.section.appearance">外觀與樣式</span>
+        </span>
     </div>
 
     <div class="form-row">
-        <label for="node-input-highlight"><i class="fa fa-square-o"></i> <span data-i18n="ui_notification_better.label.highlight"></span></label>
-        <input type="text" id="node-input-highlight" data-i18n="[placeholder]ui_notification_better.placeholder.highlight">
+        <label for="node-input-highlight"><i class="fa fa-square-o"></i> <span data-i18n="noti-better.label.highlight">外框顏色</span></label>
+        <input type="text" id="node-input-highlight" placeholder="例如 #ff0000 或 red" data-i18n="[placeholder]noti-better.placeholder.highlight">
     </div>
 
     <div class="form-row">
         <label style="width:auto;" for="node-input-showIcon">
             <input type="checkbox" id="node-input-showIcon" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:6px;">
-            <span data-i18n="ui_notification_better.label.showIcon"></span>
+            <span data-i18n="noti-better.label.showIcon">顯示圖示</span>
         </label>
     </div>
 
     <div class="form-row" id="node-row-customIcon">
-        <label for="node-input-customIcon"><i class="fa fa-font-awesome"></i> <span data-i18n="ui_notification_better.label.customIcon"></span></label>
-        <input type="text" id="node-input-customIcon" data-i18n="[placeholder]ui_notification_better.placeholder.customIcon">
+        <label for="node-input-customIcon"><i class="fa fa-font-awesome"></i> <span data-i18n="noti-better.label.customIcon">自訂圖示</span></label>
+        <input type="text" id="node-input-customIcon" placeholder="例如 fa-bell、fa-check" data-i18n="[placeholder]noti-better.placeholder.customIcon">
     </div>
 
     <div class="form-row">
-        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui_notification_better.label.className"></span></label>
-        <input type="text" id="node-input-className" data-i18n="[placeholder]ui_notification_better.placeholder.className">
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="noti-better.label.className">CSS 類別</span></label>
+        <input type="text" id="node-input-className" placeholder="[msg.className]" data-i18n="[placeholder]noti-better.placeholder.className">
     </div>
 
     <!-- 對話框專用設定 (按鈕與大小寫) -->
     <div id="section-dialog-settings" style="display:none;">
-        <div class="nr-notification-section-header">
-            <i class="fa fa-commenting-o"></i> <span data-i18n="ui_notification_better.section.dialog"></span>
+        <div class="form-row">
+            <span class="nr-noti-section-title">
+                <i class="fa fa-commenting-o"></i> <span data-i18n="noti-better.section.dialog">對話框設定</span>
+            </span>
         </div>
 
         <div class="form-row">
-            <label for="node-input-ok"><i class="fa fa-check"></i> <span data-i18n="ui_notification_better.label.ok"></span></label>
-            <input type="text" id="node-input-ok" data-i18n="[placeholder]ui_notification_better.placeholder.ok">
+            <label for="node-input-ok"><i class="fa fa-check"></i> <span data-i18n="noti-better.label.ok">確認按鈕標籤</span></label>
+            <input type="text" id="node-input-ok" placeholder="例如 Ok、確定、Submit" data-i18n="[placeholder]noti-better.placeholder.ok">
         </div>
 
         <div class="form-row">
-            <label for="node-input-cancel"><i class="fa fa-times"></i> <span data-i18n="ui_notification_better.label.cancel"></span></label>
-            <input type="text" id="node-input-cancel" data-i18n="[placeholder]ui_notification_better.placeholder.cancel">
+            <label for="node-input-cancel"><i class="fa fa-times"></i> <span data-i18n="noti-better.label.cancel">取消按鈕標籤</span></label>
+            <input type="text" id="node-input-cancel" placeholder="例如 Cancel、取消" data-i18n="[placeholder]noti-better.placeholder.cancel">
         </div>
 
         <div id="node-dialog-prompt-fields" style="display:none;">
             <div class="form-row">
-                <label for="node-input-promptDefault"><i class="fa fa-pencil-square-o"></i> <span data-i18n="ui_notification_better.label.promptDefault"></span></label>
-                <input type="text" id="node-input-promptDefault" data-i18n="[placeholder]ui_notification_better.placeholder.promptDefault">
+                <label for="node-input-promptDefault"><i class="fa fa-pencil-square-o"></i> <span data-i18n="noti-better.label.promptDefault">預設輸入文字</span></label>
+                <input type="text" id="node-input-promptDefault" placeholder="可選預設輸入值" data-i18n="[placeholder]noti-better.placeholder.promptDefault">
             </div>
             <div class="form-row">
-                <label for="node-input-promptPlaceholder"><i class="fa fa-i-cursor"></i> <span data-i18n="ui_notification_better.label.promptPlaceholder"></span></label>
-                <input type="text" id="node-input-promptPlaceholder" data-i18n="[placeholder]ui_notification_better.placeholder.promptPlaceholder">
+                <label for="node-input-promptPlaceholder"><i class="fa fa-i-cursor"></i> <span data-i18n="noti-better.label.promptPlaceholder">輸入框提示字</span></label>
+                <input type="text" id="node-input-promptPlaceholder" placeholder="輸入框內的提示字 (Placeholder)" data-i18n="[placeholder]noti-better.placeholder.promptPlaceholder">
             </div>
         </div>
 
         <div class="form-row">
             <label style="width:auto;" for="node-input-preserveCase">
                 <input type="checkbox" id="node-input-preserveCase" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:6px;">
-                <span data-i18n="ui_notification_better.label.preserveCase"></span>
+                <span data-i18n="noti-better.label.preserveCase">保留按鈕原始大小寫 (不強制大寫)</span>
             </label>
         </div>
     </div>
 
     <!-- 行為與進階設定區塊 -->
-    <div class="nr-notification-section-header">
-        <i class="fa fa-cogs"></i> <span data-i18n="ui_notification_better.section.advanced"></span>
+    <div class="form-row">
+        <span class="nr-noti-section-title">
+            <i class="fa fa-cogs"></i> <span data-i18n="noti-better.section.advanced">進階與行為設定</span>
+        </span>
     </div>
 
     <div class="form-row">
         <label style="width:auto;" for="node-input-playSound">
             <input type="checkbox" id="node-input-playSound" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:6px;">
-            <span data-i18n="ui_notification_better.label.playSound"></span>
+            <span data-i18n="noti-better.label.playSound">播放提示音效</span>
         </label>
     </div>
 
     <div class="form-row">
         <label style="width:auto;" for="node-input-sendall">
             <input type="checkbox" id="node-input-sendall" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:6px;">
-            <span data-i18n="ui_notification_better.label.sendall"></span>
+            <span data-i18n="noti-better.label.sendall">發送至所有瀏覽器工作階段</span>
         </label>
     </div>
 
     <div class="form-row">
         <label style="width:auto;" for="node-input-raw">
             <input type="checkbox" id="node-input-raw" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:6px;">
-            <span data-i18n="ui_notification_better.label.raw"></span>
+            <span data-i18n="noti-better.label.raw">允許 msg.payload 中的原始 HTML / JavaScript</span>
         </label>
     </div>
 
-    <div id="node-tip-raw-warning" class="nr-notification-tip-box" style="display:none;" data-i18n="[html]ui_notification_better.tip.raw"></div>
+    <div id="node-tip-raw-warning" class="nr-noti-tip-box" style="display:none;" data-i18n="[html]noti-better.tip.raw">
+        <b>安全提醒</b>：啟用原始 HTML/JavaScript 可能允許執行任意腳本。僅在訊息內容來自可信來源時開啟此選項。
+    </div>
 
     <div class="form-row" style="margin-top:14px;">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_notification_better.label.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]ui_notification_better.placeholder.name">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="noti-better.label.name">節點名稱</span></label>
+        <input type="text" id="node-input-name" placeholder="節點名稱" data-i18n="[placeholder]noti-better.placeholder.name">
     </div>
 </script>
+
+<script type="text/html" data-help-name="noti-better">
+    <p>專為 <b>Node-RED Dashboard</b> 量身打造的強化版通知 (Notification / Toast) 與互動式對話框 (Dialog) 節點。</p>
+
+    <h3>核心特色</h3>
+    <ul>
+        <li><b>忠實保留按鈕大小寫</b>：徹底解除 Angular Material 強制大寫的限制，輸入「Ok」即顯示「Ok」，大小寫百分之百精確呈現。</li>
+        <li><b>通知等級預設</b>：內建 Info（資訊）、Success（成功）、Warning（警告）、Error（錯誤）四種視覺主題與自動圖示。</li>
+        <li><b>音效提醒</b>：內建 Web Audio API 音效支援，可發出清脆的提示聲。</li>
+        <li><b>豐富的自訂性</b>：支援原生 HTML / JavaScript、倒數進度條、自訂外框顏色與圖示。</li>
+    </ul>
+
+    <h3>輸入屬性 (Inputs)</h3>
+    <dl class="message-properties">
+        <dt>payload <span class="property-type">字串 | 物件</span></dt>
+        <dd>顯示在彈出框中的主要內容。若啟用「允許原始 HTML / JS」，將忠實渲染 HTML 與動畫標籤。</dd>
+
+        <dt class="optional">topic <span class="property-type">字串</span></dt>
+        <dd>通知或對話框的頂部標題。</dd>
+
+        <dt class="optional">timeout <span class="property-type">數值</span></dt>
+        <dd>自動關閉的顯示秒數（預設 3 秒），設為 0 會立即關閉。</dd>
+
+        <dt class="optional">notificationType <span class="property-type">字串</span></dt>
+        <dd>通知等級，可指定為 <code>default</code>、<code>info</code>、<code>success</code>、<code>warning</code> 或 <code>error</code>。</dd>
+
+        <dt class="optional">ok <span class="property-type">字串</span></dt>
+        <dd>確認按鈕文字（完全保留原始大小寫）。</dd>
+
+        <dt class="optional">cancel <span class="property-type">字串</span></dt>
+        <dd>取消按鈕文字（完全保留原始大小寫）。</dd>
+
+        <dt class="optional">highlight <span class="property-type">字串</span></dt>
+        <dd>外框高亮顏色（例如 <code>#2ecc71</code> 或 <code>green</code>）。</dd>
+
+        <dt class="optional">icon <span class="property-type">字串</span></dt>
+        <dd>自訂 Font Awesome 圖示名稱（例如 <code>fa-bell</code>）。</dd>
+
+        <dt class="optional">playSound <span class="property-type">布林值</span></dt>
+        <dd>是否在彈出通知時播放提示音效。</dd>
+
+        <dt class="optional">socketid <span class="property-type">字串</span></dt>
+        <dd>若未勾選廣播至所有工作階段，可指定單一瀏覽器連線的 Session ID。</dd>
+    </dl>
+
+    <h3>輸出屬性 (Outputs)</h3>
+    <dl class="message-properties">
+        <dt>payload <span class="property-type">字串</span></dt>
+        <dd>當佈局設為 <b>Dialog</b>（確認對話框）或 <b>Prompt</b>（文字輸入對話框）時，使用者點擊或輸入確認後的結果將由輸出點發送。</dd>
+    </dl>
+</script>

package/ui_notification.js

@@ -1,6 +1,6 @@
 /**
- * node-red-contrib-notification-better
- * 為 Node-RED Dashboard 提供更強大、客製化度更高的通知與對話框節點
+ * node-red-contrib-notification-better (noti-better)
+ * 專為 Node-RED Dashboard 設計的進階通知與互動對話框節點
  */
 
 module.exports = function(RED) {
@@ -11,39 +11,39 @@ module.exports = function(RED) {
         try {
             ui = require("node-red-dashboard")(RED);
         } catch (e2) {
-            RED.log.warn("node-red-contrib-notification-better: 找不到 node-red-dashboard，請確保已安裝該套件。");
+            RED.log.warn("noti-better: 找不到 node-red-dashboard，請確保已安裝該套件。");
         }
     }
 
-    // 全域 CSS 注入：解除 Angular Material 強制大寫，並提供進階視覺美化與主題樣式
+    // 全域 CSS 注入：徹底消除 Angular Material 的強制大寫，並為深淺主題提供美化
     var globalStyleInjected = false;
     var betterNotificationCSS = `
-<style id="nr-notification-better-styles">
-/* 徹底解除對話框與通知按鈕強制大寫的限制，忠實保留原始大小寫 */
+<style id="nr-noti-better-styles">
+/* 徹底解除對話框與通知按鈕強制大寫的限制，忠實依輸入原樣呈現 */
 .nr-dashboard-dialog .md-button,
 .nr-dashboard-dialog .md-confirm-button,
 .nr-dashboard-dialog .md-cancel-button,
 .nr-dashboard-dialog button,
-.nr-better-notification .md-button,
-.nr-better-dialog .md-button,
+.nr-noti-better .md-button,
+.nr-noti-dialog .md-button,
 .nr-preserve-case .md-button,
-md-dialog.nr-better-notification .md-button,
+md-dialog.nr-noti-better .md-button,
 md-dialog.nr-preserve-case .md-button,
-md-toast.nr-better-notification .md-button {
+md-toast.nr-noti-better .md-button {
     text-transform: none !important;
     font-weight: 500 !important;
     letter-spacing: 0.3px !important;
 }
 
 /* 現代化通知卡片外觀增強 */
-md-toast.nr-better-notification .md-toast-content {
+md-toast.nr-noti-better .md-toast-content {
     border-radius: 8px !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important;
     padding: 12px 18px !important;
     font-size: 14px !important;
 }
 
-/* 通知等級外框與主題色彩 */
+/* 通知等級外框主題色彩 */
 .nr-type-info {
     border-left: 6px solid #2196F3 !important;
 }
@@ -87,7 +87,7 @@ md-toast.nr-better-notification .md-toast-content {
         if (!ui || globalStyleInjected) { return; }
         try {
             ui.emit("update-value", {
-                id: "nr_notification_better_global_style",
+                id: "nr_noti_better_global_style",
                 msg: {
                     templateScope: "global",
                     template: betterNotificationCSS
@@ -95,7 +95,7 @@ md-toast.nr-better-notification .md-toast-content {
             });
             globalStyleInjected = true;
         } catch (err) {
-            // 若此時 socket 尚未就緒則在每次 input 時嘗試重試
+            // socket 未就緒時忽略，後續 input 會再次觸發
         }
     }
 
@@ -104,11 +104,11 @@ md-toast.nr-better-notification .md-toast-content {
         var node = this;
 
         if (!ui) {
-            node.error("node-red-contrib-notification-better 需要依賴 node-red-dashboard，請先在 Palette 管理員安裝 node-red-dashboard。");
+            node.error("noti-better 需要依賴 node-red-dashboard，請先在 Palette 管理員安裝 node-red-dashboard。");
             return;
         }
 
-        // 基本與進階設定解析
+        // 解析基本與進階設定
         if (config.hasOwnProperty("displayTime") && (config.displayTime.length > 0)) {
             try { 
                 this.displayTime = parseFloat(config.displayTime) * 1000; 
@@ -137,7 +137,7 @@ md-toast.nr-better-notification .md-toast-content {
         this.className = config.className || "";
         this.topic = config.topic || "";
 
-        // 嘗試在節點初始化時注入全域樣式
+        // 節點初始化時嘗試注入全域樣式
         injectGlobalStyles();
 
         var done = ui.add({
@@ -152,7 +152,7 @@ md-toast.nr-better-notification .md-toast-content {
             }
         });
 
-        // 預設等級顏色與圖示映射表
+        // 預設等級顏色與圖示映射
         var typePresets = {
             "info": {
                 color: "#2196F3",
@@ -182,7 +182,7 @@ md-toast.nr-better-notification .md-toast-content {
         };
 
         node.on('input', function(msg) {
-            // 每次處理 input 時再次確保全域樣式已送達
+            // 處理 input 時確保樣式注入
             injectGlobalStyles();
 
             if (node.sendall === true && !msg.socketid) { 
@@ -204,7 +204,7 @@ md-toast.nr-better-notification .md-toast-content {
             var currentType = (msg.notificationType || msg.status || msg.level || node.notificationType || "default").toLowerCase();
             var preset = typePresets[currentType] || typePresets["default"];
 
-            // 邊框高亮顏色（支援節點設定與動態傳入）
+            // 邊框高亮顏色（支援節點設定與動態輸入）
             var currentHighlight = msg.highlight || msg.border || node.highlight || preset.color;
 
             // 圖示判定
@@ -241,11 +241,11 @@ md-toast.nr-better-notification .md-toast-content {
             var playAudio = msg.hasOwnProperty("playSound") ? Boolean(msg.playSound) : Boolean(node.playSound);
             var soundScript = "";
             if (playAudio) {
-                // 利用瀏覽器內建 Web Audio API 播放提示音，無須依賴外部音訊檔案
+                // 利用瀏覽器內建 Web Audio API 合成提示聲，無須外部音訊檔
                 soundScript = `<script>(function(){try{var A=window.AudioContext||window.webkitAudioContext;if(A){var c=new A(),o=c.createOscillator(),g=c.createGain();o.type='sine';o.frequency.setValueAtTime(${currentType==='error'?330:587},c.currentTime);o.frequency.exponentialRampToValueAtTime(${currentType==='error'?220:880},c.currentTime+0.2);g.gain.setValueAtTime(0.15,c.currentTime);g.gain.exponentialRampToValueAtTime(0.01,c.currentTime+0.25);o.connect(g);g.connect(c.destination);o.start();o.stop(c.currentTime+0.25);}}catch(e){}})();</script>`;
             }
 
-            // 當啟用 raw 時，組合圖示、音效與倒數進度條
+            // 當啟用 raw 時組合圖示、音效與倒數進度條
             if (isRaw) {
                 var iconHtml = (node.showIcon && currentIcon) ? `<i class="fa ${currentIcon}" style="margin-right:8px; vertical-align:middle;"></i> ` : "";
                 var progressHtml = (!isDialog && node.showCountdown) ? `<div class="nr-toast-progress-wrap"><div class="nr-toast-progress-bar" style="animation-duration:${dt}ms;"></div></div>` : "";
@@ -253,12 +253,12 @@ md-toast.nr-better-notification .md-toast-content {
             }
 
             // 組合 CSS 類別
-            var classList = ["nr-better-notification"];
+            var classList = ["nr-noti-better"];
             if (node.preserveCase) {
                 classList.push("nr-preserve-case");
             }
             if (isDialog) {
-                classList.push("nr-better-dialog");
+                classList.push("nr-noti-dialog");
             }
             if (preset.className) {
                 classList.push(preset.className);
@@ -293,5 +293,5 @@ md-toast.nr-better-notification .md-toast-content {
         node.on("close", done);
     }
 
-    RED.nodes.registerType("ui_notification_better", ToastNode);
+    RED.nodes.registerType("noti-better", ToastNode);
 };

package/locales/en-US/ui_notification_better.html

@@ -1,50 +0,0 @@
-<script type="text/html" data-help-name="ui_notification_better">
-    <p>An enhanced notification and dialog node designed for <b>Node-RED Dashboard</b>.</p>
-
-    <h3>Features</h3>
-    <ul>
-        <li><b>Exact Button Case</b>: Disables Angular Material's forced uppercase styling, displaying button text exactly as typed.</li>
-        <li><b>Levels & Types</b>: Built-in presets for Info, Success, Warning, and Error with automatic styling and icons.</li>
-        <li><b>Audio Alerts</b>: Built-in sound chime support via Web Audio API.</li>
-        <li><b>Rich Customization</b>: Raw HTML/JS formatting, custom icons, border highlight, and countdown bar.</li>
-    </ul>
-
-    <h3>Inputs</h3>
-    <dl class="message-properties">
-        <dt>payload <span class="property-type">string | object</span></dt>
-        <dd>The message body to display. If <i>Accept raw HTML/JS</i> is enabled, raw HTML tags will be rendered directly.</dd>
-
-        <dt class="optional">topic <span class="property-type">string</span></dt>
-        <dd>The notification or dialog title.</dd>
-
-        <dt class="optional">timeout <span class="property-type">number</span></dt>
-        <dd>Duration in seconds before auto-dismissal (defaults to 3s). Set to 0 to dismiss immediately.</dd>
-
-        <dt class="optional">notificationType <span class="property-type">string</span></dt>
-        <dd>One of <code>default</code>, <code>info</code>, <code>success</code>, <code>warning</code>, or <code>error</code>.</dd>
-
-        <dt class="optional">ok <span class="property-type">string</span></dt>
-        <dd>Custom text for the primary confirmation button (casing preserved).</dd>
-
-        <dt class="optional">cancel <span class="property-type">string</span></dt>
-        <dd>Custom text for the cancel button (casing preserved).</dd>
-
-        <dt class="optional">highlight <span class="property-type">string</span></dt>
-        <dd>Border highlight color (e.g. <code>#2ecc71</code> or <code>green</code>).</dd>
-
-        <dt class="optional">icon <span class="property-type">string</span></dt>
-        <dd>Font Awesome icon class name (e.g. <code>fa-bell</code>).</dd>
-
-        <dt class="optional">playSound <span class="property-type">boolean</span></dt>
-        <dd>Whether to play an audible chime when triggering the alert.</dd>
-
-        <dt class="optional">socketid <span class="property-type">string</span></dt>
-        <dd>When <i>Send to all browser sessions</i> is disabled, targets this specific client session.</dd>
-    </dl>
-
-    <h3>Outputs</h3>
-    <dl class="message-properties">
-        <dt>payload <span class="property-type">string</span></dt>
-        <dd>When layout is set to <b>Dialog</b> or <b>Prompt</b>, emits the user's action or entered text when closed.</dd>
-    </dl>
-</script>

package/locales/zh-CN/ui_notification_better.json

@@ -1,58 +0,0 @@
-{
-    "ui_notification_better": {
-        "paletteLabel": "高級通知",
-        "label": {
-            "position": "佈局位置",
-            "displayTime": "逾時秒數 (秒)",
-            "highlight": "邊框顏色",
-            "sendall": "發送至所有瀏覽器會話",
-            "ok": "默認操作標籤",
-            "cancel": "次要操作標籤",
-            "raw": "接受 msg.payload 中的原始 HTML/JS",
-            "className": "CSS 類名",
-            "topic": "主題",
-            "name": "名稱",
-            "notificationType": "通知類型",
-            "showIcon": "顯示圖標",
-            "customIcon": "自定義圖標",
-            "showCountdown": "顯示倒計時進度條",
-            "playSound": "播放音效",
-            "preserveCase": "保留按鈕大小寫（不強制全大寫）",
-            "showDialog": "顯示對話框",
-            "showNotification": "顯示通知"
-        },
-        "option": {
-            "topRight": "右上角",
-            "bottomRight": "右下角",
-            "topLeft": "左上角",
-            "bottomLeft": "左下角",
-            "dialog": "確認 / 取消 對話框",
-            "prompt": "帶文本輸入的對話框",
-            "default": "默認",
-            "info": "ℹ 信息",
-            "success": "✓ 成功",
-            "warning": "⚠ 警告",
-            "error": "✕ 錯誤"
-        },
-        "placeholder": {
-            "timeout": "[msg.timeout]",
-            "highlight": "（可選）例如 #ff0000 或 red",
-            "ok": "確認按鈕標籤",
-            "cancel": "（可選）取消按鈕標籤",
-            "className": "[msg.className]",
-            "topic": "[msg.topic]",
-            "name": "名稱",
-            "customIcon": "例如 fa-bell、fa-check"
-        },
-        "section": {
-            "appearance": "外觀設置",
-            "behavior": "行為設置",
-            "dialog": "對話框設置",
-            "advanced": "高級設置"
-        },
-        "tip": {
-            "raw": "<b>警告</b>：啟用 <i>接受原始 HTML/JS</i> 可能導致代碼注入風險，請確保輸入來源可信。",
-            "icon": "請使用 Font Awesome 4 圖標類名（例如 fa-bell、fa-check）"
-        }
-    }
-}

package/locales/zh-TW/ui_notification_better.html

@@ -1,50 +0,0 @@
-<script type="text/html" data-help-name="ui_notification_better">
-    <p>專為 <b>Node-RED Dashboard</b> 量身打造的強化版通知 (Notification / Toast) 與互動式對話框 (Dialog) 節點。</p>
-
-    <h3>核心特色</h3>
-    <ul>
-        <li><b>忠實保留按鈕大小寫</b>：徹底解除 Angular Material 強制大寫的限制，輸入「Ok」即顯示「Ok」，大小寫百分之百精確呈現。</li>
-        <li><b>通知等級預設</b>：內建 Info（資訊）、Success（成功）、Warning（警告）、Error（錯誤）四種視覺主題與自動圖示。</li>
-        <li><b>音效提醒</b>：內建 Web Audio API 音效支援，可發出清脆的提示聲。</li>
-        <li><b>豐富的自訂性</b>：支援原生 HTML / JavaScript、倒數進度條、自訂外框顏色與圖示。</li>
-    </ul>
-
-    <h3>輸入屬性 (Inputs)</h3>
-    <dl class="message-properties">
-        <dt>payload <span class="property-type">字串 | 物件</span></dt>
-        <dd>顯示在彈出框中的主要內容。若啟用「允許原始 HTML / JS」，將忠實渲染 HTML 與動畫標籤。</dd>
-
-        <dt class="optional">topic <span class="property-type">字串</span></dt>
-        <dd>通知或對話框的頂部標題。</dd>
-
-        <dt class="optional">timeout <span class="property-type">數值</span></dt>
-        <dd>自動關閉的顯示秒數（預設 3 秒），設為 0 會立即關閉。</dd>
-
-        <dt class="optional">notificationType <span class="property-type">字串</span></dt>
-        <dd>通知等級，可指定為 <code>default</code>、<code>info</code>、<code>success</code>、<code>warning</code> 或 <code>error</code>。</dd>
-
-        <dt class="optional">ok <span class="property-type">字串</span></dt>
-        <dd>確認按鈕文字（完全保留原始大小寫）。</dd>
-
-        <dt class="optional">cancel <span class="property-type">字串</span></dt>
-        <dd>取消按鈕文字（完全保留原始大小寫）。</dd>
-
-        <dt class="optional">highlight <span class="property-type">字串</span></dt>
-        <dd>外框高亮顏色（例如 <code>#2ecc71</code> 或 <code>green</code>）。</dd>
-
-        <dt class="optional">icon <span class="property-type">字串</span></dt>
-        <dd>自訂 Font Awesome 圖示名稱（例如 <code>fa-bell</code>）。</dd>
-
-        <dt class="optional">playSound <span class="property-type">布林值</span></dt>
-        <dd>是否在彈出通知時播放提示音效。</dd>
-
-        <dt class="optional">socketid <span class="property-type">字串</span></dt>
-        <dd>若未勾選廣播至所有工作階段，可指定單一瀏覽器連線的 Session ID。</dd>
-    </dl>
-
-    <h3>輸出屬性 (Outputs)</h3>
-    <dl class="message-properties">
-        <dt>payload <span class="property-type">字串</span></dt>
-        <dd>當佈局設為 <b>Dialog</b>（確認對話框）或 <b>Prompt</b>（文字輸入對話框）時，使用者點擊或輸入確認後的結果將由輸出點發送。</dd>
-    </dl>
-</script>