AdminSessionsPage UI 设计规范

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

1. 组件概述

Admin Sessions Page 是会话管理页面，用于监控和管理系统中所有活动的用户会话，支持搜索、过滤、终止单个或所有会话。

2. 页面结构

2.1 Statistics Cards

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│   [Users]    │ │ [User-Check] │ │  [Desktop]   │ │   [Mobile]   │
│      N       │ │      N       │ │      N       │ │      N       │
│   Active     │ │   Unique     │ │   Desktop    │ │   Mobile     │
│  Sessions    │ │   Users      │ │  Sessions    │ │  Sessions    │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘

2.2 Session List Card

┌─────────────────────────────────────────────────────────────────────┐
│ Active Sessions            [Search...] [Device ▼] [Refresh] [Kill] │
├─────────────────────────────────────────────────────────────────────┤
│ DataGrid:                                                           │
│ Avatar | User      | Device | Browser | IP      | Client | Started │
│ [img]  | Name      | [icon] | Chrome  | 192.168 | app-id | 2h ago  │
│        | email     | Desktop|         |         |        |         │
└─────────────────────────────────────────────────────────────────────┘

2.3 Recent Activity Timeline

┌─────────────────────────────────────────────────────────────────────┐
│ Recent Activity                                                     │
├─────────────────────────────────────────────────────────────────────┤
│ ● [login]  User logged in                              5m ago       │
│ ○ [logout] User logged out                             15m ago      │
│ ✕ [term]   Session terminated by admin                 1h ago       │
└─────────────────────────────────────────────────────────────────────┘

3. 状态变量

4. DataGrid 列定义

5. 过滤功能

5.1 搜索过滤

• 匹配字段: UserDisplayName, UserEmail, IpAddress
• 大小写不敏感

5.2 设备过滤

6. 对话框规范

6.1 Terminate Session Dialog

按钮: Cancel, Terminate

6.2 Terminate All Sessions Dialog

按钮: Cancel, Terminate All

7. 数据模型

7.1 SessionInfo

private class SessionInfo
{
    public string SessionId { get; set; }
    public string UserId { get; set; }
    public string UserDisplayName { get; set; }
    public string UserEmail { get; set; }
    public string? UserAvatarUrl { get; set; }
    public string DeviceType { get; set; }  // Desktop, Mobile, Tablet
    public string Browser { get; set; }
    public string IpAddress { get; set; }
    public string ClientId { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime LastActivity { get; set; }
}

7.2 ActivityInfo

private class ActivityInfo
{
    public string Type { get; set; }  // login, logout, terminated, expired
    public string Description { get; set; }
    public string UserName { get; set; }
    public string IpAddress { get; set; }
    public DateTime Timestamp { get; set; }
}

8. 图标映射

8.1 设备图标

8.2 活动图标

8.3 活动颜色

9. 时间格式化

private string GetTimeAgo(DateTime time)
{
    var diff = DateTime.Now - time;
    if (diff.TotalMinutes < 1) return "Just now";
    if (diff.TotalMinutes < 60) return $"{(int)diff.TotalMinutes}m ago";
    if (diff.TotalHours < 24) return $"{(int)diff.TotalHours}h ago";
    return $"{(int)diff.TotalDays}d ago";
}

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

10.1 UC-1: 查看活动会话

1. Admin 导航到 /admin/sessions
2. 页面加载会话数据
3. 查看统计卡片和会话列表

10.2 UC-2: 搜索会话

1. Admin 在搜索框输入用户名
2. 列表实时过滤
3. 显示匹配的会话

10.3 UC-3: 按设备过滤

1. Admin 选择 "Mobile" 过滤器
2. 列表只显示移动设备会话

10.4 UC-4: 终止单个会话

1. Admin 点击会话行的终止按钮
2. 确认对话框显示
3. 点击 "Terminate"
4. 会话从列表移除
5. 活动日志添加记录

10.5 UC-5: 终止所有会话

1. Admin 点击 "Terminate All"
2. 警告对话框显示会话数量
3. 确认终止
4. 所有会话清空
5. 活动日志添加记录

10.6 UC-6: 刷新数据

1. Admin 点击 "Refresh"
2. 重新加载会话数据
3. 列表更新

11. 测试检查点

11.1 必须测试 (单元测试)

• 统计数据计算正确
• 搜索过滤正确
• 设备过滤正确
• 终止会话更新列表
• 活动日志添加记录

11.2 E2E 测试

• 页面加载会话管理
• 统计数据显示
• DataGrid 显示
• Terminate All 按钮
• 搜索输入框

12. 规范合规检查

12.1 组件使用

• SxGrid 统计卡片布局
• SxCard 卡片
• SxDataGrid 会话列表
• SxTimeline 活动日志
• SxDialog 对话框
• SxSearch 搜索
• SxSelect 过滤器
• SxButton 操作按钮
• SxAvatar 用户头像
• SxTooltip 提示

12.2 样式

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

13. 已知问题 / TODO

1. 会话数据为模拟数据，需要连接真实 Session API
2. 活动日志为硬编码数据

14. 变更历史