vue3+ts+electron+sqlite3 模拟消息聊天框(滚动未读消息变已读消息、定位聊天消息位置、消息卡片时间显示以及新消息提示)

概要

消息页面主要是交互逻辑是模拟现有的一些客户端的聊天对话框，本次记录中要实现的主要功能有：

1. 首次进入消息页面定位到第一条未读位置并且已读10条消息，不是首次进入的话就定位到页面滚动的位置
2. 点击右下角未读数量提示框将所有消息已读并滚动到最后一条已读消息位置
3. 鼠标在消息页面的时候滚动，将进入到可视区域的消息已读
4. 消息时间显示逻辑与现有的查到的同理即：
   1）当天的消息，以每5分钟为一个跨度的显示时间
   2）消息超过1天、小于1周，显示星期+收发消息的时间
   3）消息大于1周，显示手机收发时间的日期。
5. 当有新消息的时候，进入消息页面每10条消息要有“以下为消息”的提示在第一条未读消息的上方

实现逻辑

1）首先如果要定位的话，要找到最后一条已读消息或者第一条未读消息在消息列表中，第一次进入的时候要获取到最新的10条未读消息改为已读消息。
2）其次“以下为消息”的提示也要找到最后一条已读消息或者第一条未读消息在消息列表中。顺序为：如果找到的是最后一条已读消息就在最后一条已读消息的后面加上“以下为消息”的提示。如果找到的是第一条未读消息就在第一条未读消息的前面加上“以下为消息”的提示。
3）消息时间显示则需要列表中每一条记录都有一个时间，循环比较两个时间间隔，该时间间隔上个记录的时间是否大于5分钟，大于则显示当前时间，小于等于5分钟的话不显示消息时间。
4）鼠标滚动未读消息变已读消息的话则需要借助观察者模式observer，即创建一个IntersectionObserver，当消息进入到可视区域的