问题描述
性能监控页面的四个折线图（丢帧率、FPS稳定性、丢包率、码率稳定性）无法显示数据。前端能接收到数据（数组长度正确），但图表中所有数据点都是0或null，导致图表空白。
根本原因
问题由多个层次的问题叠加导致：
1. **IPC响应格式问题**：后端返回的数据被包装在 `{success: true, data: [...]}` 中，前端直接使用 `result` 而不是 `result.data`
2. **Vue响应式问题**：`props.taskId` 在异步更新时，`open()` 方法执行时 `taskId` 还未更新，导致数据加载失败
3. **SQLite数据读取问题**：`SqlJsStatement.all()` 方法使用 `getColumn()` 读取数值类型时返回 `null`，需要使用 `getAsObject()` 方法
4. **时间戳匹配问题**：图表生成固定的时间轴（每秒一个点），而数据库中的时间戳可能不完全对齐，导致数据无法匹配到时间轴上
解决方案
分步骤修复：
1. **修复IPC响应处理**：在 `StreamPerformanceViewer.vue` 中正确提取 `result.data`
2. **修复Vue响应式问题**：修改 `open()` 方法接受 `taskId` 作为直接参数，避免依赖异步更新的 `props.taskId`
3. **修复SQLite数据读取**：在 `database.ts` 的 `SqlJsStatement.all()` 方法中优先使用 `getAsObject()`，如果失败则回退到逐列读取
4. **简化图表逻辑**：移除所有时间轴生成和映射逻辑，直接使用数据库中的时间戳作为横轴，按时间戳排序后直接显示，不做任何对齐或插值处理
背景信息
技术栈：Electron + Vue 3 + Chart.js + SQLite (sql.js)
- 前端组件：`StreamPerformanceViewer.vue`
- 后端服务：`StorageService.ts`, `PerformanceHistoryService.ts`, `StreamTaskExecutor.ts`
- 数据库适配器：`database.ts` (SqlJsAdapter)
- IPC通信：`streamHandlers.ts`
数据流程：FFmpeg输出 → StreamTaskExecutor → PerformanceHistoryService → StorageService → IPC → 前端组件 → Chart.js
关键代码修改：
- `src/renderer/components/StreamPerformanceViewer.vue`: 修复数据提取和图表生成逻辑
- `src/main/utils/database.ts`: 修复SQLite数据读取方法
- `src/main/modules/StorageService.ts`: 添加调试日志
- `src/renderer/components/StreamStatus.vue`: 修复taskId传递