|
|
@@ -4,7 +4,7 @@
|
|
|
docs/prd/epic-005-mobile-stock-training-adaptation.md
|
|
|
|
|
|
## Status
|
|
|
-Ready
|
|
|
+In Progress
|
|
|
|
|
|
## Story
|
|
|
**As a** 移动端股票交易用户
|
|
|
@@ -20,12 +20,13 @@ Ready
|
|
|
6. **性能优化和内存管理** - 移动端内存占用<100MB，图表渲染性能稳定，无卡顿现象
|
|
|
|
|
|
## Tasks / Subtasks
|
|
|
-- [ ] 移动端图表显示优化 (AC: #1 - 移动端图表显示优化)
|
|
|
- - [ ] 分析现有StockChart组件在移动端的显示问题 - 识别字体过小、间距不足、图表元素重叠等问题
|
|
|
- - [ ] 优化图表容器响应式布局，适配不同屏幕尺寸 - 使用CSS媒体查询实现不同屏幕尺寸适配
|
|
|
- - [ ] 调整K线图元素大小和间距，确保移动端清晰度 - 增大K线宽度、调整间距，确保触摸友好
|
|
|
- - [ ] 优化图表字体大小和颜色对比度 - 使用rem单位，确保在不同设备上字体清晰可读
|
|
|
- - [ ] 实现移动端专属的图表缩放比例配置 - 为移动端设置不同的默认缩放比例和交互参数
|
|
|
+- [x] 移动端图表显示优化 (AC: #1 - 移动端图表显示优化)
|
|
|
+ - [x] 分析现有StockChart组件在移动端的显示问题 - 识别字体过小、间距不足、图表元素重叠等问题
|
|
|
+ - [x] 优化图表容器响应式布局，适配不同屏幕尺寸 - 使用CSS媒体查询实现不同屏幕尺寸适配
|
|
|
+ - [x] 调整K线图元素大小和间距，确保移动端清晰度 - 增大K线宽度、调整间距，确保触摸友好
|
|
|
+ - [x] 优化图表字体大小和颜色对比度 - 使用rem单位，确保在不同设备上字体清晰可读
|
|
|
+ - [x] 实现移动端专属的图表缩放比例配置 - 为移动端设置不同的默认缩放比例和交互参数
|
|
|
+ - [ ] 统一移动端检测机制 - 使用`src/client/hooks/use-mobile.ts`替代重复的检测逻辑
|
|
|
- [ ] 触摸交互优化 (AC: #2 - 触摸交互优化)
|
|
|
- [ ] 集成ECharts移动端手势支持（缩放、平移） - 配置ECharts手势参数，支持双指缩放和平移操作
|
|
|
- [ ] 优化触摸事件处理，防止误操作 - 添加触摸延迟和防抖机制，防止误触
|
|
|
@@ -71,7 +72,16 @@ Ready
|
|
|
|
|
|
### 移动端适配技术方案
|
|
|
|
|
|
-#### 1. 响应式图表配置
|
|
|
+#### 1. 统一移动端检测机制
|
|
|
+```typescript
|
|
|
+// 使用项目统一的移动端检测Hook
|
|
|
+import { useIsMobile } from '@/client/hooks/use-mobile';
|
|
|
+
|
|
|
+// 在组件中使用
|
|
|
+const isMobile = useIsMobile(); // 返回boolean值，基于768px断点
|
|
|
+```
|
|
|
+
|
|
|
+#### 2. 响应式图表配置
|
|
|
```typescript
|
|
|
// 移动端专属的ECharts配置
|
|
|
const mobileChartConfig = {
|
|
|
@@ -94,12 +104,12 @@ const mobileChartConfig = {
|
|
|
};
|
|
|
```
|
|
|
|
|
|
-#### 2. 触摸交互优化
|
|
|
+#### 3. 触摸交互优化
|
|
|
- 使用ECharts的`gesture`配置支持移动端手势
|
|
|
- 实现自定义触摸事件处理，防止误操作
|
|
|
- 添加触摸反馈和动画效果
|
|
|
|
|
|
-#### 3. 移动端布局重构
|
|
|
+#### 4. 移动端布局重构
|
|
|
- 使用CSS媒体查询适配不同屏幕尺寸
|
|
|
- 采用移动优先的设计思路
|
|
|
- 优化组件层级和渲染性能
|
yourname