Skip to content

Latest commit

 

History

History
142 lines (112 loc) · 3.11 KB

Readme.md

File metadata and controls

142 lines (112 loc) · 3.11 KB

Jim —— 对 Tim 的拙劣模仿

首先是本家效果图

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数据库建库;