Jim —— 对 Tim 的拙劣模仿

首先是本家效果图

Roadmap

基础功能（静态）

1. 顶栏-底栏三按钮布局
   • Tailwind CSS
   • Vue component is 实现 tab 的切换
   • xicons
2. 对话、联系人、我的
3. 对话 ListItem 组件
4. 基础 state
   • vuex？（大概还是有必要吧）
   • 对话列表
     • 好友对象
       • 昵称
       • 头像
     • 消息列表
       • 最新消息
       • 所有消息（lazy）
   • 好友列表
     • 好友对象
     • 分组
   • 个人信息

基础功能（交互）

1. tab 切换的 transitions

   • vue <transition>

2. 聊天页面静态功能

   • message 组件
   • 头像
     • 内容
       • 文本
       • 图片
       • 混合
   • message 对象
     • 内容 Array
       • 类型
         • 图片
         • 文本
       • 内容（文本/Url）
     • 时间
     • 发送人
     • 接收人
   • 发送框
   • 发送图片？
   • 发送消息 transitions

3. 联系人分组+排序

4. 消息显示排序

5. 消息置顶

   • 长按选项
     • 置顶/取消置顶
     • 删除（从消息列表中？还是只是隐藏？完全仿制的话就是隐藏 ）

6. 自动换行（？）

后端交互（基础）

1. 用户模型

   • id
   • nickname
   • avatar
   • contacts

2. 消息模型

   • from
   • to
   • content
     • raw json
   • timestamp

3. 基础路由

   • 用户列表
   • 获取联系人
   • 获取所有消息

4. ws入口

   • tx加入shared state
   • rx.recv消息，加入数据库，推送至对应tx
   • 断开时移除tx

5. 前端增添逻辑

   • 启动时获取联系人，获取消息，建立ws连接，加入store
   • SEND_MESSAGE action
   • ws.onMessage commit ADD_MESSAGE

日志

第一天

1. 项目基础结构，确认用vue3+ts+stylus；
2. 底栏三按钮（静态）；
3. 摸了（浪费太多时间在路上）；

第二天

1. 基础的状态管理，包括对话列表和联系人列表的维护；
2. 首页显示对话列表list；
3. 摸；

第三天

1. 联系人列表；
2. 关于页面；
3. 重做了背景，更像原版了（一个比较早的版本）；
4. 实验了一下页面切换的背景，效果并不太好……；
5. 整理整体结构（ 虽然还是很乱 ）；
6. 添加ripple效果；

第四天

1. 修好了页面切换动画，还算能用；
2. 聊天界面，虽然顶栏背景有bug；
3. 发送信息（无后端无动画）；

第五天

1. 从外地回来了，大概能专心搞搞了（不过也快没时间了……作业还没写）；
2. 发送消息交互+迫真动画；
3. 主页消息列表横向滑动；
4. 置顶消息+删除消息；
5. 消息列表按照时间排序；
6. 初始化后端框架；
7. 修复一些动画；

第六天

1. 增加新未读消息badge；
2. 修改主页布局；
3. 增加发送消息动画；
4. 试图用rust+warp写后端，发现websocket不太好办；
5. 试图换到deno，发现SQL ORM库基本都用不了（试了denoDB,cotton,small-orm-sqlite），于是只用sqlite库手写sql，搭配abc库做了简单的后端；
6. sqlite数据库建库；