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(), { 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) {
- +
@@ -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" />