1.起因:
自学前端，年后在为找工作发愁，偶然间在b站刷到几个离谱的微信聊天视频，虽然都是段子，但是当时就在想自己能不能做一个这样的聊天记录界面。
2.想法:
因为主学前端，技术栈主要使用vue3和pinia，布局为了锻炼能力，首选纯css布局。
功能设想: ①写段子，必须能切换角色，点击一个按钮切换聊天角色，并有颜色提示当前角色 ②点击头像能切换头像，后台必须储存大量男女头像，让聊天丰富一点。 ③时间显示，聊天气泡展示之前盘点和上一个记录的时间间隔，超过五分钟在气泡前插入当前时间。 ④一键模糊对方姓名和头像，真实还原段子内容。 ⑤做一个接口，输入聊天文档文件，根据角色双方（名字+: 的格式）进行数据分离处理，直接渲染生成聊天记录。
3.痛点及实现:
聊天气泡布局有点难弄，用边框三角和flex布局，左右气泡用flex-direction设置reverse实现，颜色直接浏览器找图片提取颜色，图标自己手机截图裁剪获得。
头像数据获取，刚开始用axios获取百度数据没成功。后来弄烦了，用python直接获取图片地址写到了文件里面，男女头像各150保存到数组中，直接随机数取8张。
文档转聊天记录接口，由于时间原因暂时没做。
4.线上地址:
