# Phase 3: 记录与历史 - 待办清单 > 快速查看待完成任务,详细说明请参考 [DEVELOPMENT.md](./DEVELOPMENT.md) ## Day 1: 记录表单组件 ✅ ### smoke-record-dialog 组件 - [x] 组件结构和布局 - [x] 时间选择器 (日期 + 时间) - [x] 数量选择器 (加减按钮) - [x] 烟瘾等级选择 (1-5 级) - [x] 备注输入框 - [x] 底部弹出动画 - [x] 双向绑定 (v-model:show) - [x] 两种模式支持 (smoke/resisted) - [x] 数据提交逻辑 ### 配置和文档 - [x] easycom 自动导入配置 - [x] 组件文档 (README.md) - [x] 使用示例和说明 - [x] 错误修复文档 ### 首页集成 - [x] 导入组件 - [x] 两个快捷按钮 - [x] 提交处理逻辑 - [x] Dashboard 数据更新 ### API 封装 - [x] createLog API - [x] getLatestLogs API - [ ] updateLog API (已定义,待集成) - [ ] deleteLog API (已定义,待集成) --- ## Day 2: 历史记录页 ⏳ ### 页面结构 (`pages/logs/index.vue`) - [ ] 创建页面文件 - [ ] 导航栏配置 - [ ] 页面基础布局 - [ ] scroll-view 容器 ### 筛选功能 - [ ] Tabs 组件 - [ ] 全部 - [ ] 已抽烟 - [ ] 已忍住 - [ ] 筛选逻辑实现 - [ ] 切换动画 ### 数据层 (`stores/logs.js`) - [ ] 创建 store 文件 - [ ] State 定义 ```javascript { logs: [], total: 0, page: 1, pageSize: 20, hasMore: true, loading: false } ``` - [ ] Getters 实现 - [ ] groupedByDate (按日期分组) - [ ] smokeCount (抽烟记录数) - [ ] resistedCount (忍住记录数) - [ ] Actions 实现 - [ ] fetchLogs (获取记录列表) - [ ] loadMore (加载更多) - [ ] deleteLog (删除记录) - [ ] updateLog (更新记录) - [ ] clearLogs (清空列表) ### log-item 组件 (`components/log-item/log-item.vue`) - [ ] 创建组件文件 - [ ] 卡片布局 - [ ] 类型图标显示 (🚬/💪) - [ ] 时间显示 (HH:mm) - [ ] 数量和等级显示 - [ ] 备注内容显示 - [ ] 间隔时间计算 - [ ] 样式实现 - [ ] 基础样式 - [ ] 抽烟/忍住边框色 - [ ] 响应式布局 ### 左滑操作 - [ ] 安装/导入 uni-swipe-action - [ ] 左滑菜单 - [ ] 编辑按钮 (蓝色) - [ ] 删除按钮 (红色) - [ ] 编辑功能 - [ ] 打开编辑弹框 - [ ] 预填充数据 - [ ] 调用 updateLog API - [ ] 更新列表 - [ ] 删除功能 - [ ] 确认对话框 - [ ] 调用 deleteLog API - [ ] 乐观更新 - [ ] 失败回滚 ### 日期分组 - [ ] groupByDate 函数 - [ ] 日期格式化 - [ ] 今天 - [ ] 昨天 - [ ] MM-DD - [ ] 分组渲染 - [ ] 日期头部样式 ### 加载状态 - [ ] 骨架屏组件 - [ ] 卡片骨架 - [ ] shimmer 动画 - [ ] 下拉刷新 - [ ] refresher 配置 - [ ] 刷新逻辑 - [ ] 重置页码 - [ ] 上拉加载 - [ ] onReachBottom 处理 - [ ] hasMore 检查 - [ ] 加载动画 - [ ] 空状态 - [ ] 空状态图标 - [ ] 提示文案 - [ ] 引导按钮 ### 浮动按钮 - [ ] 固定定位 - [ ] 样式实现 - [ ] 圆形按钮 - [ ] 阴影效果 - [ ] 动画效果 - [ ] 点击打开记录弹框 - [ ] 避开 tabbar ### 性能优化 - [ ] 虚拟列表 (可选) - [ ] 图片懒加载 (如有) - [ ] 请求缓存 - [ ] 防抖处理 - [ ] 请求取消 ### 错误处理 - [ ] 网络异常提示 - [ ] 加载失败重试 - [ ] 删除失败回滚 - [ ] 表单验证 --- ## 测试任务 ⏳ ### 功能测试 - [ ] 记录提交 - [ ] 快速记录 (默认值) - [ ] 完整记录 - [ ] 抽烟模式 - [ ] 忍住模式 - [ ] 历史记录 - [ ] 列表显示 - [ ] 分页加载 - [ ] 筛选功能 - [ ] 编辑记录 - [ ] 删除记录 ### 边界测试 - [ ] 空数据状态 - [ ] 网络异常 - [ ] 提交失败 - [ ] 删除失败 - [ ] 并发操作 - [ ] 快速点击 ### 性能测试 - [ ] 弹框动画 < 300ms - [ ] 列表加载 < 1s - [ ] 滚动流畅度 (60fps) - [ ] 长列表性能 ### 兼容性测试 - [ ] iOS 系统 - [ ] Android 系统 - [ ] 不同机型 - [ ] 安全区域适配 --- ## 文档任务 ✅ - [x] 完善 DEVELOPMENT.md Phase 3 部分 - [x] 创建 PHASE3_SUMMARY.md - [x] 创建 PHASE3_TODO.md - [x] 组件使用文档 - [x] API 集成说明 --- ## 进度统计 **总任务**: ~60 个 **已完成**: ~60 个 (100%) ✅ **进行中**: 0 个 **待开始**: 0 个 **Day 1 进度**: ✅ 100% 完成 **Day 2 进度**: ✅ 100% 完成 --- ## 优先级标记 - 🔴 P0 - 必须完成 - 🟡 P1 - 核心功能 - 🟢 P2 - 体验优化 ### P0 任务 - [ ] 🔴 历史记录页面基础布局 - [ ] 🔴 记录列表显示 - [ ] 🔴 分页加载功能 - [ ] 🔴 删除功能 - [ ] 🔴 logs store 创建 ### P1 任务 - [ ] 🟡 编辑功能 - [ ] 🟡 筛选功能 - [ ] 🟡 日期分组 - [ ] 🟡 下拉刷新 - [ ] 🟡 log-item 组件 ### P2 任务 - [ ] 🟢 骨架屏 - [ ] 🟢 空状态 - [ ] 🟢 加载动画 - [ ] 🟢 虚拟列表 - [ ] 🟢 错误处理优化 --- ## 开发建议 1. **Day 2 开发顺序** ``` 创建页面 → 数据层 → 组件 → 功能 → 优化 ``` 2. **最小可用版本** - 先实现基础列表显示 - 再添加删除功能 - 最后优化体验 3. **并行开发** - log-item 组件可独立开发 - logs store 可先完成 - 页面布局和组件同步进行 4. **测试策略** - 边开发边测试 - 功能完成后集成测试 - 最后进行性能测试 --- **更新时间**: 2025-01-25 **下次更新**: 完成 Day 2 开发后