画板
一块本地画板：画架构图、流程图与草图，多张画板分开管理，随时导出图片或全屏演示。
画板管理
入口：左侧导航「画板」（/whiteboard）；编辑器 /whiteboard/:id。
列表卡片显示画板缩略图（矢量小图，随内容自动更新），空画板显示占位图标；支持新建、重命名与删除。
| 操作 | 说明 |
|---|---|
| 新建 | 填名字即建一张空白画板，建完直接进入编辑器 |
| 重命名 / 删除 | 卡片悬浮操作；删除是软删除，不可恢复 |
| 自动保存 | 停笔约 1 秒后写回，工具栏显示「已保存 / 保存中 / 未保存」 |
绘制工具
| 工具 | 快捷键 | 用法 |
|---|---|---|
| 选择 | V | 点击选中，拖拽移动，拖动四角/四边手柄缩放；空白处拖拽框选 |
| 平移 | H 或按住空格 | 拖动画布平移视图 |
| 矩形 | R | 拖拽画出矩形节点 |
| 椭圆 | O | 拖拽画出椭圆节点 |
| 菱形 | D | 拖拽画出菱形（判断 / 分支） |
| 文本 | T | 点击放置文本，立即进入编辑；双击已有元素也可编辑文字 |
| 画笔 | P | 自由手绘折线，适合批注与草图 |
| 连接线 | L | 从一个元素拖到另一个元素：端点没对准也会自动吸附（朝另一端方向约 28px 容差），并停在松手那一侧的边框上，拖动时目标方块会高亮预告；默认按正交折线自动布排（出线段 → 转向 → 入线段），工具栏可切回直线；双击可加标签 |
| 橡皮 | E | 点击元素即删除 |
工具栏右侧可调描边色、填充色、线宽与字号：未选中时作用于新建元素，选中时直接改当前选中的元素。
编辑操作
| 操作 | 快捷键 |
|---|---|
| 多选 | Shift + 点击，或空白处框选 |
| 删除选中 | Delete / Backspace |
| 复制选中 | Ctrl + D |
| 微移 | 方向键（Shift + 方向键大步长） |
| 层级 | Ctrl + ] 置顶 / Ctrl + [ 置底 |
| 撤销 / 重做 | Ctrl + Z / Ctrl + Shift + Z |
| 全选 | Ctrl + A |
形状里的文字会自动换行并居中；连接线会跟着两端元素移动，不需要手工重新拉线。选中连接线后两端各有一个圆点手柄，拖圆点可以重新吸附到方块，拖到空白处则变回自由端点。
折线路由与避让
折线模式下，连接线从边框「垂直出来 → 转向 → 垂直进入」另一端边框，不会斜穿方块；同一个方向的多条线会自动错开中线，避免糊成一条。切换「直线」即回到直线连接。端点的落点由松手位置决定，元素移动后仍贴在原来那一侧的边框上。
视图与导出
| 操作 | 说明 |
|---|---|
| 缩放 | 滚轮以指针为中心缩放；工具栏显示当前比例，也可一键重置 / 适应视图 |
| 横向滚动 | Shift + 滚轮 |
| 网格吸附 | 工具栏网格开关：开启时新建与移动按 20px 网格对齐（手绘画笔不吸附，保证跟手） |
| 导出 PNG | 2x 缩放位图，适合贴文档 / 发消息 |
| 导出 SVG | 矢量图，可再编辑 |
演示模式
点工具栏「演示」进入全屏：自动把整张画板适配到屏幕，← → 在多张画板间翻页，Esc 退出。演示期间仍可用滚轮缩放、Shift + 滚轮平移，但不会改动画板内容。
自动布局
工具栏「自动布局」按连接关系重排图形：先选方向（横向 LR / 纵向 TB）再点按钮，手绘批注保持原位，连接线端点自动跟随；布局后可以「撤销」回到原来的摆位。画布里没有连接关系时按钮不可用。
数据与接口
画板整体存一行记录，场景（元素 + 视口）以 JSON 存放，接口遵循统一响应与分页约定：
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/whiteboards?page=1&pageSize=20 | 画板列表（按更新时间倒序，不含场景正文） |
| GET | /api/whiteboards/{id} | 画板详情（含场景 JSON） |
| POST | /api/whiteboards | 新建画板；场景为空时用空白场景 |
| PUT | /api/whiteboards/{id} | 更新名称与 / 或场景（局部字段） |
| DELETE | /api/whiteboards/{id} | 软删除 |
场景在上传前会校验：必须是合法 JSON 对象且不超过 4 MB，名称最长 100 字符；不合法的请求会返回业务错误，不会写坏已有画板。