From bd9cb04278bc80c5d1d4da919fb4293ce2a2d0e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=9E=E5=8F=AF=20=C2=B7=20YU=20KE?= <1798456934@qq.com>
Date: Mon, 31 Aug 2026 10:32:39 +0800
Subject: [PATCH] fix(@vben/layouts): keep notification dot circular (#8330)

---
 .changeset/gentle-bells-ring.md               |  5 +++
 .../__tests__/notification.test.ts            | 33 +++++++++++++++++++
 .../src/widgets/notification/notification.vue |  2 +-
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gentle-bells-ring.md
 create mode 100644 packages/effects/layouts/src/widgets/notification/__tests__/notification.test.ts

diff --git a/.changeset/gentle-bells-ring.md b/.changeset/gentle-bells-ring.md
new file mode 100644
index 000000000..718cf8340
--- /dev/null
+++ b/.changeset/gentle-bells-ring.md
@@ -0,0 +1,5 @@
+---
+'@vben/layouts': patch
+---
+
+fix(@vben/layouts): keep the notification status indicator circular across theme radii
diff --git a/packages/effects/layouts/src/widgets/notification/__tests__/notification.test.ts b/packages/effects/layouts/src/widgets/notification/__tests__/notification.test.ts
new file mode 100644
index 000000000..4b90475c4
--- /dev/null
+++ b/packages/effects/layouts/src/widgets/notification/__tests__/notification.test.ts
@@ -0,0 +1,33 @@
+import type { App } from 'vue';
+
+import { createApp, h } from 'vue';
+
+import { afterEach, describe, expect, it } from 'vitest';
+
+import Notification from '../notification.vue';
+
+let activeApp: App | undefined;
+
+afterEach(() => {
+  activeApp?.unmount();
+  activeApp = undefined;
+  document.body.innerHTML = '';
+});
+
+describe('notification popup', () => {
+  it('renders the notification status indicator as a circle', () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+
+    activeApp = createApp({
+      render: () => h(Notification, { dot: true }),
+    });
+    activeApp.mount(host);
+
+    const indicator = host.querySelector<HTMLElement>('.bell-button > span');
+
+    expect(indicator).not.toBeNull();
+    expect(indicator?.classList).toContain('rounded-full');
+    expect(indicator?.classList).not.toContain('rounded-sm');
+  });
+});
diff --git a/packages/effects/layouts/src/widgets/notification/notification.vue b/packages/effects/layouts/src/widgets/notification/notification.vue
index d749a4fc4..33912c90f 100644
--- a/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -65,7 +65,7 @@ defineExpose({ toggle });
         <VbenIconButton class="bell-button relative text-foreground">
           <span
             v-if="dot"
-            class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
+            class="absolute top-0.5 right-0.5 size-2 rounded-full bg-primary"
           ></span>
           <Bell class="size-4" />
         </VbenIconButton>