芯火镇 开发日志

• ✅ Vue 3 + TypeScript + Vite 前端，Express 5 + SQLite 后端
• ✅ PixiJS v8 渲染 2D 像素小镇：tilemap、角色、寻路、虚拟摇杆
• ✅ NPC 数据驱动架构 + LLM 每日生活日志
• ✅ 黑屏、加载画面竞态这两场硬仗，都在 2026/8/5 前后打完
• ✅ 版本推进到 v0.16（MiniMap + 昼夜循环 + 位置追踪）

---

2026/7/20

一天把地基全铺完：

• ✅ 项目结构初始化，Vue 3 + TypeScript + Vite 前端
• ✅ Express 后端 + health check
• ✅ 数据库 schema、NPC 种子数据、示例日志
• ✅ NPC REST API
• ✅ PixiJS 小镇地图（先用 CSS 占位建筑）
• ✅ DiceBear 像素头像 + 关系可视化
• ✅ README 与环境变量示例
• ✅ 前端重写为 2D 像素风游戏

同日踩的坑（全是 v8 版本差异）：

• ✅ fix: PixiJS v8 scaleMode API 变了
• ✅ fix: 角色精灵图的列数算错，图切歪了
• debug: 加 console 日志看资源加载 —— 老办法但管用
• ✅ fix: 重写 Game.ts，把错误处理补上

---

2026/7/22

• ✅ 完整游戏引擎：玩家、NPC、相机、寻路、虚拟摇杆
• ✅ fix: 实时同步、摇杆开关、NPC 点击判定
• ✅ NPC 详情面板重做，角色数据补充
• ✅ DayTimeline 组件：横向 NPC 活动时间线
• ✅ NPC 关系系统（数据 + 面板展示）
• ✅ NPC 数据驱动改造：配置全部下沉到 JSON
• ✅ 接入开源 tilemap 与 32x32 精灵（24 个角色）

心得：NPC 数据一旦 JSON 化，后面加角色、加关系就是改数据的事，不用再动渲染代码。

---

2026/8/4

这是密集迭代的一天，UI 与动效整批推进：

• ✅ NPC 系统大改版 + 地图更新 + 日志（journal）系统
• 日记本组件先 revert，准备重新实现 UI 效果
• ✅ 骨架屏 shimmer、侧边栏 AutoAnimate、NPC 面板 spring 过渡
• ✅ 粒子系统：萤火虫 / 尘埃 / 流星三种，鼠标交互排斥
• ✅ HUD 增强、时间线增强、日志导航按钮金色光晕
• ✅ 全局微交互：hover 位移、弹性缩放、Toast 通知、点击粒子爆裂
• ✅ 加载画面：金色标题发光 + 进度条 + 淡出过渡

晚上遇到加载画面竞态：

• ✅ fix: readyState 检查 + 3 秒兜底强制消失

---

2026/8/5

黑屏大战

一整天都在和"打开一片黑"搏斗，一步一个坑：

1. ✅ fix: PixiJS v8 init 时把 canvas 从 DOM 移除了 → 重新挂回去
2. ✅ fix: 还是黑屏 → 改成手动创建 canvas 再挂载
3. ✅ fix: 加载画面误删 #app → 改用 CSS 隐藏替代 remove()，去掉 vue-router 直接渲染
4. ✅ cleanup: 加载画面改 display:none，移除调试日志
5. ✅ v0.14 — FIX BLACK SCREEN：直接移掉加载画面 HTML，先让画面出来再说
6. ✅ v0.15 — 用 Vue 重写加载画面，顺手清干净 console.log
7. ✅ v0.16 — MiniMap + 昼夜循环 + 位置追踪
8. ✅ 加了自动化开发进度追踪和定时任务

教训：黑屏问题上我绕了好几圈，其实第一步就该把所有"花活"（加载画面）关掉，先确认画布本身活着，再一层层加回去。排查顺序反了，白白多花半天。

---

待办

• 好友系统、日志续跑、日记本 UI 重新实现
• better-sqlite3 是原生模块，换 Node 版本必须 npm rebuild better-sqlite3，否则直接启动失败 —— 这个坑踩过一次就够了