fix(mqtt): preserve paused message selection

apps/desktop/src/components/mqtt/MqttAdminConsole.vue

@@ -209,6 +209,11 @@ function handleTopicClick(topic: string) {
   void refreshData();
 }
 
+function handleMessageClick(topic: string) {
+  if (messagesPaused.value) return;
+  handleTopicClick(topic);
+}
+
 function handleMessagePublished() {
   void refreshData();
 }
@@ -386,7 +391,7 @@ onUnmounted(stopPolling);
                   ? 'ml-auto max-w-[85%] rounded-l-md border-r-2 border-emerald-400 bg-emerald-50/70 hover:bg-emerald-100/70 dark:border-emerald-500 dark:bg-emerald-950/30 dark:hover:bg-emerald-950/50'
                   : 'mr-auto max-w-[85%] rounded-r-md border-l-2 border-blue-400 bg-blue-50/70 hover:bg-blue-100/70 dark:border-blue-500 dark:bg-blue-950/30 dark:hover:bg-blue-950/50'
               "
-              @click="handleTopicClick(msg.topic)"
+              @click="handleMessageClick(msg.topic)"
             >
               <div class="mb-0.5 flex items-center gap-2">
                 <span v-if="msg.direction === 'sent'" class="shrink-0 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">{{ t("connection.mqttSent") }}</span>

apps/desktop/src/components/mqtt/__tests__/MqttAdminConsolePause.spec.ts

@@ -32,9 +32,9 @@ vi.mock("@/lib/backend/api", () => ({
 
 const mountedApps: App[] = [];
 
-function messageAt(index: number): MqttMessage {
+function messageAt(index: number, topic = "device/status"): MqttMessage {
   return {
-    topic: "device/status",
+    topic,
     payloadBase64: btoa(`payload-${index}`),
     payloadText: `payload-${index}`,
     qos: 0,
@@ -126,3 +126,35 @@ describe("MQTT 控制台消息暂停自动滚动 (issue #5615)", () => {
     expect(mqttGetMessagesMock).toHaveBeenCalled();
   });
 });
+
+describe("MQTT 控制台暂停后选择消息 (issue #8353)", () => {
+  it("点击暂停后的消息内容时不会重新获取并替换消息", async () => {
+    mqttGetMessagesMock.mockResolvedValue([messageAt(0, "device/other")]);
+    const container = await mountConsole();
+    await Promise.resolve();
+    await Promise.resolve();
+    await nextTick();
+    expect(container.textContent).toContain("payload-0");
+    expect(container.textContent).toContain("消息：device/status");
+
+    const pauseButton = Array.from(container.querySelectorAll("button")).find((button) => button.textContent?.includes("暂停"));
+    expect(pauseButton).toBeTruthy();
+    pauseButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    mqttGetMessagesMock.mockClear();
+    mqttGetMessagesMock.mockResolvedValue([messageAt(1, "device/other")]);
+    const messageRow = Array.from(container.querySelectorAll(".cursor-pointer")).find((element) => element.textContent?.includes("payload-0"));
+    expect(messageRow).toBeTruthy();
+    messageRow?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    await nextTick();
+
+    expect(mqttGetMessagesMock).not.toHaveBeenCalled();
+    expect(container.textContent).toContain("payload-0");
+    expect(container.textContent).not.toContain("payload-1");
+    expect(container.textContent).toContain("消息：device/status");
+    expect(container.textContent).not.toContain("消息：device/other");
+  });
+});