开发记录
PixBox v0.3.0 开发日志
记录 PixBox 从需求设计、桌面端交互实现到自动发布的四天开发过程，以及 OAuth、图片请求和性能优化中的关键取舍。
关联作品：PixBox
一款 Windows 桌面端的 Pixiv 每日存图助手：浏览关注/推荐流，筛选作品，一键保存原图并自动生成压缩备份。
技术栈：Tauri 2 + Vue 3 + TypeScript + Rust。
仓库：github.com/YamaArashiHZ/PixBox · 开发周期：2026-07-26 ~ 07-29
背景与动机
每天都要从 Pixiv 的关注和推荐列表里手动挑约 20 张图，流程很繁琐：原图存一份到固定文件夹，全部图压到 6MB 以内另存一份，还要回头在 Pixiv 上逐个收藏作为“已存过”的标记。
干脆写一个桌面应用把这个流程自动化：列表里标记已收藏状态做去重、保存后自动收藏、原图 + 压缩备份一次完成。
技术选型
| 层 | 技术 | 理由 |
|---|---|---|
| 壳 | Tauri 2 | 体积小、Rust 后端方便做网络与压缩 |
| 前端 | Vue 3 + Vite + Pinia | 轻量，适合手写交互 |
| UI | 手写 CSS（CSS 变量主题） | 不引重型组件库，风格可控 |
| HTTP | Rust reqwest | 统一走代理、带 Referer、并发控制 |
| 压缩 | Rust image crate |
原生性能，压图不卡 UI |
| 凭据 | Windows 凭据管理器 | refresh_token 不落明文文件 |
关键设计原则：网络请求全部在 Rust 侧，前端只做展示与交互；图片域名强制 Referer: https://www.pixiv.net（否则 403）。
开发时间线
Day 1 · 07-26：骨架与登录
上午把完整设计方案（pixbox.md）定稿：需求、技术栈、OAuth 流程、API 端点、UI 布局一次敲定。v0.1.0 首个提交后，当天完成三件大事：
- UI 重绘 + 代理开关 + OAuth WebView2 登录（应用内嵌窗口抓取
pixiv://回调 code） - OAuth 登录修复：正确凭据、窗口关闭时序、前端错误提示
- 主页布局重构：同高 flex 布局 + 卡片等比缩放 + 已选托盘吸底
首次踩坑：Pixiv 的
i.pximg.net图片必须带 Referer，不带直接 403；OAuth PKCE 的code_verifier与回调时序稍不注意就会让登录窗口白屏。
Day 2 · 07-27：交互打磨
全天都在啃浏览体验：
- 分段控件滑动指示器 + 浮窗常驻 + 刷新按钮状态区分
- 修复页面切换竞态与 token 过期自动跳转
- 图片卡片四角按钮重构 + 多图折叠展开
- 滚动加载优化 + 右键直达图片边缘
- Feed 缓存 + 渐进缩略图加载：重复浏览不重复请求
- 推荐页三段分级过滤 + shimmer 占位 + 缩略图事件队列
这天的教训：滚动列表的性能问题 90% 来自“一次渲染全部”，缓存和事件队列比任何动画优化都值钱。
Day 3 · 07-28：功能冲刺
最密集的一天，从凌晨干到晚上：
- 大图预览翻页与缩放：翻页滑动动画 + 滚轮缩放 + 拖拽平移 + 翻页预加载；两级缓存（磁贴 LRU + 会话内存）
- 应用内切换收藏状态（收藏/取消收藏），与“已保存”去重闭环
- 多图帖展开组：整帖选择、封面卡就地转换、描边画框布局
- 保存下载升级为流式 + 字节级进度追踪；压缩图独立保存 + 路径冲突检测拦截
- 保存路径日期占位符模板（如
pixiv/2026/07-28/）+ 设置页 UI 重构 + 实时预览 - R-18 模式接入 Pixiv 日榜 API，推荐 + 日榜合并去重；卡片显示 AI 生成 / R-18 标签徽章
- 推荐流切换至 Web Discovery AJAX，与 pixiv.net 网页端推荐同源（解决了 App API 推荐不稳定的问题）
Day 4 · 07-29：工程化与发布
最后一天从“能用”到“可发布”：
- 凭据从 JSON 文件迁移到 Windows 系统密钥库，Token 刷新容错加固
- 接入 release-please + GitHub Actions 自动构建发布；引入签名验证的应用内自动更新
- 修复发布流水线的一系列问题：草稿版本解析、手动重试、GitHub 资产地址校验
- 规范 README、添加 MIT 许可证
- 应用图标与侧边栏品牌标识替换，v0.3.0 收尾
版本发布记录
| 版本 | 日期 | 亮点 |
|---|---|---|
| v0.1.0 | 07-26 | 首个可用版本：UI 骨架 + OAuth 登录 + 关注/推荐流 |
| v0.2.0 | 07-29 | 保存流式进度、路径模板、多图整帖选择、R-18 日榜、应用内收藏、自动更新 |
| v0.2.1 | 07-29 | 修复发布流程：版本同步、草稿解析、手动重试 |
| v0.2.2 | 07-29 | 校验更新清单 GitHub 资产地址 |
| v0.3.0 | 07-29 | 应用图标与侧边栏品牌标识 |
关键决策与踩坑记录
- OAuth PKCE：使用 pixiv-android 的公开 client 凭据 + PKCE 换取 token，
refresh_token持久化用于静默刷新（access_token 约 1 小时有效）。 - Referer 是命门：Pixiv 图片域名严格校验来源，所有图片请求统一附加 Referer，封装在 Rust 下载层，前端无需关心。
- 凭据不落盘：token 与 PHPSESSID 存 Windows 凭据管理器；系统密钥库防御不了本机恶意软件，故应用内保留“退出登录清除凭据”。
- 推荐流同源化：App API 的推荐内容不稳定，最终切换到网页端 Discovery AJAX 接口，与浏览器看到的推荐一致。
- 发布全自动：release-please 管理版本号与 changelog，CI 构建安装包、签名、上传 GitHub Releases，应用内检查签名更新。发布流程本身修了 4 次才稳。
数据一览
- 开发周期：4 天（2026-07-26 ~ 07-29）
- 提交数：46（conventional commits）
- 版本：v0.1.0 → v0.3.0（4 个 patch/minor 发布）
- AI 辅助会话：31 个（含探索、设计、实现、修复）
本文档由项目会话记录与 git 历史自动整理生成，用于个人网站开发日志栏目。