AdminProfilesPage UI 设计规范

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

1. 组件概述

Admin Profiles Page 是 SharedProfile 管理页面，用于管理跨应用的用户配置文件，支持查看、创建、编辑、删除配置文件。

2. 页面结构

2.1 Server Status Card

┌─────────────────────────────────────────────────────────────────────┐
│ [Server] Profile API Server: Mock SharedProfile Service [Connected] │
│                                                          [Refresh]  │
└─────────────────────────────────────────────────────────────────────┘

2.2 Profiles List Card

┌─────────────────────────────────────────────────────────────────────┐
│ All Profiles                      [Search...] [+ Create Profile]    │
├─────────────────────────────────────────────────────────────────────┤
│ DataGrid:                                                           │
│ Avatar | User ID | Display Name | Language | Theme | Updated | Act. │
│ [img]  | user-1  | John Doe     | [en-US]  | [light]| 1/1/26 | [✏️🗑]│
└─────────────────────────────────────────────────────────────────────┘
│ Showing N of N profiles                                             │
└─────────────────────────────────────────────────────────────────────┘

2.3 Statistics Cards

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ [Card]       │ │   [Sun]      │ │   [Moon]     │ │   [Globe]    │
│      N       │ │      N       │ │      N       │ │      N       │
│   Total      │ │   Light      │ │   Dark       │ │   Languages  │
│  Profiles    │ │   Theme      │ │   Theme      │ │              │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘

3. 状态变量

变量 类型 默认值 说明
_serverStatus string "Connected" 服务器连接状态
_profiles List<SharedProfile> [] 配置文件列表
_loading bool true 加载状态
_searchText string "" 搜索文本
_createDialogOpen bool false 创建对话框
_editDialogOpen bool false 编辑对话框
_deleteDialogOpen bool false 删除对话框
_editingProfile SharedProfile? null 正在编辑的配置
_deletingProfile SharedProfile? null 待删除的配置

4. DataGrid 列定义

列名 类型 宽度 内容
Avatar Template 50px SxAvatar
User ID Property auto UserId, Sortable
Display Name Property auto DisplayName, Sortable
Language Template 120px Badge
Theme Template 100px Badge with color
Updated Template 180px UpdatedAt 格式化
Actions Template 100px Edit/Delete 按钮

5. 对话框规范

5.1 Create Profile Dialog

字段 组件 绑定 说明
User ID SxInput _newUserId 必填
Display Name SxInput _newDisplayName 可选
Avatar URL SxInput _newAvatarUrl 可选
Preferred Language SxSelect _newPreferredLanguage 默认 en-US
Theme Preference SxSelect _newThemePreference 默认 system

语言选项: en-US, zh-CN, ja-JP 主题选项: system, light, dark

按钮: Cancel, Create Profile

5.2 Edit Profile Dialog

字段 组件 绑定 说明
(Header) SxAvatar + UserId - 只读显示
Display Name SxInput _editDisplayName -
Avatar URL SxInput _editAvatarUrl -
Preferred Language SxSelect _editPreferredLanguage 8 种语言
Theme Preference SxSelect _editThemePreference 3 种主题
Timezone SxSelect _editTimezone 6 种时区

语言选项 (8种):

代码 显示名称
en-US English (US)
zh-CN 简体中文
zh-TW 繁體中文
ja-JP 日本語
ko-KR 한국어
de-DE Deutsch
fr-FR Français
es-ES Español

主题选项: system, light, dark

时区选项 (6种):

代码 显示名称
UTC UTC
America/New_York Eastern Time (US)
America/Los_Angeles Pacific Time (US)
Europe/London London
Asia/Shanghai Shanghai
Asia/Tokyo Tokyo

按钮: Cancel, Save Changes

5.3 Delete Profile Dialog

元素 组件 说明
Error SxMessageBar "此操作无法撤销"
Confirmation SxTypography 显示用户名和 ID

按钮: Cancel, Delete (红色)

6. 搜索过滤

private List<SharedProfile> FilteredProfiles =>
    string.IsNullOrWhiteSpace(_searchText)
    ? _profiles
    : _profiles.Where(p =>
        (p.UserId?.Contains(_searchText, StringComparison.OrdinalIgnoreCase) ?? false) ||
        (p.DisplayName?.Contains(_searchText, StringComparison.OrdinalIgnoreCase) ?? false))
        .ToList();

7. Badge 样式

7.1 Theme Badge

Theme Appearance
dark Important
light Informational
其他 Lightweight

7.2 Server Status Badge

Status Appearance
Connected Success
Disconnected Danger
其他 Lightweight

8. 依赖服务

服务 说明
ICurrentUser 当前用户信息
IIdentityService 身份验证服务
ISharedProfileAdminService 配置文件管理服务

9. 事件处理

事件 来源 处理
CurrentUser.Changed 用户状态变化 重新加载配置
AdminService.ProfilesChanged 配置变化 重新加载配置

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

10.1 UC-1: 查看配置文件列表

  1. Admin 导航到 /admin/profiles
  2. 页面加载配置数据
  3. 查看列表和统计

10.2 UC-2: 搜索配置文件

  1. Admin 在搜索框输入用户名或 ID
  2. 列表实时过滤

10.3 UC-3: 创建配置文件

  1. Admin 点击 "Create Profile"
  2. 填写 User ID 和其他字段
  3. 点击 "Create Profile"
  4. 配置创建，列表刷新

10.4 UC-4: 编辑配置文件

  1. Admin 点击配置的编辑按钮
  2. 修改显示名称、语言、主题等
  3. 点击 "Save Changes"
  4. 配置更新

10.5 UC-5: 删除配置文件

  1. Admin 点击配置的删除按钮
  2. 确认对话框显示
  3. 点击 "Delete"
  4. 配置删除

11. API 调用

操作 方法
获取所有 AdminService.GetAllProfilesAsync()
创建 AdminService.UpdateProfileAsync(userId, profile)
更新 AdminService.PatchProfileAsync(userId, updates)
删除 AdminService.DeleteProfileAsync(userId)

12. 测试检查点

12.1 必须测试 (单元测试)

  • 搜索过滤正确
  • 创建配置保存正确
  • 编辑配置更新正确
  • 删除配置移除正确
  • 服务器状态显示正确

12.2 E2E 测试

  • 页面加载配置管理
  • DataGrid 显示
  • 创建对话框
  • 搜索功能
  • 刷新功能

13. 规范合规检查

13.1 组件使用

  • SxCard 卡片
  • SxDataGrid 数据表格
  • SxGrid 统计布局
  • SxDialog 对话框
  • SxInput 表单输入
  • SxSelect 下拉选择
  • SxSearch 搜索
  • SxAvatar 头像
  • SxBadge 徽章
  • SxButton 按钮

13.2 样式

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

14. 已知问题 / TODO

  1. Dialog 使用 @bind-Visible 而非 @bind-Open (检查组件一致性)

15. 变更历史

日期 变更内容
2026-02-04 初始生成
2026-02-04 UI Review: 添加详细的语言和时区选项表格