feat: 集成 visual-json 可视化 JSON 编辑/查看并更新品牌图标

- 发送面板 Payload 增加「文本 / JSON 可视化」切换，可视化编辑实时回写
- 消息流 JSON 消息改为只读可视化查看，拦截双击/删除/右键等编辑入口
- visual-json 主题跟随应用亮/暗 comfort 色板
- 更新应用图标与启动页 logo（mqttx.svg + Tauri 各尺寸图标）

src/components/AppLayout.vue

@@ -69,10 +69,14 @@ onMounted(() => {
     <header class="app-header">
       <div class="header-left">
         <div class="app-brand">
-          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="brand-icon">
-            <circle cx="12" cy="12" r="10"/>
-            <path d="M12 6v6l4 2"/>
-          </svg>
+          <img
+            src="/mqttx.svg"
+            width="22"
+            height="22"
+            alt="MQTTX"
+            class="brand-icon"
+            draggable="false"
+          />
           <span class="brand-name">MQTTX</span>
           <span class="brand-version">v0.1</span>
         </div>
@@ -203,7 +207,9 @@ onMounted(() => {
   gap: 8px;
 }
 .brand-icon {
-  color: var(--el-color-primary);
+  display: block;
+  border-radius: 6px;
+  user-select: none;
 }
 .brand-name {
   font-size: 18px;
@@ -366,4 +372,4 @@ onMounted(() => {
   padding: 14px;
   overflow: auto;
 }
-</style>
+</style>