Browse Source

📝 docs(story): 添加移动端股票图表组件适配优化story文档

- 创建005.001.story.md文档,描述移动端股票图表适配需求
- 定义移动端图表显示、触摸交互、技术指标面板等6项验收标准
- 规划移动端适配的任务分解和3.5周的实施时间线
- 分析核心组件现状和移动端适配技术方案
- 制定测试策略、风险评估和成功指标
yourname 2 months ago
parent
commit
d06d04351b
1 changed files with 240 additions and 0 deletions
  1. 240 0
      docs/stories/005.001.story.md

+ 240 - 0
docs/stories/005.001.story.md

@@ -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. 用户验收测试