SxAdminRoleManagementPage UI 设计规范

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

1. 组件概述

  • 组件包含 2 个参数，0 个回调，1 个公开方法。
  • 内部组合组件：SxAdminServerEditor, SxAdminServerSelector, SxAvatar, SxBadge, SxButton, SxCard, SxCheckbox, SxDataGrid, SxDialog, SxIcon, SxInput, SxMessageBar...。

2. 组件模式

模式 条件 说明
条件渲染 !string.IsNullOrEmpty(Subtitle 影响局部渲染块
条件渲染 _selectedServer == null 影响局部渲染块
条件渲染 _activeTab == "client" 影响局部渲染块
条件渲染 _loading 影响局部渲染块
条件渲染 _activeTab == "client" && string.IsNullOrEmpty(_selectedClientId 影响局部渲染块
条件渲染 !(_activeTab == "client" && string.IsNullOrEmpty(_selectedClientId 影响局部渲染块
条件渲染 context.IsComposite 影响局部渲染块
条件渲染 _saving 影响局部渲染块
条件渲染 _deletingRole?.IsComposite == true 影响局部渲染块
条件渲染 _saving 影响局部渲染块
条件渲染 _roleUsersLoading 影响局部渲染块
条件渲染 _saving 影响局部渲染块

3. 表单字段

字段组件 绑定
SxInput @bind-Value=_editingRole!.Name
SxInput @bind-Value=_editingRole!.Description
SxSelect @bind-Value=_selectedClientId
SxCheckbox @bind-Checked=_editingRole!.IsComposite

4. 操作按钮

外观 动作/链接 禁用条件
ButtonAppearance.Accent HandleAddServer -
ButtonAppearance.Outline RefreshAsync -
ButtonAppearance.Outline RefreshAsync _loading
ButtonAppearance.Accent HandleAddRole @(_activeTab ==
ButtonAppearance.Accent HandleAddRole -
ButtonAppearance.Stealth - -
ButtonAppearance.Stealth - -
ButtonAppearance.Stealth - -
ButtonAppearance.Outline CancelEdit -
ButtonAppearance.Accent SaveRole _saving
ButtonAppearance.Outline - -
ButtonAppearance.Accent ConfirmDeleteRole _saving
ButtonAppearance.Stealth - -
ButtonAppearance.Outline - -
ButtonAppearance.Outline - -
ButtonAppearance.Accent SaveNewServer _saving

5. 验证规则

未检测到显式验证标记。

6. 状态与流程

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

7. 公共 API

7.1 Parameters

参数 类型 默认值 说明
Title string "Role Management" Page title.
Subtitle string? "Manage roles and permissions" Page subtitle.

7.2 Public Methods

  • RefreshAsync: Task

7.3 Events/Callbacks

无回调事件。

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

8.1 UC-1: 基础渲染

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

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

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

10. 测试检查点

  • 条件 !string.IsNullOrEmpty(Subtitle 下渲染正确
  • 条件 _selectedServer == null 下渲染正确
  • 条件 _activeTab == "client" 下渲染正确
  • 条件 _loading 下渲染正确
  • 条件 _activeTab == "client" && string.IsNullOrEmpty(_selectedClientId 下渲染正确
  • 条件 !(_activeTab == "client" && string.IsNullOrEmpty(_selectedClientId 下渲染正确
  • 条件 context.IsComposite 下渲染正确
  • 条件 _saving 下渲染正确

11. Fluent UI 对齐

未在官方 Fluent UI Blazor 组件目录中找到直接对应项（以官方 demo/docs 目录为准）。

12. 参考文档摘要

  • docs/IDENTITY-ADMIN-IMPLEMENTATION-PLAN.md: NextUI.Identity.Admin 真实管理功能实施方案 ## 一、问题分析

13. 规范合规检查

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

14. 变更历史

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