工作时薪观察器 - 微信小程序

一款帮助打工人实时观察工作收入的小程序。

功能特点

• 📊 实时时薪观察 - 根据工作状态实时显示今日收入
• 💰 攒钱观察 - 设置愿望目标，查看攒钱进度
• 📅 工作模式切换 - 支持普通/燃尽/摸鱼三种模式
• ⏰ 倒计时功能 - 显示距离休息、下班、周末的时间
• 📈 数据统计 - 工作状态统计，查看各模式的工作时长和收入

页面说明

1. 首页 (home)

• 动态背景：工作状态为渐变紫色，休息状态为清新渐变
• 实时金额显示
• 工作进度条
• 模式切换按钮（工作状态下）
• 倒计时卡片（工作状态下）
• 下一时段提示（休息状态下）

2. 攒钱观察 (savings)

• 总攒钱进度卡片
• 愿望列表（支持进行中、等待中、已完成状态）
• 进度条展示
• 新建愿望按钮

3. 愿望详情 (wish-detail)

• 圆形进度展示
• 统计信息（已攒天数、预计完成、日均速度）
• 资金来源记录列表
• 设为进行中/暂停功能

4. 我的 (profile)

• 用户信息展示
• 工作状态统计（环形图）
• 参数设置入口（月薪、工作日、工作时段）
• 其他功能（提醒设置、数据导出、帮助反馈、关于）

5. 引导设置 (setup)

• 3步骤引导流程
• 月薪设置
• 工作日选择（周一至周日）
• 工作时段规划（支持添加多个时段）

开发指南

环境要求

• 微信开发者工具
• Node.js (用于 npm 包管理)

安装步骤

1. 克隆或下载项目到本地

2. 安装依赖

npm install

3. 打开微信开发者工具，导入项目

4. 构建 npm

   • 点击菜单：工具 -> 构建 npm
   • 等待构建完成

5. 预览运行

   • 点击编译按钮
   • 在模拟器中查看效果

技术栈

• 微信小程序原生框架
• TDesign 微信小程序组件库
• JavaScript (ES6+)

项目结构

miniprogram/
├── pages/              # 页面目录
│   ├── home/          # 首页
│   ├── savings/       # 攒钱观察
│   ├── wish-detail/   # 愿望详情
│   ├── profile/       # 我的
│   └── setup/         # 引导设置
├── app.js             # 小程序入口
├── app.json           # 全局配置
└── app.wxss           # 全局样式

使用说明

首次使用

1. 打开小程序，自动进入引导设置页面
2. 按步骤设置月薪、工作日和工作时段
3. 完成设置后自动跳转到首页

日常使用

1. 首页：查看实时收入和工作状态

   • 工作时：可切换工作模式，查看倒计时
   • 休息时：可查看今日已赚和下一时段信息

2. 攒钱观察：

   • 点击愿望卡片查看详情
   • 点击右下角 + 按钮创建新愿望（开发中）

3. 我的：

   • 查看工作统计
   • 修改月薪、工作日、工作时段等设置

数据说明

工作模式

• 普通模式: 正常工作状态
• 燃尽模式: 高强度工作，计时系数更高
• 摸鱼模式: 轻松工作，计时系数较低

收入计算

收入计算基于设置的月薪和工作时长，会根据不同的工作模式应用不同的系数。

注意事项

1. 首次使用必须完成引导设置
2. 月薪设置建议填写税后实际到手金额
3. 工作时段可以添加多个，系统会自动识别休息时间
4. 数据仅保存在本地，不会上传到服务器

开发计划

• 完善数据统计功能
• 添加数据导出功能
• 支持自定义工作模式系数
• 添加数据备份和恢复功能
• 优化动画效果

License

MIT

联系方式

如有问题或建议，欢迎提出 Issue。