From dcfd4b4b9d2ad0e3ae3e6b1f0c58c5e9a5acb355 Mon Sep 17 00:00:00 2001
From: Rogee <rogeecn@gmail.com>
Date: Sat, 8 Aug 2026 19:54:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=95=BF=E9=93=BE=E6=8E=A5=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message/bubbles/Activity.vue              |  8 ++-
 .../message/bubbles/specs/Activity.spec.js    | 53 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/javascript/dashboard/components-next/message/bubbles/specs/Activity.spec.js

diff --git a/frontend/app/javascript/dashboard/components-next/message/bubbles/Activity.vue b/frontend/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
index c0a14f4f..3528276b 100644
--- a/frontend/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
+++ b/frontend/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
@@ -24,9 +24,13 @@ const readableTime = computed(() => {
 <template>
   <BaseBubble
     v-tooltip.top="readableTime"
-    class="px-3 py-1 !rounded-xl flex min-w-0 items-center gap-2"
+    class="px-3 py-1 !rounded-xl flex min-w-0 max-w-full items-center gap-2"
     data-bubble-name="activity"
   >
-    <span v-dompurify-html="content" :title="content" />
+    <span
+      v-dompurify-html="content"
+      :title="content"
+      class="min-w-0 max-w-full [overflow-wrap:anywhere]"
+    />
   </BaseBubble>
 </template>
diff --git a/frontend/app/javascript/dashboard/components-next/message/bubbles/specs/Activity.spec.js b/frontend/app/javascript/dashboard/components-next/message/bubbles/specs/Activity.spec.js
new file mode 100644
index 00000000..78e4a907
--- /dev/null
+++ b/frontend/app/javascript/dashboard/components-next/message/bubbles/specs/Activity.spec.js
@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import { describe, expect, it, vi } from 'vitest';
+
+import Activity from '../Activity.vue';
+
+vi.mock('vue-i18n', () => ({
+	useI18n: () => ({ locale: ref('zh_CN') }),
+}));
+
+vi.mock('shared/helpers/timeHelper', () => ({
+	messageTimestamp: () => '8月6日 下午 3:12',
+}));
+
+const longURL =
+	'https://ada.baidu.com/site/wjzt6ah8/agent?imid=e159aa97cd2c403f2fba76899e47615f&trinfo=XzFWIaclcWbzcMY&word=%E4%B8%89%E9%98%B3%E7%97%85%E6%AF%92%E6%90%BA%E5%B8%A6';
+
+vi.mock('../../provider.js', () => ({
+	useMessageContext: () => ({
+		content: ref(`来源页面：<a href="${longURL}">${longURL}</a>`),
+		createdAt: ref(1786018000),
+	}),
+}));
+
+describe('Activity bubble', () => {
+	it('allows long links in system messages to wrap inside the bubble', () => {
+		const wrapper = mount(Activity, {
+			global: {
+				directives: {
+					dompurifyHtml: (element, binding) => {
+						element.innerHTML = binding.value;
+					},
+					tooltip: () => {},
+				},
+				stubs: {
+					BaseBubble: {
+						template: '<div><slot /></div>',
+					},
+				},
+			},
+		});
+
+		expect(
+			wrapper.get('[data-bubble-name="activity"]').classes()
+		).toContain('max-w-full');
+
+		const content = wrapper.get('span');
+		expect(content.classes()).toContain('min-w-0');
+		expect(content.classes()).toContain('max-w-full');
+		expect(content.classes()).toContain('[overflow-wrap:anywhere]');
+		expect(content.get('a').text()).toBe(longURL);
+	});
+});