晚上继续写了下昨天的日记，想着插入一首网易云的 VIP 歌曲，但现状是不能播放。我在想如何识别它是可以播放的呢，以及可否将链接替换成我自己服务器的地址（我手动上传一个）？

说干就干，曾经我是用国内服务器作为跳板检测歌曲能否播放的，我把这个代码恢复之后发现网易貌似是直接把我服务器的 IP 给封杀了，拿浏览器登录我自己账号都提示“网络太拥挤，请稍后再试”，因此没法获取歌曲能否播放了。

服务器不能打开估计得整一个跳板服务器，这样搞访问起来极其不稳定不说，还可能掉链子。我想能不能凭歌曲接口本身的信息去检查，一番 G00gle 搜索后还是在我熟悉的 老项目文档 下找到了相关信息，这个名为 fee 的字段引起了我的关注。

• 0: 免费或无版权
• 1: VIP 歌曲
• 4: 购买专辑
• 8: 非会员可免费播放低音质，会员可播放高音质及下载

我拿自己歌单下的歌曲试了下，的确属实，只要是 0 和 8 的歌曲都能在国内直接播放，反之不行。但此时群友看到了我发的消息，表示手机能直接播放我发的 VIP 歌曲链接（但是 45 秒的试听），我去！这直接从 404 变成可试听，浏览体验已经是质的提升啊！但是鉴于我国内服务器还是不能访问网易云播放相关的接口，模拟手机端 UA 返回歌曲链接的方案目前还是没法实现，可惜可惜！

晚上打算继续上传一些相册图片，结果发现相册页面的图片资源一直在转圈圈，非常奇怪。我此前写了一个图片懒加载组件，在客户端完成加载后，理应触发 onLoad 事件消除加载中的状态。我起初怀疑是浏览器的 Bug，结果写了一个纯 JS 的版本验证了下发现一切正常，怀疑是 onLoad 在图片加载之后设置，导致没有触发。@戴兜 说可能就是水合的问题，解决办法很简单，使用 onMounted 检查一下图片的 complete 属性就可以了，看上去现在的组件逻辑应该改成默认 loading=false，检测到非 complete 再设置成 true 的效果。

还记得之前的 日记 提到过，Nuxt 的生产环境下会给 App.vue 文件的第一层组件样式额外打包了一份样式输出在 Head 里面，出现一个样式被另一个相同样式覆盖的情况。 @戴兜 大佬说修改配置项 Inline Styles 可以去除相关输出。看上去这是它内置的优化机制，主要是为了提高首屏速度（但是文档也没解释这个到底有什么用）。我后续对比了一下有和无的首屏速度，基本上没有多少差异，用户无明显感知（Lighthouse 前两张截图白屏），反倒是用户网络延迟的因素导致网站访问卡顿的影响较大。

第三个问题则是日常编码的时候遇到的，新版的 Vue VSC 扩展貌似在 JSX 下有 Bug，输入常用引入项（例如 ref 和 onMounted）都没法自动 import 在文件顶部，如果使用 SFC 模式则没问题，这种 Bug 就有点恶心人，也不知道该怎么反馈...

中午休息过程中借助 AI 的力量，继续完善了我的 iPhone 图片处理脚本，主要是对已处理内容的跳过判断，之前一月的图太多只传了一部分，后续增加的图还需要继续存放进来，弄好的文件就不需要反复再处理一次了。这是修改过的部分，关于实现中有关 Shell 的表达式细节，还参考阅读了 这篇文章。

# 遍历当前文件夹下的所有 heic 和 png 文件
for file in *.{HEIC,heic,PNG,png,JPG}; do
  # 跳过不存在的文件
  if [[ ! -f "$file" ]]; then
    continue
  fi

  # 检查输出文件是否已存在
  if [[ -e "output/$new_filename" ]]; then
    echo "Skipping existing file: output/$new_filename"
    continue
  fi
done

睡前依旧挂着崩铁，打开博客把友情链接简单过了一遍，又多了 1-2 个不能打开的网站了。还继续改了一下博客的 2023 总结文章，即便脚本越来越完善，这篇文章的图片依旧要还很久的债，也不知道又要多长时间才能补完...

今天首先按照昨天的想法完善了下 方块播放器 项目，更换成 Animation API 来控制动画，再完善了一些代码组织结构，功能基本和之前一致，水项目也算是对学习积累的一种实践嘛。

晚上约了 @王同学 去看了宫崎骏的最新作《你想活出怎样的人生》，全程看着有点懵，结果到后半才勉勉强强看出点哲理。貌似就是在讲那个虚拟世界的问题，问主角到底愿意选择一个不完美的现实世界（毕竟主角前半转学被欺负了），还是选择沉浸在自己创造的“完美”的世界（甚至现实世界的人物还可以在这里以跨时间的形式存在）。别的不说，明明宫崎骏的画风看着一点都不瑟，怎么感觉男主抱着自己老妈的样子这么温馨，让我感觉这么酸啊~

之后我们两个去吃了深夜的 M 记，他点了一份 66 元的三人套餐，我起初感觉量会不会太大，结果他一人吃了两人的份量了，哈哈哈哈。

前天给公司的浏览器插件项目做了个弹出动画，原理是给页面插入 style 标签，包含一段拼接的 CSS 动画，感觉不够优雅，这不一早看了这篇 讨论，发现有个新的 Animation API 更好用。

// Before
const styleEl = document.createElement("style");
styleEl.innerHTML = `
  @keyframes panel-animate {
    from {
      opacity: 0;
      transform: translate(${fromLeft}px, ${fromTop}px) scale(0);
    }
    to {
      transform: translate(${toLeft}px, ${toTop}px);
    }
  }

  .has-animate {
    transform-origin: top left;
    animation: panel-animate .5s forwards;
  }
`;

// After
const scaleAni = panel.animate(
  [
    { opacity: 0, transform: `translate(${fromLeft}px, ${fromTop}px) scale(0)` },
    { transform: `translate(${toLeft}px, ${toTop}px)` },
  ],
  { duration: 500 },
);

这样修改完之后可读性更好，有 TS 类型加成，还不需要担心类名冲突等等一系列问题，我打算趁机翻新一下我的 方块播放器 的相关代码了。

晚上在写一个通过浏览器插件注入脚本到页面截取 B 站 API 数据，实现追番进度获取和转存到小窝后端的功能。目前已经完成了在插件获取进度的功能，后端更新进度的接口还没开干呢。

主要逻辑就是创建一个用于注入页面的 JS 文件，使用 Object.defineProperty 改写 XHR 的方法以劫持数据，通过 setInterval 待多个 API 均被请求则计算进度，待后续提交到服务器。注意需要指定启动模式为 document_start，否则人家全加载完了你才注入就拿不到接口数据了。

export const config: PlasmoCSConfig = {
  run_at: "document_start",
  matches: ["https://www.bilibili.com/bangumi/media/*"],
  world: "MAIN",
};

期间还参考了下面的内容，主要的业务实现在这里就不多概述了。

• Chrome 扩展程序获取 ResponseBody 的最佳方案 - 改写 XHR（使用示例篇）
• Injecting into the main world - Plasmo Docs
• 匹配模式 - Chrome For Developers

本来要继续日常原神崩铁的，但原神有相当一部分要刷体力的任务都给我同事了（他在帮我刷本换圣遗物，就顺带换掉体力了）