2
0
Эх сурвалжийг харах

📝 docs(story): 更新移动端适配需求和任务清单

- 修改验收标准第3项,从"技术指标面板适配"改为"顶部行情信息适配"
- 更新任务列表,移除技术指标面板相关任务,添加ProfitDisplay组件适配任务
- 添加ProfitDisplay组件现状分析和移动端适配设计内容
- 更新项目阶段计划和文件列表,反映新的工作内容
- 添加版本历史记录,记录此次需求变更(版本1.5)
yourname 2 сар өмнө
parent
commit
49e0e6e78e

+ 19 - 11
docs/stories/005.001.story.md

@@ -14,7 +14,7 @@ In Progress
 ## Acceptance Criteria
 1. **移动端图表显示优化** - 股票K线图在移动端清晰显示,图表元素大小适配移动屏幕,加载时间<2秒
 2. **触摸交互优化** - 支持手势缩放、平移操作,触摸目标尺寸≥44px,交互响应时间<150ms
-3. **技术指标面板适配** - 移动端技术指标面板布局合理,切换流畅,支持滑动操作
+3. **顶部行情信息适配** - 移动端ProfitDisplay组件布局合理,信息显示清晰,触摸友好
 4. **交易面板触摸优化** - 交易按钮和输入框触摸友好,防误触设计,操作反馈清晰
 5. **绘图工具栏移动端适配** - 绘图工具在移动端可用,工具栏布局紧凑,操作便捷
 6. **性能优化和内存管理** - 移动端内存占用<100MB,图表渲染性能稳定,无卡顿现象
@@ -33,12 +33,12 @@ In Progress
   - [x] 实现双击重置视图功能 - 双击图表区域重置到默认视图状态
   - [x] 添加触摸反馈动画效果 - 为触摸操作添加视觉反馈,提升用户体验
   - [x] 优化长按操作支持 - 实现长按显示详细信息或快捷操作菜单
-- [ ] 技术指标面板适配 (AC: #3 - 技术指标面板适配)
-  - [ ] 分析现有技术指标显示在移动端的问题 - 识别面板过宽、切换不便、参数设置困难等问题
-  - [ ] 设计移动端技术指标面板布局 - 采用垂直滑动布局,优化小屏幕显示
-  - [ ] 实现滑动切换技术指标功能 - 支持左右滑动切换不同技术指标
-  - [ ] 优化指标参数设置界面 - 使用模态框或抽屉式界面设置参数
-  - [ ] 添加指标快速切换功能 - 提供常用指标的一键切换按钮
+- [ ] 顶部行情信息适配 (AC: #3 - 顶部行情信息适配)
+  - [ ] 分析ProfitDisplay组件在移动端的显示问题 - 识别信息显示不全、文字过小、布局拥挤等问题
+  - [ ] 设计移动端ProfitDisplay组件布局 - 采用响应式设计,优化小屏幕信息显示
+  - [ ] 实现移动端信息显示优先级调整 - 移动端优先显示关键信息(累计收益率、涨跌幅)
+  - [ ] 优化字体大小和触摸目标尺寸 - 确保移动端文字清晰可读,触摸目标≥44px
+  - [ ] 添加移动端专属的交互功能 - 支持点击展开/收起详细信息
 - [ ] 交易面板触摸优化 (AC: #4 - 交易面板触摸优化)
   - [ ] 优化TradePanel组件移动端布局 - 重新设计布局,确保在小屏幕上操作便捷
   - [ ] 增大交易按钮触摸目标尺寸 - 确保所有按钮尺寸≥44px,符合移动端标准
@@ -118,11 +118,16 @@ const mobileChartConfig = {
 
 #### StockChart组件现状
 - ✅ 已实现基础K线图功能
-- ✅ 支持技术指标显示
 - ✅ 已集成绘图工具
 - ❌ 移动端显示适配不足
 - ❌ 触摸交互体验待优化
 
+#### ProfitDisplay组件现状
+- ✅ 已实现基础行情信息显示
+- ✅ 显示累计收益率和每日行情数据
+- ❌ 移动端布局未适配,信息显示拥挤
+- ❌ 缺乏响应式设计,小屏幕体验差
+
 #### TradePanel组件现状
 - ✅ 已实现买卖交易功能
 - ✅ 支持快捷键操作
@@ -162,7 +167,7 @@ const mobileChartConfig = {
 ### 测试验证点
 - 图表在不同设备上的显示效果
 - 触摸操作的准确性和响应速度
-- 技术指标面板的功能完整性
+- 顶部行情信息在不同屏幕尺寸的显示效果
 - 交易操作的防误触效果
 - 性能指标(加载时间、内存占用)
 
@@ -193,6 +198,7 @@ const mobileChartConfig = {
 | 2025-09-28 | 1.2 | 修复PO验证问题:移除移动端专属样式文件需求(使用Tailwind响应式类)、更新测试配置信息、明确实际测试设备 | Bob (SM) |
 | 2025-09-28 | 1.3 | 修复PO验证报告关键问题:统一技术栈版本格式(Tailwind CSS 4.1.11)、确认测试设备配置、移除不必要的文件创建需求 | Bob (SM) |
 | 2025-09-28 | 1.4 | 修复移动端检测Hook逻辑问题,统一使用matchMedia.matches确保检测准确性 | James (Dev) |
+| 2025-09-28 | 1.5 | 修正故事内容:去掉技术指标面板任务,添加ProfitDisplay移动端适配任务 | Bob (SM) |
 
 ## Risk Assessment
 
@@ -233,7 +239,7 @@ const mobileChartConfig = {
 - 基础触摸交互实现
 
 ### Phase 2: 功能完善 (1周)
-- 技术指标面板适配
+- 顶部行情信息适配
 - 交易面板触摸优化
 
 ### Phase 3: 体验优化 (1周)
@@ -251,6 +257,7 @@ const mobileChartConfig = {
 
 ### 核心组件文件
 - `src/client/mobile/components/stock/components/stock-chart/src/components/StockChart.tsx` - 股票图表主组件
+- `src/client/mobile/components/stock/components/stock-chart/src/components/ProfitDisplay.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` - 股票主页面组件
@@ -277,13 +284,14 @@ Claude Code (d8d-model)
 ### Completion Notes List
 - [x] 移动端图表显示优化完成 - 已实现统一移动端检测机制,修复了Hook逻辑问题
 - [x] 触摸交互功能实现 - 已集成ECharts手势支持、防误触机制、双击重置、触摸反馈
-- [ ] 技术指标面板适配 - 待实现
+- [ ] 顶部行情信息适配 - 待实现
 - [ ] 交易面板触摸优化 - 待实现
 - [ ] 绘图工具栏移动端适配 - 待实现
 - [ ] 性能优化和内存管理 - 待实现
 
 ### File List
 - `src/client/mobile/components/stock/components/stock-chart/src/components/StockChart.tsx` - 股票图表主组件适配
+- `src/client/mobile/components/stock/components/stock-chart/src/components/ProfitDisplay.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` - 股票主页面响应式布局