• 继续将 Cupcake 项目迁移到 React Router 7

  • 主要是继续 Review 一下 AI 写的代码
  • 并且修复迁移到 Tailwind 4 后的样式异常

• 迁移完成后自己根据昨天 AI 的建议优化了一些样式

  • 再优化一些此前没发现的细节问题，比如移动版的日记列表图片展示有问题
  • 以及重新设计了首页样式，虽然感觉还是很丑
  • 我发现我已经不知道怎么设计了，可能还是因为我的数据固定在那，限制了展示内容的多样性

• 上线部署，跑 Lighthouse 测试评分，发现一个问题

  • 静态资源走了 http/1.1

    • 服务器用的是 Nginx 1.22.0
    • 修改 Nginx 配置 listen 443 ssl 改为 listen 443 ssl http2 解决

  • 图片资源未使用高效格式

    • 替换请求图片的 URL 到我的图片压缩服务即可
    • 其实它还是报错了，说我返回的图片分辨率比实际显示的大，算了不管了

• 小窝后端 Ext 新增流式输出的生成标题接口

• 小窝后台的一些功能调整和修复

  • 新增异步任务列表功能，将日记标题生成逻辑接入
  • 补充音乐播放器遗漏的切歌功能
  • 重命名组件优化目录架构（新增 shared 和 ui 目录，区分两种类型的组件）
  • 其中异步任务列表这个需求稍微复杂一些，我列好需求和交互细节让 AI 生成计划（手动校正）之后执行，效果嘎嘎好，彻底被 AI 淘汰了

• 关于前端项目 components 的目录架构，目前我是这样区分的，页面组件依旧是在 pages 里面

  • biz：各业务逻辑
  • shared：多业务共享组件
  • ui：各处可重用 UI 组件
  • layout：布局组件
  • router：路由组件

• 继续游玩《异环》，打怪和各种异象委托

  • 和此前玩《原神》开宝箱一样，搜刮大世界的怪和收集品

• 给小窝“项目”功能增加了主题色字段，后台同步增加对应的编辑功能

  • 前端展示部分使用了 cqw 单位（Container Query Width），确保能根据容器尺寸自适应
  • 兼容性需要最低 Chrome 105 或者 Safari 16.4，现代浏览器基本可用，参考
  • 修改了几版颜色样式，结果都说原版好看，我初心是想着统一成色块会更简洁的
  • 收集项目的 SVG 标志素材，重新用 Affinity Design 调整排版，似乎这些很费时间的步骤都不知道如何让 AI 来做，纯手工做了半天
• 替换 B 站接口请求参数，解决视频获取失败（提示封控）问题
• 继续玩《原神》空月之歌第四幕魔神任务，主要讲述了猎月人自己的故事
• 明天看看如何迁移 Cupcake 项目到最新的 React Router SSR 模式（Remix 合并了过去）

今天就是签离职协议跑路的日子了，也是在公司的最后一天。上午在工位备份了在公司电脑存的一些个人文件，并且收拾个人物品。原本想着能不能低价回购公司的设备（一手的 M1 8G Mac Mini）拿去自用，比如跑 OpenClaw 或者是 CICD 的应用，但是老大回绝了。

中午和同事（之后就是前同事了）去炫了一顿萨莉亚，也是我得了荨麻疹之后这么久第一次吃“垃圾食品”，我选择了非海鲜的食品，确保减少组胺的形成。

回到公司之后摊出行军床睡一觉（似乎并没有睡着，老哥依旧发出巨大的打鼾声），收拾完最后的东西之后租了个小车（想起之前跑路也是这样），驾车回家，告别了这快速又短暂的 4 年工作生涯。

接下来我打算休息一阵子，顺便关注一下行业和岗位的趋势，看看有没有新的机会。期间我应该会先收拾一下自己的烂摊子（没写的文章和没修的图），也或许会出一次远门享受一下人间烟火，总之先这样吧。

• 小窝前端细节功能优化

  • 切换主题会记录 Cookie 一周，改成现代的 CookieStore API 实现

  • 修复灯箱组件缺失的展现动画

    • 之前迁移到纯 CSS 之后没留意，其实是 Selector 的问题
    • 因为使用了 CSS Modules，使用全局的动画需要标记符，从 :global 改成 &:global 即可
    • 之前没问题可能是某个库的解析逻辑有兼容适配吧

  • 增加了三个不同的背景底图

    • 水月的图用了 AI 二次创作，原来的立绘有半透明的部分不是很好消除
    • 直接整体填充成单色后，投影部分会显得很奇怪
    • 我让 AI 换一套服装并去掉投影解决了问题，甚至直接独树一帜还规避了版权问题（
• 调色和简修「希特菈莉」的返图

• 修复了小窝前端一个困扰我挺久的 Bug

  • 在登录状态下切换页面，部分会出现 Footer 跑到顶上的情况
  • 排查发现是控制台报错 Hydration completed but contains mismatches 这个错误导致
  • 解决办法是写了个 useIsLogin Hooks，确保页面渲染的时候走的是客户端后期触发，虽然感觉有点傻

公司项目发布生产环境居然遇到报错构建失败，简单查了下报错信息，主要是这个错误导致的：

[ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: @parcel/[email protected], [email protected], [email protected], [email protected], [email protected]

Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

看上去是 pnpm 升级了一套阻止自动执行 preinstall 脚本的二次验证机制，之前不是 Axios 出现过供应链攻击，这次它升级了一个 V11 的大版本，估计就是解决这个问题的。

我们有好几个 DockerFile 对应不同的环境，测试环境正常，因为用了 Node 18 的镜像，而生产则是用了 Node 22，这次 pnpm 的升级 要求最低版本 Node 22，于是只有生产环境构建出错。

起初我想到的解决方法是强行降级 pnpm 到 V10，用 GPT 调整构建流程，改成 npm install pnpm@10 发现并不管用，反复试了好几次，在我的 Mac 电脑上尝试构建，还会遇到 esbuild 报错 /app/node_modules/.bin/../esbuild/bin/esbuild: line 0: syntax error: unterminated quoted string，GPT 说是二进制包的架构有问题，大概率是 COPY 了 node_modules 之后的问题，也没解决，拿实际的 CI 环境去测试了。

后续第二天直接按照报错，给 DockerFile 的步骤里面加了句 pnpm approve-builds 发现就好了，也没任何包需要同意的，挺诡异的。原先我还以为需要增加 --all 属性，因为 官方文档 有写，实际上这个选项是不存在的...

# 修改前
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && pnpm i; \
  else echo "Lockfile not found." && exit 1; \
  fi

# 修改后
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then \
    corepack enable && \
    pnpm approve-builds && \
    pnpm i; \
  else echo "Lockfile not found." && exit 1; \
  fi