smt/docs/PHASE3_TODO.md

Phase 3: 记录与历史 - 待办清单

快速查看待完成任务，详细说明请参考 DEVELOPMENT.md

Day 1: 记录表单组件 ✅

smoke-record-dialog 组件

• 组件结构和布局
• 时间选择器 (日期 + 时间)
• 数量选择器 (加减按钮)
• 烟瘾等级选择 (1-5 级)
• 备注输入框
• 底部弹出动画
• 双向绑定 (v-model:show)
• 两种模式支持 (smoke/resisted)
• 数据提交逻辑

配置和文档

• easycom 自动导入配置
• 组件文档 (README.md)
• 使用示例和说明
• 错误修复文档

首页集成

• 导入组件
• 两个快捷按钮
• 提交处理逻辑
• Dashboard 数据更新

API 封装

• createLog API
• getLatestLogs API
• updateLog API (已定义，待集成)
• deleteLog API (已定义，待集成)

---

Day 2: 历史记录页 ⏳

页面结构 (pages/logs/index.vue)

• 创建页面文件
• 导航栏配置
• 页面基础布局
• scroll-view 容器

筛选功能

• Tabs 组件
  • 全部
  • 已抽烟
  • 已忍住
• 筛选逻辑实现
• 切换动画

数据层 (stores/logs.js)

• 创建 store 文件
• State 定义

  {
    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 系统
• 不同机型
• 安全区域适配

---

文档任务 ✅

• 完善 DEVELOPMENT.md Phase 3 部分
• 创建 PHASE3_SUMMARY.md
• 创建 PHASE3_TODO.md
• 组件使用文档
• 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 开发后