开发者仪表板流程图设计
创建日期： 2026-01-26
设计风格： QuickBooks 风格流程图
🎨 设计理念
采用类似 QuickBooks 的流程图风格，将复杂的业务流程可视化，让开发者能够：
- 一目了然 - 快速了解完整业务流程
- 直接操作 - 点击流程图中的步骤直接执行操作
- 流程引导 - 箭头清晰显示流程顺序和依赖关系
- 分类组织 - 按功能模块分组，便于查找
📊 流程图结构
1. 知识库管理流程
📝 创建知识库 → 📖 我的知识库 → 📤 上传文档 → 🔧 管理知识库
步骤说明：
- 创建知识库 - 使用知识库设计向导创建新知识库
- 我的知识库 - 查看和管理已创建的知识库
- 上传文档 - 向知识库上传 PDF、TXT 等文档
- 管理知识库 - 编辑、删除、配置知识库
2. 专家创建与管理流程
➕ 创建专家 → 📋 我的专家 → 🎓 训练模型 → 📢 发布到市场
步骤说明：
- 创建专家 - 基于知识库创建 AI 专家
- 我的专家 - 查看和管理已创建的专家
- 训练模型 - 为专家训练专用模型，提升质量
- 发布到市场 - 将专家发布到市场获得收益
3. API 与收益管理流程
🔑 创建API密钥 → 📈 使用记录 → 💵 查看收益 → 💳 申请结算
步骤说明：
- 创建API密钥 - 生成 API 访问密钥
- 使用记录 - 查看 API 调用记录和统计
- 查看收益 - 查看专家使用产生的收益
- 申请结算 - 申请将收益结算到银行账户
4. 账户管理流程
💳 充值余额 → 📄 查看账单 → 🎯 质量评估 → 📖 API文档
步骤说明：
- 充值余额 - 为账户充值 Token
- 查看账单 - 查看历史账单和费用明细
- 质量评估 - 评估知识库和专家的质量
- API文档 - 查看 API 接口文档
🎯 视觉特点
流程图元素
步骤图标
- 80x80px 的图标框
- 清晰的图标和文字标签
- 悬停效果（边框高亮、阴影、上移）
连接箭头
- 灰色箭头连接各个步骤
- 清晰显示流程方向
- 响应式设计（移动端垂直显示）
分类标题
- 每个流程模块有明确的标题
- 使用图标和文字标识
- 底部边框分隔
交互效果
- 悬停效果：鼠标悬停时图标框高亮、上移、显示阴影
- 点击反馈：点击时短暂缩放效果
- 状态指示：可显示步骤完成状态（待实现）
📱 响应式设计
桌面端
- 水平流程图布局
- 箭头水平连接
- 多列统计栏
移动端
- 垂直流程图布局
- 箭头垂直连接
- 单列统计栏
🔄 未来增强
计划功能
流程状态指示
- 显示每个步骤的完成状态
- 已完成步骤显示绿色边框
- 当前步骤显示蓝色高亮
进度追踪
- 显示整体流程完成度
- 提示下一步操作
快捷操作
- 在流程图中直接显示快速操作按钮
- 一键执行常用操作
数据统计
- 在每个步骤显示相关统计数据
- 例如：知识库数量、专家数量等
📝 使用说明
访问流程图仪表板
- 登录开发者门户：
https://mbe.hi-maker.com/developer/login - 进入仪表板：
/developer/dashboard - 查看流程图：页面中央显示四个主要业务流程
- 点击步骤：直接跳转到对应功能页面
流程导航
- 知识库流程：从创建到管理的完整流程
- 专家流程：从创建到发布的完整流程
- API流程：从密钥创建到收益结算
- 账户流程：账户管理和辅助功能
🎨 样式特点
颜色方案
- 主色调：
#00d4ff（青色） - 背景色：深色主题（
#0a0a0f） - 卡片背景：
#12121a - 边框色：
#2d2d3a
动画效果
- 悬停动画：
translateY(-5px)+ 阴影 - 点击动画：
scale(0.95)短暂缩放 - 过渡时间：
0.3s平滑过渡
📊 统计栏
页面顶部显示关键统计数据：
- 账户余额 - 当前可用余额
- 知识库 - 已创建的知识库数量
- 专家 - 已创建的专家数量
- API密钥 - 活跃的 API 密钥数量
- 今日Token - 今日使用的 Token 数量
🔗 相关文档
- 开发者门户完整性评估：
docs/DEVELOPER_PORTAL_COMPLETENESS_ASSESSMENT.md - 开发者完整工作流：
docs/workflows/DEVELOPER_WORKFLOW.md - 专家管理功能文档：
docs/DEVELOPER_EXPERT_MANAGEMENT.md
最后更新：2026-01-26
版本：v1.0
设计风格：QuickBooks 流程图风格