diff --git a/apps/desktop/src/components/mqtt/MqttAdminConsole.vue b/apps/desktop/src/components/mqtt/MqttAdminConsole.vue index ed87660619..6b312de8a6 100644 --- a/apps/desktop/src/components/mqtt/MqttAdminConsole.vue +++ b/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)" >
{{ t("connection.mqttSent") }} diff --git a/apps/desktop/src/components/mqtt/__tests__/MqttAdminConsolePause.spec.ts b/apps/desktop/src/components/mqtt/__tests__/MqttAdminConsolePause.spec.ts index e8ebe58fff..f8a4f4d02b 100644 --- a/apps/desktop/src/components/mqtt/__tests__/MqttAdminConsolePause.spec.ts +++ b/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"); + }); +});