最近把博客从内到外翻新了一遍，不水一篇文章说不过去。主要改了三个地方：重新封装了hook逻辑;增加了部分单元测试和e2e测试;从sass迁移到了tailwindcss。

封装hook

众所周知vue一直强调的是简单，不搞react那一套，但自从vue3组合式api出现后，也渐渐变成了react的形状。三年前写这个博客的时候，组合式逻辑用得比较烂，可读性和健壮性简直就是一坨。大概是这样，一大堆逻辑揉在一起 ：

export const useManageDetail = async () => {
    const encryptor = useEncryptor();
    const id = useRoute().params.id;
    const list = await fetchList();
    const decryptedList = encryptor.decrypt(list);
    const item = list.find(i => i.id === id);
    const editingItem = ref(deepClone(item));
    const decryptedItem = encryptor.decrypt(item);
    const md = await fetchMarkdown(id);
    const decryptedMd = encryptor.decrypt(md);

    return {
        list,
        decryptedList,
        decryptedItem,
        item,
        editingItem,
        decryptedMd,
    }
}

这此重构主要封装了一些更抽象更通用的逻辑，它们有一个特点：只干一件事，输出一定只和输出有关。我这次主要做了一些简单的封装，具体在：hooks

单测/e2e测试

其实重构的目的就是为了写测试，如果不重构，那么实在无从下手写测试。这次主要给封装的hooks写了单元测试，另外写了部分管理页面的e2e测试。

给hooks写单测

我的心得是：怎么从一段很长的逻辑中封装代码？想想提取出来封装的部分能否被单元测试覆盖。和react hooks的区别是，vue中的hooks会使用响应式的ref来承载数据，调用者可能会修改ref.value，所以要更加小心确保数据流向/操作的正确性。

e2e测试

使用playwright做e2e测试，上手较简单，e2e测试能保障一些基础的逻辑是正常的。

外观重构

博客的整体外观也都翻新了一遍。之前的外观得益于我狗屎一样的css天赋，太不入眼了。现在正好claude 3.7 sonnet出来了，听说写代码贼厉害，于是让它给我写样式，没想到效果出奇的好。本次重构，几乎所有样式都是3.7 sonnet写的。 从sass换成tailwindcss + css-modules后，感觉到代码清净了许多。