planogram-tools

可视化编辑 / 生成 卧柜 (chest cabinet) planogram 的 npx 小工具。零依赖、启动即用。

• 正向：定义柜体尺寸 → 划分列(shelf) → 每列划分 basket → 在 basket 中填 skuId → 填写 planogramId / planogramRefMedia → 导出符合目标 schema 的 JSON。
• 反向：导入一份已有的 planogram JSON，直接在画布上渲染出来，拖拽 / 编辑手动调整后再导出。

使用

# 新建一个空白 planogram
npx planogram-tools

# 载入已有文件编辑（可直接“保存到文件”写回同一路径）
npx planogram-tools examples/case3.json

# 指定端口 / 不自动打开浏览器
npx planogram-tools case3.json --port 5000 --no-open

在本仓库内可直接运行：

node bin/cli.js examples/case3.json

启动后浏览器打开 http://localhost:4173/。

界面与操作

• 左栏：planogramId、planogramRefMedia，柜体 block 的 x/y/w/h，加列 / 删列，以及“参考底图”（仅用于描摹对位，不写入 JSON）。
• 画布：
  • 拖动列之间的竖线调整列宽；
  • 拖动 basket 之间的横线调整高度；
  • 点击某个 basket 选中并编辑。
• 右栏：编辑选中列的宽度 / 增删 basket；编辑选中 basket 的高度与 skuId（逗号分隔，可多个）；底部 原始 JSON 文本框可实时查看，也可粘贴 JSON 后点“从文本框应用”。
• 顶栏：新建 / 导入 JSON / 下载 JSON / 复制 JSON / 保存到文件（仅当启动时带了文件参数）。

数据模型与不变量

编辑器内部以「柜体 + 每列宽度 + 每 basket 高度」为可编辑量，位置(x/y)在渲染时自动顺排，因此始终满足：

• 所有列宽之和 = 柜体宽 block.w；
• 每一列内所有 basket 高度之和 = 柜体高 block.h。

整数分配采用「最大余数法」，保证像素相加严格等于总量。对于连续排布的数据（如示例），导入 → 导出完全无损（已用 examples/case3.json 验证一致）。

导出格式

{
  "planogramId": "...",
  "planogramRefMedia": "...",
  "blocks": [
    {
      "blockNumber": 1,
      "blockBoundingBox": { "x": 54, "y": 20, "w": 498, "h": 191 },
      "shelves": [
        {
          "shelfNumber": 1,
          "shelfBoundingBox": { "x": 54, "y": 20, "w": 82, "h": 191 },
          "baskets": [
            {
              "basketNumber": 1,
              "basketBoundingBox": { "x": 54, "y": 20, "w": 82, "h": 64 },
              "products": [ { "skuId": "486709" } ]
            }
          ]
        }
      ]
    }
  ]
}

• 一个 basket 内多个 SKU 输出为单个 product、skuId 用逗号连接（如 "486699,486674"），与示例一致。
• 导入时会把每个 product 的 skuId 按逗号拆分收集；当前编辑器聚焦单柜体（blocks[0]）。