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

@@ -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
+          <HoverPreview :text="prettyJson(payload)" :delay="600">
-            v-model="payload"
+            <el-input
-            type="textarea"
+              v-model="payload"
-            :rows="2"
+              type="textarea"
-            placeholder='{"temp":{{temp}},"device":"{{deviceId}}"}'
+              :rows="2"
-          />
+              placeholder='{"temp":{{temp}},"device":"{{deviceId}}"}'
+            />
+          </HoverPreview>
         </div>
       </div>