From 1c23b85d9215d801a8f134798ee4c7fc3062f643 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sat, 18 Jul 2026 22:08:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E8=AE=B0=E5=BD=95=E4=B8=AD=E7=9A=84=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/renderer/src/views/Messages.vue | 19 +++++++++++++++++--
 app/src/renderer/src/views/Publish.vue  | 17 ++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/src/renderer/src/views/Messages.vue b/app/src/renderer/src/views/Messages.vue
index 3706210..5403541 100644
--- a/app/src/renderer/src/views/Messages.vue
+++ b/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;
diff --git a/app/src/renderer/src/views/Publish.vue b/app/src/renderer/src/views/Publish.vue
index ee410f7..7abd3fb 100644
--- a/app/src/renderer/src/views/Publish.vue
+++ b/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;