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

@@ -0,0 +1,5 @@
+---
+'@vben/layouts': patch
+---
+
+feat(@vben/layouts): make user dropdown avatar dot configurable via props

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:*",

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

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