2026 技术

碧蓝档案手办收集

把《碧蓝档案》170 款手办的价格、比例、厂商和发售月份收进一个静态画廊,按角色翻、按日历蹲、勾选收藏并算账。

MewKon · ·482 字 ·阅读 1 分钟
React TypeScript Vite

把《碧蓝档案》全部手办整理成画廊的静态站:按角色翻、按发售月份排、勾选收藏并自动算账。想买手办的时候不用再在四个网站之间来回横跳。

首页角色图鉴
首页:128 位角色按社团分组,光晕照着游戏 UI 画的。

做了什么

  • 170 款手办的价格、比例、厂商、发售月份统一到一处,多币种并列
  • 按角色浏览,或直接搜手办名、厂商、原型师
  • 发售日历按月排布,已发售与未发售分开
  • 标记「已拥有 / 想要」,统计件数、总花费,按厂商和类型拆解;数据只存 localStorage
我的收藏
收藏页:勾了 12 只之后,件数、总花费、厂商和类型分布自己算好。
发售日历
发售日历:按月排布,蹲补款不会漏。

技术栈

Vite 8 + React 19 + TypeScript 5.9,路由用 HashRouter,样式是 CSS Modules 加 CSS 变量,动效交给 motion。没有后端,数据和图片都是构建时打进去的静态资源,整个站丢到任意静态托管上就能跑。数据来自 HobbyLink Japan、SchaleDB、hpoi 与 Good Smile Company,抓成 JSON 随代码提交。

纯粹的自用工具,非营利,与 NEXON、Yostar 及各厂商均无关联,图片版权归各自权利方所有。