From 728ba5f5744b5c2de3850a99bff5afe0b9872198 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: Fri, 28 Aug 2026 15:52:59 +0800
Subject: [PATCH] feat(@vben/layouts): make user dropdown avatar dot
 configurable (#8314)

* feat(@vben/layouts): make user dropdown avatar dot configurable

The online-status dot on the UserDropdown avatar was hardcoded to
bg-green-500. Expose avatarDot and avatarDotClass props, defaulting to the
previous behavior, so apps can toggle the dot and restyle it like the
notification badge.

Co-Authored-By: EvoX <evox@evomap.ai>

* fix(@vben/layouts): apply avatarDotClass to header trigger avatar too

CodeRabbit noted the avatarDotClass prop only styled the dropdown-content
avatar; the header trigger avatar still used the default dot style, making
custom styling inconsistent. Bind dot-class to both avatars.

Co-Authored-By: EvoX <evox@evomap.ai>

---------

Co-authored-by: EvoX <evox@evomap.ai>
---
 .changeset/young-planes-avatar-dot.md         |  5 ++++
 packages/effects/layouts/package.json         |  1 +
 .../widgets/user-dropdown/user-dropdown.vue   | 25 ++++++++++++++++---
 pnpm-lock.yaml                                |  3 +++
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/young-planes-avatar-dot.md

diff --git a/.changeset/young-planes-avatar-dot.md b/.changeset/young-planes-avatar-dot.md
new file mode 100644
index 000000000..d8389d4a0
--- /dev/null
+++ b/.changeset/young-planes-avatar-dot.md
@@ -0,0 +1,5 @@
+---
+'@vben/layouts': patch
+---
+
+feat(@vben/layouts): make user dropdown avatar dot configurable via props
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index 4a647f249..3c04364bc 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -30,6 +30,7 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
+    "@vben-core/typings": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 380b77a8a..ba18678da 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -5,6 +5,8 @@ import type { LanguageOption } from '@vben/constants';
 import type { SupportedLanguagesType } from '@vben/locales';
 import type { AnyFunction } from '@vben/types';
 
+import type { ClassType } from '@vben-core/typings';
+
 import { computed, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 
 import { onSupportLanguagesChange } from '@vben/constants';
@@ -57,6 +59,15 @@ interface Props {
    * 头像
    */
   avatar?: string;
+  /**
+   * 头像是否显示在线圆点
+   * @default true
+   */
+  avatarDot?: boolean;
+  /**
+   * 头像在线圆点样式
+   */
+  avatarDotClass?: ClassType;
   /**
    * @zh_CN 描述
    */
@@ -90,6 +101,8 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   avatar: '',
+  avatarDot: true,
+  avatarDotClass: 'bottom-0 right-1 border-2 size-4 bg-green-500',
   description: '',
   menus: () => [],
   tagText: '',
@@ -370,7 +383,13 @@ if (preferences.shortcutKeys.enable) {
     <DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'">
       <div class="mr-2 ml-1 cursor-pointer rounded-full p-1.5 hover:bg-accent">
         <div class="flex-center hover:text-accent-foreground">
-          <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
+          <VbenAvatar
+            :alt="text"
+            :src="avatar"
+            class="size-8"
+            :dot="avatarDot"
+            :dot-class="avatarDotClass"
+          />
         </div>
       </div>
     </DropdownMenuTrigger>
@@ -381,8 +400,8 @@ if (preferences.shortcutKeys.enable) {
             :alt="text"
             :src="avatar"
             class="size-12"
-            dot
-            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
+            :dot="avatarDot"
+            :dot-class="avatarDotClass"
           />
           <div class="ml-2 w-full">
             <div
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6bc24e239..06af819f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1766,6 +1766,9 @@ importers:
       '@vben-core/tabs-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/tabs-ui
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../@core/base/typings
       '@vben/constants':
         specifier: workspace:*
         version: link:../../constants