MBE Desktop 基于角色的UI设计
📋 概述
MBE Desktop 的用户后台是 MBE 系统的开发者门户/控制台，根据用户注册时选择的开发者角色显示不同的界面和功能。
🎭 开发者角色
1. 专家创建者（Expert Creator）
角色定位: 创建和管理AI专家，发布到专家市场
核心功能:
- 知识库管理（创建、上传、训练）
- 专家管理（创建、训练、发布）
- 专家市场（发布、更新、下架）
- 使用统计（调用次数、评分、反馈）
- 收益管理（专家收益、分成统计）
侧边栏导航:
• 概览（Dashboard）
• 知识库管理
• 专家管理
• 专家市场
• 收益统计
• API Key 管理
• 设置
2. 应用开发者（App Developer）
角色定位: 使用MBE SDK开发应用，发布到应用市场
核心功能:
- 应用开发（创建、编辑、测试项目）
- 应用管理（发布、更新应用到市场）
- 专家市场浏览（选择专家集成）
- SDK下载和使用
- API使用统计
- 应用收益管理
侧边栏导航:
• 概览（Dashboard）
• 应用开发
• 应用管理
• 应用市场
• 专家市场（浏览）
• SDK下载
• 使用统计
• 收益统计
• API Key 管理
• 设置
3. API用户（API User）
角色定位: 直接调用API，使用Webhook等高级功能
核心功能:
- API文档和参考
- API测试工具
- Webhook配置
- 批量操作工具
- 使用统计（调用次数、配额、限流）
- API Key管理
侧边栏导航:
• 概览（Dashboard）
• API文档
• API测试工具
• Webhook配置
• 批量操作
• 使用统计
• API Key 管理
• 设置
🎨 UI设计差异
概览页面（Dashboard）
专家创建者概览
┌─────────────────────────────────────────────────────────────┐
│ 概览 - 专家创建者工作台 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 知识库 │ │ 专家 │ │ 总调用 │ │ 收益 │ │
│ │ 12 │ │ 8 │ │ 1,234 │ │ ¥123.45 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 最近活动: │
│ • 2小时前 - 发布了专家"经济学导师" │
│ • 5小时前 - 上传了知识库"投资理财" │
│ • 昨天 - 专家"健身教练"被调用了23次 │
│ │
│ 快速操作: │
│ [创建知识库] [创建专家] [发布到市场] │
└─────────────────────────────────────────────────────────────┘
应用开发者概览
┌─────────────────────────────────────────────────────────────┐
│ 概览 - 应用开发者控制台 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 应用 │ │ API调用 │ │ 集成专家 │ │ 收益 │ │
│ │ 3 │ │ 1,234 │ │ 6 │ │ ¥456.78 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 最近活动: │
│ • 2小时前 - 发布了应用"在线教育平台" │
│ • 5小时前 - 集成了专家"经济学导师" │
│ • 昨天 - API调用了234次 │
│ │
│ 快速操作: │
│ [新建应用] [浏览专家] [下载SDK] │
└─────────────────────────────────────────────────────────────┘
API用户概览
┌─────────────────────────────────────────────────────────────┐
│ 概览 - API用户控制台 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ API调用 │ │ 配额使用 │ │ 成功率 │ │ 平均响应 │ │
│ │ 1,234 │ │ 80% │ │ 99.5% │ │ 120ms │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 今日使用情况: │
│ • API调用: 234次 │
│ • 剩余配额: 7,766次 │
│ • 限流状态: 正常 │
│ │
│ 快速操作: │
│ [查看API文档] [测试API] [配置Webhook] │
└─────────────────────────────────────────────────────────────┘
🔄 角色切换
多角色支持
如果用户注册了多个角色（例如：既是专家创建者，又是应用开发者），可以：
顶部栏显示角色切换器:
[用户头像] [专家创建者 ▼] [设置]切换角色:
- 点击角色下拉菜单
- 选择要切换的角色
- 界面自动更新为对应角色的控制台
角色权限:
- 每个角色有独立的API Key
- 每个角色有独立的使用统计
- 每个角色有独立的收益统计
📊 数据获取
获取用户角色信息
API端点:
GET /api/developer-feedback/me
Headers: Authorization: Bearer {access_token}
响应:
{
"user_id": "user_123",
"email": "user@example.com",
"developer_type": "expert_creator",
"developer_name": "开发者名称",
"organization": "组织名称（可选）",
"api_key": "mbe_xxx...",
"roles": ["expert_creator", "app_developer"], # 如果有多角色
"created_at": "2026-02-01T10:00:00Z"
}
根据角色加载数据
专家创建者:
# 获取知识库列表
GET /admin/knowledge/
Headers: Authorization: Bearer {access_token}
# 获取专家列表
GET /admin/knowledge/expert/list
Headers: Authorization: Bearer {access_token}
# 获取收益统计
GET /developer/api/revenue-stats
Headers: Authorization: Bearer {access_token}
应用开发者:
# 获取应用列表
GET /api/applications/
Headers: Authorization: Bearer {access_token}
# 获取API使用统计
GET /api/usage/stats
Headers: Authorization: Bearer {access_token}
# 获取收益统计
GET /developer/api/revenue-stats
Headers: Authorization: Bearer {access_token}
API用户:
# 获取API使用统计
GET /api/usage/stats
Headers: Authorization: Bearer {access_token}
# 获取配额信息
GET /api/quota/status
Headers: Authorization: Bearer {access_token}
# 获取Webhook列表
GET /api/webhooks/endpoints
Headers: Authorization: Bearer {access_token}
🎯 实施要点
1. 角色检测
启动时:
- 读取配置文件中的
developer_type - 调用
/api/developer-feedback/me验证角色 - 根据角色显示对应的控制台
2. 界面路由
根据角色显示不同页面:
if developer_type == "expert_creator":
show_expert_creator_dashboard()
elif developer_type == "app_developer":
show_app_developer_dashboard()
elif developer_type == "api_user":
show_api_user_dashboard()
3. 功能权限
根据角色启用/禁用功能:
- 专家创建者：禁用"应用开发"相关功能
- 应用开发者：禁用"知识库管理"相关功能
- API用户：仅显示API相关功能
📝 检查清单
角色检测
- 登录后获取用户角色
- 根据角色显示对应控制台
- 支持多角色切换
界面实现
- 专家创建者工作台
- 应用开发者控制台
- API用户控制台
- 角色切换器
数据加载
- 根据角色加载对应数据
- 统计卡片根据角色显示
- 快速操作根据角色显示
文档创建日期：2026-02-06
最后更新：2026-02-06