AdminServersPage UI 设计规范

自动生成时间: 2026-02-04 组件路径: workbench/NextUI.Workbench/Pages/Admin/AdminServersPage.razor

1. 组件概述

Admin Servers Page 是身份服务器管理页面，用于配置和管理身份提供者连接，支持多种提供者类型 (Keycloak, SharedProfile API, NextUI Application)。

2. 页面结构

2.1 Header Section

┌─────────────────────────────────────────────────────────────────────┐
│ [Server] Identity Server Management                                 │
│          Configure and manage identity provider connections.        │
└─────────────────────────────────────────────────────────────────────┘

2.2 Server List Card

┌─────────────────────────────────────────────────────────────────────┐
│ <SxAdminServerList />                                               │
│ - 服务器列表                                                         │
│ - Add/Edit/Delete/Test 功能                                         │
└─────────────────────────────────────────────────────────────────────┘

2.3 Status Message

┌─────────────────────────────────────────────────────────────────────┐
│ [MessageBar] Server 'xxx' has been added successfully.        [x]   │
└─────────────────────────────────────────────────────────────────────┘

2.4 Help Section (2-Column Grid)

┌────────────────────────────────┐ ┌────────────────────────────────┐
│ Supported Providers            │ │ Quick Start                    │
├────────────────────────────────┤ ├────────────────────────────────┤
│ [Key] Keycloak                 │ │ ① Click "Add Server"...        │
│       Full-featured identity...│ │ ② Enter the server URL...      │
│                                │ │ ③ Test the connection...       │
│ [ID] SharedProfile API         │ │ ④ Select a server as default.. │
│      Lightweight profile...    │ │                                │
│                                │ │                                │
│ [Globe] NextUI Application     │ │                                │
│        Applications impl...    │ │                                │
└────────────────────────────────┘ └────────────────────────────────┘

3. 状态变量

4. 依赖服务

5. 事件回调

5.1 SxAdminServerList 事件

5.2 连接测试

private async Task<ConnectionTestResult> TestConnectionAsync(AdminServer server)
{
    return await ConnectionTester.TestConnectionAsync(server);
}

6. 消息显示

6.1 消息模板

说明：以上文案通过 i18n key（Admin.ServersPage.Status.*）提供。

6.2 MessageBar 组件

<SxMessageBar Intent="@_statusIntent"
              Dismissible="true"
              OnDismiss="ClearStatus">
    @_statusMessage
</SxMessageBar>

7. 支持的提供者

8. 快速入门步骤

1. Click "Add Server" to configure a new identity provider
2. Enter the server URL and authentication credentials
3. Test the connection to verify your configuration
4. Select a server as default to manage its users and roles

9. 未授权内容

显示条件: !HasAdminRole

内容:

• Access Denied 标题
• 权限说明
• 当前用户信息 (如已登录)
• Login 按钮 (如未登录)
• Mock 模式提示 (如适用)

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

10.1 UC-1: 添加 Keycloak 服务器

1. Admin 点击 "Add Server"
2. 选择 Server Type: Keycloak
3. 输入 Name, Base URL
4. 输入认证信息 (Client ID, Client Secret)
5. 点击 "Test Connection"
6. 连接成功后保存
7. 状态消息显示 "added successfully"

10.2 UC-2: 设置默认服务器

1. Admin 点击服务器行的 "Set Default"
2. 服务器标记为默认
3. 状态消息显示 "is now the default"

10.3 UC-3: 测试连接

1. Admin 点击服务器的 "Test" 按钮
2. 系统调用 ConnectionTester.TestConnectionAsync
3. 显示连接结果

10.4 UC-4: 编辑服务器

1. Admin 点击服务器的 "Edit" 按钮
2. 修改配置
3. 保存
4. 状态消息显示 "has been updated"

10.5 UC-5: 删除服务器

1. Admin 点击服务器的 "Delete" 按钮
2. 确认删除
3. 服务器移除
4. 状态消息显示 "has been deleted"

11. 测试检查点

11.1 必须测试 (单元测试)

• 事件回调正确触发
• 状态消息正确显示
• 消息可关闭

11.2 E2E 测试

• 页面加载服务器管理
• 支持的提供者显示
• 快速入门显示
• 添加服务器对话框
• 服务器列表显示

12. 规范合规检查

12.1 组件使用

• SxSection/SxPageBox 布局
• SxCard 卡片
• SxGrid 帮助区域布局
• SxStack 内容排列
• SxTypography 文本
• SxIcon 图标
• SxBadge 步骤编号
• SxMessageBar 状态消息
• SxAdminServerList 服务器列表组件

12.2 样式

• 颜色使用 Design Token
• 间距使用 Design Token

13. 子组件

13.1 SxAdminServerList

14. 已知问题 / TODO

无

15. 变更历史