mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-04 11:30:58 +08:00
d353cc2125
## Problem User-facing messages were too generic and uninformative: 1. **Dashboard empty state**: - Title: "No Traders Configured" (cold, technical) - Description: Generic message with no action guidance - Button: "Go to Traders Page" (unclear what happens next) 2. **Login error messages**: - "Login failed" (too vague - why did it fail?) - "Registration failed" (no guidance on what to do) - "OTP verification failed" (users don't know how to fix) **Impact**: Users felt confused and frustrated, no clear next steps. ## Solution ### 1. Improve Dashboard Empty State **File**: `web/src/i18n/translations.ts` **Before**: ```typescript dashboardEmptyTitle: 'No Traders Configured' dashboardEmptyDescription: "You haven't created any AI traders yet..." goToTradersPage: 'Go to Traders Page' ``` **After**: ```typescript dashboardEmptyTitle: "Let's Get Started!" // ✅ Welcoming, encouraging dashboardEmptyDescription: 'Create your first AI trader to automate your trading strategy. Connect an exchange, choose an AI model, and start trading in minutes!' // ✅ Clear steps goToTradersPage: 'Create Your First Trader' // ✅ Clear action ``` **Changes**: - ✅ More welcoming tone ("Let's Get Started!") - ✅ Specific action steps (connect → choose → trade) - ✅ Time expectation ("in minutes") - ✅ Clear call-to-action button --- ### 2. Improve Error Messages **File**: `web/src/i18n/translations.ts` **Before**: ```typescript loginFailed: 'Login failed' // ❌ No guidance registrationFailed: 'Registration failed' // ❌ No guidance verificationFailed: 'OTP verification failed' // ❌ No guidance ``` **After**: ```typescript loginFailed: 'Login failed. Please check your email and password.' // ✅ Clear hint registrationFailed: 'Registration failed. Please try again.' // ✅ Clear action verificationFailed: 'OTP verification failed. Please check the code and try again.' // ✅ Clear steps ``` **Changes**: - ✅ Specific error hints (check email/password) - ✅ Clear remediation steps (try again, check code) - ✅ User-friendly tone --- ### 3. Chinese Translations All improvements mirrored in Chinese: **Dashboard**: - Title: "开始使用吧！" (Let's get started!) - Description: Clear 3-step guidance - Button: "创建您的第一个交易员" (Create your first trader) **Errors**: - "登录失败，请检查您的邮箱和密码。" - "注册失败，请重试。" - "OTP 验证失败，请检查验证码后重试。" --- ## Impact ### User Experience Improvements | Message Type | Before | After | Benefit | |--------------|--------|-------|---------| | **Empty dashboard** | Cold, technical | Welcoming, actionable | ✅ Reduces confusion | | **Login errors** | Vague | Specific hints | ✅ Faster problem resolution | | **Registration errors** | No guidance | Clear next steps | ✅ Lower support burden | | **OTP errors** | Confusing | Actionable | ✅ Higher success rate | ### Tone Shift **Before**: Technical, system-centric - "No Traders Configured" - "Login failed" **After**: User-centric, helpful - "Let's Get Started!" - "Login failed. Please check your email and password." --- ## Testing **Manual Testing**: - [x] Empty dashboard displays new messages correctly - [x] Login error shows improved message - [x] Registration error shows improved message - [x] OTP error shows improved message - [x] Chinese translations display correctly - [x] Button text updated appropriately **Language Coverage**: - [x] English ✅ - [x] Chinese ✅ --- ## Files Changed **1 frontend file**: - `web/src/i18n/translations.ts` (+12 lines, -6 lines) **Lines affected**: - English: Lines 149-152, 461-464 - Chinese: Lines 950-953, 1227-1229 --- **By submitting this PR, I confirm:** - [x] I have read the Contributing Guidelines - [x] I agree to the Code of Conduct - [x] My contribution is licensed under AGPL-3.0 --- 🌟 **Thank you for reviewing!** This PR improves user experience with clearer, more helpful messages. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: the-dev-z <the-dev-z@users.noreply.github.com> Co-authored-by: tinkle-community <tinklefund@gmail.com>
NOFX Web Dashboard
基于 Vite + React + TypeScript 的AI自动交易监控面板
技术栈
- React 18 - UI框架
- TypeScript - 类型安全
- Vite - 构建工具
- Tailwind CSS - 样式框架
- SWR - 数据获取和缓存
- Zustand - 状态管理
- Recharts - 图表库
安装依赖
npm install
运行开发服务器
npm run dev
构建生产版本
npm run build
功能特性
实时监控
- 系统状态 - 运行状态、AI提供商、周期数
- 账户信息 - 净值、可用余额、总盈亏、保证金使用率
- 持仓列表 - 实时价格、盈亏、杠杆、强平价
- 决策日志 - 完整的AI思维链（可展开）、决策动作、执行结果
AI思维链分析
每个决策记录都包含完整的AI思考过程：
- 第一步：现有持仓分析（技术指标、盈亏评估）
- 第二步：账户风险评估（保证金使用率、可用余额）
- 第三步：新机会评估（候选币种筛选、技术形态分析）
- 第四步：最终决策总结（平仓/开仓/持有决策）
点击 "💭 AI思维链分析" 即可展开查看完整分析过程！
自动刷新
- 系统状态、账户、持仓：每5秒刷新
- 决策日志、统计：每10秒刷新
API集成
前端通过Vite代理访问后端API（http://localhost:8080）
API端点：
GET /api/status- 系统状态GET /api/account- 账户信息GET /api/positions- 持仓列表GET /api/decisions- 决策日志（最近30条）GET /api/decisions/latest- 最新决策（最近5条）GET /api/statistics- 统计信息
项目结构
web/
├── src/
│ ├── components/ # React组件（待扩展）
│ ├── lib/
│ │ └── api.ts # API调用函数
│ ├── store/ # Zustand状态管理（待扩展）
│ ├── types/
│ │ └── index.ts # TypeScript类型定义
│ ├── App.tsx # 主应用组件
│ ├── main.tsx # 入口文件
│ └── index.css # 全局样式
├── index.html # HTML模板
├── vite.config.ts # Vite配置
├── tailwind.config.js # Tailwind配置
├── tsconfig.json # TypeScript配置
└── package.json # 依赖配置
注意事项
- 确保后端API服务已启动（默认端口8080）
- Node.js版本要求：>= 18.0.0
- 网络连接：需要访问Binance API
开发计划
- 添加图表展示（账户净值走势、盈亏曲线）
- 添加决策详情页面（完整的CoT分析）
- 添加手动交易控制
- 添加参数配置页面
- 添加通知和告警系统