博客前端视觉重构和宿舍电量功能上线笔记

叽里咕噜说啥呢，重写了前端，修复了bug，上线了电量新功能，欧耶~

以前的博客挺扎眼，太花哨了，有点浮夸，所以我想重构一下前端视觉效果，正好最近订阅了ChatGPT Pro 20x，正好用它 vibe 一下前端和代码

这几天一直在改这个博客。改到后面，前端已经改的差不多了，但是点进去加载数据时间长、手机上图标不够清楚，以及一个按钮到底有没有做完它该做的事，优化这些用了很多时间

最开始只是觉得网站太像一个静态展示页。文章、近况、作品都放上去了，但真用起来，有些地方还是别扭。比如点开一条近况，下面迎接我的居然是大块的「KEEP IN TOUCH」。

于是从这些小地方开始，前端和宿舍电量页都重新收拾了一遍。

近况删除了订阅功能

长文章和随手记两句话，阅读方式本来就不一样。

这次给近况接上了评论，把详情页里的邮件订阅区去掉了。文章里的订阅区继续保留，想看完长文再订阅的人，仍然可以在那里操作。

把首页文章、近况和作品的入口理了理。写一篇文章、发一条短动态，都从后台保存，不需要再把内容写进前端代码里重新打包。

每次在部署都会看到提示大包警告。后台编辑器、图表和一些并不是一进首页就要用的东西，跟着页面一起加载，多少有点浪费。

现在改成后台页面按路由加载，Markdown 编辑器、电量图表这些比较重的部分进行拆分。提高了首页数据的加载速度😄

按构建结果算，入口及其静态依赖的 JavaScript 从最初大约 599 KB 降到了约 230 KB，gzip 后约 75 KB。

另一个更直观：数据还没加载成功时，页面有默认内容，隔了几秒刷新成我后台设置的内容，体验非常不好，很割裂，因此我去掉了默认内容，而是只做了一个加载页面，用来同步这个时间差

电量页在电脑上看着还行，换到手机上，问题就很明显了。

总余量占一大块，几项数字之间隔得很远。再往下，「余额趋势 / 日用电」和「7 天 / 30 天」两组按钮摞着放，有的选项框还空出一大截。翻到图表之前，先划了不少没什么内容的地方。

手机端重新调整了字号、间距和信息排列。总余量是所有数据的重点，今日用电、自购剩余、补贴剩余和预计可用天数放得更紧凑，桌面端保留原来的布局。

7 天和 30 天的图表也不再硬挤进一块窄屏里，手机上可以横向滑动。比起把整个月的数据缩成一团，我更愿意多划一下，至少日期和走势能看清。

我最想从这个页面里知道的就是：现在还剩多少电，最近用得快不快，大概什么时候该留意一下余额。

页面把总余量、自购电量、补贴电量和今日用电分开显示，也标出更新时间。余额趋势和每天用了多少电是两张不同的图。

这里有个容易弄错的地方：中午查到的「今日用电」，只到中午，不能直接当作一整天的用量。两次余额相减也不一定等于耗电，中间可能充过电，或者补贴余额发生过变化。

所以完整日用电优先采用学校按日期返回的明细。逻辑是只根据零点的数据进行数据分析

「预计可用」也只是一个参考。现在按当天零点的总余量，除以前 7 个已结束自然日的有效日用电平均值计算，至少要有 3 天有效数据。当天早中晚查询时沿用这个基准，避免过小的数字对平均造成干扰

电量功能还加了多宿舍支持。朋友注册网站账号之后，可以给账号绑定对应宿舍；登录后只看到自己有权限看的数据。

同一个宿舍有多位成员时，共用采集结果。历史、运行状态和通知按宿舍分开。

想用RSS阅读器的人，可以生成自己对应宿舍的私密 RSS 链接。它带有访问凭证，不适合当普通网页地址随手转发。移除成员或停用账号后，相应访问也会失效。邮件提醒则需要单独配置收件人和开关。

这次还在部署上绕了不少路。服务器直接从 GitHub 拉代码，有时一直等不到响应（懂得都懂🤫）；校验文件在 Windows 上多了个换行符差异，也能卡住下一步。

现在改成电脑打好离线包，上传到服务器再部署。脚本在后台跑，保留日志和备份，复制完还要核对实际落盘的文件。部署结束后，再从公网检查首页版本、入口资源和 API 返回是否正常。

至少不用再盯着一个没有输出的终端，猜它到底是在工作，还是已经卡住了。

这一轮先改到这里。接下来继续用手机看、从后台发文章、每天查查电量。在使用中记录网站存在的问题，再进行修改（主要是一直这么改token也顶不住）

博客里也该多几篇真正的文章了