名称: Fusion Alpha Manager
类型: Electron 桌面应用
版本: 1.0.0
技术栈: Electron + React + TypeScript + Tailwind CSS
这是一个为 Fusion Alpha 交易机器人系统设计的现代化桌面管理应用。它取代了原有的 Python CLI 工具(client.py),提供了更加直观、美观、高效的图形界面。
- 添加/删除交易用户
- 配置 Gate.io API 凭证
- 真实/模拟交易模式切换
- 启动/停止用户交易
- 余额监控配置
- 一键平仓功能
- 导出器管理
- 添加/删除关键意见领袖
- 支持 NORMAL 和 WWG 类型
- Discord 频道监控配置
- 作者 ID 过滤
- 用户-KOL 映射关系
- 三种金额模式:
- Loss Fixed(固定损失)
- Fixed(固定金额)
- Percentage(百分比)
- 反向交易支持
- 期货品种过滤
- 启动/停止/重启控制
- 系统统计概览
- 快速操作入口
- 活动日志
- API 服务器配置
- 刷新间隔设置
- 应用信息展示
- React 18: UI 框架
- TypeScript: 类型安全
- Tailwind CSS: 样式框架
- TanStack Query: 数据获取和缓存
- Zustand: 状态管理
- Axios: HTTP 客户端
- Lucide React: 图标库
- Electron 28: 桌面应用框架
- Context Isolation: 安全隔离
- Preload Scripts: 进程通信
- Vite 5: 快速开发服务器和构建
- electron-builder: 应用打包
- TypeScript Compiler: TS 编译
BotViewer/
├── electron/ # Electron 主进程
│ ├── main.ts # 主进程入口
│ ├── preload.ts # 预加载脚本
│ └── tsconfig.json # TS 配置
│
├── src/ # React 应用
│ ├── components/ # UI 组件
│ │ ├── Dashboard.tsx
│ │ ├── UserManagement.tsx
│ │ ├── KOLManagement.tsx
│ │ ├── TrackManagement.tsx
│ │ └── SettingsPanel.tsx
│ │
│ ├── services/ # 服务层
│ │ └── api.ts # API 客户端
│ │
│ ├── store/ # 状态管理
│ │ └── settings.ts # 设置存储
│ │
│ ├── types/ # 类型定义
│ │ └── index.ts
│ │
│ ├── App.tsx # 主应用组件
│ ├── main.tsx # React 入口
│ ├── index.css # 全局样式
│ └── vite-env.d.ts # Vite 类型声明
│
├── .vscode/ # VS Code 配置
│ ├── extensions.json
│ └── settings.json
│
├── dist/ # 构建输出
├── release/ # 打包输出
│
├── package.json # 项目配置
├── tsconfig.json # TS 配置(主)
├── tsconfig.node.json # TS 配置(Node)
├── vite.config.ts # Vite 配置
├── tailwind.config.js # Tailwind 配置
├── postcss.config.js # PostCSS 配置
├── .eslintrc.cjs # ESLint 配置
├── .prettierrc # Prettier 配置
├── .gitignore # Git 忽略
├── build.sh # 构建脚本
│
└── README.md # 主文档
QUICKSTART.md # 快速开始
FEATURES.md # 功能详解
PROJECT.md # 本文档
完整实现了 Fusion Alpha API 的所有端点:
POST /user/add- 添加用户GET /user/get- 获取用户列表POST /user/update- 更新用户DELETE /user/remove- 删除用户POST /user/run- 启动用户POST /user/stop- 停止用户POST /user/monitor/run- 启动监控POST /user/monitor/stop- 停止监控POST /user/close_all- 关闭所有持仓POST /user/exporter/start- 启动导出器POST /user/exporter/stop- 停止导出器
POST /kol/add- 添加 KOLGET /kol/get- 获取 KOL 列表DELETE /kol/remove- 删除 KOL
POST /kol/track/add- 添加跟踪配置GET /kol/track/get- 获取跟踪配置DELETE /kol/track/remove- 删除跟踪配置POST /kol/track/start- 开始跟踪POST /kol/track/stop- 停止跟踪POST /kol/track/restart- 重启跟踪
- Primary: 蓝色系(#0ea5e9)
- Dark: 深色系(#0f172a - #f8fafc)
- Success: 绿色(成功状态)
- Danger: 红色(危险操作)
- Warning: 黄色(警告信息)
- Info: 蓝色(一般信息)
- btn: 基础按钮
- btn-primary: 主要按钮
- btn-secondary: 次要按钮
- btn-danger: 危险按钮
- btn-success: 成功按钮
- input: 输入框
- card: 卡片容器
- badge: 标签徽章
- slideIn: 滑入动画
- pulse: 脉冲动画
- transition-all: 平滑过渡
npm installnpm run dev- 启动 Vite 开发服务器(端口 5173)
- 自动编译 TypeScript
- 启动 Electron 窗口
- 支持热重载
npm run build- 编译 TypeScript
- 打包 React 应用
- 生成 Electron 可执行文件
npm run lintreact&react-dom: React 框架electron: 桌面应用框架axios: HTTP 请求@tanstack/react-query: 数据管理zustand: 状态管理lucide-react: 图标date-fns: 日期处理chart.js&recharts: 图表(预留)
vite: 构建工具typescript: 类型系统tailwindcss: CSS 框架eslint: 代码检查electron-builder: 应用打包concurrently: 并行执行命令wait-on: 等待服务就绪
- Context Isolation: Electron 进程隔离
- No Node Integration: 渲染进程不直接访问 Node
- Preload Scripts: 安全的进程通信
- API Key Protection: 部分显示敏感信息
- Input Validation: 表单验证防止注入
- 数据缓存: TanStack Query 智能缓存
- 懒加载: 按需加载组件
- 防抖节流: 优化频繁操作
- 虚拟滚动: 大列表性能优化
- Tree Shaking: Vite 自动优化
- 代码分割: 减小包体积
✅ 现代化的 UI/UX 设计
✅ 类型安全的开发体验
✅ 快速的开发和构建
✅ 跨平台支持(macOS/Windows/Linux)
✅ 实时数据更新
✅ 离线配置持久化
✅ 完整的错误处理
✅ 响应式设计
✅ 图形界面 vs 命令行
✅ 实时监控 vs 手动查询
✅ 批量操作 vs 逐个执行
✅ 可视化配置 vs 文本输入
✅ 错误提示 vs 异常堆栈
在设置面板中配置:
- API Base URL:
http://127.0.0.1:8888 - Refresh Interval:
5000ms
使用 LocalStorage 存储:
- 应用设置
- API 配置
- UI 状态
- 数据可视化图表
- 交易历史记录
- 性能分析报告
- 通知推送系统
- 多语言支持
- 深色/浅色主题切换
- 键盘快捷键
- 导出数据功能
- 单元测试
- E2E 测试
- 性能监控
- 错误上报
- 自动更新
- 使用 ESLint + Prettier
- 遵循 TypeScript 严格模式
- React Hooks 最佳实践
- 函数式组件优先
- feat: 新功能
- fix: 修复
- docs: 文档
- style: 样式
- refactor: 重构
- test: 测试
- chore: 构建/工具
- main: 生产分支
- develop: 开发分支
- feature/*: 功能分支
- hotfix/*: 热修复分支
README.md- 主要文档和使用说明QUICKSTART.md- 快速开始指南FEATURES.md- 功能详细说明PROJECT.md- 项目技术文档(本文件)
无法连接 API
- 检查 API 服务器是否运行
- 验证 Settings 中的 API URL
- 查看浏览器控制台错误
应用启动失败
- 删除 node_modules 重新安装
- 检查 Node.js 版本(需要 18+)
- 查看终端错误信息
构建失败
- 清理 dist 目录
- 更新依赖版本
- 检查 TypeScript 错误
- 开启 DevTools(开发模式自动打开)
- 查看 Network 标签页(API 请求)
- 查看 Console 标签页(日志)
- 使用 React DevTools 扩展
- 查看文档:README.md
- 提交 Issue:GitHub Issues
- 查看日志:DevTools Console
- 检查 API:API 服务器日志
MIT License
开发者: Fusion Alpha Team
更新时间: 2026-01-08
文档版本: 1.0.0