墨逸斋

盼历 · 原型 v4（日子结晶 · 协作说明） ​

v4 在 v3 的编辑排版之上，把「货架」改成了日子结晶：每颗结晶做成一张小日历页（类别红头 + 虚线撕痕），在左边轻轻浮动；点一下会沿弧线飞进右边的好日子册，也可以直接拖进去。册子是一块贴纸板——收下的一张张贴上去、微微歪着，不是列表；册子里的日子可以再放回。

预览地址：https://moyi.fan/panli/v4/shelf.html （部署后生效） 完整源码包下载：https://moyi.fan/panli/panli-v4.zip

页面 ​

  • home.html — 盼头首屏：巨型倒数、日历牌（有轻微指针视差）、再往后、今年进度
  • shelf.html — 日子结晶：分类筛选 + 浮动的日历页卡片 + 好日子册贴纸板（拖拽 / 点击飞入 / 放回）
  • year.html — 年度日历：12 个月发丝线网格
  • assets/style.css — 全部样式；结晶页样式在文件末尾 v4：日子结晶 区块
  • assets/blocks.js — 数据与逻辑：CATS 类别、BLOCKS 方块库、FAMILY 家人、TRIPS 单次事件、规则展开
  • assets/icons.js — lucide 线性图标（内联、跟随 currentColor）
  • assets/fonts/ — 字体子集（Noto Serif SC 400/600、Playfair Display 400/500）

交互实现（改的时候看这里） ​

  • 浮动：每张卡片外层 .crystal-outer 用 CSS 动画 floaty，幅度/周期/相位由内联变量 --amp/--dur/--delay 随机；悬停暂停浮动并轻微抬起
  • 点击飞入：flyToAlbum() 用 Web Animations 沿弧线（中间点上抬 72px）飞向册子落点，结束后调 commitAdd()
  • 拖拽：pointerdown → pointermove 超过 7px 进入拖拽，克隆一个 .crystal-ghost 跟随指针；落在册子上松手 → 继续飞行入册，否则弹回原处
  • 放回：册子里悬停出现「×」，贴纸淡出后重新出现在结晶区
  • 贴纸板：册子用点阵纸底 + 每张贴纸随机 ±2° 旋转 + 顶部一条半透明胶带（.sticker__tape），排列成错落的贴纸板
  • 无障碍：结晶区支持键盘 Tab + Enter 飞入；prefers-reduced-motion 下跳过飞行动画、直接入册

内容怎么改 ​

  • 换文案 / 预置方块：改 assets/blocks.js 里的 BLOCKS（icon、名称、slogan、频率、rule）
  • 换配色：改 assets/style.css 顶部的 :root 与 blocks.js 里的 CATS
  • 新增方块：往 BLOCKS 加一项，icon 名从 https://lucide.dev 挑（需内联进 icons.js），rule 五种写法见 v1/v3 README
  • 浮动幅度：改 renderField() 里的 rnd(5, 9)（px）与 rnd(4.8, 7.4)（秒）

小提示 ​

  • 字体是子集（只含原型里出现的字），换文案时如有生僻字会回退到系统宋体，属正常
  • 所有交互是原生 JS，无框架

版本管理约定 ​

  • 大改版复制上一版目录为 v5、v6 再改，旧版保留可对比
  • 在 ../index.html 的版本列表里登记新版本
  • 部署跟着 moyi.fan 现有流程走（vitepress build docs）