fix: 修复系统消息长链接溢出

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>

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);
+	});
+});