SxUserBar UI 设计规范

自动生成时间: 2026-02-04 组件路径: src/NextUI.Blazor/Components/App/SxUserBar.razor

1. 组件概述

  • 组件包含 8 个参数，0 个回调，0 个公开方法。
  • 内部组合组件：SxAvatar, SxIcon, SxMenuButton, SxMenuItem, SxUserBarQuickSettings。
  • 依赖注入: INextUILocalizer L。

2. 组件模式

模式 条件 说明
条件渲染 !IsCollapsed 影响局部渲染块
条件渲染 !string.IsNullOrEmpty(ResolvedSubtitle 影响局部渲染块
条件渲染 !string.IsNullOrEmpty(ResolvedSubtitle 影响局部渲染块
条件渲染 ShowQuickSettings 影响局部渲染块
条件渲染 ShowSettings 影响局部渲染块
条件渲染 ShowLogout 影响局部渲染块

3. 表单字段

字段组件 绑定
- -

4. 操作按钮

外观 动作/链接 禁用条件
- - -

5. 验证规则

未检测到显式验证标记。

6. 状态与流程

内部状态字段： 未检测到明确状态字段。

7. 公共 API

7.1 Parameters

参数 类型 默认值 说明
UserPresence AvatarPresence AvatarPresence.None
ShowSettings bool true
ShowQuickSettings bool true
ShowLogout bool true
UseGlassEffect bool true
AvatarSize ControlSize ControlSize.Medium
CollapsedAvatarSize ControlSize ControlSize.Medium
Placement MenuPlacement MenuPlacement.Top

7.2 Public Methods

无公开方法。

7.3 Events/Callbacks

无回调事件。

8. 典型使用场景 (Use Cases)

8.1 UC-1: 基础渲染

  1. 组件渲染默认状态
  2. 关键区域可见
  3. 无异常

9. 状态不变性测试 (State Invariants)

  • 同一参数重复设置不应触发非必要 UI 改变
  • 与表单字段无关的操作不应影响字段值

10. 测试检查点

  • 条件 !IsCollapsed 下渲染正确
  • 条件 !string.IsNullOrEmpty(ResolvedSubtitle 下渲染正确
  • 条件 !string.IsNullOrEmpty(ResolvedSubtitle 下渲染正确
  • 条件 ShowQuickSettings 下渲染正确
  • 条件 ShowSettings 下渲染正确
  • 条件 ShowLogout 下渲染正确

11. Fluent UI 对齐

对应 Fluent UI Blazor 组件：FluentProfileMenu 源码：src/Core/Components/ProfileMenu/FluentProfileMenu.razor(.cs) 对齐要点：

  • Open 状态由点击或键盘（Enter/Space）切换。
  • HeaderTemplate/ChildContent/FooterTemplate 会覆盖默认字段渲染。
  • TopCorner 强制定位到顶部角落。 关键参数/事件：
  • Open/OpenChanged、TopCorner、ButtonSize、ImageSize。
  • HeaderLabel/HeaderButton/FooterLink 及点击事件。 差异与扩展：
  • SxUserBar 需对齐模板覆盖与键盘触发行为。

12. 参考文档摘要

  • docs/components/SxUserBar.md: SxUserBar (用户栏) - Implemented
  • docs/components/SxAppShell.md: SxAppShell (应用外壳) - Implemented

13. 规范合规检查

  • 可能存在硬编码样式: 存在 px 硬编码

14. 变更历史

  • 2026-02-04: 深度分析填充规范。