- 专业的深色配色方案,适合长时间使用
- 精心设计的颜色层次,提升可读性
- 流畅的动画和过渡效果
- 侧边栏导航,清晰的功能分区
- 自适应不同屏幕尺寸
- 卡片式设计,信息展示更清晰
统计卡片
- 活跃用户数
- 运行中的跟踪配置
- KOL 总数
- 总余额
快速操作
- 一键添加用户
- 一键添加 KOL
- 一键创建跟踪配置
活动日志
- 实时系统活动
- 操作历史记录
用户列表展示
- 用户名和状态标识(运行中/已停止)
- 交易模式标签(真实/模拟)
- API 密钥信息(部分隐藏保护隐私)
- 余额监控配置显示
用户操作
- ✅ 添加用户:完整的表单验证
▶️ 运行/停止:一键控制用户状态- 📊 监控控制:启动/停止余额监控
- ❌ 平仓:一键关闭所有持仓
- 🗑️ 删除用户:带确认对话框
添加用户表单
- 基本信息:用户名、API 密钥
- 交易设置:模式选择(真实/模拟)
- 监控配置:
- 初始余额
- 余额比率(百分比)
- 最小余额阈值
- 导出器名称(可选)
用户卡片信息
- 实时状态指示器
- API 密钥(安全显示)
- 余额监控参数
- 快速操作按钮
KOL 卡片展示
- KOL 名称和头像图标
- 类型标签(NORMAL/WWG)
- Discord 频道 ID
- 监听的作者 ID 列表
KOL 操作
- ➕ 添加 KOL
- 🗑️ 删除 KOL
- 🔄 刷新列表
添加 KOL 表单
- KOL 名称
- KOL 类型选择
- Discord 频道 ID
- Discord 作者 ID(支持多个)
- 动态添加/移除
- 可视化标签展示
- 留空则监听所有用户
网格布局
- 响应式 3 列网格
- 美观的卡片设计
- 悬停效果
跟踪配置展示
- 用户 → KOL 映射关系
- 运行状态指示
- 反向交易标记
- 金额模式标签
- 配置参数详情
配置操作
▶️ 开始跟踪- ⏸️ 停止跟踪
- 🔄 重启跟踪(清除持仓)
- 🗑️ 删除配置
金额模式支持
-
Loss Fixed(损失固定)
- 设置最大损失金额(USD)
- 风险控制简单直观
-
Fixed(固定金额)
- 为每个交易对设置固定金额
- 精确控制每笔交易
- 支持多个交易对
- 可视化管理界面
-
Percentage(百分比)
- 基于余额百分比交易
- 动态调整仓位
- 支持多个交易对配置
添加跟踪配置表单
- 用户选择(下拉)
- KOL 选择(下拉)
- 反向交易开关
- Futures 列表(可选)
- 动态添加/删除
- 标签化展示
- 金额模式切换
- 根据模式显示不同配置项
期货过滤
- 指定要跟踪的期货品种
- 支持多个品种
- 动态添加/删除
- 留空则跟踪所有
API 配置
- API 基础 URL 设置
- 刷新间隔配置(最小 1000ms)
- 保存按钮带成功反馈
应用信息
- 版本号
- 构建信息
- 当前 API URL
快速入门指南
- 新手友好的步骤说明
- 蓝色高亮卡片设计
- 完整的使用流程
- 按钮点击状态变化
- 加载状态显示
- 成功/失败提示
- 禁用状态视觉反馈
- 删除操作前确认
- 关键操作二次确认
- 清晰的提示信息
- 自动刷新数据(可配置间隔)
- 手动刷新按钮
- TanStack Query 缓存管理
- 必填字段标记(*)
- 实时输入验证
- 错误提示
- 提交前校验
- 黑色半透明遮罩
- 居中弹出动画
- ESC 键关闭支持
- 点击外部关闭
- 🟢 绿色:运行中、成功
- 🔴 红色:停止、危险操作
- 🟡 黄色:警告、特殊模式
- 🔵 蓝色:信息、普通模式
- Lucide React 图标库
- 统一的 20-24px 尺寸
- 清晰的语义化
- 流畅的动画
- Primary:主要操作(蓝色)
- Secondary:次要操作(灰色)
- Danger:危险操作(红色)
- Success:成功操作(绿色)
- 深色背景(dark-800)
- 边框分隔(dark-700)
- 圆角设计(rounded-xl)
- 阴影效果
- TanStack Query 缓存
- 智能数据重取
- 防止重复请求
- 后台自动刷新
- 组件懒加载
- 虚拟滚动(大列表)
- 防抖输入
- 节流刷新
- Zustand 轻量级状态
- LocalStorage 持久化
- 最小化重渲染
- 部分显示(前 10 位)
- 密码输入框
- 不在 URL 中传输
- 客户端验证
- 类型安全(TypeScript)
- 防止注入攻击
- Context Isolation 启用
- Node Integration 禁用
- Preload 脚本隔离
- 移动端:< 768px
- 平板:768px - 1024px
- 桌面:> 1024px
- 网格自动调整列数
- 侧边栏折叠(移动端)
- 触摸友好的按钮尺寸
- 清晰的标签和说明
- 帮助提示文本
- 入门指南
- 示例值
- 批量操作
- 快捷键支持
- 高级配置
- 详细日志
✅ 可视化界面 vs 命令行 ✅ 实时状态监控 vs 静态查询 ✅ 批量操作 vs 逐个执行 ✅ 表单验证 vs 手动输入 ✅ 现代化设计 vs 纯文本 ✅ 快速操作 vs 菜单导航 ✅ 数据持久化 vs 每次输入 ✅ 错误提示 vs 异常信息
✅ 所有 API 端点完全实现 ✅ 参数完整支持 ✅ 操作流程一致 ✅ 数据格式兼容
- 快速添加新用户
- 监控运行状态
- 调整配置参数
- 查看统计数据
- 一键停止所有交易
- 快速平仓
- 重启跟踪配置
- 创建复杂跟踪规则
- 管理多个 KOL
- 批量用户操作
总结:Fusion Alpha Manager 提供了一个现代化、专业、易用的图形界面,完全覆盖了原 Python CLI 的功能,并在用户体验上有显著提升。适合各级用户使用,从新手到专业交易员都能快速上手。