From 9042659fbf61d378a5ec7d7a1af94e09643f8387 Mon Sep 17 00:00:00 2001
From: Joe Allen <49467845+LiJoeAllen@users.noreply.github.com>
Date: Tue, 18 Aug 2026 19:47:21 +0800
Subject: [PATCH] feat: hover preview for send panel payload input

- Wrapped payload textarea in HoverPreview
- Shows full formatted JSON on hover (600ms delay)
- Helps when template is too long for the 2-row textarea
---
 src/components/dashboard/SendPanel.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/SendPanel.vue b/src/components/dashboard/SendPanel.vue
index 8ba4feb..c50dcac 100644
--- a/src/components/dashboard/SendPanel.vue
+++ b/src/components/dashboard/SendPanel.vue
@@ -4,7 +4,9 @@ import type { MqttConnection, Preset, PublishDto } from '../../types/mqtt'
 import { extractVariables, resolveTemplate, resolveUserProperties } from '../../utils/envVarResolver'
 import { mqttPublish } from '../../stores/useMqttBridge'
 import { useGlobalVariables } from '../../stores/useGlobalVariables'
+import { prettyJson } from '../../utils/format'
 import { ElMessage } from 'element-plus'
+import HoverPreview from '../common/HoverPreview.vue'
 import VariableEditor from './VariableEditor.vue'
 import UserPropertiesEditor from './UserPropertiesEditor.vue'
 import GlobalVariableManager from './GlobalVariableManager.vue'
@@ -209,12 +211,14 @@ function onBindingChange(name: string, value: string) {
       <div class="form-row">
         <div class="field" style="flex: 1">
           <label>Payload</label>
-          <el-input
-            v-model="payload"
-            type="textarea"
-            :rows="2"
-            placeholder='{"temp":{{temp}},"device":"{{deviceId}}"}'
-          />
+          <HoverPreview :text="prettyJson(payload)" :delay="600">
+            <el-input
+              v-model="payload"
+              type="textarea"
+              :rows="2"
+              placeholder='{"temp":{{temp}},"device":"{{deviceId}}"}'
+            />
+          </HoverPreview>
         </div>
       </div>