feat: 支持复制消息记录中的主题名称

app/src/renderer/src/views/Messages.vue

@@ -1,12 +1,22 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { useMqttStore } from '../stores/mqtt.js'
-import { NCard, NSpace, NInput, NButton, NEmpty } from 'naive-ui'
+import { NCard, NSpace, NInput, NButton, NEmpty, useMessage } from 'naive-ui'
 
 const store = useMqttStore()
+const message = useMessage()
 
 const filter = ref('')
 
+async function copyTopic(topic) {
+  try {
+    await navigator.clipboard.writeText(topic)
+    message.success('主题已复制')
+  } catch {
+    message.error('复制失败')
+  }
+}
+
 const filteredMessages = computed(() => {
   if (!filter.value.trim()) return store.messages.value
   const f = filter.value.trim().toLowerCase()
@@ -69,7 +79,7 @@ function formatPayload(payload) {
             <span class="msg-dir" :class="m.direction">{{
               m.direction === 'pub' ? 'PUB' : 'SUB'
             }}</span>
-            <span class="msg-topic" :title="m.topic">{{ m.topic }}</span>
+            <span class="msg-topic" :title="m.topic" @click="copyTopic(m.topic)">{{ m.topic }}</span>
             <span class="msg-meta">QoS{{ m.qos }}{{ m.retain ? ' R' : '' }}</span>
           </div>
           <pre class="msg-payload">{{ formatPayload(m.payload) }}</pre>
@@ -150,6 +160,11 @@ function formatPayload(payload) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
+}
+
+.msg-topic:hover {
+  text-decoration: underline;
 }
 .msg-payload {
   margin: 6px 0 0;

app/src/renderer/src/views/Publish.vue

@@ -103,6 +103,15 @@ function handleFormatJson() {
 async function handleClearHistory() {
   await store.clearPublishHistory()
 }
+
+async function copyTopic(topic) {
+  try {
+    await navigator.clipboard.writeText(topic)
+    msg.success('主题已复制')
+  } catch {
+    msg.error('复制失败')
+  }
+}
 </script>
 
 <template>
@@ -166,7 +175,7 @@ async function handleClearHistory() {
               <div class="msg-header">
                 <span class="msg-time">{{ m.time }}</span>
                 <span class="msg-dir pub">PUB</span>
-                <span class="msg-topic" :title="m.topic">{{ m.topic }}</span>
+                <span class="msg-topic" :title="m.topic" @click="copyTopic(m.topic)">{{ m.topic }}</span>
                 <span class="msg-meta">QoS{{ m.qos }}{{ m.retain ? ' R' : '' }}</span>
               </div>
               <pre class="msg-payload">{{ m.payload }}</pre>
@@ -320,7 +329,13 @@ async function handleClearHistory() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
 }
+
+.msg-topic:hover {
+  text-decoration: underline;
+}
+
 .msg-payload {
   margin: 6px 0 0;
   padding: 8px 10px;