纸面游戏生成器 Design

Goal

把现有“舒尔特方格生成器”升级成前端 JS 执行的纸面游戏生成器。页面仍保留 /tools/schulte-grid/ permalink 以兼容旧链接，但标题和导航改为“纸面游戏生成器”。工具继续使用 VuePress + Canvas 生成 PNG，不使用后端，不新增依赖。

Scope

• 页面：docs/07.工具/40.舒尔特方格生成器.md
• 页面组件：docs/.vuepress/components/PaperGameTool.vue
• A4 布局逻辑：docs/.vuepress/components/PaperGameLayoutLogic.js
• 题目生成逻辑：docs/.vuepress/components/PaperGameGenerators.js
• 复用舒尔特序列逻辑：docs/.vuepress/components/SchulteGridLogic.js
• 测试：新增布局和题目生成 node 测试，更新 wiring 测试。
• 导航：Tools nav 和工具概览文案改为“纸面游戏生成器”。
• 仍不写 sidebar: auto，继承 vdoing structuring sidebar。

Layout System

布局器使用 mm 作为逻辑单位，Canvas 渲染时转换到 300dpi A4 像素。

• A4 portrait：210 x 297mm
• 默认页边距：15mm
• 可用区：180 x 267mm
• 基础网格：2 cols x 6 rows
• 单元尺寸：90 x 44.5mm
• gutter：4mm
• block padding：4mm

块规格：

• XS: 1 x 1
• S: 1 x 2
• M: 2 x 2
• L: 2 x 3
• XL: 2 x 4

布局算法第一版使用 first-fit top-down：组件按面积从大到小排序，同面积按 priority 排序，从左上开始找第一个能放下的位置；当前页放不下时创建下一页。用户在页面中自由拼槽位时，渲染调用会开启 preserveOrder，按槽位顺序排版，保证默认 S S / S S / M 时迷宫稳定在页面下方。布局器输出每个组件的 page_index、col、row、col_span、row_span、x_mm、y_mm、width_mm、height_mm。

Game Types

第一版接入三类题型：

• schulte_number -> S
• schulte_letter -> S
• sudoku_9x9 -> S
• maze_easy -> M

舒尔特数字和字母复用已有随机洗牌逻辑。9x9 数独使用固定合法底盘加空格生成基础题，并与舒尔特一样使用 S 号块；数独难度控制挖空数量。迷宫使用前端 JS 生成可达迷宫，并使用 M 号横向块；迷宫难度控制迷宫网格尺寸。暂不做答案页、复杂题库和 PDF。

Layout Control

UI 主交互不是模板下拉，而是一个可点击的布局控件。默认页面为 4 个 S 槽位和 1 个横向 M 槽位：

• 上两行：S1、S2
• 中两行：S3、S4
• 下两行：M1 横跨两列

点击 S 槽位可选择 数字舒尔特、字母舒尔特、9x9 数独。点击 M 槽位可选择 迷宫。默认布局为 数字舒尔特、数字舒尔特、9x9 数独、字母舒尔特、迷宫。

布局控件支持自由拼：

• 添加 S 小块。
• 添加 M 横块。
• 删除已有槽位，至少保留一个槽位。
• 按当前槽位顺序进行 A4 自动排版，放不下时自动分页。

工具设置区拆成三类规格：

• 舒尔特规格：3x3 到 6x6。
• 迷宫难度：入门 19x13、简单 23x15、普通 29x19、困难 35x23、挑战 41x27。
• 数独难度：简单 36 空、普通 45 空、困难 54 空。

工具同时提供快捷模板按钮：

• 舒尔特专项：6 个 S 槽位，使用数字/字母舒尔特，不带迷宫。
• 每日混合：默认布局。
• 迷宫专项：3 个 M 槽位，生成一页 3 个迷宫。

Rendering

每个块统一渲染 header 和 body。header 包含题型名和简短说明。body 由题型渲染器绘制：

• 舒尔特：body 中居中绘制正方形网格。
• 9x9 数独：body 中居中绘制 9x9 网格，空格留白，给定数字居中。
• 迷宫：body 中用紧凑块头和更小内边距绘制墙和通路，并标注 Start / Finish。

Testing

Node 测试覆盖：

• 布局：6 个 S 一页；maze_easy + sudoku_9x9 同页；用户槽位保序排版时迷宫在底部；sudoku_6x6 + 3 schulte_letter 自动分页；非法 span 报错。
• 题目生成：舒尔特字母/数字结构，9x9 数独结构、空格和难度，迷宫入口出口、难度选项和可达路径。
• wiring：页面标题、组件引用、布局控件、舒尔特规格、迷宫难度、数独难度、快捷模板、无后端调用、无 sidebar: auto。

最终执行：

• node scripts/test_paper_game_layout_logic.js
• node scripts/test_paper_game_generators.js
• node scripts/test_schulte_grid_logic.js
• node scripts/test_schulte_grid_wiring.js
• npm run build