凌晨的时候给小窝修复了几个小 Bug，主要发现 RSS 订阅里面的日期写错了参数，时间变成了 1970 年，导致订阅器的结果与预想出现偏差。

由于公司项目的需求，于是今天基本上心思都放在研究 Mobx 了。中文文档我是看到吐血了，才发现中文文档的上次更新在 2 年前。最新的 6 版，只能看英文文档。虽然英文文档的阅读能力我不会太强，但是结合他们提供的 Demo 来，再看看使用的 API，还是能逐渐理解的。

我留意到中文文档里的写法（老版）里采用了一种名为「修饰器」的概念，看了英文文档之后，才得知新版已经不推荐使用了。他们认为偏向原生的写法才是最合适的，这点其实我也很认同，毕竟现在前端的花样真的已经够多了...

再一个就是我的 NextJS 初始环境下，根本就无法解析修饰器。给出的方案大多是是要你在 TypeScript 的环境下，给 tsconfig.json 上加一条名为 experimentalDecorators 的属性，才会正常进行编译。

有关我 Mobx 学习中的具体过程，我应该会额外整理出一篇文章出来发布在博客，敬请期待吧～

上午做表单验证，使用到了一个名为 react-hooks-form 的库，非常好用。可以直接套在 input 里面。同时在 JY 哥的帮助下，总算弄好了 Jenkins 内部测试环境部署的问题。

下午在改「重置密码」页面，发现需要让“密码”和“确认密码”两个字段的内容都要相同。一番阅读之后得知，该库提供了一个名为 validate 的参数，结合 getValues 的 Hooks，就可以进行对比和获取。

<label>
  <input type="password" name="cpassword" placeholder="Confirm Password" ref={register({
    required: true,
    validate: value => value == getValues("password")
  })}/>
  {errors.cpassword && <small className="text-red">Passwords are not the same.</small>}
</label>

晚上吃饱饭，公司为我开了个小会。主要核实了下我的完成进度，以及明确说明了接下来的任务计划。接着呢，在我的主导下，家里也算是开了个小会吧。主要讨论到了我工作上的问题，以及接下来家里即将发生的一些事情。

在写这篇日记之前，冲凉的过程中，我思考了很久。感觉我的 B 站又有了几个做视频的题材，可以以现在我在边学边用的 React 相关技术栈为题，做简单实用的一些小教程。

今天主要完善了公司项目「成为供货商」页面，并和后端同学沟通网站授权接口的设计。该页面采用了多个 FC 组件，分别对应多个填写步骤。这个页面接下来的难题，就是如何收集数据，并且支持表单信息验证了。

对了，这个页面也是我写的第一个真正使用了 TypeScript 的页面，所以做个纪念吧！以此同时，我还微更新了下小窝的日记功能，修了上传图片和 API 处理图片的 Bug。

function BecamePage() {
  const titles: Array<String> = [
    "Business Details",
    "Required Documents",
    "Credit Card Details",
    "Please wait for our review"
  ];
  // ...
}

晚上则是看完了《青春波纹》的最后两集 OVA，是个好的结局。至于 OVA 是啥嘛，其实就可以理解成前篇的追加章节。每次看到喜欢的番，就会感觉自己也代入到了剧情里面。一旦看完，就貌似像是刚认识不久的好朋友，突然依依不舍的和我告别了...

等等，还有一部新出的剧场版还没看呢！岬明乃，我们还会再见！！！宗谷真白、岬明乃、威廉明娜三个角色我觉得都挺不错的，又想要淘手办了！感觉这才是走出动画以外真正能陪我的一种方式吧...

上午处理的第一个问题：在 React + NextJS 下如何选择一个更好用的 CSS 框架/组件库。除了 Antd，我还从大佬那得知了 Polaris 这个 React 组件库，但是他们都有个共同特点，就是 UI 很难定制。

说到可定制 UI 的组件框架，我第一时间想到的是 Tailwind，但是看着官方文档 提取组件 章节，总觉得这样写起来和我直接写 HTML 和 CSS 有啥区别呢？为何不直接使用 CSS 变量或者预编译器解决？最终封装成自己的 UI 组件来使用？

最终，我还是选择了使用基于我的「奇趣框架」自己写，需要快速搞出复杂交互的组件，再用 Antd 解决吧。

下午我使用 NextJS 写第一个需要背景图片的页面，就立马发现了问题，官方文档 的图片插入是基于 HTML 的 img 标签实现的，太智障了，无法直观的设置 CSS 的 background 属性，不然就层次结构混乱。我的第一直觉是使用 require() 引入图片，但是并没有成功，提示读取文件失败。

一番搜索后得知，最简单的办法就是安装 next-images 库，貌似是增加了 Webpack 的相关配置，才支持读取图片的。Stack Overflow 上有类似的问题，传送门、库的 介绍。

晚上回到家，我并没有怎么淦代码，而是选择继续看《青春波纹》。毕竟，这真的是一部既热血、又可爱的一部番。这里面的女孩子真的都好可爱啊...

一边是自己的「晴风」号，另一边是自己老朋友所指挥的「武藏」号。连海上救援队都没有拿下的失控船舰，晴风号还有多少把握？岬明乃很无奈，也很伤心。她担心为了救「武藏」号伤了自己船上的人，也担心「武藏」号继续失控下去，伤了更多的人...

岬明乃：决断，你要我怎么决断。我们一直平安无事，都只是凑巧罢了，根本不是我的功劳。你们都是我亲爱的家人，一想到可能会失去你们...

黑木洋美：她的意思应该是互补不足才算真正的伙伴。宗谷同学，能辅佐舰长的，只能是你了