AdminUserDetailPage UI 设计规范

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

1. 组件概述

Admin User Detail Page 是用户详情页面，显示单个用户的完整信息，并提供编辑、角色管理、会话管理、密码重置、禁用/启用、删除等操作。

2. 路由参数

3. 页面模式

4. 页面结构

4.1 Breadcrumb

Admin > Users > [UserName]

4.2 Profile Information Card

┌─────────────────────────────────────────────────────────────┐
│ Profile Information                      [Active/Disabled]  │
├─────────────────────────────────────────────────────────────┤
│ [Avatar]  Display Name    | User ID                         │
│           Email           | Last Login                      │
│           Created         | Email Verified                  │
└─────────────────────────────────────────────────────────────┘

4.3 Roles & Permissions Card

┌─────────────────────────────────────────────────────────────┐
│ Roles & Permissions                         [Edit Roles]    │
├─────────────────────────────────────────────────────────────┤
│ Realm Roles: [admin] [user] ...                             │
│ ─────────────────────────────                               │
│ Groups: [Engineering] [Admin Team] ...                      │
└─────────────────────────────────────────────────────────────┘

4.4 Active Sessions Card

┌─────────────────────────────────────────────────────────────┐
│ Active Sessions                         [Terminate All]     │
├─────────────────────────────────────────────────────────────┤
│ [Desktop]  Desktop - Chrome                          [x]    │
│            192.168.1.100 - Started 2h ago                   │
│ [Mobile]   Mobile - Safari                           [x]    │
│            10.0.0.50 - Started 1d ago                       │
└─────────────────────────────────────────────────────────────┘

4.5 Actions Card

┌─────────────────────────────────────────────────────────────┐
│ Actions                                                     │
├─────────────────────────────────────────────────────────────┤
│ [Edit Profile] [Reset Password] [Disable/Enable] [Delete]   │
└─────────────────────────────────────────────────────────────┘

5. 状态变量

6. 对话框规范

6.1 Edit Profile Dialog

按钮: Cancel, Save Changes

6.2 Edit Roles Dialog

按钮: Cancel, Save Roles

6.3 Reset Password Dialog

按钮: Cancel, Send Reset Email

6.4 Disable User Dialog

按钮: Cancel, Disable User

6.5 Delete User Dialog

按钮: Cancel, Delete User

7. 操作按钮

8. 数据模型

8.1 UserDetail

private class UserDetail
{
    public string UserId { get; set; }
    public string DisplayName { get; set; }
    public string Email { get; set; }
    public string? AvatarUrl { get; set; }
    public List<string> Roles { get; set; }
    public List<string> Groups { get; set; }
    public bool IsActive { get; set; }
    public bool EmailVerified { get; set; }
    public DateTime? LastLogin { get; set; }
    public DateTime CreatedAt { get; set; }
}

8.2 SessionInfo

private class SessionInfo
{
    public string DeviceType { get; set; }  // Desktop, Mobile, Tablet
    public string Browser { get; set; }
    public string IpAddress { get; set; }
    public DateTime StartTime { get; set; }
}

8.3 RoleSelection

private class RoleSelection
{
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}

9. 状态转换图

                    ┌─────────────────┐
                    │   Page Load     │
                    └────────┬────────┘
                             │
                    ┌────────▼────────┐
                    │   LoadUser()    │
                    │   _loading=true │
                    └────────┬────────┘
                             │
              ┌──────────────┴──────────────┐
              │ Found                   Not │
              ▼                         Found
       ┌───────────┐               ┌───────────┐
       │ Show User │               │ Show Not  │
       │  Details  │               │   Found   │
       └─────┬─────┘               └───────────┘
             │
    ┌────────┼────────┬────────┬────────┐
    │        │        │        │        │
    ▼        ▼        ▼        ▼        ▼
 [Edit]  [Roles]  [Reset]  [Disable] [Delete]
 Dialog  Dialog   Dialog   Dialog    Dialog

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

10.1 UC-1: 查看用户详情

1. Admin 从用户列表点击用户
2. 导航到 /admin/users/{UserId}
3. 加载用户数据
4. 显示用户信息、角色、会话

10.2 UC-2: 编辑用户资料

1. Admin 点击 "Edit Profile"
2. 对话框打开，显示当前值
3. 修改 Display Name 或 Email
4. 点击 "Save Changes"
5. 对话框关闭，更新显示

10.3 UC-3: 修改用户角色

1. Admin 点击 "Edit Roles"
2. 对话框显示可用角色 (checkbox)
3. 选择或取消角色
4. 点击 "Save Roles"
5. 角色徽章更新

10.4 UC-4: 重置密码

1. Admin 点击 "Reset Password"
2. 对话框显示警告信息
3. 点击 "Send Reset Email"
4. 密码重置邮件发送

10.5 UC-5: 禁用/启用用户

1. Admin 点击 "Disable User"
2. 确认对话框显示
3. 点击确认
4. 用户状态更新为 Disabled
5. 按钮变为 "Enable User"

10.6 UC-6: 删除用户

1. Admin 点击 "Delete User"
2. 警告对话框显示
3. 点击确认
4. 用户删除
5. 导航回用户列表

10.7 UC-7: 终止单个会话

1. Admin 点击会话行的 按钮
2. 会话从列表移除

10.8 UC-8: 终止所有会话

1. Admin 点击 "Terminate All"
2. 所有会话清空

11. 测试检查点

11.1 必须测试 (单元测试)

• 加载状态显示
• 用户未找到状态
• 用户数据正确显示
• 所有对话框打开/关闭
• 表单数据绑定
• 保存操作更新状态

11.2 状态不变性测试

• 修改 DisplayName 不影响 Email
• 修改角色不影响其他用户数据
• 取消对话框不保存任何更改

11.3 E2E 测试

• 页面加载用户详情
• Tab 切换 (Roles, Sessions)
• Edit Profile 对话框打开
• Reset Password 按钮可见
• Enable/Disable 按钮可见
• Back 导航

12. 规范合规检查

12.1 组件使用

• SxBreadcrumb 导航
• SxCard 信息卡片
• SxGrid 布局
• SxAvatar 头像
• SxBadge 角色/状态标签
• SxDialog 对话框
• SxInput 表单输入
• SxCheckbox 角色选择
• SxButton 操作按钮
• SxMessageBar 警告信息

12.2 样式

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

13. 已知问题 / TODO

1. 用户数据来自 DemoUsers，需要连接真实 Admin API
2. 密码重置仅关闭对话框，需要实际 API 调用
3. 会话数据为模拟数据

14. 变更历史