【可能有点用】桌面笔记软件 -catbox

catbox 开发记录

catbox是一个electron开发的桌面软件，可以分享到鱼排。

1731741534625

伴随我摸鱼的开端附带的是一个笔记软件思源，那时候正好大三准备考研（结果备考一半又不想考了），当时就边摸鱼边用笔记软件写电子笔记。

然后工作至今我就慢慢没有这个记录的习惯了，简单想了想，是不是我有分享（zhuang b）的需求的时候才愿意去写 md 记录呢？那我可以做一个简单的，可以一键上传到摸鱼派的桌面软件吧！

其实直接用 web+node 后台也行，因为我很早之前在 nodeStart 里就尝试过了，不过感觉很分散，反正有玩 electron 的打算。这个想法是我遇到✨ 兴趣使然、功能全面的英雄联盟工具集。这个开源项目后衍生的，我当时用了后感觉挺不错的，然后一看我也能做也，遂产生自己写一个桌面软件的想法。

1.环境准备

需要提前准备好 electron 开发和打包环境，这里用的是 electron-forge（一个新的脚手架）。

2.集成 vite+vue

由于是自己的项目，所以就按自己熟悉的开发环境来，这里看的是 electron-forge 给的文档来的，集成 v3 来渲染界面。

3.ipc 通信

和我之前做的 web 项目不同，electron 很方便的地方就是你可以直接在 web 页面里使用 ipc 通信调用 node 的能力，不过就是写起来感觉很繁琐，main 进程里写一次，ipcRenderer 里还有写一次...

4.难点

开发途中也是踩了不少坑。

node 读取文件名字乱码
我这个是笔记软件，读取文件并返回文件树结构是必须的，但是我最开始获取的时候，它返回的英文是正常的，返回的中文是乱码。百度后说是 node 不支持 windows 默认的编码集，但是我问了跳老后，他说 node 本身去读取没问题啊，我自己试了后也是这样。
见鬼那就是 electron 本身的问题咯？百度后发现这是一个常见问题，一般网页用的编码是 utf-8，对应活动页代码编号是 65001，而 electron 默认的活动页代码是 936，需要用 chcp 命令修改过来才行。
图片同步鱼排
有时候上传的 md 文件可能有本地图片，我需要把本地图片链接替换为可直接访问的 url（本地用的只有本机能够访问），但是上传图片到鱼排总出现问题，我开始加了 apikey 后他还是说我跨域，后面我去掉 apikey，然后使用 node 设置 cookie 和请求头，好像可以了，但是会返回 401，最后我把 apikey 和 cookie 值同时设置就可以了。

这个问题反正弄了很久，差点就自己准备图床了。
主题设置
最开始没打算写白天黑夜主题的，没考虑过，后面晚上用的时候，底色是白色太亮眼，受不了了决定还是做一个暗黑主题的。

然后一拍脑袋才发现无论自己还是公司的项目，我都没做过处理主题的工作...第一次的话就简单写写实现吧。

这里用的样式属性写的，给body元素data-mode属性，告知它应该用什么样的样式，然后对应的，需要在不同的组件里适配白天或者黑夜的颜色样式值，然后用一个全局指令去监听datamode属性值（非常麻烦）不过可控性高。

除去这些还有很多小问题，比如操作成功的响应，apikey值请求失败的处理等等。
完成开发后并且打包好catbox给我最大的感受就是，功能实现和产品实现是2个概念。对一个功能，我只需要关心输入和输出，以及逻辑的实现。但对于产品，需要考虑的不仅仅是功能实现本身，你还的考虑延展性，产品的稳定性，还有他是否好用等等。
每当看到自己乱成一团的代码，我就感觉我是不是不适合干这行？

5.后续

目前这版就是第三版了（对，没错之前2版更差），勉强算是能用的，核心功能md编辑与上传都没啥大问题，但它仍然算是一个半成品，因为还有很多能加上的功能我还没有做，比如不仅仅同步鱼排，还有很多平台可以同步（问题就是没想鱼排一样公布公共api文档），接入语言输入，任务提示等等。
从9月27日开始，这个项目已经持续近2个月，我想先放一放，我该看看更多的书籍来扩充自己了（刚好也能测试这个东西还有哪些问题）。
后续完善再开源出来，我现在得做做博客装修的活儿了，会和catbox联动，catbox上写的md直接同步给博客然后更新。

catbox超过20M，鱼排好像无法上传了，我看能不能先提个release出来...