feat(web): highlight topic input on validation errors

Add visual feedback when topic validation fails during message publish.
The topic input now shows a red border highlight when:
- Topic is empty and required
- Topic contains invalid characters (+ or #)

The highlight clears on focus or blur to provide a clear user interaction.

Author: ysfscream

web/src/components/MsgPublish.vue

@@ -113,34 +113,40 @@
           </el-badge>
         </el-tooltip>
       </div>
-      <div class="topic-input-container">
-        <el-input class="publish-topic-input" placeholder="Topic" v-model="msgRecord.topic" @focus="handleInputFoucs">
+      <div :class="['topic-input-container', topicRequired ? 'required' : '', topicInvalid ? 'invalid' : '']">
+        <el-input
+          class="publish-topic-input"
+          placeholder="Topic"
+          v-model="msgRecord.topic"
+          @focus="handleInputFoucs"
+          @blur="handleInputBlur"
+        >
         </el-input>
-      </div>
-      <el-select
-        class="header-select"
-        popper-class="header-select--popper"
-        v-model="headerValue"
-        placeholder=""
-        size="mini"
-        @change="handleHeaderChange"
-      >
-        <el-option
-          class="header-option"
-          v-for="item in headersHistory"
-          :key="item.id"
-          :label="item.label"
-          :value="item"
+        <el-select
+          class="header-select"
+          popper-class="header-select--popper"
+          v-model="headerValue"
+          placeholder=""
+          size="mini"
+          @change="handleHeaderChange"
         >
-          <span style="float: left; width: 160px; overflow: hidden; text-overflow: ellipsis" :title="item.topic">{{
-            item.topic
-          }}</span>
-          <span style="color: #8492a6; font-size: 12px; margin-left: 4px">QoS:{{ item.qos }}</span>
-          <span style="float: right; color: #8492a6; font-size: 13px; margin-left: 4px">
-            retain:{{ item.retain ? '1' : '0' }}
-          </span>
-        </el-option>
-      </el-select>
+          <el-option
+            class="header-option"
+            v-for="item in headersHistory"
+            :key="item.id"
+            :label="item.label"
+            :value="item"
+          >
+            <span style="float: left; width: 160px; overflow: hidden; text-overflow: ellipsis" :title="item.topic">{{
+              item.topic
+            }}</span>
+            <span style="color: #8492a6; font-size: 12px; margin-left: 4px">QoS:{{ item.qos }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px; margin-left: 4px">
+              retain:{{ item.retain ? '1' : '0' }}
+            </span>
+          </el-option>
+        </el-select>
+      </div>
     </div>
     <div class="editor-container">
       <div
@@ -231,6 +237,9 @@ export default class MsgPublish extends Vue {
 
   private saveMetaLoading = false
 
+  private topicRequired = false
+  private topicInvalid = false
+
   private getHasMqtt5PropState() {
     return (
       Object.entries(this.MQTT5PropsForm).filter(([_, v]) => v !== null && v !== undefined && v !== false).length > 0
@@ -417,10 +426,33 @@ export default class MsgPublish extends Vue {
     }
   }
 
+  public setTopicRequired(isRequired = true) {
+    this.topicRequired = isRequired
+  }
+
+  public setTopicInvalid(isInvalid = true) {
+    this.topicInvalid = isInvalid
+  }
+
   private handleInputFoucs() {
+    if (this.topicRequired) {
+      this.topicRequired = false
+    }
+    if (this.topicInvalid) {
+      this.topicInvalid = false
+    }
     this.$emit('foucs')
   }
 
+  private handleInputBlur() {
+    if (this.topicRequired) {
+      this.topicRequired = false
+    }
+    if (this.topicInvalid) {
+      this.topicInvalid = false
+    }
+  }
+
   private handleLayout() {
     const editorRef: EditorRef = this.$refs.payloadEditor as EditorRef
     editorRef.editorLayout()
@@ -505,19 +537,42 @@ export default class MsgPublish extends Vue {
       }
     }
   }
+  .topic-input-container {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    &.required,
+    &.invalid {
+      .el-input.publish-topic-input {
+        .el-input__inner {
+          border-right: none !important;
+        }
+      }
+      .el-select {
+        .el-input__inner {
+          border-left: none !important;
+        }
+      }
+      .el-input__inner {
+        border: 1px solid var(--color-minor-red) !important;
+      }
+    }
+  }
   .publish-topic-input.el-input {
-    width: calc(100% - 20px);
-    vertical-align: top;
-    display: inline-block;
+    flex: 1 1 0;
+    min-width: 0;
+    width: auto;
+    display: block;
     @include topic-input__inner;
     .el-input__inner {
       padding: 0px 16px;
     }
   }
   .header-select.el-select {
-    vertical-align: top;
+    flex: 0 0 20px;
     width: 20px;
-    display: inline-block;
+    display: block;
     .el-input {
       @include topic-input__inner;
       &.is-focus {

web/src/views/connections/ConnectionsDetail.vue

@@ -888,11 +888,19 @@ export default class ConnectionsDetail extends Vue {
     const { id, topic, qos, payload, retain, properties } = message
 
     if (!topic && !properties?.topicAlias) {
+      const msgPublish = this.$refs.msgPublish as MsgPublish
+      if (msgPublish) {
+        msgPublish.setTopicRequired()
+      }
       this.$message.warning(this.$tc('connections.topicRequired'))
       return false
     }
 
     if (topic && (topic.includes('+') || topic.includes('#'))) {
+      const msgPublish = this.$refs.msgPublish as MsgPublish
+      if (msgPublish) {
+        msgPublish.setTopicInvalid()
+      }
       this.$message.warning(this.$tc('connections.topicCannotContain'))
       return false
     }