SxAdminServerManagementPage UI 设计规范

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

1. 组件概述

  • 组件包含 9 个参数,4 个回调,1 个公开方法。
  • 内部组合组件:SxAdminServerEditor, SxBadge, SxButton, SxCard, SxDialog, SxIcon, SxMessageBar, SxProgressRing, SxStack, SxTypography。

2. 组件模式

模式 条件 说明
条件渲染 !string.IsNullOrEmpty(subtitleText) 渲染副标题
条件渲染 _error != null 渲染错误提示
条件渲染 _loading 渲染加载状态
条件渲染 _servers.Count == 0 渲染空状态
条件渲染 server.IsDefault 渲染默认标签与样式
条件渲染 server.Type == ServerType.Keycloak && !string.IsNullOrEmpty(server.DefaultRealm) 渲染 Realm 标签
条件渲染 _connectionStatus.TryGetValue(server.Id, out var status) 渲染连接结果
条件渲染 status.Success 渲染连接成功态
条件渲染 _testingServers.Contains(server.Id) 渲染测试中状态
条件渲染 server.LastConnectedAt.HasValue 渲染最后连接时间
条件渲染 !server.IsDefault 显示“设为默认”操作
条件渲染 _editDialogOpen 显示新增/编辑对话框
条件渲染 _deleteDialogOpen 显示删除确认对话框
条件渲染 _deletingServer?.IsDefault == true 显示默认服务器警告
条件渲染 _saving 保存/删除按钮进入加载态

3. 表单字段

字段组件 绑定
- -

4. 操作按钮

外观 动作/链接 禁用条件
ButtonAppearance.Outline RefreshAsync _loading
ButtonAppearance.Accent HandleAddServer -
ButtonAppearance.Accent HandleAddServer -
ButtonAppearance.Outline HandleSetDefault -
ButtonAppearance.Outline HandleTestConnection _testingServers.Contains(server.Id)
ButtonAppearance.Outline HandleEditServer -
ButtonAppearance.Stealth HandleDeleteServer -
ButtonAppearance.Outline CancelEdit -
ButtonAppearance.Accent SaveServer _saving
ButtonAppearance.Outline _deleteDialogOpen = false -
ButtonAppearance.Accent ConfirmDeleteServer _saving

5. 验证规则

未检测到显式验证标记。

6. 状态与流程

内部状态字段:

  • _loading:数据加载中
  • _saving:保存/删除操作中
  • _error:错误消息
  • _servers:服务器列表
  • _testingServers:正在测试连接的服务器集合
  • _connectionStatus:每个服务器的连接结果
  • _editDialogOpen / _isNewServer / _editingServer:新增/编辑对话框状态
  • _deleteDialogOpen / _deletingServer:删除对话框状态

7. 公共 API

7.1 Parameters

| 参数 | 类型 | 默认值 | 说明 | | Title | string? | null | 默认使用 i18n 文案 | | Subtitle | string? | null | 默认使用 i18n 文案,可传空字符串隐藏 | | TestConnectionHandler | Func<AdminServer, Task<ConnectionTestResult>>? | null | 连接测试委托 | | OnServerAdded | EventCallback<AdminServer> | - | 新增服务器回调 | | OnServerUpdated | EventCallback<AdminServer> | - | 更新服务器回调 | | OnServerDeleted | EventCallback<AdminServer> | - | 删除服务器回调 | | OnDefaultServerChanged | EventCallback<AdminServer> | - | 默认服务器变更回调 | | Class | string? | - | 额外样式类 | | Style | string? | - | 额外内联样式 |

7.2 Public Methods

  • RefreshAsync: Task

7.3 Events/Callbacks

  • OnServerAdded
  • OnServerUpdated
  • OnServerDeleted
  • OnDefaultServerChanged

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

8.1 UC-1: 基础渲染

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

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

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

10. 测试检查点

  • 条件 !string.IsNullOrEmpty(subtitleText) 下渲染正确
  • 条件 _error != null 下渲染正确
  • 条件 _loading 下渲染正确
  • 条件 _servers.Count == 0 空状态正确
  • 条件 server.IsDefault 下渲染正确
  • 条件 server.Type == ServerType.Keycloak && !string.IsNullOrEmpty(server.DefaultRealm) 下渲染正确
  • 条件 _connectionStatus.TryGetValue(server.Id, out var status 下渲染正确
  • 条件 status.Success 下渲染正确
  • 条件 server.LastConnectedAt.HasValue 下渲染正确
  • 条件 _testingServers.Contains(server.Id) 显示测试中
  • _editDialogOpen 对话框标题 Add/Edit 正确
  • _deleteDialogOpen 删除警告与默认服务器提示正确
  • _saving 时保存/删除按钮禁用

11. Fluent UI 对齐

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

12. 参考文档摘要

无。

13. 规范合规检查

  • 未检测到明显硬编码样式(已迁移为 tokens 与样式类)

14. 变更历史

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