分享下自己的 react 作品,Monica - 一个即时备忘录清单应用
简介
Monica 是一个即时备忘录清单应用,其目的在于解决忘记准备某项物品或事物的问题。
项目地址:https://github.com/iheyunfei/monica
应用地址:http://iheyunfei.github.io/monica/
本应用针对的人群有以下特点:
- 有需要准备各种东西的重复任务
- 这些任务可能会重复、大量出现
- 经常发现忘记带某样东西,或者没带某样东西的后果很严重
小计
写这个应用是因为:
- 一个是我经常去健身房,每次去回我都要准备大量的东西,换洗的衣物、洗漱用品和各种补品。倘若忘记某些东西,会对我造成很大困扰,比如,无法洗澡、中途乏力,甚至受伤。
- 另一个,我早上去实验室和晚上回寝室的时候,需要携带各种东西,钥匙、校园卡,还有些小东西,如果忘记了类似钥匙或校园卡这种东西,会打乱我的生活节奏,进而导致一系列混乱。
为了尽量避免以上两个原因,我使用过其他应用,类似Google的Keep和滴答清单。它们的问题在于,其设计目的是一次性的,每次使用后都要手动重新创建相应的任务,所以,为了满足自己的需求,我写了这个应用。
项目特点
- 整体使用immutable.js
- redux-saga管理副作用
- 合理使用Lazy,Subpense,Webpack Prefetch特性 和 动态import 来进行 code splitting
- 除了UI库的组件,其他全是函数组件,没有编写任何类组件
- React Redux 官方推荐的如何与 hooks 共存的实践
Todo
用户
- [x] 云同步
- [ ] 修改密码
- [ ] 找回密码
任务
- [x] 添加任务
- [x] 删除任务
- [x] 编辑界面快捷入口
- [x] 任务类型区分
- [x] 任务重命名
- [ ] 任务排序
编辑任务子项
- [x] 增添任务子项
- [x] 删除任务子项
- [x] 撤销重做功能
- [x] 任务页面快捷编辑按钮
- [ ] 任务子项重命名
- [ ] 任务子项排序
主页
- [x] 最近任务
- [x] 置顶任务
杂项
- [x] 合理的主页(考虑显示常用任务)
- [x] 合理的返回主页入口
- [x] 组件移除时的动画效果
- [x] 为防止误触,主页按钮需双击才能返回主页
使用场景
每天早上出门上班
你可以创建一个 早上上班出门 任务,带有以下任务项:
- 拿钥匙
- 钱包
- 手机
- 眼镜
周期性的去健身房
你可以创建一个 去健身房 任务,记录每次出发需要带的东西:
- 换洗衣物
- 沐浴露
- 洗发露
- 水杯
- 健身卡
- 雨伞
- 耳机
以及,创建一个 离开健身房 任务,防止离开时忘记一些物品。
1 回复
👏不错,很简洁,不过有一点就是,可能web的这个形式不太方便 顺便提一下,我做了一个社区 趣技 希望能加入一起玩耍,或者可以加个微信好友交流一下也可以的,1135794403