Hexo

这次问题最初很小：昵称编辑框右下角有一个字数计数，代码直接用了 value.length。普通中文、英文都没问题，遇到 emoji 和国旗时就不对了。 😀 会被算成 2，🇯🇵 会被算成 4。用户看到的是一个字符，前端计数却像在数底层编码单元。这个 bug 一旦出现在昵称、签名、备注、举报描述、搜索词、弹窗 prompt 这类用户可见输入里，表现会很别扭：计数提前超限、截断把 emoji 切坏

这次问题一开始看起来只是 Header 右上角错位：刷新 Profile 页面时，右上角按钮会短暂散开，像是刚进页面那一下还没摆好。要是只看最终状态，很容易把它当成 CSS 问题；但控制台里同时出现了 hydration mismatch，这就把问题从「样式没对齐」推到了另一个层面：服务端渲染出来的 DOM，和客户端首帧准备接管的 VNode，不是同一棵树。 真正的问题不在某一个按钮，也不在某一个

一次依赖安全升级，真正麻烦的地方经常在版本号之外：改完以后，构建链路里可能冒出一个看起来和安全漏洞无关的警告。 这次就是这样。IDE 根据 Mend 对 CVE-2023-48309 的记录提示 next-auth 版本过旧，需要升到修复版本。项目本身是 Nuxt，用 @sidebase/nuxt-auth 接 next-auth。把 next-auth 从 4.21.1 升到 4.24.14 之

WebStorm 升级以后，每天盯着看的颜色突然不对了，比少一个功能按钮还烦。 我之前一直用一套 One Dark 风格的主题。升级 WebStorm 后，它像是被系统顺手带走了：插件市场里搜 one dark theme，能搜到几个名字很像的，但装完以后按钮、编辑器、选中态、弹窗颜色都不是原来的感觉。 后来翻了一圈本地配置，又把旧版和新版的颜色表拆开比了一遍，才发现问题不只是名字变了。新版还换掉

这次问题表面上像是一个业务弹窗变窄了：右上角头像点开的账号弹窗还是 375px，点进「基本信息」后，右侧编辑弹窗却窄得像不到 200px。 最初几个怀疑点都合理：是不是 ProfileEditor 写坏了宽度，是不是 Teleport 把 scoped style 挪丢了，是不是 postcss-pxtorem 把 375px 转成 rem 后受浏览器字号影响。真正查到 Vue runtime 后

有些 UI 细节很小，但会把页面质感一下拉下来。比如弹窗里有一组网格按钮，默认看着居中；鼠标移进去，右侧滚动条出现，按钮突然往左挤了一点。滚动条只有几像素宽，用户未必能说出原因，但会觉得界面在抖。 这类问题的核心通常是滚动条改变了 scrollport 的宽度。只要内容排版依赖 clientWidth，原生滚动条在 hover 时出现或消失，就可能让 grid、居中按钮、两端对齐布局重新计算。 最

<NuxtImg> 很容易被当成一个更高级的 <img>。名字像，写法也像，迁移时看起来只是把标签换一下。 这次问题就出在这里：一批组件私有图片从 <img> 换成 <NuxtImg> 后，本地开发环境里图片突然打不开了。原始图片 URL 明明可以直接访问，但页面里经过 Nuxt Image 处理后变成了 404。 结论先放前面：<NuxtIm

Vue / Nuxt Devtools 里的 Open in editor 本来是一个很顺手的入口：点一下组件或文件路径，IDE 直接跳到对应行。最近它在本机突然不好用了，表现是找不到 WebStorm，或者没有打开当前正在用的那套 WebStorm。 这个问题不在 Vue 组件，也不在 Nuxt 页面。真正卡住的是本机编辑器发现逻辑和 JetBrains Toolbox 的安装路径没有

在家办公、周末排查问题，或任何不在公司办公网络里的场景，机器经常需要同时连上两套网络：一套公司客户端负责访问内网服务，一套外网代理负责日常上网和公开资料访问。理想状态是内网和外网各走各的路，实际开了 Clash Verge Rev 的 TUN 模式后，公司内网域名可能会先被 Clash 的 DNS 接管，最后落到 198.18.x.x 这样的 fake-ip 上。表面上看，公司客户端已经连上了，真

这次整理是从 source/_posts 的扫读体验开始的。 文章少的时候，把文件名直接写成公开 URL 的标题段很自然。比如： source/_posts/static-site-cache-control-oss.md source/_posts/mobile-webview-remote-debugging-android-ios.md 看到文件名，就能猜到文章 URL。这个关系很直接，也