墨逸斋

盼历 · 原型 v6（插画版 · 协作说明） ​

v6 在 v5 的自由画布上做了两件事：

  1. 每个日子配一张插画：19 个日子各有一张统一风格的 SVG 小图（Twemoji，扁平插画，CC-BY 4.0），一眼就懂"这是什么日子"
  2. 改成左右布局：左边是自由漂浮的日历页画布，右边是整面墙的好日子册——收下的日子像贴纸一样贴上去

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

页面 ​

  • home.html — 盼头首屏：巨型倒数、日历牌（指针视差）、再往后、今年进度
  • shelf.html — 日子结晶：左侧自由画布（插画日历页悬浮）+ 右侧好日子册（点击飞入 / 拖拽入册 / 放回）
  • year.html — 年度日历：12 个月发丝线网格
  • assets/img/ — 19 张插画（Twemoji SVG，按 emoji 码位命名）
  • assets/style.css — 全部样式；结晶页样式在文件末尾 v6：左画布 · 右好日子册 区块
  • assets/blocks.js — 数据与逻辑：CATS、BLOCKS（含 art 插画码位、glyph 大字符备用）、FAMILY、TRIPS、规则展开
  • assets/fonts/ — 字体子集（Noto Serif SC 400/600、Playfair Display 400/500）

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

  • 散布：scatter() 按左侧画布尺寸算格子，hash() 给每颗日子稳定的抖动与角度；转屏自动重排
  • 浮动：.leaf-wrap 的 floaty 动画，幅度/周期/相位由内联变量控制；悬停暂停并抬起
  • 点击飞入：flyToBook() 沿弧线飞向右侧册子，超时兜底提交状态
  • 拖拽：指针移动超过 7px 进入拖拽，克隆 .leaf--ghost 跟随；落在册子上松手即收下，否则弹回
  • 放回：册子里悬停出现「×」，贴纸淡出后回到画布
  • 响应式：≤1020px 自动改为上下布局（画布流式网格 + 册子在下方）

内容怎么改 ​

  • 换文案 / 预置日子：改 assets/blocks.js 里的 BLOCKS（art 是插画文件码位、name、freq、rule）
  • 换插画：把同名的 SVG 放进 assets/img/ 即可；插画统一采用 Twemoji 风格（CC-BY 4.0）
  • 换配色：改 assets/style.css 顶部 :root 与 blocks.js 里的 CATS
  • 新增日子：往 BLOCKS 加一项，art 填 Twemoji 码位（如 1f95f）并从 https://github.com/twitter/twemoji 下载对应 SVG

小提示 ​

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

版本管理约定 ​

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