SxUserBar (用户栏)

Implemented

侧边栏底部用户栏组件，显示当前用户信息并提供弹出菜单，支持快捷设置和自定义菜单项。

使用场景

应用侧边栏底部的用户信息展示
快速访问用户设置、主题切换、语言切换
退出登录等常用操作

约束说明

需要配合 SxAppShell 或 SxNavMenu 使用以获取折叠状态。
毛玻璃效果需要浏览器支持 backdrop-filter。

行为说明

展开状态：显示头像、用户名、副标题和箭头图标。
折叠状态：仅显示头像（居中），通过 SxAppShellContext 或 SxNavMenuContext 自动感知。
点击触发弹出菜单，菜单向上弹出。
菜单内置用户信息头部、快捷设置（主题/语言）、设置和退出登录选项。

API

Parameters

状态	参数名	类型	默认值	描述
Implemented	`UserName`	`string?`	`null`	用户名，未提供时显示 "User"。
Implemented	`UserSubtitle`	`string?`	`null`	副标题（邮箱/角色）。
Implemented	`UserAvatarUrl`	`string?`	`null`	头像 URL。
Implemented	`UserPresence`	`AvatarPresence`	`None`	用户在线状态。
Implemented	`MenuContent`	`RenderFragment?`	`null`	自定义菜单项内容。
Implemented	`ShowSettings`	`bool`	`true`	是否显示内置设置选项。
Implemented	`ShowQuickSettings`	`bool`	`true`	是否显示快捷设置（主题/语言切换）。
Implemented	`ShowLogout`	`bool`	`true`	是否显示退出登录选项。
Implemented	`UseGlassEffect`	`bool`	`true`	是否使用毛玻璃效果。
Implemented	`AvatarSize`	`ControlSize`	`Medium`	头像尺寸。
Implemented	`Placement`	`MenuPlacement`	`Top`	菜单弹出方向。
Implemented	`Id` (继承)	`string?`	`null`	组件 Id。
Implemented	`Class` (继承)	`string?`	`null`	自定义 CSS 类名。
Implemented	`Style` (继承)	`string?`	`null`	自定义样式。
Implemented	`Title` (继承)	`string?`	`null`	HTML `title` 属性。

Events

状态	事件名	类型	描述
Implemented	`OnLogout`	`EventCallback`	点击退出登录时触发。
Implemented	`OnSettings`	`EventCallback`	点击设置时触发。
Implemented	`OnUserClick`	`EventCallback`	点击用户信息头部时触发。

Context

类型	描述
`SxAppShellContext`	从 SxAppShell 获取折叠状态。
`SxNavMenuContext`	从 SxNavMenu 获取折叠状态（备选）。

示例

基础用法

<SxAppShell>
    <Navigation>
        <SxNavMenu>
            <SxNavMenuLink Href="/" Icon="house">首页</SxNavMenuLink>
        </SxNavMenu>

        <SxUserBar UserName="张三"
                   UserSubtitle="admin@example.com"
                   UserPresence="AvatarPresence.Online"
                   OnLogout="HandleLogout"
                   OnSettings="HandleSettings" />
    </Navigation>
</SxAppShell>

@code {
    private async Task HandleLogout()
    {
        await AuthService.LogoutAsync();
        Nav.NavigateTo("/login");
    }

    private void HandleSettings()
    {
        Nav.NavigateTo("/settings");
    }
}

自定义菜单项

<SxUserBar UserName="张三"
           UserSubtitle="admin@example.com"
           OnLogout="HandleLogout">
    <MenuContent>
        <SxMenuItem Text="我的订单" Icon="shopping-cart" OnClick="..." />
        <SxMenuItem Text="消息中心" Icon="bell" OnClick="..." />
    </MenuContent>
</SxUserBar>

隐藏内置项

<SxUserBar UserName="张三"
           ShowSettings="false"
           ShowQuickSettings="false"
           OnLogout="HandleLogout">
    <MenuContent>
        <SxMenuItem Text="Profile" Icon="user" />
        <SxMenuItem Text="Sign Out" Icon="sign-out" />
    </MenuContent>
</SxUserBar>

在 Playground 中打开 →