|
|
@@ -0,0 +1,240 @@
|
|
|
+# Story 005.001: 移动端股票图表组件适配优化
|
|
|
+
|
|
|
+**父史诗**: 史诗005 - 移动端股票训练系统适配优化
|
|
|
+docs/prd/epic-005-mobile-stock-training-adaptation.md
|
|
|
+
|
|
|
+## Status
|
|
|
+Ready
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 移动端股票交易用户
|
|
|
+**I want** 在移动设备上获得流畅、直观的股票图表交互体验
|
|
|
+**so that** 我能够高效地进行股票训练、技术分析和交易决策
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. **移动端图表显示优化** - 股票K线图在移动端清晰显示,图表元素大小适配移动屏幕,加载时间<2秒
|
|
|
+2. **触摸交互优化** - 支持手势缩放、平移操作,触摸目标尺寸≥44px,交互响应时间<150ms
|
|
|
+3. **技术指标面板适配** - 移动端技术指标面板布局合理,切换流畅,支持滑动操作
|
|
|
+4. **交易面板触摸优化** - 交易按钮和输入框触摸友好,防误触设计,操作反馈清晰
|
|
|
+5. **绘图工具栏移动端适配** - 绘图工具在移动端可用,工具栏布局紧凑,操作便捷
|
|
|
+6. **性能优化和内存管理** - 移动端内存占用<100MB,图表渲染性能稳定,无卡顿现象
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 移动端图表显示优化 (AC: #1)
|
|
|
+ - [ ] 分析现有StockChart组件在移动端的显示问题
|
|
|
+ - [ ] 优化图表容器响应式布局,适配不同屏幕尺寸
|
|
|
+ - [ ] 调整K线图元素大小和间距,确保移动端清晰度
|
|
|
+ - [ ] 优化图表字体大小和颜色对比度
|
|
|
+ - [ ] 实现移动端专属的图表缩放比例配置
|
|
|
+- [ ] 触摸交互优化 (AC: #2)
|
|
|
+ - [ ] 集成ECharts移动端手势支持(缩放、平移)
|
|
|
+ - [ ] 优化触摸事件处理,防止误操作
|
|
|
+ - [ ] 实现双击重置视图功能
|
|
|
+ - [ ] 添加触摸反馈动画效果
|
|
|
+ - [ ] 优化长按操作支持
|
|
|
+- [ ] 技术指标面板适配 (AC: #3)
|
|
|
+ - [ ] 分析现有技术指标显示在移动端的问题
|
|
|
+ - [ ] 设计移动端技术指标面板布局
|
|
|
+ - [ ] 实现滑动切换技术指标功能
|
|
|
+ - [ ] 优化指标参数设置界面
|
|
|
+ - [ ] 添加指标快速切换功能
|
|
|
+- [ ] 交易面板触摸优化 (AC: #4)
|
|
|
+ - [ ] 优化TradePanel组件移动端布局
|
|
|
+ - [ ] 增大交易按钮触摸目标尺寸
|
|
|
+ - [ ] 优化输入框触摸交互
|
|
|
+ - [ ] 添加交易确认防误触机制
|
|
|
+ - [ ] 实现触摸反馈效果
|
|
|
+- [ ] 绘图工具栏移动端适配 (AC: #5)
|
|
|
+ - [ ] 分析DrawingToolbar组件移动端适配需求
|
|
|
+ - [ ] 设计移动端绘图工具栏布局
|
|
|
+ - [ ] 优化绘图工具触摸交互
|
|
|
+ - [ ] 实现绘图工具快速切换
|
|
|
+ - [ ] 添加绘图操作撤销功能
|
|
|
+- [ ] 性能优化和内存管理 (AC: #6)
|
|
|
+ - [ ] 分析移动端性能瓶颈
|
|
|
+ - [ ] 优化图表数据加载策略
|
|
|
+ - [ ] 实现虚拟滚动和懒加载
|
|
|
+ - [ ] 优化内存使用,防止内存泄漏
|
|
|
+ - [ ] 添加性能监控和调试工具
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 现有技术栈分析 [Source: 代码分析]
|
|
|
+- **前端框架**: React 19 + TypeScript
|
|
|
+- **图表库**: ECharts 5.x
|
|
|
+- **样式框架**: Tailwind CSS v4
|
|
|
+- **移动端框架**: 基于React Router的移动端SPA
|
|
|
+- **现有组件**: StockChart、TradePanel、DrawingToolbar等已实现基础功能
|
|
|
+
|
|
|
+### 移动端适配技术方案
|
|
|
+
|
|
|
+#### 1. 响应式图表配置
|
|
|
+```typescript
|
|
|
+// 移动端专属的ECharts配置
|
|
|
+const mobileChartConfig = {
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '15%',
|
|
|
+ left: '3%'
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ]
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+#### 2. 触摸交互优化
|
|
|
+- 使用ECharts的`gesture`配置支持移动端手势
|
|
|
+- 实现自定义触摸事件处理,防止误操作
|
|
|
+- 添加触摸反馈和动画效果
|
|
|
+
|
|
|
+#### 3. 移动端布局重构
|
|
|
+- 使用CSS媒体查询适配不同屏幕尺寸
|
|
|
+- 采用移动优先的设计思路
|
|
|
+- 优化组件层级和渲染性能
|
|
|
+
|
|
|
+### 关键组件分析
|
|
|
+
|
|
|
+#### StockChart组件现状
|
|
|
+- ✅ 已实现基础K线图功能
|
|
|
+- ✅ 支持技术指标显示
|
|
|
+- ✅ 已集成绘图工具
|
|
|
+- ❌ 移动端显示适配不足
|
|
|
+- ❌ 触摸交互体验待优化
|
|
|
+
|
|
|
+#### TradePanel组件现状
|
|
|
+- ✅ 已实现买卖交易功能
|
|
|
+- ✅ 支持快捷键操作
|
|
|
+- ❌ 移动端触摸目标过小
|
|
|
+- ❌ 缺乏防误触机制
|
|
|
+
|
|
|
+#### DrawingToolbar组件现状
|
|
|
+- ✅ 已实现多种绘图工具
|
|
|
+- ✅ 支持线条绘制和编辑
|
|
|
+- ❌ 移动端操作不便
|
|
|
+- ❌ 工具栏布局需优化
|
|
|
+
|
|
|
+### 性能优化策略
|
|
|
+1. **图表数据优化**
|
|
|
+ - 实现数据分页加载
|
|
|
+ - 使用Web Workers处理大数据量
|
|
|
+ - 优化ECharts渲染性能
|
|
|
+
|
|
|
+2. **内存管理**
|
|
|
+ - 及时销毁不需要的图表实例
|
|
|
+ - 使用React.memo优化组件重渲染
|
|
|
+ - 实现虚拟化渲染长列表
|
|
|
+
|
|
|
+3. **网络优化**
|
|
|
+ - 实现数据缓存机制
|
|
|
+ - 使用Service Worker支持离线访问
|
|
|
+ - 优化API请求频率
|
|
|
+
|
|
|
+## Testing
|
|
|
+
|
|
|
+### 测试策略
|
|
|
+- **设备覆盖**: iOS Safari、Android Chrome主流版本
|
|
|
+- **屏幕尺寸**: 覆盖小屏手机到大屏平板
|
|
|
+- **网络环境**: 3G/4G/5G/WiFi不同网络条件测试
|
|
|
+- **交互测试**: 手势操作、多点触控、滑动测试
|
|
|
+
|
|
|
+### 测试验证点
|
|
|
+- 图表在不同设备上的显示效果
|
|
|
+- 触摸操作的准确性和响应速度
|
|
|
+- 技术指标面板的功能完整性
|
|
|
+- 交易操作的防误触效果
|
|
|
+- 性能指标(加载时间、内存占用)
|
|
|
+
|
|
|
+### 自动化测试
|
|
|
+- 使用Playwright进行移动端UI测试
|
|
|
+- 性能基准测试
|
|
|
+- 跨浏览器兼容性测试
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-09-27 | 1.0 | 初始故事创建 | Claude Code |
|
|
|
+
|
|
|
+## Risk Assessment
|
|
|
+
|
|
|
+### 技术风险
|
|
|
+- **ECharts移动端兼容性**: 可能存在特定设备的兼容性问题
|
|
|
+- **触摸交互复杂性**: 手势操作可能影响现有桌面端功能
|
|
|
+- **性能优化难度**: 移动端性能优化需要深入的技术调优
|
|
|
+
|
|
|
+### 缓解措施
|
|
|
+- 渐进式开发,分模块测试
|
|
|
+- 保持桌面端功能完整性
|
|
|
+- 充分的跨设备测试
|
|
|
+- 性能监控和优化迭代
|
|
|
+
|
|
|
+### 依赖关系
|
|
|
+- 依赖现有股票图表组件库的稳定性
|
|
|
+- 需要移动端布局框架的支持
|
|
|
+- 依赖ECharts移动端扩展的可用性
|
|
|
+
|
|
|
+## Success Metrics
|
|
|
+
|
|
|
+### 定量指标
|
|
|
+- 移动端图表加载时间减少50%(目标<2秒)
|
|
|
+- 触摸交互响应时间<150ms
|
|
|
+- 移动端内存占用<100MB
|
|
|
+- 用户操作成功率>95%
|
|
|
+
|
|
|
+### 定性指标
|
|
|
+- 移动端用户体验评分>4.5/5
|
|
|
+- 用户反馈积极,操作流畅
|
|
|
+- 无明显的性能问题报告
|
|
|
+- 跨设备兼容性良好
|
|
|
+
|
|
|
+## Implementation Timeline
|
|
|
+
|
|
|
+### Phase 1: 基础适配 (1周)
|
|
|
+- 移动端图表显示优化
|
|
|
+- 基础触摸交互实现
|
|
|
+
|
|
|
+### Phase 2: 功能完善 (1周)
|
|
|
+- 技术指标面板适配
|
|
|
+- 交易面板触摸优化
|
|
|
+
|
|
|
+### Phase 3: 体验优化 (1周)
|
|
|
+- 绘图工具栏移动端适配
|
|
|
+- 性能优化和内存管理
|
|
|
+
|
|
|
+### Phase 4: 测试验收 (0.5周)
|
|
|
+- 跨设备测试
|
|
|
+- 性能基准测试
|
|
|
+- 用户体验测试
|
|
|
+
|
|
|
+**总周期**: 3.5周
|
|
|
+
|
|
|
+## Files to be Modified
|
|
|
+
|
|
|
+### 核心组件文件
|
|
|
+- `src/client/mobile/components/stock/components/stock-chart/src/components/StockChart.tsx`
|
|
|
+- `src/client/mobile/components/stock/components/stock-chart/src/components/TradePanel.tsx`
|
|
|
+- `src/client/mobile/components/stock/components/stock-chart/src/components/DrawingToolbar.tsx`
|
|
|
+- `src/client/mobile/components/stock/stock_main.tsx`
|
|
|
+
|
|
|
+### 样式文件
|
|
|
+- 新增移动端专属样式文件
|
|
|
+- 响应式布局配置更新
|
|
|
+
|
|
|
+### 工具函数
|
|
|
+- 移动端触摸事件处理工具
|
|
|
+- 性能监控工具函数
|
|
|
+
|
|
|
+## Next Steps
|
|
|
+1. 详细技术方案设计
|
|
|
+2. 移动端原型开发
|
|
|
+3. 跨设备测试验证
|
|
|
+4. 性能优化迭代
|
|
|
+5. 用户验收测试
|