Dupfioire

这周看了什么[2]

Tue, 17 Mar 2026 00:00:00 GMT

https://github.com/Majorfi/immich-places

部署了这个，装这个的主要原因是想修复一些照片的拍摄位置，Immich 本身也有大地图，但无法编辑，只能浏览，调整经纬度得在每张照片的小弹窗上编辑。

Immich Places 支持拖动编辑，左侧筛选出没有拍摄位置的图片，拖到地图上就能自动生成经纬度，然后同步到 Immich 上。

另外一提，Immich Places 的 UI 做的很好看，Immich 相较之下太保守了，纯纯的 Material Design。

https://www.therantydev.com/javascript-drms-are-stupid

DRM 是什么？DRM 是一种技术，用于保护数字媒体内容，防止未经授权的复制、分发和修改，DRM 通常用于音乐、视频、软件和其他数字媒体。

这篇文章主要就一个思路，不管你加密手段多高明，到浏览器上播放的时候，用的还得是解密后的数据。

除非用的是浏览器中自带的相关“加密”特性，让解密模块存在于浏览器内部，JS 碰不到，否则像 HotAudio 这种自己开发的毫无意义。

浏览器播放流媒体也是一样的道理，你可以把视频作为流的格式去传输，比如常见的 'm3u8'，但大多浏览器本身的 video 元素还是无法直接支持流媒体，还得用 JS 去下载分片，然后依靠 Media Source Extensions 的相关 API 去组装数据，最后再让浏览器播放。

https://barvian.me/react-exit-animations

其实 exit animation 这块很多组件库都没好好处理，我是感觉这种东西组件库应该是得做好，而不是让开发者自己去处理。

Mantine 的 Modal 提供了 onAnimationEnd 回调，所以要实现可以在动画结束的清空表单，把关闭动作和动画动作分开，但自己处理总是有些麻烦。

就看这个文章提供的代码吧，先说 Suspense 组件，它是 React 自带的，用在异步组件的加载优化上的，功能大概是这样，他子组件“应该”是个 Promise 异步组件，如果子组件处在被挂起状态，那么它就会显示 fallback 中的内容，相反就表示异步组件加载完成，可以正常显示。

但 Suspense 有个特性，如果处在被挂起状态，那么子组件会被隐藏，但他的隐藏是通过 display none 实现的，换句话说，他只是不可见，但 DOM 结构还是存在的，并且还比较特殊，子组件状态依然会更新，但此时 React 不会去更新他的 DOM 结构。

这个正是我们需要的，组件正常更新（不影响应用），DOM 被冻结了。现在只差一个问题，子组件被隐藏起来了，所以这段代码的第二个功能就是想办法找到这个被隐藏的组件，然后将它的样式进行调整，把 display none 给去掉，展现一个快照，即便现在组件状态改变了，表单数据被清空了，在用户看来内容还是没变过。

https://www.canirun.ai/

一个检测电脑能跑哪些本地模型的工具。

解决 Open WebUI 更新后无法启动的问题

Mon, 23 Feb 2026 00:00:00 GMT

在任何危险操作前都请先备份！

sqlalchemy.exc.OperationalError: (sqlite3.OperationalError) no such column: user.scim
[SQL: SELECT count(*) AS count_1
FROM (SELECT user.id AS user_id, user.email AS user_email, user.username AS user_username, user.role AS user_role, user.name AS user_name, user.profile_image_url AS user_profile_image_url, user.profile_banner_image_url AS user_profile_banner_image_url, user.bio AS user_bio, user.gender AS user_gender, user.date_of_birth AS user_date_of_birth, user.timezone AS user_timezone, user.presence_state AS user_presence_state, user.status_emoji AS user_status_emoji, user.status_message AS user_status_message, user.status_expires_at AS user_status_expires_at, user.info AS user_info, user.settings AS user_settings, user.oauth AS user_oauth, user.scim AS user_scim, user.last_active_at AS user_last_active_at, user.updated_at AS user_updated_at, user.created_at AS user_created_at
FROM user) AS anon_1]

手欠了，更新 open-webui，更新出问题了，docker 查询容器日志，发现是数据库无法更新，以上是错误。

简单来说就是新版本给 user 表加了一列 scim，查了下应该是身份验证方面的东西，根据 issue 里好心人说的方法，可以用 python 代码去做数据库迁移，但我试了无效，和同 issue 里面那人的结果一样，Required environment variable not found. Terminating now（其他方法我也试了，都无效）。

所以应该不是迁移上出了问题，估计是权限了，但之前使用也没啥事情，文档里也没提到要创建高权限用户，所以我就不整活了，直接去查看数据库，手动更新吧。

检查数据表后发现，确实没有 scim 列，那么 scim 是什么类型呢？去源码搜 user.scim。

可以看到和 oauth 一样，是 JSON 类型，但我印象中的 sqlite 没有这个类型（可能是新版本），不过问题不大，oauth 能用 scim 也能用！ ALTER TABLE user ADD COLUMN scim JSON; 直接执行 alter，接着重启容器测试。

OK，问题解决

这周看了什么 [1]

Sun, 22 Feb 2026 00:00:00 GMT

https://suhaotian.github.io/broad-infinite-list/?demo=logs

虚拟滚动，我刚工作的时候也做过类似的，无非就是计算项目高度，然后预留出前后的空间，再去计算当前要显示的部分。

但有一点我到现在都无法理解，那就是项目高度不确定的情况，或者说无法接受吧，因为大家在处理这种情况时，会先“猜测”一个高度，然后用上去，等真正的项目渲染后，再固定他的真实高度我能理解这种解法，但这也意味着滚动条的长度不是真实的，用的时候长度一直在变，越滚越多，这很诡异好吧。。。

https://json-render.dev/

算是个好东西，也是我一直在项目中推进的，在 AI 时代就该好好用这种 DSL，灵活可变，教会他们规范，就能直接生成界面，省去很多重复性工作。

但很明显，type 对应的基础组件还是要自己开发的，组件如何保持灵活性，如何保证“能复用的场景多过重新开发的场景”是个问题，我前前公司就深陷这个泥潭，运营的点子比基础组件多，每次做新营销活动都得开发组写一套新的组件，配置比重写更麻烦。

https://frankentui.com/web_react

这个我暂时不理解他的使用场景，但就 TUI 来说，我自己也研究过一些。

一句话，比想象中麻烦，为了“自动在合适的位置显示合适的字符”，要做的处理有很多，你以为你在开发一个字符组件库，但你在开发的实际上是浏览器。

从我学到的部分讲起吧，相关的概念有组件、布局、渲染、事件等。

万物皆组件

能看到的输入框、卡片、列表都是组件，组件有自己的状态，比如 Label 的文本内容、字色，Input 的值等。

有自己的尺寸、位置信息，同时也要能从上级接受配置。

能管理自己的渲染方式，也就是如何将状态绘制到“缓冲区”中。

布局管理

布局也是个组件，但比较特殊，他的职责不是渲染自己，而是计算他子组件的尺寸、位置信息，可以理解成 CSS 中的 display 属性。

所以组件设计上要支持嵌套。

渲染管线

不能直接操作终端，因为一边写入一边显示，会导致闪烁，所以需要缓冲区，将组件的渲染结果写入缓冲区，再一次性显示。

可以理解成 console.log，多次频繁打印和一次打印所有内容的效率是不同的。

这里的缓冲区也有讲究，应该创建两个缓冲区，一个用于当前渲染，另一个用于下一帧渲染，这样在下一帧渲染时，可以立即将当前帧的缓冲区内容显示到终端，而不用等待当前帧渲染完成。

再进一步，可以遍历组件树，判断哪些组件需要更新，哪些组件不需要更新，再差分写入到缓冲区，以提高效率。

做着做着就会发现，这不就是重写了一个 React、Vue 的核心吗？其实也没错，参考 Ink，他就借助了 React 核心的能力，重新实现一个 Renderer。

https://dpaint.app/

一个仿 Photoshop 的图像编辑器，PS 还是很好用很全面的，但为了改一两个地方下一个 PS 属实不值得。

我之前用的是 Photopea。

两者在功能上没啥区别了，前者开源后者闭源，后者靠广告和云存储赚钱，也没啥大碍。

https://adesignl.github.io/Peek/

一个小巧的页面头部“动画”库，我不知道该怎么描述他，点进去看效果就明白了。

本质就是监听 wheel、scroll 事件判断方向，确定头部是要固定还是隐藏，但他容差检查做的不错，一些小幅度滚动不会导致头部变化，用着挺舒服。

告别 Leanote：一次艰难的笔记备份之旅

Thu, 04 Dec 2025 00:00:00 GMT

掐指一算，从大学时代开始使用 Leanote 至今，已经有近十年了，它曾是我学习和记录想法的重要工具。

然而，这款应用已经数年没有更新，官网也透露着一种随时可能停止服务的气息，为了防止数据丢失，我决定将所有笔记备份出来，并彻底离开这个平台。

我本想“和平分手”，利用官方提供的导出功能来解决问题，但在一番寻找后，我发现 Leanote 的网页版根本没有提供任何形式的批量导出功能，看官方博客的说法，这个功能似乎在客户端中，我本想下载的，但查了一下相关的条例，免费账户导出的 PDF 会带有水印，对于数据迁移来说，显然不是一个理想的方案，因为我只想要原始数据，不需要“帮”我打包。

于是我转而查询它的 API 文档，希望能通过写脚本的方式，将笔记完整地导出来，它在 Github 上提供了相关文档（虽然这文档也有快十年没更新了），我花了几分钟，很快写好了一套简单的脚本。然而，在执行到“获取所有笔记本”（getNotebooks）这一步时，程序就卡住了，接口返回的错误信息是“NEED-UPGRADE-ACCOUNT”。

这时我才意识到问题的根源，我这个一直都是免费版的账户，不知何时被动地开始了一段“试用会员”，现在每次登录都会提示我会员已到期。原来，不付费升级，我甚至没有通过 API 读取自己笔记列表的权限，自己的数据，想要用一种高效的方式取出来，竟然需要先付费，何意味？

在研究 API 的过程中，我还发现了另一个不安全的设计，它文档中的登录接口竟然是 GET 请求，这意味着账户和密码会作为查询字符串（query string）直接拼接在 URL 中进行传输，虽然 HTTPS 能够加密请求体，但 URL 本身在传输链路的许多中间节点中，都可能以明文形式被记录下来，将敏感的登录凭证以这种方式暴露，是一个相当基础且严重的安全疏忽。

最终，所有“技术”和“官方”的道路都被堵死了，我只能选择最原始、最耗时的方式：手动备份。我的笔记数量不算特别多，几十篇而已，但一篇篇地打开、复制、粘贴到新的笔记应用中，再处理格式问题，依然耗费了我好几个小时。

完成这次备份后，我便会去注销掉 Leanote 的账户，一段始于大学时代的数字记忆，以这样一种不算愉快的方式画上了句号，再也不见，Leanote。

PS：我查看了其他开发者做的备份工具，发现他们用的和我也是同一套接口，推测免费调用是过去式，付费限制是后更新加入的。

PS2：Web 项目专门避开了这套 API，直接将笔记本列表数据注入到了 HTML 中，后续的内容获取是通过另一套 API 实现的，但我已经没有必要去研究了。

Deno 上手体验：一些好用的地方和需要注意的点

Mon, 27 Oct 2025 00:00:00 GMT

我最近在试用 Deno，就是那个 Node 开发者为 JS 弄的新运行时。

总的来说，Deno 是一个很有意思的运行时，它在很多地方简化了开发流程，但也带来了一些新的概念和需要注意的地方。我会把我遇到的几个关键点列出来，包括一些好用的地方和几个比较“坑”的体验，给大家一个参考，如果以后有项目要用，可以少走点弯路。

1. 内置功能很方便，能大量减少模板代码

这是我上手 Deno 后感觉最舒服的一点，在 Node 里，我习惯了做什么事都先 pnpm install，起码要把基础功能的包给安装上，但 Deno 把很多常用功能直接内置到了全局的 Deno 对象里。

举两个例子：

Web 服务器：想启动一个 HTTP 服务，直接用 Deno.serve 就行了。
```
// main.ts
Deno.serve((_req) => new Response("Hello, World!"));
```
一行代码搞定，不需要安装 Express 或其他框架。
键值对数据库：Deno 内置了一个开箱即用的 KV 数据库 Deno.Kv。对于一些需要轻量级数据持久化的小项目或原型，这个功能非常实用，省去了配置和连接外部数据库的步骤。

2. 生态兼容性：JSR、NPM 和 Node API

Deno 在努力兼容 Node 生态，但这里有几个点需要注意：

Node 内置库不完全兼容：我一开始以为 Deno 能无缝使用 Node 的所有内置库（比如 fs, path），实际上，它只兼容了一部分，使用时需要加上 node: 前缀，比如 import fs from "node:fs"。具体哪些 API 兼容，需要去查官方文档，不能想当然。
JSR 和 NPM 是两回事：JSR 是 Deno 官方的包注册表，而 NPM 是 Node 的。虽然 Deno 支持通过 npm: 前缀直接安装和使用 NPM 包（比如 import express from "npm:express"），但这并不意味着所有包都能正常工作，如果一个 NPM 包依赖了某个 Deno 未兼容的 Node API，运行时还是会报错。

3. 核心设计：强大的安全沙箱（以及它带来的大坑）

Deno 的一个核心理念是“默认安全”，你的代码在没有显式授权的情况下，什么都干不了，比如不能读写文件，不能访问网络，也不能读取环境变量。

与其说它是个运行时，不如说它更像一个沙箱，你需要通过命令行标志来给程序授权（写在 deno.jsonc 中也行）：

--allow-read：允许读取文件
--allow-net：允许访问网络
--allow-write：允许写入文件
...其他的需要查看文档

这个设计理念本身没有问题，能有效控制代码权限，防止潜在的安全风险，问题出在他的默认行为上，让我踩了大坑。

我的程序里有一段很简单的 fetch 网络请求代码，每次运行时，程序跑到 fetch 那里就直接挂起了——没有报错，没有超时，没有任何提示，就是卡住不动了。

我花了很多时间去排查网络、代码逻辑，甚至怀疑是 Deno 的 bug，最后才发现，根本原因是我没有在启动命令里加上 --allow-net 来授予网络权限。

我完全能理解这种安全限制，但我无法接受这种用“静默挂起”来代替“明确报错”的默认行为。如果它能直接抛出一个 PermissionDenied 之类的错误，比起挂起，更能让用户或者开发者意识到，对于新手来说，这种体验非常糟糕。

总结

最后总结一下：

内置 API：对于新项目，先看看 Deno 全局对象里有没有现成的功能，可以省去不少功夫
谨慎对待兼容性：不要默认所有 Node 的东西都能在 Deno 里跑，使用前最好先查一下文档
注意权限问题：如果你的程序（特别是涉及 IO、网络的部分）莫名其妙地挂起或不工作，第一反应应该是去检查标记，而不要先怀疑自己的业务逻辑

关于照片迁移与分类

Mon, 06 Oct 2025 00:00:00 GMT

我这几天将照片从群晖 Photos 迁移到了 Immich 上，最终还是想好好地将图片分个类，便于以后的查找。

首先介绍一下群晖 Photos 的分类方式吧，他没有标签，只有相册，相册是基于真实目录划分的，好处就是没有元数据，方便迁移，目录一存一移就好了，那不好的地方也在于缺失元数据。

他这种基于真实目录的相册，只能进行单一维度的划分，因为照片文件只能存在于一个目录中，当然了，可以复制粘贴到不同目录，但这样设备中就会存在同一张照片的多个备份，这很明显不利于归档。

举个例子，你有一张在初中运动会上的照片，这张照片你可以拆解出以下的属性：

xx 体育场（地点）
运动会（内容）
初中（阶段）
同学（人物）

这几个属性在分类上是不相交的，所以他们很自然地会作为独立的目录，这时候你的照片应该放在哪呢？选一个联系最强的？还是复制 4 份保存？答案是都不好。

可扩展的分类至少应该有标签概念，标签和照片是多对多关系，一个标签可以贴在多张照片上，反过来，一张照片也能具有多个标签，用标签来确定照片的属性，这样不影响照片的实际存放位置。

但要做到这一点，软件就必须得有元数据，你可以理解成用一份文档去记录照片和标签之间的关系，Immich 可以做到这一点。

Immich 有相册和标签两种概念，相册是虚拟的，不依赖真实目录，不可以嵌套，标签也是虚拟的，但标签可以嵌套，用标签来表示照片属性，那么相册应该用来干什么呢？我认为相册应该用来表示有始有终的事件或者是一套精选集，是由事件、主题驱动的。

由于标签是可以嵌套的，所以标签上面的分类就比较有讲究了，也因为标签是要应对未来情况的，所以必须在开始前就规划好，在照片多起来后修改就会很麻烦。

这里我是按照几个 W 来进行基础父级标签划分的：

Who，比如家人、朋友
Where，比如学校、公司
What，比如美食、散步

认真拍的照片主要离不开以上三个大类。

这是基础的，但不能覆盖我所有的照片，所以我还做了如下区分：

来源，比如截图、壁纸
设备
状态，比如精选、待修复
动物

这里更多的是额外的属性和无法归类到三 W 中的那些，但动物比较特殊，他同属于 Who 和 What，同时我从猫狗、鸟，到昆虫都会拍，所以我决定将他提出来，单独作为一个大类。

为什么说他好扩展呢？因为最高层级都是一些非常抽象的概念，而往下具体的分类都是子级，如果有新的分类，都能归纳到其中一个大类里。

Cloudflare 令牌申请时的坑

Fri, 03 Oct 2025 00:00:00 GMT

起因

先写一下起因吧，随便给我自己记录一下群晖 SSL 申请的流程。

昨天我给家里的群晖上了 SSL，这里和其他域名申请证书的流程是差不多的，都是在机构注册申请证书，然后替换到要使用的主机上。

Let's encrypt 是免费的证书发行机构，但代价就是每三个月要重新续一次，让我手动续期，那我会当场表演一个失忆，这里肯定会选择自动化方案的，其中最知名的项目就是 acme.sh，他能用命令处理申请、复制、更新的流程。

群晖也一样，群晖有内置证书，你得把新的换进去，并且替代他，才能让群晖默认使用新证书，但问题在于，群晖的证书路径是随机的，根目录一样，都是 /usr/syno/etc/certificate/_archive，但子目录名称不同，你需要 cat DEFAULT 查看内容，确定目录名，这一点光凭 acme.sh 是做不到的。

所以这里我使用的是 syno-acme 这个自动化脚本，虽然用的是 2.8.6 的 acme.sh，但问题不大，他项目中的 python 代码就是用来查询“随机目录名”的，将 acme.sh 申请到的证书拿去指定路径替换默认证书。

问题

我域名挂靠在 Cloudflare 上，所以脚本配置上用的就是 export DNS=dns_cf，如果你也用这个，剩余的参数可以到文档处查询。

如果你恰好使用的是令牌认证，那么你或许会遇到这样的报错信息：

[Thu Oct  2 17:10:11 CST 2025] Adding txt value: XXX for domain:  _acme-challenge.foo.com
[Thu Oct  2 17:10:13 CST 2025] invalid domain

当你确保所有权限都按文档上的设置了还是报错，那么很大概率是这里填错了：这是默认的表单，运算符可以选择“在”或“不在”，进一步筛选。

他坑就坑在，但凡你选过了其中一个运算符，你都无法将其删除，变成了要么“在”，要么“不在”，黑白名单你必须选一个，所以你这个令牌就“废”了（你就得去确认设备出口时的 IP，并且保证不变）。

正确的做法就是重新创建令牌，然后跳过这一行，什么都不选，什么都别碰，这样创建出来的就不会进行 IP 筛选，表示所有都放行，无黑白名单。

Upload Simulator 的布局计算器

Mon, 08 Sep 2025 00:00:00 GMT

这段时间沉迷 upload simulator 2，在移动端上，这是这几年少有的无内购的挂机游戏，是的，挂机游戏现在也搞起了内购，很诡异，在一个本来就需要堆叠时间，甚至核心玩法就是付出时间的游戏里，可以用金钱去加速，用自己的金钱买自己的时间，换来的是更快的数字滚动。

这个游戏我之前在安卓上玩了一下，安卓平台上的版本是免费的，所以他也是一个内购挂机游戏，我当时的感受是，我靠这什么挂机游戏，为什么点击要素那么多，还有能量限制不能自动点，玩个毛！

这几天恰巧在 iOS 上看到了，标了价格，大概 30 块，有了买断机制，那么就不会出现内购了，变成了“纯血”挂机游戏。

经过深入摸索，游戏刚开始确实更像一个点击类挂机游戏，但点击不是必要的，当玩到一定程度，大概重生两三回吧，就能解锁插件，插件里面有个挂机专用的，叫催化剂，会把系统效率提升 N 倍，但副作用是让能量归零，无法获得点击收益，这就是挂机专用的原因，你不能操作了，但换来的是极高的挂机效率。

要搓出这个插件不简单，需要不少零件，好在零件也是可以挂机获得的，又或者是你 RP 非常好，从挂机宝箱里直接抽到了这个芯片。我就是这样，抽了三次就出了，接着这游戏的点击玩法就被我遗忘了，再也没有开启过。

之后还会解锁一个功能，工厂，有多种发电设施，每个提供的倍率、温度都是不一样的，你需要解锁空间去放置他们，组合出最大化的倍率，因为他们占的空间不一致，所以不要看一些设施倍率很高，但考虑到空间占用多，使用后效果还不一定有低级的好。

那么如何组合出最优解，这就是个算法问题了，所以我让 AI 出了一个计算器：

<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="GgpeOdL" data-pen-title="power calc" data-user="erioifpud" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/erioifpud/pen/GgpeOdL"> power calc</a> by Erioifpud (<a href="https://codepen.io/erioifpud">@erioifpud</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://public.codepenassets.com/embed/index.js"></script>

关于 UWP 和系统代理

Tue, 15 Jul 2025 00:00:00 GMT

为什么不能用

UWP 应用无法走系统代理实际上是个历史传承问题，在 Win8 的时候微软加入了一个机制叫网络隔离（network isolation），问就是为了安全，这个机制让应用非但不能走系统代理，还不能获取 localhost 上的服务。

所以偶尔会看到群友说，诶？我用了“相关软件”，怎么我的 Edge 还是不能访问一些网站啊？那是因为 Edge 也是 UWP 应用，也得遵守这项机制。

解决方案

有两个解决办法，第一个很简单，在你设备之上的网关那启用“相关软件”，这样你设备上不需要变动，发出的数据包自然会走到他该走的地方。

第二个稍微麻烦一点，先 Win + R 打开 regedit 注册表编辑器，然后进入 HKEY_CURRENT_USER\Software\Classes\Local Settings\Software\Microsoft\Windows\CurrentVersion\AppContainer\Mappings 项，一项一项翻。

找到 Edge（或者其他要“修复”的 UWP 应用），把“目录名称”拷贝下来，如：S-1-15-2-1310292540-1029022339-4008023048-2190398717-53961996-4257829345-603366646。

然后用管理员权限打开 CMD，输入：

CheckNetIsolation.exe loopbackexempt -a -p=<拷贝的内容>

给指定的应用加入豁免。

额外方案

那么方法 2 那么麻烦，有没有一键的方式解决呢？那铁是有的，下一个 Windows-Loopback-Exemption-Manager 类似的工具，打开，把需要“修复”的应用打上勾就完事了。

参考资料

微软社区

修复 AirPods 连接 Windows 后的杂音问题

Mon, 16 Jun 2025 00:00:00 GMT

前情提要

状况就如标题描述，AirPods 通过蓝牙连接 Windows 后，播放一段时间音频就会出现杂音问题，这和 Windows 有关，但也不是每次都能复现，每次遇到都只能重新连接蓝牙去解决。

解决问题

我不知道这个问题的原因，但是有一个解决办法，先右键右下角的“喇叭”图标，进入“声音”设置：

在这里面找到出问题的设备，双击打开“属性”并选择“增强 Enhancements”：

将“Disable all enhancements”反选，注意是反选，不是保持到指定的状态。

因为这里不同设备设置都不一样，有的是勾选了出现杂音，有的相反，所以只能反选了，但不管怎样调整之后杂音问题都能解决，很神秘。

记一场酣畅淋漓的前端解密

Fri, 13 Jun 2025 00:00:00 GMT

前情提要

有点标题党了，不过问题不大，这几天有个著名的漫画网站终于不堪其忧，大改了自己的前端页面，名字不好说，怕被爬虫搜到，反正 6 月 13 号这几天吧，如果你漫画阅读器用不了了，章节数显示不出来了，那么我们的漫画源就是一样的。

他新的反爬手段是用接口获取章节数，这一改动主要为了阻止的漫画阅读器的爬虫，一些比较简单的阅读器，他就只会加载静态页面，用 selector 去查找元素显示，他无法处理接口请求（至少在规则上无法描述）。

过程

我一开始没注意，就 F12 在那试，发现所有的 selector 写法都没效果，我还在想是不是阅读器用的移动端 UA 访问，后来突然意识到是接口。

他接口是这样的：

results 很明显已经加密了，好在是前端，可以在页面中捣鼓，反正一定包含了所需的密钥。

第一步先猜测，要敢于去猜，然后再找证据尝试推翻猜测，推不翻就没问题。

我猜他们程序员比较懒狗，变量清理不会太干净，可能把一些信息保存在了全局变量 window 上，所以我用以下代码检查：

(function getExtraVars () {
  const keys = []
  const iframe = document.createElement('iframe')
  iframe.onload = () => {
    const iframeKeys = Object.keys(iframe.contentWindow)
    Object.keys(window).forEach(key => {
      if (!iframeKeys.includes(key)) {
        keys.push(key)
      }
    })
    document.body.removeChild(iframe)
    console.log(keys)
  }
  iframe.src = 'about:blank'
  document.body.appendChild(iframe)
})()

列出了大概 28 个变量：

其中有插件注入的，这个不用管，只找“可疑”的，如果分不清可以打印出他们的值：

temp0.map(k => window[k])

这里可疑的有一个 key，一个 Base64，于是我猜测密文是 Base64 加密的，但解密出来是乱码，所以这一步不太对。

那么就应该从 key 开始，找到 key 对应的键，叫 dio，打开调试器，在里面搜索 dio 这个变量：

结果有两个，但这个是函数，所以从这里入手。

从上方可以看出，这部分应该是对接口结果进行处理，上方先判断响应是否成功，成功就执行 function (_0x55a4d4)，所以我估计这里的参数 _0x55a4d4 就是响应结果中的密文 results。

接着往下走，下面都是混淆后的变量，这里我没什么办法，只能对着 window 内已暴露出的变量去对照，这里的 _0x4e8a 是一个函数，暴露在了 window 上，所以可以尝试去执行，然后慢慢还原代码全貌。（为什么不用断点，因为这是浏览器解析出来的临时代码，不是源码，所以无法打断点调试）

先从 dio 所在行入手：

0x3def88 = _0x2e033c[_0x4e8a('0x59')][_0x4e8a('0x8')][_0x4e8a('0x5c')](dio)

这里还原之后是：

0x3def88 = _0x2e033c['enc']['Utf8']['parse'](dio)

这段 API 很眼熟，推测是 CryptoJS 中的，于是我查了一下，应该没错：

所以 _0x2e033c 的值是 Crypto，顺带解析其他 _0x4e8a 的函数、美化变量名，结果变成了：

function (encryptedText) {
	var Crypto = /* Crypto 对象*/,
	
	headPart = encryptedText['substring'](0, 16),
	bodyPart = encryptedText['substring'](16, encryptedText['length']),
	
	dioResult = Crypto['enc']['Utf8']['parse'](dio),
	headResult = Crypto['enc']['Utf8']['parse'](headPart),
	
	_0x2fa5a9 = function (bodyPartStr) {
		var hexResult = Crypto['enc']['Hex']['parse'](bodyPartStr),
		base64Result = Crypto['enc']['Base64']['stringify'](hexResult);
		return Crypto['AES']['decrypt'](
			base64Result,
			dioResult,
			{
				'iv': headResult,
				'mode': Crypto['mode']['CBC'],
				'padding': Crypto['pad']['Pkcs7']
			}
		) ['toString'](Crypto['enc']['Utf8']) ['toString']()
	}(bodyPart)
	
	0x14dbee = JSON[_0x4e8a('0x5c')](_0x2fa5a9),
	// ...省略
}

到了这一步，已经可以确定 _0x2fa5a9 就是要找的解密函数了，很明显用到的加密就是 AES，只不过 AES 需要的参数都是由 results 的一些部分计算来的：

头部用于计算出 iv
身体包含了章节信息

key 由外部传入，就是挂在 window 上那个，知道了解密流程，就可以对 results 进行解析了，丢一张图吧：

总结

感觉这次运气成分比较多，正好遇上懒狗程序员把东西挂在 window 上，让我能从 window 入手，要不然得认真看源码了。

调试器中的 SourceXXXX 从内容上看是页面运行时的代码/变量，关键是运行时，所以打不了断点，或者说打了会重置，这点比较麻烦，不知道正确的调试方式是什么。

解决 Tabler 升级导致分块过多的 Bug

Wed, 21 May 2025 00:00:00 GMT

前两天对项目的依赖做了一次升级，已经两年没有更过了，这次涉及的依赖是 mantine 和 tabler，但升级之后出现了一个神秘问题，本文用于记录现象、排查过程与解决方案。

严格来说，这是 tabler 和 vite 的问题。

问题现象

开发环境初始化加载 6000+ chunks
本地服务冷启动耗时增加约30秒
生产构建不受影响

排查过程

先观察异常请求的特征

通过 Network 面板发现大量 <5kb 的 chunk 请求，点开响应可以看到包含 @tabler 关键字。

从依赖上溯源

在 @tabler/icons-react@3.19 的源码中发现他是通过动态导入的方式加载所有图标的：

var dynamicImports = {
  "a-b-2": () => import('./icons/IconAB2.mjs'),
  // ...
}

export { dynamicImports as default };

import() 属于动态导入，对于每一个导入的内容，vite 都会创建出一个独立的 chunk，到这里还不能说完全有问题，关键在于他使用 dynamicImports 的地方：

import * as dynamicImports from './dynamic-imports.mjs';

export { dynamicImports };

在 tabler 这个依赖的入口文件 tabler-icons-react.mjs 中，他将 dynamicImports 给直接导入导出了，就意味着你如果导入了 @tabler/icons，在开发环境下，vite 分析依赖的时就会把相关的的模块全都加载进来。

根据 issue 的记录，这个写法是为了支持动态加载图标而加入的，就是 <Icon name={iconName} /> 这种场景，但 pr 提供者似乎完全没有考虑到使用 vite 构建工具的情况。

解决方案

我这里想到、收集到的总共三种：

版本回退

回退到 3.17 版本，这样可能会丢失一些新版本加入的图标

代码修补

通过 patch-package 修改入口文件，把那两行注释掉，失去动态导入的特性。

别名

// vite.config.js
export default {
  resolve: {
    alias: {
      '@tabler/icons-react': 'node_modules/@tabler/icons-react/dist/esm/icons/index.mjs'
    }
  }
}

跳过依赖的指定入口，直接使用 esm 构建好的静态模块，但这种也要注意一个问题，有些静态文件的名称和导出时的名字不一样，比如 IconBoxSeam 是找不到对应图标的，因为图标文件名是 Package。

解决耳机在进入游戏后音质降低的问题

Thu, 08 May 2025 00:00:00 GMT

曾经有个问题困扰了我很久，在戴着一些耳机进入游戏后，耳机声音会变小，音质会降低，会出现这种问题的往往是无线耳机，而且这种耳机都有带有麦克风。

原因在无线耳机走的是蓝牙通信，但蓝牙因为技术原因，没法支持音频输入（讲话）和立体声同时运作，所以在游戏拉起麦克风之后，耳机会选择降低音质，支持音频输入和更差一点的音频输出。

我之前的解决办法有两种：

在游戏设置里把语音聊天关了，让游戏不会再尝试去调用系统的麦克风功能，自己闭麦听歌一打九
插上一个外置麦克风，将他设置为默认音频输入，这样耳机就不会被迫降级

如果你不是一个喜欢开麦的玩家，方法一就能用于绝大多数游戏，为什么说是绝大部分呢？因为还有一些游戏他不守规矩，比如 HellDivers 2，他不管你怎么设置，启动的时候就默认会调用系统麦克风，即便你压根就没开“语音聊天”，他也会这么做。

相当于“不管玩家要不要用到，我先请求了权限，玩家不需要，那我不用就是了”，在这种情况下方法一就失效了，但方法二你得有一个外置麦，也不是很方便。

最近我就找到了一个新方法，只在系统层面进行设置，也不需要购入新外设：

打开控制面板
选择“查看设备和打印机”
找到你的蓝牙设备，此时应该连接上你的设备，要不然没有后续设置
右键，选择“属性”，然后切换到“服务”标签页
将“免提电话服务”取消勾选，之后点击“确定”
到这里最后重启一下蓝牙功能，保证修改生效

接下来进入游戏就不用管他是否会调用麦克风了，调或者不调，都不会关系到你的蓝牙耳机。

关于图片搜索，我想说的

Mon, 28 Apr 2025 00:00:00 GMT

找图的方法与区别

目前我所了解的搜图，无非两种办法：

人找
机找

人找很好理解，有认识这张图的人，看到了求助者发的图片，认了出来，找到了。在人足够多的情况下，这种方法是最好的，而且找起来很快，认识的人一眼就能看出来，但关键就是这个前提 - “人足够多”，没有前提就没法往下进行。

机找包括了各种工具和搜索引擎的查找，不管你是用什么，都是在庞大图片数据库的加持下实现的，什么强力的搜图算法都得要更强大的数据库，因为算法只是用来比较图片是否相似的，拿什么比较？足够多的图片啊！

所以对于不在数据库内的图片，搜索工具也没什么办法，毕竟工具又不可能给你临摹一张（或许未来能用 AI 实现）。

图片数据库从哪来

那么图片数据库是怎么来的呢？也是存在几种方式，第一种就是“我”自己就是做图片相关产业的，比如 Pixiv，他自己是一个图片源头，保存了很多图片。

第二种是搜索引擎这类的，他们是通过从一个网站的链接跳到另一个网站的方式（就像一张蜘蛛网）去收录网站，除了保存文字，还保存相关的图片，数据库就是从这种常年累月的收集中做出来的。

所以你能看出两种方法的区别了吗？方法一的数据是最全的，因为他本身就是一个图片站点，大家都用它发布图片。

而方法二是一个收集者，图 A 图 B 的页面有关联，那么他能收集到，如果图 C 页面“孤立无援”，他是收集不到的，所以搜索引擎等工具他能找到的图片有限。

要注意，每一个搜索引擎收录的网站都不一样，所以他们的数据库也不一样，甲没有的图，可能乙那有。

关于动图

对于动图，目前没有什么好的搜索方法，都是将动图转换为静态图进行的，因为对于算法来说，搜索动图等同于搜索很多张静态图，成本一下就拉高了。

所以动图、视频还是需要截取其中的一些画面去搜索，需要反复尝试，而且成功率没有静态图高，之前也说了，搜图是通过图片比对实现的，你截图出来的那一秒，可能别人没有截到过，或者截到了没有发上网，进不了数据库，自然就搜索不到。

选择图片的讲究

基于以上几点，搜图提供的图片是有讲究的：

算法比较图片相似度搜图，所以求助者提供的图片需要尽量完整、保持原样，越完整找到的概率越大
不要用“喧宾夺主”的图案遮挡，这会影响相似度比较
动图、视频需要多次截图尝试
可以换着搜索工具进行，尝试多种数据库

一些心得

搜图不是一蹴而就的，原图搜索不到的情况很常见，这时候就需要你有好的眼力和推理水平，通过搜索结果判断和原图是否有关系（比如背景装饰、画风、衣物等），有什么关系，从而推导出来源。

关于韩文输入的原理

Mon, 28 Apr 2025 00:00:00 GMT

因为冒险岛的更新改动总是从韩服开始进行，所以我们不得不盯着韩服的动态，一些图像识别不出来的文字我们会尝试打出来，再拿去翻译。

在这个过程中，我用的都是在线的韩语输入法，在使用的时候我注意到，韩语文字都是“拼”出来的，比如“셩”，是由“ㅅ”、“ㅕ”和“ㅇ”这三个部分组成的。

经过查阅发现，韩文还真是拼出来的，逻辑相当简单，韩文把三个部分分别命名为“初声”（19 个）、“中声”（21 个）和“终声”（28 个）。

所以理论上可以拼出 19 * 21 * 28 = 11172 个字，注意是理论上，因为实际在输入法中打不出那么多，毕竟键盘上的键位也有限。

虽然打不出来，但 Unicode 中是包含了所有的韩文文字的，从 U+AC00 开始，往下数 11171 个，他们的排列方式是这样的：

初1中1终1、初1中1终2...初1中1终28、初1中2终1......初19中21终28

对于开发者，看到这种排列其实就心里有数了，这就是三维数组的遍历，把三个部分分别看做 x、y、z 的话，那么知道 xyz，计算一个文字 Unicode 的方法就是：

const unicode = 0xAC00 + (x * 21 + y) * 28 + z

同理，知道一个文字，计算各部件的组合也是可行的：

function toIndex(char: string) {
	const charCode = char.charCodeAt(0)
	if (isNaN(charCode) || charCode < 0xAC00 || charCode > 0xD7A3) {
		throw new Error('...')
	}
	const code = charCode - 0xAC00
	const z = code % 28;
	const temp = Math.floor(code / 28);
	const y = code % 21;
	const x = Math.floor(code / 21);
	return { x, y, z };
}

关于 vw、vh 在移动端行为不一致的问题

Fri, 25 Apr 2025 00:00:00 GMT

起因与情况

昨天遇到了一个 Bug，有小伙伴反馈页面的应用窗口在手机上看不全，我自己拿 iPhone 16 试了一下，没复现，我就以为是一些杂牌浏览器的问题，以前也见过类似的，比如浏览器下方工具栏弹出的时候会遮挡页面。

在和他进行讨论后，发现他不管什么浏览器都会出现这种问题，包括换一台手机也一样，换的也是安卓，我也和他一起换，但我自己手机上还是没问题，后来我找了一台安卓机过来，复现了。

我发两张对比图：

白色主题的是 iOS 上的浏览器，黑色主题的是安卓上的浏览器，同样的代码，在不同设备上的效果不一样。

复现和分析

Demo 代码如下：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    .container {
      position: absolute;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.3);
    }

    .card {
      position: relative;
      height: 90%;
      width: 80%;
      background: white;
    }

    .footer {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      卡片
    </div>
  </div>
  <div class="footer">123123</div>
</body>
</html>

简述一下最小的复现场景，外层容器设置了position 和 100vw、100vh 的尺寸，内容高度是百分比，也就像相对于容器的。

按理说容器全屏，内容高度百分比，是绝对不会超出 viewport 的大小的，即便是浏览器上下工具栏对 viewport 有挤压，也只是会影响 viewport 的高度。

为了避免工具栏漂浮，覆盖了部分页面，我加了一个 footer 作为 fixed 固定在浏览器窗口下方，可以看到 123123 是没有被遮盖的，也就是说此时浏览器窗口并没有被下方工具栏漂浮遮挡。

所以我这里就觉得是 container 的问题了，后面排除了一下，确定问题出在 vw、vh 单位上，查了一下原因，也和读者分享一下。

vw、vh 单位，确实能表示 viewport 的尺寸，但是问题出在他们是静态的单位，他们在确定了具体的尺寸（px）之后就不会改变了，什么情况下会造成改变呢？比如工具栏，如果出现了工具栏，那么很明显用户能看到的部分变小了，但是 vh 并不会改变，可视区域小了，但尺寸不变，那肯定有一部分不可见了。

这一张来自 StackOverflow 的图就能很好的说明问题，viewport 高度始终是 100vh，但用户能看到的部分不等于 viewport。

还记得开头说的吗，iOS 上无法复现，对的，iOS 的 WebKit 和安卓的 WebView 实现不一样，iOS 上用的是动态 vw、vh，也就是 viewport 的实际尺寸会根据可见区域进行调整，出现工具栏了，那么 100vh 对应的 px 就会减少，用户看到的可视区域就是 viewport。

解决

知道了原因，解决方案就出来了，有几种。

第一是自己维护一个变量作为 vw、vh 对应的像素数，通过 window 的 innerWidth 和 innerHeight 计算，再加上一个 resize 事件重算。

第二是用新单位 dvw 和 dvh，表示动态的 viewport 尺寸，22 年实装的，但肯定有不少用户懒得更新浏览器。

第三是避免这个单位，比如刚刚 Demo，完全可以用百分比来确定容器的尺寸。

关于 Blob url 在火狐和 Chromium 上的行为不一致

Tue, 15 Apr 2025 00:00:00 GMT

概括

对于 revoked 的 blob url，火狐依然能通过元素访问，但 Chromium 不行。

起因

起因是在做一个功能的时候，火狐正常，但 Chromium 全系报错，具体代码是这样的（代码逻辑有误，但阴差阳错发现了这个问题）：

useEffect(() => {
    return () => {
      if (imageA) URL.revokeObjectURL(imageA);
      if (imageB) URL.revokeObjectURL(imageB);
      if (mergedImage) URL.revokeObjectURL(mergedImage);
    };
  }, [imageA, imageB, mergedImage]);

功能是两张图片合并，这段代码本意是个清理函数，但当时脑子不清醒将他们写在了一起，这样就出现了一个逻辑问题：

用户先选择图 A，正常
用户选择了图 B，此时执行上一轮的清理函数，将图 A 的 Blob url 回收了

在图片合并时会使用图 A 和图 B 的 url，此时在 Chromium 系浏览器就报错了，提示 ERR_FILE_NOT_FOUND，但火狐上依然正常。

复现

针对这个问题，我做了一个小 Demo 去测试：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test revoke</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <input type="file" id="file">upload</button>
  <button>revoke</button>
  <button>remove all</button>
  <script>
    const fileInput = document.getElementById('file');

    const createBlobUrl = (file) => {
      const blobUrl = URL.createObjectURL(file);
      console.log(blobUrl);
      return blobUrl;
    };

    const revokeBlobUrl = (blobUrl) => {
      URL.revokeObjectURL(blobUrl);
      console.log('revoke blob url:', blobUrl);
    };

		let blobUrl = null;
    fileInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        blobUrl = createBlobUrl(file);
        const img = document.createElement('img');
        img.src = blobUrl;
        img.style.width = '300px';
        img.style.height = '300px';
        document.body.appendChild(img);
      }
    });

    document.querySelector('button').addEventListener('click', () => {
      revokeBlobUrl(blobUrl);
      const img = document.createElement('img');
      img.src = blobUrl;
      img.style.width = '300px';
      img.style.height = '300px';
      document.body.appendChild(img);

      setTimeout(() => {
        const img2 = document.createElement('img');
        img2.src = blobUrl;
        img2.style.width = '300px';
        img2.style.height = '300px';
        document.body.appendChild(img2);
      }, 5000);
    });

    // remove all img elements
    document.querySelector('button:nth-of-type(2)').addEventListener('click', () => {
      const imgs = document.querySelectorAll('img');
      imgs.forEach(img => {
        img.remove();
      });

      const img = document.createElement('img');
      img.src = blobUrl;
      img.style.width = '300px';
      img.style.height = '300px';
      document.body.appendChild(img);
    });
  </script>
</body>
</html>

使用流程是这样的：

使用 input 元素选择一张图片进行显示
点击 revoke 按钮，查看新的两张图片是否能显示

在火狐上，三张图片都是能够正常显示的，但在 Chromium 系浏览器上，只有第一张图片能正常显示，后面两张图片会显示为 ERR_FILE_NOT_FOUND。

但使用 fetch 访问 blob url 时，两种浏览器都能正常抛出错误，所以我认为是火狐浏览器出现了问题，是内核 Gecko 的。

目前已提交到 Bugzilla，等待回复。

更新

官方已确定是 Bug，已排上修复日程。

实现 Tumbex 的瀑布流效果

Fri, 11 Apr 2025 00:00:00 GMT

Tumbex 的效果（NSFW）：https://www.tumbex.com/morgansq480x480.tumblr/posts

拆解

特性可以总结成以下几点：

项目分成 N 列，加载时会往最短的那列添加项目
支持 responsive，通过 breakpoint 去控制大小屏显示的列数
容器动态高度，会随着项目的尺寸去计算
支持窗口尺寸随时变化
无限加载

通过 F12 检查，可以发现他是通过 transform 实现的，而不是 grid。

简单来说，每个项目都是 absolute 定位的，通过 translate 去计算自己的位置，去确定新的项目应该加到哪一列上。

responsive 是通过媒体查询 @media 和百分比宽度实现的，最小显示一列，最大显示九列，再大的屏幕上项目宽度也只会是 11.11111%，此时对于过宽的项目，其中的图片会横向显示成多张（内容的显示是另一个主题了）。

实现

基于以上的分析和拆解，可以写出一套 waterfall 类：

interface Breakpoint {
  minWidth: number;
  columns: number;
}

class Waterfall {
  private container: HTMLElement;
  private breakpoints: Breakpoint[];
  private gap: number;
  private currentColumns!: number;
  private columnWidth!: number;
  private columnHeights: number[] = [];
  private resizeObserver: ResizeObserver;

  constructor(container: HTMLElement, breakpoints: Breakpoint[] = [], gap: number = 10) {
    this.container = container;
    this.breakpoints = this.normalizeBreakpoints(breakpoints);
    this.gap = gap;
    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
    this.init();
  }

  private normalizeBreakpoints(breakpoints: Breakpoint[]): Breakpoint[] {
    // 默认断点
    const defaultBreakpoints = [
      { minWidth: 0, columns: 1 },
      { minWidth: 768, columns: 2 },
      { minWidth: 1024, columns: 3 }
    ];
    
    return [...defaultBreakpoints, ...breakpoints]
      .sort((a, b) => a.minWidth - b.minWidth)
      .filter((v, i, arr) => 
        arr.findIndex(t => t.minWidth === v.minWidth) === i
      );
  }

  private init(): void {
    this.container.style.position = 'relative';
    this.resizeObserver.observe(this.container);
    this.updateColumns();
    this.calculateLayout();
  }

  // 处理窗口尺寸变化
  private handleResize(entries: ResizeObserverEntry[]): void {
    entries.forEach(entry => {
      if (entry.contentRect.width !== this.container.offsetWidth) {
        this.updateColumns();
        this.calculateLayout();
      }
    });
  }

  // 更新列数
  private updateColumns(): void {
    const containerWidth = this.container.offsetWidth;
    const validBreakpoints = this.breakpoints.filter(bp => bp.minWidth <= containerWidth);
    const newColumns = validBreakpoints.reduce((prev, curr) => 
      curr.minWidth > prev.minWidth ? curr : prev
    ).columns;

    if (newColumns !== this.currentColumns) {
      this.currentColumns = newColumns;
      this.columnHeights = new Array(this.currentColumns).fill(0);
    }
  }
  
  private calculateLayout(): void {
    this.calculateColumnWidth();
    this.reflowAllItems();
  }

  private calculateColumnWidth(): void {
    const containerWidth = this.container.offsetWidth;
    this.columnWidth = (containerWidth - (this.currentColumns - 1) * this.gap) / this.currentColumns;
  }

  public addItem(item: HTMLElement): void {
    item.style.position = 'absolute';
    item.style.width = `${this.columnWidth}px`;

    const images = item.getElementsByTagName('img');
    if (images.length > 0) {
      this.waitForImages(item, images).then(() => this.placeItem(item));
    } else {
      this.placeItem(item);
    }
  }

  // 等待图片加载
  private async waitForImages(item: HTMLElement, images: HTMLCollectionOf<HTMLImageElement>): Promise<void> {
    return new Promise(resolve => {
      let loaded = 0;
      const checkLoad = () => ++loaded === images.length && resolve();

      Array.from(images).forEach(img => {
        if (img.complete) checkLoad();
        else img.addEventListener('load', checkLoad);
      });
    });
  }

  private placeItem(item: HTMLElement): void {
    const minHeight = Math.min(...this.columnHeights);
    const columnIndex = this.columnHeights.indexOf(minHeight);
    const top = minHeight + (minHeight === 0 ? 0 : this.gap);
    const left = columnIndex * (this.columnWidth + this.gap);

    item.style.transform = `translate3d(${left}px, ${top}px, 0)`;
    this.container.appendChild(item);
    
    this.columnHeights[columnIndex] = top + item.offsetHeight;
    this.updateContainerHeight();
  }

  private reflowAllItems(): void {
    this.columnHeights = new Array(this.currentColumns).fill(0);
    const items = Array.from(this.container.children) as HTMLElement[];
    
    items.forEach(item => {
      item.style.width = `${this.columnWidth}px`;
      const itemHeight = item.offsetHeight;
      
      const minHeight = Math.min(...this.columnHeights);
      const columnIndex = this.columnHeights.indexOf(minHeight);
      const top = minHeight + (minHeight === 0 ? 0 : this.gap);
      const left = columnIndex * (this.columnWidth + this.gap);

      item.style.transform = `translate3d(${left}px, ${top}px, 0)`;
      this.columnHeights[columnIndex] = top + itemHeight;
    });
    
    this.updateContainerHeight();
  }

  private updateContainerHeight(): void {
    const maxHeight = Math.max(...this.columnHeights);
    this.container.style.minHeight = `${maxHeight}px`;
  }

  public destroy(): void {
    this.resizeObserver.unobserve(this.container);
  }
}

// 使用示例
const container = document.getElementById('waterfall-container') as HTMLElement;

// 自定义断点配置（可选）
const customBreakpoints = [
  { minWidth: 0, columns: 1 },    // < 600px: 1列
  { minWidth: 600, columns: 2 },  // ≥600px: 2列
  { minWidth: 900, columns: 3 },  // ≥900px: 3列
  { minWidth: 1200, columns: 4 }  // ≥1200px: 4列
];

const waterfall = new Waterfall(container, customBreakpoints, 15);

说一下变量和流程吧。

变量：

container：瀑布流容器
breakpoints：尺寸断点，控制在不同断点下显示多少列
gap：项目之间的间隔
currentColumns：当前显示的列数
columnWidth：单列的宽度
columnHeights：每一列的高度数组
resizeObserver：尺寸变化的观察者实例

流程：

构造函数中初始化变量
先对当前的环境进行 breakpoint 的确认，确定列数，然后进行摆放
之后会注册一个 resizeObserver 去监听容器的变化，因为容器不一定是 body，所以不能简单用 resize 事件，变化时调用 handleResize（实际上就是回到步骤 2）
1. handleResize 会先根据新尺寸找到断点，更新总列数，把 columnHeights 清零，之后通过 reflowAllItems 重新摆放项目
2. 所以这一步在整体中开销比较大，可以稍微加上 debounce 优化，但由于用的是 transform 并不会反复进行 layout，属于是开销大但又没那么大
3. 摆放完成后通过 updateContainerHeight 重新计算容器的总高度
addItem 是对外暴露的添加项目的方法，他会负责找到项目内的 img 并等待图片加载，因为摆放需要得到项目的高度，所以不得不等待一切异步的内容

效果预览

关于图片隐写的研究

Fri, 04 Apr 2025 00:00:00 GMT

前言

起因是前几天在搜图那看到了一张比较“特别”的图：

这张图本身带有一些透明度，在白色/黑色（或者说浅色/深色）背景下能显示两种图案，也就是把两张图以某种方式合并在了一起。

关于这种方式我想了几天，最后得出了一种方案，可能和他的不太一样，但也算能实现。

原理

首先得知道半透明的像素点，放在背景上，最终会渲染成什么颜色：

渲染的颜色 = 点的颜色 * 透明度 + 背景的颜色 * (1 - 透明度)

我的方法主要是将两张图片的像素点间隔排列，因为看上面的“渲染方式”，在一个像素点内，控制显示成两种颜色非常困难，所以干脆分离成两个点，让其中一个在黑/白背景下不可见，以凸显另一个的颜色。

这种做法不会出现明显的间隔，因为“缺失”的点在渲染的时候会被背景色补全。

假设每个格子都是半透明的，在黑色背景下，本来纯黑的部分就会和背景融为一体，白色的部分会叠加成灰色，反之同理，在白色背景下，白色格子不可见，原本的黑色格子的“黑度”会被稀释成灰色。

所以解题的关键就成了“灰度”，在颜色叠加之后，利用灰度来区分像素点的颜色变化。

流程上就变成了，先拿到图片像素点的灰度值，然后根据灰度值算出对应的透明度，在白色背景下让图 A 的每个点变成“不同透明度的黑色”，反之在黑色背景下让图 B 的每个点变成“不同透明度的白色”，再把两张图片间隔叠加实现合并。

至于灰度的计算，我查了一下，在不同的色彩空间下，计算方式不一样，我使用的是这个回答提到的：

Y' = 0.299 R' + 0.587 G' + 0.114 B'

关键代码

if (isImageB) {
	// 处理黑色背景的图像
	const pixelData = blackCtx.getImageData(coordX, coordY, 1, 1).data;
	// 计算灰度值
	const gray = Math.round(pixelData[0] * 0.299 + pixelData[1] * 0.587 + pixelData[2] * 0.114);
	// 设置像素值（黑色，透明度基于灰度值）
	resultData.data[idx] = 0;     // R
	resultData.data[idx+1] = 0;   // G
	resultData.data[idx+2] = 0;   // B
	resultData.data[idx+3] = 255 - gray; // A
} else {
	// 处理白色背景的图像
	const pixelData = whiteCtx.getImageData(coordX, coordY, 1, 1).data;
	// 计算灰度值
	const gray = Math.round(pixelData[0] * 0.299 + pixelData[1] * 0.587 + pixelData[2] * 0.114);
	// 设置像素值（白色，透明度基于灰度值）
	resultData.data[idx] = 255;   // R
	resultData.data[idx+1] = 255; // G
	resultData.data[idx+2] = 255; // B
	resultData.data[idx+3] = gray; // A
}

补充

由于实现方法不太一样，所以我这里的只能生成灰度图，原图还是带了点其他颜色的，不过他的效果不是很好，在白色背景下也会显示出部分图 B。

试玩可以到这里。

解决 Tauri 文件拖放无效问题

Tue, 01 Apr 2025 00:00:00 GMT

点进这篇文章的应该都是在 Tauri 拖拽时踩了坑的，按照惯用的方案，文件拖放一般会通过 onDrag、onDrop 实现，比如：

const handleDrag = (e: React.DragEvent<HTMLDivElement>) => {
	e.preventDefault();
	e.stopPropagation();
	if (e.type === 'dragenter' || e.type === 'dragover') {
		setDragActive(true);
	} else if (e.type === 'dragleave') {
		setDragActive(false);
	}
};

const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
	e.preventDefault();
	e.stopPropagation();
	setDragActive(false);
	if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
		const filesArray = Array.from(e.dataTransfer.files);
		handleFileUpload(filesArray);
	}
};

这种写法没有问题，但在 Tauri 中，默认是无效的，也就是你把文件拖上去根本触发不了 drag、drop 事件。

这个实际上是 Tauri 的问题，不是前端代码问题，Tauri 托管了 Webview 的相关事件，所以事件会先走到他那层，再由他决定是否转发给前端，对应的解决方法就有两种。

通过 Tauri 事件

listen('tauri://file-drop', event => {
  console.log(event)
})
// 对应的还有 tauri://file-drop-cancelled 和 tauri://file-drop-hover

直接在 Tauri 层捕获拖放事件，通过回调通知前端去处理。

要注意这里拿到的只有文件路径，所以你还得通过 Tauri 的 fs 去读取文件内容（有坑，请参考往期文章）。

通过配置

修改 tauri.conf.json 文件，在 tauri.windows 中，给项目加上 fileDropEnabled，并设置为 false，这样前端代码不需要动，就能在 Windows 下生效。

这种改法最简单，但兼容性比较差，fileDropEnabled 控制“是否在 webview 上启用文件拖放功能”，默认是 true，但在 Windows 下只有为 false 的时候才能在前端正确处理拖放事件。

至于如何做平台的判断，文档也没说。。。

整理 TailwindCSS 中的复合样式

Mon, 31 Mar 2025 00:00:00 GMT

TailwindCSS 很好用，我用上瘾了，但写的时候补全总会出现一些没见过的样式命名，所以我去重新看了文档，整理了一下。

我把他的样式分成两类，一是简单语句，二是复合语句，比如 top-0 这种就是简单语句，因为他控制的就是 top 样式，而复合语句，我对他的定义是一条语句能操作多个不同类的 CSS 样式，且命名方式不按 CSS 规律，比如 truncate。

复合语句能有效减少代码量，可能短短几个字母就能把一大串简单语句的功能覆盖。

由于 tailwind 的文档中没有单独把他们归类，所以本文主要会列出我能找到的所有复合语句进行介绍。

truncate

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

就是文字过长显示省略号的“简写”，在父元素宽度确定的前提下，一句就能取代 overflow-hidden text-ellipsis whitespace-nowrap。

divide-x/y

& > :not(:last-child) {
	border-inline-start-width: 0px;
	border-inline-end-width: 1px;
}

& > :not(:last-child) {
	border-top-width: 0px;
	border-bottom-width: 1px;
}

效果是给多个元素之间加上分隔线，分隔线是通过 border 实现的。

因为是 border 所以最好用在元素之间没有间隔的场景，在带有 gap 场景不适用，毕竟这种时候你还得手动设置元素的 padding 调整边界与元素之间的距离。

divide-solid/dotted/dashed 与 divide-(color)

& > :not(:last-child) {
	border-style: solid;
}

是配合 divide-x/y 使用的，看样式就知道 divide-x/y 只是设置了 border 的宽度，连 border 的 color、style 都没有定义，所以需要用额外的 divide 语句去描述。

space-x/y 与 space-x/y-reverse

& > :not(:last-child) {
	--tw-space-x-reverse: 0;
	margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-x-reverse));
	margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-x-reverse)));
};

和 divide 类似，但用途相反，这个是基于 margin 的复合语句，用在元素之间需要间隔的场景，通过 margin 将元素之间分隔开。

space-x/y-reverse 是 space-x/y 的补丁，在元素反向排列的场景下，就应该一起用。

以只使用 space-x 为例，他会给每个元素（非最后一个）的右侧加上 margin，如 1(空)2(空)3，但在 flex-reverse 的情况下，就会变成 32(空)1(空)，space-x/y-reverse 就是修复这种情况的。

sr-only 与 not-sr-only

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;

可能是接触比较少的功能了，sr-only 用于定义某些元素只能在屏幕阅读器上查看，在普通屏幕上看不到，not-sr-only 则反过来。

size-*

width: *;
height: *;

用于给 width 和 height 设置同一个值，比如 size-full 就是宽高均为 100%。

line-clamp

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: <number>;

和 truncate 类似，line-clamp 就是设置显示多少行后省略，整合了一套模版写法。

ring

--tw-ring-shadow: 0 0 0 1px;

ring 是 outline 的一种替代，以 box-shadow 实现，两者都能设置 offset，但 ring 在环和元素的中间可以设置颜色，而 outline 不行，只能是透明的。

使用 Cursor 接入其他 LLM 服务

Wed, 05 Mar 2025 00:00:00 GMT

Cursor 我用了大半年了，钱也交了 4 个月了吧，挺好用的，但真的太贵了，我只拿他来做问答，然后给我代码我自己去改，光这个功能一个月要收我 100 多，真的不值。

想到上个月白嫖了硅基流动的 2000 万 token，我就琢磨能不能把这些免费的 API 接入 Cursor 呢？答案是能的，首先要打开 Cursor 的设置：选中 Models，取消掉其他的模型名称，添加你能用的模型名。

然后修改 OpenAI 的设置：把你用的服务的 key 填进去，然后修改一下 Base URL，点保存。

可以用 Verify 验证一下，报错不代表失败，看看具体的错误，如果只是模型名称不对没关系，因为他会默认用 default 去测试，这个当然行不通，只要不是服务不通就行。

接着打开 chat 面板，选择正确的模型：这里第一次选会弹窗提示，点确定就好了。

到这里就完成了，但我还是没想明白，为什么第三方服务接入要修改 OpenAI 的设置呢，而不是提供一个第三方的 OpenAI-like 选项，这不就默认了不认识的模型名全是 OpenAI 的吗？

使用回溯解决 Stitch 中的谜题

Tue, 25 Feb 2025 00:00:00 GMT

这个 Stitch 就是我 Apple Arcade 文章中提到的游戏，玩家需要在网格中根据提示的数字，画出指定大小的方块，填满整个网格。

说实在的，我不知道他这种不规则的谜题的数据结构应该怎么定义，所以我这段解题代码只能用于规则矩形的谜题，每日一题里的那种。

代码

#[derive(Debug, Clone)]
struct Block {
  w: usize,
  h: usize,
  x: usize,
  y: usize,
}

const GRID_WIDTH: usize = 8;
const GRID_HEIGHT: usize = 14;

struct Solver {
  cnt: usize,
  blocks: Vec<Vec<Block>>,
  grid: [[usize; GRID_WIDTH]; GRID_HEIGHT],
  tag: [[usize; GRID_WIDTH]; GRID_HEIGHT],
  found: bool,
  result: Option<[[usize; GRID_WIDTH]; GRID_HEIGHT]>,
}

impl Solver {
  fn new(grid: [[usize; GRID_WIDTH]; GRID_HEIGHT]) -> Self {
    Self {
      cnt: 0,
      blocks: vec![Vec::new(); 100],
      grid,
      tag: [[0; GRID_WIDTH]; GRID_HEIGHT],
      found: false,
      result: None,
    }
  }

  fn dfs(&mut self, st: usize) {
    if self.found {
      return;
    }
    if st == self.cnt {
      self.found = true;
      self.result = Some(self.tag);
      return;
    }

    // 先收集所有可能的块到一个临时向量中
    let current_blocks: Vec<Block> = self.blocks[st].clone();
    for block in current_blocks {
      let mut valid = true;
      // 检查是否可以放置
      for i in 0..block.w {
        for j in 0..block.h {
          let xx = block.x + i;
          let yy = block.y + j;
          if self.tag[xx][yy] != 0 {
            valid = false;
            break;
          }
        }
        if !valid {
          break;
        }
      }
      if !valid {
        continue;
      }

      // 放置方块
      for i in 0..block.w {
        for j in 0..block.h {
          self.tag[block.x + i][block.y + j] = st + 1;
        }
      }

      self.dfs(st + 1);

      if self.found {
        return;
      }

      // 回溯，移除方块
      for i in 0..block.w {
        for j in 0..block.h {
          self.tag[block.x + i][block.y + j] = 0;
        }
      }
    }
  }

  fn solve(&mut self) -> Option<[[usize; GRID_WIDTH]; GRID_HEIGHT]> {
    // 先找出所有数字格子
    for i in 0..GRID_HEIGHT {
      for j in 0..GRID_WIDTH {
        if self.grid[i][j] > 0 {
          let area = self.grid[i][j];
          // 枚举所有可能的长和宽
          for w in 1..=area {
            if area % w == 0 {
              let h = area / w;
              // 枚举所有可能的位置
              for x in i.saturating_sub(w - 1)..=i {
                for y in j.saturating_sub(h - 1)..=j {
                  if x + w <= GRID_HEIGHT && y + h <= GRID_WIDTH {
                    // 检查是否只覆盖了一个数字
                    let mut count = 0;
                    let mut valid = true;
                    for dx in 0..w {
                      for dy in 0..h {
                        if self.grid[x + dx][y + dy] > 0 {
                          count += 1;
                          if count > 1 {
                            valid = false;
                            break;
                          }
                        }
                      }
                      if !valid {
                        break;
                      }
                    }
                    if valid && count == 1 {
                      self.blocks[self.cnt].push(Block { w, h, x, y });
                    }
                  }
                }
              }
            }
          }
          self.cnt += 1;
        }
      }
    }
    // 开始搜索
    self.dfs(0);
    self.result
  }
}

fn main() {
  let mut solver = Solver::new(grid);
  solver.solve();
}

思路

Block 表示玩家绘制的方块信息：

x 与 y 为坐标
w 与 h 为尺寸

GRID_WIDTH 和 GRID_HEIGHT 是网格的尺寸，每日一题中的网格就是 14 行 8 列的。谜题网格中的数字是需要填入的方块的面积，后文会称作子谜题。

Solver 记录着一些解题过程中的状态：

cnt 表示当前处理的子谜题编号
blocks 表示每个子谜题可能填入的方块的位置和尺寸，是个二维数组，子谜题编号作为“键”
grid 是谜题网格，一个二维数组
tag 为标记表，将已放置的方块具体填入网格中，如 [[1, 1, 2, 3, 3, 3]]
found 为找到最终解的标志
result 为最终解，是 tag 的引用

预处理：

先找出谜题里带数字的格子，也就是我们要填入的每个方块的面积
然后通过面积计算出所有的长和宽组合，比如 2 可以拆分成 w1 h2 或者 w2 h1
把所有的组合，按不同的摆放方式去带入棋盘，主要是检查是否只覆盖了当前子谜题，排除不可能的摆放
将剩余的可能存入 blocks

接着使用深度优先搜索，计算合适的摆放方法：

按子谜题编号逐个尝试，使用 blocks 中预存的方块，进行摆放
放置结果保存在 tag 中，要保证不和其他子谜题的答案冲突
放置成功后就递归处理下一个子谜题
遇到所有摆放都不可能的子谜题，那就是之前的摆放有错，回到上一步，继续尝试
成功处理完所有子谜题后，设置 found 标志，结束搜索

效果

锐评 Apple Arcade

Mon, 24 Feb 2025 00:00:00 GMT

Arcade 我开了有 5 年，现在还在积极使用，但有些槽点也是不吐不快。我订阅的是 Apple One，里面附带了 Arcade，说实话 One 还挺划算的，尤其是家庭组，大家能分担年费，如果要单买 Arcade，那我觉得不值，别买。

先说游戏品质，里面游戏的质量还是过得去的，和竞品 Google Play Pass 比，那算是精品了，Play Pass 里的游戏大多是滥竽充数的，就像是搜 Idle 刷屏的那些游戏的品质，只不过把 IAP 去掉了。

相较之下，Arcade 里的主要是重新开发的游戏，如果是现有游戏的增强版，，那么厂商会在其基础上加一些内容（也有纯移植），命名变成 xxx+，比如 Balatro+，我是个 PC 游戏玩家，所以这些知名独立游戏我早在 PC 上玩过了，等 Arcade 定制版发布的时候，我早就玩吐了，所以这类“plus 版”游戏对我没有吸引力。

Arcade 还有一类是竞技游戏，他们通常是全新开发的，不会出现现有手游上 Arcade 的情况，即便有相同类型的，那肯定也是“模仿”的，这类游戏确实是公平竞技，没有 IAP，装备全靠等级解锁、金币购买，但你玩起来就会觉得“他怎么和常见的手游就是不太一样呢？”。

后面我自己想了一下，我认为应该是缺少了各种保日活的手段，比如没有签到，没有月卡，甚至没有进入游戏后铺天盖地的活动宣传，他就是一个很纯粹的对战游戏，纯粹到一局的奖励只有金币和经验，如果你不想在线 PVP（不同意资料分享的协议），他们还会提供一套纯离线的 AI，简直是梦回 21 世纪初。

但这种游戏我玩几天就腻了，因为没啥目标，你能获得的游戏资源就那两种，他要卡你的进度，那就是卡这两项资源，你没有其他选择余地，无法跳过去玩别的，因为没有别的内容了，目前我玩过的好几款 PVP 游戏都停止更新了，毕竟这种模式也没什么需要运营的地方。

剩下的一类就是真·独立游戏了，但多数是现有热门游戏的换皮，比如三消的换皮有神庙逃亡（三消版）、ZooKeeper World，Garden Tails 等，这类我还挺喜欢的，毕竟你不可能在商店里找到没有生命限制的三消游戏，真能无限玩，那可太难得了。

但这类游戏的手感和原作总是差了那么一丢丢，我这里会与经典的 Candy Crush 做比较，Candy Crush 的手感这些 Arcade 游戏就是学不来，玩起来就是会不跟手，但总比没有好。

全新开发不换皮的精品也有，比如 Stitch，还有一些我忘了名字，都在 Arcade 首页的分类中，精品都上了/上过推荐。

上了的游戏是限时的，过了时间就会下架，不是说你下载到手机里就能一直玩下去，我 20 年玩过一个挺不错的飞船养成游戏，但过了一两年想重温的时候，却发现游戏已经下架了，在手机里的那一份也无法启动，问就是已下架。

难受的是，一些游戏下架之后就不会选择再上架了，永远消失在了 App Store 中，甚至都不会选择发布带 IAP 的版本或者移植其他平台。

吐槽方面，Arcade 都出那么多年了，该死的苹果还是不愿意给出一份完整的 Arcade 游戏列表，都不知道他们在担心什么，全靠爱好者自己统计收集，然后记录在第三方百科中，App Store 的分类又很差劲，可以说只有编辑推荐，就算是分类，你在里面也看不到所有的游戏，搜索可以，但你又怎么知道那些冷门游戏的名字呢？

记一次树莓派问题排查过程

Sun, 23 Feb 2025 00:00:00 GMT

过程

是这样的，我最近需要跑一些常驻的服务，比如 AdGuard、HomeAssistant 等，于是掏出了 10 年前的树莓派 3B+，装了最新的 bookworm 系统。

一开始没什么问题（复盘发现只是我没碰上），有一天我晚上要用手机回个消息，然后我发现断网了，我刚开始以为是电信日常的重拨，之后发现其他设备都正常啊，怎么就手机连不上，第一时间就想到是 AdGuard 出了问题，因为我只给手机加了 DNS 反广告。

电脑上一查，确实，AdGuard 页面打不开了，于是我就 ssh 上去看看问题，结果 ssh 也连不上，上路由器后台一看，设备列表里都没他了，那只好试试网线了，结果网线接上去也没反应，连不上，只好强制重启。

重启过后一切正常，什么问题都消失了，这时候我的猜想是偶发性的，某个应用死循环了，把 CPU、内存等资源吃满了，所以系统高负载服务都未响应了。

后来第二天、第三天晚上都出现了这个问题，这已经不是偶发性的了，就算是应用出 BUG，那也是严重 BUG 了，于是我把当时的嫌疑应用 AdGuard 给停了，但第四天依然出现，后面甚至变成了无法正常开机的情况，点亮后一直无法联网。

于是我找了一条 HDMI 线，插上屏幕，屏幕能点亮，能进系统，但是鼠标、键盘全失效，没有反应，这时候我懵逼了，我开始怀疑是树莓派出问题了，毕竟用了 10 年，所以我下单了 PI 5。

同一张 tf 卡，插入 PI 5 之后是能正常使用的，我一开始以为事情就这样解决了，但第二天依然出现了无法连接的问题，由于我用的是金属外壳，被动散热的，在出问题的时候设备会变得很烫，大概 50 度。

我开始怀疑是系统问题，于是备份后重新安装了系统，使用了 Lite 版，一开始我没有安装 Docker 等应用，放了一天，没有复现（这里我测试的时候有些纰漏，只查了温度，没看路由器设备列表）。

随后我第三天晚上继续安装了 HomeAssistant 等容器，也没有出现问题，但到第四天的时候，问题又来了，新安装的应用和 3B+ 上的完全不一样，所以我这时候排除了应用 BUG 的可能，或者说不是应用主导的问题。

现在又回到了系统负载上，这个点很难去搜索，太广泛了。正当我头疼的时候，我想到了一个角度：

会不会是因为网络断连，所以导致一些应用反复重连/自检，从而进入死循环，然后引发系统高负载发烫呢？

于是我用“树莓派网络自动断连”这种关键词去搜索，还真给我搜到了一个特性，那就是树莓派他默认是有 WiFi 休眠的，你长时间不用，他就会把 WiFi 断掉，为了省电，但如何恢复，在 headless 环境中我真想不到（没有网络，也没有 GUI）。

用命令 iw wlan0 get power_save 检查休眠状态，确实是开启的，用命令 iw dev wlan0 set power_save off 禁用后只是当前环境生效，如果要永久禁用，按 StackOverflow 的解决办法是创建一个新服务，让这个服务开机启动，自动运行禁用休眠的命令。

事实上，到这一步事情还没有完全结束，休眠的问题解决了，早上起来设备确实没有发烫，但是 ssh 连接依然很慢，不过也不至于上不去，输入的时候也会有些卡顿，查了半天，又是设置 QoS，又是设置 ssh 不使用 DNS，还是解决不了。

后来我尝试 ping 了一下，发现在局域网内的延迟都有 5ms，那估计是信号不好了。

在我无头绪乱投医的时候，我注意到一个可能的问题，如果你认真看了前文，你可能也会注意到，我 PI 5 的壳是金属的，被动散热，除了底部是塑料，他就是一个金属盒子，然后我用的又是 WiFi 联网，就有可能是外壳屏蔽了信号。

说实话到这一步我已经无语了，这已经不是改设置就能解决的，感觉之前的努力都白费了，只能掏出网线，老实使用有线连接，之后经过测试，有线连接后 ping 的延迟小于 1ms，是正常水平。

服务

sudo systemctl --full --force edit wifi_powersave@.service

# wifi_powersave@.service
[Unit]
Description=Set WiFi power save %i
After=sys-subsystem-net-devices-wlan0.device

[Service]
Type=oneshot
RemainAfterExit=yes
ExecStart=/sbin/iw dev wlan0 set power_save %i

[Install]
WantedBy=sys-subsystem-net-devices-wlan0.device
# ----------------------

sudo systemctl disable wifi_powersave@on.service
sudo systemctl enable wifi_powersave@off.service

总结

经过我后面复盘，大概是这么几点：

树莓派 3B+ 确实是坏了，也有可能是那几天的高温导致的
此前（几年前）用的时候为什么没发现休眠？因为之前都是连接网线的
问题原因为系统默认开启的 WiFi 休眠
金属壳会屏蔽信号，别想着用 WiFi 了

吐槽

你说 3 拿来当低功耗的硬件使用也就算了，5 性能比 3 强那么多，还要求 35w 电源，你官方怎么能默认把他当做低功耗设备来配置啊？这合理吗？

用 DeepSeek 协助开发 UserScript

Fri, 21 Feb 2025 00:00:00 GMT

前几天看到一个视频，我觉得其中一段很有意思，就打算分享给群友，链接发出去附上秒数，结果没多少人看，这时候我就在想手头上要有个 gif 录制工具就好了，毕竟搬屎的时候发动图，群友不得不看。

本着一颗折腾的心，我打算整个脚本来实现，这功能做起来我心里有点数，但不确定相关 API 能不能支持我这样做，理论上很简单，就是在视频流中得到一系列的帧图像数据，然后用这些图像构建出一个 gif 文件。

如果要调整分辨率的话，可能还需要把图像画到 canvas 里面去做处理，再写到 gif。

这里我不确定的是：

H5 API 中的 video，能不能让我拿到当前帧，或者指定某一帧的图像，毕竟可能会有跨域问题，比如像把没有跨域的图片写到 canvas 后，无法 getImageData 那样
如果能拿到，那么图像数据的格式不确定，能不能直接放进 canvas 也不好说，毕竟我没做过

想到这些不确定的地方，又开始懒起来了，怕做到一半发现做不下去了，浪费时间，干脆用 DeepSeek 先做吧，之后自己再改改。

回应

DeepSeek 给出的方案是这样的，他似乎没有理解 UserScript 的意思，不过问题不大。

a. 注入内容脚本获取视频元素

// content-script.js
const videoElements = document.querySelectorAll('video');
// 向插件后台发送视频信息
chrome.runtime.sendMessage({ type: 'VIDEO_FOUND', videos: Array.from(videoElements).map(v => v.src) });

b. 用户界面（UI）

在页面右上角添加浮动控件（Shadow DOM 避免样式污染）。
用户输入或拖动时间轴选择起止时间（需监听视频的 timeupdate 事件）。

c. 捕获视频帧

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 逐帧捕获（需处理性能优化）
video.currentTime = startTime;
await new Promise(r => video.onseeked = r);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

d. 生成 GIF 推荐使用 gif.js 或 ffmpeg.wasm：

const gif = new GIF({
  workers: 2,
  quality: 10,
  width: canvas.width,
  height: canvas.height
});

gif.addFrame(imageData, { delay: 100 }); // 每帧延迟
gif.on('finished', blob => {
  const url = URL.createObjectURL(blob);
  // 触发下载
  chrome.downloads.download({ url, filename: 'clip.gif' });
});
gif.render();

跨域限制（CORS）
- 需在 manifest.json 中声明权限：
```
"permissions": ["activeTab", "downloads", "scripting", "storage"]
```
- 对跨域视频可能需要用户手动启用权限（如点击插件图标授权）。
DRM 保护视频
- 无法处理受保护的流媒体（如 Netflix、YouTube Premium），需提示用户不支持。
性能优化
- 降低 GIF 分辨率（如 320x180）。
- 限制帧率（如 10 FPS）。
- 使用 Web Worker 避免主线程阻塞。
兼容性
- 仅支持 <video> 标签，部分网站的自定义播放器需额外适配（如通过截图模拟）。

用户隐私: 明确声明插件不会上传数据。
性能提示: 长时间视频需警告用户可能卡顿。
错误处理: 捕获 SecurityError（跨域）和 NotAllowedError（DRM）。

代码与调整

我也去查了一下 drawImage，第一个参数可以是 video element，也不用特别指定某一帧，把 currentTime 设置好，canvas 就能自动通过 element 去拿到当前帧，以下是具体实现：

// ==UserScript==
// @name         Video to GIF Converter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Convert video clips to GIF directly in the browser
// @author       Your Name
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_getResourceURL
// @grant        GM_download
// @require      https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js
// @resource     gifWorker https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js
// @run-at       document-end
// ==/UserScript==

(function() {
  'use strict';

  // 全局样式
  GM_addStyle(`
    .gif-converter-wrapper {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      font-family: Arial, sans-serif;
    }

    #gifTriggerBtn {
      padding: 10px 20px;
      background: #2196F3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .config-panel {
      background: white;
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      width: 300px;
      margin-top: 10px;
    }

    .config-row {
      margin: 10px 0;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="number"] {
      width: 100%;
      padding: 5px;
    }
  `);

  // 主界面
  const createUI = () => {
    const wrapper = document.createElement('div');
    wrapper.className = 'gif-converter-wrapper';

    const triggerBtn = document.createElement('button');
    triggerBtn.id = 'gifTriggerBtn';
    triggerBtn.textContent = '🎬 创建 GIF';

    const panel = document.createElement('div');
    panel.className = 'config-panel';
    panel.style.display = 'none';

    wrapper.append(triggerBtn, panel);
    document.body.appendChild(wrapper);

    return { triggerBtn, panel };
  };

  // 配置表单
  const createConfigForm = (video, panel) => {
    panel.innerHTML = `
      <div class="config-row">
        <label>开始时间（秒）:</label>
        <input type="number" id="startTime" step="0.1" value="${video.currentTime}" min="0" max="${video.duration}">
      </div>
      <div class="config-row">
        <label>GIF 长度（秒）:</label>
        <input type="number" id="gifDuration" step="0.1" value="5" min="0" max="${video.duration - video.currentTime}">
      </div>
      <div class="config-row">
        <label>FPS (10-30):</label>
        <input type="number" id="fps" value="15" min="10" max="30">
      </div>
      <div class="config-row">
        <label>宽度 (像素):</label>
        <input type="number" id="width" value="${video.clientWidth}" min="1" max="${video.videoWidth}">
      </div>
      <div class="config-row">
        <label>高度 (像素):</label>
        <input type="number" id="height" value="${video.clientHeight}" min="1" max="${video.videoHeight}">
      </div>
      <button id="generateBtn" style="margin-top:15px;width:100%">生成 GIF</button>
    `;
  };

  // 生成 GIF
  const generateGIF = async (video, config) => {
    console.debug(config)
    const gif = new GIF({
      workers: 2,
      quality: 10,
      width: config.width,
      height: config.height,
      workerScript: GM_getResourceURL('gifWorker')
    });

    const frameDelay = 1000 / config.fps;
    let currentTime = parseFloat(config.startTime);
    let endTime = currentTime + parseFloat(config.gifDuration)
    const canvas = document.createElement('canvas');
    canvas.width = config.width;
    canvas.height = config.height;
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = true;   // 启用抗锯齿
    ctx.imageSmoothingQuality = 'high'; // 设置插值质量为高

    while (currentTime <= endTime) {
      video.currentTime = currentTime;
      await new Promise(resolve => {
        video.onseeked = () => {
          ctx.drawImage(video, 0, 0, config.width, config.height);
          const imageData = ctx.getImageData(0, 0, config.width, config.height);
          gif.addFrame(imageData, { delay: frameDelay });
          resolve();
        };
      });
      currentTime += (1 / config.fps);
    }

    gif.on('finished', blob => {
      const url = URL.createObjectURL(blob);
      GM_download(url, `video-clip-${Date.now()}.gif`);
    });

    gif.render();
  };

  // 主逻辑
  const main = () => {
    const { triggerBtn, panel } = createUI();

    triggerBtn.addEventListener('click', () => {
      const videos = document.querySelectorAll('video');
      if (videos.length === 0) {
        console.debug('没找到视频');
        return;
      }

      const video = videos[0]; // 默认选择第一个视频
      panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
      createConfigForm(video, panel);
    });

    panel.addEventListener('click', async (e) => {
      if (e.target.id === 'generateBtn') {
        const videos = document.querySelectorAll('video');
        if (videos.length === 0) {
          console.debug('No video elements found!');
          return;
        }
        const video = videos[0]; // 默认选择第一个视频

        const config = {
          startTime: parseFloat(panel.querySelector('#startTime').value),
          gifDuration: parseFloat(panel.querySelector('#gifDuration').value),
          fps: parseInt(panel.querySelector('#fps').value),
          width: parseInt(panel.querySelector('#width').value),
          height: parseInt(panel.querySelector('#height').value),
        };

        panel.style.display = 'none';
        await generateGIF(video, config);
      }
    });
  };

  // 等待页面加载完成后初始化
  window.addEventListener('load', main, false);
})();

这部分代码主要是 DeepSeek 完成的，刚开始的版本在 B 站不适用，后面我稍微改了一下，因为 B 站的 video element 不是直接写在 html 中，而是通过脚本去初始化的，所以在 document-end 的时候不一定能找到。

接着是创建 canvas，DeepSeek 直接在每一次 while 循环中都创建了一个 canvas，我一开始还觉得他这样做效率很低，于是把 cavans 的创建提出去了，但这样修改出问题了。

问题的表现是 gif 变成了静态图片，只有最后一帧的图像，后面我去查了一下 gif.js 的源码，发现他每一帧都是一个对象，对象里只保存引用，而不是具体的图像数据，只有在 render 的时候才去收集具体图像，所以提出 canvas 后也导致了所有帧对象指向的都是同一个 canvas，在 render 的那一刻，canvas 的图案就是最后一帧的。

我不知道这一段是 DeepSeek 误打误撞写出来的，还是他真考虑到了 gif.js 存在的问题，有点小震惊。

为什么不用 HashNode 了

Thu, 20 Feb 2025 00:00:00 GMT

我的内容存了两份，一份在本地的 Obsidian 中，一份放在 HashNode，HashNode 就是一个很纯粹的博客服务，类似于一个公共的 WordPress，SEO 这些都帮你做好了，你提供内容就好。

但他有一些问题吧，比如用户对页面的控制权不多，大家都是一样的样式，不是说这样不好，而是我不太喜欢他的布局，但又调整不了。

另外他本身对中文内容的支持不太好，比方说在生成 url slug 的时候会自动忽略中文，另外，他默认标题都是英文的，所以会强制对第一个英文字符进行大写化，即便这个英文单词不在标题开头。

标签方面，因为他是一个公共的博客平台，所以他收集了所有人的标签，像是社交平台的“话题”一样，你也可以新建一个，这个没啥问题，但在博客里面，你只能通过文章页面最下方的标签按钮进入当前站点的标签分类页面，是的，你在博客首页是点不进去的。

这个标签不区分大小写，所以除非标签的创建者他比较注意规范，否则他要注册了一个大小写不规范的标签，你要么用他，要么你自己注册一个不重名的。

对于内容的爬取，他虽然提供了相关 API，但还是刚刚说的问题，对中文支持不好，他只能爬取到内容中的英文部分，中文字符会被忽略（我挺好奇他这个爬取功能是怎么实现的，感觉是额外实现的过滤）。

将智能插座通过 HomeKit 接入 HomeAssistant

Sat, 30 Nov 2024 00:00:00 GMT

近期在淘宝上买了个 Homekit + Cozylife 的插座，就这种：

一开始只通过 iOS 访问，就是只连接 Homekit，长按开关重置插座，iOS 一扫码就连上了，后来我嫌在外面访问不了，又不想掏钱买苹果的 HomePod，于是就装上了 Home Assistant，打算让设备们都连上 HA，这样就不用交苹果税了。

连接方式还是通过 Homekit，一般来说支持 Homekit 设备都能这样连接，先连上 iOS，然后在 Home App 中移除设备，这时候就能在 HA 中找到设备：

点击“配置” HA 就能自动连接上，但这时候就出现了问题，这插座怎么都连不上，也不报错，就一直 loading，直到设备退出搜索状态。。。

思考再三，决定试试 Cozylife 的连接方案，这个 HA 并没有原生支持，得装插件提供额外的集成，这里提醒一句，不要安装 Cozylife 官方的，那个插件很差，可以安装第三方的。

说实话我觉得这个集成的使用方式也挺麻烦的，先得搜索局域网的设备信息，再把信息粘贴进 HA 的配置里，没有那种图形界面或者一键操作，我现在在租房里，这里的路由器没有提供 DHCP 功能，所以我固定不了设备的地址啊！

这时候我也不知道我咋想的，就下了一个 Cozylife 的 App：连接上之后，神奇的事来了，HA 里居然通过 Homekit 搜到了这个设备：等于说设备连上 Cozylife 之后，自动暴露出了 Homekit “接口”，这时 HA 连接是正常的，不会出现无限 loading 的情况。

接入 HA 之后一切都很顺利，也没有出现控制不到、掉线的情况。

慎用 Tauri 读取文件

Fri, 15 Nov 2024 00:00:00 GMT

TL;DR

一句话，要么升级 v2，要么憋着

这篇文章真的是加急写出来的，因为 Tauri v1 的 readBinaryFile API 太蠢了，我受不了了。

问题

这个 API 会有内存泄漏的问题，而且 v1 版本是避免不了的，举个例子就是读取 400M 左右的文件，进程会吃 18G 左右，读取完成后再慢慢清理掉。

![[b78d8b48-9f57-47b2-b2fe-719a222390f2.png]]

![[983ffd97-3bf8-4f9c-84bd-4bd4db0b3ccb.png]]

在做测试的过程中，我一开始直接读文件，读一半因为这个问题，程序崩溃了两回，后面我调整了写法才避免了崩溃，但吃内存的问题还是无法解决。

我查了 issue 才发现，这个问题是序列化导致的，Tauri 的 JS API 会将一切 Rust 端的数据序列化成 JSON 然后传回前端，这也包括了文件数据，我估计他是把文件同步读完，然后再开辟一份新内存区域去做转换，所以浪费了那么多空间。

速度慢的问题在开发环境特别明显，在生产环境会好不少。

解法

根据 issue 下面所说，如果你想彻底解决这个问题，要么升级 v2 后使用 tauri::ipc::Response 包装 Vec，要么自己做一个协议去交换数据，不依赖 Tauri 提供的 NPM 包。

但 v1 升级到 v2 肯定又是一场恶战，我目前在 v1 的办法也只能暂缓爆内存的问题，就是限制并发量：

export const runConcurrency = async <T>(
  tasks: Array<() => Promise<T>>,
  concurrency: number = 3
): Promise<Array<T | Error>> => {
  const results: Array<T | Error> = new Array(tasks.length);
  let currentIndex = 0;

  // 创建工作线程函数
  const worker = async () => {
    while (currentIndex < tasks.length) {
      const taskIndex = currentIndex++;
      const task = tasks[taskIndex];
      try {
        const result = await task();
        results[taskIndex] = result;
      } catch (err) {
        results[taskIndex] = err as Error;
      }
    }
  };

  // 创建指定数量的工作线程
  const workers = Array(Math.min(concurrency, tasks.length))
    .fill(null)
    .map(() => worker());

  // 等待所有工作线程完成
  await Promise.all(workers);
  return results;
}

大概是这样，限制同时读取的文件数量，单个文件的读取只能听天由命了。

其他解法（大概）

Claude 的方案是自己做一个 Tauri command 去读取文件，我也试过了，效果不明显，毕竟 command 的数据交换也是要通过 JS API 的，那也会序列化成 JSON：

use tauri::plugin::{Builder, TauriPlugin};  
use tauri::{command, generate_handler, Wry};  
use tokio::fs;  
use anyhow::Result;  
  
#[command]  
async fn read_file_binary(path: String) -> Result<Vec<u8>, String> {  
    match fs::read(&path).await {  
        Ok(data) => Ok(data),  
        Err(e) => Err(e.to_string())  
    }  
}  
  
pub fn init() -> TauriPlugin<Wry> {  
    Builder::new("file")  
        .invoke_handler(generate_handler![  
            read_file_binary,  
        ])  
        .build()  
}

参考

https://github.com/tauri-apps/tauri/issues/1817
https://github.com/tauri-apps/tauri/issues/9190

触底分页加载模版代码

Fri, 27 Mar 2020 00:00:00 GMT

基本状态

基本的状态可以分成 5 个：

const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false);

data 储存列表数据，page 是当前页码，hasMore 表示已经结束，isLoading 是加载中的状态，得和 isRefreshing 刷新中区分开来，原因后面会讲。

触底条件

尺寸计算

触底判断可以分成两种，兼容性更好的方案是通过尺寸属性去计算：

scrollHeight - (scrollTop + clientHeight) < threshold

三个属性的意义如下：

scrollHeight 是容器的总高度，包括不可见的滚动区域
scrollTop 是已经滚动完成的高度，也就是滚出去的上半部分高度
clientHeight 容器自身高度（包括 padding）

所以计算下来 scrollHeight - (scrollTop + clientHeight) 指的是容器还没有滚动到的剩余高度（下方不可见部分），当他小于阈值 threshold 时触发加载。

observer

性能更好的方案，不会频繁触发布局：

const observer = useRef();
  const sentinelRef = useCallback(node => {
    if (observer.current) observer.current.disconnect();
    
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore && !isLoading && !isRefreshing) {
        loadMoreData();
      }
    }, { rootMargin: '100px' });

    node && observer.current.observe(node);
  }, [hasMore, isLoading, isRefreshing]);

同时在列表最下方加入探针元素：

<div ref={sentinelRef} style={{ height: 1 }} />

在探针滚动到可见的时候，触发 observer，判断当前终止条件和加载中，避免多次触发。

加载更多

const loadData = async (targetPage = page, isRefresh = false) => {
    try {
      isRefresh ? setIsRefreshing(true) : setIsLoading(true);
      
      const newData = await fetchData(targetPage);
      
      setData(prev => 
        targetPage === 1 ? newData : [...prev, ...newData]
      );
      setHasMore(newData.length >= 10); // 假设每页10条
      setPage(targetPage + 1);
    } finally {
      isRefresh ? setIsRefreshing(false) : setIsLoading(false);
    }
  };

加载后的列表数据拼接到 data 之后，setHasMore 判断是否终止，setPage 设置新页码。

刷新

const handleRefresh = () => {
	if (isRefreshing) return;
	setPage(1);          // 重置页码
	setHasMore(true);    // 重置数据终止标记
	loadData(1, true);   // 强制从第一页加载
};

前面提到的 isLoading 和 isRefreshing 就是为了区分 loadMore 和 refresh。

为什么不复用 isLoading，原因有几个：

要区分数据的赋值逻辑，loadMore 是拼接，refresh 是重设
单状态管理会导致竞态条件，刷新和加载都共同维护 isLoading，会增加复杂度，很可能出现双方通过异步先后修改 isLoading 的情况
能显示不同的提示语

初始化

useEffect(() => {
	loadData();
}, []);

额外功能

请求取消

const abortController = useRef(new AbortController());

useEffect(() => {
  return () => abortController.current.abort();
}, []);

刷新防抖

const lastRefresh = useRef(0);

const handleRefresh = () => {
  if (Date.now() - lastRefresh.current < 3000) return;
  lastRefresh.current = Date.now();
  // ...刷新逻辑
};