admin/smt

Fork 0

Files

T

nepiedg c883ae7b17 init

2026-01-25 11:45:16 +08:00

6.9 KiB

Raw Blame History

开发计划与任务拆分

1. 开发阶段概览

Phase 1: 基础框架搭建 (2天)
    ↓
Phase 2: 首页核心功能 (3天) ★ 优先保证首页体验
    ↓
Phase 3: 记录与历史 (2天)
    ↓
Phase 4: 统计与图表 (2天)
    ↓
Phase 5: AI助手与个人中心 (3天)
    ↓
Phase 6: 优化与测试 (2天)

2. Phase 1: 基础框架搭建 (2天)

2.1 项目初始化

创建 uni-app 项目 (Vue3 + JavaScript)
配置路径别名 (@/)
创建目录结构

2.2 基础配置

配置 pages.json (页面路由 + TabBar)
配置全局样式 (暗色主题变量)
配置环境变量 (开发/生产 API 地址)

2.3 核心模块

封装 request.js (请求拦截、Token管理、错误处理)
封装 storage.js (本地存储工具)
配置 Pinia stores 结构
实现登录流程 (wx.login + 后端认证)

2.4 公共组件

创建 Loading 组件
创建 Skeleton 骨架屏组件
创建 Button 组件 (主按钮/次按钮样式)
创建 Card 组件 (卡片容器)

交付物：可运行的空白项目，登录功能正常

3. Phase 2: 首页核心功能 (3天) ★

⚠️ 首页是用户最常访问的页面，必须保证 < 500ms 首屏渲染

3.1 Day 1: 页面结构 + 数据层

API 封装

api/smoke.js: getDashboard()
api/smoke.js: getNextSmokeTime()
api/profile.js: getProfile()

Store 设计

stores/dashboard.js: 看板数据 + 缓存逻辑
stores/user.js: 用户信息 + 登录状态

页面结构

首页骨架屏
页面布局 (header + timer + cards + buttons)

3.2 Day 2: 核心组件

计时器组件 (TimerRing)

Canvas 绘制进度环
时间格式化 (HH:MM:SS)
requestAnimationFrame 优化
页面可见性处理 (切后台暂停)

统计卡片

今日已抽卡片 (X/目标, 较昨日±N)
烟瘾发作已抵抗卡片

快捷按钮

记录抽烟按钮 → 弹出记录表单
想抽忍住了按钮 → 快速提交

3.3 Day 3: 交互 + 优化

AI 提示卡片

延迟加载 (300ms后)
可关闭 (本地存储关闭状态)
下次建议时间显示

性能优化

并行请求优化
骨架屏过渡动画
首屏性能埋点

新用户引导

检测 profile.exists
跳转引导页逻辑

交付物：完整可用的首页，首屏 < 500ms

4. Phase 3: 记录与历史 (2天)

4.1 Day 1: 记录表单

记录弹窗组件

时间选择 (默认当前时间)
原因标签选择 (压力大/无聊/社交/习惯等)
备注输入
支数选择 (默认1)

API 集成

POST /logs 新增记录
POST /logs/resisted 忍住记录
提交后刷新首页数据

4.2 Day 2: 历史记录页

列表页面

筛选 Tabs (全部/已抽烟/已忍住)
时间线布局
按日期分组
下拉刷新 + 上拉加载

记录卡片

类型图标 (抽烟/忍住)
时间 + 原因标签
间隔时间显示
左滑操作 (编辑/删除)

编辑/删除

编辑弹窗
删除确认
PUT/DELETE /logs/:id

交付物：完整的记录流程，历史记录页可用

5. Phase 4: 统计与图表 (2天)

5.1 Day 1: 统计页基础

时间范围切换

周/月/年 Tabs
日期范围计算
数据请求 (GET /dashboard?start=&end=)

吸烟趋势图

集成 uCharts / ECharts
柱状图组件封装
数据格式转换

每周洞察卡片

AI 分析展示 (异步加载)

5.2 Day 2: 详细指标

健康与储蓄卡片

节省金额计算 + 环形进度
肺部功能恢复 + 环形进度

成就卡片

连续记录天数
已拒绝次数

趋势对比

周同比变化计算
日均吸烟量

交付物：完整的统计页，图表正常显示

6. Phase 5: AI助手与个人中心 (3天)

6.1 Day 1: AI 助手页

阶段进度卡片

阶段计算逻辑
进度条展示
天数倒计时

每日 AI 分析

对话式 UI
GET /ai/advice 集成
会员/广告解锁判断

今日目标

任务列表
完成状态切换 (本地存储)

6.2 Day 2: 个人中心页

用户信息

头像 + 昵称展示
目标戒烟日期
连续天数

设置项

目标设定入口
AI 计划调整入口
通知设置
会员解锁

基础设置

作息时间设置
每包价格设置

6.3 Day 3: 新用户引导

引导页面

分步表单 (5步)
进度指示器
动画过渡

数据收集

日均吸烟量
烟龄
抽烟/戒烟动机
作息时间

提交流程

PUT /profile 提交
完成后跳转首页

交付物：AI助手页、个人中心页、引导流程完整

7. Phase 6: 优化与测试 (2天)

7.1 Day 1: 性能优化

首页优化

首屏时间 < 500ms 验证
图片懒加载
组件按需加载

缓存优化

请求缓存策略检查
本地存储清理策略

包体积

依赖分析
无用代码移除
分包加载配置

7.2 Day 2: 测试与修复

功能测试

全流程测试 (新用户 → 日常使用)
边界情况测试
网络异常测试

UI 适配

不同机型测试
安全区域适配

Bug 修复

测试问题修复
体验优化

交付物：可发布的小程序版本

8. 开发优先级

按重要性和依赖关系排序：

P0 (必须完成):
├── 登录认证
├── 首页看板 (计时器 + 今日统计)
├── 记录抽烟/忍住
├── 历史记录查看
└── 新用户引导

P1 (核心功能):
├── 统计图表 (周视图)
├── 下次建议时间
├── 个人设置
└── 基础 AI 建议

P2 (增强功能):
├── 月/年统计
├── AI 时间节点
├── 会员/广告解锁
└── 通知提醒

P3 (未来迭代):
├── 成就系统
├── 社交分享
└── 数据导出

9. 技术风险与应对

风险	影响	应对措施
首页加载慢	用户体验差	骨架屏 + 并行请求 + 缓存
图表库体积大	包体积超标	按需引入 + 分包
AI 接口慢	等待时间长	异步加载 + Loading状态
网络不稳定	数据丢失	离线缓存 + 重试机制
微信审核不通过	延期上线	提前了解审核规范

10. 验收标准

首页

首屏渲染 < 500ms
计时器实时更新
记录操作 < 3步完成

记录

支持快速记录
支持编辑/删除
数据实时同步

统计

图表正常显示
数据计算准确
切换流畅

整体

无明显卡顿
无崩溃闪退
视觉符合设计稿

6.9 KiB Raw Blame History Unescape Escape